订单细节完善

pages/order/order.vue

@@ -2,7 +2,8 @@
 	<view class="order-page">
 		<view class="flex-row header">
 			<view class="part-left">
-				<image :src="roomInfo.images.length?roomInfo.images[0]:'../../static/blank2.jpg'" mode="scaleToFill"></image>
+				<image :src="roomInfo.images.length?roomInfo.images[0]:'../../static/blank2.jpg'" mode="scaleToFill">
+				</image>
 			</view>
 			<view class="part-right">
 				<view class="flex-between part-1">
@@ -55,10 +56,12 @@
 					<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 20upx;"
+					<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'">
-							{{item.duration}}小时</view>
+							<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>
@@ -162,7 +165,8 @@
 					<view class="action text-pink" @tap="onSelectedDate">确定</view>
 				</view>
 				<view class="select-box">
-					<picker-view class="picker-view" indicator-style="height: 42px;" v-model="checkedDateList" @change="onBindChange">
+					<picker-view class="picker-view" indicator-style="height: 42px;" v-model="checkedDateList"
+						@change="onBindChange">
 						<picker-view-column>
 							<view class="item" v-for="(item,index) in hourList" :key="index">
 								<text>{{item}}</text>
@@ -178,6 +182,25 @@
 			</view>
 		</uni-popup>
 
+		<uni-popup ref="popupDuration" type="bottom">
+			<view class="flex-col">
+				<view class="cu-bar bg-white">
+					<view class="action text-gray" @tap="onHideModal">取消</view>
+					<view class="action text-pink" @tap="onSelectedDuration">确定</view>
+				</view>
+				<view class="select-box">
+					<picker-view class="picker-view" indicator-style="height: 42px;" v-model="durationIndex"
+						@change="onBindDuratin">
+						<picker-view-column>
+							<view class="item" v-for="(item,index) in hourList" :key="index">
+								<text>{{index+1}}小时</text>
+							</view>
+						</picker-view-column>
+					</picker-view>
+				</view>
+			</view>
+		</uni-popup>
+
 	</view>
 </template>
 
@@ -188,8 +211,12 @@
 		listSortDistance,
 		roomInfo
 	} from "@/api/store.js";
-    import {getUseCoupon} from "@/api/coupon"
-	import {orderCreate} from "@/api/order"
+	import {
+		getUseCoupon
+	} from "@/api/coupon"
+	import {
+		orderCreate
+	} from "@/api/order"
 
 	export default {
 		data() {
@@ -206,7 +233,7 @@
 				id: '',
 				hostUrl: config.hostUrl,
 				roomInfo: {
-					images:[]
+					images: []
 				},
 				startTime: moment().format("HH:mm"),
 				endTime: '12:00',
@@ -222,8 +249,10 @@
 						type: "2"
 					}
 				],
+				// 时长选择
 				distanceIndex: 0,
