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" />
		<tui-skeleton
			v-if="!isRequest"
			backgroundColor="#fafafa"
			borderRadius="10rpx"
			:isLoading="true"
			:loadingType="5"
		/>
		<template v-else>
			<view class="container-home tui-skeleton">
				<!-- 金刚区菜单 -->
				<templateNav :list="navBarsList" v-if="isRequest" />
			</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" />
			</view>
			<!-- 侧边 -->
			<scroll-top :isScrollTop="isScrollTop" :bottom="50" />
		</template>
	</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,
			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.GetInstrumentPageDataa(this.pageId)
	},
	methods: {
		async GetInstrumentPageDataa(pageId) {
			//获取楼层数据
			const userInfo = await this.$api.getStorage()
			this.userId = userInfo.userId ? userInfo.userId : 0
			this.shopId = userInfo.shopId ? userInfo.shopId : 0
			this.userIdentity = userInfo.userIdentity
			this.CommonService.GetInstrumentPageData({ pageId: pageId, userId: this.userId, source: 2 })
				.then(response => {
					let data = response.data
					uni.setStorageSync('pageLabel', `${data.contentLabel}`)
					this.GetHomeInit(data.typeSort, data.floorList)
				})
				.catch(error => {
					this.$util.msg(error.msg, 2000)
				})
		},
		//金刚区分类
		async GetHomeInit(typeSort, floorList) {
			try{
				const res = await this.CommonService.GetFirstClassly({ typeSort: typeSort, source: 'crm' })
				this.navBarsList = res.data
				this.pageList = floorList
				this.isRequest = true
			}catch(error){
				console.log('error',error)
			}
		},
		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>