美博会页面修改

manifest.json

@@ -90,4 +90,4 @@
     "uniStatistics" : {
         "version" : "1"
     }
-}
+}

pages/h5/activity/components/activity-contact.vue

@@ -6,7 +6,7 @@
             <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-close-box" v-show="contactVisiable && isActive">
             <view class="cm-icon cm-entry" @click="handleToggleEntry(true)" v-if="activityEntryVisiable"></view>
             <view class="cm-icon regexp" @click="handleToCouponExp">优惠券\n规则</view>
             <view class="cm-icon cm-bround cm-mobile" @click="handelShowMobile">
@@ -46,7 +46,7 @@
                 </view>
             </view>
             <view class="cm-icon cm-bround cm-close-btn" @click="handleToggleAcitve(false)"></view>
-        </view> -->
+        </view>
         <view class="mask cover" v-if="activityEntryVisiable && entryVisiable">
             <view class="content">
                 <!-- <image

pages/h5/activity/components/quick-operation-contact.vue

@@ -0,0 +1,376 @@
+<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 regexp" @click="handleToCouponExp">优惠券\n规则</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" @click="phoneCall('15338897365')">
+                            <text>展会咨询电话：15338897365</text>
+                        </view>
+                        <view class="cm-line line1"></view>
+                        <view class="cm-item" @click="phoneCall('15338851365')">
+                            <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
+                                show-menu-by-longpress
+                                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
+                                show-menu-by-longpress
+                                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> -->
+                <image
+                    src="https://static.caimei365.com/app/img/icon2/coupon-entry-app.png"
+                    @click="handleNaviagtorToCoupon"
+                    mode="widthFix"
+                ></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 cover" v-if="showCouponEntryNew">
+            <view class="content">
+                <image
+                    src="https://static.caimei365.com/app/img/icon2/coupon-entry-app.png"
+                    mode="widthFix"
+                    @click="handleNaviagtorToCoupon"
+                ></image>
+                <view class="mask-close" @click="showCouponEntryNew = 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,
+            showCouponEntryNew: false
+        }
+    },
+    created() {
+        this.contactVisiable = this.pageInfo.infoBarStatus === 1
+        this.activityEntryVisiable = this.initActivityEntry(
+            this.pageInfo.redPacketBeginTime,
+            this.pageInfo.redPacketEndTime
+        )
+        this.showCouponEntryNew = true
+        console.log(this.pageInfo)
+    },
+    methods: {
+        // 拨打电话
+        phoneCall(number) {
+            console.log(number)
+            uni.makePhoneCall({
+                phoneNumber: number //仅为示例
+            })
+        },
+        // 是否展开
+        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
+        },
+        // 跳转到领取优惠券
+        handleNaviagtorToCoupon() {
+            // this.$api.navigateTo('/pages/user/coupon/coupon-collection')
+            this.$api.navigateTo('/pages/h5/article/path?link=https://www.caimei365.com/info/detail-7657-1.html')
+        },
+        handleToCouponExp() {
+            // this.$api.navigateTo('/pages/h5/activity/couponExp')
+            this.$api.navigateTo('/pages/h5/article/path?link=https://www.caimei365.com/help/1038.html')
+        },
+        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;
+        &.regexp {
+            border-radius: 50%;
+            font-size: 20rpx;
+            background: rgba(0, 0, 0, 0.4);
+            justify-content: center;
+            align-items: center;
+            display: flex;
+            color: #fff;
+            text-align: center;
+        }
+        &.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;
+    z-index: 99999;
+    &::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>

pages/h5/activity/quick-operation.vue

@@ -19,7 +19,7 @@
 	import customFloor from '@/components/cm-custom/custom-floor' 		 //自定义导航
 	import templateNav from '@/components/cm-module/pageTemplate/templateNav.vue'
     import pageFloor from './components/active-floor.vue'
-    import  ActivityContact from './components/activity-contact.vue'
+    import  ActivityContact from './components/quick-operation-contact.vue'
 	import authorize from '@/common/config/authorize.js'
 	import wxLogin from '@/common/config/wxLogin.js'