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

<template>
    <view>
        <view class="supplier_login"><login-menu :menuList="menuList" @scrollPage="scrollPage" /></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>
                        <template #supplier-title>
                            <supplier-title title="全生命周期陪跑服务" subtitle="采美，更专业的美业数字化因营销服务" />
                        </template>
                    </marke-service>
                </view>
                <view id="item1">
                    <Solution>
                        <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>
                        <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">
                        <template #supplier-title>
                            <supplier-title title="增长社区" subtitle="数十年资深美业运营经验，教你快速成长" />
                        </template>
                    </growth-community>
                </view>
            </scroll-view>
        </view>
        <view class="supplier-slide">
            <view class="user-cicle"></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)">153-3889-7365</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%;" src="@/static/supplier-login/qr_code_kefu.png" 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;">153-3889-7365</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"/>
    </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'
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,
            slideList: [
                {
                    id: 1,
                    title: '电话联系',
                    slideBg: require('@/static/supplier-login/phone.png'),
                    isShow: true
                },
                {
                    id: 2,
                    title: '微信客服',
                    slideBg: require('@/static/supplier-login/qrcode.png'),
                    isShow: true
                },
                {
                    id: 3,
                    title: '',
                    slideBg: require('@/static/supplier-login/scrolltop.png'),
                    isShow: false
                }
            ]
        }
    },
    computed: {},
    watch: {},
    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: '153-3889-7365' //仅为示例
            })
            this.modal = false
        },
        cancel() {
            this.modal = false
            this.show = false
            this.isPhone = false
        },
        // 视频播放
        playVideo() {
            this.showVideo = true
        },
        // 视频关闭
        closeVideo() {
            this.showVideo = false
        },
    }
}
</script>

<style lang="scss" scoped>
.container {
    position: absolute;
    bottom: 0;
    height: auto;
}
.scrollview {
    width: 100%;
    height: calc(100vh - 120rpx);
    background-color: #fff;
}
.supplier-slide {
    position: fixed;
    right: 40rpx;
    box-sizing: border-box;
    width: 100rpx;
    bottom: 100rpx;
    z-index: 999;
    .user-cicle {
        width: 100rpx;
        height: 100rpx;
        border-radius: 50%;
        background-color: #fff;
        margin-bottom: 40rpx;
        box-shadow: 0rpx 6rpx 16rpx 0rpx rgba(51, 51, 51, 0.16);
    }
    .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;
            }
        }
    }
}
.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;
    }
    .tui-modal-custom-qrcode {
        width: 412rpx;
        height: 412rpx;
    }
}
.modal-btns {
    display: flex;
    justify-content: space-between;
    margin-top: 62rpx;
    .cancel {
        width: 200rpx !important;
        color: #666666 !important;
    }
    .determine {
        width: 200rpx !important;
    }
}
</style>