caimei-applets-caimei/pages/login/supplier_login.vue

<template>
    <view>
        <view class="supplier_login"><login-menu :menuList="menuList" @scrollPage="scrollPage" ref="login-menu" /></view>
        <view class="container">
            <scroll-view
                class="scrollview"
                @scroll="scrollView"
                scroll-y="true"
                :scroll-into-view="activeMenu"
                :scroll-with-animation="true"
            >
                <view id="item0">
                    <marke-service :bannersList="bannerList">
                        <template #supplier-title>
                            <supplier-title title="全生命周期陪跑服务" subtitle="采美，更专业的美业数字化营销服务" />
                        </template>
                    </marke-service>
                </view>
                <view id="item1">
                    <Solution :isShareTimeline="isShareTimeline" @solutionModal="solutionModal">
                        <template #supplier-title>
                            <supplier-title title="解决方案" subtitle="满足企业全方位需求" />
                        </template>
                    </Solution>
                </view>
                <view id="item2">
                    <basic-operation>
                        <template #supplier-title>
                            <supplier-title title="基础运营产品" subtitle="使企业走向数字化的基石" />
                        </template>
                    </basic-operation>
                </view>
                <view id="item3">
                    <scenario-market>
                        <template #supplier-title>
                            <supplier-title title="场景营销工具" subtitle="多样化工具，全方位助力您的企业目标" />
                        </template>
                    </scenario-market>
                </view>
                <view id="item4">
                    <success-cases :successList="successList">
                        <template #supplier-title>
                            <supplier-title
                                title="成功案例"
                                subtitle="了解已合作品牌的真实推广案例，借鉴成功经验<br />助力有效推广，实现商业目标"
                            />
                        </template>
                    </success-cases>
                </view>
                <view id="item5">
                    <caimei-about>
                        <template #supplier-title>
                            <supplier-title
                                title="关于采美"
                                subtitle="了解采美，合作共赢"
                                titlecolor="#ffffff"
                                subtitlecolor="#ffffff"
                            />
                        </template>
                    </caimei-about>
                </view>
                <view id="item6">
                    <growth-community @playVideo="playVideo" :videoList="videoList" :articelList="articelList">
                        <template #supplier-title>
                            <supplier-title title="增长社区" subtitle="数十年资深美业运营经验，教你快速成长" />
                        </template>
                    </growth-community>
                </view>
            </scroll-view>
        </view>
        <view class="supplier-slide" ref="supplierSlide" :style="{zIndex: isModalShow ? -1 : 20}">
            <view class="user-cicle" @click="supplierLogin" v-if="!hasLogin || userInfo.userIdentity === 3">
                <image
                    style="width: 48rpx;height: 48rpx;"
                    src="https://static.caimei365.com/app/img/supplier-login/userDefault_new.png"
                    mode=""
                ></image>
                <view class="userLogin">{{ hasLogin ? userInfo.name : '登录/注册'}}</view>
            </view>
            <view class="slide">
                <view
                    class="slide-item"
                    v-for="item in slideList"
                    :key="item.id"
                    v-if="item.isShow"
                    @click="handlerChange(item)"
                >
                    <image class="slide-img" :src="item.slideBg" mode=""></image>
                    <view class="slide-title">{{ item.title }}</view>
                </view>
            </view>
        </view>
        <tui-modal :show="show" custom @cancel="cancel">
            <view class="tui-modal-custom">
                <view class="tui-modal-custom-text">周一至周五 9:00~1800</view>
                <view class="tui-modal-custom-phone" @click=";(modal = true), (show = false)">131-6478-0233</view>
            </view>
        </tui-modal>
        <tui-modal :show="isPhone" class="qrcode" custom @cancel="cancel">
            <view class="tui-modal-custom-qrcode">
                <image
                    style="width: 100%;height: 100%;"
                    show-menu-by-longpress="true"
                    src="https://static.caimei365.com/app/img/supplier-login/kefu_qr.jpg"
                    mode=""
                ></image>
            </view>
        </tui-modal>
        <tui-modal :show="modal" custom @cancel="cancel">
            <view class="tui-modal-custom-call">
                <view class="tui-modal-custom-text">
                    确定拨打
                    <text style="color: #FF5B00;font-weight: bold;margin: 0 6rpx;">131-6478-0233</text>
                    吗？
                </view>
                <view class="modal-btns">
                    <tui-button
                        class="cancel"
                        type="black"
                        @click="modal = false"
                        height="72rpx"
                        :size="28"
                        plain
                        shape="circle"
                    >
                        取消
                    </tui-button>
                    <tui-button
                        class="determine"
                        height="72rpx"
                        :size="28"
                        type="warning"
                        shape="circle"
                        @click="handleClick"
                    >
                        确定
                    </tui-button>
                </view>
            </view>
        </tui-modal>
        <cm-video :show="showVideo" @closeClick="closeVideo" :videoObj="videoObj" />
    </view>
