yihuo/pages/award/coupon.vue

<template>
    <view class="cu-modal" :class="{ show: visible }">
        <view class="mask" @click="close"></view>
        <view class="wrapper cu-dialog">
            <view
                class="content"
                v-if="coupons && coupons.length > 0"
                :style="{ backgroundImage: 'url(' + ossurl.common.giftBg + ')' }"
            >
                <view class="contenttip">
                    恭喜您，获得
                    <span class="num">{{ coupons.length }}</span>
                    张优惠券
                </view>
                <scroll-view
                    scroll-y
                    :style="{
                        height: '250px'
                    }"
                >
                    <view style="padding-bottom: 100rpx">
                        <view class="cell" v-for="(item, index) in coupons" :key="index">
                            <view
                                class="flex-align relative"
                                style="height: 180rpx;background-size: 100% 100%;"
                                :style="{ opacity: item.status === 1 ? '1' : '0.6' ,backgroundImage: 'url(' + ossurl.common.gift + ')'}"
                            >
                                <view class="left self-stretch flex-column-align-center">
                                    <view>
                                        <text class="font4">¥</text>
                                        <text class="bold marginL2" style="font-size: 60rpx">
                                            {{ item.amount }}
                                        </text>
                                    </view>
                                    <view class="marginT1 font2" style="color: rgba(0, 0, 0, 0.3)">
                                        <text v-if="item.fullAmount > 0">
                                            满{{ item.fullAmount }}可用
                                        </text>
                                        <text v-else>无门槛</text>
                                    </view>
                                </view>
                                <view class="right marginL20 paddingY5">
                                    <view class="font4 bold" style="margin-bottom: 20rpx">
                                        {{ item.name }}
                                    </view>
                                    <view class="font2" style="color: rgba(0, 0, 0, 0.3)">
                                        {{ formatTime(item.endTime) }}过期
                                    </view>
                                </view>
                            </view>
                        </view>
                    </view>
                </scroll-view>
            </view>
            <view class="flex-align-center paddingT15 giftTop">
                <image :src="ossurl.common.giftTop" class="giftTopImage" mode="widthFix" />
                <view>
                    <view>
                        <button class="giftTopBtn" @click="apply">一键领取</button>
                    </view>
                    <view class="giftTopTip">优惠券详情可在【我的-优惠券】中查看</view>
                </view>
            </view>
        </view>
        <view class="closeBtn" @click="visible = false">
            <view class="cuIcon-close"></view>
        </view>
    </view>
</template>

<script>
    import { throttle } from '@/utils'
    import resource from '@/utils/resource'
    import ossurl from '@/utils/ossurl'
    export default {
        data() {
            return {
                resource,
                coupons: [],
                visible: false,
                ossurl
            }
        },
        computed: {},
        methods: {
            show(coupons) {
                this.coupons = coupons
                this.visible = true
            },
            async refresh() {
                if (!this.visible) return
                const res = await this.$service.wallet.targetCoupon('LUCK', null, false)
                if (res && res.length > 0) {
                    this.coupons = res
                } else {
                    this.close()
                }
            },
            close() {
                this.visible = false
                this.$emit('close', false)
            },
            apply() {
                if (!this.$common.checkLogin()) return
                throttle.call(this.realApply)
            },
            async realApply() {
                const ids = this.coupons.map((item) => item.id)
                const res = await this.$service.wallet.receiveCouponAll(ids)
                res && this.$emit('success')
                this.close()
            },
            formatTime(val) {
                let time = val
                time = time.slice(0, 10)
                console.log(val,time)
                return time
            }
        }
    }
</script>
<style lang="scss" scoped>
    .mask {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
    }
    .wrapper {
        z-index: 1001;
        background-color: transparent;
        width: 100vw;
        padding-top: 120rpx;
        padding-bottom: 160rpx;
        position: relative;
        background-size: 100% auto;
        background-repeat: no-repeat;
        padding-left:0 ;
        padding-right: 0;
        .giftTop {
            position: absolute;
            bottom: 0rpx;
            height: 300rpx;
            left: 0;
            right: 0;
            z-index: 20;
            .giftTopImage {
                width: 100%;
                position: absolute;
                left: 0;
                right: 0;
                top: 0;
                bottom: 0;
                z-index: -1;
            }
            .giftTopBtn {
                height: 64rpx;
                background: #020101;
                border-radius: 178rpx 178rpx 178rpx 178rpx;
                color: #f0cd49;
                // line-height: 40rpx;
                font-size: 28rpx;
            }
            .giftTopTip {
                font-size: 24rpx;
                font-family: Source Han Sans, Source Han Sans;
                font-weight: 400;
                color: #000000;
                line-height: 44rpx;
                margin-top: 24rpx;
            }
        }
        // background-color: rgba(0, 0, 0, 0.6);
        .coupon_popup {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            z-index: -2;
        }
        .content {
            width: 100%;
            padding: 24rpx 64rpx;
            padding-top:100rpx;
            min-height: 640rpx;
            background-size: 100% auto;
        background-repeat: no-repeat;
            .contenttip {
                padding: 18rpx 0;
                text-align: center;
                .num {
                    display: inline-block;
                    background: #f0cd49;
                    border-radius: 4rpx;
                    padding: 4rpx 12rpx;
                    font-weight: bold;
                }
            }
        }
        .cell {
            margin-bottom: 20rpx;
            position: relative;
            .bg {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                z-index: -1;
            }
            .left {
                width: 200rpx;
                height: 100%;
                // border-right: 2rpx dashed #E7E4DA;
            }
            .right {
                // height: 100%;
            }
        }
    }
    .closeBtn {
        background: #d8d8d8;
        position: fixed;
        bottom: 180rpx;
        right: calc(50% - 32rpx);
        width: 64rpx;
        height: 64rpx;
        border-radius: 50%;
        line-height: 64rpx;
        text-align: center;
        .cuIcon-close {
            color: #000;
            font-size: 32rpx;
        }
    }
</style>