优化

hdApp/src/admin/goods/result.vue

@@ -53,18 +53,18 @@
 						<tui-list-cell class="line-cell" :hover="false" :arrow="true">
 							<view class="tui-title" v-if="form.sendType == 1">取花日期</view>
 							<view class="tui-title" v-else>配送日期</view>
-							<picker mode="date" :value="form.reachDate" @change="selTimeFn" class="tui-input">
-								<view v-if="form.reachDate">{{ form.reachDate }}</view>
-								<view v-else>今天</view>
-							</picker>
+							<view class="uni-input" v-if="form.reachDate==''" @click="bindReachDateChange">
+								<view style="width:410upx;font-size:32upx;color:#CCCCCC;">今天</view>
+							</view>
+							<view class="uni-input" @click="bindReachDateChange">
+								<view style="width:410upx;font-size:32upx;">{{form.reachDate}}</view>
+							</view>
 						</tui-list-cell>
 
-						<tui-list-cell class="line-cell" :hover="false" :arrow="false">
+						<tui-list-cell class="line-cell" :hover="false" :arrow="true">
 							<view class="tui-title" v-if="form.sendType == 1">取花时间</view>
 							<view class="tui-title" v-else>配送时间</view>
-							<picker mode="multiSelector" :value="form.reachPeriod" :range="timeOptions" @change="bindTimeChange">
-								<view class="uni-input" style="width:450upx;">{{form.reachPeriod}}<text style="margin-left:10upx;">前</text></view>
-							</picker>
+							<view class="uni-input" style="width:450upx;font-size:32upx;" @click="openTimePopup">{{form.reachPeriod}}</view>
 						</tui-list-cell>
 
 						<tui-list-cell class="line-cell" :hover="false">
@@ -89,56 +89,131 @@
 							<button @click="form.needPrint = 1" class="admin-button-com middle" :class="form.needPrint == 1 ? 'blue' : 'default'" style="margin-left:30upx;">打印</button>
 						</tui-list-cell>
 
-					</view>
-				</form>
-				<view class="button-group">
-					<button class="admin-button-com big default" @click="goBack" style="width:200upx;">取消</button>
-					<button class="admin-button-com big blue" @click="confirmOrder" style="width:200upx;margin-left:50upx;">确认</button>
 				</view>
+			</form>
+			<view class="button-group">
+				<button class="admin-button-com big default" @click="goBack" style="width:200upx;">取消</button>
+				<button class="admin-button-com big blue" @click="confirmOrder" style="width:200upx;margin-left:50upx;">确认</button>
 			</view>
 		</view>
 		</view>
 	</view>
+
+	<!-- 配送时间选择弹框 -->
+	<uni-popup ref="timePopup" type="bottom" background-color="#fff">
+		<view class="time-picker-popup">
+			<view class="popup-header">
+				<text class="popup-title">选择配送时间</text>
+				<text class="popup-close" @click="closeTimePopup">×</text>
+			</view>
+			
+			<view class="time-sections">
+				<!-- 小时选择 -->
+				<view class="time-section">
+					<view class="section-title">小时</view>
+					<view class="hours-wrapper">
+						<scroll-view 
+							scroll-y="true" 
+							class="hours-scroll"
+							enhanced="true"
+							show-scrollbar="true"
+						>
+							<view class="hours-buttons">
+								<button 
+									v-for="(hour, index) in timeOptions[0]" 
+									:key="index"
+									class="time-button" 
+									:class="{ active: selectedHour == hour }"
+									@click="selectedHour = hour"
+								>{{ hour }}</button>
+							</view>
+						</scroll-view>
+					</view>
+				</view>
+				
+				<!-- 分钟选择 -->
+				<view class="time-section">
+					<view class="section-title">分钟</view>
+					<view class="minutes-wrapper">
+						<scroll-view 
+							scroll-y="true" 
+							class="minutes-scroll"
+							enhanced="true"
+							show-scrollbar="true"
+						>
+							<view class="minutes-buttons">
+								<button 
+									v-for="(minute, index) in timeOptions[1]" 
+									:key="index"
+									class="time-button" 
+									:class="{ active: selectedMinute == minute }"
+									@click="selectedMinute = minute"
+								>{{ minute }}</button>
+							</view>
+						</scroll-view>
+					</view>
+				</view>
+			</view>
+			
+			<!-- 操作按钮 -->
+			<view class="popup-footer">
+				<button class="footer-button default" @click="closeTimePopup">取消</button>
+				<button class="footer-button blue" @click="confirmTime">确认</button>
+			</view>
+		</view>
+	</uni-popup>
+
+	<!-- 配送日期选择器蒙板 -->
+	<view v-if="reachDatePickerShow" class="date-picker-mask" @click="reachDatePickerShow = false"></view>
+
+	<mx-date-picker :show="reachDatePickerShow" format="yyyy-mm-dd" type="date" :value="reachDatePickerValue" :show-tips="true" @confirm="confirmReachDatePicker" @cancel="reachDatePickerShow = false" />
+	</view>
 </template>
 <script>
 import TuiListCell from "@/components/plugin/list-cell";
 import { createOrder } from "@/api/order";
 import { mapGetters } from "vuex";
