预约时间修改为时间段预约

common/js/globalData.js

@@ -1,6 +1,34 @@
-export default {
+export default {
-	deptId: 101,
+	deptId: 101,
-	from: 'customer',
+	from: 'customer',
-	initPageNum: 1,
+	initPageNum: 1,
-	initPageSize: 20
+	initPageSize: 20,
-}
+	timeRangeList: [
+		'08:00-08:30',
+		'08:30-09:00',
+		'09:00-09:30',
+		'09:30-10:00',
+		'10:00-10:30',
+		'10:30-11: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: '-'
+}

pages/my/my-order.vue

@@ -30,10 +30,10 @@
 					<view class='cu-tag bg-yellow radius margin-right-sm' v-if="tabCur === 3" @click="showServDetail(shopOrder)">查看订单详情</view>
 				</view>
 				<view class="padding-lr">
-					<view class="margin-top-sm">
+					<view class="margin-top-sm" @click="showServDetail(shopOrder)">
 						<product-picked :product="shopOrder" :pickedList="shopOrder.standardList"></product-picked>
 					</view>
-					<view class="flex justify-end align-end padding-bottom-sm">
+					<view class="flex justify-end align-end padding-bottom-sm" @click="showServDetail(shopOrder)">
 						<view class="margin-right-sm"><text>总价</text><text class="text-price text-red">{{shopOrder.totalMoney}}</text>
 						</view>
 						<view class="margin-right-sm"><text>优惠</text><text class="text-price text-red">{{shopOrder.discountMoney}}</text>
@@ -89,7 +89,7 @@
 						class="padding-tb-sm solid-top">
 						<view>约定服务时间：</view>
 						<view class="flex justify-between align-end">
-							<view>{{shopOrder.serverTime}}</view>
+							<view>{{shopOrder.expectTimeStart + '~' + shopOrder.expectTimeEnd}}</view>
 							<view>
 								<button v-if="shopOrder.agreedServTime.customerAgreeStatus === 1"
 									class="cu-btn sm bg-yellow margin-right-sm"

pages/my/serv-detail.vue

@@ -50,7 +50,7 @@
 			</view>
 			<view class="margin-top-sm">
 				<text class="cuIcon-time text-main-color margin-right-xs"></text>
-				<text>预约时间：{{servDetail.serverTime}}</text>
+				<text>预约时间：{{servDetail.expectTimeStart + '~' + servDetail.expectTimeEnd}}</text>
 			</view>
 			<!-- <view class="margin-top-sm">
 				<text class="cuIcon-time text-main-color margin-right-xs"></text>
@@ -85,7 +85,7 @@
 		<view class="bg-white margin-lr-sm padding-lr padding-bottom margin-top-sm" v-for="(item, index) in servDetail.orderStandardDetailList">
 			<view class="cu-bar solid-bottom">
 				<view class="action bar-first-action">
-					<text class="cuIcon-titles text-main-color"></text> 实施单完成记录
+					<text class="cuIcon-titles text-main-color"></text> 子单完成记录
 				</view>
 				<view class='cu-tag bg-purple radius light margin-right-sm'>编码:{{item.orderDetailCode}}</view>
 			</view>

pages/order/order-detail.vue

@@ -40,13 +40,20 @@
 		</view>
 		<!-- 预约时间 -->
 		<view class="margin-lr-sm margin-top-sm bg-white padding">
-			<view class="flex justify-between align-center">
+			<view class="flex justify-between">
 				<text class="text-black">预约时间</text>
-				<uni-datetime-picker @change="changeDoorTime">
+				<view class="flex justify-end align-center">
-					<view v-if="formInfo.doorTime" class="text-sm">{{formInfo.doorTime}}<text class="text-bold cuIcon-right"></text>
+					<uni-datetime-picker @change="changeDoorTime" type="date">
-					</view>
+						<view v-if="formInfo.doorTime">
-					<view v-else class="text-red text-sm">请选择上门时间<text class="text-bold cuIcon-right"></text></view>
+							<text>{{formInfo.doorTime}}</text>
-				</uni-datetime-picker>
+						</view>
+						<view v-else class="text-red text-sm">请选择上门时间<text class="text-bold cuIcon-right"></text></view>
+					</uni-datetime-picker>
+					<picker class="margin-left-xs" v-if="formInfo.doorTime" mode="selector" :value="timeRangeIndex" :range="timeRangeList"
+						@change="timeRangeChange">
+						<input class="radius-input time-picker" v-model="timeRange" disabled></input>
+					</picker>
+				</view>
 			</view>
 			<view class="text-sm text-gray margin-top-sm"><text
 					class="cuIcon-question">选择的为期望上门时间，稍后工程师将与你确认具体上门时间</text></view>
@@ -150,9 +157,14 @@
 					isNeedBill: '0',
 					comments: '',
 					doorTime: null,
-					defaultAddress: null
+					defaultAddress: null,
+					expectTimeStart: '',
+					expectTimeEnd: ''
 				},
