store-shop-uniapp/components/goodsDetalils/coupon-popup.vue

<template>
  <view class="coupon-popup" :class="showActivity && 'show'" >
	<view class="mask" @click="closePopup"></view>
    <view class="couponShow-box" id="popupInner">
        <view class="tabsbox">
            <u-tabs
              :list="activeTypeList"
              bar-width="0"
              bar-height="0"
              :bold="false"
              active-color="#C5AA7B"
              inactive-color="#999999"
              :is-scroll="false"
              :current="activeTypeFlag"
              @change="activeTypeActive"
            ></u-tabs>
        </view>
        <view v-show="activeTypeFlag === 0">
          <view class="couponShow">
            <view class="title-box">
              <image class="close-btn" @click="onActivityClose" src="https://ceres.zkthink.com/static/images/close.png"></image>
            </view>
            <view class="shopCouponBox" :class="markTools.length === 0 && 'flex'">
              <view class="list" v-if="markTools.length > 0">
                <view class="item"
                      v-for="(item, index) in markTools"
                      :key="index"
                      :class="{received: item.state === 1}"
                >
                  <view class="info-box">
                    <view class="discoun" v-if="item.couponType == 1"><text style="font-size: 28rpx">￥</text>{{item.reduceMoney}}</view>
                    <view class="discoun" v-if="item.couponType == 2">{{item.reduceMoney}}折</view>
                    <view class="info-date">{{getDate(item.startTime)}}-{{getDate(item.endTime)}}</view>
                    <view class="info-condition mar-top-30">{{item.content}}</view>
                    <!--                  <view class="info-condition" v-if="item.couponType == 2">{{item.reduceMoney}}折优惠</view>-->
                    <wx-send-coupon @success="success" v-if="item.state === 3" :couponList="[item]">
                      <view class="use-btn mar-top-10"
                            v-if="item.state === 3">
                        立即领取
                      </view>
                    </wx-send-coupon>
                    <view class="use-btn mar-top-10" v-if="item.state === 0">已领取</view>
                    <view class="use-btn mar-top-10" v-if="item.state === 1">已使用</view>
                  </view>
                </view>
              </view>
              <view v-else class="emptyOrder-box flex-items-plus flex-column">
                <image class="emptyOrder-img" src="https://ceres.zkthink.com/static/img/bgnull.png"></image>
                <label class="font-color-999 fs26 mar-top-30">你还没有优惠券哦～</label>
              </view>
            </view>
          </view>
        </view>
        <view v-show="activeTypeFlag === 1">
          <view class="couponShow">
            <view class="title-box">
              <image class="close-btn" @click="onActivityClose" src="https://ceres.zkthink.com/static/images/close.png"></image>
            </view>
            <view class="shopCouponBox" :class="shopMarkTools.length === 0 && 'flex'">
              <view class="list" v-if="shopMarkTools.length > 0">
                <view
                    class="item"
                    v-for="(item, index) in shopMarkTools"
                    :key="index"
                    :class="{received: item.state === 1}"
                >
                  <view class="info-box">
                    <view class="discoun" v-if="item.couponType === 1"><text
                        style="font-size: 28rpx">￥</text>{{item.reduceMoney}}</view>
                    <view class="discoun" v-if="item.couponType === 2">{{item.reduceMoney}}折</view>
                    <view class="info-date">{{getDate(item.startTime)}}-{{getDate(item.endTime)}}</view>
                    <view class="info-condition" v-if="item.couponType === 1">
                      满{{item.fullMoney}}元减{{item.reduceMoney}}元</view>
                    <view class="info-condition" v-if="item.couponType === 2">{{item.reduceMoney}}折优惠
                    </view>
                    <view class="use-btn" @click="receiveTap(item,1)" v-if="item.state === 3">立即领取
                    </view>
                    <view class="use-btn" v-if="item.state === 0">已领取</view>
                  </view>
                </view>
              </view>
              <view v-else class="emptyOrder-box flex-items-plus flex-column">
                <image class="emptyOrder-img" src="https://ceres.zkthink.com/static/img/bgnull.png"></image>
                <label class="font-color-999 fs26 mar-top-30">你还没有优惠券哦～</label>
              </view>
            </view>
          </view>
        </view>
        <view class="receive-success" v-if="isShowSuccess">
            <view class="success-box">
                <image class="success-img" src="https://ceres.zkthink.com/static/images/success_tu.png"></image>
                <view class="text">领取成功</view>
            </view>
        </view>
    </view>
  </view>
</template>

<script>
import WxSendCoupon from "@/components/wx/wxSendCoupon";
const NET = require('../../utils/request')
const API = require('../../config/api')

