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>展会咨询电话：13766896620</text> </view>
                        <view class="cm-line line1"></view>
                        <view class="cm-item"> <text>业务咨询电话：13766896620</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_entry_bg.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_entry_bg.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"></image>
                <view class="mask-close" @click="handleToggleEntry(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
        }
    },
    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
        },
        // 初始化红包入口状态
        initActivityEntry(begin, end) {
            const nowTime = new Date().getTime()
            const beginTime = new Date(begin).getTime()
            const endTime = new Date(end).getTime()
            return nowTime >= beginTime && nowTime <= endTime
        }
    }
}
</script>

<style lang="scss" scoped>
.cm-contact {
    position: fixed;
    right: 20rpx;
    top: 30%;
}
.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 10rpx;
        }
    }
    .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: 1;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    .content {
        position: relative;
        .mask-close {
            z-index: 9;
            position: absolute;
            top: -40rpx;
            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;
        }
        image {
            width: 560rpx;
        }
    }
    &.cover {
        z-index: 999;
        background: rgba(0, 0, 0, 0.4);
    }
}
</style>