修改

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

@@ -1,7 +1,7 @@
 <template>
     <div class="page">
         <div v-for="(item, index) in list" :key="index">
-            <div class="coupon" @click="choose(item)">
+            <div class="coupon" @click="choose">
                 <div class="coupon-top">
                     <div class="text1">{{ item.name }}</div>
                     <div class="text2">
@@ -14,8 +14,8 @@
                     <span v-if="!item.limited">规定商品可用</span>
                 </div>
 
-                <img v-if="chooseId === item.id" class="icon" src="../assets/icon_gouxuan_pre.png" alt="" />
-                <img v-else class="icon" src="../assets/icon_gouxuan_huise.png" alt="" />
+                <!-- <img v-if="chooseId === item.id" class="icon" src="../assets/icon_gouxuan_pre.png" alt="" />
+                <img v-else class="icon" src="../assets/icon_gouxuan_huise.png" alt="" /> -->
                 <el-empty v-if="empty" description="暂无兑换券哦~" />
             </div>
         </div>
@@ -24,7 +24,6 @@
 
 <script>
 import { mapState } from 'vuex';
-// import list from '../mixins/list';
 import pageableTable from '../mixins/pageableTable';
 export default {
     name: 'couponList',
@@ -55,15 +54,8 @@ export default {
             this.list = list;
         },
         choose(info) {
-            this.chooseId = info.id;
-            this.$store.commit('setCouponInfo', info);
-            // this.$router.go(-1);
+            this.$router.push('/collection');
         }
-        // beforeData() {
-        //     return {
-        //         query: { userId: this.$store.state.userInfo.id, used: false }
-        //     };
-        // }
     }
 };
 </script>

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

@@ -1,6 +1,24 @@
 <template>
     <el-dialog center title="支付订单" :visible.sync="show" width="680px">
         <div class="page" v-loading="loading">
+            <div class="coupon" @click="choose(list2)">
+                <div class="coupon-top">
+                    <div class="text1">{{ list2.name }}</div>
+                    <div class="text2">
+                        <span>兑换券编码</span>
+                        <span>{{ list2.id }}</span>
+                    </div>
+                </div>
+                <div class="coupon-bottom">
+                    <span>有效期至:{{ list2.expiration }}</span>
+                    <span v-if="!list2.limited">规定商品可用</span>
+                </div>
+
+                <img v-if="chooseId === list2.id" class="icon" src="../assets/icon_gouxuan_pre.png" alt="" />
+                <img v-else class="icon" src="../assets/icon_gouxuan_huise.png" alt="" />
+                <el-empty v-if="empty" description="暂无兑换券哦~" />
+            </div>
+            <div @click="$router.push('/my')">查看更多</div>
             <div class="info">
                 <div class="price">
                     <span class="text1">应付金额</span>
@@ -57,13 +75,17 @@
 <script>
 import vueQrcode from '@chenfengyuan/vue-qrcode';
 import resolveUrl from 'resolve-url';
+import pageableTable from '../mixins/pageableTable';
 import { mapState } from 'vuex';
 import { add } from 'mathjs';
 export default {
+    mixins: [pageableTable],
     data() {
         return {
             show: false,
+            url: '/userCoupon/all',
             payMethods: 'WEIXIN',
+            list2: [],
             payList: [
                 {
                     icon: require('../assets/weixin.png'),
@@ -117,7 +139,25 @@ export default {
         }
         next();
     },
+    mounted() {
+        this.getData();
+    },
     methods: {
+        beforeData() {
+            return {
+                query: {
+                    userId: this.userInfo.id
+                }
+            };
+        },
+        setList(list) {
+            this.list2 = list[0];
+            console.log(this.list2);
+        },
+        choose(info) {
+            this.chooseId = info.id;
+            this.$store.commit('setCouponInfo', info);
+        },
         submit() {
             // console.log(this.$baseUrl);
             // if (this.payMethods === 'DCEP') {
@@ -230,7 +270,99 @@ export default {
 /deep/.el-loading-mask {
     background-color: #ffffffee;
 }
+.list {
+    padding: 24px 0 50px;
+}
+.coupon {
+    border-radius: 8px;
+    background: linear-gradient(135deg, rgba(253, 251, 96, 1), rgba(255, 143, 62, 1));
+    position: relative;
+    padding: 0 10px;
+    margin: 0 16px 16px;
+    &::after {
+        content: '';
+        position: absolute;
+        top: 1px;
+        right: 1px;
+        left: 1px;
+        bottom: 1px;
+        border-radius: 8px;
+        background-color: #181818;
+        z-index: 0;
+    }
+
+    div {
+        position: relative;
+        z-index: 1;
+    }
 
+    .coupon-top {
+        padding: 16px 0;
+
+        .text1 {
+            font-size: 18px;
+            font-weight: bold;
+            color: #939599;
+            line-height: 24px;
+            background: linear-gradient(0deg, #fdfb60 0%, #ff8f3e 100%);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+        }
+
+        .text2 {
+            padding-top: 6px;
+            font-size: 12px;
+            line-height: 17px;
+            color: #939599;
+            span {
+                &:last-child {
+                    color: #fff;
+                    margin-left: 6px;
+                }
+            }
+        }
+    }
+
+    .coupon-bottom {
+        border-top: 1px dashed #ebebeb;
+        color: #939599;
+        font-size: 11px;
+        line-height: 17px;
+        padding: 9px 0;
+        display: flex;
+        justify-content: space-between;
+        position: relative;
+        &::before {
+            // content: '' !important;
+            // position: absolute;
+            // background-color: #181818;
+            // width: 16px;
+            // height: 16px;
+            // left: -18px;
+            // top: -8px;
+            // border-radius: 16px;
+        }
+        &::after {
+            // content: '';
+            // position: absolute;
+            // background-color: #181818;
+            // width: 16px;
+            // height: 16px;
+            // right: -18px;
+            // top: -8px;
+            // border-radius: 16px;
+        }
+    }
+
+    .icon {
+        position: absolute;
+        width: 24px;
+        height: 24px;
+        right: 10px;
+        top: 30px;
+        z-index: 3;
+    }
+}
 /deep/.el-radio {
     .flex();
     display: inline-flex;