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

<template>
	<view>
		<up-popup :show="showSort" mode="bottom" closeable @close="handleClose">
			<scroll-view scroll-y :style="{ height: mapHeight }" class="sort_scroll">
			<view class="sort_wrap" :style="{ height : mapHeight }">
				<view class="sort_way">
					<view class="title">
						排序方式
					</view>
					<view class="option_item" @click="handleChangeSort('asc')"
						:class="{ active : valueModel.sort == 'asc' }">
						<text>正序排序</text>
						<up-icon name="checkbox-mark" color="#4c8afe"></up-icon>
					</view>
					<view class="option_item" @click="handleChangeSort('desc')"
						:class="{ active : valueModel.sort == 'desc' }">
						<text>倒序排序</text>
						<up-icon name="checkbox-mark" color="#4c8afe"></up-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 : valueModel.sortField == item.value }">
						<text>{{item.text}}</text>
						<up-icon name="checkbox-mark" color="#4c8afe"></up-icon>
					</view>
				</view>
				<up-tabbar :fixed="true" inactiveColor="#ffffff" class="case_tabbar" :placeholder="true"
					:safeAreaInsetBottom="true">
					<up-tabbar-item text="重置" :customStyle="{backgroundColor : '#fff'}"
						class="uTabbarItem close_btn" @click="handleReset"></up-tabbar-item>
					<up-tabbar-item text="确定" :customStyle="{backgroundColor : '#4c8afe'}"
						class="uTabbarItem" @click="handleEnter"></up-tabbar-item>
				</up-tabbar>
			</view>
			</scroll-view>
		</up-popup>
	</view>
</template>

<script>
	export default {
		props: {
			modelValue: {
				type: Object,
				default: undefined,
			},
			value: {
				type: Object,
				default: () => ({}),
			},
			mapHeight : {
				type : String,
			},
		},
		emits : ["getList", "update:modelValue"],
		computed: {
			valueModel() {
				return this.modelValue != null ? this.modelValue : this.value;
			},
		},
		data() {
			return {
				showSort: false,
				sortParams: [{
					value: 1,
					text: '创建时间'
				}, {
					value: 2,
					text: '分配时间'
				},{
					value: 3,
					text: '跟进时间'
				}]
			}
		},
		mounted(){
		},
		methods: {
			handleClose(){
				this.showSort = false;
			},
			handleReset(){
				this.valueModel.sort = undefined;
				this.valueModel.sortField = undefined;
			},
			handleEnter(){
				this.$emit("update:modelValue", this.valueModel);
				this.$emit("getList");
				this.showSort = false;
			},
			handleChangeSort(sort) {
				this.valueModel.sort = sort;
			},
			handleChangeSortField(val){
				this.valueModel.sortField = val;
			},
			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,
	    ::v-deep & .up-icon__icon {
	      display: block;
	    }
	  }

	  ::v-deep .u-icon__icon,
	  ::v-deep .up-icon__icon {
	    display: none;
	    font-weight: bold !important;
	    font-size: 19px !important;
	  }
	}

	.sort_scroll {
	  /* 去掉 touchmove.stop 后保证内部可点击，避免 H5 上事件被拦截 */
	}

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

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