yihuo/pages/coupon_take/index.vue

<template>
    <page title="领取卡券" ref="pageRef" light nav-color="transparent">
        <view v-if="list && list.length > 0">
            <view class="cell" v-for="item in list" :key="item.id">
                <view class="flex-align relative" style="height: 188rpx" :style="{opacity: item.status === 1 ? '1' : '0.6'}">
                    <image class="bg" :src="item.status === 1 ? resource.center_bg_coupon : resource.center_bg_coupon_invalid"
                        mode="scaleToFill" />
                    <view class="left self-stretch flex-column-align-center">
                        <view class="color-white">
                            <text class="font8">¥</text>
                            <text class="bold marginL2" style="font-size: 72rpx">{{item.amount}}</text>
                        </view>
                        <view class="marginT10 font4">
                            <text v-if="item.fullAmount > 0">满{{item.fullAmount}}可用</text>
                            <text v-else>无门槛</text>
                        </view>
                    </view>
                    <view class="flex1 self-stretch flex-column-around marginL10 paddingY5">
                        <view class="font4">{{item.name}}</view>
                        <view class="font3">领取截止：{{item.endTime}}</view>
                        <view class="font2" style="opacity: 0.8" @click="spread(item)">
                            使用规则
                            <text class="lg color-white" :class="[item.spread ? 'cuIcon-fold' : 'cuIcon-unfold']"></text>
                        </view>
                    </view>
                    <button v-if="item.status === 1" class="btn color-theme" @click="take(item)">领取</button>
                </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 store from '@/store'
import resource from '@/utils/resource'
export default {
    components: { empty },
    data() {
        return {
            resource,
            list: [],
            id: null,
            requestCouponTime: null
        }
    },
    onLoad(options) {
        if (options.q) {
            let qrUrl = decodeURIComponent(options.q)
            let qrObj = this.$common.getQueryObj(qrUrl)
            this.scene = qrObj.scene
            this.sceneId = qrObj.id
            this.couponId = qrObj.couponId
        } else {
            this.scene = options.scene
            this.sceneId = options.id
            this.couponId = options.couponId
        }
        this.$event.on(this.$event.key.LANUCH_COUPON, this.initCoupon)
    },
    onUnload() {
        this.$event.on(this.$event.key.LANUCH_COUPON)
    },
    mounted() {
        setTimeout(() => {
            this.initCoupon()
        }, 100)
    },
    onPullDownRefresh() {
        this.getData(false)
    },
    methods: {
        async initCoupon() {
            let token = store.state.token
            if (!token) {
                token = this.$cache.get(this.$cache.key.TEMP_TOKEN)
            }
            if (!token) return
            let now = new Date().getTime()
            if (this.requestCouponTime && now - this.requestCouponTime < 2 * 60 * 1000) {
                return
            }
            this.requestCouponTime = now
            this.getData(true)
        },
        async getData(loading = false) {
            const res = await this.$service.wallet.couponByQr(this.couponId, loading)
            uni.stopPullDownRefresh()
            this.list = res ? [res] : null
        },
        async take(item) {
            if (!this.$common.isLogin()) {
                this.$router.push('login')
                return
            }
            const res = await this.$service.wallet.receiveCoupon(item.id)
            if (res) {
                this.$message.success('领取成功')
                this.getData()
                setTimeout(() => {
                    let curPages = getCurrentPages()
                    if (curPages.length > 1) {
                        this.$router.back()
                    } else {
                        this.$router.replace('coupon')
                    }
                }, 1000)
            }
        },
        spread(item) {
            this.$set(item, 'spread', !item.spread)
        }
    }
}
</script>
<style>

</style>
<style lang="scss" scoped>
.cell {
    color: #fff;
    margin: 20rpx 28rpx 0;
    position: relative;
    .bg {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        z-index: -1;
    }
    .left {
        width: 244rpx;
        margin: 10rpx 0;
        border-right: 2rpx dashed #fff;
    }
    .btn {
        position: absolute;
        right: 30rpx;
        bottom: 18rpx;
        height: 48rpx;
        line-height: 48rpx;
        border-radius: 24rpx;
        text-align: center;
        padding: 0 16rpx;
        font-size: 28rpx;
        background: #fff;
    }
    .rule {
        background: #333333;
        border-bottom-right-radius: 8rpx;
        border-bottom-left-radius: 8rpx;
        padding: 16rpx 30rpx;
        color: #888888;
        font-size: 24rpx;
    }
}
</style>