优化促销相关代码

buyer/src/pages/payment/Pay.vue

@@ -4,9 +4,7 @@
     <!-- LOGO 步骤条 -->
     <div class="width_1200 logo">
       <div>
-        <router-link to="/"
-        ><img :src="$store.state.logoImg"
-        /></router-link>
+        <router-link to="/"><img :src="$store.state.logoImg" /></router-link>
         <div>结算页</div>
       </div>
       <div class="cart-steps">
@@ -23,7 +21,7 @@
         <span :class="stepIndex == 2 ? 'active' : ''">3.成功提交订单</span>
       </div>
     </div>
-    <Divider/>
+    <Divider />
     <div class="content width_1200">
       <!-- 收货地址 -->
       <div class="address">
@@ -45,31 +43,23 @@
             <div>
               <span>{{ item.name }}</span>
               <Tag class="ml_10" v-if="item.isDefault" color="red">默认</Tag>
-              <Tag class="ml_10" v-if="item.alias" color="warning">{{
-                  item.alias
-                }}
-              </Tag>
+              <Tag class="ml_10" v-if="item.alias" color="warning">{{ item.alias }} </Tag>
             </div>
             <div>{{ item.mobile }}</div>
-            <div>
-              {{ item.consigneeAddressPath | unitAddress }} {{ item.detail }}
-            </div>
+            <div>{{ item.consigneeAddressPath | unitAddress }} {{ item.detail }}</div>
             <div class="edit-btn" v-show="showEditBtn === index">
               <span @click.stop="editAddress(item.id)">修改</span>
-              <span
-                class="ml_10"
-                v-if="!item.isDefault"
-                @click.stop="delAddress(item)"
-              >删除</span
+              <span class="ml_10" v-if="!item.isDefault" @click.stop="delAddress(item)"
+                >删除</span
               >
             </div>
             <div class="corner-icon" v-show="selectedAddress.id === item.id">
               <div></div>
-              <Icon type="md-checkmark"/>
+              <Icon type="md-checkmark" />
             </div>
           </div>
           <div class="add-address" @click="editAddress('')">
-            <Icon type="ios-add-circle-outline"/>
+            <Icon type="ios-add-circle-outline" />
             <div>添加新地址</div>
           </div>
         </div>
@@ -80,8 +70,8 @@
           v-if="addressList.length > 3"
         >
           {{ moreAddr ? "收起地址" : "更多地址" }}
-          <Icon v-show="!moreAddr" type="md-arrow-dropdown"/>
-          <Icon v-show="moreAddr" type="md-arrow-dropup"/>
+          <Icon v-show="!moreAddr" type="md-arrow-dropdown" />
+          <Icon v-show="moreAddr" type="md-arrow-dropup" />
         </div>
       </div>
       <!-- 商品信息 -->
@@ -90,16 +80,12 @@
           <span>商品信息</span>
           <span @click="$router.push('/cart')">返回购物车</span>
         </div>
-        <div
-          class="goods-msg"
-          v-for="(shop, shopIndex) in goodsList"
-          :key="shopIndex"
-        >
+        <div class="goods-msg" v-for="(shop, shopIndex) in goodsList" :key="shopIndex">
           <div class="shop-name">
             <span>
               <span class="hover-color" @click="goShopPage(shop.storeId)">{{
-                  shop.storeName
-                }}</span
+                shop.storeName
+              }}</span
               >&nbsp;&nbsp;
             </span>
           </div>
@@ -111,23 +97,15 @@
             >
               <span
                 class="hover-color"
-                @click="
-                  goGoodsDetail(goods.goodsSku.id, goods.goodsSku.goodsId)
-                "
+                @click="goGoodsDetail(goods.goodsSku.id, goods.goodsSku.goodsId)"
               >
-                <img :src="goods.goodsSku.thumbnail" alt=""/>
-                <span style="vertical-align: top">{{
-                    goods.goodsSku.goodsName
-                  }}</span>
+                <img :src="goods.goodsSku.thumbnail" alt="" />
+                <span style="vertical-align: top">{{ goods.goodsSku.goodsName }}</span>
               </span>
