|
|
@@ -272,69 +272,69 @@
|
|
|
</view>
|
|
|
</uni-popup>
|
|
|
|
|
|
- <!-- 配送时间选择弹框 -->
|
|
|
- <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>
|
|
|
+ <!-- 配送时间选择弹框 -->
|
|
|
+ <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>
|
|
|
|
|
|
<uni-popup ref="discountRef" background-color="#fff" type="center" :animation="false" class="class-popup-style">
|
|
|
<view style="display:flex;padding:20upx;min-height:25vh;justify-content: space-between;align-items:center;flex-wrap:wrap;">
|
|
|
@@ -1182,11 +1182,11 @@ console.log(params)
|
|
|
|
|
|
.time-sections {
|
|
|
display: flex;
|
|
|
- gap: 30upx;
|
|
|
+ flex-direction: column;
|
|
|
+ gap: 20upx;
|
|
|
margin-bottom: 0;
|
|
|
- justify-content: space-between;
|
|
|
flex: 1;
|
|
|
- padding: 30upx 20upx 0 20upx;
|
|
|
+ padding: 20upx 20upx 0 20upx;
|
|
|
overflow: hidden;
|
|
|
}
|
|
|
|
|
|
@@ -1194,14 +1194,14 @@ console.log(params)
|
|
|
flex: 1;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
+ min-height: 200upx;
|
|
|
|
|
|
.section-title {
|
|
|
- font-size: 30upx;
|
|
|
- color: black;
|
|
|
- font-weight: bold;
|
|
|
- margin-bottom: 15upx;
|
|
|
- font-weight: 500;
|
|
|
- text-align: center;
|
|
|
+ font-size: 28upx;
|
|
|
+ color: #333;
|
|
|
+ font-weight: 600;
|
|
|
+ margin-bottom: 12upx;
|
|
|
+ text-align: left;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
@@ -1215,6 +1215,7 @@ console.log(params)
|
|
|
overflow: hidden;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
+ min-height: 150upx;
|
|
|
}
|
|
|
|
|
|
.minutes-wrapper {
|
|
|
@@ -1227,42 +1228,44 @@ console.log(params)
|
|
|
overflow: hidden;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
+ min-height: 150upx;
|
|
|
}
|
|
|
|
|
|
.hours-scroll,
|
|
|
.minutes-scroll {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
- padding: 10upx;
|
|
|
+ padding: 8upx;
|
|
|
box-sizing: border-box;
|
|
|
- min-height: 200upx;
|
|
|
}
|
|
|
|
|
|
.hours-buttons,
|
|
|
.minutes-buttons {
|
|
|
display: flex;
|
|
|
flex-wrap: wrap;
|
|
|
- gap: 10upx;
|
|
|
+ gap: 8upx;
|
|
|
+ justify-content: flex-start;
|
|
|
}
|
|
|
|
|
|
.time-button {
|
|
|
- width: calc(50% - 5upx);
|
|
|
- height: 80upx;
|
|
|
+ width: calc(25% - 6upx);
|
|
|
+ height: 60upx;
|
|
|
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;
|
|
|
+ border-radius: 6upx;
|
|
|
+ font-size: 26upx;
|
|
|
+ color: #666;
|
|
|
box-sizing: border-box;
|
|
|
+ transition: all 0.2s;
|
|
|
+ flex-shrink: 0;
|
|
|
|
|
|
&.active {
|
|
|
- background: #e8f5ff;
|
|
|
+ background: #3385FF;
|
|
|
border-color: #3385FF;
|
|
|
- color: #3385FF;
|
|
|
+ color: #fff;
|
|
|
font-weight: 500;
|
|
|
}
|
|
|
|
|
|
@@ -1273,13 +1276,36 @@ console.log(params)
|
|
|
|
|
|
.popup-footer {
|
|
|
display: flex;
|
|
|
- gap: 20upx;
|
|
|
- padding: 20upx;
|
|
|
+ gap: 12upx;
|
|
|
+ padding: 15upx 20upx 20upx 20upx;
|
|
|
border-top: 2upx solid #f0f2f6;
|
|
|
flex-shrink: 0;
|
|
|
|
|
|
- button {
|
|
|
+ .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;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
</style>
|