export default {
    name: "coupon-popup",
    components: {
        WxSendCoupon,
    },
    props: {
        markTools: {
            type: Array,
            default: ()=>[]
        },
        shopMarkTools: {
            type: Array,
            default: ()=>[]
        },
        setTop: {
          type: Number,
          default: 0
        }
    },
    data () {
        return {
            showActivity: false,
            isShowSuccess: false,
            activeTypeFlag: 0,
            activeTypeList: [{
                name: '平台活动'
            }, {
                name: '店铺活动'
            }],
        }
    },
    methods:{
        activeTypeActive(index) {
          this.activeTypeFlag = index
        },
        //关闭优惠券弹窗
        onActivityClose() {
            this.showActivity = false
        },
        // 时间格式化
        getDate(time) {
            if (!time) return '';
            return time.split(' ')[0].split('-').join('.');
        },
        // 领取优惠券
        receiveTap(couponItemInfo, type) {
            uni.showLoading({
                mask: true,
                title: '领取中...',
            })
            let ReceiveCoupon
            if (type === 0) {
                ReceiveCoupon = {
                    couponId: couponItemInfo.couponId,
                    shopId:this.shopId
                }
            } else {
                ReceiveCoupon = {
                    shopCouponId: couponItemInfo.shopCouponId,
                    shopId:this.shopId
                }
            }
            NET.request(API.ReceiveCoupon, ReceiveCoupon, 'POST').then(res => {
                uni.hideLoading()
                this.isShowSuccess = true
                setTimeout(() => {
                    this.isShowSuccess = false
                    // this.showActivity = false;
                    // this.queryProductDetail()
                }, 1500);
                // setTimeout(() => {
                // 	this.showActivity = false
                // }, 3000);
            }).catch(res => {
                uni.hideLoading()
                uni.showToast({
                    title: res.msg,
                    icon: 'none'
                })
            })
        },
		success(){
			this.isShowSuccess = true
			setTimeout(() => {
			    this.isShowSuccess = false
			}, 1500);
		},
        closePopup(){
          this.showActivity = false;
        }
    }
}
</script>

<style lang="scss" scoped>
.coupon-popup{
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    // background-color: rgba(0, 0, 0, 0.6);
    z-index: -1;
    opacity: 0;
    &.show{
        z-index: 1000;
        opacity: 1;
        .couponShow-box{
            /*transform: translate3D(0px, 0px, 0px);*/
            bottom: 0;
        }
    }
	.mask{
		display: block;
		position: fixed;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		overflow: hidden;
		background-color: rgba(0, 0, 0, 0.6);
		z-index:1001;
	}
    .couponShow-box{
      .couponShow {
        height: 1000rpx;
        z-index: 333;
      }
        width: 100%;
        height: auto;
        /*transform: translate3d(0px, 100%, 0px);*/
        transition: all 0.3s ease-in-out 0s;
        background-color: #fff;
        position: absolute;
        left: 0;
        right: 0;
        bottom: -100%;
		z-index: 1002;
        .tabsbox{
            padding:0 20rpx;
            /deep/ .u-tab-item{
                height: 100rpx !important;
                line-height: 100rpx !important;
            }
        }
        .title-box .close-btn {
            width: 50upx;
            height: 50upx;
            box-sizing: border-box;
            position: absolute;
            top: 20upx;
            right: 20upx;
        }

        // #ifdef MP-ALIPAY
        .title-box .close-btn {
            width: 30upx;
            height: 30upx;
            top: 10upx;
            right: 10upx;
        }
        // #endif
        .shopCouponBox {
            height: 100%;
            overflow: auto;
            position: relative;
            &.flex{
                display: flex;
                justify-content: center;
                align-items: center;
            }
            .emptyOrder-box {
                position: absolute;
                top: 0;
                bottom: 0;
                right: 0;
                left: 0;
                margin: auto;
                // padding-top: 80upx;
                .emptyOrder-img {
                    width: 225upx;
                    height: 196upx;
                }
            }
            .list {
                display: flex;
                flex-wrap: wrap;
            }
            .item {
                width: 50%;
                height: 291rpx;
                background: url("https://ceres.zkthink.com/static/images/couponsIcon.png") no-repeat center top;
                border-radius: 10rpx;
                margin-top: 20rpx;
                display: flex;
                flex-direction: row;
                position: relative;
                background-size: contain;
                padding: 0 50rpx;
                margin-bottom: 30rpx;
            }
            .received {
                background: url("https://ceres.zkthink.com/static/images/couponsIcon1.png") no-repeat center top;
                background-size: contain;
                .discoun {
                    color: #999999;
                    padding-top: 35rpx;
                }
                .use-btn {
                    height: 48rpx;
                    border: 2rpx solid #CCCCCC;
                    line-height: 48rpx;
                    text-align: center;
                    font-size: 24rpx;
                    font-weight: 400;
                    background-color: #CCCCCC;
                    color: #FFFFFF;
                    margin: 50rpx auto 0 auto;
                    padding: 0 10rpx;
                }
            }

            /*.item:last-child {*/
                /*margin-bottom: 100rpx;*/
            /*}*/

            .discoun {
                display: flex;
                flex-direction: row;
                align-items: baseline;
                font-size: 40rpx;
                color: #C5AA7B;
                margin: 0 auto;
                padding-top: 40rpx;
            }
            .discoun text {
                display: inline-block;
            }
            .info-box {
                width: 100%;
                display: flex;
                flex-direction: column;
                align-items: center;
            }
            .info-condition {
                font-size: 20rpx;
                font-weight: 400;
                color: #999999;
                margin:0 auto;
            }
            .info-date {
                font-size: 20rpx;
                font-family: PingFang SC;
                font-weight: 400;
                color: #999999;
                margin: 10rpx auto;
                line-height: 20rpx;
            }
            .use-btn {
                height: 48rpx;
                border: 2rpx solid #C5AA7B;
                line-height: 48rpx;
                text-align: center;
                font-size: 24rpx;
                font-weight: 400;
                background-color: #C5AA7B;
                color: #FFFFFF;
                margin: 50rpx auto 0 auto;
                padding: 0 10rpx;
            }
        }
    }
}
.receive-success {
    width: 100%;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 8888;
    .success-box {
        width: 380upx;
        height: 280upx;
        background: rgba(0, 0, 0, 0.5);
        border-radius: 10upx;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        .success-img {
            width: 200upx;
            height: 130upx;
        }
        .text {
            font-size: 28upx;
            margin-top: 50upx;
            font-weight: 400;
            color: rgba(255, 255, 255, 1);
        }
    }
}
</style>