优化

ghsApp/src/admin/billing/affirm.vue

@@ -1024,5 +1024,24 @@ export default {
   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>

hdApp/src/admin/billing/affirm.vue

@@ -1045,5 +1045,24 @@ console.log(params)
   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>

mallApp/src/pages/billing/affirmGhs.vue

@@ -200,13 +200,11 @@
 						<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" @click="openTimePopup">
 					<view class="tui-title">配送时间</view>
@@ -224,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";
@@ -236,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",
@@ -424,6 +431,14 @@ export default {
 		selTimeFn(e) {
 			this.form.reachDate = e.detail.value;
 		},
+		bindDateChange() {
+			this.showDatePicker = true;
+			this.defaultPickerDate = this.form.reachDate;
+		},
+		confirmDatePicker(e) {
+			this.form.reachDate = e.value;
+			this.showDatePicker = false;
+		},
 		init(){
 			if(this.option.account){
 				this.account = this.option.account
@@ -612,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
@@ -1048,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>

mallApp/src/pages/order/buy.vue

@@ -251,7 +251,7 @@ export default {
 </script>
 <style lang='scss' scoped>
 .app-content {
-  padding-bottom: 240upx;
+  padding-bottom:90upx;
   min-height: calc(100vh - 240upx);
   margin-bottom:120upx;
   .module-com {

mallApp/src/pages/order/components/app-delivery.vue

@@ -169,15 +169,13 @@
 
         <tui-list-cell class="line-cell" :hover="false" :arrow="true">
           <div class="tui-title">配送日期</div>
-          <picker mode="date" :value="form.reachDate" @change="selTimeFn" class="tui-input">
-            <div v-if="form.reachDate" style="font-size:32upx;">{{ form.reachDate }}</div>
-            <div v-else style="font-size:32upx;">今天</div>
-          </picker>
+          <div class="uni-input" v-if="form.reachDate==''" style="width:400upx;font-size:34upx;" @click="bindDateChange">今天</div>
+          <div class="uni-input" @click="bindDateChange" v-else style="width:400upx;font-size:34upx;">{{form.reachDate}}</div>
         </tui-list-cell>
         
         <tui-list-cell class="line-cell" :hover="false" :arrow="true" @click="openTimePopup">
           <div class="tui-title">配送时间</div>
-          <view class="uni-input" style="width:450upx;font-size:30upx;">{{form.reachPeriod}}<text style="margin-left:10upx;"></text></view>
+          <view class="uni-input" style="width:450upx;font-size:34upx;">{{form.reachPeriod}}<text style="margin-left:10upx;"></text></view>
         </tui-list-cell>        
       </div>
 
@@ -186,6 +184,11 @@
     </simple-address>
     <!-- 选择地区 -->
     <app-area-sel :isFocus="false" :show.sync="showRegion" :city="form.city" @change="changeAreaFn" />
+
+    <!-- 配送日期选择器蒙板 -->
+    <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" />
   </div>
 </template>
 
@@ -196,6 +199,7 @@ import AppDatePicker from "@/components/app-date-picker";
 import SimpleAddress from "@/components/plugin/simple-address";
 import AppAreaSel from "@/components/app-area-sel";
 import { allDeliveryQuotes } from "@/api/express/delivery";
+import MxDatePicker from '@/components/mx-datepicker/mx-datepicker.vue';
 
 export default {
   name: "app-delivery-module",
@@ -203,7 +207,8 @@ export default {
     AppAreaSel,
     TuiListCell,
     AppDatePicker,
-    SimpleAddress
+    SimpleAddress,
+    MxDatePicker
   },
   props: {
     // 是否开启同城配送
@@ -244,6 +249,8 @@ export default {
   data() {
     return {
       showRegion: false,
+      showDatePicker: false,
+      defaultPickerDate: '',
       form: {
         receiveUserName: "", // 收花人姓名；到店自提的姓名
         receiveMobile: "", // 收花人手机；到店自提的电话；
@@ -344,6 +351,14 @@ export default {
     selTimeFn(e) {
       this.form.reachDate = e.detail.value;
     },
+    bindDateChange() {
+      this.showDatePicker = true;
+      this.defaultPickerDate = this.form.reachDate;
+    },
+    confirmDatePicker(e) {
+      this.form.reachDate = e.value;
+      this.showDatePicker = false;
+    },
     // 选择地址
     selRegionFn() {
       if (!this.form.city) {
@@ -943,4 +958,34 @@ export default {
 		}
 	}
 }
+
+/* 日期选择器蒙板 */
+.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>