|
|
@@ -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>
|
|
|
@@ -136,20 +200,16 @@
|
|
|
<text style="color: #3385FF">¥{{ modifyPrice }}</text>
|
|
|
</tui-list-cell>
|
|
|
|
|
|
- <tui-list-cell class="line-cell" :hover="false" :arrow="true">
|
|
|
- <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>
|
|
|
- </picker>
|
|
|
- </tui-list-cell>
|
|
|
+ <tui-list-cell class="line-cell" :hover="false" :arrow="true">
|
|
|
+ <view class="tui-title ">配送日期</view>
|
|
|
+ <view class="uni-input" v-if="form.reachDate==''" style="color:width:400upx;font-size:34upx;" @click="bindDateChange">今天</view>
|
|
|
+ <view class="uni-input" @click="bindDateChange" v-else style="width:400upx;font-size:34upx;">{{form.reachDate}}</view>
|
|
|
+ </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>
|
|
|
@@ -162,11 +222,16 @@
|
|
|
</view>
|
|
|
|
|
|
<view class="under-bar">
|
|
|
- <view class="price-view">¥{{ modifyPrice }}</view>
|
|
|
- <button class="admin-button-com blue big" style="border:none;margin-right:38upx;width:280upx;" @click="confirmForm">提交</button>
|
|
|
- </view>
|
|
|
-
|
|
|
+ <view class="price-view">¥{{ modifyPrice }}</view>
|
|
|
+ <button class="admin-button-com blue big" style="border:none;margin-right:38upx;width:280upx;" @click="confirmForm">提交</button>
|
|
|
</view>
|
|
|
+
|
|
|
+ <!-- 配送日期选择器蒙板 -->
|
|
|
+ <view v-if="showDatePicker" class="date-picker-mask" @click="showDatePicker = false"></view>
|
|
|
+
|
|
|
+ <mx-date-picker :show="showDatePicker" format="yyyy-mm-dd" type="date" :value="defaultPickerDate" :show-tips="true" @confirm="confirmDatePicker" @cancel="showDatePicker = false" />
|
|
|
+
|
|
|
+</view>
|
|
|
</template>
|
|
|
<script>
|
|
|
import TuiListCell from "@/components/plugin/list-cell";
|
|
|
@@ -174,16 +239,20 @@ import productMins from "@/mixins/cgProduct";
|
|
|
import { buyItem,newFreight } from "@/api/order"
|
|
|
import { allDeliveryQuotes } from "@/api/express/delivery"
|
|
|
import { currentInfo } from "@/api/user"
|
|
|
+import MxDatePicker from '@/components/mx-datepicker/mx-datepicker.vue';
|
|
|
export default {
|
|
|
name: "affirmGhs",
|
|
|
components: {
|
|
|
- TuiListCell
|
|
|
+ TuiListCell,
|
|
|
+ MxDatePicker
|
|
|
},
|
|
|
mixins: [productMins],
|
|
|
data() {
|
|
|
return {
|
|
|
pageType: "cg",
|
|
|
list:[],
|
|
|
+ showDatePicker: false,
|
|
|
+ defaultPickerDate: '',
|
|
|
form: {
|
|
|
reachDate: "",
|
|
|
reachPeriod: "20:00",
|
|
|
@@ -206,6 +275,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 +360,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,12 +431,13 @@ 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]
|
|
|
+ bindDateChange() {
|
|
|
+ this.showDatePicker = true;
|
|
|
+ this.defaultPickerDate = this.form.reachDate;
|
|
|
+ },
|
|
|
+ confirmDatePicker(e) {
|
|
|
+ this.form.reachDate = e.value;
|
|
|
+ this.showDatePicker = false;
|
|
|
},
|
|
|
init(){
|
|
|
if(this.option.account){
|
|
|
@@ -538,7 +627,12 @@ export default {
|
|
|
const isFreeDelivery = this.checkFreeDelivery()
|
|
|
console.log('selectDelivery -- isFreeDelivery: ',isFreeDelivery)
|
|
|
},
|
|
|
- confirmForm() {
|
|
|
+ confirmForm(){
|
|
|
+ this.$util.confirmModal({content:'确认提交？'},() => {
|
|
|
+ this.submitMyForm()
|
|
|
+ })
|
|
|
+ },
|
|
|
+ submitMyForm() {
|
|
|
const product = this.selectList.map(ele => {
|
|
|
let unitType = 0
|
|
|
let num = ele.bigCount
|
|
|
@@ -604,6 +698,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;
|
|
|
}
|
|
|
@@ -837,4 +1068,34 @@ export default {
|
|
|
color: #3385FF;
|
|
|
margin-left: 10upx;
|
|
|
}
|
|
|
+
|
|
|
+/* 日期选择器蒙板 */
|
|
|
+.date-picker-mask {
|
|
|
+ position: fixed;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ bottom: 0;
|
|
|
+ background-color: rgba(0, 0, 0, 0.5);
|
|
|
+ z-index: 99;
|
|
|
+ animation: fadeIn 0.3s ease-in-out;
|
|
|
+}
|
|
|
+
|
|
|
+@keyframes fadeIn {
|
|
|
+ from {
|
|
|
+ opacity: 0;
|
|
|
+ }
|
|
|
+ to {
|
|
|
+ opacity: 1;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+@keyframes fadeOut {
|
|
|
+ from {
|
|
|
+ opacity: 1;
|
|
|
+ }
|
|
|
+ to {
|
|
|
+ opacity: 0;
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|