+import MxDatePicker from '@/components/mx-datepicker/mx-datepicker.vue';
 
 export default {
 	name: "result",
 	components: {
-		TuiListCell
-	},
-	data() {
-		return {
-			form: {
-				hasPay: 4,
-				payWay: 0,
-				num: 1,
-				sendType: 0,
-				reachDate: '',
-				reachPeriod: "12:00",
-				remark: '',
-				needWork:1,
-        		needPrint:2
-			},
-			goodsPrice: '',
-			payWayindex: 0,
-			payWayList: [
-				{name: "线下微信", id: 0},
-				{name: "线下支付宝", id: 1},
-				{name: "现金", id: 4},
-				{name: "银行卡", id: 5}
-			],
-			timeOptions: [
-				['00', '01', '02','03','04','05','06','07','08','09','10','11','12','13', '14','15','16','17','18','19','20','21','22','23'],
-				['00', '05', '10','15','20','25','30','35','40','45','50','55']
-			],
-			goodsName:'',
-			goodsId:0
-		};
+		TuiListCell,
+		MxDatePicker
 	},
+		data() {
+			return {
+				form: {
+					hasPay: 4,
+					payWay: 0,
+					num: 1,
+					sendType: 0,
+					reachDate: '',
+					reachPeriod: "12:00",
+					remark: '',
+					needWork:1,
+					needPrint:2
+				},
+				goodsPrice: '',
+				payWayindex: 0,
+				payWayList: [
+					{name: "线下微信", id: 0},
+					{name: "线下支付宝", id: 1},
+					{name: "现金", id: 4},
+					{name: "银行卡", id: 5}
+				],
+				timeOptions: [
+					['00', '01', '02','03','04','05','06','07','08','09','10','11','12','13', '14','15','16','17','18','19','20','21','22','23'],
+					['00', '05', '10','15','20','25','30','35','40','45','50','55']
+				],
+				goodsName:'',
+				goodsId:0,
+				selectedHour: '12', // 选中的小时
+				selectedMinute: '00', // 选中的分钟
+				reachDatePickerShow: false,
+				reachDatePickerValue: ''
+			};
+		},
 	computed: {
 		...mapGetters(["getLoginInfo", "getMyShopInfo"]),
 		orderTotalPrice() {
@@ -198,12 +273,36 @@ export default {
 		selTimeFn(e) {
 			this.form.reachDate = e.detail.value;
 		},
+		bindReachDateChange(){
+			this.reachDatePickerShow = true
+			this.reachDatePickerValue = this.form.reachDate
+		},
+		confirmReachDatePicker(e) {
+			this.form.reachDate = e.value
+			this.reachDatePickerShow = false
+		},
 		bindTimeChange(event) {
 			let val = event.detail.value;
 			let before = Number(val[0]);
 			let after = Number(val[1]);
 			let timeOptions = this.timeOptions;
 			this.form.reachPeriod = timeOptions[0][before]+':'+timeOptions[1][after];
+		},
+		openTimePopup() {
+			// 初始化为当前选中的时间
+			const [hour, minute] = this.form.reachPeriod.split(':')
+			this.selectedHour = hour
+			this.selectedMinute = minute
+			this.$refs.timePopup.open()
+		},
+		// 关闭时间选择弹框
+		closeTimePopup() {
+			this.$refs.timePopup.close()
+		},
+		// 确认时间选择
+		confirmTime() {
+			this.form.reachPeriod = `${this.selectedHour}:${this.selectedMinute}`
+			this.closeTimePopup()
 		}
 	}
 };
@@ -266,14 +365,207 @@ export default {
 					color: #ccc;
 				}
 			}
+			.button-group {
+				display: flex;
+				justify-content: center;
+				align-items: center;
+				margin-top: 40upx;
+				padding: 0 30upx;
+			}
 		}
