代码提交

pages/submitOrder/components/coupon-select.vue

@@ -3,6 +3,7 @@
       ref="popupRef"
       :showCloseable="false"
       @close="emit('close')"
+      @maskClick="clickMask"
   >
     <template v-if="couponList.length>0">
       <view
@@ -22,6 +23,7 @@
                   @change="radioChage"
               >
                 <CouponItem
+                    class="select-coupon"
                     :coupons="item"
                     :type="'noType'"
                 />
@@ -39,6 +41,7 @@
     >
       暂无可用的优惠券
     </Empty>
+    <view class="action-height"></view>
     <view class="button-action">
       <view
           class="animation-button"
@@ -71,6 +74,7 @@ const popupRef = ref(false)
 const currentCoupon = ref({})
 const visible = ref(false)
 const couponItem = ref(props.currentCouponId ? props.currentCouponId : -1)
+const oldCoupon = ref(props.currentCouponId ? props.currentCouponId : -1)
 const num = ref(0)
 const radioValue = ref('')
 const selectCouponPanel = ref(false)
@@ -86,6 +90,7 @@ const handleSubmit = () => {
     close()
     return
   }
+  oldCoupon.value = couponItem.value
   emit('submitCoupon', {
     couponId: couponItem.value
   })
@@ -100,6 +105,12 @@ const groupChange = (n) => {
   }
 }
 
+const clickMask = () => {
+  if (oldCoupon.value !== couponItem.value) {
+    couponItem.value = oldCoupon.value
+  }
+}
+
 const radioChage = (n) => {
   radioValue.value = n
   num.value = 0
@@ -142,8 +153,7 @@ defineExpose({
 
   .select-box {
     width: 100%;
-    margin-bottom: 20rpx;
-
+    margin-bottom: 30rpx;
     .select-icon {
       width: 20rpx;
       height: 20rpx;
@@ -153,15 +163,26 @@ defineExpose({
       margin-bottom: 0 !important;
       padding: 0 60rpx;
     }
+    .select-coupon {
+      flex: 1;
+    }
   }
 }
 
+.action-height{
+  width: 100%;
+  height: 80rpx;
+}
+
 .button-action {
+  position: fixed;
+  bottom: 0;
+  width: 100%;
+  left: 0;
   .animation-button {
     width: 100%;
     height: 80rpx;
     line-height: 80rpx;
-    border-radius: 80rpx;
     text-align: center;
   }
 }