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>	
		<!-- ross广告图区 -->
		<view class="container-ross" v-if="isRossShow">
			<view class="ross-image" @click="this.$api.navigateTo('/pages/supplier/user/my-shop?shopId=1378')">
				<image class="image" src="https://static.caimei365.com/app/img/ross/ross-image@2x.jpg" mode=""></image>
			</view>
		</view>
		<!-- 楼层 -->
		<view class="container-section tui-skeleton">
			<page-floor :list="pageList" :userIdentity="userIdentity" :pageType="2" v-if="isRequest"></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 authorize from '@/common/config/authorize.js'
	import wxLogin from "@/common/config/wxLogin.js"
	
	export default{
		components:{
			customFloor,
			templateNav,
			pageFloor
		},
		data(){
			return{
				userId:0,
				shopId:0,
				userIdentity:0,
				skeletonShow:true,
				headerBtnPosi:	this.setHeaderBtnPosi(), //获取设备顶部胶囊高度
				systeminfo: this.setSysteminfo(),		 //获取设备信息
				CustomBar:this.CustomBar,// 顶部导航栏高度
				navBarsList:[],
				pageList:[],//楼层
				isRequest:false,
				isScrollTop:false,
				pageId:'',
				typeSort:'',
			}
		},
		computed: {
			...mapState(['hasLogin','userInfo','isRossShow','isWxAuthorize'])
		},
		onLoad(option) {
			if(option.type =='share'){
				wxLogin.wxLoginAuthorize()
			}
			this.pageId = option.linkId
			this.$api.getComStorage('userInfo').then((resolve) =>{
				this.userId = resolve.userId ? resolve.userId : 0;
				this.shopId = resolve.shopId ? resolve.shopId : 0;
				this.userIdentity = resolve.userIdentity
				this.GetInstrumentPageData();
			}).catch(error =>{
				this.GetInstrumentPageData();
			})
			setTimeout(()=>{
				this.skeletonShow = false
			},2000)
		},
		methods:{
			GetInstrumentPageData(){//获取楼层数据
				this.CommonService.GetInstrumentPageData({pageId:this.pageId,userId:this.userId,source:2}).then(response =>{
					let data = response.data
					this.typeSort = data.typeSort
					this.pageList = data.floorList
					uni.setStorageSync('pageLabel',`${data.contentLabel}`)
					this.GetHomeInit()
				}).catch(error =>{
					this.$util.msg(error.msg,2000)
				})
			},
			GetHomeInit(){//金刚区分类
				this.CommonService.GetFirstClassly({typeSort:this.typeSort,source:'crm'}).then(response =>{
					this.navBarsList = response.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)
		},
		onShareAppMessage(res){//分享转发
			if (res.from === 'button') {
		      // 来自页面内转发按钮
		    }
			return {
			  title: '采美-一站式生/医美采购服务平台',
			  path: `pages/goods/good-floor?type=share&linkId=${this.pageId}`
			}
		},
		onShow() {
			
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #FFFFFF;
	}
	.container-home{
		width: 100%;
		height: auto;
	}
	.container-ross{
		width: 100%;
		height: 264rpx;
		box-sizing: border-box;
		padding: 24rpx 24rpx 0 24rpx;
		float: left;
		background-color: #F5F5F5;
		.ross-image{
			width: 100%;
			height: 100%;
			line-height: 240rpx;
			background-color: #F3920D;
			border-radius: 16rpx;
			text-align: center;
			font-size: 80rpx;
			color: #FFFFFF;
			.image{
				width: 100%;
				height: 100%;
				border-radius: 16rpx;
				display: block;
			}
		}
	}
	.container-section{
		width: 100%;
		height: auto;
		background-color: #F7F7F7;
	}
</style>