caimei-applets-caimei/h5/pages/activity/activity-floorMore.vue

<template>
	<view class="container floor clearfix">
		<view class='navbar-wrap' v-if="showSearch"> 
			<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	="isRequest" :loadingType="5"></tui-skeleton>
		<!-- 楼层 -->
		<view class="container-section tui-skeleton">
			<!-- 图片模板 -->
			<template v-if="pageData && pageData.floorContent.templateType == '8'">
				<pictureD :pageData="pageData" :userIdentity="userIdentity" :flag="true" v-if="isRequest"></pictureD>
			</template>
			<template v-if="pageData && pageData.floorContent.templateType == '10'">
				<pictureF :pageData="pageData" :userIdentity="userIdentity" :flag="true" v-if="isRequest"></pictureF>
			</template>
			<!-- 文章列表 -->
			<template v-if="pageData && pageData.floorContent.templateType == '3'">
				<articleA :pageData="pageData" :userIdentity="userIdentity" :flag="true" v-if="isRequest"></articleA>
			</template>
			<template v-if="pageData && pageData.floorContent.templateType == '4'">
				<articleB :pageData="pageData" :userIdentity="userIdentity" :flag="true" v-if="isRequest"></articleB>
			</template>
			<template v-if="pageData && pageData.floorContent.templateType == '6'">
				<articleD :pageData="pageData" :userIdentity="userIdentity" :flag="true" v-if="isRequest"></articleD>
			</template>
			<!-- 产品列表 -->
			<template v-if="pageData && pageData.floorContent.templateType == '11'">
				<productI :pageData="pageData" :userIdentity="userIdentity" v-if="isRequest"></productI>
			</template>
			<template v-if="pageData && pageData.floorContent.templateType == '12'">
				<productJ :pageData="pageData" :userIdentity="userIdentity" v-if="isRequest"></productJ>
			</template>
			<template v-if="pageData && pageData.floorContent.templateType == '13'">
				<productK :pageData="pageData" :userIdentity="userIdentity" v-if="isRequest"></productK>
			</template>
			<template v-if="pageData && pageData.floorContent.templateType == '14'">
				<productG :pageData="pageData" :userIdentity="userIdentity" v-if="isRequest"></productG>
			</template>
			<template v-if="pageData && pageData.floorContent.templateType == '15'">
				<productD :pageData="pageData" :userIdentity="userIdentity" v-if="isRequest"></productD>
			</template>
			<template v-if="pageData && pageData.floorContent.templateType == '16'">
				<productC :pageData="pageData" :userIdentity="userIdentity" v-if="isRequest"></productC>
			</template>
			<template v-if="pageData && pageData.floorContent.templateType == '17'">
				<productB :pageData="pageData" :userIdentity="userIdentity" v-if="isRequest"></productB>
			</template>
			<template v-if="pageData && pageData.floorContent.templateType == '18'">
				<productA :pageData="pageData" :userIdentity="userIdentity" v-if="isRequest"></productA>
			</template>
			<template v-if="pageData && pageData.floorContent.templateType == '19' || pageData.floorContent.templateType == '20' ">
				<productE :pageData="pageData" :userIdentity="userIdentity" v-if="isRequest"></productE>
			</template>
		</view>
	</view>
</template>

<script>
	import { mapState,mapMutations} from 'vuex';
	//引入产品模板
	import productA from '@/components/cm-module/pageFloorTemplate/templateA.vue'
	import productB from '@/components/cm-module/pageFloorTemplate/templateB.vue'
	import productC from '@/components/cm-module/pageFloorTemplate/templateC.vue'
	import productD from '@/components/cm-module/pageFloorTemplate/templateD.vue'
	import productE from '@/components/cm-module/pageFloorTemplate/templateE.vue'
	import productG from '@/components/cm-module/pageFloorTemplate/templateG.vue'
	import productI from '@/components/cm-module/pageFloorTemplate/templateI.vue'
	import productJ from '@/components/cm-module/pageFloorTemplate/templateJ.vue'
	import productK from '@/components/cm-module/pageFloorTemplate/templateK.vue'
	//引入图片模板
	import pictureD from '@/components/cm-module/pcitureTemplate/templateD.vue'
	import pictureF from '@/components/cm-module/pcitureTemplate/templateF.vue'
	//引入图文模板
	import articleA from '@/components/cm-module/articleTemplate/templateA.vue'
	import articleB from '@/components/cm-module/articleTemplate/templateB.vue'
	import articleD from '@/components/cm-module/articleTemplate/templateD.vue'
	export default{
		components:{
			productA,
			productB,
			productC,
			productD,
			productE,
			productG,
			productI,
			productJ,
			productK,
			pictureD,
			pictureF,
			articleA,
			articleB,
			articleD
		},
		data(){
			return{
				clickPath:'/search/pages/search/search',
				hotSearchText:'搜索商品/项目仪器',	
				userIdentity:0,
				skeletonShow:true,
				isRequest:false,
				navBarsList:[],
				pageData:{},//楼层
				floorId:null,
				pageType:null,
				userID:'',
				noSearch:['3','4','6','8','10'],
				showSearch:true
			}
		},
		onLoad(option) {
			this.pageType = option.pageType
			this.floorId = Number(option.floorId)
			uni.setNavigationBarTitle({title:option.title});
			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.GetHomeFloorContentDetails(this.pageType);
			}).catch(error =>{
				this.GetHomeFloorContentDetails(this.pageType);
			})
		},
		computed: {
			...mapState(['hasLogin','userInfo','identity'])
		},
		methods:{
			checkShowSearch(templateType){
				const result = this.noSearch.indexOf(templateType)
				if(result !== -1){
					this.showSearch = false
				}else {
					this.showSearch = true
				}
			},
			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
						this.checkShowSearch(this.pageData.floorContent.templateType)
						console.log(this.pageData);
					}).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>