caimei-applets-caimei/pages/goods/channel.vue

<template>
	<view class="container clearfix" >
		<tui-skeleton
			v-if="skeletonShow"
			backgroundColor="#fafafa"
			borderRadius="10rpx"
			:isLoading="true"
			:loadingType="5"
		/>
		<template v-else>
			<view class="navbars-content clearfix">
				<view class="nav-item" v-for="(item,index) in list" :key="index" @click="NavToDetailPage(item,index)">
					<view class="icon">
						<image class="icon-image" :src="item.icon" mode="widthFix"></image>
					</view>
					<view class="name">{{ item.name }}</view>
				</view>
			</view>
		</template> 	
	</view>
</template> 

<script>
	import cmsMixins from '@/mixins/cmsMixins.js'
	import { mapState,mapMutations} from 'vuex';
	export default{
		mixins: [cmsMixins],
		data(){
			return{ 
				skeletonShow: true,
				list:[]
			} 
		},
		onLoad(option) {
			
		},
		methods:{
			async getHomeInformation() {
				//初始化首页数据
				try{
					const res = await this.CommonService.GetHomeModulesDataInfo({ source: 2 })
					const data = res.data
					this.list = data.shortcutList || [] // 快捷运营
					setTimeout(() => {
						this.skeletonShow = false
					}, 1000)
				}catch(e){
					//TODO handle the exception
					this.$util.msg(error.msg, 2000)
				}
			},
			// 链接跳转
			NavToDetailPage(pros) {
			    // 采美快捷运营点击量统计
			    this.cmsMoudleHits(4, pros.id)
				this.$api.FlooryNavigateTo(pros)
			},
		},
		onShow() {
			this.getHomeInformation()
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #FFFFFF;
	}
	.navbars-content{
		width: 100%;
		height: auto;
		box-sizing: border-box;
	    padding: 40rpx 0rpx;
		.nav-item{
			width: 25%;
			height: auto;
			float: left;
			margin-bottom: 40rpx;
			.icon{
				width: 100rpx;
				height: 100rpx;
				margin: 0 auto;
				position: relative;
				.icon-image{
					width: 100rpx;
					height: 100rpx;
					display: block;
				}
			}
			.name{
				width: 100%;
				height: 40rpx;
				line-height: 40rpx;
				text-align: center;
				font-size: $font-size-26;
				color: #666666;
			}
		}
	}
</style>