feat 充值有礼优惠券

src/components/accountCompoents/wallet.vue

@@ -8,37 +8,44 @@
         <div class="balance_sign"><img src="../../../static/image/1.png" alt="" srcset=""> 为了您能高效发单，请保持账户资金充足</div>
       </div>
     </el-col>
-    <el-col :span="18"  v-if="memberType !==3">
+    <el-col :span="18" v-if="memberType !==3">
       <div class="recharge_title">充值金额</div>
       <div class="recharge_list recharge_list_m">
-        <div @click="chooseMoney(v,i)" :class="curIdx === i ? 'item item_ac' : 'item'" v-for="(v,i) in moneyList" :key="i"><span class="item_tips">充值有礼</span>{{v.value}}元</div>
+        <div @click="chooseMoney(v,i)" :class="curIdx === i ? 'item item_ac' : 'item'" v-for="(v,i) in moneyList" :key="i"><span v-if="v.couponList" class="item_tips">充值有礼</span>{{v.value}}元</div>
         <el-input type='num' @focus="open" v-model="value" clearable :class="curIdx === -1 ? 'item item_ac' : 'item'" placeholder="其他金额" />
       </div>
-      <div class="recharge_coupon">
+      <div class="recharge_coupon" v-if="couponList.length">
         <div class="recharge_coupon_top">
           <img src="../../../static/image/recharge_coupon.png" alt="" srcset="">
-          <div class="recharge_coupon_top_left">充200元，赠送40元优惠券</div>
-          <div class="recharge_coupon_top_right">
-            <div>95折券 x40张</div>
-            <div>9折券 x10张</div>
+          <div class="recharge_coupon_top_left">充{{moneyList[curIdx].value}}元，赠送{{moneyList[curIdx].giveValue}}元优惠券</div>
+          <div class="recharge_coupon_top_right ">
+            <div v-for="(v,i) in couponList" :key="i">{{`${v.couponName} x${v.memberReciveNum}张  `}}</div>
           </div>
         </div>
         <div class="recharge_coupon_bottom">
-          <div class="recharge_coupon_bottom_item" v-for="(item,index) in 2" :key="index">
+          <div class="recharge_coupon_bottom_item" v-for="(item,index) in couponList" :key="index">
             <div class="recharge_coupon_bottom_left">
-              <div>9.5<span>折</span></div>
-                <div class="recharge_coupon_bottom_sub">最高减4元</div>
+              <div class="recharge_coupon_bottom_left_num">
+                <span v-if="item.couponType == 1 || item.couponType == 3">¥</span>
+                <span class="num" v-if="item.couponType == 1 || item.couponType == 3">{{item.money}}</span>
+                <span class="num" v-if="item.couponType == 2">{{item.discount}}</span>
+                <span v-if="item.couponType == 2">折</span>
+              </div>
+              <div class="recharge_coupon_bottom_sub">
+                <span v-if="item.couponType == 2">最高减{{ item.maxDiscount }}元</span>
+                <span v-if="item.couponType == 1">满{{ item.limitFee }}元可用</span>
+              </div>
             </div>
             <div class="recharge_coupon_bottom_middle">
               <div></div>
             </div>
             <div class="recharge_coupon_bottom_right">
               <div class="recharge_coupon_bottom_date">
-                <div>优惠券的名称</div>
-                <div>有效期：60天(自领取后生效)</div>
+                <div>{{item.couponName}}</div>
+                <div>有效期：{{item.days}}天(自领取后生效)</div>
               </div>
               <div class="recharge_coupon_bottom_number">
-                <span>x40张</span>
+                <span>x{{item.memberReciveNum}}张</span>
               </div>
             </div>
           </div>
