241 lines
8.1 KiB
Vue
241 lines
8.1 KiB
Vue
<template>
|
||
<view class="content">
|
||
<view class="top-v" v-show="storeInfo"><text class="storeName">预约【{{ storeInfo.name }}】</text><text class="moreStore" @click="toMoreStore">切换门店</text></view>
|
||
|
||
<view class="info-v">
|
||
<view class="title">
|
||
｜请选择预约日期
|
||
</view>
|
||
<view v-if="dateArr && dateArr.length > 0" class="list-v">
|
||
<view @click="dateClick(index)" v-for="(item, index) in dateArr" :key="index" :class="[dateIndex==index?'activeItem':'item-v']">
|
||
<view>{{item.week}}</view>
|
||
<view>{{ item.date }}</view>
|
||
</view>
|
||
</view>
|
||
<none v-if="!dateArr.length" :isLoading="false" :custom-style="{ padding: '30px 10px' }" tips="暂无可预约日期"></none>
|
||
</view>
|
||
<view class="info-v">
|
||
<view class="title">
|
||
｜请选择预约时段
|
||
</view>
|
||
<view v-if="timeArr && timeArr.length > 0" class="list-v">
|
||
<view @click="timeClick(index)" v-for="(item, index) in timeArr" :key="index" :class="[timeIndex==index?'activeItem' : (bookable.indexOf(item.time) >= 0 ? 'item-v' : 'disable') ]">
|
||
<view>{{ item.time }}</view>
|
||
</view>
|
||
</view>
|
||
<none v-if="!timeArr.length" :isLoading="false" :custom-style="{ padding: '30rpx 10rpx' }" tips="暂无可预约时段"></none>
|
||
</view>
|
||
<view class="btn" @click="doSubmit">确定预约</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import * as BookApi from '@/api/book'
|
||
import * as SettingApi from '@/api/setting'
|
||
import None from '@/components/none'
|
||
export default {
|
||
components: {
|
||
None
|
||
},
|
||
data() {
|
||
return {
|
||
// 预约项目ID
|
||
bookId: null,
|
||
// 当前预约详情
|
||
bookInfo: null,
|
||
dateArr: [ { week: '星期六', date : '8月17号' }, { week: '星期日', date : '8月18号' }],
|
||
timeArr: [ '09:00-12:00', '14:00-15:00' ],
|
||
dateIndex: 0,
|
||
timeIndex: 100000,
|
||
storeInfo: null,
|
||
bookable: [],
|
||
isCheck: false
|
||
}
|
||
},
|
||
onLoad(options) {
|
||
// 记录预约ID
|
||
this.bookId = options.bookId;
|
||
// 获取预约详情
|
||
this.getBookDetail();
|
||
},
|
||
onShow() {
|
||
uni.removeStorageSync('bookData');
|
||
this.getStoreInfo();
|
||
this.dateIndex = 0;
|
||
this.timeIndex = 100000;
|
||
},
|
||
methods: {
|
||
// 获取预约项目详情
|
||
getBookDetail() {
|
||
const app = this;
|
||
app.isLoading = true;
|
||
BookApi.detail(app.bookId)
|
||
.then(result => {
|
||
app.bookInfo = result.data.bookInfo;
|
||
app.dateArr = app.bookInfo.dateList;
|
||
app.timeArr = app.bookInfo.timeList;
|
||
app.dateClick(app.dateIndex);
|
||
})
|
||
.finally(() => app.isLoading = false)
|
||
},
|
||
// 切换门店
|
||
toMoreStore() {
|
||
this.$navTo('pages/location/index');
|
||
},
|
||
// 获取店铺详情
|
||
getStoreInfo() {
|
||
const app = this;
|
||
SettingApi.storeDetail()
|
||
.then(result => {
|
||
app.storeInfo = result.data.storeInfo;
|
||
})
|
||
},
|
||
// 确定预约
|
||
doSubmit() {
|
||
let app = this;
|
||
if (!app.isCheck) {
|
||
app.$toast("请选择预约时间！");
|
||
return false;
|
||
}
|
||
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: '确定预约【'+app.storeInfo.name+'】吗?',
|
||
success: function (res) {
|
||
if (res.confirm) {
|
||
let dates = app.bookInfo.serviceDates.split(",");
|
||
let week = app.dateArr[app.dateIndex].week;
|
||
let data = { bookId: app.bookId, week: week, date : dates[app.dateIndex], time: app.timeArr[app.timeIndex].time };
|
||
uni.setStorageSync('bookData', data);
|
||
app.$navTo('pages/book/submit');
|
||
}
|
||
}
|
||
});
|
||
},
|
||
// 选择时段
|
||
timeClick(index) {
|
||
const app = this;
|
||
if (app.bookable.indexOf(app.timeArr[index].time) < 0) {
|
||
return false;
|
||
}
|
||
app.timeIndex = index;
|
||
app.isCheck = true;
|
||
},
|
||
// 选择日期
|
||
dateClick(index) {
|
||
const app = this;
|
||
app.dateIndex = index;
|
||
app.timeIndex = 100000;
|
||
let dates = app.bookInfo.serviceDates.split(",");
|
||
let times = app.timeArr;
|
||
BookApi.bookable({ bookId: app.bookId, date: dates[app.dateIndex], time: '' })
|
||
.then(result => {
|
||
if (result.data) {
|
||
app.bookable = result.data;
|
||
} else {
|
||
app.bookable = [];
|
||
}
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.content {
|
||
.top-v {
|
||
margin: 20rpx;
|
||
.storeName {
|
||
font-weight: bold;
|
||
font-size: 32rpx;
|
||
}
|
||
.moreStore {
|
||
float: right;
|
||
color: $fuint-theme;
|
||
border: 1rpx solid $fuint-theme;
|
||
padding: 6rpx;
|
||
border-radius: 20rpx;
|
||
font-size: 24rpx;
|
||
}
|
||
}
|
||
padding-bottom: 50rpx;
|
||
}
|
||
.getInfo-v {
|
||
background-color: #fff;
|
||
padding: 50rpx 30rpx;
|
||
border-radius: 20rpx;
|
||
width: 600rpx;
|
||
.getInfo-btn{
|
||
background-color: $fuint-theme;
|
||
color: #fff;
|
||
padding: 20rpx;
|
||
border-radius: 10rpx;
|
||
margin-top: 30rpx;
|
||
text-align: center;
|
||
}
|
||
}
|
||
.btn {
|
||
margin: 20rpx auto;
|
||
background-color: $fuint-theme;
|
||
padding: 20rpx;
|
||
border-radius: 40rpx;
|
||
text-align: center;
|
||
color: #fff;
|
||
width: 680rpx;
|
||
font-size: 30rpx;
|
||
margin-top: 50rpx;
|
||
}
|
||
|
||
.info-v {
|
||
padding: 20rpx;
|
||
background-color: #fff;
|
||
margin-bottom: 20rpx;
|
||
.title {
|
||
font-weight: bold;
|
||
color: $fuint-theme;
|
||
}
|
||
.list-v {
|
||
padding: 20rpx;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
.item-v {
|
||
border-radius: 12rpx;
|
||
font-size: 30rpx;
|
||
margin-top: 10rpx;
|
||
margin-left: 10rpx;
|
||
font-weight: bold;
|
||
width: 30%;
|
||
border: 1rpx solid #ccc;
|
||
text-align: center;
|
||
padding: 20rpx;
|
||
}
|
||
.activeItem {
|
||
font-size: 30rpx;
|
||
border-radius: 12rpx;
|
||
margin-top: 10rpx;
|
||
margin-left: 10rpx;
|
||
width: 30%;
|
||
font-weight: bold;
|
||
background-color: $fuint-theme;
|
||
border: 1rpx solid #ccc;
|
||
color: #fff;
|
||
text-align: center;
|
||
padding: 20rpx;
|
||
}
|
||
.disable {
|
||
border-radius: 12rpx;
|
||
font-size: 30rpx;
|
||
margin-top: 10rpx;
|
||
margin-left: 10rpx;
|
||
font-weight: bold;
|
||
width: 30%;
|
||
border: 1rpx solid #ccc;
|
||
text-align: center;
|
||
color: white !important;
|
||
background-color: rgb(188, 188, 188) !important;
|
||
padding: 20rpx;
|
||
}
|
||
}
|
||
}
|
||
</style>
|