180 lines
3.6 KiB
Vue
180 lines
3.6 KiB
Vue
<template>
|
|
<view>
|
|
<u-popup v-model="showPop" mode="bottom" border-radius="16" :safe-area-inset-bottom="true" :closeable="true">
|
|
<view class="appointment-time">
|
|
<view class="bold-700 lg u-p-t-24 u-p-b-24 u-text-center">选择预约时间</view>
|
|
<view class="block row" style="height: 700rpx;">
|
|
<view class="aside">
|
|
<scroll-view style="height: 100%;" scroll-y="true" scroll-with-animation="true">
|
|
<view style="padding-bottom: 200rpx;">
|
|
<block v-for="(item, index) in dateList" :key="index">
|
|
<view :class="'one-item sm ' + (index == selectIndex ? 'active bg-white' : '')" @click="changeActive(index)">
|
|
<text class="name">{{ item.name }}</text>
|
|
<view v-if="index == selectIndex" class="active-line bg-default"></view>
|
|
</view>
|
|
</block>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
|
|
<view class="main">
|
|
<scroll-view style="height: 100%" scroll-y="true" scroll-with-animation="true">
|
|
<view class="main-wrap u-m-t-32">
|
|
<view class="bg-white br16 row u-col-top u-m-b-24 nr" v-for="(item, index) in timeList" :key="index" @click="selectTime(index)">
|
|
<view>{{ item.start_time }}-{{ item.end_time }}</view>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</u-popup>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {yuyueTime} from '@/api/order'
|
|
|
|
export default {
|
|
name: "appointment-time",
|
|
|
|
props: {
|
|
value: {
|
|
type: Boolean,
|
|
required: true
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
mobile: '',
|
|
selectIndex: 0,
|
|
cateList: [],
|
|
dateList: [],
|
|
timeList: []
|
|
};
|
|
},
|
|
created() {
|
|
this.dateList = [
|
|
{'name': '今天'},
|
|
{'name': '明天'}
|
|
]
|
|
|
|
this.getYuYueTime()
|
|
},
|
|
methods: {
|
|
// 获取预约时间
|
|
getYuYueTime() {
|
|
const store_id = 1
|
|
yuyueTime({store_id}).then((res) => {
|
|
this.timeList = res.data
|
|
})
|
|
},
|
|
|
|
changeActive(index) {
|
|
const {cateList} = this
|
|
this.selectIndex = index
|
|
},
|
|
|
|
// 选择时间
|
|
selectTime(index) {
|
|
const day = this.dateList[this.selectIndex].name
|
|
const time_id = this.timeList[index].id
|
|
const time = this.timeList[index].start_time + '-' + this.timeList[index].end_time
|
|
this.$emit('update', {
|
|
day,
|
|
time_id,
|
|
time
|
|
})
|
|
},
|
|
|
|
// 提交数据
|
|
handleSubmit(e) {
|
|
const {mobile} = this
|
|
if (!mobile) return this.$toast({
|
|
title: '请授权手机号'
|
|
})
|
|
|
|
this.$emit('update', {
|
|
mobile
|
|
})
|
|
|
|
this.showPop = false
|
|
this.$emit('close')
|
|
},
|
|
|
|
// 关闭弹窗
|
|
onClose() {
|
|
this.showPop = false
|
|
this.$emit('close')
|
|
}
|
|
},
|
|
computed: {
|
|
showPop: {
|
|
get() {
|
|
return this.value
|
|
},
|
|
set(val) {
|
|
this.$emit('input', val)
|
|
}
|
|
}
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.appointment-time {
|
|
height: 800rpx;
|
|
max-height: 800rpx;
|
|
}
|
|
|
|
.block {
|
|
height: 100vh;
|
|
}
|
|
.aside {
|
|
width: 180rpx;
|
|
flex: none;
|
|
height: 100%;
|
|
background-color: #fdfdfd;
|
|
|
|
.one-item {
|
|
position: relative;
|
|
text-align: center;
|
|
height: 108rpx;
|
|
line-height: 108rpx;
|
|
|
|
&.active {
|
|
color: $-color-theme;
|
|
font-size: 26rpx;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.active-line {
|
|
position: absolute;
|
|
width: 6rpx;
|
|
height: 30rpx;
|
|
left: 4rpx;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
}
|
|
}
|
|
}
|
|
|
|
.main {
|
|
height: 100%;
|
|
flex: 1;
|
|
|
|
.main-wrap {
|
|
position: relative;
|
|
padding: 0 20rpx;
|
|
.goods {
|
|
padding-bottom: 200rpx;
|
|
.info {
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin: 0 16rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |