football/pages/order-submit/coupon-pick.vue

<template>
    <app-layout>
        <view class="page">
            <!-- <view class="mb-24 tip">注: 优惠券只能抵消商品金额，不能抵消运费。</view> -->
            <view class="mb-24 tip">注: 优惠券只能抵用报名金额</view>
            <view class="mb-24">
                <app-button @click="setData(0)" type="general" round color="#999">不使用优惠券</app-button>
            </view>
            <template v-if="list !== null">
                <view v-if="!list.length" class="no-data">暂无可用优惠券</view>
                <view v-else class="main-center dir-top-nowrap list">
                    <view v-for="(item,index) in list"
                          :key="index"
                          @click="setData(item.id)"
                          class="dir-left-nowrap item"
                          :style="'background-image: url(' + couponBackground + ')'">
                        <view class="box-grow-0 cross-center item-left">
                            <view>
                                <view v-if="item.type==1">{{item.discount}}折</view>
                                <view v-else>￥{{item.sub_price}}</view>
                                <view class="desc">满{{item.coupon_min_price}}元可用</view>
                                <view style="font-size: 10px" v-if="item.discount_limit">优惠上限:￥{{item.discount_limit}}</view>
                            </view>
                        </view>
                        <view class="box-grow-1 cross-center item-right">
                            <view>
                                <view>{{item.coupon_data.name}}</view>
                                <view class="date-time">{{item.start_time}}~{{item.end_time}}</view>
                                <view class="scope" v-if="item.coupon_data.appoint_type == 3">全场通用</view>
                                <view class="scope" v-else>限品类</view>
                            </view>
                        </view>
                    </view>
                </view>
            </template>
        </view>
    </app-layout>
</template>

<script>
    import {mapState} from 'vuex';
    import AppLoading from '../../components/basic-component/app-loading/app-loading.vue';

    export default {
        name: 'coupon-pick',
        components: {AppLoading},
        data() {
            return {
                mchIndex: null,
                list: null,
            };
        },
        computed: {
            ...mapState({
                couponBackground: state => state.mallConfig.__wxapp_img.mall.coupon_enable_bg,
            }),
        },
        onLoad(options) {
            console.log('onLoad->', options);
            this.mchIndex = options.mchIndex;
            this.loadData();
        },
        methods: {
            loadData() {
                uni.showLoading({
                    mask: true,
                    title: '加载中',
                });
                this.$request({
                    url: this.$api.order.usable_coupon_list,
                    method: 'post',
                    data: {
                        form_data: JSON.stringify(this.$store.state.orderSubmit.formData.list[this.mchIndex]),
                    }
                }).then(response => {
                    uni.hideLoading();
                    if (response.code === 0) {
                        this.list = response.data.list;
                    } else {
                    }
                }).catch(e => {
                    uni.hideLoading();
                });
            },
            setData(data) {
                const formData = this.$store.state.orderSubmit.formData;
                formData.list[this.mchIndex].user_coupon_id = data;
                this.$store.commit('orderSubmit/mutSetFormData', formData);
                uni.navigateBack();
            },
        }
    }
</script>

<style scoped lang="scss">
    .mb-24 {
        margin-bottom: #{24rpx};
    }

    .page {
        padding: #{24rpx};

        .tip {
            font-size: $uni-font-size-general-one;
            color: $uni-general-color-two;
        }

        .no-data {
            padding: #{100rpx};
            text-align: center;
            color: $uni-general-color-three;
            background: $uni-weak-color-two;
            border-radius: #{16rpx};
        }
    }

    .list {
        .item {
            background-size: 100% 100%;
            width: 100%;
            height: #{152rpx};
            margin-bottom: #{24rpx};

            .item-left {
                width: 28.45%;
                overflow: hidden;
                text-align: center;
                color: #fff;

                view {
                    width: 100%;
                }

                .desc {
                    font-size: $uni-font-size-weak-one;
                    padding-top: #{12rpx};
                }
            }

            .item-right {
                padding: #{24rpx};

                .date-time {
                    font-size: $uni-font-size-weak-two;
                    color: $uni-general-color-two;
                }

                .scope {
                    font-size: $uni-font-size-weak-two;
                    color: $uni-general-color-one;
                }
            }
        }
    }
</style>