feat 优惠券、失效的优惠券

src/components/accountCompoents/coupon.vue

@@ -1,26 +1,29 @@
 <template>
   <div class="coupon">
-    <div class="list">
-      <div class="item" v-for="(v,i) in couponList" :key="i">
-        <div class="top-content">
-          <div class="money" v-if="v.type === 1">
-            <span class="samll-size">￥</span>
-            <span class="big-size">{{v.money}}</span>
+    <div class="recharge_coupon_bottom">
+      <div class="recharge_coupon_bottom_item" v-for="(item,index) in couponList" :key="index">
+        <div class="recharge_coupon_bottom_left">
+          <div class="recharge_coupon_bottom_left_num">
+            <span v-if="item.type == 1 || item.type == 3">¥</span>
+            <span class="num" v-if="item.type == 1 || item.type == 3">{{item.money}}</span>
+            <span class="num" v-if="item.type == 2">{{item.discount}}</span>
+            <span v-if="item.type == 2">折</span>
           </div>
-          <div class="money" v-if="v.type === 2">
-            <span class="big-size">{{v.discount}}</span>
-            <span class="samll-size">折</span>
+          <div class="recharge_coupon_bottom_sub">
+            <span v-if="item.type == 2">最高减{{ item.maxDiscount }}元</span>
+            <span v-if="item.type == 1">满{{ item.limitFee }}元可用</span>
           </div>
-          <div class="man-jian" v-if="v.type === 2">最高可减{{v.maxDiscount}}元</div>
-          <div class="man-jian" v-if="v.type === 1">{{v.name}}</div>
-          <div class="time">{{v.validStartTime}} - {{v.validEndTime}}</div>
         </div>
-        <div class="bottom">
-          <div class="lei-xing">
-            类型：<span>{{v.type === 1 ? '满减劵' : '折扣券'}}</span>
+        <div class="recharge_coupon_bottom_middle">
+          <div></div>
+        </div>
+        <div class="recharge_coupon_bottom_right">
+          <div class="recharge_coupon_bottom_date">
+            <div>{{item.name}}</div>
+            <div>有效期：{{item.validStartTime}} - {{item.validEndTime}}</div>
           </div>
-          <div class="lei-xing">
-            数量：<span>{{Number(v.num)}}张</span>
+          <div class="recharge_coupon_bottom_number">
+            <span>x{{item.num}}张</span>
           </div>
         </div>
       </div>
@@ -34,7 +37,7 @@
 
 <script>
 import { getCouponList, getCouponExplain } from "../../api/amount.js";
