caimei-applets-caimei/components/cm-module/homeIndex/pagesProduct.vue

<template name="pagesProduct">
	<view>
		<view class="container-pages clearfix">
			<view class="tui-block__box tui-mtop__10" v-for="(item, index) in pagesProductList" :key="index">
				<view class="tui-group-name" >
					<view class="tui-group-title">
						<text>{{ item.title }}</text>
					</view>
					<view class="tui-sub__desc">{{ item.detail }}</view>
				</view>
				<scroll-view scroll-x>
					<view class="tui-goods__list">
						<view class="tui-goods__item"v-for="(floor, flIndex) in item.floorData" :key="flIndex"  @tap="NavToDetailPage(floor)" >
							<view class="tui-goods__imgbox">
								<image :src="floor.image" mode="widthFix" class="tui-goods__img"></image>
							</view>
							<view class="tui-pri__box">
								<view class="tui-sale-pri">{{ floor.title }}</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	import { mapState,mapMutations} from 'vuex';
	export default{
		name:"pagesProduct",
		props:{
			list:{
				type:Array
			},
			userIdentity:{
				type:Number
			}
		},
		data() {
			return{
				pagesProductList:[],
			}
		},
		filters: {
			NumFormat:function(text) {//处理金额
				return Number(text).toFixed(2);
			},
		},
		created(){
			this.initData(this.list)
		},
		computed: {
			...mapState(['hasLogin','userInfo','isActivity'])
		},
		methods:{
			initData(res){
				this.pagesProductList = res
			},
			NavToDetailPage(floor) {//跳转
				/**
				 * 页面跳转类型
				 * 1、二级页面,2、搜索项目仪器,3、直播页面,4、自由页面,5、商品详情,6、仪器项目详情,7、供应商主页
				 * 8、专题活动页,9、二手市场介绍,10、二手商品列表,11、二手商品发布,12、商品搜索,13、信息详情
				 * 14、品牌招商介绍页,15、维修保养介绍页,16、首页,17、注册页,18、信息中心,19、供应商列表
				 **/
				 if(floor.linkType){
					 const typeMap = {
					 	1:`/pages/goods/goods-instrument?linkId=${floor.linkParam.id}&title=${floor.title}`,
					 	2:`/pages/goods/instrument-details?id=${floor.linkParam.id}`,
						4:`/h5/pages/activity/activity?id=${floor.linkParam.id}`,
					 	5:`/pages/goods/product?id=${floor.linkParam.id}`,
					 	7:`/supplier/pages/user/my-shop?shopId=${floor.linkParam.id}`,
					 	8:`/h5/pages/activity/activity-list`,
					 	9:`/second/pages/form/introduce`,
					 	10:`/second/pages/product/product-list`,
					 	11:`/second/pages/form/form`,
					 	12:`/pages/search/search?keyWord=${floor.title}`,
					 	13:`/h5/pages/article/page?link=${floor.link}`,
					 	14:`/h5/pages/article/page?link=${floor.link}`,
					 	15:`/h5/pages/article/page?link=${floor.link}`,
					 	17:`/pages/login/register-select`,
					 	18:`/h5/pages/article/page?link=${floor.link}`,
					 	19:`/pages/search/search-supplier?keyWord=${floor.title}`
					 }
					 const url = typeMap[floor.linkType];
					 this.$api.navigateTo(url)
				 }
			}
		}
	}
</script>

<style lang="scss">
	.container-pages{
		width: 100%;
		height: auto;
		float: left;
		background-color: #F7F7F7;
		.tui-block__box {
			width: 100%;
			padding: 0 25rpx 25rpx;
			box-sizing: border-box;
			background-color: #F7F7F7;
			border-radius: 20rpx;
			overflow: hidden;
		}
		.tui-mtop__10 {
			margin-top: 10rpx;
		}
		.tui-group-name {
			width: 100%;
			height: 92rpx;
			padding: 20rpx 0;
		}
		.tui-group-title{
			width: 100%;
			float: left;
			font-size: 34rpx;
			font-weight: bold;
			text-align: left;
			line-height: 49rpx;
			color: #333;
		}
		.tui-sub__desc {
			width: 100%;
			float: left;
			color: rgba(153,153,153,0.9);
			font-size: $font-size-26;
		}
		.tui-goods__list {
			display: flex;
			align-items: center;
		}
		.tui-goods__item {
			background-color: #fff;
			width: 200rpx;
			height: 290rpx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			flex-shrink: 0;
			margin-right: 12rpx;
		}
		.tui-goods__imgbox {
			width: 200rpx;
			height: 200rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			box-sizing: border-box;
		}
		.tui-goods__img {
			max-width: 200rpx;
			max-height: 200rpx;
			display: block;
			border-radius: 10rpx 10rpx 0 0;
		}
		.tui-pri__box {
			max-width: 200rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			box-sizing: border-box;
			padding: 0 10rpx;
		}
		.tui-sale-pri {
			display: flex;
			align-items: flex-end;
			padding: 10rpx 0 8rpx;
			box-sizing: border-box;
			font-size: 26rpx;
			line-height: 40rpx;
			color: #666666;
			white-space: normal;
			word-break: break-all;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
		}
	}	
</style>