-		.button-group {
-			display: flex;
-			justify-content: center;
-			align-items: center;
-			margin-top: 40upx;
-			padding: 0 30upx;
+	}
+}
+
+/* 时间选择弹窗样式 */
+.time-picker-popup {
+	width: 100%;
+	background: #fff;
+	border-radius: 20upx 20upx 0 0;
+	display: flex;
+	flex-direction: column;
+	max-height: 94vh;
+	padding: 0 0 120upx 0;
+}
+
+.popup-header {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	margin-bottom: 0;
+	padding: 30upx 20upx 20upx 20upx;
+	border-bottom: 2upx solid #f0f2f6;
+	flex-shrink: 0;
+}
+
+.popup-title {
+	font-size: 36upx;
+	color: #333;
+	font-weight: bold;
+}
+
+.popup-close {
+	font-size: 48upx;
+	color: #999;
+	line-height: 1;
+	cursor: pointer;
+}
+
+.time-sections {
+	display: flex;
+	flex-direction: column;
+	gap: 20upx;
+	margin-bottom: 0;
+	flex: 1;
+	padding: 20upx 20upx 0 20upx;
+	overflow: hidden;
+}
+
+.time-section {
+	flex: 1;
+	display: flex;
+	flex-direction: column;
+	min-height: 200upx;
+	
+	.section-title {
+		font-size: 28upx;
+		color: #333;
+		font-weight: 600;
+		margin-bottom: 12upx;
+		text-align: left;
+	}
+}
+
+.hours-wrapper {
+	width: 100%;
+	flex: 1;
+	background: #f8f9fa;
+	border: 2upx solid #e9ecef;
+	border-radius: 8upx;
+	position: relative;
+	overflow: hidden;
+	display: flex;
+	flex-direction: column;
+	min-height: 150upx;
+}
+
+.minutes-wrapper {
+	width: 100%;
+	flex: 1;
+	background: #f8f9fa;
+	border: 2upx solid #e9ecef;
+	border-radius: 8upx;
+	position: relative;
+	overflow: hidden;
+	display: flex;
+	flex-direction: column;
+	min-height: 150upx;
+}
+
+.hours-scroll,
+.minutes-scroll {
+	width: 100%;
+	height: 100%;
+	padding: 8upx;
+	box-sizing: border-box;
+}
+
+.hours-buttons,
+.minutes-buttons {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 8upx;
+	justify-content: flex-start;
+}
+
+.time-button {
+	width: calc(25% - 6upx);
+	height: 60upx;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	background: #ffffff;
+	border: 2upx solid #e9ecef;
+	border-radius: 6upx;
+	font-size: 26upx;
+	color: #666;
+	box-sizing: border-box;
+	transition: all 0.2s;
+	flex-shrink: 0;
+	
+	&.active {
+		background: #3385FF;
+		border-color: #3385FF;
+		color: #fff;
+		font-weight: 500;
+	}
+	
+	&:active {
+		background: #e8f5ff;
+	}
+}
+
+.popup-footer {
+	display: flex;
+	gap: 12upx;
+	padding: 15upx 20upx 20upx 20upx;
+	border-top: 2upx solid #f0f2f6;
+	flex-shrink: 0;
+	
+	.footer-button {
+		flex: 1;
+		height: 70upx;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		border: none;
+		border-radius: 8upx;
+		font-size: 28upx;
+		font-weight: 500;
+		transition: all 0.2s;
+		
+		&.default {
+			background: #f5f5f5;
+			color: #666;
+		}
+		
+		&.blue {
+			background: #3385FF;
+			color: #fff;
+		}
+		
+		&:active {
+			opacity: 0.8;
 		}
 	}
 }
+
+/* 日期选择器蒙板 */
+.date-picker-mask {
+	position: fixed;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	background-color: rgba(0, 0, 0, 0.5);
+	z-index: 98;
+	animation: fadeIn 0.3s ease-in-out;
+}
+
+@keyframes fadeIn {
+	from {
+		opacity: 0;
+	}
+	to {
+		opacity: 1;
+	}
+}
+
+@keyframes fadeOut {
+	from {
+		opacity: 1;
+	}
+	to {
+		opacity: 0;
+	}
+}
 </style>