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
				console.log(this.hotProductList)
			},
			NavToDetailPage(floor) {//跳转
				console.log(floor)
				switch(floor.linkType){
					case 1://二级页面
						this.$api.navigateTo(`/pages/goods/goods-instrument?linkId=${floor.linkParam.id}&title=${floor.title}`)
						break;
					case 2://搜索项目仪器 
						this.$api.navigateTo(`/pages/search/search-instrument?linkId=${floor.linkParam.id}`)
						break;
					case 3://直播页面
						this.$api.navigateTo(``)
						break;
					case 4://自由页面
						this.$api.navigateTo(`/pages/goods/goods-instrument?linkId=${floor.linkParam.id}`)
						break;
					case 5://商品详情
						this.$api.navigateTo(`/pages/goods/product?id=${floor.linkParam.id}`)
						break;
					case 6://仪器项目详情
						this.$api.navigateTo(`/pages/goods/instrument-details?id=${floor.linkParam.id}`)
						break;
					case 7://供应商主页 
						this.$api.navigateTo(`/supplier/pages/user/my-shop?shopId=${floor.linkParam.id}`)
						break;
					case 8://专题活动页
						this.$api.navigateTo(`/h5/pages/activity/activity-list`)
						break;
					case 9://二手市场介绍
						this.$api.navigateTo(`/second/pages/form/introduce`)
						break;
					case 10://二手商品列表
						this.$api.navigateTo(`/second/pages/product/product-list`)
						break;
					case 11://二手商品发布
						this.$api.navigateTo(`/second/pages/form/form`)
						break;
					case 12://商品搜索
						this.$api.navigateTo(`/pages/search/search?keyWord=${floor.title}`)
						break;
					case 13://信息详情
						this.$api.navigateTo(`/pages/goods/goods-instrument?linkId=${floor.linkParam.id}`)
						break;
					case 14://品牌招商介绍页 
						this.$api.navigateTo(`/pages/goods/goods-instrument?linkId=${floor.linkParam.id}`)
						break;
					case 15://维修保养介绍页 
						this.$api.navigateTo(`/pages/goods/goods-instrument?linkId=${floor.linkParam.id}`)
						break;
					case 16://首页
						this.$api.switchTabTo(`/pages/tabBar/home/index`)
						break;
					case 17://注册页 
						this.$api.navigateTo(`/pages/login/register-select`)
						break;
					case 18://信息中心
						this.$api.navigateTo(`/pages/login/register-select`)
						break;
					case 19://供应商列表
						this.$api.navigateTo(`/pages/login/register-select`)
						break;
				}
			}
		}
	}
</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>