Jingde-town-wechat-uniapp/pages_order/service/tellList.vue

<template>
	<!-- 达人和讲述 -->
	<view class="tell">
		<navbar :title="dict.title" leftClick @leftClick="$utils.navigateBack" />

		<view class="tell-top" v-if="dict.screen">
			<!-- <view>级别</view>
			<view>遗产点</view> -->

			<uv-drop-down ref="dropDown" sign="dropDown_1" text-active-color="#B12026"
				:extra-icon="{name:'arrow-down-fill',color:'#666',size:'26rpx'}"
				:extra-active-icon="{name:'arrow-up-fill',color:'#B12026',size:'26rpx'}" 
				:defaultValue="defaultValue"
				:custom-style="{padding: '0 auto'}" 
				@click="selectMenu">
				
				<uv-drop-down-item name="level" type="2" 
				:label="dropItem('level').label"
					:value="dropItem('level').value">
				</uv-drop-down-item>
				
				<!-- <uv-drop-down-item name="spot" type="2" 
				:label="dropItem('spot').label" 
				:value="dropItem('spot').value">
				</uv-drop-down-item> -->
				
				<uv-drop-down-item name="spot" type="1" 
				:label="dropItem('spot').label" 
				:value="dropItem('spot').value">
				</uv-drop-down-item>
			</uv-drop-down>
			<uv-drop-down-popup 
				sign="dropDown_1" 
				:click-overlay-on-close="true"
				:currentDropItem="currentDropItem" 
				@clickItem="clickItem"
				@popupChange="change"
			></uv-drop-down-popup>
		</view>

		<cardList :type="type" :result="result" :dict="dict" ref="cardList" :showRoleLevel="dict.showRoleLevel" />
		
		
		<selectionPopup 
		ref="selectionPopup"
		@select="select"/>
		
		<tabber />
	</view>
</template>

<script>
	import cardList from '../components/list/cardList.vue'
	import selectionPopup from '@/components/tourGuide/selectionPopup.vue'
	import { mapState } from 'vuex'
	export default {
		components: {
			cardList,
			selectionPopup,
		},
		data() {
			return {
				type: '',
				dict: {},


				// 表示value等于这些值，就属于默认值
				defaultValue: [0, 'all'],
				// 筛选结果
				result: [],
				activeName: 'level',
				level: {
					label: '级别',
					value: 0,
					activeIndex: 0,
					color: '#333',
					activeColor: '#B12026',
					child: [
						{
							label: '全部',
							value: 0,
						}, 
						{
							label: '金牌讲解员',
							value: 1
						},
						{
							label: '专业讲解员',
							value: 2
						},
					]
				},
				spot: {
					label: '遗产点',
					value: 'all',
					activeIndex: 0,
					color: '#333',
					activeColor: '#B12026',
					child: [
						{
							label: '全部',
							value: 'all'
						}, 
					]
				},
			}
		},
		computed: {
			dropItem(name) {
				return (name) => {
					const result = {};
					const find = this.result.find(item => item.name === name);
					if (find) {
						result.label = find.label;
						result.value = find.value;
					} else {
						result.label = this[name].label;
						result.value = this[name].value;
					}
					return result;
				}
			},
			// 获取当前下拉筛选项
			currentDropItem() {
				return this[this.activeName];
			},
			...mapState(['spotList']),
		},
		onLoad(args) {
			this.type = args.type
			this.dict = this.$config.dict[args.type]
		},
		onShow() {
			this.$nextTick(() => {
				this.$refs.cardList.getList()
			})
			
			
			let list = this.spotList
			.filter(n => n.categoryId == 0)
			.map(n => {
				return {
					label : n.spotName,
					value : n.spotName
				}
			})
			
			//设置遗产点
			this.spot.child = [
				{
					label: '全部',
					value: 'all'
				}, 
				...list
			]
		},
		onPullDownRefresh() {
			this.$refs.cardList.getList()
		},
		//滚动到屏幕底部
		onReachBottom() {
			this.$refs.cardList.loadMoreList()
		},
		methods: {
			change(e) {
			},
			/**
			 * 点击每个筛选项回调
			 * @param {Object} e { name, active, type } = e
			 */
			selectMenu(e) {
				const {
					name,
					active,
					type
				} = e;
				
				
				this.activeName = name;
				
				if(type == 1){
					this.$refs.selectionPopup.open()
					return
				}
				
				const find = this.result.find(item => item.name == this.activeName);
				if (find) {
					const findIndex = this[this.activeName]
					.child.findIndex(item => item.label == find.label && item
						.value == find.value);
					this[this.activeName].activeIndex = findIndex;
					
				} else {
					this[this.activeName].activeIndex = 0;
				}
			},
			/**
			 * 点击菜单回调处理
			 * @param {Object} item 选中项 { label,value } = e
			 */
			clickItem(e) {
				// 下面有重新赋值，所以用let
				let {
					label,
					value
				} = e;
				const findIndex = this.result.findIndex(item => item.name == this.activeName);
				if (this.defaultValue.indexOf(value) > -1 && this[this.activeName].label) {
					label = this[this.activeName].label;
				}
				// 已经存在筛选项
				if (findIndex > -1) {
					this.$set(this.result, findIndex, {
						name: this.activeName,
						label,
						value
					})
				} else {
					this.result.push({
						name: this.activeName,
						label,
						value
					});
				}
				this.result = this.result.filter(item => this.defaultValue.indexOf(item.value) == -1);
				
				
				// uni.showModal({
				// 	content: `筛选的值：${JSON.stringify(this.result)}`
				// })
				
				
				
				this.$nextTick(() => {
					this.$refs.cardList.getList()
				})
			},
			select(n){
				this.clickItem({
					label : n.spotName,
					value : n.spotName
				})
			},
		}
	}
</script>


<style scoped lang="scss">
	.tell {
		/deep/ .uv-drop-down{
			justify-content: space-around;
			width: 750rpx;
		}
		.tell-top {
			display: flex;
			justify-content: left;
			align-items: center;
			height: 80rpx;
			background-color: #fff;
			border-top: 2rpx solid #D0D0D0;
			border-bottom: 2rpx solid #D0D0D0;

			view {
				flex: 1;
				margin-left: 5%;
			}
		}
	}
</style>