兑换券

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

@@ -173,7 +173,7 @@ export default {
     .fans {
         display: flex;
         align-items: center;
-        justify-content: space-between;
+        // justify-content: space-between;
         padding: 19px 16px 20px;
         .text {
             display: flex;
@@ -181,7 +181,7 @@ export default {
             .text1 {
                 display: flex;
                 align-items: center;
-                max-width: 70px;
+                // max-width: 80px;
                 overflow: hidden;
                 &.name1 {
                     margin-right: 22px;
@@ -200,6 +200,7 @@ export default {
                 .text3 {
                     font-size: 14px;
                     font-weight: 400;
+                    width: 90px;
                     .ellipsis();
                     color: #939599;
                     line-height: 24px;

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

@@ -2,16 +2,21 @@
     <div class="page" v-if="list">
         <div v-for="(item, index) in list" :key="index">
             <div class="coupon" @click="choose">
-                <div class="coupon-top">
-                    <div class="text1">{{ item.name }}</div>
-                    <div class="text2">
-                        <span>兑换券编码</span>
-                        <span>{{ item.id }}</span>
+                <div class="box">
+                    <img class="img" src="../assets/icon_youhuiquan_01@3x.png" alt="" />
+                    <div class="coupon-top">
+                        <div class="text1">{{ item.name }}</div>
+                        <div class="text2" v-if="!item.limited">仅限规定商品可用</div>
                     </div>
                 </div>
-                <div class="coupon-bottom">
-                    <span>有效期至:{{ item.expiration }}</span>
-                    <span v-if="!item.limited">规定商品可用</span>
+                <div class="box1">
+                    <div>
+                        <span class="text3"
+                            >兑换券编码<span class="text4"> {{ item.id }}</span></span
+                        >
+                        <div class="text5">有效期至:{{ item.expiration }}</div>
+                    </div>
+                    <div class="btn">立即使用</div>
                 </div>
             </div>
         </div>
@@ -72,92 +77,76 @@ export default {
 }
 .coupon {
     border-radius: 8px;
-    background: linear-gradient(135deg, rgba(253, 251, 96, 1), rgba(255, 143, 62, 1));
-    position: relative;
+    display: flex;
     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;
+    margin-bottom: 16px;
+    .box {
+        display: flex;
+        .img {
+            width: 189px;
+            height: 120px;
+            position: relative;
+            z-index: 1;
         }
-
-        .text2 {
-            padding-top: 6px;
-            font-size: 12px;
-            line-height: 17px;
-            color: #939599;
-            span {
-                &:last-child {
-                    color: #fff;
-                    margin-left: 6px;
-                }
+        .coupon-top {
+            padding: 16px 0;
+            position: absolute;
+            z-index: 2;
+            .text1 {
+                text-align: center;
+                font-size: 24px;
+                font-family: PingFangSC-Medium, PingFang SC;
+                font-weight: bold;
+                color: #1a1a1a;
+                line-height: 36px;
+                margin: 15px 0 0 27px;
+            }
+            .text2 {
+                font-size: 12px;
+                font-weight: 400;
+                color: #1a1a1a;
+                line-height: 22px;
+                margin-left: 30px;
             }
         }
     }
-
-    .coupon-bottom {
-        border-top: 1px dashed #ebebeb;
-        color: #939599;
-        font-size: 11px;
-        line-height: 17px;
-        padding: 9px 0;
+    .box1 {
+        background: #1f2230;
+        width: 100%;
         display: flex;
         justify-content: space-between;
-        position: relative;
-        &::before {
-            content: '';
-            position: absolute;
-            background-color: #181818;
-            width: 16px;
-            height: 16px;
-            left: -18px;
-            top: -8px;
-            border-radius: 16px;
+        padding: 16px 20px;
+        .text3 {
+            font-size: 14px;
+            font-weight: 400;
+            color: #939599;
+            line-height: 24px;
         }
-        &::after {
-            content: '';
-            position: absolute;
-            background-color: #181818;
-            width: 16px;
-            height: 16px;
-            right: -18px;
-            top: -8px;
-            border-radius: 16px;
+        .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;
+        }
+        .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;
         }
-    }
-
-    .icon {
-        position: absolute;
-        width: 24px;
-        height: 24px;
-        right: 10px;
-        top: 30px;
-        z-index: 3;
     }
 }
 </style>

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

@@ -5,21 +5,28 @@
                 <div v-if="list2">
                     <div class="title">选择兑换券</div>
                     <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 class="box">
+                            <img class="img" src="../assets/icon_youhuiquan_01@3x.png" alt="" />
+                            <div class="coupon-top">
+                                <div class="text1">{{ list2.name }}</div>
+                                <div class="text2" v-if="!list2.limited">仅限规定商品可用</div>
                             </div>
                         </div>
-                        <div class="coupon-bottom">
-                            <span>有效期至:{{ list2.expiration }}</span>
-                            <span v-if="!list2.limited">规定商品可用</span>
+                        <div class="box1">
+                            <div>
+                                <span class="text3"
+                                    >兑换券编码<span class="text4"> {{ list2.id }}</span></span
+                                >
+                                <div class="text5">有效期至:{{ list2.expiration }}</div>
+                            </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="" />
                         </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 class="all" @click="all">查看更多</div>
                 </div>
@@ -32,11 +39,11 @@
                         <span class="text3">(含gas费¥{{ gas }})</span>
                     </div>
                     <div class="flex1"></div>
-                    <!-- <div class="order">
-                    <span class="text1">订单编号</span>
-                    <span class="text2">{{ orderInfo.id }}</span>
-                    <el-button type="info" @click="copy" size="mini" plain>复制</el-button>
-                </div> -->
+                    <div class="order">
+                        <span class="text1">订单编号</span>
+                        <span class="text2">{{ info.id }}</span>
+                        <el-button type="info" @click="copy" size="mini" plain>复制</el-button>
+                    </div>
                 </div>
 
                 <div class="payMethods">
@@ -84,16 +91,20 @@
             <div class="page">
                 <div v-for="(item, index) in list3" :key="index" @click="IdFn(item)">
                     <div class="coupon" @click="choose">
-                        <div class="coupon-top">
-                            <div class="text1">{{ item.name }}</div>
-                            <div class="text2">
-                                <span>兑换券编码</span>
-                                <span>{{ item.id }}</span>
+                        <div class="box">
+                            <img class="img" src="../assets/icon_youhuiquan_01@3x.png" alt="" />
+                            <div class="coupon-top">
+                                <div class="text1">{{ item.name }}</div>
+                                <div class="text2" v-if="!item.limited">仅限规定商品可用</div>
                             </div>
                         </div>
-                        <div class="coupon-bottom">
-                            <span>有效期至:{{ item.expiration }}</span>
-                            <span v-if="!item.limited">规定商品可用</span>
+                        <div class="box1">
+                            <div>
+                                <span class="text3"
+                                    >兑换券编码<span class="text4"> {{ item.id }}</span></span
+                                >
+                                <div class="text5">有效期至:{{ item.expiration }}</div>
+                            </div>
                         </div>
                         <el-empty v-if="empty" description="暂无兑换券哦~" />
                     </div>
@@ -276,7 +287,7 @@ export default {
             this.payTimeout = setInterval(() => {
                 this.$http.get('/order/get/' + this.id).then(res => {
                     console.log(res);
-                    if (res.status === 'PROCESSING') {
+                    if (res.status === 'FINISH') {
                         clearInterval(this.payTimeout);
                         // this.status = res.status;
                         this.show = false;
@@ -340,7 +351,7 @@ export default {
                 });
         },
         copy() {
-            this.$copyText(this.orderInfo.id).then(
+            this.$copyText(this.info.id).then(
                 e => {
                     this.$message.success('复制成功');
                 },
@@ -419,92 +430,70 @@ export default {
 }
 .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 0px 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;
+    display: flex;
+    margin-bottom: 16px;
+    .box {
+        display: flex;
+        .img {
+            width: 189px;
+            height: 120px;
+            position: relative;
+            z-index: 1;
         }
-
-        .text2 {
-            padding-top: 6px;
-            font-size: 12px;
-            line-height: 17px;
-            color: #939599;
-            span {
-                &:last-child {
-                    color: #fff;
-                    margin-left: 6px;
-                }
+        .coupon-top {
+            padding: 16px 0;
+            position: absolute;
+            z-index: 2;
+            .text1 {
+                text-align: center;
+                font-size: 24px;
+                font-family: PingFangSC-Medium, PingFang SC;
+                font-weight: bold;
+                color: #1a1a1a;
+                line-height: 36px;
+                margin: 15px 0 0 27px;
+            }
+            .text2 {
+                font-size: 12px;
+                font-weight: 400;
+                color: #1a1a1a;
+                line-height: 22px;
+                margin-left: 30px;
             }
         }
     }
-
-    .coupon-bottom {
-        border-top: 1px dashed #ebebeb;
-        color: #939599;
-        font-size: 11px;
-        line-height: 17px;
-        padding: 9px 0;
+    .box1 {
+        background: #e5e5e5;
+        border-radius: 0px 8px 8px 0px;
+        width: 100%;
         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;
+        padding: 16px 20px;
+        .text3 {
+            font-size: 14px;
+            font-weight: 400;
+            color: #939599;
+            line-height: 24px;
         }
-        &::after {
-            // content: '';
-            // position: absolute;
-            // background-color: #181818;
-            // width: 16px;
-            // height: 16px;
-            // right: -18px;
-            // top: -8px;
-            // border-radius: 16px;
+        .text4 {
+            font-size: 14px;
+            font-weight: 400;
+            color: #000000;
+            line-height: 24px;
+            text-align: bottom;
+        }
+        .text5 {
+            font-size: 11px;
+            font-weight: 400;
+            color: #939599;
+            line-height: 16px;
+            margin-top: 45px;
+        }
+        .icon {
+            width: 24px;
+            height: 24px;
+            margin-top: 33px;
         }
-    }
-
-    .icon {
-        position: absolute;
-        width: 24px;
-        height: 24px;
-        right: 10px;
-        top: 30px;
-        z-index: 3;
     }
 }
 /deep/.el-radio {