crm-app-vue3/pages/clue/components/sort.vue

<template>
	<view>
		<u-popup :show="showSort" mode="bottom" closeable @close="handleClose">
			<scroll-view scroll-y :style="{ height: mapHeight }" @touchmove.stop="() => {}">
			<view class="sort_wrap" :style="{ height : mapHeight }">
				<view class="sort_way">
					<view class="title">
						排序方式
					</view>
					<view class="option_item" @click="handleChangeSort('asc')"
						:class="{ active : value.sort == 'asc' }">
						<text>正序排序</text>
						<u-icon name="checkbox-mark" color="#4c8afe"></u-icon>
					</view>
					<view class="option_item" @click="handleChangeSort('desc')"
						:class="{ active : value.sort == 'desc' }">
						<text>倒序排序</text>
						<u-icon name="checkbox-mark" color="#4c8afe"></u-icon>
					</view>
					<view class="title" style="margin-top: 30rpx;">
						排序属性
					</view>
					<view class="option_item" v-for="(item,index) in sortParams" :key="index" 
					@click="handleChangeSortField(item.value)" :class="{ active : value.sortField == item.value }">
						<text>{{item.text}}</text>
						<u-icon name="checkbox-mark" color="#4c8afe"></u-icon>
					</view>
				</view>
				<u-tabbar :fixed="true" inactiveColor="#ffffff" class="case_tabbar" :placeholder="true"
					:safeAreaInsetBottom="true">
					<u-tabbar-item text="重置" :customStyle="{backgroundColor : '#fff'}"
						class="uTabbarItem close_btn" @click="handleReset"></u-tabbar-item>
					<u-tabbar-item text="确定" :customStyle="{backgroundColor : '#4c8afe'}"
						class="uTabbarItem" @click="handleEnter"></u-tabbar-item>
				</u-tabbar>
			</view>
			</scroll-view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		props: {
			value: {
				type: Object,
			},
			mapHeight : {
				type : String,
			},
		},
		emits : ["getList"],
		data() {
			return {
				showSort: false,
				sortParams: [{
					value: 1,
					text: '创建时间'
				}, {
					value: 2,
					text: '分配时间'
				},{
					value: 3,
					text: '跟进时间'
				}]
			}
		},
		mounted(){
		},
		methods: {
			handleClose(){
				this.showSort = false;
			},
			handleReset(){
				this.value.sort = undefined;
				this.value.sortField = undefined;
			},
			handleEnter(){
				this.$emit("getList");
				this.showSort = false;
			},
			handleChangeSort(sort) {
				this.value.sort = sort;
			},
			handleChangeSortField(value){
				this.value.sortField = value;
			},
			show() {
				this.showSort = true;
			}
		},
	}
</script>

<style lang="scss" scoped>
	.sort_wrap {
	  padding: 20px;
	  box-sizing: border-box;
	  overflow: scroll;
	
	  .title {
	    font-size: 18px;
	    color: #202020;
	  }
	
	  .option_item {
	    display: flex;
	    justify-content: space-between;
	    align-items: center;
	    font-size: 15px;
	    padding: 18px 0;
	    border-bottom: 1px solid #eeeef2;
	    color: #606060;
	    &:last-child{
	      border: none;
	    }
	  }
	
	  .active {
	    color:#4c8afe;
	
	    ::v-deep & .u-icon__icon {
	      display: block;
	    }
	  }
	
	  ::v-deep .u-icon__icon {
	    display: none;
	    font-weight: bold !important;
	    font-size: 19px !important;
	  }
	}


	.case_tabbar {
		.uTabbarItem {
			::v-deep .u-tabbar-item__text {
				font-size: 18px;
			}
		}

		.close_btn {
			::v-deep .u-tabbar-item__text {
				font-size: 18px;
				color: #606060 !important;
			}
		}
	}
</style>