shop4.3.57/components/page-component/goods/app-goods-coupon.vue

<template>
       <view class="coupon" v-if="newCoupons.length > 0">
           <view class="marketing">
               <view class="block dir-left-nowrap cross-center" @click="setShow">
                   <view class="box-grow-0 block-name">领券</view>
                       <view class="big-box dir-left-nowrap cross-center" v-for="(item, index) in newCoupons" :key="index">
                           <view class="box" :class="sign !== 'gift' ? theme + '-m-text ' + theme : theme + '-color'">
                               满{{item.min_price}}元{{item.type == 1 ? '享' : '减'}}{{item.type == 1 ?item.discount + '折' : item.sub_price}}
                               <view class="left"></view>
                               <view class="right"></view>
                           </view>
                       </view>
                   <image class="box-grow-0" src="../../../static/image/icon/arrow-right.png"></image>
               </view>
           </view>
           <u-popup v-model="show" mode="bottom" border-radius="14" @close="show = false">
               <view class="model" @touchmove.stop.prevent>
                   <view class="f-top dir-left-nowrap main-between cross-center">
                       <view class="f-title">可领取优惠券</view>
                       <view class="f-image" @click="show = false">
                           <image class="f-img" src="/static/image/icon/icon-close.png" ></image>
                       </view>
                   </view>
                   <scroll-view scroll-y class="f-scroll">
                       <view class="f-scroll-content">
                           <view class="f-item dir-top-nowrap" v-for="(item, index) in coupons" :key="index">
                               <view class="f-item-top">
                                   <image :src="couponImg[item.is_receive == 0 ? 'coupon_enabled' : 'coupon_disabled']"></image>
                                   <view class="dir-left-nowrap main-between cross-center">
                                       <view class="f-text-content dir-left-nowrap cross-bottom">
                                           <view class="f-big-text-dis" v-if="item.type == 1">
                                               <text>{{item.discount}}</text>
                                               <text>折</text>
                                           </view>
                                           <view class="f-big-text-pri" v-else-if="item.type == 2">
                                               <text>￥</text>
                                               <text>{{item.sub_price}}</text>
                                           </view>
                                           <view class="f-small-text">
                                               <view>优惠券</view>
                                               <view>满{{item.min_price}}元使用</view>
                                           </view>
                                       </view>
                                       <button @click="receive(item.id, index)" :style="{'color': item.is_receive == 0 ? '#caa76e' : '#b4b4b4'}">{{item.is_receive == 0 ? '立即领取' : '已领取'}}</button>
                                   </view>
                               </view>
                               <view class="f-item-bottom dir-top-nowrap">
                                   <text v-if="item.expire_type == `1`">领取后{{item.expire_day}}天过期</text>
                                   <text v-if="item.expire_type == `2`">有效日期：{{item.begin_time}} - {{item.end_time}}</text>
                                   <text class="t-omit" v-if="item.appoint_type == `3`">适用范围：全场通用</text>
                                   <text class="t-omit" v-else-if="item.appoint_type == `4`">适用范围：仅限当面付活动使用</text>
                                   <text class="t-omit" v-else-if="item.appoint_type == `5`">适用范围：仅限礼品卡使用</text>
                                   <text class="t-omit" v-else-if="item.appoint_type == `2`">
                                       <text>适用商品：</text>
                                       <block v-for="(goods,index) in item.goods" :key="goods.id">
                                           <text>{{index !== 0 ? '、' : ''}}{{goods.name}}</text>
                                       </block>
                                   </text>
                                   <text class="t-omit" v-else-if="item.appoint_type == `1`">
                                       适用分类：
                                       <block v-for="(cat,index) in item.cat" :key="cat.id">
                                           {{index !== 0 ? '、' : ''}}{{cat.name}}
                                       </block>
                                   </text>
                               </view>
                           </view>
                       </view>
                   </scroll-view>
               </view>
           </u-popup>
       </view>
</template>

