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

<template>
	<view class="container floor clearfix">
		<view class="navbar-wrap">
			<view class="gosearch-btn" @click="this.$api.navigateTo(clickPath)">
				<view class="search-icon"> <text class="iconfont icon-iconfonticonfontsousuo1"></text> </view>
				<view class="search-text">{{ hotSearchText }}</view>
			</view>
		</view>
		<tui-skeleton
			v-if="skeletonShow"
			backgroundColor="#fafafa"
			borderRadius="10rpx"
			:isLoading="true"
			:loadingType="5"
		></tui-skeleton>
		<!-- 楼层 -->
		<view class="container-section tui-skeleton">
			<template v-if="pageData.floorContent.templateType == '1'">
				<templateA :pageData="pageData" :userIdentity="userIdentity" v-if="isRequest"></templateA>
			</template>
			<template v-if="pageData.floorContent.templateType == '2'">
				<templateB :pageData="pageData" :userIdentity="userIdentity" v-if="isRequest"></templateB>
			</template>
			<template v-if="pageData.floorContent.templateType == '3'">
				<templateC :pageData="pageData" :userIdentity="userIdentity" v-if="isRequest"></templateC>
			</template>
			<template v-if="pageData.floorContent.templateType == '4'">
				<templateD :pageData="pageData" :userIdentity="userIdentity" v-if="isRequest"></templateD>
			</template>
			<template v-if="pageData.floorContent.templateType == '5' || pageData.floorContent.templateType == '6'">
				<templateE :pageData="pageData" :userIdentity="userIdentity" v-if="isRequest"></templateE>
			</template>
			<template v-if="pageData.floorContent.templateType == '7'">
				<templateF :pageData="pageData" :userIdentity="userIdentity" v-if="isRequest"></templateF>
			</template>
		</view>
	</view>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
import templateA from './components/template-floor/templateA.vue'
import templateB from './components/template-floor/templateB.vue'
import templateC from './components/template-floor/templateC.vue'
import templateD from './components/template-floor/templateD.vue'
import templateE from './components/template-floor/templateE.vue'
import templateF from './components/template-floor/templateF.vue'
export default {
	components: {
		templateA,
		templateB,
		templateC,
		templateD,
		templateE,
		templateF
	},
	data() {
		return {
			userId: 0,
			clickPath: '/pages/search/search',
			hotSearchText: '搜索商品/项目仪器',
			userIdentity: 0,
			skeletonShow: true,
			isRequest: false,
			navBarsList: [],
			pageData: {}, //楼层
			floorId: null,
			pageType: null
		}
	},
	onLoad(option) {
		this.floorId = Number(option.floorId)
		uni.setNavigationBarTitle({ title: option.title })
		this.initGetStotage(option.pageType)
	},
	computed: {
		...mapState(['hasLogin', 'userInfo', 'identity'])
	},
	methods: {
		async initGetStotage(pageType) {
			// 初始化
			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.GetHomeFloorContentDetails(pageType)
		},
		GetHomeFloorContentDetails(pageType) {
			//楼层查看更多
			if (pageType == '1') {
				this.CommonService.GetHomeFloorContentDetails({ userId: this.userId, floorId: this.floorId, source: 2 })
					.then(response => {
						this.pageData = response.data
						this.skeletonShow = false
						this.isRequest = true
					})
					.catch(error => {
						this.$util.msg(error.msg, 2000)
					})
			} else {
				this.CommonService.GePageFloorContentDetails({ userId: this.userId, centreId: this.floorId, source: 2 })
					.then(response => {
						this.pageData = response.data
						this.skeletonShow = false
						this.isRequest = true
					})
					.catch(error => {
						this.$util.msg(error.msg, 2000)
					})
			}
		}
	},
	onPullDownRefresh() {
		setTimeout(() => {
			this.GetHomeFloorContentDetails(this.pageType)
			uni.stopPullDownRefresh()
		}, 200)
	},
	onShow() {}
}
</script>

<style lang="scss">
page {
	background-color: #ffffff;
}
.container-home {
	width: 100%;
	height: auto;
}
.container-section {
	width: 100%;
	height: auto;
	background-color: #f7f7f7;
	box-sizing: border-box;
	padding: 24rpx;
}
.navbar-wrap {
	width: 100%;
	height: 116rpx;
	box-sizing: border-box;
	background: #ffffff;
	padding: 25rpx 24rpx;
	.gosearch-btn {
		width: 100%;
		height: 100%;
		border-radius: 40rpx;
		font-size: 28rpx;
		line-height: 66rpx;
		color: #8a8a8a;
		background: #f7f7f7;
		position: relative;
		box-sizing: border-box;
		padding-left: 66rpx;
		.search-icon {
			width: 66rpx;
			height: 66rpx;
			position: absolute;
			left: 0;
			top: 2rpx;
			text-align: center;
			line-height: 66rpx;
			.icon-iconfonticonfontsousuo1 {
				margin: 0 6rpx;
				font-size: $font-size-34;
				color: #8a8a8a;
				z-index: 10;
			}
		}
		.search-text {
			font-size: $font-size-24;
			line-height: 66rpx;
			color: #8a8a8a;
		}
	}
}
</style>