@@ -77,12 +84,12 @@ export default {
   props: {
     products: {
       type: Array,
-      default: function() {
+      default: function () {
         return [];
       },
     },
   },
-  data () {
+  data() {
     return {
       amount: 0,
       moneyList: [],
@@ -100,11 +107,12 @@ export default {
       value: "",
       checked: false,
       memberType: this.$store.state.userInfo.memberType,
+      couponList: [],
     };
   },
   watch: {
     "$store.state.userInfo": {
-      handler (newVal, oldVal) {
+      handler(newVal, oldVal) {
         this.memberType = newVal.memberType;
       },
       deep: true,
@@ -113,16 +121,16 @@ export default {
   components: {
     qrCode,
   },
-  created () {
+  created() {
     this.getWallet();
     this.getRechargeList();
   },
   methods: {
-    paySuccess () {
+    paySuccess() {
       this.showCode = false;
       this.getWallet();
     },
-    getExplain () {
+    getExplain() {
       getExplain({ type: 6 }).then((res) => {
         console.log("object", res);
         if (res.code === 200) {
@@ -136,7 +144,7 @@ export default {
         }
       });
     },
-    getRechargeList () {
+    getRechargeList() {
       getRechargeList().then((res) => {
         if (res.code === 200) {
           this.moneyList = res.data;
@@ -150,7 +158,7 @@ export default {
         }
       });
     },
-    getWallet () {
+    getWallet() {
       getWallet().then((res) => {
         if (res.code === 200) {
           this.amount = res.data.amount;
@@ -162,18 +170,20 @@ export default {
         }
       });
     },
-    chooseMoney (v, i) {
+    chooseMoney(v, i) {
       this.value = "";
       this.curIdx = i;
       this.money = v.value;
       this.id = v.id;
+      this.couponList = this.moneyList[i].couponList || [];
     },
-    open () {
+    open() {
       this.curIdx = -1;
-      this.money = ''
-      this.id = ''
+      this.money = "";
+      this.id = "";
+      this.couponList = [];
     },
-    recharge () {
+    recharge() {
       let params = {
         money: this.value ? this.value : this.money,
         paymentType: this.paymentType,
@@ -217,7 +227,7 @@ export default {
         }
       });
     },
-    getPayResult () {
+    getPayResult() {
       let params = {
         orderSn: this.orderSn,
         payType: this.paymentType === 1 ? this.paymentType : 0,
@@ -359,13 +369,15 @@ export default {
   }
 }
 .recharge_coupon {
-  width: 900px;
+  width: 100%;
   background: #fef2e9;
   border-radius: 8px;
   padding: 3px 10px;
   margin-bottom: 42px;
   .recharge_coupon_top {
     display: flex;
+    flex-wrap: wrap;
+    align-items: center;
     img {
       width: 28px;
       height: 30px;
@@ -381,6 +393,7 @@ export default {
     }
     .recharge_coupon_top_right {
       display: flex;
+      flex-wrap: wrap;
       align-items: flex-end;
       font-size: 12px;
       font-family: PingFang SC;
@@ -394,38 +407,44 @@ export default {
     }
   }
   .recharge_coupon_bottom {
-    height: 72px;
     margin: 15px 17px;
-    box-sizing: border-box;
     display: flex;
     flex-wrap: wrap;
-    justify-content: space-between;
     .recharge_coupon_bottom_item {
-      width: 49%;
+      width: 410px;
+      height: 72px;
       display: flex;
       justify-content: flex-start;
       margin-bottom: 10px;
+      margin-right: 24px;
       .recharge_coupon_bottom_left {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
         width: 110px;
-        height: 100%;
         margin-top: 10px auto;
         text-align: center;
-        font-size: 26px;
-        font-family: PingFang SC;
-        font-weight: bold;
-        color: #ec1414;
         border-radius: 8px;
         background-color: #fff;
         padding: 10px 0;
-        box-sizing: border-box;
-        span {
-          font-size: 14px;
-          font-family: PingFang SC;
-          font-weight: 400;
-          line-height: 20px;
-          margin-left: 2px;
-          color: #ec1414;
+        .recharge_coupon_bottom_left_num {
+          span {
+            font-size: 14px;
+            font-family: PingFang SC;
+            font-weight: 400;
+            line-height: 20px;
+            margin-left: 2px;
+            color: #ec1414;
+          }
+          .num {
+            font-size: 26px;
+            font-family: PingFang SC;
+            font-weight: bold;
+            color: #ec1414;
+          }
         }
+
         .recharge_coupon_bottom_sub {
           font-size: 14px;
           font-family: PingFang SC;

src/router/index.js

@@ -111,7 +111,7 @@ router.beforeEach((to, from, next) => {
     next()
   } else {
     const token = localStorage.getItem('token') || null;
-    console.log('这是一个token:',token);
+    // console.log('这是一个token:',token);
     if (token) {
       next()
     } else if (to.path !== '/resetPassword') {