caimei-applets-caimei/pages/tabBar/home/index.vue

<template>
	<view class="container home clearfix" :style="{ paddingTop: CustomBar + 'px' }">
		<customer ref="customer" :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>
			<!-- 轮播公告 -->
			<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" :bottom="50"></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 tuiSkeleton from '@/components/tui-skeleton/tui-skeleton'
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 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 { mapState, mapMutations } from 'vuex'
export default {
	components: {
		tuiSkeleton,
		customer,
		banner,
		navbars,
		notice,
		coupon,
		pageFloor,
		hotFloor,
		Certificate,
		pageSpecial,
		supplierList,
		activityAlert,
		activityBean
	},
	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: 0,
			flootData: [], // 楼层
			bannerImageList: [], // 轮播
			navBarsList: [], // 导航分类
			newsList: [], // 公告
			templateData: {},
			hotListPageFloor: [], // 新品橱窗
			pageList: [], // 楼层
			supplierObj: {}, // 供应商列表
			isScrollTop: false,
			isRequest: false,
			isNavRequest: false,
			isLiveRequest: false,
			isActivityBean: false,
			beansType: 1,
			beanNumber: 50,
			couponEntry: 2,
			autoplay: true
		}
	},
	onLoad() {},
	computed: {
		...mapState(['hasLogin', 'userInfo', 'identity', 'isActivity', 'isWxAuthorize'])
	},
	methods: {
		...mapMutations(['login', 'logout']),
		async GetWxAuthorize() {
			const wechatCode = await authorize.getCode('weixin') // 根据微信的code获取用户登录状态:1已登录过 -1未登录过
			const getUserInfo = await authorize.getUserInfo('weixin')
			this.UserService.UserLoginAuthApplets({
				code: wechatCode,
				encryptedData: getUserInfo.encryptedData,
				iv: getUserInfo.iv
			})
				.then(response => {
					this.isLogin = true
					this.userID = response.data.userId
					this.userIdentity = response.data.userIdentity
					this.clubStatus = response.data.clubStatus
					this.$store.commit('updateStatus', response.data)
					this.login(response.data)
					uni.setStorageSync('token', response.data.token)
					uni.setStorageSync('unionId', response.data.unionId)
					if (response.data.userIdentity == 1) {
						this.$api.redirectTo('/pages/seller/index/index')
					} else if (response.data.userIdentity === 3) {
						this.$api.redirectTo('/pages/supplier/index/index')
					}
					this.GetInitBeansInfo()
					this.getHomeInformation()
				})
				.catch(error => {
					this.isLogin = false
					this.logout()
					uni.setStorageSync('unionId', error.data.unionId)
					this.$store.commit('updateStatus', error.data)
					this.getHomeInformation()
				})
		},
		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
					this.supplierObj = data.supplierImage
					setTimeout(() => {
						this.isRequest = true
					}, 500)
				})
				.catch(error => {
					this.$util.msg(error.msg, 2000)
				})
		},
		GetInitBeansInfo() {
			//初始化采美豆信息
			this.UserService.GetHomeObtainBeans({ userId: this.userID })
				.then(response => {
					this.beansType = response.data.beansType
					this.beanNumber = response.data.num
					this.isActivityBean = true
				})
				.catch(error => {
					console.log('用户暂无采美豆推送~')
				})
		},
		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.couponEntry = data.couponEntry
					this.newsList = data.annlist
					if (!this.hasLogin && this.couponEntry == 1) {
						if (uni.getStorageSync('isActivitySwitch')) {
							this.$store.commit('setActivity', false)
						} else {
							this.$store.commit('setActivity', true)
						}
					}
					this.GetHomeTopDataInfo()
					this.GetHomeFloorInfo()
					if (this.hasLogin) {
						this.initShoppingCartCount()
					}
					this.isNavRequest = true
				})
				.catch(error => {
					this.$util.msg(error.msg, 2000)
				})
		},
		initShoppingCartCount() {
			// 获取购物车数量
			this.OrderService.ShoppingCartCount({ userId: this.userID }).then(res => {
				this.$store.commit('updateAllNum', res.data)
			})
		},
		handleClick(data) {
			const pageId = 306
			this.$api.navigateTo('/pages/user/coupon/coupon-collection')
			this.$store.commit('setActivity', data)
			uni.setStorageSync('lockTime', Date.now())
			uni.setStorageSync('isActivitySwitch', true)
			// 友盟自定义事件
			// if(process.env.NODE_ENV != 'development'){
			// 	this.$uma.trackEvent('meibohui_click', {
			// 		Um_Key_PageName: '美博会',
			// 		Um_Key_PageCategory: '活动专题页面',
			// 		Um_Key_SourcePage: '首页',
			// 	})
			// }
		},
		handleCancelClick(data) {
			this.$store.commit('setActivity', data)
			uni.setStorageSync('lockTime', Date.now())
			uni.setStorageSync('isActivitySwitch', true)
		},
		handleBeanlClick() {
			this.isActivityBean = false
		}
	},
	onPageScroll(e) {
		//实时获取到滚动的值
		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.modallayer = false
		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>