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

<template>
    <view class="more">
        <view class="supplier_login"><login-menu ref="login-menu" :menuList="menuList" @scrollPage="scrollPage" /></view>
        <view class="more-bg">
            <image src="https://static.caimei365.com/app/img/supplier-login/growth/banner.png" mode=""></image>
        </view>
        <view class="container">
            <view class="tabs">
                <view class="tab" :class="active === i.id ? 'active' : ''" v-for="i in activeTabs" :key="i.id" @click="handlerTabs(i)">
                    {{ i.title }}
                </view>
            </view>
            <view class="growth-module-list">
                <active-team-com v-for="i in dataList" :key="i.id" :module="i" :active="active" @playVideo="playVideo"/>
            </view>
        </view>
        <cm-video :show="showVideo" @closeClick="closeVideo" :videoObj="videoObj" />
    </view>
</template>

<script>
import LoginMenu from './components/supplier-loginMenu.vue'
import activeTeamCom from './components/activeTeamCom.vue'
import CmVideo from './components/caimei-video.vue'
export default {
    components: {
        LoginMenu,
        activeTeamCom,
        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: '',
            isActive: 6,
            activeTabs: [
                {
                    id: 1,
                    title: '美业企谈'
                },
                {
                    id: 2,
                    title: '干货知识'
                }
            ],
            active: 1,
            dataList: [],
            showVideo: false,
            videoObj: {}
        }
    },
    onLoad (option) {
        this.handlerInit()
        this.active = Number(option.active)
        this.getSupplierLanding(this.active)
    },
    methods: {
        // 滚动事件
        scrollPage($event) {
            this.activeMenu = $event
            uni.$emit('handlerChangeLink', $event)
            uni.navigateBack({ delta: 1 })
        },
        // init
        handlerInit () {
            this.$refs['login-menu'].activeMenu = 'item6'
            this.$refs['login-menu'].isActive = 6
        },
        handlerTabs ($event) {
            this.active = $event.id
            this.getSupplierLanding(this.active)
        },
        async getSupplierLanding(active) {
            try {
                const { data } = await this.UserService.supplierLoading({ source: 2 })
                this.dataList = active === 1 ? data.landing.filter(e => e.type == '2') : data.landing.filter(e => e.type == '3')
            } catch (error) {
                console.log(error)
            }
        },
        // 视频播放
        playVideo($event) {
            this.videoObj = $event
            this.showVideo = true
        },
        // 视频关闭
        closeVideo() {
            this.showVideo = false
        },
    }
}
</script>

<style scoped lang="scss">
.more {
    .more-bg {
        padding-top: 110rpx;
        height: 360rpx;
        image {
            width: 100%;
            height: 100%;
        }
    }
    .container {
        padding: 70rpx 33rpx;
        box-sizing: border-box;
        .tabs {
            padding-bottom: 30rpx;
            align-items: center;
            display: flex;
            box-sizing: border-box;
            .tab {
                color: #666666;
                font-size: 32rpx;
                margin-right: 56rpx;
                &.active {
                    color: #333333;
                    font-weight: bold;
                    border-bottom: 3rpx solid #FF5B00;
                }
            }
        }
        .growth-module-list {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            grid-gap: 20rpx;
        }
    }
}
</style>