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="page.type == 1">
				<templateA :pageData="page" :userIdentity="userIdentity"></templateA>
			</template>	 
			<template v-if="page.type == 2">
				<templateB :pageData="page" :userIdentity="userIdentity"></templateB>
			</template>	 
			<template v-if="page.type == 3">
				<templateC :pageData="page" :userIdentity="userIdentity"></templateC>
			</template>	 
			<template v-if="page.type == 4">
				<templateD :pageData="page" :userIdentity="userIdentity"></templateD>
			</template>	 
			<template v-if="page.type == 5 || page.type == 6">
				<templateE :pageData="page" :userIdentity="userIdentity"></templateE>
			</template>	 
			<template v-if="page.type == 7">
				<templateF :pageData="page" :userIdentity="userIdentity"></templateF>
			</template>	 
		</view>
	</view>
</template>

<script>
	import { mapState,mapMutations} from 'vuex';
	import templateA from '@/components/cm-module/pageFloorTemplate/templateA.vue'
	import templateB from '@/components/cm-module/pageFloorTemplate/templateB.vue'
	import templateC from '@/components/cm-module/pageFloorTemplate/templateC.vue'
	import templateD from '@/components/cm-module/pageFloorTemplate/templateD.vue'
	import templateE from '@/components/cm-module/pageFloorTemplate/templateE.vue'
	import templateF from '@/components/cm-module/pageFloorTemplate/templateF.vue'
	import { pageList } from '@/common/json/data.json.js' //本地数据
	
	export default{
		components:{
			templateA,
			templateB,
			templateC,
			templateD,
			templateE,
			templateF
		},
		data(){
			return{
				clickPath:'/pages/search/search',
				hotSearchText:'搜索商品/供应商/项目仪器',	
				userIdentity:0,
				skeletonShow:true,
				navBarsList:[],
				page:pageList[5],//楼层
				isRequest:false
			}
		},
		onLoad(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)
				})
			}
		},
		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;
		box-sizing: border-box;
		padding: 0 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>