caimei-applets-caimei/pages/goods/goods-shop-list.vue

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

<script>
	import { mapState,mapMutations} from 'vuex'
	export default{
		data(){
			return{ 
				skeletonShow: true,
				list:[]
			} 
		},
		onLoad(option) {
			
		},
		methods:{
			async getHomeDataInfo() {
				//初始化首页数据
				try{
                    const userInfo = await this.$api.getStorage()
					const res = await this.CommonService.GetHomeDataInfo({ userId: userInfo.userId, source: 2 })
					const data = res.data.supplierImage
					this.list = data.qualitySupplierList || [] // 供应商列表
					setTimeout(() => {
						this.skeletonShow = false
					}, 1000)
				}catch(e){
					//TODO handle the exception
					this.$util.msg(error.msg, 2000)
				}
			},
			// 链接跳转
			NavToDetailPage(pros) {
			   this.$api.navigateTo(`/pages/supplier/user/my-shop?shopId=${pros.linkParam.id}`)
			},
		},
		onShow() {
			this.getHomeDataInfo()
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #F7F7F7;
	}
	.shop-content{
		width: 100%;
		height: auto;
		box-sizing: border-box;
	    padding: 24rpx 24rpx;
		.shop-item{
			width: 220rpx;
			height: 280rpx;
			float: left;
			margin-right: 21rpx;
			margin-bottom: 21rpx;
			background-color: #FFFFFF;
			&:nth-child(3n) {
			    margin-right: 0;
			}
			.icon{
				width: 220rpx;
				height: 220rpx;
				margin: 0 auto;
				position: relative;
				.icon-image{
					width: 220rpx;
					height: 220rpx;
					display: block;
				}
			}
			.name{
				width: 100%;
				height: 60rpx;
				line-height: 60rpx;
				font-size: $font-size-24;
				text-align: center;
				color: #666666;
				background-color: #f9f9f9;
				float: left;
				box-sizing: border-box;
				padding: 0 20rpx;
				white-space: normal;
				word-break: break-all;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 1;
			}
		}
	}
</style>