-import tool from '../../api/tool.js'
+import tool from "../../api/tool.js";
 export default {
   data() {
     return {
@@ -50,6 +53,24 @@ export default {
     this.getCouponList();
   },
   methods: {
+    showType(type) {
+      let name = "";
+      // v.type === 1 ? '满减劵' : '折扣券'
+      switch (type) {
+        case 1:
+          name = "满减劵";
+          break;
+        case 2:
+          name = "折扣券";
+          break;
+        case 3:
+          name = "立减劵";
+          break;
+        default:
+          break;
+      }
+      return name;
+    },
     handleSizeChange(val) {
       this.params.pageNum = 1;
       this.params.pageSize = val;
@@ -64,10 +85,16 @@ export default {
     getCouponList() {
       getCouponList({ status: 0, isNew: 1 }).then((res) => {
         if (res.code === 200) {
-          this.couponList = res.data.data.map(v=>{
-            v.validStartTime = tool.getFormatDate(new Date(v.validStartTime),'yyyy.MM.dd')
-            v.validEndTime = tool.getFormatDate(new Date(v.validEndTime),'yyyy.MM.dd')
-            return v
+          this.couponList = res.data.data.map((v) => {
+            v.validStartTime = tool.getFormatDate(
+              new Date(v.validStartTime),
+              "yyyy.MM.dd"
+            );
+            v.validEndTime = tool.getFormatDate(
+              new Date(v.validEndTime),
+              "yyyy.MM.dd"
+            );
+            return v;
           });
           this.total = res.data.totalNums || 0;
         } else {
@@ -86,54 +113,109 @@ export default {
 .coupon {
   height: calc(100vh - 274px);
   background-color: #fff;
-  .list {
+  .recharge_coupon_bottom {
+    margin: 15px 17px;
     display: flex;
     flex-wrap: wrap;
-    .item {
-      margin-right: 20px;
-      .top-content {
-        width: 244px;
-        height: 166px;
-        background: url(../../../static/image/coupon-bg.png) no-repeat;
-        background-size: cover;
+    .recharge_coupon_bottom_item {
+      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;
+        margin-top: 10px auto;
         text-align: center;
-        box-sizing: border-box;
-        padding: 30px;
-        .money {
-          font-family: PingFang SC;
-          font-weight: 600;
-          color: #ffffff;
-          .samll-size {
-            font-size: 22px;
+        border-radius: 8px;
+        background-color: #fff;
+        padding: 10px 0;
+        box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
+        .recharge_coupon_bottom_left_num {
+          span {
+            font-size: 14px;
+            font-family: PingFang SC;
+            font-weight: 400;
+            line-height: 20px;
+            margin-left: 2px;
+            color: #ec1414;
           }
-          .big-size {
-            font-size: 40px;
+          .num {
+            font-size: 26px;
+            font-family: PingFang SC;
+            font-weight: bold;
+            color: #ec1414;
           }
         }
-        .man-jian {
+
+        .recharge_coupon_bottom_sub {
           font-size: 14px;
           font-family: PingFang SC;
           font-weight: 400;
-          color: #ffffff;
+          line-height: 20px;
+          color: #666666;
         }
-        .time {
-          font-size: 12px;
-          font-family: PingFang SC;
-          font-weight: 400;
-          color: #28888a;
-          margin-top: 30px;
+      }
+      .recharge_coupon_bottom_middle {
+        display: flex;
+        align-items: center;
+        div {
+          height: 100%;
+          padding: 10px 0;
+          height: 55px;
+          border-right: 1px dashed #ec1414;
+          box-sizing: border-box;
         }
       }
-      .bottom {
+      .recharge_coupon_bottom_right {
+        border-radius: 8px;
+        background-color: #fff;
+        flex: 1;
+        position: relative;
         padding: 10px;
-        .lei-xing {
-          font-size: 12px;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
+        .recharge_coupon_bottom_date {
+          font-size: 18px;
           font-family: PingFang SC;
-          font-weight: 400;
-          color: #666666;
-          margin-bottom: 4px;
+          font-weight: bold;
+          line-height: 25px;
+          color: #333333;
+          div:last-child {
+            height: 20px;
+            font-size: 12px;
+            font-family: PingFang SC;
+            font-weight: 400;
+            line-height: 20px;
+            color: #999999;
+          }
+        }
+        .recharge_coupon_bottom_number {
+          display: flex;
+          align-items: center;
           span {
-            color: #999;
+            width: 63px;
+            height: 22px;
+            line-height: 22px;
+            border: 1px solid #ec1414;
+            border-radius: 18px;
+            text-align: center;
+            font-size: 12px;
+            font-family: PingFang SC;
+            font-weight: 500;
+            color: #ec1414;
+            cursor: pointer;
+            &:hover {
+              background-color: #ec1414;
+              color: #ffffff;
+            }
           }
         }
       }

src/components/accountCompoents/invalidCoupon.vue

@@ -0,0 +1,234 @@
+<template>
+  <div class="coupon">
+    <div class="recharge_coupon_bottom">
+      <div class="recharge_coupon_bottom_item" v-for="(item,index) in couponList" :key="index">
+        <div class="recharge_coupon_bottom_left">
+          <div class="recharge_coupon_bottom_left_num">
+            <span v-if="item.type == 1 || item.type == 3">¥</span>
+            <span class="num" v-if="item.type == 1 || item.type == 3">{{item.money}}</span>
+            <span class="num" v-if="item.type == 2">{{item.discount}}</span>
+            <span v-if="item.type == 2">折</span>
+          </div>
+          <div class="recharge_coupon_bottom_sub">
+            <span v-if="item.type == 2">最高减{{ item.maxDiscount }}元</span>
+            <span v-if="item.type == 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>{{item.name}}</div>
+            <div>有效期：{{item.validStartTime}} - {{item.validEndTime}}</div>
+          </div>
+          <div class="recharge_coupon_bottom_number">
+            <span>x{{item.num}}张</span>
+          </div>
+        </div>
+        <img class="img" src="../../../static/image/invalid-coupon.png" alt="">
+      </div>
+    </div>
+    <div style="text-align: center;margin-top: 20px;">
+      <el-pagination :current-page.sync="params.pageNum" @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="[10, 20, 50, 100]" :page-size="params.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total" background>
+      </el-pagination>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getCouponList, getCouponExplain } from "../../api/amount.js";
+import tool from "../../api/tool.js";
+export default {
+  data() {
+    return {
+      couponList: [],
+      params: {
+        pageNum: 1,
+        pageSize: 10,
+      },
+      total: 0,
+    };
+  },
+  created() {
+    this.getCouponList();
+  },
+  methods: {
+    showType(type) {
+      let name = "";
+      // v.type === 1 ? '满减劵' : '折扣券'
+      switch (type) {
+        case 1:
+          name = "满减劵";
+          break;
+        case 2:
+          name = "折扣券";
+          break;
+        case 3:
+          name = "立减劵";
+          break;
+        default:
+          break;
+      }
+      return name;
+    },
+    handleSizeChange(val) {
+      this.params.pageNum = 1;
+      this.params.pageSize = val;
+      this.couponList = [];
+      this.getCouponList();
+    },
+    handleCurrentChange(val) {
+      this.params.pageNum = val;
+      this.couponList = [];
+      this.getCouponList();
+    },
+    getCouponList() {
+      getCouponList({ status: -1, isNew: 1 }).then((res) => {
+        if (res.code === 200) {
+          this.couponList = res.data.data.map((v) => {
+            v.validStartTime = tool.getFormatDate(
+              new Date(v.validStartTime),
+              "yyyy.MM.dd"
+            );
+            v.validEndTime = tool.getFormatDate(
+              new Date(v.validEndTime),
+              "yyyy.MM.dd"
+            );
+            return v;
+          });
+          this.total = res.data.totalNums || 0;
+        } else {
+          this.$message({
+            type: "error",
+            message: res.msg,
+          });
+        }
+      });
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.coupon {
+  height: calc(100vh - 274px);
+  background-color: #fff;
+  .recharge_coupon_bottom {
+    margin: 15px 17px;
+    display: flex;
+    flex-wrap: wrap;
+    .recharge_coupon_bottom_item {
+      position: relative;
+      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;
+        margin-top: 10px auto;
+        text-align: center;
+        border-radius: 8px;
+        background-color: #fff;
+        padding: 10px 0;
+        box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
+        .recharge_coupon_bottom_left_num {
+          span {
+            font-size: 14px;
+            font-family: PingFang SC;
+            font-weight: 400;
+            line-height: 20px;
+            margin-left: 2px;
+            color: #CCCCCC;
+          }
+          .num {
+            font-size: 26px;
+            font-family: PingFang SC;
+            font-weight: bold;
+            color: #CCCCCC;
+          }
+        }
+
+        .recharge_coupon_bottom_sub {
+          font-size: 14px;
+          font-family: PingFang SC;
+          font-weight: 400;
+          line-height: 20px;
+          color: #CCCCCC;
+        }
+      }
+      .recharge_coupon_bottom_middle {
+        display: flex;
+        align-items: center;
+        div {
+          height: 100%;
+          padding: 10px 0;
+          height: 55px;
+          border-right: 1px dashed #CCCCCC;
+          box-sizing: border-box;
+        }
+      }
+      .recharge_coupon_bottom_right {
+        border-radius: 8px;
+        background-color: #fff;
+        flex: 1;
+        position: relative;
+        padding: 10px;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
+        .recharge_coupon_bottom_date {
+          font-size: 18px;
+          font-family: PingFang SC;
+          font-weight: bold;
+          line-height: 25px;
+          color: #CCCCCC;
+          div:last-child {
+            height: 20px;
+            font-size: 12px;
+            font-family: PingFang SC;
+            font-weight: 400;
+            line-height: 20px;
+            color: #CCCCCC;
+          }
+        }
+        .recharge_coupon_bottom_number {
+          display: flex;
+          align-items: center;
+          span {
+            width: 63px;
+            height: 22px;
+            line-height: 22px;
+            border: 1px solid #CCCCCC;
+            border-radius: 18px;
+            text-align: center;
+            font-size: 12px;
+            font-family: PingFang SC;
+            font-weight: 500;
+            color: #CCCCCC;
+            cursor: pointer;
+            &:hover {
+              background-color: #CCCCCC;
+              color: #ffffff;
+            }
+          }
+        }
+      }
+      .img {
+        position: absolute;
+        top: 0;
+        right: 0;
+        width: 72px;
+        height: 72px;
+      }
+    }
+  }
+}
+</style>

src/components/shopAccount.vue

@@ -4,7 +4,15 @@
       <el-col :span="15">
         <div class="tabList">
           <div class="tab_item" @click="changeTabs(i)" :class="{'tab_item_ac':tabNum==i?true:false}" v-for="(item,i) in tabList" :key="i">
-            <span>{{item.name}}</span>
+            <span class="item" v-if="!item.children">{{item.name}}</span>
+            <el-dropdown v-else @command="chooseCoupon">
+              <span class="el-dropdown-link item">
+                {{item.name}}<i class="el-icon-arrow-down el-icon--right"></i>
+              </span>
+              <el-dropdown-menu slot="dropdown">
+                <el-dropdown-item :command="v.command" v-for="(v,index) in item.children" :key="index">{{v.name}}</el-dropdown-item>
+              </el-dropdown-menu>
+            </el-dropdown>
             <div class="tab_line"></div>
           </div>
         </div>
@@ -20,6 +28,7 @@
 import merchantAdd from "./merchantAdd.vue";
 import wallet from "./accountCompoents/wallet.vue";
 import coupon from "./accountCompoents/coupon.vue";
+import invalidCoupon from "./accountCompoents/invalidCoupon.vue";
 import recharge from "./accountCompoents/recharge.vue";
 import consumption from "./accountCompoents/consumption.vue";
 export default {
@@ -27,6 +36,7 @@ export default {
   components: {
     wallet,
     coupon,
+    invalidCoupon,
     recharge,
     consumption,
   },
@@ -36,7 +46,15 @@ export default {
       activeName: "wallet",
       tabList: [
         { name: "我的钱包", index: 0, activeName: "wallet" },
-        { name: "优惠券", index: 1, activeName: "coupon" },
+        {
+          name: "优惠券",
+          index: 1,
+          activeName: "coupon",
+          children: [
+            { name: "优惠券", command: "coupon" },
+            { name: "已失效优惠券", command: "invalidCoupon" },
+          ],
+        },
         { name: "充值明细", index: 2, activeName: "recharge" },
         { name: "消费明细", index: 3, activeName: "consumption" },
       ],
@@ -48,6 +66,10 @@ export default {
     this.changeTabs(0);
   },
   methods: {
+    chooseCoupon(e){
+      this.tabNum = 1;
+      this.activeName = e;
+    },
     forceRerender() {
       // 从 DOM 中删除 my-component 组件
       this.renderComponent = false;
@@ -87,13 +109,14 @@ export default {
       .tab_item {
         min-width: 58px;
         margin-right: 56px;
-        font-size: 16px;
-        font-weight: 500;
-        color: #b1b1b1;
-        position: relative;
-        text-align: center;
-        cursor: pointer;
-
+        .item {
+          font-size: 16px;
+          font-weight: 500;
+          color: #b1b1b1;
+          position: relative;
+          text-align: center;
+          cursor: pointer;
+        }
         .tab_line {
           width: 58px;
           height: 6px;