football/pages/coupon/details/details.vue

<template>
    <app-layout>
        <view class="page">
            <view>
                <!-- 优惠券信息 -->
                <view class="info-top">
                    <view class="name">{{list.name}}</view>
                    <template v-if="list.type == 2">
                        <view class="price">￥{{list.sub_price | reservedNum}}</view>
                    </template>
                    <template v-else>
                        <view class="price">{{list.discount | reservedNum}}折</view>
                    </template>
                    <view v-if="list.min_price > 0">满{{list.min_price | reservedNum}}可用</view>
                    <view v-else>无门槛使用</view>
                    <view v-if="list.discount_limit">优惠上限:￥{{list.discount_limit | reservedNum}}</view>
                    <view v-if="!person">
                        <view @click="toGoods" v-if="list.receive_count === '1'">
                            <button style="background-color: #fff;" :class="[`btn`,`${theme}-color`,`${theme}-border`]">
                                立即使用
                            </button>
                        </view>
                        <view @click="receive(list.id)" v-if="list.receive_count === '0'">
                            <button style="color:#fff;" :class="[`btn`,`${theme}-background`,`${theme}-border`]">立即领取
                            </button>
                        </view>
                    </view>
                    <view v-else>
                        <view v-if="list.appoint_type == 4">
                            <view class="scan-code">仅限当面付活动使用</view>
                        </view>
                        <view @click="toGoods" v-else-if="list.is_use == 0 && list.is_expired == 0">
                            <button style="background-color: #fff;" :class="[`btn`,`${theme}-color`,`${theme}-border`]">
                                立即使用
                            </button>
                        </view>
                        <button class="btn used" v-else-if="list.is_use == 1">已使用</button>
                        <button class="btn used" v-else-if="list.is_expired == 1 && list.is_use == 0">已过期</button>
                    </view>
                </view>
                <!-- 分割线 -->
                <view class="line">
                    <image src="./../image/line.png"></image>
                </view>
                <!-- 优惠券使用信息 -->
                <view class="details">
                    <view class="title">有效期</view>
                    <view v-if="list.expire_type == '2' || person">{{person ? list.start_time : list.begin_time + " 00:00"}} - {{list.end_time + ' '}}
                        <text v-if="!person"> 23:59</text>
                    </view>
                    <view v-if="list.expire_type !== '2' && !person">领取后{{list.expire_day}}天内有效</view>
                    <view class="title">使用规则</view>
                    <view v-if="list.appoint_type == '1'">本券仅限购买
                        <text v-for="(cat,index) in list.cat" :key="cat.id">{{cat.name}}
                            <text v-if="index !== list.cat.length -1">、</text>
                        </text>
                        分类下的商品。
                    </view>
                    <view v-if="list.appoint_type == '2'">本券仅限购买
                        <text v-for="(good,index) in list.goods" :key="good.id">{{good.name}}
                            <text v-if="index !== list.goods.length -1">、</text>
                        </text>
                        。
                    </view>
                    <view v-if="list.appoint_type == '3'">本券全场通用。</view>
                    <view v-if="list.appoint_type == '4'">本券仅限当面付活动使用。</view>
                    <view class="title">使用说明</view>
                    <view>
                        <text style="word-break: break-all;">{{list.rule}}</text>
                    </view>
                </view>
            </view>
        </view>
    </app-layout>
</template>

<script>
    import {mapState} from "vuex";

    export default {
        data() {
            return {
                list: {
                    name: '',
                    start_time: '',
                    begin_time: '',
                    end_time: '',
                    sub_price: 0,
                    min_price: 0,
                    expire_day: '',
                    discount: 10,
                },
                person: false
            }
        },
        computed: {
            ...mapState({
                theme: state => state.mallConfig.theme,
            })
        },
        methods: {
            getList(id, person) {
                let that = this;
                that.$showLoading({
                    type: 'global',
                    text: '加载中...'
                });
                let url = that.$api.coupon.detail;
                let para = {
                    coupon_id: id
                };
                if (person == 1) {
                    url = that.$api.coupon.user_coupon_detail;
                    para = {
                        user_coupon_id: id
                    };
                    that.person = true;
                }
                that.$request({
                    url: url,
                    data: para
                }).then(response => {
                    that.$hideLoading();
                    if (response.code === 0) {
                        that.list = response.data.list;
                    } else {
                        uni.showToast({
                            title: response.msg,
                            icon: 'none',
                            duration: 1000
                        });
                    }
                }).catch(() => {
                    that.$hideLoading();
                });
            },
            toGoods() {
                uni.navigateTo({
                    url: this.list.page_url
                });
            },
            receive(id) {
                let that = this;
                uni.showLoading({
                    title: '领取中...'
                });
                that.$request({
                    url: that.$api.coupon.receive,
                    data: {
                        coupon_id: id
                    },
                }).then(response => {
                    uni.hideLoading();
                    if (response.code === 0) {
                        uni.showToast({
                            title: response.msg,
                            duration: 1000
                        });
                        this.getList(id);
                    } else {
                        uni.showToast({
                            title: response.msg,
                            icon: 'none',
                            duration: 1000
                        });
                        this.getList(id);
                    }
                }).catch(() => {
                    uni.hideLoading();
                    that.$event.on(that.$const.EVENT_USER_LOGIN).then(() => {
                        that.receive(id);
                    });
                });
            },
        },
        onLoad(option) {
            this.getList(option.id, option.person);
        },
         filters: {
            reservedNum(data) {
                return Number(data);
            }
        }
    }
</script>

<style scoped lang="scss">
    .page {
        height: 100%;
        background-color: #d6b985;
        width: 100%;
        padding: #{20rpx} 0;
        position: absolute;
    }

    .info-top {
        background-color: #fff;
        margin: 0 #{25rpx};
        text-align: center;
        padding-top: #{60rpx};
        border-top-left-radius: #{25rpx};
        border-top-right-radius: #{25rpx};
        color: #353535;
        font-size: #{32rpx};
    }

    .name {
        font-size: #{28rpx};
        color: #666;
    }

    .price {
        font-size: #{56rpx};
        margin-top: #{28rpx};
        margin-bottom: #{10rpx};
    }

    .scan-code {
        height: #{56rpx};
        line-height: #{52rpx};
        margin: #{35rpx} auto 0;
        color: #ff4544;
        font-size: #{30rpx};
        border: none;
    }

    .btn {
        height: #{56rpx};
        line-height: #{52rpx};
        width: #{240rpx};
        margin: #{35rpx} auto 0;
        font-size: #{30rpx};
        border-radius: #{28rpx};
        border: #{2rpx} solid;
    }

    .btn.used {
        background-color: #f7f7f7;
        color: #acacac;
        border: #{2rpx} solid #f7f7f7;
    }

    .btn::after {
        border: 0;
    }

    .line {
        height: #{50rpx};
        margin: #{-1rpx} #{25rpx};
        background-color: #fff;
    }

    .line image {
        height: 100%;
        width: 100%;
    }

    .details {
        background-color: #fff;
        margin: #{-2rpx} #{25rpx} 0;
        font-size: #{28rpx};
        padding: #{25rpx} #{40rpx} #{65rpx};
        border-bottom-left-radius: #{25rpx};
        border-bottom-right-radius: #{25rpx};
    }

    .details .title {
        color: #b0b0b0;
        font-size: #{26rpx};
        margin-bottom: #{25rpx};
        margin-top: #{50rpx};
    }

    .scan-code {
        height: #{56rpx};
        line-height: #{52rpx};
        margin: #{35rpx} auto 0;
        color: #ff4544;
        font-size: #{30rpx};
        border: none;
    }
</style>