xuqiang 4 лет назад
Родитель
Сommit
f8acb3c191

BIN
src/main/pc-space/src/assets/icon_gouxuan_huise.png


BIN
src/main/pc-space/src/assets/icon_gouxuan_pre.png


+ 165 - 0
src/main/pc-space/src/components/CouponInfo.vue

@@ -0,0 +1,165 @@
+<template>
+    <div class="page">
+        <div v-for="(item, index) in list" :key="index">
+            <div class="coupon" @click="choose(item)">
+                <div class="coupon-top">
+                    <div class="text1">{{ item.name }}</div>
+                    <div class="text2">
+                        <span>兑换券编码</span>
+                        <span>{{ item.id }}</span>
+                    </div>
+                </div>
+                <div class="coupon-bottom">
+                    <span>有效期至:{{ item.expiration }}</span>
+                    <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="" />
+                <el-empty v-if="empty" description="暂无兑换券哦~" />
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import { mapState } from 'vuex';
+// import list from '../mixins/list';
+import pageableTable from '../mixins/pageableTable';
+export default {
+    name: 'couponList',
+    mixins: [pageableTable],
+    data() {
+        return {
+            url: '/userCoupon/all',
+            list: [],
+            empty: false,
+            chooseId: 0
+        };
+    },
+    computed: {
+        ...mapState(['couponInfo'])
+    },
+    mounted() {
+        console.log(this.list);
+    },
+    methods: {
+        beforeData() {
+            return {
+                query: {
+                    userId: this.userInfo.id
+                }
+            };
+        },
+        setList(list) {
+            this.list = list;
+        },
+        choose(info) {
+            this.chooseId = info.id;
+            this.$store.commit('setCouponInfo', info);
+            // this.$router.go(-1);
+        }
+        // beforeData() {
+        //     return {
+        //         query: { userId: this.$store.state.userInfo.id, used: false }
+        //     };
+        // }
+    }
+};
+</script>
+
+<style lang="less" scoped>
+.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: '';
+            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;
+    }
+}
+</style>

+ 46 - 2
src/main/pc-space/src/views/My.vue

@@ -26,7 +26,13 @@
             </el-select>
         </div>
         <div class="list" v-loading="fetchingData">
-            <asset-info v-for="(item, index) in list" :key="item.id" :info.sync="list[index]"></asset-info>
+            <template v-if="select === '0'">
+                <asset-info v-for="(item, index) in list" :key="item.id" :info.sync="list[index]"></asset-info>
+            </template>
+            <template v-if="select === '2'">
+                <coupon-info></coupon-info>
+                <!-- <asset-info v-for="(item, index) in list" :key="item.id" :info.sync="list[index]"></asset-info> -->
+            </template>
 
             <el-empty v-if="empty" description="还没有该类型的藏品哦~"></el-empty>
         </div>
@@ -47,9 +53,10 @@
 </template>
 <script>
 import AssetInfo from '../components/AssetInfo.vue';
+import CouponInfo from '../components/CouponInfo.vue';
 import pageableTable from '../mixins/pageableTable';
 export default {
-    components: { AssetInfo },
+    components: { AssetInfo, CouponInfo },
     mixins: [pageableTable],
     data() {
         return {
@@ -97,6 +104,43 @@ export default {
     mounted() {
         this.init();
     },
+    watch: {
+        select() {
+            switch (this.select) {
+                case '0':
+                    this.url = '/asset/all';
+                    break;
+                case '1':
+                    // this.url = '/asset/all';
+                    break;
+                case '2':
+                    // this.url = '/userCoupon/all';
+                    break;
+                case '3':
+                    this.type = 'AUCTION';
+                    this.canResale = '';
+                    break;
+            }
+
+            this.$router
+                .replace({
+                    query: {
+                        ...this.$route.query,
+                        type: this.type,
+                        canResale: this.canResale
+                    }
+                })
+                .catch(() => {});
+
+            this.page = 1;
+            this.getData();
+        },
+        '$route.query.type'() {
+            if (!this.$route.query.type || this.$route.query.type === 'BLIND_BOX') {
+                this.init();
+            }
+        }
+    },
     methods: {
         init() {
             this.checkLogin()

+ 6 - 7
src/main/pc-space/src/views/Send.vue

@@ -111,7 +111,7 @@ export default {
             info: [],
             checked: true,
             id: 103,
-            idOrder: 1034,
+            idOrder: 0,
             form: { password: '' },
             status: '',
             gas: 0,
@@ -154,13 +154,12 @@ export default {
             }
         },
         payUrl() {
-            return resolveUrl(this.$baseUrl, '9th/payOrder/weixin_pc?id=' + this.idOrder);
+            return resolveUrl(
+                this.$baseUrl,
+                'https://nfttest.9space.vip/wx/redirect?redirectUrl=https://nfttest.9space.vip/payOrder/weixin_pc?id=' +
+                    this.idOrder
+            );
         }
-        // payUrl() {
-        //     return resolveUrl(
-        //         'https://nfttest.9space.vip/wx/redirect?redirectUrl=https://nfttest.9space.vip/payOrder/weixin_pc?id=2006'
-        //     );
-        // }
     },
     methods: {
         submit() {

+ 7 - 5
src/main/pc-space/src/views/Submit.vue

@@ -90,12 +90,7 @@ export default {
         };
     },
     computed: {
-        // payUrl() {
-        //     return resolveUrl('https://nfttest.9space.vip/wx/payOrder/weixin_pc?id=' + this.info.id);
-        // },
         payUrl() {
-            // https://nfttest.9space.vip/wx/redirect?redirectUrl=https://nfttest.9space.vip/payOrder/weixin_pc?id=2241
-            // return resolveUrl(this.$baseUrl, 'https://nfttest.9space.vip/payOrder/weixin_pc?id=' + this.id);
             return resolveUrl(
                 this.$baseUrl,
                 'https://nfttest.9space.vip/wx/redirect?redirectUrl=https://nfttest.9space.vip/payOrder/weixin_pc?id=' +
@@ -115,6 +110,13 @@ export default {
         },
         ...mapState(['couponInfo'])
     },
+    beforeRouteLeave(to, from, next) {
+        console.log(to);
+        if (to.path !== '/couponList') {
+            this.$store.commit('setCouponInfo', null);
+        }
+        next();
+    },
     methods: {
         submit() {
             // console.log(this.$baseUrl);