caimei-applets-store/components/views/cm-active-alert/cm-active-alert.vue

<template>
    <view>
        <view class="notice-model" v-if="couponNoticeFlag" @click="toDetail('notice')">
            <image :src="staticUrl + 'logo.png'" class="cover"></image>
            <view class="content">
                <text class="title">颜选美学</text>
                <text class="subTitle">您已获得优惠券奖励，赶紧去领取吧！</text>
            </view>
        </view>
        <uni-popup ref="activeAlertPopup" type="center" :is-mask-click="false">
            <view class="popup-content">
                <view class="close-btn iconfont icon-iconfontguanbi" @click="onClose"></view>
                <image class="image" :src="image" @click="toDetail('active')" mode="widthFix"></image>
            </view>
        </uni-popup>
    </view>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'
export default {
    computed: {
        ...mapGetters(['couponAlertType', 'couponNoticeFlag', 'userId']),
        image() {
            let iconName = 'get'
            if (this.couponAlertType === 1) iconName = 'get'
            if (this.couponAlertType === 2) iconName = 'news'
            return `${this.staticUrl}icon-coupons-${iconName}.png`
        }
    },
    watch: {
        couponAlertType(nval) {
            const activeFlag = this.$getStorage('ACTIVE_FLAG')
            if (nval > 0 && !activeFlag) {
                this.$refs.activeAlertPopup.open()
            }
        }
    },
    methods: {
        onClose() {
            this.$store.commit('coupon/SET_COUPON_ALERT_TYPE', this.couponAlertType - 1)
            if (this.couponAlertType === 0) {
                this.$refs.activeAlertPopup.close()
            }
        },
        toDetail(type) {
            if (type === 'notice') {
                this.$store.commit('coupon/SET_COUPON_NITICE_FLAG', false)
            } else {
                if (this.userId) {
                    this.$setStorage('ACTIVE_FLAG', true)
                }
                this.onClose()
            }
            this.$router.navigateTo('coupon/coupon-receive')
        }
    }
}
</script>

<style lang="scss" scoped>
.notice-model {
    @extend .cm-flex-between;
    @extend .fixed-top;
    padding: 16rpx 40rpx;
    background: rgba(0, 0, 0, 0.7);
    width: 750rpx;
    box-sizing: border-box;

    .cover {
        width: 78rpx;
        height: 78rpx;
        border-radius: 50%;
    }

    .content {
        display: flex;
        flex: 1;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        margin-left: 24rpx;
        .title {
            font-size: 26rpx;
            color: #fff;
        }
        .subTitle {
            font-size: 26rpx;
            color: #fff;
            margin-top: 10rpx;
        }
    }
}
.popup-content {
    @extend .cm-flex-center;
    flex-direction: column;
    align-items: flex-end;
    .image {
        display: block;
        max-width: 600rpx;
    }
    .close-btn {
        text-align: center;
        line-height: 38rpx;
        margin-bottom: 16rpx;
        margin-right: 36rpx;
        width: 36rpx;
        height: 36rpx;
        border-radius: 50%;
        border: 2rpx solid #fff;
        color: #fff;
        font-size: 28rpx;
    }
}
</style>