</template>

<script>
import LoginMenu from './components/supplier-loginMenu.vue'
import MarkeService from './components/markeServices.vue'
import SupplierTitle from './components/supplier-title.vue'
import Solution from './components/solution.vue'
import BasicOperation from './components/basicOperationsProducts.vue'
import ScenarioMarket from './components/scenarioMarketing.vue'
import SuccessCases from './components/successCases.vue'
import CaimeiAbout from './components/caimei-about.vue'
import GrowthCommunity from './components/growthCommunity.vue'
import CmVideo from './components/caimei-video.vue'
import { mapState } from 'vuex'
export default {
    components: {
        LoginMenu,
        MarkeService,
        SupplierTitle,
        Solution,
        BasicOperation,
        ScenarioMarket,
        SuccessCases,
        CaimeiAbout,
        GrowthCommunity,
        CmVideo
    },
    data() {
        return {
            menuList: [
                {
                    id: 0,
                    title: '营销服务'
                },
                {
                    id: 1,
                    title: '解决方案'
                },
                {
                    id: 2,
                    title: '运营产品'
                },
                {
                    id: 3,
                    title: '营销工具'
                },
                {
                    id: 4,
                    title: '成功案例'
                },
                {
                    id: 5,
                    title: '关于采美'
                },
                {
                    id: 6,
                    title: '增长社区'
                }
            ],
            activeMenu: '', // 滚动到指定位置
            show: false,
            isPhone: false,
            modal: false,
            showVideo: false,
            videoObj: {},
            slideList: [
                {
                    id: 1,
                    title: '电话联系',
                    slideBg: 'https://static.caimei365.com/app/img/supplier-login/phone.png',
                    isShow: true
                },
                {
                    id: 2,
                    title: '微信客服',
                    slideBg: 'https://static.caimei365.com/app/img/supplier-login/qrcode.png',
                    isShow: true
                },
                {
                    id: 3,
                    title: '',
                    slideBg: 'https://static.caimei365.com/app/img/supplier-login/scrolltop.png',
                    isShow: false
                }
            ],
            successList: [],
            videoList: [],
            articelList: [],
            bannerList: [],
            isShareTimeline: false, // 是否从朋友圈分享
            isModalShow: false,
        }
    },
    computed: {
        ...mapState(['hasLogin', 'userInfo'])
    },
    watch: {},
    onLoad(options) {
        // 是否从朋友圈分享进入
        if (options.isShareTimeline) {
            this.isShareTimeline = options.isShareTimeline
        } 
        // 点击链接
        uni.$on('changeLink', e => {
            setTimeout(() => {
                this.activeMenu = e
            }, 500)
        })
        uni.$on('handlerChangeLink', e => {
            setTimeout(() => {
                this.$refs['login-menu'].activeMenu = e
                this.$refs['login-menu'].isActive = Number(e.split('item')[1])
                this.activeMenu = e
            }, 500)
        })
    },
    mounted() {
        this.getSupplierLanding()
    },
    onShareAppMessage(res) {
        return {
            title: '更专业的美业数字化营销服务',
            path: '/pages/login/supplier_login'
        }
    },
    // 分享朋友圈
    onShareTimeline() {
        return {
            title: '更专业的美业数字化营销服务',
            path: '/pages/login/supplier_login',
            query: 'isShareTimeline=' + true
        }
    },
    methods: {
        // 滚动事件
        scrollPage($event) {
            this.activeMenu = $event
        },
        scrollView(e) {
            this.activeMenu = ''
            if (e.detail.scrollTop < 50) {
                this.slideList[2].isShow = false
            } else {
                this.slideList[2].isShow = true
            }
        },
        handlerChange(e) {
            const obj = {
                1: () => (this.show = true),
                2: () => (this.isPhone = true),
                3: () => (this.activeMenu = 'item0')
            }
            obj[e.id]()
        },
        hideAlert() {
            this.show = false
        },
        // 拨打电话
        handleClick() {
            uni.makePhoneCall({
                phoneNumber: '131-6478-0233' //仅为示例
            })
            this.modal = false
        },
        cancel() {
            this.modal = false
            this.show = false
            this.isPhone = false
        },
        // 视频播放
        playVideo($event) {
            this.videoObj = $event
            this.showVideo = true
        },
        // 视频关闭
        closeVideo() {
            this.showVideo = false
        },
        // supplierLogin 登陆
        supplierLogin() {
            if (this.hasLogin) {
                uni.navigateTo({
                    url: '/pages/supplier/user/supplier?shopId=' + this.userInfo.shopId
                })
            } else {
                uni.navigateTo({
                    url: '/pages/login/login?state=1'
                })
            }
        },
        // solutionModal 方案解决模块
        solutionModal(val) {
            this.isModalShow = val
        },
        async getSupplierLanding() {
            try {
                const { data } = await this.UserService.supplierLoading({ source: 2 })
                this.bannerList = data.banner
                this.successList = data.landing.filter(e => e.type == '1')
                this.videoList = data.landing.filter(e => e.type == '2')
                this.articelList = data.landing.filter(e => e.type == '3')
            } catch (error) {
                console.log(error)
            }
        }
    }
}
</script>

