Skip to content

G
gxpt_wechat
Commit 8bc4e6ca by zhangzhen
Options

细节优化

parent 14b31562
Showing with 276 additions and 760 deletions
pages.json
......@@ -32,7 +32,8 @@
"path": "pages/order/order",
"style": {
"navigationBarTitleText": "房间预约",
"navigationStyle": "default"
"navigationStyle": "default",
"backgroundColorTop": "white"
}
},
{
......
pages/order/order.vue
<template>
<view class="order-page">
<view class="flex-row header">
<view class="part-2">
<text class="tips"><text class="text-bold">预定须知:</text> 预定成功后，请按预约时间及时到店消费，若无法及时到店消费，可提前取消订单</text>
<view class="part-left">
<image :src="roomInfo.images.length?roomInfo.images[0]: assetsPath+'/banner.jpg'" mode="aspectFill">
</image>
</view>
<view class="part-right">
<text
class="text-title text-xl text-bold">{{roomInfo.name||'凑角'}}{{roomInfo.roomType?'【'+roomTypeEnum[roomInfo.roomType]+'】':''}}</text>
<view v-if="roomInfo.roomStat >= 3" class="status-icon-box">
<view class="status-box" :class="'status-box-1'">
<text>维护中</text>
......@@ -23,7 +23,7 @@
<image class="img" :src="assetsPath+'/fa_icon_1.png'" mode="widthFix"></image>
</view>
<view v-else-if="roomInfo.recordsStatus>=0" class="status-icon-box">
<view v-else-if="roomInfo.recordsStatus>=0" class="status-icon-box">
<view class="status-box" :class="'status-box-1'">
<text>{{recordsStatusEnum[roomInfo.recordsStatus]}}</text>
</view>
......@@ -37,31 +37,27 @@
</view>
</view>
<view class="part-left">
<image :src="roomInfo.images.length?roomInfo.images[0]: assetsPath+'/banner.jpg'" mode="widthFix">
</image>
</view>
</view>
<view class="tab-box">
<view v-for="(item,i) in orderTypeList" :key="i" class="tab-item" :class="{active:i ===index}"
@tap="onTypeChange(i)">
<text class="text-gray text-xl text-bold">{{item.label}}</text>
<view v-if="item.type == 2" class="hot-icon">
<view class="img-icon">
<image src="../../static/hot_icon.png" mode="widthFix"></image>
<view class="order-type-box">
<view class="tab-box">
<view v-for="(item,i) in orderTypeList" :key="i" class="tab-item">
<text class="text-gray text-xl">{{item.label}}</text>
<view class="hot-icon">
<view class="img-icon">
<image src="../../static/hot_icon.png" mode="widthFix"></image>
</view>
</view>
</view>
</view>
</view>
<view class="order-type-box">
<view class="flex-col date-content-box">
<view class="flex-row date-tips">
<text class="text-xl margin-right">选择日期</text>
<text class="text-lg margin-right">选择日期</text>
<text class="text-2">请先选择使用日期, 再勾选其他选项哦</text>
</view>
<view class="flex-row date-box">
<view class="bg-box" :style="{left:20*dateIndex+'%'}">
<image class="img" :src="assetsPath+'/calendar.png'" mode="scaleToFill"></image>
<image class="img" :src="assetsPath+'/calendar_2.png'" mode="scaleToFill"></image>
</view>
<view v-for="(item,k) in dateList" :key="k" class="flex-1 flex-col date-item"
:class="{active:dateIndex === k}" @tap="onDateChange(k)">
......@@ -73,46 +69,51 @@
</view>
<view class="flex-col data-content-box">
<view v-show="index==1" class="flex-col package-mode">
<view v-show="orderType==1" class="flex-col package-mode">
<view class="part-1">
<text class="text-title text-lg text-bold">套餐选择：</text>
</view>
<scroll-view scroll-x="true" class="scroll-view">
<view class="flex-row package-box">
<view v-for="(item,index) in packageMode" :key="index" class="flex-col item"
:class="{active: modeIndex===index}" @tap="onChangeMode(index)">
<text class="text-title">{{item.name}}</text>
<view class="flex-row" style="margin-top: 8upx;">
<!-- <text>{{item.duration}}小时/</text>-->
<text style="margin-bottom: 2upx;">￥</text>
<text class="text-bold text-xl">{{item.price}}</text>
<view class="flex-row package-box">
<view v-if="roomLabelList.length" class="room-label-list">
<view v-for="(item,index) in roomLabelList" :key="index" class="room-label-box"
@tap="onChangePackage(index)">
<view class="item" :class="{active: modeIndex===index}">
<text>{{item.labelDuration}}小时</text>
</view>
</view>
</view>
</scroll-view>
<view v-if="packageMode[modeIndex].remark" class="flex-col tip-box">
<text class="" style="margin-bottom: 12upx;">套餐说明：</text>
<text class="text-sm">{{packageMode[modeIndex].remark}}</text>
</view>
</view>
<view class="flex-col package-list">
<view v-for="(item,index) in packageMode" :key="index" class="package-list-box"
@tap="onChangePackage2(index)">
<view class="item" :class="{active: modeIndex2===index}">
<text>{{item.name}}</text>
</view>
</view>
</view>
<view v-show="orderType ===1 && index == 0" class="flex-col distance-mode">
<view class="distance-title">
<text class="text-title text-lg text-bold">时长选择：</text>
</view>
<view class="flex-1 distance-box">
<view v-for="(item,index) in distanceMode" :key="index" class="flex-col"
style="margin: 0 12upx;" @tap="onDurationChange(index)">
<view class="cu-tag radius" :class="index===distanceIndex? 'line-pink':'line-gray'">
<text>{{ index >= distanceMode.length-1 && !editDuration.length ? item.duration: item.duration+'小时'}}</text>
<text v-if="index >= distanceMode.length-1" class="cuIcon-edit text-lg"></text>
<view v-if="orderType ===1 && !roomLabelList.length && !packageMode.length"
class="flex-col distance-mode">
<view class="distance-title">
<text class="text-title text-lg text-bold">时长选择：</text>
</view>
<view class="flex-1 distance-box">
<view v-for="(item,index) in distanceMode" :key="index" class="flex-col"
style="margin: 0 12upx;" @tap="onDurationChange(index)">
<view class="cu-tag radius" :class="index===distanceIndex? 'line-pink':'line-gray'">
<text>{{ index >= distanceMode.length-1 && !editDuration.length ? item.duration: item.duration+'小时'}}</text>
<text v-if="index >= distanceMode.length-1" class="cuIcon-edit text-lg"></text>
</view>
</view>
</view>
</view>
</view>
<view v-if="orderType ===2 && index == 0" class="flex-col distance-mode"
style="margin: 40upx 20upx 40upx;">
</view>
<view v-if="orderType ===2" class="flex-col distance-mode" style="margin: 40upx 20upx 40upx;">
<view class="distance-title">
<text class="text-title text-lg text-bold">时长选择：</text>
</view>
......@@ -143,7 +144,7 @@
<view class="part-1">
<button class="cu-btn round" :class="orderType===1?'line-black':'line-gray'"
@tap="onSelectDate">
<text>{{startTime | resetStartTime}}</text>
<text>{{formatAllData.startTime}}</text>
<text class="cuIcon-edit"></text>
</button>
</view>
......@@ -153,7 +154,7 @@
<view class="part-1 part-3">
<button class="cu-btn round line-gray">
<text>{{endTime}}</text>
<text>{{formatAllData.endTime}}</text>
</button>
</view>
</view>
......@@ -177,10 +178,10 @@
</view>
</view>
<view class="date-point-box">
<view v-for="(item,k) in intervalList" :key="k" class="date-point-item"
<view v-for="(item,k) in formatAllData.list" :key="k" class="date-point-item"
v-if="k>=startHours && k<=endHours" @tap="onSelectDatePoint(item,k)">
<view class="date-point"
:class="item.status === 0 || (item.status==1 && item.m <59) ?'free':item.status==1 && item.m >=59?'used': item.status==2?'checked':'error'">
:class="item.status === 0 ?'free':item.status===1?'used': item.status==2?'checked':'error'">
</view>
<text class="text-gray">{{item.hour}}</text>
</view>
......@@ -298,10 +299,10 @@
<text class="text-black text-lg">{{orderType==1? '预约':'续单'}}包间：{{roomInfo.name}}</text>
</view>
<view class="info">
<text class="text-black text-lg">开始时间：{{dateObj.startDate}}</text>
<text class="text-black text-lg">开始时间：{{formatAllData.startDateTime}}</text>
</view>
<view class="info">
<text class="text-black text-lg">结束时间：{{dateObj.endDate}}</text>
<text class="text-black text-lg">结束时间：{{formatAllData.endDateTime}}</text>
</view>
</view>
<view class="flex-1">
......@@ -393,25 +394,14 @@
images: []
},
startTime: moment().format("HH:mm"),
endTime: '12:00',
endTime: '',
dateIndex: 0,
dateList: [
// {
// date:"02-28",
// readDate:'2024-02-28',
// weekday:''
// }
],
dateList: [],
index: 0, //订单模式标记
orderTypeList: [{
label: "小时模式",
type: 1
},
{
label: "套餐模式",
type: 2
}
],
label: "房间预定",
type: 1
}],
// 时长选择
distanceIndex: 0,
distanceMode: [{
......@@ -445,7 +435,10 @@
],
// 套餐
modeIndex: 0,
modeIndex2: -1,
packageMode: [],
roomLabelIndex: 0,
roomLabelList: [],
// 原数据
dateIntervalList: [],
intervalList: [],
......@@ -493,9 +486,12 @@
endHours: 48,
content: '',
toDayDate: '', // 今天日期
recordsStatusEnum:{
0:"待保洁",
1:"保洁中"
recordsStatusEnum: {
0: "待保洁",
1: "保洁中"
},
formatAllData:{
list:[]
}
};
},
......@@ -515,7 +511,6 @@
},
watch: {
dateIndex() {
this.onSetSelectTime()
this.onSetStartHours()
}
},
......@@ -541,6 +536,58 @@
}
},
methods: {
// 日期切换
onDateChange(k) {
if (this.dateIndex === k) return;
this.dateIndex = k;
if(this.modeIndex<0){
this.modeIndex = 0;
this.modeIndex2 = -1;
}
this.onGetSortDistance()
},
// 小时标签切换
onChangePackage(index){
if(this.modeIndex == index) return;
let startDateTime = this.modeIndex >=0 ? this.formatAllData.startDateTime: null
this.modeIndex = index
this.modeIndex2 = -1
this.formatAllData = this.onTransiteForDate({
list: JSON.parse(JSON.stringify(this.dateIntervalList)),
startDateTime,
duration: this.roomLabelList[this.modeIndex].labelDuration,
});
},
// 套餐切换
onChangePackage2(index){
if(this.modeIndex2 == index) return;
this.modeIndex = -1
this.modeIndex2 = index
console.log(this.packageMode[this.modeIndex2])
let startStr = `${this.dateList[this.dateIndex].readDate} ${this.packageMode[this.modeIndex2].packaStartPeriod}:00:00`
let startDate = moment(moment().format(startStr)).format("YYYY-MM-DD HH:00:00");
let endStr = `${this.dateList[this.dateIndex].readDate} ${this.packageMode[this.modeIndex2].packaEndPeriod}:00:00`
let endDate = moment(moment().format(endStr)).format("YYYY-MM-DD HH:00:00");
if(this.dateIndex === 0 && (moment().valueOf() > moment(endDate).valueOf())){
startDate = moment(startDate).add(1,'d').format("YYYY-MM-DD HH:00:00")
endDate = moment(endDate).add(1,'d').format("YYYY-MM-DD HH:00:00")
}
let duration = (moment(endDate).valueOf()-moment(startDate).valueOf())/1000/60;
this.formatAllData = this.onTransiteForDate({
list: JSON.parse(JSON.stringify(this.dateIntervalList)),
startDateTime: startDate,
duration,
durationType:2
});
console.log(this.formatAllData,9999992222)
},
onInitDateList() {
this.toDayDate = moment().format("YYYY-MM-DD")
let dateList = [];
......@@ -580,7 +627,6 @@
}
this.endHours = this.startHours + 23;
this.onSetSelectTime();
},
onGetDicts() {
let dicts = []
......@@ -600,7 +646,8 @@
// 获取房间信息相关
onLoading() {
roomInfo({
id: this.id
id: this.id,
type: this.orderType == 1 ? 0 : 1
}).then(res => {
uni.hideLoading()
if (res.data.code == 200) {
......@@ -610,37 +657,30 @@
.split(",").map(val => this.hostUrl + val) : []
}
uni.setNavigationBarTitle({
title: `${this.roomInfo.storeName}-房间${this.orderType ==1? '预约':'续单' }`
title: `${this.roomInfo.storeName}-${this.orderType ==1? '预约':'续单' }`
})
// 判断房间有没有绑定套餐
if (this.roomInfo.packList && this.roomInfo.packList.length) {
this.packageMode = this.roomInfo.packList
if (this.orderType === 1) {
this.index = 1;
}
this.modeIndex = 0;
} else {
this.index = 0;
this.orderTypeList = this.orderTypeList.filter(item => item.type == 1)
}
// if(this.roomInfo.isDirtyRoom >=1){
// uni.showToast({
// icon:"none",
// title:'当前房间未保洁，无法预定，请选择其他房间'
// })
// }
if (this.roomInfo.roomLabelList && this.roomInfo.roomLabelList.length) {
let typeNum = this.orderType == 1 ? 0 : 1;
this.roomLabelList = this.roomInfo.roomLabelList.filter(item => item.labelType ==
typeNum);
}
this.onGetSortDistance()
}
})
},
onGetOrderInfo() {
getOrderInfoByNo(this.preOrderNo).then(res => {
console.log(res,"订单信息")
console.log(res, "订单信息")
if (res.data.code == 200) {
let endDate = res.data.data.endDate || res.data.data.preEndDate;
if(res.data.data.status ==2){
if (res.data.data.status == 2) {
endDate = moment().format('YYYY-MM-DD HH:mm')
}
this.startTime = moment(endDate).format("HH:mm");
......@@ -659,14 +699,6 @@
orderType: this.orderType
}).then(res => {
uni.hideLoading()
if (this.orderTypeList[this.index].type == 2) {
this.duration = Number(this.packageMode[this.modeIndex].duration);
} else {
this.duration = Number(this.distanceMode[this.distanceIndex].duration);
}
let startDateTime = moment().format("YYYY-MM-DD HH:mm:ss")
this.onTransiteForDate(res.data.data,startDateTime,this.duration)
this.dateIntervalList = res.data.data.map((item, index) => {
return {
...item,
......@@ -674,143 +706,25 @@
hour: index > 0 && index - 24 == 0 ? '次日' : index > 24 ? index - 24 : index
}
})
if (this.orderType === 2) {
this.onSetEndTime()
} else {
this.onCheckDate();
}
this.formatAllData = this.onTransiteForDate({
list: JSON.parse(JSON.stringify(this.dateIntervalList)),
duration: this.orderType ==1 ? this.roomLabelList[this.modeIndex].labelDuration : null,
});
console.log(this.formatAllData, "transiteForDate")
})
},
//设置预定结束时间
onSetEndTime() {
if (this.index == 1) {
// 套餐模式
this.duration = Number(this.packageMode[this.modeIndex].duration);
this.endTime = this.startTime.split(":").map((item, k) => {
let num = ''
if (k == 0) {
if ((Number(item) + this.duration) >= 24) {
num = Number(item) + this.duration - 24
} else {
num = Number(item) + this.duration
}
} else {
num = Number(item)
}
return num >= 10 ? num : `0${num}`
}).join(":")
} else {
// 小时模式
if (this.orderType === 1) {
this.duration = Number(this.distanceMode[this.distanceIndex].duration);
} else if (this.orderType === 2) {
this.duration = Number(this.distanceMode2[this.distanceIndex].duration);
}
if (this.orderType === 2 && this.duration < 1) {
let startDateArr = this.startTime.split(":").map(item => Number(item))
// 分钟
let m = startDateArr[1] + 60 * this.duration
if (m >= 60) {
startDateArr[0] += 1
if (startDateArr[0] >= 24) {
startDateArr[0] = startDateArr[0] - 24
this.setStartTime.days = 2;
this.days = 2
}
startDateArr[1] = m - 60
} else {
startDateArr[1] = m
}
this.endTime = startDateArr.map(num => num >= 10 ? num : `0${num}`).join(':');
} else {
this.endTime = this.startTime.split(":").map((item, k) => {
let num = ''
if (k == 0) {
if ((Number(item) + this.duration) >= 24) {
num = Number(item) + this.duration - 24
} else {
num = Number(item) + this.duration
}
} else {
num = Number(item)
}
return num >= 10 ? num : `0${num}`
}).join(":")
}
}
this.onUpdateIntervalList()
},
// 更新时间的选取状态
async onUpdateIntervalList() {
this.useDateStatus = true
let start = Number(this.startTime.split(":")[0])
let startM = Number(this.startTime.split(":")[1])
let end = Number(this.endTime.split(":")[0])
let endM = Number(this.endTime.split(":")[1])
// 如果开始时间是第二天
// if(this.setStartTime.days >=2 || this.days == 2){
// start +=24
// }
if (this.orderType == 2 && end < start) {
end += 24
} else if (this.orderType == 1 && end <= start) {
end += 24
}
this.dateObj = await this.onSetDateTime(this.startTime, this.endTime);
this.onGetUseCoupon()
// 重新将数据还原到元数据
this.intervalList = [
...this.dateIntervalList
]
for (let index = start; index <= end; index++) {
let endTimeM = 0
if (this.dateIntervalList[index].status == 1) {
endTimeM = moment(this.dateIntervalList[index].startHoldTime).format('mm')
}
// 在时间小时段内,在被占用的情况下,新增订单的开始分钟时间需要占用结束时间后,结束分钟时间需在时间占用开始前
if ((this.dateIntervalList[index].status == 1 && index > start && index < start + this.duration) ||
(this.dateIntervalList[index].status == 1 && this.orderType == 1 && index == end && Number(startM) >= Number(endTimeM))||
(this.dateIntervalList[index].status == 1 && this.orderType == 2 && index > start && Number(endM) >= Number(endTimeM))
) {
// 表示时间点被占用,无法选择
this.useDateStatus = false
this.intervalList[index] = {
...this.dateIntervalList[index],
status: 2
}
} else {
this.intervalList[index] = {
...this.dateIntervalList[index],
status: 2
}
}
}
this.$forceUpdate();
setTimeout(() => {
if (!this.useDateStatus) {
uni.showToast({
icon: "none",
title: "所选时段已被其他订单占用"
})
}
}, 1000)
},
// 获取可用优惠券
onGetUseCoupon() {
onGetUseCoupon(p = null) {
getUseCoupon({
storeId: this.roomInfo.storeId,
roomId: this.roomInfo.id,
orderMode: this.orderTypeList[this.index].type,
preStartDate: this.dateObj.startDate,
preEndDate: this.dateObj.endDate,
preStartDate: p != null ? p.startDateTime : this.formatAllData.startDateTime,
preEndDate: p != null ? p.endDateTime : this.formatAllData.endDateTime,
orderType: this.orderType,
packageId: this.index > 0 ? this.packageMode[this.modeIndex].id : ''
packageId: this.modeIndex2 >= 0 ? this.packageMode[this.modeIndex2].id : '',
roomLabelId: this.modeIndex >= 0 ? this.roomLabelList[this.modeIndex].id : ''
}).then(res => {
if (res.data.code == 200) {
if (res.data && res.data.data.length) {
......@@ -829,15 +743,16 @@
this.useCouponList = list;
let i = this.useCouponList.findIndex(item => item.duration == this.duration)
this.selectCouponIndex = i >= 0 ? i : 0
}else{
} else {
this.useCouponList = list;
this.selectCouponIndex = -1
}
}
this.onComputePrice();
} else if (res.data.code == 401) {
this.$refs.loginPop.open();
}
this.onComputePrice();
})
},
onNavToSelectCoupon() {
......@@ -863,17 +778,19 @@
orderMode: that.orderTypeList[that.index].type,
preStartDate: that.dateObj.startDate,
orderType: that.orderType,
packageId: that.packageMode.length? that.packageMode[that.modeIndex].id : '',
packageId: that.packageMode.length ? that.packageMode[that.modeIndex].id :
'',
preEndDate: that.dateObj.endDate,
selectId: that.selectCouponIndex >= 0 && that.useCouponList.length ? that.useCouponList[that
.selectCouponIndex].id : ''
selectId: that.selectCouponIndex >= 0 && that.useCouponList.length ? that
.useCouponList[that
.selectCouponIndex].id : ''
})
}
})
}
},
//计算支付金额
onComputePrice() {
onComputePrice(p = null) {
// uni.showLoading({
// title: "加载中..."
// })
......@@ -881,16 +798,15 @@
storeId: this.roomInfo.storeId,
roomId: this.roomInfo.id,
buyType: this.orderTypeList[this.index].type,
couponId: this.useCouponList.length && this.selectCouponIndex >= 0 ? this.useCouponList[this
.selectCouponIndex].id : '',
couponId: this.useCouponList.length && this.selectCouponIndex >= 0 ? this.useCouponList[this.selectCouponIndex].id : '',
orderType: this.orderType,
preStartDate: this.dateObj.startDate,
preEndDate: this.dateObj.endDate,
preStartDate: p != null ? p.startDateTime : this.formatAllData.startDateTime,
preEndDate: p != null ? p.endDateTime : this.formatAllData.endDateTime,
orderMode: this.orderTypeList[this.index].type,
}
if (this.index === 1) {
params.packId = this.packageMode[this.modeIndex].id;
}
packId : this.modeIndex2 >= 0 ? this.packageMode[this.modeIndex2].id : '',
roomLabelId : this.modeIndex >= 0 ? this.roomLabelList[this.modeIndex].id : '',
}
computePrice(params).then(res => {
// uni.hideLoading()
if (res.data.code == 200) {
......@@ -904,217 +820,19 @@
})
},
// 下单模式切换
onTypeChange(i) {
// if (this.orderType == 2) {
// uni.showToast({
// icon: 'none',
// title: '房间续单无法选择套餐模式'
// })
// return
// }
if (this.index === i || !this.packageMode.length) return;
this.index = i
this.modeIndex = 0;
this.addM = false;
this.distanceIndex = this.orderType == 2 ? 1 : 0;
this.setStartTime = {
status: false,
startTime: '',
startDate: '',
duration: 0,
days: 1
}
// if(Number(this.startTime.split(":")[0])< new Date().getHours()){
// this.days = 2
// }else{
// this.days =1
// }
this.days = 1
// this.checkedDateList= [0,0]
// this.onSetEndTime();
this.onGetSortDistance();
},
onChangeMode(i) {
if (this.modeIndex === i) return;
this.modeIndex = i;
this.selectCouponIndex = -1;
this.useDateStatus = true;
this.duration = Number(this.packageMode[this.modeIndex].duration);
let val = this.intervalList.findIndex(item => item.status === 2)
let len = this.intervalList.filter(item => item.status === 2).length;
let duration = Number(this.packageMode[this.modeIndex].duration);
let start = Number(this.startTime.split(":")[0])
let startM = Number(this.startTime.split(":")[1])
let h = val;
if (val >= 24) {
this.setStartTime.days = 2;
this.days = 2;
}
if (val + duration >= 24) {
h = val + duration - 24
} else {
h = val + duration
}
this.endTime = `${h>=10?h:'0'+h}:${startM>=10?startM:'0'+startM}`;
this.intervalList = this.intervalList.map((item, index) => {
let status = item.status;
if (index >= val && index <= val + duration) {
status = 2
let endTimeM = 0
onChangeMode(i) {
if (this.dateIntervalList[index].status == 1) {
endTimeM = moment(this.dateIntervalList[index].startHoldTime).format('mm')
}
if ((this.dateIntervalList[index].status === 1 && index > val && index < val + duration) ||
(this.dateIntervalList[index].status === 1 && index == val + duration && Number(
startM) >= Number(endTimeM))) {
this.useDateStatus = false
}
} else {
status = this.dateIntervalList[index].status
}
return {
...item,
status
}
})
if (!this.useDateStatus) {
uni.showToast({
icon: "none",
title: "所选时段已被其他订单占用",
success: () => {
setTimeout(async () => {
this.dateObj = await this.onSetDateTime(this.startTime, this
.endTime);
this.onGetUseCoupon()
}, 1000)
}
})
} else {
this.dateObj = this.onSetDateTime(this.startTime, this.endTime);
this.onGetUseCoupon();
}
},
onDurationChange(i) {
if (i >= this.distanceMode.length - 1) {
this.onEditDuration();
return
}
if (this.distanceIndex === i) return;
this.distanceIndex = i
this.selectCouponIndex = -1
this.onSetEndTime()
},
onDurationChange2(i) {
if (this.distanceIndex === i) return;
this.distanceIndex = i
this.selectCouponIndex = -1
this.onSetEndTime()
},
onDateChange(k) {
if (this.orderType == 2) return;
if (this.dateIndex === k) return;
listSortDistance({
storeId: this.roomInfo.storeId,
roomId: this.roomInfo.id,
day: this.dateList[k].readDate,
orderType: this.orderType
}).then(res => {
// 今天可连续选择的时段
let selectNum = 0;
//预定节点
let t = -1;
//预定开始时间
let startDate = '';
let ms = 0;
let endDate = ""
// 查询有无可预定的时段
let todaySelectStatus = false;
res.data.data.forEach((val, i) => {
if (val.status == 1 && moment(val.endHoldTime).format('mm') < 59 && selectNum ==
0) {
startDate = moment(val.endHoldTime).format("YYYY-MM-DD HH:mm:ss")
selectNum += 1
t = i
} else if (val.status == 1 && selectNum > 0) {
let start = moment(startDate).valueOf()
let end = moment(val.startHoldTime).valueOf()
if (end - start > this.duration * 60 * 60 * 1000) {
todaySelectStatus = true;
} else {
startDate = ''
selectNum = 0
endDate = ""
t = -1
}
} else if (selectNum == 0 && !val.status) {
startDate = val.timeHour + ":00:00";
selectNum += 1
t = i
} else if (selectNum > 0 && !val.status) {
// 计算时长
let start = moment(startDate).valueOf()
endDate = endDate ? moment(endDate).add(1, 'h').format("YYYY-MM-DD HH:mm:ss") :
moment(startDate).add(1, 'h').format("YYYY-MM-DD HH:mm:ss")
let end = moment(endDate).valueOf()
if (end - start > this.duration * 60 * 60 * 1000) {
todaySelectStatus = true;
} else {
selectNum += 1
}
}
})
if ((todaySelectStatus && t >= 24) || !todaySelectStatus) {
uni.showToast({
icon: "none",
title: "当前日期无可预约时段"
})
return;
}
this.dateIndex = k
this.selectCouponIndex = -1
this.addM = false;
this.onGetSortDistance()
})
},
// 开始选择时间
onSelectDate() {
if (this.orderType === 2) return;
if (!this.checkedIndex.length) {
let arr = this.startTime.split(":").map((item, k) => {
let n = Number(item)
if (k === 0 && this.dateIndex === 0) {
n = this.hourList.findIndex(val => Number(val) === n)
}
return n
})
if (arr.length) {
if (Number(arr[1]) <= 10) {
this.checkedDateList = [arr[0], 0]
} else if (Number(arr[1]) > 10 && Number(arr[1]) <= 40) {
this.checkedDateList = [arr[0], 1]
} else if (Number(arr[1]) > 40) {
if (arr[0] >= 23) {
this.checkedDateList = [0, 0]
} else {
this.checkedDateList = [Number(arr[0]) + 1, 0]
}
}
}
}
this.checkedIndex = this.checkedDateList
this.$refs.popup.open()
},
// 切换时间
......@@ -1126,8 +844,6 @@
this.checkedDateList = this.checkedIndex.length ? this.checkedIndex.map(item => Number(item)) : [0, 0];
this.startTime = `${this.hourList[this.checkedDateList[0]]}:${this.minuteList[this.checkedDateList[1]]}`;
this.$forceUpdate();
//重新设置结束时间
this.onSetEndTime()
this.onHideModal();
},
......@@ -1149,7 +865,6 @@
}
this.onHideModal()
this.$forceUpdate();
this.onSetEndTime()
},
onHideModal() {
this.$refs.popup.close()
......@@ -1266,13 +981,13 @@
orderType: this.orderType,
buyType: this.orderTypeList[this.index].type,
payType: 1,
couponId: this.useCouponList.length && this.selectCouponIndex >= 0 ? this.useCouponList[this
.selectCouponIndex].id : '',
preStartDate: this.dateObj.startDate,
preEndDate: this.dateObj.endDate,
totalFee: Number(this.roomInfo.price) * this.duration,
couponId: this.useCouponList.length && this.selectCouponIndex >= 0 ? this.useCouponList[this.selectCouponIndex].id : '',
preStartDate: this.formatAllData.startDateTime,
preEndDate: this.formatAllData.endDateTime,
totalFee: this.computePriceInfo.totalFee || 0,
payFee: this.computePriceInfo.payFee || 0,
packId: this.index > 0 ? this.packageMode[this.modeIndex].id : ''
packId: this.modeIndex2 >= 0 ? this.packageMode[this.modeIndex2].id : '',
roomLabelId: this.modeIndex >= 0 ? this.roomLabelList[this.modeIndex].id : ''
}
if (this.orderType === 2 && this.preOrderNo) {
params.preOrderNo = this.preOrderNo
......@@ -1349,37 +1064,16 @@
}
})
},
onSelectTime(val, k) {
if (val.status == 1) {
uni.showToast({
icon: "none",
title: "时间为不可选择时间"
})
} else {
if (k >= 24) {
this.dateIndex += 1
this.startTime = `${k-24}:00`
} else {
this.startTime = `${k}:00`
}
this.onSetEndTime()
}
},
onNavRecharge() {
uni.showToast({
icon: "none",
title: "功能暂未开发"
})
},
onNavToCheckedCoupon() {
let that = this;
uni.navigateTo({
url: "/pages/couponCheck/couponCheck?storeId=" + this.roomInfo.storeId,
success: (res) => {
res.eventChannel.emit('acceptDataFromOpenerPage', {
orderPage:true ,
res.eventChannel.emit('acceptDataFromOpenerPage', {
orderPage: true,
storeId: that.roomInfo.storeId
})
})
},
events: {
// 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
......@@ -1400,99 +1094,12 @@
})
return
}
let time = i;
if (i >= 24) {
time = i - 24;
if (this.dateIndex === 0) {
this.dateIndex += 1;
}
}
if (val.endHoldTime) {
let mTime = Number(moment(val.endHoldTime).format("mm"))
if (mTime >= 59) {
uni.showToast({
icon: 'none',
title: '当前时段不可预定'
})
return;
} else {
this.startTime = `${time>=10?time:'0'+time}:${mTime>=10?mTime:'0'+mTime}`;
if (time >= 0) {
// 开始时间加一分钟
let arr = this.startTime.split(":");
let m = Number(arr[1]) + 1
let h = Number(arr[0])
this.startTime = `${h>=10?h:'0'+h}:${m>=10?m:'0'+m}`
}
this.endTime = this.startTime.split(":").map((item, k) => {
let n = Number(item);
if (k == 0) {
n = n + this.duration >= 24 ? n + this.duration - 24 : n + this.duration
}
return n >= 10 ? n : `0${n}`
}).join(":")
}
} else {
this.startTime = `${time>=10?time:'0'+time}:00`;
this.endTime = this.startTime.split(":").map((item, k) => {
let n = Number(item);
if (k == 0) {
n = n + this.duration >= 24 ? n + this.duration - 24 : n + this.duration
}
return n >= 10 ? n : `0${n}`
}).join(":")
}
this.dateObj = this.onSetDateTime(this.startTime, this.endTime);
this.onGetUseCoupon();
this.useDateStatus = true;
this.intervalList = this.intervalList.map((item, index) => {
let status = item.status;
if (index >= i && index <= i + this.duration) {
status = 2
if (this.dateIntervalList[index].status === 1 && index !== i) {
this.useDateStatus = false;
}
} else {
status = this.dateIntervalList[index].status
}
return {
...item,
status
}
})
if (!this.useDateStatus) {
uni.showToast({
icon: "none",
title: "所选时段已被其他订单占用"
})
}
},
// 将时间转换成完整日期
onSetDateTime(startTime, endTime) {
let obj = {
startDate: "",
endDate: ''
}
let startArr = startTime.split(":")
let endArr = endTime.split(":")
obj.startDate = `${this.dateList[this.dateIndex].readDate} ${startTime}:00`
if ((this.orderType == 1 && Number(endArr[0]) <= Number(startArr[0]))) {
obj.endDate =
`${moment(obj.startDate).add(1,"days").format("YYYY-MM-DD")} ${endTime}:00`
} else if (this.orderType == 2 && Number(endArr[0]) < Number(startArr[0])) {
obj.endDate =
`${moment(obj.startDate).add(1,"days").format("YYYY-MM-DD")} ${endTime}:00`
} else {
obj.endDate = `${moment(obj.startDate).format("YYYY-MM-DD")} ${endTime}:00`
}
return obj;
},
//list(Array):当前日期的时间占用情况
//startDateTime(YYYY-MM-DD HH:mm:ss): 开始时间
//endDateTime(YYYY-MM-DD HH:mm:ss): 开始时间
//duration(Number||String): 时长，小时或分钟
//durationType(Number) : 时长类型，1:小时，2:分钟
// 返回值
......@@ -1502,127 +1109,56 @@
//startTime(HH:mm): 开始时间，显示使用
//endTime(HH:mm): 结束时间，显示使用
//duration(Number): 时长，仅分钟
onTransiteForDate(list=[],startDateTime,duration,durationType=1){
console.log(list,"数据列表")
onTransiteForDate(params) {
console.log(params, "所有参数")
// 计算出时长,使用分钟计算
let m = duration
if(durationType==1){
m = duration*60
if(!params.duration){
return {
errMsg:"选择时长错误"
}
}
let m = Number(params.duration)*60;
if (params.durationType === 2) {
m = Number(params.duration)
}
// 开始时间的毫秒数
let startStamp = moment(startDateTime).valueOf();
let endStamp = startStamp+ m*60*1000;
console.log(startStamp,endStamp)
console.log(endStamp-startStamp)
let startStamp = this.dateIndex > 0? moment(params.list[0].timeHour).valueOf() : !params.startDateTime || params.startDateTime == null ? moment().valueOf() : moment(params.startDateTime).valueOf();
let endStamp = startStamp + m * 60 * 1000;
console.log(startStamp, endStamp)
console.log(endStamp - startStamp)
// 记录可开始的时间点
let startPoint = '';
let endPoint = ''
list.forEach((item,index)=>{
console.log(item)
// 如果开始时间有,则需要计算可预定的时长
if(startPoint){
if(item.status ===0){
endPoint = moment(item.timeHour).format("YYYY-MM-DD HH:59:59")
}else{
endPoint = moment(item.startHoldTime).format("YYYY-MM-DD HH:mm:ss")
}
}else{
// 如果开始时间没有,则需要赋值开始时间
if(item.status ===0){
startPoint = moment(item.timeHour).format("YYYY-MM-DD HH:mm:ss")
}else{
// 当前小时时间是被占用状态且低于59分钟
let mm = moment(item.endHoldTime).format("mm")
if(mm<59){
startPoint = moment(item.endHoldTime).format("YYYY-MM-DD HH:mm:ss")
}
}
}
let startPoint = startStamp;
let endPoint = endStamp
// 获取开始时间的当前小时
let startPointDate = moment(moment(startStamp).format("YYYY-MM-DD HH:00:00")).valueOf();
// 截取可预定时间段状态,true表示也筛选到
let interceptDateStatus = false;
let list = params.list.map((item, index) => {
if (interceptDateStatus) {
return item
}
let point = moment(moment(item.timeHour).format("YYYY-MM-DD HH:00:00")).valueOf();
if (point >= startPointDate && point < endStamp) {
item.status = 2;
}
return item
})
let paramsData = {
list,
startDateTime: moment(startPoint).format("YYYY-MM-DD HH:mm:ss"),
startTime: moment(startPoint).format("HH:mm"),
endDateTime: moment(endPoint).format("YYYY-MM-DD HH:mm:ss"),
endTime: moment(endPoint).format("HH:mm"),
duration: m,
interceptDateStatus
}
// 获取用户可用优化券
this.onGetUseCoupon(paramsData)
return paramsData
},
onCheckDate() {
// 今天可连续选择的时段
let selectNum = 0;
//预定节点
let t = -1;
//预定开始时间
let startDate = '';
let ms = 0;
let endDate = ""
// 查询有无可预定的时段
let todaySelectStatus = false;
this.dateIntervalList.forEach((val, i) => {
if (val.status == 1 && moment(val.endHoldTime).format('mm') < 59 && selectNum == 0) {
startDate = moment(val.endHoldTime).format("YYYY-MM-DD HH:mm:ss")
selectNum += 1
t = i
} else if (val.status == 1 && selectNum > 0) {
let start = moment(startDate).valueOf()
let end = moment(val.startHoldTime).valueOf()
if (end - start > this.duration * 60 * 60 * 1000) {
todaySelectStatus = true;
} else {
startDate = ''
selectNum = 0
endDate = ""
t = -1
}
} else if (selectNum == 0 && !val.status) {
startDate = val.timeHour + ":00:00";
selectNum += 1
t = i
} else if (selectNum > 0 && !val.status) {
// 计算时长
let start = moment(startDate).valueOf()
endDate = endDate ? moment(endDate).add(1, 'h').format("YYYY-MM-DD HH:mm:ss") : moment(
startDate).add(1, 'h').format("YYYY-MM-DD HH:mm:ss")
let end = moment(endDate).valueOf()
if (end - start > this.duration * 60 * 60 * 1000) {
todaySelectStatus = true;
} else {
selectNum += 1
}
}
})
if ((todaySelectStatus && t >= 24) || !todaySelectStatus) {
if (this.dateIndex >= this.dateList.length - 1) {
this.onInitDateList()
} else {
this.dateIndex += 1;
}
//房间维护就不循环
if (this.roomInfo.roomStat !== 3) {
this.onGetSortDistance();
}
return;
} else {
let startDateTime = "";
if (!this.addM && (t != 0 || (t == 0 && this.dateIntervalList[0].status == 1))) {
this.addM = true
startDateTime = moment(startDate).add(1, "m").format("YYYY-MM-DD");
this.startTime = moment(startDate).add(1, "m").format("HH:mm");
} else {
startDateTime = moment(startDate).format("YYYY-MM-DD");
this.startTime = moment(startDate).format("HH:mm");
}
let i = this.dateList.findIndex(item => item.readDate === startDateTime)
if (this.dateIndex !== i && this.dateIndex >= 0) {
this.dateIndex = i;
//房间维护就不循环
if (this.roomInfo.roomStat !== 3) {
this.onGetSortDistance();
}
return;
}
this.onSetEndTime()
}
}
onCheckDate() {}
}
}
</script>
......@@ -1644,8 +1180,6 @@
display: flex;
flex-direction: column;
width: 100%;
padding: 30upx;
background-color: #ffffff;
align-items: center;
.part-2 {
......@@ -1675,7 +1209,7 @@
image {
display: block;
width: 100%;
max-height: 400upx;
height: 360upx;
}
}
......@@ -1684,7 +1218,7 @@
justify-content: space-between;
align-items: center;
width: 100%;
padding: 20upx 6upx;
padding: 20upx 24upx;
.status-icon-box {
display: flex;
......@@ -1733,10 +1267,8 @@
display: flex;
flex-direction: row;
justify-content: center;
width: 92%;
margin: 20upx 0 30upx;
background: #ffffff;
border-radius: 10upx;
// border-radius: 10upx;
overflow: hidden;
.tab-item {
......@@ -1745,12 +1277,11 @@
flex: 1;
justify-content: center;
align-items: center;
height: 80upx;
height: 90upx;
text {
color: #000000;
font-size: 34upx;
font-weight: 700;
font-size: 32upx;
}
.hot-icon {
......@@ -1770,27 +1301,18 @@
}
}
}
.active {
background-color: #dc4397;
text {
color: #ffffff;
font-weight: 800;
}
}
}
.order-type-box {
display: flex;
flex-direction: column;
width: 100%;
min-height: 600upx;
overflow: hidden;
border: 4upx solid #DC4397;
box-shadow: 0 0 8upx #DC4397;
border-radius: 12upx 12upx 0 0;
background: linear-gradient(to bottom, #E03997, #FF375D);
padding: 4px;
// border: 5upx solid #DC4397;
// box-shadow: 0 0 8upx #DC4397;
// border-radius: 12upx;
.date-content-box {
width: 100%;
......@@ -1817,8 +1339,8 @@
position: relative;
justify-content: center;
align-items: center;
padding: 40upx 0 12upx 0;
z-index: 10;
height: 140upx;
text {
color: #6B0000;
......@@ -1831,7 +1353,7 @@
.active {
.text-title {
color: #E40583;
color: #ffffff;
}
}
......@@ -1841,7 +1363,7 @@
left: 0;
width: 20%;
height: 100%;
transition: left 0.3s ease-in-out;
// transition: left 0.3s ease-in-out;
.img {
width: 100%;
......@@ -1864,37 +1386,53 @@
margin: 30upx;
}
.package-box {
.item {
margin: 0 10upx;
justify-content: center;
align-items: center;
border: 1px solid transparent;
.room-label-list{
display: flex;
flex-wrap: wrap;
width: 60%;
border: 1px solid #ff007f;
margin-left: 20upx;
border-radius: 12upx;
padding: 12upx 0;
color: #333333;
background-color: #F7F8FA;
.flex-row {
align-items: flex-end;
padding: 10upx 6upx;
.room-label-box{
display: flex;
justify-content: center;
align-items: center;
width: 33.33%;
padding: 10upx 6upx;
.item {
padding: 8upx 20upx;
}
}
}
.item-3 {
width: 30%;
.package-list{
display: flex;
flex-direction: column;
height: 100%;
border: 1px solid #ff007f;
border-radius: 12upx;
margin-left: 20upx;
padding: 10upx 6upx;
.package-list-box{
padding: 10upx 6upx;
}
}
.item-n {
flex: 1;
.item {
display: flex;
justify-content: center;
align-items: center;
height: 54upx;
background: #F7F8FA;
border-radius: 12upx;
border: 1px solid #CCD1DB;
}
.active {
background: #FBF6EE;
border: 1px solid #DBA556;
text {
color: #B67D32;
}
.active{
border: 1px solid #e1419b;
color: #FFFFFF;
background: linear-gradient(to right,#e03997,#ff375d);
box-shadow: 0 0 8upx #ffffff inset;
}
}
}
......@@ -1954,17 +1492,20 @@
font-size: 32upx;
}
.line-black{
.line-black {
border: 1px solid #e03997;
color: #e03997;
}
.line-black::after{
.line-black::after {
border-color: transparent;
}
.line-pink {
display: flex;
align-items: center;
// border-color: #e03997;
// border-color: #e03997;
.cuIcon-edit {
margin-bottom: 7upx;
margin-left: 12upx;
......@@ -2020,6 +1561,7 @@
flex: 1;
flex-direction: column;
align-items: center;
.date-point {
display: flex;
width: 90%;
......@@ -2259,35 +1801,8 @@
// font-size: 24upx;
}
.scroll-view {
height: 136upx;
width: 100vw;
.package-box {
position: absolute;
top: 0;
left: 2vw;
height: 136upx;
width: 96vw;
display: flex;
flex-direction: row;
.item {
display: flex;
flex-direction: column;
flex: 1;
height: 100%;
.text-title {
font-size: 28upx;
}
.flex-row {
// font-size: 23upx;
}
}
}
}
.message-box {
display: flex;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment