caimei-applets-caimei/components/cm-module/activityContact/index.vue

<template>
    <view class="cm-contact" v-if="activityEntryVisiable || contactVisiable">
        <!-- 未展开状态 -->
        <view class="cm-close-box" v-show="!isActive">
            <view class="cm-icon cm-entry" @click="handleToggleEntry(true)" v-if="activityEntryVisiable"></view>
            <view class="cm-icon cm-bround cm-open-btn" @click="handleToggleAcitve(true)" v-if="contactVisiable"></view>
        </view>
        <!-- 展开状态 -->
        <view class="cm-close-box" v-show="contactVisiable && isActive">
            <view class="cm-icon cm-entry" @click="handleToggleEntry(true)" v-if="activityEntryVisiable"></view>
            <view class="cm-icon cm-bround cm-mobile" @click="handelShowMobile">
                <view class="cm-dialog" v-show="mobileVisiable">
                    <view class="cm-dialog-content content1">
                        <view class="cm-item"> <text>展会咨询电话：15338897365</text> </view>
                        <view class="cm-line line1"></view>
                        <view class="cm-item"> <text>客服咨询电话：15338851365</text> </view>
                    </view>
                </view>
            </view>
            <view class="cm-icon cm-bround cm-ewm" @click="handelShowWechat">
                <view class="cm-dialog" v-show="wechatVisiable">
                    <view class="cm-dialog-content content2">
                        <view class="cm-item">
                            <image
                                src="https://static.caimei365.com/app/img/icon2/cm_wechat_02.png"
                                mode="widthFix"
                            ></image>
                            <text>展会咨询微信</text>
                        </view>
                        <view class="cm-line line2"></view>
                        <view class="cm-item">
                            <image
                                src="https://static.caimei365.com/app/img/icon2/cm_wechat_01.png"
                                mode="widthFix"
                            ></image>
                            <text>客服咨询微信</text>
                        </view>
                    </view>
                </view>
            </view>
            <view class="cm-icon cm-bround cm-close-btn" @click="handleToggleAcitve(false)"></view>
        </view>
        <view class="mask cover" v-if="activityEntryVisiable && entryVisiable">
            <view class="content">
                <image
                    src="https://static.caimei365.com/app/img/icon2/cm_entry_bg.png"
                    mode="widthFix"
                    @click="handleToggleCoupon(true)"
                ></image>
                <view class="mask-close" @click="handleToggleEntry(false)"></view>
            </view>
        </view>

        <view class="mask cover" v-if="showCouponEntry">
            <view class="content">
                <view class="btn btn1" @click="navigatorToPro(1)"></view>
                <view class="btn btn2" @click="navigatorToPro(2)"></view>
                <image src="https://static.caimei365.com/app/img/icon2/coupon-entry-app.png" mode="widthFix"></image>
                <view class="mask-close" @click="handleToggleCoupon(false)"></view>
            </view>
        </view>

        <view class="mask" v-if="mobileVisiable || wechatVisiable" @click="handleClose"></view>
    </view>
</template>

<script>
export default {
    props: {
        pageInfo: {
            type: Object
        }
    },
    data() {
        return {
            isActive: true,
            mobileVisiable: false,
            wechatVisiable: false,
            entryVisiable: true,
            activityEntryVisiable: false,
            contactVisiable: false,
            showCouponEntry: false
        }
    },
    created() {
        this.contactVisiable = this.pageInfo.infoBarStatus === 1
        this.activityEntryVisiable = this.initActivityEntry(
            this.pageInfo.redPacketBeginTime,
            this.pageInfo.redPacketEndTime
        )
        console.log(this.pageInfo)
    },
    methods: {
        // 是否展开
        handleToggleAcitve(active) {
            this.isActive = active
            this.mobileVisiable = false
            this.wechatVisiable = false
        },
        // 显示微信二维码
        handelShowWechat() {
            this.wechatVisiable = !this.wechatVisiable
            this.mobileVisiable = false
        },
        // 显示联系电话
        handelShowMobile() {
            this.mobileVisiable = !this.mobileVisiable
            this.wechatVisiable = false
        },
        // 隐藏微信二维码和联系电话
        handleClose() {
            this.mobileVisiable = false
            this.wechatVisiable = false
        },
        // 显示活动入口
        handleToggleEntry(visiable) {
            this.entryVisiable = visiable
        },
        navigatorToPro(flag) {
            // 友盟自定义事件
            if (process.env.NODE_ENV != 'development') {
                if (flag === 2) {
                    this.$uma.trackEvent('meibohui_Coupon_detail_click', {
                        Um_Key_PageName: '云上美博会优惠券介绍',
                        Um_Key_PageCategory: '活动专题页面',
                        Um_Key_SourcePage: '活动专题页面'
                    })
                }

                if (flag === 1) {
                    this.$uma.trackEvent('meibohui_Coupon_buy_click', {
                        Um_Key_PageName: '云上美博会优惠券购买跳转',
                        Um_Key_PageCategory: '活动专题页面',
                        Um_Key_SourcePage: '活动专题页面'
                    })
                }
            }

            if (flag === 2) this.$api.navigateTo('/pages/h5/activity/couponExp')
            else this.$api.navigateTo('/pages/goods/product?id=6898')
            this.entryVisiable = false
            this.showCouponEntry = false
        },
        // 优惠券入口
        handleToggleCoupon(flag) {
            // 友盟自定义事件
            if (flag && process.env.NODE_ENV != 'development') {
                this.$uma.trackEvent('meibohui_Coupon_click', {
                    Um_Key_PageName: '云上美博会获取弹窗点击',
                    Um_Key_PageCategory: '活动专题页面',
                    Um_Key_SourcePage: '活动专题页面'
                })
            }
            this.showCouponEntry = flag
            this.entryVisiable = false
        },
        // 初始化红包入口状态
        initActivityEntry(begin, end) {
            const nowTime = new Date().getTime()
            // 兼容 iso android 的时间处理
            const beginTime = new Date(begin.replace(/-/g, '/')).getTime()
            const endTime = new Date(end.replace(/-/g, '/')).getTime()
            console.log('活动是否开始: ')
            console.log(nowTime >= beginTime && nowTime <= endTime)
            return nowTime >= beginTime && nowTime <= endTime
        }
    }
}
</script>

