1、订单预约时间和重排弹窗中支持选择时间点

2、预约服务时间展示及倒计时问题修复
This commit is contained in:
donqi 2022-10-27 00:44:47 +08:00
parent b8602488e3
commit 957381e361
11 changed files with 113 additions and 75 deletions

View File

@ -4,31 +4,12 @@ export default {
initPageNum: 1, initPageNum: 1,
initPageSize: 10, initPageSize: 10,
timeRangeList: [ timeRangeList: [
'08:00-08:30', '08:00-10:00',
'08:30-09:00', '10:00-12:00',
'09:00-09:30', '12:00-14:00',
'09:30-10:00', '14:00-16:00',
'10:00-10:30', '16:00-18:00',
'10:30-11:00', '18:00-19:00'
'11:00-11:30',
'11:30-12:00',
'12:00-12:30',
'12:30-13:00',
'13:00-13:30',
'13:30-14:00',
'14:00-14:30',
'14:30-15:00',
'14:30-15:00',
'15:00-15:30',
'15:30-16:00',
'16:00-16:30',
'16:30-17:00',
'17:00-17:30',
'17:30-18:00',
'18:00-18:30',
'18:30-19:00',
'19:00-19:30',
'19:30-20:00'
], ],
timeRangeSplit: '-' timeRangeSplit: '-'
} }

View File

@ -51,7 +51,7 @@
/* */ /* */
"appid" : "wx105ce607b514ff2a", "appid" : "wx105ce607b514ff2a",
"setting" : { "setting" : {
"urlCheck" : true, "urlCheck" : false,
"minified" : true "minified" : true
}, },
"usingComponents" : true, "usingComponents" : true,

View File

@ -77,7 +77,8 @@
</view> </view>
<view class="margin-top-sm"> <view class="margin-top-sm">
<text class="text-main-color text-lg margin-right-xs"><text class="cuIcon-timefill"></text></text> <text class="text-main-color text-lg margin-right-xs"><text class="cuIcon-timefill"></text></text>
<text>{{task.expectTimeStart + '~' + task.expectTimeEnd}}</text> <text v-if="task.expectTimeEndFront">{{task.expectTimeStartFront + '~' + task.expectTimeEndFront}}</text>
<text v-else>{{task.expectTimeStartFront}}</text>
</view> </view>
<view class="margin-top-sm"> <view class="margin-top-sm">
<text class="text-main-color text-lg margin-right-xs"><text class="cuIcon-phone"></text></text> <text class="text-main-color text-lg margin-right-xs"><text class="cuIcon-phone"></text></text>

View File

@ -24,7 +24,8 @@
</view> </view>
<view class="margin-top-sm"> <view class="margin-top-sm">
<text class="text-main-color text-lg margin-right-xs"><text class="cuIcon-timefill"></text></text> <text class="text-main-color text-lg margin-right-xs"><text class="cuIcon-timefill"></text></text>
<text>{{order.expectTimeStart + '~' + order.expectTimeEnd}}</text> <text v-if="order.expectTimeEndFront">{{order.expectTimeStartFront + '~' + order.expectTimeEndFront}}</text>
<text v-else>{{order.expectTimeStartFront}}</text>
</view> </view>
<view class="margin-top-sm"> <view class="margin-top-sm">
<text class="text-main-color text-lg margin-right-xs"><text class="cuIcon-phone"></text></text> <text class="text-main-color text-lg margin-right-xs"><text class="cuIcon-phone"></text></text>

View File

@ -61,7 +61,9 @@
<view class="text-lg">{{item.goodsName}}</view> <view class="text-lg">{{item.goodsName}}</view>
</view> </view>
<view> <view>
时间<text class="text-red">{{item.expectTimeStart + ' - ' + item.expectTimeEnd}}</text> 时间
<text class="text-red" v-if="item.expectTimeEndFront">{{item.expectTimeStartFront + '~' + item.expectTimeEndFront}}</text>
<text v-else>{{item.expectTimeStartFront}}</text>
</view> </view>
<view>地址{{item.address}}</view> <view>地址{{item.address}}</view>
</view> </view>

View File

