159 lines
3.1 KiB
Vue
159 lines
3.1 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 cateList" :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" v-for="(item, index) in 20" :key="index">
|
||
<view>9：00 - 9：30</view>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</u-popup>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {getCatrgory} from '@/api/store'
|
||
export default {
|
||
name: "appointment-time",
|
||
props: {
|
||
value: {
|
||
type: Boolean,
|
||
required: true
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
mobile: '',
|
||
selectIndex: 0,
|
||
cateList: []
|
||
};
|
||
},
|
||
created() {
|
||
this.getCatrgoryFun()
|
||
},
|
||
methods: {
|
||
getCatrgoryFun() {
|
||
getCatrgory().then(res => {
|
||
if (res.code == 1) {
|
||
this.cateList = res.data
|
||
}
|
||
});
|
||
},
|
||
|
||
changeActive(index) {
|
||
const {cateList} = this
|
||
this.selectIndex = index
|
||
},
|
||
|
||
// 提交数据
|
||
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> |