drink-answer-wechat-uniapp-24-9-2/pages/index/selectAppointment.vue

<template>
	<view class="home">
		<view class="content" style="padding-top: 25vh;">
			<span class="font-bold">预约日期和时间</span>
			<view class="flex-center mt-60" style="gap: 50rpx;">
				<view class="time-wrapper">
					<span style="color: #dcb066;">2024年</span>
				</view>
				<view class="time-wrapper">
					9月20日
				</view>
				<view class="time-wrapper">
					08：00
				</view>
			</view>
			<span class="font-bold mt-60">预约信息</span>
			<view class="flex-center mt-40" style="gap: 30rpx;">
				<view class="flex-center">
					<input class="time-wrapper1" type="text" v-model="firstName" />
					<span>姓</span>
				</view>
				<view class="flex-center">
					<input class="time-wrapper1" type="text" v-model="lastName" />
					<span>名</span>
				</view>
				<view class="">
					<uv-drop-down ref="dropDown" sign="dropDown_1" text-active-color="#3c9cff"
						:extra-icon="{name:'arrow-down-fill',color:'#666',size:'26rpx'}"
						:extra-active-icon="{name:'arrow-up-fill',color:'#3c9cff',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="type" type="2" :label="dropItem('type').label"
							:value="dropItem('type').value">
						</uv-drop-down-item>
						<uv-drop-down-item name="vip_type" type="1" label='VIP文档' :value="dropItem('vip_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>
			<view class="flex-col query" style="gap: 0rpx;">
				<view class="flex-sa">
					<view class="btn3" @click="pre">
						返回
					</view>
					<view class="btn3" @click="next">
						取消预约
					</view>
				</view>
				<text class="second-color">欢快无限饮&nbsp;&nbsp;饮酒有限度</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				firstName: '',
				lastName: '',
				// 表示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: '#2878ff',
					child: [{
						label: '综合排序',
						value: 'all'
					}, {
						label: '最新发布',
						value: 'new'
					}, {
						label: '低价优先',
						value: 'money'
					}]
				},
				type: {
					label: '文档格式',
					value: 'all',
					activeIndex: 0,
					color: '#333',
					activeColor: '#2878ff',
					child: [{
						label: '全部',
						value: 'all'
					}, {
						label: 'PDF',
						value: 'pdf'
					}, {
						label: 'WROD',
						value: 'word'
					}, {
						label: 'PPT',
						value: 'ppt'
					}]
				},
				vip_type: {
					label: 'VIP文档',
					value: 0,
					activeIndex: 0
				}
			}
		},
		onPageScroll() {
			// 滚动后及时更新位置
			this.$refs.dropDown.init();
		},
		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];
			}
		},
		methods: {
			pre() {
				uni.navigateTo({
					url: '/pages/index/greetP5'
				})
			},
			next() {
				uni.navigateTo({
					url: '/pages/index/selectAppointment'
				})
			},
			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 lang="scss" scoped>
	.query {
		position: relative;
		bottom: -45vh;
	}

	.mt-30 {
		padding-top: 30vh;
	}

	.time-wrapper {
		border: 4rpx solid #dcb066;
		padding: 16rpx 26rpx;
		border-radius: 20rpx;
	}

	.time-wrapper1 {
		border: 4rpx solid #dcb066;
		margin-right: 20rpx;
		padding: 14rpx 20rpx;
		width: 80rpx;
		border-radius: 15rpx;
		text-align: center;
	}
</style>