caimei-applets-caimei/pages/supplier/components/home.vue

<template>
    <view class="container home clearfix" :style="{ paddingTop: CustomBar + 'px' }">
        <customer ref="customer" :isScroll="isScroll" :navbar-data="nvabarData"></customer>
        <!-- 主页内容 -->
        <tui-skeleton
            v-if="skeletonShow"
            backgroundColor="#fafafa"
            borderRadius="10rpx"
            :isLoading="true"
            :loadingType="5"
        ></tui-skeleton>
        <view class="container-home tui-skeleton">
            <!-- 轮播 -->
            <banner :list="bannerImageList" v-if="isNavRequest"></banner>
            <!-- 金刚区菜单 -->
            <navbars :list="navBarsList" v-if="isNavRequest"></navbars>
            <!-- 快捷运营 -->
            <quick-opera :list="quickOpreaList" v-if="isNavRequest && quickOpreaList.length > 0"/>
            <!-- 轮播公告 -->
            <notice :list="newsList" v-if="isNavRequest && newsList.length > 0"></notice>
            <!-- 直播 -->
            <page-special :templateData="templateData" v-if="isLiveRequest"></page-special>
            <!-- 新品橱窗 -->
            <hot-floor :list="hotListPageFloor" :usserIdentity="userIdentity" v-if="isRequest"></hot-floor>
        </view>
        <!-- 楼层 -->
        <view class="container-section tui-skeleton">
            <page-floor :list="pageList" :userIdentity="userIdentity" :pageType="1" v-if="isRequest"></page-floor>
            <supplier-list :supplierObj="supplierObj" v-if="isRequest"></supplier-list>
        </view>
        <!-- 资质证书 -->
        <Certificate v-if="isRequest"></Certificate>
        <!-- 活动弹窗 -->
        <activityAlert :show="isActivity" @click="handleClick" @cancel="handleCancelClick"></activityAlert>
        <!-- 侧边 -->
        <scroll-top :isScrollTop="isScrollTop" :isShowSupplier="true" :bottom="130"></scroll-top>
    </view>
</template>

<script>
import authorize from '@/common/config/authorize.js'
import customer from '@/components/cm-module/homeIndex/customer.vue'
import banner from '@/components/cm-module/homeIndex/banner.vue'
import navbars from '@/components/cm-module/homeIndex/navbars.vue'
import notice from '@/components/cm-module/homeIndex/notice.vue'
import hotFloor from '@/components/cm-module/homeIndex/hotFloor.vue'
import pageFloor from '@/components/cm-module/homeIndex/pageFloor.vue'
import Certificate from '@/components/cm-module/homeIndex/certificate.vue'
import pageSpecial from '@/components/cm-module/homeIndex/pageSpecial.vue'
import supplierList from '@/components/cm-module/homeIndex/supplierList.vue'
import quickOpera from '@/components/cm-module/homeIndex/quickOperation.vue'
import { mapState, mapMutations } from 'vuex'
export default {
    components: {
        customer,
        banner,
        navbars,
        notice,
        hotFloor,
        pageFloor,
        Certificate,
        pageSpecial,
        supplierList,
        quickOpera
    },
    data() {
        return {
            nvabarData: {
                //顶部自定义导航
                showCapsule: 1, // 是否显示左上角图标  1表示显示  0表示不显示,
                showSearch: 0,
                title: '采美采购商城', // 导航栏 中间的标题
                haveBack: false,
                textLeft: this.$store.state.isIphone,
                textColor: '#FFFFFF'
            },
            CustomBar: this.CustomBar, // 顶部导航栏高度
            userID: 0,
            clubStatus: '',
            current: 0,
            mode: 'round',
            modallayer: false,
            isLogin: false,
            skeletonShow: true,
            userIdentity: '',
            flootData: [], //楼层
            bannerImageList: [], //轮播
            navBarsList: [], //导航分类
            newsList: [], // 公告
            templateData: {},
            hotListPageFloor: [], // 新品橱窗
            pageList: [], //楼层
            supplierObj: {}, //供应商列表
            isScrollTop: false,
            isRequest: false,
            isNavRequest: false,
            isLiveRequest: false,
            isScroll: false,
            quickOpreaList: []
        }
    },
    created() {
        this.$api.getStorage().then(resolve => {
            this.userID = resolve.userId ? resolve.userId : 0
            this.userIdentity = resolve.userIdentity
            this.getHomeInformation()
        })
    },
    filters: {
        NumFormat: function(text) {
            //处理金额
            return Number(text).toFixed(2)
        }
    },
    computed: {
        ...mapState(['hasLogin', 'userInfo', 'isActivity'])
    },
    methods: {
        ...mapMutations(['login', 'logout']),
        GetHomeTopDataInfo() {
            //直播、活动、文章模块
            this.CommonService.GetHomeTopDataInfo({ source: 2 })
                .then(response => {
                    this.templateData = response.data
                    this.isLiveRequest = true
                })
                .catch(error => {
                    this.$util.msg(error.msg, 2000)
                })
        },
        GetHomeFloorInfo() {
            //初始化首页楼层数据
            this.CommonService.GetHomeDataInfo({ userId: this.userID, source: 2 })
                .then(response => {
                    let data = response.data
                    this.pageList = data.homePageFloor
                    this.hotListPageFloor = data.pageFloorList
                    console.log('hotListPageFloor', this.hotListPageFloor)
                    this.supplierObj = data.supplierImage
                    this.isRequest = true
                })
                .catch(error => {
                    this.$util.msg(error.msg, 2000)
                })
        },
        getHomeInformation() {
            //初始化首页数据
            this.CommonService.GetHomeModulesDataInfo({ source: 2 })
                .then(res => {
                    let data = res.data
                    this.bannerImageList = data.bannerList
                    this.mallPageModules = data.mallPageModules
                    this.skeletonShow = false
                    this.navBarsList = data.topMenuList
                    this.newsList = data.annlist
                    this.quickOpreaList = data.shortcutList || []
                    this.isNavRequest = true
                    this.GetHomeTopDataInfo()
                    this.GetHomeFloorInfo()
                })
                .catch(error => {
                    this.$util.msg(error.msg, 2000)
                })
        },
        handleClick(data) {
            this.$api.navigateTo('/pages/h5/activity/meobohui')
            this.$store.commit('setActivity', data)
        },
        handleCancelClick(data) {
            this.$store.commit('setActivity', data)
        }
    },
    onPageScroll(e) {
        //实时获取到滚动的值
        if (e.scrollTop > 0) {
            this.isScroll = true
        } else {
            this.isScroll = false
        }
        console.log(e, this.isScroll)
        if (e.scrollTop > 50) {
            this.inputActive = 'fixed'
        } else {
            this.inputActive = 'float'
        }
        if (e.scrollTop > 400) {
            this.isScrollTop = true
        } else {
            this.isScrollTop = false
        }
    },
    onPullDownRefresh() {
        //下拉刷新
        this.getHomeInformation()
        uni.stopPullDownRefresh()
    },
    onShareAppMessage(res) {
        //分享转发
        if (res.from === 'button') {
            // 来自页面内转发按钮
        }
        return {
            title: '生美医美正品采购服务平台',
            path: 'pages/tabBar/home/index',
            imageUrl: 'https://static.caimei365.com/app/img/bg/min-banner.jpg'
        }
    }
}
</script>

<style lang="scss">
page {
    background-color: #ffffff;
}
.container-section {
    width: 100%;
    height: auto;
    background-color: #f7f7f7;
}
</style>