.

src/main/pc-space/src/components/CouponInfo.vue

@@ -10,13 +10,46 @@
                     </div>
                 </div>
                 <div class="box1">
-                    <div>
-                        <span class="text3"
-                            >兑换券编码<span class="text4"> {{ item.id }}</span></span
-                        >
-                        <div class="text5">有效期至:{{ item.expiration }}</div>
+                    <div style="width: 100%">
+                        <div class="top">
+                            <span class="text3 name1"
+                                >兑换券编码<span class="text4"> {{ item.id }}</span></span
+                            >
+                            <!-- <div class="text6" v-if="item.used">已使用</div> -->
+                        </div>
+
+                        <div class="top1">
+                            <div class="text5">有效期至:{{ item.expiration }}</div>
+                            <div class="btn">立即使用</div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="used">以下兑换券已过期/已使用</div>
+        <div v-for="(item, index) in list2" :key="index + 2">
+            <div class="coupon">
+                <div class="box">
+                    <img class="img" src="../assets/icon_youhuiquan_01@3x (2).png" alt="" />
+                    <div class="coupon-top">
+                        <div class="text1">{{ item.name }}</div>
+                        <div class="text2" v-if="!item.limited">仅限规定商品可用</div>
+                    </div>
+                </div>
+                <div class="box1">
+                    <div style="width: 100%">
+                        <div class="top">
+                            <span class="text3 name1"
+                                >兑换券编码<span class="text4"> {{ item.id }}</span></span
+                            >
+                            <div class="text6">已使用</div>
+                        </div>
+
+                        <div class="top1">
+                            <div class="text5">有效期至:{{ item.expiration }}</div>
+                            <div class="btn2">立即使用</div>
+                        </div>
                     </div>
-                    <div class="btn">立即使用</div>
                 </div>
             </div>
         </div>
@@ -31,6 +64,7 @@ export default {
     data() {
         return {
             list: [],
+            list2: [],
             empty: false,
             chooseId: 0
         };
@@ -50,8 +84,8 @@ export default {
                     '/userCoupon/all',
                     {
                         query: {
-                            userId: this.userInfo.id
-                            // used: true
+                            // userId: this.userInfo.id
+                            // used: false
                         }
                     },
                     {
@@ -59,7 +93,14 @@ export default {
                     }
                 )
                 .then(res => {
-                    this.list = res.content;
+                    this.list = res.content.filter(item => {
+                        return !item.used;
+                    });
+                    this.list2 = res.content.filter(item => {
+                        return item.used;
+                    });
+                    // console.log(this.list2);
+                    // console.log(this.list);
                     if (this.list.length === 0) {
                         this.empty = true;
                     }
@@ -76,6 +117,14 @@ export default {
 .list {
     padding: 24px 0 50px;
 }
+.used {
+    font-size: 14px;
+    font-family: PingFangSC-Regular, PingFang SC;
+    font-weight: 400;
+    color: #939599;
+    line-height: 24px;
+    margin: 60px 0 20px 10px;
+}
 .coupon {
     border-radius: 8px;
     display: flex;
@@ -113,40 +162,74 @@ export default {
     }
     .box1 {
         background: #1f2230;
+        border-radius: 0 8px 8px 0;
         width: 100%;
         display: flex;
         justify-content: space-between;
-        padding: 16px 20px;
-        .text3 {
-            font-size: 14px;
-            font-weight: 400;
-            color: #939599;
-            line-height: 24px;
-        }
-        .text4 {
-            font-size: 14px;
-            font-weight: 400;
-            color: #ffffff;
-            line-height: 24px;
-            text-align: bottom;
-        }
-        .text5 {
-            font-size: 11px;
-            font-weight: 400;
-            color: #939599;
-            line-height: 16px;
-            margin-top: 45px;
+        padding-left: 16px;
+        .top {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            .text3 {
+                font-size: 14px;
+                font-weight: 400;
+                color: #939599;
+                line-height: 24px;
+                &.name1 {
+                    padding-top: 15px;
+                }
+            }
+            .text4 {
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+                text-align: bottom;
+            }
+            .text6 {
+                width: 49px;
+                height: 18px;
+                background: #939599;
+                text-align: center;
+                font-size: 11px;
+                margin-top: -18px;
+                color: #ffffff;
+                border-radius: 0px 8px 0px 8px;
+            }
         }
-        .btn {
-            width: 180px;
-            height: 28px;
-            background: linear-gradient(135deg, #fdfb60 0%, #ff8f3e 100%);
-            border-radius: 14px;
-            font-size: 12px;
-            color: #1a1a1a;
-            line-height: 28px;
-            text-align: center;
-            margin-top: 30px;
+        .top1 {
+            display: flex;
+            justify-content: space-between;
+            .text5 {
+                font-size: 11px;
+                font-weight: 400;
+                color: #939599;
+                line-height: 16px;
+                margin-top: 45px;
+            }
+            .btn {
+                width: 180px;
+                height: 28px;
+                background: linear-gradient(135deg, #fdfb60 0%, #ff8f3e 100%);
+                border-radius: 14px;
+                font-size: 12px;
+                color: #1a1a1a;
+                line-height: 28px;
+                text-align: center;
+                margin: 11px 20px 0 0;
+            }
+            .btn2 {
+                width: 180px;
+                height: 28px;
+                font-size: 12px;
+                color: #ffffff;
+                background: #939599;
+                border-radius: 14px;
+                line-height: 28px;
+                text-align: center;
+                margin: 11px 20px 0 0;
+            }
         }
     }
 }

src/main/pc-space/src/views/Submit.vue

@@ -4,7 +4,7 @@
             <div class="border"></div>
             <div class="page" v-loading="loading">
                 <div v-if="list2">
-                    <div class="title">选择兑换券</div>
+                    <div class="title1">选择兑换券</div>
                     <div class="coupon" @click="choose(list2)">
                         <div class="box">
                             <img class="img" src="../assets/icon_youhuiquan_01@3x.png" alt="" />
@@ -31,7 +31,7 @@
                     </div>
                     <div class="all" @click="all">查看更多</div>
                 </div>
-
+                <div class="border"></div>
                 <div class="info">
                     <div class="price">
                         <span class="text1">应付金额</span>
@@ -396,12 +396,22 @@ export default {
 }
 </style>
 <style lang="less" scoped>
+/deep/ .el-dialog__body {
+    padding: 4px 20px 0;
+}
 .border {
     height: 1px;
 
     background: #f2f3f5;
     border-radius: 1px;
 }
+.title1 {
+    font-size: 16px;
+    font-weight: 400;
+    color: #000000;
+    line-height: 24px;
+    margin: 31px 0 20px;
+}
 .info {
     .flex();
     height: 94px;
@@ -455,6 +465,7 @@ export default {
 }
 .all {
     cursor: pointer;
+    margin-bottom: 30px;
 }
 /deep/.el-loading-mask {
     background-color: #ffffffee;