You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
249 lines
6.0 KiB
249 lines
6.0 KiB
<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">欢快无限饮 饮酒有限度</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>
|