兑换券

src/main/nine-space/src/views/order/CouponList.vue

@@ -0,0 +1,153 @@
+<template>
+    <div class="page">
+        <van-list class="list" v-model:loading="loading" :finished="finished" finished-text="" @load="getData">
+            <template 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="" />
+                </div>
+            </template>
+            <van-empty v-if="empty" description="没有任何藏品哦~" />
+        </van-list>
+    </div>
+</template>
+
+<script>
+import { mapState } from 'vuex';
+import list from '../../mixins/list';
+export default {
+    name: 'couponList',
+    mixins: [list],
+    data() {
+        return {
+            url: '/userCoupon/all',
+            list: [],
+            empty: false,
+            chooseId: 0
+        };
+    },
+    computed: {
+        ...mapState(['couponInfo'])
+    },
+    methods: {
+        choose(info) {
+            this.chooseId = info.id;
+            this.$store.commit('setCouponInfo', info);
+            this.$router.go(-1);
+        },
+        beforeData() {
+            return {
+                query: { userId: this.$store.state.userInfo.id }
+            };
+        }
+    }
+};
+</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>