caimei-applets-caimei/pages/tabBar/home/index.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>
			<!-- 优惠券入口 -->
			<coupon v-if="isNavRequest && couponEntry == 1"></coupon>
			<!-- 直播 -->
			<page-special :templateData="templateData" v-if="isLiveRequest"></page-special>
			<!-- 新品橱窗 -->
			<hot-floor
				:list="hotListPageFloor"
				:usserIdentity="userIdentity"
				:autoplay="autoplay"
				v-if="isRequest && hotListPageFloor.length > 0"
			></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>
		<!-- 侧边 -->
		<scroll-top :isScrollTop="isScrollTop" :isShowSupplier="true" :bottom="130"></scroll-top>
		<!-- 活动弹窗 -->
		<activityAlert :show="isActivity" @click="handleClick" @cancel="handleCancelClick"></activityAlert>
		<!-- 采美豆提示弹窗 -->
		<activityBean
			v-if="isActivityBean"
			:show="isActivityBean"
			:beansType="beansType"
			:beanNumber="beanNumber"
			@cancel="handleBeanlClick"
		></activityBean>
	</view>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
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 coupon from '@/components/cm-module/homeIndex/coupon.vue'
import pageFloor from '@/components/cm-module/homeIndex/pageFloor.vue'
import hotFloor from '@/components/cm-module/homeIndex/hotFloor.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 activityAlert from '@/components/cm-module/activity/activity.vue'
import activityBean from '@/components/cm-module/activity/activityBean.vue'
import quickOpera from '@/components/cm-module/homeIndex/quickOperation.vue'
import homeMiXins from './index.js'
export default {
	mixins: [ homeMiXins ], 
	components: {
		customer,
		banner,
		navbars,
		notice,
		coupon,
		pageFloor,
		hotFloor,
		Certificate,
		pageSpecial,
		supplierList,
		activityAlert,
		activityBean,
        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,
			clubId: 0,
			clubStatus: '',
			current: 0,
			mode: 'round',
			isLogin: false,
			skeletonShow: true,
			userIdentity: 0,
			flootData: [], // 楼层
			bannerImageList: [], // 轮播
			navBarsList: [], // 导航分类
            quickOpreaList: [], // 快捷运营
			newsList: [], // 公告
			templateData: {},
			hotListPageFloor: [], // 新品橱窗
			pageList: [], // 楼层
			supplierObj: {}, // 供应商列表
			isScrollTop: false,
			isRequest: false,
			isNavRequest: false,
			isLiveRequest: false,
			isActivityBean: false,
			beansType: 1,
			beanNumber: 50,
			couponEntry: 2,
			autoplay: true,
            isScroll: false
		}
	},
	onLoad() {},
    computed: {
        ...mapState(['hasLogin', 'userInfo'])
    },
	onPageScroll(e) {
        if (e.scrollTop > 0) {
            this.isScroll = true
        } else {
            this.isScroll = false
        }
		//实时获取到滚动的值
		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'
		}
	},
	onShow() {
		this.autoplay = true
		this.GetWxAuthorize()
	},
	onHide() {
		this.autoplay = false
	}
}
</script>

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

</style>