-				totalPrice: 0
+				totalPrice: 0,
+				timeRangeIndex: 0,
+				timeRange: '',
+				timeRangeList: []
 			}
 		},
 		onLoad(options) {
@@ -167,8 +179,9 @@
 			async loadData(params) {
 				console.log(params)
 				// this.pickedProductList = await this.$api.data('pickedProductList');
-				this.pickedProductList = params.pickedProductList;
+				this.pickedProductList = params.pickedProductList;
-				this.formInfo.defaultAddress = await this.$api.data('defaultAddress');
+				this.timeRangeList = this.$globalData.timeRangeList;
+				this.timeRange = this.timeRangeList[0];
 			},
 			bindEvent() {
 				uni.$on(this.$globalFun.CHOOSE_ADDRESS, this.chooseAddress);
@@ -194,7 +207,19 @@
 				this.formInfo.defaultAddress = addressInfo;
 			},
 			changeDoorTime(value) {
-				this.formInfo.doorTime = value;
+				this.formInfo.doorTime = value;
+				this.changeExpectTime();
+			},
+			timeRangeChange(e) {
+				this.timeRangeIndex = e.detail.value;
+				this.timeRange = this.timeRangeList[this.timeRangeIndex];
+				this.changeExpectTime();
+			},
+			changeExpectTime() {
+				let timeRangeSplit = this.$globalData.timeRangeSplit;
+				let timeArr = this.timeRange.split(timeRangeSplit);
+				this.formInfo.expectTimeStart = this.formInfo.doorTime + ' ' + timeArr[0] + ':00';
+				this.formInfo.expectTimeEnd = this.formInfo.doorTime + ' ' + timeArr[1] + ':00';
 			},
 			parseGoodsList() {
 				let goodsList = [];
@@ -218,7 +243,7 @@
 					})
 					return false;
 				}
-				if (!this.formInfo.doorTime) {
+				if (!this.formInfo.doorTime || !this.formInfo.expectTimeEnd || !this.formInfo.expectTimeStart) {
 					uni.showToast({
 						title: '请选择上门时间',
 						icon: 'none'
@@ -235,7 +260,8 @@
 				let curUserInfo = this.$request.getCurUserInfo();
 				let params = {
 					customerId: curUserInfo.customerId,
-					serverTime: this.formInfo.doorTime,
+					expectTimeStart: this.formInfo.expectTimeStart,
+					expectTimeEnd: this.formInfo.expectTimeEnd,
 					addressId: this.formInfo.defaultAddress.customerAddressId,
 					payType: this.formInfo.payWay,
 					remark: this.formInfo.comments,
@@ -308,5 +334,9 @@
 
 	.cu-progress.sm {
 		height: 12rpx;
+	}
+	
+	.time-picker {
+		width: 180rpx;
 	}
 </style>

style/default.css

@@ -100,4 +100,11 @@
 	display: flex;
 	flex-direction: column;
 	justify-content: flex-start;
+}
+
+.radius-input {
+	border: 1rpx solid rgba(0, 0, 0, 0.1);
+	border-radius: 10rpx;
+	padding: 11rpx;
+	box-sizing: content-box;
 }