caimei-applets-caimei/pages/goods/good-floor.vue

<template>
	<view class="container floor clearfix" :style="{paddingTop:CustomBar+'px'}">
		<custom-floor   :systeminfo='systeminfo' 
						:navbar-data='nvabarData' 
						:headerBtnPosi ="headerBtnPosi">
		</custom-floor>
		<tui-skeleton v-if="skeletonShow" backgroundColor="#fafafa" borderRadius="10rpx" :isLoading	="true" :loadingType="5"></tui-skeleton>
		<view class="container-home tui-skeleton">
			<!-- 金刚区菜单 -->
			<templateNav :list="navBarsList" v-if="isRequest"></templateNav>
		</view>	
		<!-- 楼层 -->
		<view class="container-section tui-skeleton">
			<page-floor :list="pageList" :userIdentity="userIdentity"></page-floor>
		</view>
		<!-- 侧边 -->
		<scroll-top :isScrollTop="isScrollTop" :bottom="50"></scroll-top>
	</view>
</template>

<script>
	import { mapState,mapMutations} from 'vuex';
	import customFloor from '@/components/cm-custom/custom-floor' 		 //自定义导航
	import templateNav from '@/components/cm-module/pageTemplate/templateNav.vue'
	import pageFloor from '@/components/cm-module/homeIndex/pageFloor.vue'
	import { pageList } from '@/common/json/data.json.js' //本地数据
	
	export default{
		components:{
			customFloor,
			templateNav,
			pageFloor
		},
		data(){
			return{
				userIdentity:0,
				skeletonShow:true,
				headerBtnPosi:	this.setHeaderBtnPosi(), //获取设备顶部胶囊高度
				systeminfo: this.setSysteminfo(),		 //获取设备信息
				CustomBar:this.CustomBar,// 顶部导航栏高度
				navBarsList:[],
				pageList:pageList,//楼层
				isRequest:false,
				isScrollTop:false,
			}
		},
		onLoad(option) {
			console.log(option)
			this.$api.getComStorage('userInfo').then((resolve) =>{
				this.clubStatus = resolve.clubStatus
				this.userID = resolve.userID ? resolve.userID : 0;
				this.shopId = resolve.shopID ? resolve.shopID : 0;
				this.userIdentity = resolve.userIdentity
				// this.getListFromServer();
			}).catch(error =>{
				// this.getListFromServer();
			})
			setTimeout(()=>{
				this.skeletonShow = false
			},2000)
		},
		computed: {
			...mapState(['hasLogin','userInfo','identity'])
		},
		methods:{
			GetHomeInit(){//金刚区分类
				this.CommonService.GetFirstClassly({typeSort:1,source:'crm'}).then(response =>{
					let data = response.data
					this.navBarsList = data
					this.isRequest =true
				}).catch(error =>{
					this.$util.msg(error.msg,2000)
				})
			},
			setHeaderBtnPosi(){
				// 获得胶囊按钮位置信息
				let headerBtnPosi = uni.getMenuButtonBoundingClientRect();
				return headerBtnPosi
			},
			setSysteminfo(){
				let systeminfo;
				uni.getSystemInfo({ // 获取设备信息
					success: (res) => {
						systeminfo = res
					},
				})
				return systeminfo
			},
		},
		onPageScroll(e){//实时获取到滚动的值
			if(e.scrollTop>400){
				this.isScrollTop = true
			}else{
				this.isScrollTop = false
			}	
		},
		onPullDownRefresh() {
			setTimeout(() => {
				uni.stopPullDownRefresh()
			}, 200)
		},
		onShow() {
			this.GetHomeInit()
		}
	}
</script>

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