<style lang="scss" scoped>
.cm-contact {
    position: fixed;
    right: 20rpx;
    bottom: 240rpx;
    z-index: 9999;
}
.cm-close-box {
    position: relative;
    z-index: 9;
    .cm-icon {
        position: relative;
        width: 80rpx;
        height: 80rpx;
        margin: 10rpx 0;
        &.cm-bround {
            border-radius: 50%;
        }
        &.cm-entry {
            height: 88rpx;
            background: url(https://static.caimei365.com/app/img/icon2/cm_entry_icon.png) no-repeat center;
            background-size: 80rpx;
        }
        &.cm-open-btn {
            background: rgba(0, 0, 0, 0.4) url(https://static.caimei365.com/app/img/icon2/cm_open.png) no-repeat center;
            background-size: 39rpx;
        }
        &.cm-mobile {
            background: rgba(0, 0, 0, 0.4) url(https://static.caimei365.com/app/img/icon2/cm_mobile.png) no-repeat
                center;
            background-size: 39rpx;
        }
        &.cm-ewm {
            background: rgba(0, 0, 0, 0.4) url(https://static.caimei365.com/app/img/icon2/cm_ewm.png) no-repeat center;
            background-size: 39rpx;
        }
        &.cm-close-btn {
            background: rgba(0, 0, 0, 0.4) url(https://static.caimei365.com/app/img/icon2/cm_close.png) no-repeat center;
            background-size: 39rpx;
        }
    }
}
.cm-dialog {
    top: 0;
    right: 110rpx;
    position: absolute;
    padding: 20rpx;
    background: rgb(255, 92, 0);
    border-radius: 16rpx;
    &::after {
        position: absolute;
        top: 20rpx;
        right: -20rpx;
        content: '';
        display: block;
        width: 0;
        height: 0;
        border-top: 16rpx solid transparent;
        border-bottom: 16rpx solid transparent;
        border-left: 20rpx solid rgb(255, 92, 0);
    }
    .cm-line {
        &.line1 {
            width: 100%;
            height: 1px;
            background: #fff;
            margin: 10rpx 0;
        }
        &.line2 {
            width: 1px;
            height: 200rpx;
            background: #eee;
            margin: 0 16rpx;
            margin-top: -50rpx;
        }
    }
    .content1 {
        .cm-item {
            color: #fff;
            text {
                display: block;
                width: 400rpx;
                font-size: 28rpx;
                text-align: center;
            }
        }
    }
    .content2 {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .cm-item {
            color: #fff;
            text {
                display: block;
                font-size: 28rpx;
                text-align: center;
                margin-top: 10rpx;
            }
            image {
                width: 240rpx;
                height: 240rpx;
            }
        }
    }
}
.mask {
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    z-index: 999;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    .content {
        position: relative;
        .mask-close {
            z-index: 9;
            position: absolute;
            top: -80rpx;
            right: 40rpx;
            width: 64rpx;
            height: 64rpx;
            background: url(https://static.caimei365.com/app/img/icon2/cm_float_close.png) no-repeat center;
            background-size: 60rpx 60rpx;
        }
        .btn {
            width: 80rpx;
            height: 80rpx;
            background: #666;
            z-index: 9999;
            position: absolute;
            right: 60rpx;
            opacity: 0;
            &.btn1 {
                top: 175rpx;
            }
            &.btn2 {
                top: 350rpx;
            }
        }
        image {
            width: 560rpx;
        }
    }
    &.cover {
        z-index: 999999;
        background: rgba(0, 0, 0, 0.4);
    }
}
</style>