修改时间插件更换

mallApp/src/pages/billing/affirmGhs.vue

@@ -37,6 +37,70 @@
 
 				<view class="module-com input-line-wrap">
 
+					<!-- 配送时间选择弹框 -->
+					<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="admin-button-com middle default" @click="closeTimePopup">取消</button>
+								<button class="admin-button-com middle blue" @click="confirmTime">确认</button>
+							</view>
+						</view>
+					</uni-popup>
+
 					<tui-list-cell class="line-cell" :hover="false" :arrow="false" >
 						<block v-if="account == 4805">
 							<button class="admin-button-com big" :class="[form.sendType == 1 ? 'blue' : 'default']" style="width:180upx;"  @click="changeSendType(1)">到店自取</button>
@@ -140,16 +204,14 @@
 						<view class="tui-title ">配送日期</view>
 						<picker mode="date" :value="form.reachDate" @change="selTimeFn" class="tui-input">
 							<view v-if="form.reachDate">{{ form.reachDate }}</view>
-							<view v-else style="color:#CCCCCC;">请选日期，默认当天</view>
+							<view v-else style="color:#CCCCCC;">可选日期，默认当天</view>
 						</picker>
 					</tui-list-cell>
 
-					<tui-list-cell class="line-cell" :hover="false" :arrow="true">
-						<view class="tui-title">配送时间</view>
-						<picker mode="multiSelector" :range="timeOptions" @change="bindTimeChange">
-							<view class="uni-input" style="width:450upx;">{{form.reachPeriod}}<text style="margin-left:10upx;">前</text></view>
-						</picker>
-					</tui-list-cell>
+				<tui-list-cell class="line-cell" :hover="false" :arrow="true" @click="openTimePopup">
+					<view class="tui-title">配送时间</view>
+					<view class="uni-input" style="width:450upx;font-size:30upx;">{{form.reachPeriod}}<text style="margin-left:10upx;"></text></view>
+				</tui-list-cell>
 
 					<tui-list-cell class="line-cell" :hover="false" :arrow="false">
 						<textarea style="height: 100upx;z-index:0" v-model="form.remark" placeholder="这里写备注"></textarea>
@@ -206,6 +268,8 @@ export default {
 				['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']
 		  	],
+			selectedHour: '20', // 选中的小时
+			selectedMinute: '00', // 选中的分钟
 			account:0,
 			showDistance:0,
 			deliveryQuotes: [], // 跑腿平台报价列表
@@ -289,6 +353,23 @@ export default {
 		}
 	},
 	methods: {
+		// 打开时间选择弹框
+		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()
+		},
 		checkFreeDelivery(){
 			// 不显示跑腿费时，不需要判断
 			if(this.displaySendCost == false){
@@ -343,13 +424,6 @@ export default {
 		selTimeFn(e) {
 			this.form.reachDate = e.detail.value;
 		},
-		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]
-		},
 		init(){
 			if(this.option.account){
 				this.account = this.option.account
@@ -606,6 +680,143 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
+
+/* 时间选择弹框样式 */
+.time-picker-popup {
+	width: 100%;
+	background: #fff;
+	border-radius: 20upx 20upx 0 0;
+	display: flex;
+	flex-direction: column;
+	max-height: 90vh;
+	padding: 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;
+	gap: 30upx;
+	margin-bottom: 0;
+	justify-content: space-between;
+	flex: 1;
+	padding: 30upx 20upx 0 20upx;
+	overflow: hidden;
+}
+
+.time-section {
+	flex: 1;
+	display: flex;
+	flex-direction: column;
+	
+	.section-title {
+		font-size: 28upx;
+		color: #666;
+		margin-bottom: 15upx;
+		font-weight: 500;
+		text-align: center;
+	}
+}
+
+.hours-wrapper {
+	width: 100%;
+	flex: 1;
+	background: #f8f9fa;
+	border: 2upx solid #e9ecef;
+	border-radius: 8upx;
+	position: relative;
+	overflow: hidden;
+	display: flex;
+	flex-direction: column;
+}
+
+.minutes-wrapper {
+	width: 100%;
+	flex: 1;
+	background: #f8f9fa;
+	border: 2upx solid #e9ecef;
+	border-radius: 8upx;
+	position: relative;
+	overflow: hidden;
+	display: flex;
+	flex-direction: column;
+}
+
+.hours-scroll,
+.minutes-scroll {
+	width: 100%;
+	height: 100%;
+	padding: 10upx;
+	box-sizing: border-box;
+	min-height: 200upx;
+}
+
+.hours-buttons,
+.minutes-buttons {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 10upx;
+}
+
+.time-button {
+	width: calc(50% - 5upx);
+	height: 80upx;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	background: #ffffff;
+	border: 2upx solid #e9ecef;
+	border-radius: 8upx;
+	font-size: 30upx;
+	color: #333;
+	margin-bottom: 10upx;
+	box-sizing: border-box;
+	
+	&.active {
+		background: #e8f5ff;
+		border-color: #3385FF;
+		color: #3385FF;
+		font-weight: 500;
+	}
+	
+	&:active {
+		background: #e8f5ff;
+	}
+}
+
+.popup-footer {
+	display: flex;
+	gap: 20upx;
+	padding: 20upx;
+	border-top: 2upx solid #f0f2f6;
+	flex-shrink: 0;
+	
+	button {
+		flex: 1;
+	}
+}
+
 .admin-button-com {
 	margin-right: 20upx;
 }