-              <span class="goods-price">{{
-                  goods.purchasePrice | unitPrice("￥")
-                }}</span>
+              <span class="goods-price">{{ goods.purchasePrice | unitPrice("￥") }}</span>
               <span>x{{ goods.num }}</span>
               <span>{{ goods.goodsSku.quantity > 0 ? "有货" : "无货" }}</span>
-              <span class="goods-price">{{
-                  goods.subTotal | unitPrice("￥")
-                }}</span>
+              <span class="goods-price">{{ goods.subTotal | unitPrice("￥") }}</span>
             </div>
           </div>
           <div class="order-mark">
@@ -139,7 +117,7 @@
               placeholder="订单备注"
             />
             <span style="font-size: 12px; color: #999"
-            >提示：请勿填写有关支付、收货、发票方面的信息</span
+              >提示：请勿填写有关支付、收货、发票方面的信息</span
             >
           </div>
         </div>
@@ -148,7 +126,7 @@
       <div class="invoice">
         <div class="card-head mt_20 mb_20">
           <span class="relative"
-          >发票信息<span class="inv-tips">
+            >发票信息<span class="inv-tips">
               <Icon
                 type="ios-alert-outline"
               />开企业抬头发票须填写纳税人识别号，以免影响报销
@@ -168,29 +146,19 @@
         </div>
         <div v-if="couponList.length === 0">无可用优惠券</div>
         <ul v-else class="coupon-list">
-          <li
-            v-for="(item, index) in couponList"
-            class="coupon-item"
-            :key="index"
-          >
+          <li v-for="(item, index) in couponList" class="coupon-item" :key="index">
             <div class="c-left">
               <div>
-                <span
-                  v-if="item.couponType === 'PRICE'"
-                  class="fontsize_12 global_color"
-                >￥<span class="price">{{
-                    item.price | unitPrice
-                  }}</span></span
+                <span v-if="item.couponType === 'PRICE'" class="fontsize_12 global_color"
+                  >￥<span class="price">{{ item.price | unitPrice }}</span></span
                 >
                 <span
                   v-if="item.couponType === 'DISCOUNT'"
                   class="fontsize_12 global_color"
-                ><span class="price">{{ item.discount }}</span
-                >折</span
-                >
-                <span class="describe"
-                >满{{ item.consumeThreshold }}元可用</span
+                  ><span class="price">{{ item.discount }}</span
+                  >折</span
                 >
+                <span class="describe">满{{ item.consumeThreshold }}元可用</span>
               </div>
               <p>使用范围：{{ useScope(item.scopeType) }}</p>
               <p>有效期：{{ item.endTime }}</p>
@@ -207,7 +175,7 @@
               class="c-right"
               v-if="usedCouponId.includes(item.id)"
               @click="useCoupon(item.id, false)"
-            >放弃优惠</a
+              >放弃优惠</a
             >
             <i class="circle-top"></i>
             <i class="circle-bottom"></i>
@@ -220,32 +188,22 @@
           <span>{{ totalNum }}件商品，总商品金额：</span
           ><span>{{ priceDetailDTO.goodsPrice | unitPrice("￥") }}</span>
         </div>
-        <div v-if="priceDetailDTO.freightPrice>0">
+        <div v-if="priceDetailDTO.freightPrice > 0">
           <span>运费：</span
           ><span>{{ priceDetailDTO.freightPrice | unitPrice("￥") }}</span>
         </div>
-        <div v-if="priceDetailDTO.discountPrice>0">
+        <div v-if="priceDetailDTO.discountPrice > 0">
           <span>优惠金额：</span
-          ><span
-        >-{{
-            priceDetailDTO.discountPrice | unitPrice("￥")
-          }}</span
-        >
+          ><span>-{{ priceDetailDTO.discountPrice | unitPrice("￥") }}</span>
         </div>
-        <div v-if="priceDetailDTO.couponPrice>0">
+        <div v-if="priceDetailDTO.couponPrice > 0">
           <span>优惠券金额：</span