<style lang="scss" scoped>
.container {
    position: absolute;
    bottom: 0;
    height: auto;
}
.scrollview {
    width: 100%;
    height: calc(100vh - 120rpx);
    background-color: #fff;
    #item1 {
        z-index: 20;
    }
}
.supplier-slide {
    position: fixed;
    right: 40rpx;
    box-sizing: border-box;
    width: 100rpx;
    bottom: 100rpx;
    .user-cicle {
        width: 100rpx;
        height: 150rpx;
        background: url(https://static.caimei365.com/app/img/supplier-login/userbg.png) center no-repeat;
        border-radius: 36px;
        margin-bottom: 40rpx;
        box-shadow: 0rpx 6rpx 16rpx 0rpx rgba(51, 51, 51, 0.16);
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-direction: column;
        font-size: 18rpx;
        color: white;
        box-sizing: border-box;
        padding: 34rpx 0;
        .userLogin {
            width: 100%;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            text-align: center;
        }
    }
    .slide {
        width: 100rpx;
        overflow: hidden;
        border-radius: 50rpx;
        background-color: #ff5b00;
        box-shadow: 0rpx 6rpx 24rpx 0rpx rgba(255, 91, 0, 0.3);
        .slide-img {
            width: 45rpx;
            height: 45rpx;
        }
        .slide-item {
            height: 140rpx;
            width: 100rpx;
            display: flex;
            flex-direction: column;
            align-items: center;
            box-sizing: border-box;
            padding-top: 30rpx;
            border-bottom: 1rpx solid rgba(255, 255, 255, 0.3);
            .slide-title {
                margin-top: 10rpx;
                font-size: 20rpx;
                color: #fff;
            }
        }
        .slide-item:nth-child(3) {
            padding-top: 45rpx !important;
        }
    }
}
.tui-modal-custom {
    padding: 30rpx 80rpx;
}
.tui-modal-custom-text {
    text-align: center;
    color: #666666;
    font-size: 28rpx;
}
.tui-modal-custom-phone {
    margin-top: 62rpx;
    text-align: center;
    color: #ff5b00;
    border-bottom: 1px solid #ff5b00;
    font-size: 40rpx;
    font-weight: bold;
}
.tui-modal-custom-call {
    font-size: 32rpx;
    color: #666666;
    padding-top: 50rpx;
}
.qrcode {
    ::v-deep .tui-modal-box {
        width: auto !important;
        padding: 6rpx !important;
        border-radius: 0 !important;
    }
    .tui-modal-custom-qrcode {
        width: 412rpx;
        height: 460rpx;
    }
}
.modal-btns {
    display: flex;
    justify-content: space-between;
    margin-top: 62rpx;
    .cancel {
        width: 200rpx !important;
        color: #666666 !important;
    }
    .determine {
        width: 200rpx !important;
    }
}
</style>