yihuo/pages/coupon/index.vue

<template>
    <page title="优惠券" ref="pageRef" nav-color="#fff">
        <view class="list" v-if="list && list.length > 0">
            <view
                class="cell"
                v-for="(item, index) in list"
                :key="index"
                :class="{ grayscale: item.status !== 1 }"
                @click="item.status === 1 ? showAward(item) : ''"
                :style="{ backgroundImage: 'url(' + ossurl.mine.couponBg + ')' }"
            >
                <view class="flex-align relative" style="height: 188rpx">
                    <view class="left">
                        <view class="">
                            <text class="font8">¥</text>
                            <text class="bold marginL2" style="font-size: 72rpx">
                                {{ item.amount }}
                            </text>
                        </view>
                        <view class="font4 tip">
                            <text v-if="item.fullAmount > 0">满{{ item.fullAmount }}可用</text>
                            <text v-else>无门槛</text>
                        </view>
                    </view>
                    <view class="flex1 right">
                        <view class="font8 bold">{{ item.name }}</view>
                        <view class="font3 time" v-if="item.expireTime">
                            {{ formatTime(item.expireTime) }}过期
                        </view>
                        <!-- <view class="font2" style="opacity: 0.8" @click="spread(item)">
                            使用规则
                            <text
                                class="lg"
                                :class="[item.spread ? 'cuIcon-fold' : 'cuIcon-unfold']"
                            ></text>
                        </view> -->
                    </view>
                </view>
                <view class="rule" v-if="item.spread">
                    {{ item.description }}
                </view>
            </view>
        </view>
        <empty v-else :top="200" />
    </page>
</template>
<script>
    import empty from '@/components/empty'
    import loginMixin from '@/mixin/login'
    import ossurl from '@/utils/ossurl'

    export default {
        mixins: [loginMixin],
        components: { empty },
        data() {
            return {
                ossurl,
                list: []
            }
        },
        mounted() {
            setTimeout(() => {
                this.getData()
            }, 100)
        },
        methods: {
            init() {
                this.getData()
            },
            async getData() {
                const res = await this.$service.wallet.coupons()
                this.list = res
            },
            showAward(item) {
                if (item.scene === 'LUCK') {
                    this.$router.switchTab('award')
                } else if (item.scene === 'MALL') {
                    this.$router.switchTab('vip')
                } else if (item.scene === 'TRADE') {
                    wx.navigateToMiniProgram({
                        appId: 'wxda349435734e3acc'
                    })
                }
            },
            spread(item) {
                this.$set(item, 'spread', !item.spread)
            },
            formatTime(val) {
                let time = val
                time = time.slice(0, 10)
                return time
            }
        }
    }
</script>
<style></style>
<style lang="scss" scoped>
    .list {
        padding: 34rpx 20rpx;
    }
    .cell {
        position: relative;
        background-size: 100% 100%;
        height: 176rpx;
        margin-bottom: 20rpx;
        .left {
            width: 190rpx;
            color: #000000;
            text-align: center;
            .tip {
                font-size: 24rpx;
                font-family: Source Han Sans, Source Han Sans;
                font-weight: 350;
                color: rgba(0, 0, 0, 0.3);
            }
        }
        .right {
            color: #000;
            padding-left: 50rpx;
            .time {
                font-size: 24rpx;
                font-family: Source Han Sans, Source Han Sans;
                font-weight: 350;
                color: rgba(0, 0, 0, 0.3);
                margin-top: 8rpx;
            }
        }

        .rule {
            background: #333333;
            border-bottom-right-radius: 8rpx;
            border-bottom-left-radius: 8rpx;
            padding: 16rpx 30rpx;
            color: #888888;
            font-size: 24rpx;
        }
    }
</style>