-          ><span
-        >-{{
-            priceDetailDTO.couponPrice | unitPrice("￥")
-          }}</span
-        >
+          ><span>-{{ priceDetailDTO.couponPrice | unitPrice("￥") }}</span>
         </div>
 
         <div v-if="$route.query.way === 'POINTS'">
           <span>应付积分：</span
-          ><span class="actrual-price">{{
-            priceDetailDTO.payPoint
-          }}</span>
+          ><span class="actrual-price">{{ priceDetailDTO.payPoint }}</span>
         </div>
         <div v-else>
           <span>应付金额：</span
@@ -267,73 +225,65 @@
     </div>
     <BaseFooter></BaseFooter>
     <!-- 添加发票模态框 -->
-    <invoice-modal
-      ref="invModal"
-      :invoiceData="invoiceData"
-      @change="getInvMsg"
-    />
+    <invoice-modal ref="invModal" :invoiceData="invoiceData" @change="getInvMsg" />
     <!-- 选择地址模态框 -->
-    <address-manage
-      ref="address"
-      :id="addrId"
-      @change="addrChange"
-    ></address-manage>
+    <address-manage ref="address" :id="addrId" @change="addrChange"></address-manage>
   </div>
 </template>
 
 <script>
-import invoiceModal from '@/components/invoiceModal';
-import addressManage from '@/components/addressManage';
-import {memberAddress, delMemberAddress} from '@/api/address';
+import invoiceModal from "@/components/invoiceModal";
+import addressManage from "@/components/addressManage";
+import { memberAddress, delMemberAddress } from "@/api/address";
 import {
   cartGoodsPay,
   createTrade,
   selectAddr,
   selectCoupon,
-  couponNum
-} from '@/api/cart';
-import {canUseCouponList} from '@/api/member.js';
+  couponNum,
+} from "@/api/cart";
+import { canUseCouponList } from "@/api/member.js";
 
 export default {
-  name: 'Pay',
-  components: {invoiceModal, addressManage},
-  data () {
+  name: "Pay",
+  components: { invoiceModal, addressManage },
+  data() {
     return {
       stepIndex: 1, // 顶部步骤条状态
       invoiceAvailable: false, // 发票编辑按钮
-      showEditBtn: '', // 鼠标移入显示编辑按钮
-      orderMark: '', // 订单备注
+      showEditBtn: "", // 鼠标移入显示编辑按钮
+      orderMark: "", // 订单备注
       invoiceData: {
         // 发票数据
-        receiptTitle: '个人',
-        receiptContent: '不开发票'
+        receiptTitle: "个人",
+        receiptContent: "不开发票",
       },
       addressList: [], // 地址列表
       selectedAddress: {}, // 所选地址
       goodsList: [], // 商品列表
       priceDetailDTO: {}, // 商品价格
       totalNum: 0, // 购买数量
-      addrId: '', // 编辑地址传入的id
+      addrId: "", // 编辑地址传入的id
       moreAddr: false, // 更多地址
       canUseCouponNum: 0, // 可用优惠券数量
       couponList: [], // 可用优惠券列表
       usedCouponId: [], // 已使用优惠券id
-      selectedCoupon: {} // 已选优惠券对象
+      selectedCoupon: {}, // 已选优惠券对象
     };
   },
-  mounted () {
+  mounted() {
     this.init();
   },
   methods: {
     // 初始化数据
-    init () {
+    init() {
       this.getGoodsDetail();
     },
-    goAddressManage () {
+    goAddressManage() {
       // 跳转地址管理页面
-      this.$router.push('/home/MyAddress');
+      this.$router.push("/home/MyAddress");
     },
-    getAddress () {
+    getAddress() {
       // 获取收货地址列表
       memberAddress().then((res) => {
         if (res.success) {
@@ -346,10 +296,10 @@ export default {
         }
       });
     },
-    getGoodsDetail () {
+    getGoodsDetail() {
       // 订单商品详情
       this.$Spin.show();
-      cartGoodsPay({way: this.$route.query.way})
+      cartGoodsPay({ way: this.$route.query.way })
         .then((res) => {
           this.$Spin.hide();
           if (res.success) {
@@ -358,22 +308,23 @@ export default {
             this.skuList = res.result.skuList;
 
             if (res.result.receiptVO) {
-              this.invoiceData = res.result.receiptVO
+              this.invoiceData = res.result.receiptVO;
             }
             let notSupArea = res.result.notSupportFreight;
             this.selectedCoupon = {};
-            if (res.result.platformCoupon) this.selectedCoupon.platformCoupon = res.result.platformCoupon;
+            if (res.result.platformCoupon)
+              this.selectedCoupon.platformCoupon = res.result.platformCoupon;
             Object.assign(this.selectedCoupon, res.result.storeCoupons);
             if (notSupArea) {
               let content = [];
-              let title = '';
+              let title = "";
               notSupArea.forEach((e) => {
                 title = e.errorMessage;
                 content.push(e.goodsSku.goodsName);
               });
               this.$Modal.warning({
-                title: '以下商品超出配送区域' || title,
-                content: content.toString()
+                title: "以下商品超出配送区域" || title,
+                content: content.toString(),
               });
             }
             if (res.result.memberAddress) {
@@ -384,16 +335,28 @@ export default {
             for (let i = 0; i < this.skuList.length; i++) {
               this.totalNum += this.skuList[i].num;
             }
-            this.getCouponNum();
+            this.usedCouponId = [];
+            this.couponList = res.result.canUseCoupons;
+            const couponKeys = Object.keys(this.selectedCoupon);
+            if (couponKeys.length) {
+              this.couponList.forEach((e) => {
+                if (e.id === this.selectedCoupon[couponKeys].memberCoupon.id) {
+                  this.usedCouponId.push(e.id);
+                }
+              });
+              this.$nextTick(() => {
+                this.$forceUpdate();
+              });
+            }
           }
         })
         .catch(() => {
           this.$Spin.hide();
         });
     },
-    getCouponNum () {
+    getCouponNum() {
       // 获取可用优惠券数量
-      couponNum({way: this.$route.query.way}).then((res) => {
+      couponNum({ way: this.$route.query.way }).then((res) => {
         this.canUseCouponNum = res.result;
         if (res.result) {
           let storeArr = [];
@@ -407,10 +370,10 @@ export default {
           let params = {
             pageNumber: 1,
             pageSize: 100,
-            memberCouponStatus: 'NEW',
+            memberCouponStatus: "NEW",
             scopeId: skuArr.toString(),
             storeId: storeArr.toString(),
-            totalPrice: this.priceDetailDTO.goodsPrice
+            totalPrice: this.priceDetailDTO.goodsPrice,
           };
           canUseCouponList(params).then((res) => {
             // 可用优惠券列表
@@ -431,78 +394,77 @@ export default {
         }
       });
     },
-    selectAddress (item) {
+    selectAddress(item) {
       // 选择地址
       let params = {
         way: this.$route.query.way,
-        shippingAddressId: item.id
+        shippingAddressId: item.id,
       };
       selectAddr(params).then((res) => {
         if (res.success) {
-          this.$Message.success('选择收货地址成功');
+          this.$Message.success("选择收货地址成功");
           this.selectedAddress = item;
           this.getGoodsDetail();
         }
       });
     },
-    editAddress (id) {
+    editAddress(id) {
       // 编辑地址
       this.addrId = id;
       this.$refs.address.show();
     },
-    addrChange () {
+    addrChange() {
       // 添加，编辑地址回显
       this.getAddress();
     },
-    delAddress (item) {
+    delAddress(item) {
       // 删除地址
       this.$Modal.confirm({
-        title: '提示',
-        content: '你确定删除这个收货地址',
+        title: "提示",
+        content: "你确定删除这个收货地址",
         onOk: () => {
           delMemberAddress(item.id).then((res) => {
             if (res.success) {
-              this.$Message.success('删除成功');
+              this.$Message.success("删除成功");
               this.getAddress();
             }
           });
         },
-        onCancel: () => {
-        }
+        onCancel: () => {},
       });
     },
-    goGoodsDetail (skuId, goodsId) {
+    goGoodsDetail(skuId, goodsId) {
       // 跳转商品详情
       let routeUrl = this.$router.resolve({
-        path: '/goodsDetail',
-        query: {skuId, goodsId}
+        path: "/goodsDetail",
+        query: { skuId, goodsId },
       });
-      window.open(routeUrl.href, '_blank');
+      window.open(routeUrl.href, "_blank");
     },
     // 跳转店铺首页
-    goShopPage (id) {
+    goShopPage(id) {
       let routeUrl = this.$router.resolve({
-        path: '/Merchant',
-        query: {id: id}
+        path: "/Merchant",
+        query: { id: id },
       });
-      window.open(routeUrl.href, '_blank');
+      window.open(routeUrl.href, "_blank");
     },
-    useCoupon (id, used) {
+    useCoupon(id, used) {
       // 使用优惠券
       let params = {
         way: this.$route.query.way,
         memberCouponId: id,
-        used: used // true 为使用， false为弃用
+        used: used, // true 为使用， false为弃用
       };
       selectCoupon(params).then((res) => {
         if (res.success) this.init();
       });
     },
-    editInvoice () {
+    editInvoice() {
       // 编辑发票信息
       this.$refs.invModal.invoiceAvailable = true;
     },
-    getInvMsg (item) {
+    getInvMsg(item) {
       // 获取发票信息
       if (item) {
         this.init();
@@ -510,18 +472,18 @@ export default {
       }
     },
 
-    pay () {
+    pay() {
       // 结算
       const params = {
-        client: 'PC',
+        client: "PC",
         remark: [],
-        way: this.$route.query.way
+        way: this.$route.query.way,
       };
       this.goodsList.forEach((e) => {
         if (e.remark) {
           params.remark.push({
             remark: e.remark,
-            storeId: e.storeId
+            storeId: e.storeId,
           });
         }
       });
@@ -533,12 +495,13 @@ export default {
         .then((res) => {
           this.$Spin.hide();
           if (res.success) {
-            if (params.way === 'POINTS') { // 积分支付不需要跳转支付页面
-              this.$router.push('/payDone')
+            if (params.way === "POINTS") {
+              // 积分支付不需要跳转支付页面
+              this.$router.push("/payDone");
             } else {
               this.$router.push({
-                path: '/payment',
-                query: {orderType: 'TRADE', sn: res.result.sn}
+                path: "/payment",
+                query: { orderType: "TRADE", sn: res.result.sn },
               });
             }
           }
@@ -548,28 +511,28 @@ export default {
         });
     },
     // 优惠券可用范围
-    useScope (type) {
-      let goods = '全部商品';
+    useScope(type) {
+      let goods = "全部商品";
       switch (type) {
-        case 'ALL':
-          goods = '全部商品';
+        case "ALL":
+          goods = "全部商品";
           break;
-        case 'PORTION_GOODS':
-          goods = '部分商品';
+        case "PORTION_GOODS":
+          goods = "部分商品";
           break;
-        case 'PORTION_GOODS_CATEGORY':
-          goods = '部分分类商品';
+        case "PORTION_GOODS_CATEGORY":
+          goods = "部分分类商品";
           break;
       }
       return `${goods}可用`;
-    }
-  }
+    },
+  },
 };
 </script>
 
 <style scoped lang="scss">
 @import "../../assets/styles/coupon.scss";
-.goods-msg{
+.goods-msg {
   overflow: hidden;
 }
 /** logo start */
@@ -781,7 +744,7 @@ export default {
 
   .goods-item {
     display: flex;
-    width:100%;
+    width: 100%;
     align-items: center;
     justify-content: space-between;
     padding: 20px 0;
@@ -807,12 +770,11 @@ export default {
 
       flex: 1;
       text-align: left;
-      >span{
+      > span {
         margin-left: 10px;
       }
     }
 
-
     > span:last-child {
       color: $theme_color;
       font-weight: bold;