-				distanceMode: [{
+				distanceMode: [
+					{
 						duration: 4
 					},
 					{
@@ -231,8 +260,12 @@
 					},
 					{
 						duration: 8,
+					},
+					{
+						duration: '其他',
 					}
 				],
+				// 套餐
 				modeIndex: 0,
 				packageMode: [{
 						label: "",
@@ -248,12 +281,21 @@
 					}
 				],
 				dateIntervalList: [],
-				duration:0,
-				couponList:[],
-				checkedIndex:[],
-				checkedDateList:[0,0],
-				hourList:["0","1","2","3","4","5","6","7","8","9","10","11","12","13","14","15","16","17","18","19","20","21","22","23"],
-				minuteList:['0',"30"]
+				duration: 0,
+				couponList: [],
+				checkedIndex: [],
+				checkedDateList: [0, 0],
+				durationIndex: [0],
+				hourList: ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16",
+					"17", "18", "19", "20", "21", "22", "23"
+				],
+				minuteList: ['0', "30"],
+				orderTypeEnum: {
+					1: "预定",
+					2: "续费",
+					3: "充值"
+				},
+				editDuration: []
 			};
 		},
 		onLoad(option) {
@@ -264,15 +306,15 @@
 			this.onLoading()
 		},
 		methods: {
-			onGetUseCoupon(){
+			onGetUseCoupon() {
 				getUseCoupon({
-					storeId:this.roomInfo.storeId,
-					roomId:this.roomInfo.id,
-					preStartDate:"2023-10-24 14:00",
-					preEndDate:"2023-10-24 18:00"
-				}).then(res=>{
-					if(res.statusCode == 200){
-						if(res.data&&res.data.length){
+					storeId: this.roomInfo.storeId,
+					roomId: this.roomInfo.id,
+					preStartDate: "2023-10-25 14:00",
+					preEndDate: "2023-10-25 18:00"
+				}).then(res => {
+					if (res.statusCode == 200) {
+						if (res.data && res.data.length) {
 							this.index = 1;
 							this.packageMode = res.data;
 						}
@@ -327,6 +369,10 @@
 				this.onSetEndTime()
 			},
 			onDurationChange(i) {
+				if(i>= this.distanceMode.length-1){
+					this.onEditDuration();
+					return
+				}
 				if (this.distanceIndex === i) return;
 				this.distanceIndex = i
 				this.onSetEndTime()
@@ -341,14 +387,14 @@
 					// 套餐模式
 					this.duration = this.packageMode[this.modeIndex].duration;
 					this.endTime = this.startTime.split(":").map((item, k) => {
-						let num =''
-						if(k == 0){
-							if((Number(item) + this.duration)>23){
-								num = Number(item) + this.duration-24
-							}else{
+						let num = ''
+						if (k == 0) {
+							if ((Number(item) + this.duration) > 23) {
+								num = Number(item) + this.duration - 24
+							} else {
 								num = Number(item) + this.duration
 							}
-						}else{
+						} else {
 							num = item
 						}
 						return num
@@ -357,14 +403,14 @@
 					// 小时模式
 					this.duration = this.distanceMode[this.distanceIndex].duration;
 					this.endTime = this.startTime.split(":").map((item, k) => {
-						let num =''
-						if(k == 0){
-							if((Number(item) + this.duration)>23){
-								num = Number(item) + this.duration-24
-							}else{
+						let num = ''
+						if (k == 0) {
+							if ((Number(item) + this.duration) > 23) {
+								num = Number(item) + this.duration - 24
+							} else {
 								num = Number(item) + this.duration
 							}
-						}else{
+						} else {
 							num = item
 						}
 						return num
@@ -374,54 +420,79 @@
 				this.onGetUseCoupon()
 
 			},
-			onSelectDate(){
-				if(!this.checkedIndex.length){
+			onSelectDate() {
+				if (!this.checkedIndex.length) {
 					let arr = this.startTime.split(":")
-					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]
+					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.$refs.popup.open()
 			},
-			onBindChange(e){
-				console.log(e.target.value);
+
+			onBindChange(e) {
 				this.checkedIndex = e.target.value
 			},
-			onHideModal(){
-				this.$refs.popup.close()
-			},
-			onSelectedDate(){
+			onSelectedDate() {
 				this.checkedDateList = this.checkedIndex;
 				this.startTime = `${this.checkedDateList[0]}:${this.minuteList[this.checkedDateList[1]]}`;
-				console.log(this.startTime,"开始时间")
+				console.log(this.startTime, "开始时间")
 				//重新设置结束时间
 				this.onSetEndTime()
 				this.onHideModal();
 			},
-			onOrderCreate(){
+			
+			onEditDuration() {
+				if(this.editDuration.length){
+					this.durationIndex = this.editDuration
+				}
+				this.$refs.popupDuration.open()
+			},
+
+			onBindDuratin(e) {
+			
+				this.durationIndex = e.target.value
+			},
+			onSelectedDuration() {
+				this.distanceIndex = 3
+				this.editDuration = this.durationIndex;
+				this.distanceMode[this.distanceIndex] = {
+					duration: this.editDuration[0] + 1,
+				}
+				console.log(this.distanceMode,"1asdasdasd")
+				
+				this.onHideModal()
+				this.$forceUpdate();
+				this.onSetEndTime()
+			},
+			onHideModal() {
+				this.$refs.popup.close()
+				this.$refs.popupDuration.close()
+			},
+			onOrderCreate() {
 				orderCreate({
-					storeId:this.roomInfo.storeId,
-					roomId:this.roomInfo.id,
-					orderType:0,
-					buyType:1,
-					payType:1,
-					preStartDate:"2023-10-24 00:00",
-					preEndDate:"2023-10-24 04:00",
-					totalFee:100,
-					payFee:0
-				}).then(res=>{
-					console.log(res,909090)
+					storeId: this.roomInfo.storeId,
+					roomId: this.roomInfo.id,
+					orderType: 1,
+					buyType: 1,
+					payType: 1,
+					preStartDate: "2023-10-25 00:00:00",
+					preEndDate: "2023-10-25 04:00:00",
+					totalFee: 100,
+					payFee: 0
+				}).then(res => {
+					console.log(res, 909090)
 				})
 			}
 		}
@@ -744,12 +815,15 @@
 			}
 		}
 	}
-	.select-box{
+
+	.select-box {
 		height: 320upx;
 		background-color: #f1f1f1;
-		.picker-view{
+
+		.picker-view {
 			height: 100%;
-			.item{
+
+			.item {
 				display: flex;
 				justify-content: center;
 				align-items: center;