popularize-front/pages_my/activeList.vue

<template>
	<view class="travelList">
		<view class="head-box"></view>
		<uv-navbar autoBack title="活动列表" leftIconColor="#fff" :bgColor="bgColor" height="100rpx" :titleStyle="{color:'#fff'}"></uv-navbar>
		<view class="content">
			<view class="drop">
				<uv-drop-down ref="dropDown" text-color="#fff" text-size="30rpx" sign="dropDown_1" text-active-color="#fff"
					:extra-icon="{name:'arrow-down-fill',color:'#666',size:'26rpx'}"
					:extra-active-icon="{name:'arrow-up-fill',color:'#fff',size:'26rpx'}" :defaultValue="defaultValue"
					:custom-style="{padding: '0 30rpx'}" @click="selectMenu">
					<uv-drop-down-item name="order" type="2" :label="dropItem('order').label" :value="dropItem('order').value">
					</uv-drop-down-item>
					<uv-drop-down-item name="place" type="2" :label="dropItem('type').label" :value="dropItem('type').value">
					</uv-drop-down-item>
					<uv-drop-down-item name="type" type="2" :label="dropItem('type').label" :value="dropItem('type').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>
			<view class="info cardStyle_">
				<view class="left">
					<image src="https://img0.baidu.com/it/u=4274003247,920124130&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1031"
						alt="">
				</view>
				<view class="right">
					<view class="detailed">
						<view class="title">夏日去撒野旅游计划～</view>
						<view class="date">2024.10.28 10:00</view>
						<view class="address">成都市东丽湖露营地32号</view>
					</view>
					<view class="data">
						<text>¥233.00</text>
						<text>11/40</text>
						<text class="btn">已开票</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import Navbar from '@/pages/components/Navbar.vue'
	// import { globalMixin } from '../pages/mixins/globalMixin';
	export default {
		onPageScroll() {
			// 滚动后及时更新位置
			this.$refs.dropDown.init();
		},
		// mixins: [globalMixin],
		//       components:{
		//           Navbar
		// },
		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];
			}
		},
		data() {
			return {
				bgColor:'transparent',
				// 表示value等于这些值，就属于默认值
				defaultValue: [0, 'all', '0'],
				// 筛选结果
				result: [{
					name: 'order',
					label: '全部',
					value: 'new'
				}],
				// { name: 'order', label: '最新发布', value: 'new' }
				activeName: 'order',
				order: {
					label: '全部',
					value: 'all',
					activeIndex: 0,
					color: '#333',
					activeColor: '#FF4546',
					child: [{
						label: '综合排序',
						value: 'all'
					}, {
						label: '最新发布',
						value: 'new'
					}, {
						label: '低价优先',
						value: 'money'
					}]
				},
				type: {
					label: '时间',
					value: 'all',
					activeIndex: 0,
					color: '#333',
					activeColor: '#FF4546',
					child: [{
						label: '全部',
						value: 'all'
					}, {
						label: 'PDF',
						value: 'pdf'
					}, {
						label: 'WROD',
						value: 'word'
					}, {
						label: 'PPT',
						value: 'ppt'
					}]
				}
			}
		},
		methods: {
			change(e) {
				console.log('弹窗打开状态：', e);
			},
			/**
			 * 点击每个筛选项回调
			 * @param {Object} e { name, active, type } = e
			 */
			selectMenu(e) {
				const {
					name,
					active,
					type
				} = e;
				this.activeName = name;
				// type 等于1 的需要特殊处理：type不等于1可以忽略
				if (type == 1) {
					this.clickItem({
						name: 'vip_type',
						label: 'VIP文档',
						value: e.active ? 1 : 0
					});
				} else {
					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)}`
				})
			}
		}
	}
</script>
<style scoped lang="scss">
	.head-box {
		background: url('@/static/image/nav-bg.png') no-repeat;
		background-size: 100% 100%;
		width: 100%;
		height: 534rpx;
		position: absolute;
	}
	.content {
		padding-top: calc(var(--status-bar-height) + 110rpx);
	}
	/deep/.uv-sticky__content {
		.uv-drop-down {
			justify-content: normal;
			border: 0;
			background: transparent;
		}
	}

	.travelList {
		// margin-bottom: 500rpx;

		.content {
			.info {
				position: relative;
				margin: 10rpx 32rpx 36rpx;
				;
				padding: 35rpx 0 35rpx 24rpx;
				border-radius: 26rpx;

				.right {
					.data {
						display: flex;
						justify-content: space-between;
						align-items: center;

						.btn {
							background: #381615;
							color: $uni-color-primary;
							padding: 10rpx 40rpx;
							border-radius: 30rpx 0px 0px 30rpx;
						}
					}
				}
			}
		}
	}
</style>