<script>

    import uPopup from '../../basic-component/u-popup/u-popup.vue';
    import appExclusiveCoupon from '../../page-component/app-exclusive-coupon/app-exclusive-coupon.vue';
    import {mapState} from "vuex";
    import user from '../../../core/user.js';

    export default {
        name: 'app-goods-coupon',

        props: {
            coupons: Array,
            theme: String,
            sign: String
        },

        data() {
            return {
                show: false,
                newCoupons: []
            }
        },

        methods: {
            async receive(id, index) {
                uni.showLoading({
                    mask: true,
                    title: '领取中'
                });
                const e = await this.$request({
                    url: this.$api.coupon.receive,
                    data: {
                        coupon_id: id
                    }
                });
                uni.hideLoading();
                if (e.code == 1) {
                    uni.showModal({
                        title: '提示',
                        content: e.msg,
                        showCancel: false,
                    });
                } else {
                    if (e.data.rest == 0) {
                        this.$emit('change', index);
                    }
                    uni.showToast({
                        icon: 'none',
                        title: '领取成功',
                        duration: 1000,
                    });
                }
            },

            setShow() {
                if (user.isLogin()) {
                    this.show = true;
                } else {
                    this.$user.getInfo();
                }

            }

        },
        computed: {
            ...mapState({
                couponImg: state => state.mallConfig.__wxapp_img.coupon,
            })
        },
        components: {
            uPopup,
            appExclusiveCoupon
        },

        watch: {
            coupons: {
                handler(data) {
                    this.newCoupons = data.slice(0, 3);
                },
                deep: true,
                immediate: true
            }
        }

    }
</script>

<style scoped lang="scss">
    .content {
        padding: 10upx 0 10upx  30upx;
    }
    .marketing {
        & :empty {
            margin: 0;
        }
        .block {
            background-color: #ffffff;
            font-size: #{26upx};
            color: #999999;
            height: 80upx;
            position: relative;
            padding: 0 #{24rpx} 0 #{24rpx};
            image {
                width: #{12rpx};
                height: #{22rpx};
                display: block;
                position: absolute;
                right: 24upx;
            }
            .block-name {
                margin-right: 30upx;
            }
        }
    }
    .model {
        height: #{1100upx};
        width: 750upx;
        .f-top {
            height: 105upx;
            border-bottom: 1upx solid #e2e2e2;
            padding-left:24upx;
            background-color: #ffffff;
            .f-image {
                width: 78upx;
                height: 78upx;
                padding: 24upx;
                .f-img {
                    width: 30upx;
                    height: 30upx;
                }
            }
        }
        .f-scroll {
            height: 995upx;
            width: 100%;
            background-color: #f7f7f7;
            .f-scroll-content {
                padding: 0 24upx;
                height: 995upx;
                width: 100%;
            }
            .f-item {
                width: 702upx;
                height: 272upx;
                border: 1upx solid #cfcfcf;
                margin-top: 17upx;
                border-radius: 14upx;
                background-color: #ffffff;
            }
            .f-item:last-child {
                margin-bottom: 24upx;
            }
            .f-item-top {
                height: 159upx;
                position: relative;
                >image {
                    height: 159upx;
                    width: 100%;
                }
                >view {
                    position: absolute;
                    top: 0;
                    width: 702upx;
                    height: 159upx;
                    padding: 0 24upx;
                    color: #ffffff;
                }
                .dir-left-nowrap>button {
                    width: 161upx;
                    height: 56upx;
                    line-height: 56upx;
                    padding: 0;
                    border: none;
                    margin: 0;
                    border-radius: 28upx;
                    background-color: #ffffff;
                    font-size: 26upx;
                    text-align: center;
                }
                .f-text-content {
                    padding-bottom: 25upx;
                }
                .f-big-text-dis text{
                    line-height: 1;
                }
                .f-big-text-dis text:first-child {
                    font-size: 56upx;
                    font-weight: bold;
                }
                .f-big-text-dis text:last-child {
                    font-size: 34upx;
                    margin-left: 14upx;
                }
                .f-small-text {
                    font-size: 24upx;
                    margin-left: 27upx;
                }
                .f-big-text-pri text {
                    line-height: 1;
                }
                .f-big-text-pri text:first-child {
                    font-size: 27upx;
                }
                .f-big-text-pri text:last-child  {
                    font-size: 56upx;
                    font-weight: bold;
                }
            }
            .f-item-bottom {
                height: 111upx;
                padding: 24upx;
                 text {
                    font-size: 22upx;
                    color: #545454;
                }
            }
        }
    }
    .big-box {
        overflow: hidden;
        margin-right: 10upx;
        padding-right: 1rpx;
    }
    .box {
        border: 1upx solid;
        border-radius: 4upx;
        position: relative;
        display: inline-block;
        padding: 2upx 12upx;
        font-size: 20upx;
        transform: rotateZ(360deg);
        .left,.right {
            width: 10upx;
            height: 10upx;
            border-radius: 50%;
            position: absolute;
            z-index: 1;
            top: 50%;
            border: 1upx solid;
            background-color: #ffffff;
        }
        .left {
            left: 0;

            transform: translate(-51%, -50%);
        }
        .right {
            right: 0;
            transform: translate(51%,-50%);
        }
    }
</style>