@ -29,17 +29,21 @@
</view> </view>
<view> <view>
<view class="margin-bottom-xs">选择时间</view> <view class="margin-bottom-xs">选择时间</view>
<!-- <picker mode="time" :value="'08:00'" :start="'08:00'" :end="'20:00'" <view class="flex justify-start align-center">
@change="timeChange"> <picker class="relative-view" :class="disableTime ? 'readonlyPicker' : ''" mode="time" :value="''" :start="'08:00'" :end="'19:00'"
<input class="radius-input" v-model="time"></input> @change="timeChange" @click="showTime">
</picker> <input class="custom-input radius-input" v-model="time" disabled>
<text class="margin-lr-xs"></text> --> <view class="text-lg input-arrow"><text class="cuIcon-triangledownfill"></text></view>
<picker class="relative-view" mode="selector" :value="timeRangeIndex" :range="timeRangeList" </input>
@change="timeRangeChange"> </picker>
<input class="custom-input radius-input" v-model="timeRange" disabled> <text class="margin-lr-xs"></text>
<view class="text-lg input-arrow"><text class="cuIcon-triangledownfill"></text></view> <picker class="relative-view" :class="!disableTime ? 'readonlyPicker' : ''" mode="selector" :value="timeRangeIndex" :range="timeRangeList"
</input> @change="timeRangeChange" @click="showDuration">
</picker> <input class="custom-input radius-input" v-model="timeRange" disabled>
<view class="text-lg input-arrow"><text class="cuIcon-triangledownfill"></text></view>
</input>
</picker>
</view>
</view> </view>
</view> </view>
<view class="padding-top-sm padding"> <view class="padding-top-sm padding">
@ -57,7 +61,7 @@
</label> </label>
</radio-group> </radio-group>
</view> </view>
<view class="margin-top uni-textarea"> <view class="margin-top">
<textarea class="solid padding-sm" maxlength="-1" @input="inputSpecificReason" <textarea class="solid padding-sm" maxlength="-1" @input="inputSpecificReason"
placeholder="具体情况(选填)" /> placeholder="具体情况(选填)" />
</view> </view>
@ -102,7 +106,8 @@
timeRange: '', timeRange: '',
timeRangeIndex: 0, timeRangeIndex: 0,
expectTimeStart: null, expectTimeStart: null,
expectTimeEnd: null expectTimeEnd: null,
disableTime: false
} }
}, },
onReady() { onReady() {
@ -123,20 +128,38 @@
dateChange(e) { dateChange(e) {
this.date = e.detail.value; this.date = e.detail.value;
this.changeExpectTime(); this.changeExpectTime();
},
showTime() {
this.disableTime = false;
},
showDuration() {
this.disableTime = true;
}, },
timeChange(e) { timeChange(e) {
this.time = e.detail.value; let time = e.detail.value;
if (time === '00:00') {
time = '08:00';
}
this.time = time;
this.timeRange = null;
this.changeExpectTime();
}, },
timeRangeChange(e) { timeRangeChange(e) {
this.timeRangeIndex = e.detail.value; this.timeRangeIndex = e.detail.value;
this.timeRange = this.timeRangeList[this.timeRangeIndex]; this.timeRange = this.timeRangeList[this.timeRangeIndex];
this.time = null;
this.changeExpectTime(); this.changeExpectTime();
}, },
changeExpectTime() { changeExpectTime() {
let timeRangeSplit = this.$globalData.timeRangeSplit; if (this.time) {
let timeArr = this.timeRange.split(timeRangeSplit); this.expectTimeStart = this.date + ' ' + this.time + ':00';
this.expectTimeStart = this.date + ' ' + timeArr[0] + ':00'; this.expectTimeEnd = null;
this.expectTimeEnd = this.date + ' ' + timeArr[1] + ':00'; } else if (this.timeRange) {
let timeRangeSplit = this.$globalData.timeRangeSplit;
let timeArr = this.timeRange.split(timeRangeSplit);
this.expectTimeStart = this.date + ' ' + timeArr[0] + ':00';
this.expectTimeEnd = this.date + ' ' + timeArr[1] + ':00';
}
}, },
hideModal(e) { hideModal(e) {
this.resetData(); this.resetData();

View File

@ -72,7 +72,6 @@
}, },
data() { data() {
return { return {
show: false,
reasonType: null, reasonType: null,
remark: null, remark: null,
imgList: [] imgList: []

View File

@ -27,19 +27,23 @@
</input> </input>
</picker> </picker>
</view> </view>
<view> <view>
<view class="margin-bottom-xs">选择时间</view> <view class="margin-bottom-xs">选择时间</view>
<!-- <picker mode="time" :value="'08:00'" :start="'08:00'" :end="'20:00'" <view class="flex justify-start align-center">
@change="timeChange"> <picker class="relative-view" :class="disableTime ? 'readonlyPicker' : ''" mode="time" :value="''" :start="'08:00'" :end="'19:00'"
<input class="radius-input" v-model="time" disabled></input> @change="timeChange" @click="showTime">
</picker> <input class="custom-input radius-input" v-model="time" disabled>
<text class="margin-lr-xs"></text> --> <view class="text-lg input-arrow"><text class="cuIcon-triangledownfill"></text></view>
<picker class="relative-view" mode="selector" :value="timeRangeIndex" :range="timeRangeList" </input>
@change="timeRangeChange"> </picker>
<input class="radius-input" v-model="timeRange" disabled> <text class="margin-lr-xs"></text>
<view class="text-lg input-arrow"><text class="cuIcon-triangledownfill"></text></view> <picker class="relative-view" :class="!disableTime ? 'readonlyPicker' : ''" mode="selector" :value="timeRangeIndex" :range="timeRangeList"
</input> @change="timeRangeChange" @click="showDuration">
</picker> <input class="custom-input radius-input" v-model="timeRange" disabled>
<view class="text-lg input-arrow"><text class="cuIcon-triangledownfill"></text></view>
</input>
</picker>
</view>
</view> </view>
</view> </view>
</view> </view>
@ -80,7 +84,8 @@
timeRange: null, timeRange: null,
timeRangeIndex: 0, timeRangeIndex: 0,
expectTimeStart: null, expectTimeStart: null,
expectTimeEnd: null expectTimeEnd: null,
disableTime: false
} }
}, },
onReady() { onReady() {
@ -101,20 +106,38 @@
dateChange(e) { dateChange(e) {
this.date = e.detail.value; this.date = e.detail.value;
this.changeExpectTime(); this.changeExpectTime();
},
showTime() {
this.disableTime = false;
},
showDuration() {
this.disableTime = true;
}, },
timeChange(e) { timeChange(e) {
this.time = e.detail.value; let time = e.detail.value;
if (time === '00:00') {
time = '08:00';
}
this.time = time;
this.timeRange = null;
this.changeExpectTime();
}, },
timeRangeChange(e) { timeRangeChange(e) {
this.timeRangeIndex = e.detail.value; this.timeRangeIndex = e.detail.value;
this.timeRange = this.timeRangeList[this.timeRangeIndex]; this.timeRange = this.timeRangeList[this.timeRangeIndex];
this.time = null;
this.changeExpectTime(); this.changeExpectTime();
}, },
changeExpectTime() { changeExpectTime() {
let timeRangeSplit = this.$globalData.timeRangeSplit; if (this.time) {
let timeArr = this.timeRange.split(timeRangeSplit); this.expectTimeStart = this.date + ' ' + this.time + ':00';
this.expectTimeStart = this.date + ' ' + timeArr[0] + ':00'; this.expectTimeEnd = null;
this.expectTimeEnd = this.date + ' ' + timeArr[1] + ':00'; } else if (this.timeRange) {
let timeRangeSplit = this.$globalData.timeRangeSplit;
let timeArr = this.timeRange.split(timeRangeSplit);
this.expectTimeStart = this.date + ' ' + timeArr[0] + ':00';
this.expectTimeEnd = this.date + ' ' + timeArr[1] + ':00';
}
}, },
hideModal(e) { hideModal(e) {
this.resetData(); this.resetData();

View File

@ -132,7 +132,8 @@
</view> </view>
<view class="margin-top-sm"> <view class="margin-top-sm">
<text class="text-main-color text-lg margin-right-xs"><text class="cuIcon-time"></text></text> <text class="text-main-color text-lg margin-right-xs"><text class="cuIcon-time"></text></text>
<text>服务时间{{order.expectTimeStart + '~' + order.expectTimeEnd}}</text> <text v-if="order.expectTimeEndFront">服务时间{{order.expectTimeStartFront + '~' + order.expectTimeEndFront}}</text>
<text v-else>服务时间{{order.expectTimeStartFront}}</text>
</view> </view>
<view class="margin-top-sm" v-if="order.orderDetailId != null && order.orderStatus > 2"> <view class="margin-top-sm" v-if="order.orderDetailId != null && order.orderStatus > 2">
<text class="text-main-color text-lg margin-right-xs"><text class="cuIcon-time"></text></text> <text class="text-main-color text-lg margin-right-xs"><text class="cuIcon-time"></text></text>
@ -142,10 +143,10 @@
<text class="text-main-color text-lg margin-right-xs"><text class="cuIcon-repair"></text></text> <text class="text-main-color text-lg margin-right-xs"><text class="cuIcon-repair"></text></text>
<text>距上门</text> <text>距上门</text>
<uni-countdown :show-colon="false" :backgroundColor="'#eee'" <uni-countdown :show-colon="false" :backgroundColor="'#eee'"
:day="$dateUtil.countDownDiff(order.expectTimeEnd).day" :day="$dateUtil.countDownDiff(order.expectTimeStart).day"
:hour="$dateUtil.countDownDiff(order.expectTimeEnd).hour" :hour="$dateUtil.countDownDiff(order.expectTimeStart).hour"
:minute="$dateUtil.countDownDiff(order.expectTimeEnd).min" :minute="$dateUtil.countDownDiff(order.expectTimeStart).min"
:second="$dateUtil.countDownDiff(order.expectTimeEnd).seconds"> :second="$dateUtil.countDownDiff(order.expectTimeStart).seconds">
</uni-countdown> </uni-countdown>
</view> </view>
<view class="margin-top-sm" v-if="order.orderDetailId != null && order.orderStatus > 3"> <view class="margin-top-sm" v-if="order.orderDetailId != null && order.orderStatus > 3">
@ -793,7 +794,8 @@
let params = datetimeArr && datetimeArr.length > 1 ? { let params = datetimeArr && datetimeArr.length > 1 ? {
id: id, id: id,
expectTimeStart: datetimeArr[0], expectTimeStart: datetimeArr[0],
expectTimeEnd: datetimeArr[1] expectTimeEnd: datetimeArr[1],
useTimeNotRange: datetimeArr[1] == null ? true : false
} : { } : {
id: id, id: id,
revTime: datetime revTime: datetime

View File

@ -60,7 +60,8 @@
</view> </view>
<view class="margin-top-sm"> <view class="margin-top-sm">
<text class="cuIcon-time text-main-color margin-right-xs"></text> <text class="cuIcon-time text-main-color margin-right-xs"></text>
<text>预约时间{{servDetail.expectTimeStart + '~' + servDetail.expectTimeEnd}}</text> <text v-if="servDetail.expectTimeEndFront">预约时间{{servDetail.expectTimeStartFront + '~' + servDetail.expectTimeEndFront}}</text>
<text v-else>预约时间{{servDetail.expectTimeStartFront}}</text>
</view> </view>
<!-- <view class="margin-top-sm"> <!-- <view class="margin-top-sm">
<text class="cuIcon-time text-main-color margin-right-xs"></text> <text class="cuIcon-time text-main-color margin-right-xs"></text>
@ -131,7 +132,8 @@
<text class="margin-right-xs">联系方式{{item.workerPhone}}</text> <text class="margin-right-xs">联系方式{{item.workerPhone}}</text>
<button class="cu-btn line-main-color sm" @click="makePhoneCall(item.workerPhone)">拨打</button> <button class="cu-btn line-main-color sm" @click="makePhoneCall(item.workerPhone)">拨打</button>
</view> </view>
<view class="margin-top-sm">预约时间{{item.expectTimeStart + '~' + item.expectTimeEnd}}</view> <view class="margin-top-sm" v-if="item.expectTimeEndFront">预约时间{{item.expectTimeStartFront + '~' + item.expectTimeEndFront}}</view>
<view class="margin-top-sm" v-else>预约时间{{item.expectTimeStartFront}}</view>
<view class="margin-top-sm" v-if="item.orderStatus >= 3">上门时间{{item.workBeginTime}}</view> <view class="margin-top-sm" v-if="item.orderStatus >= 3">上门时间{{item.workBeginTime}}</view>
<view class="margin-top-sm" v-if="item.orderStatus >= 4">完成时间{{item.workFinishTime}}</view> <view class="margin-top-sm" v-if="item.orderStatus >= 4">完成时间{{item.workFinishTime}}</view>
<view class="margin-top-sm"> <view class="margin-top-sm">

View File

@ -280,3 +280,7 @@
-ms-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%);
} }
.readonlyPicker {
background-color: #EEEEEE;
}