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" @tap="seckillList(3)" v-for="(floor, index) in item.floorData" :key="index">
							<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:[
					{
						"id":6,
						"type":null,
						"title":"品牌仪器",
						"detail":"科医人 赛诺龙 路创丽 Jeisys 华熙生物",
						"link":null,
						"subFloors":null,
						"floorData":[
							{
								"id":19,
								"status":null,
								"title":"脸部抗衰仪器系列",
								"detail":null,
								"link":"http://www.caimei365.com/cmpage/info-1-22.html",
								"image":"https://img.caimei365.com/group1/M00/03/C2/Cmis2F-b03iAbm6AAAB-3AQ2ab4270.jpg",
								"beginTime":null,
								"endTime":null
							},
							{
								"id":23,
								"status":null,
								"title":"脱毛嫩肤仪器系列",
								"detail":null,
								"link":"https://www.caimei365.com/cmpage/info-1-20.html",
								"image":"https://img.caimei365.com/group1/M00/03/B3/Cmis2F9R9kaAE5-iAACBMZJBjPU450.jpg",
								"beginTime":null,
								"endTime":null
							},
							{
								"id":22,
								"status":null,
								"title":"瘦身塑形仪器系列",
								"detail":null,
								"link":"https://www.caimei365.com/cmpage/info-1-49.html",
								"image":"https://img.caimei365.com/group1/M00/03/B2/Cmis2F9R9HeAP5lxAACLzIoow4k828.jpg",
								"beginTime":null,
								"endTime":null
							},
							{
								"id":56,
								"status":null,
								"title":"激光仪器系列",
								"detail":null,
								"link":"https://www.caimei365.com/cmpage/info-1-228.html",
								"image":"https://img.caimei365.com/group1/M00/03/B2/Cmis2F9R9GuAQslKAABsHxQEqMs728.jpg",
								"beginTime":null,
								"endTime":null
							},
							{
								"id":55,
								"status":null,
								"title":"光子嫩肤仪器系列",
								"detail":null,
								"link":"https://www.caimei365.com/cmpage/info-1-227.html",
								"image":"https://img.caimei365.com/group1/M00/03/B3/Cmis2F9R9IWAPcPfAACGRRPiWNI482.jpg",
								"beginTime":null,
								"endTime":null
							}
						]
					},
					{
						"id":10,
						"type":null,
						"title":"科学护肤品",
						"detail":"敏感肌  痘痘肌  黑色素  多效修复  净化角质",
						"link":null,
						"subFloors":null,
						"floorData":[
							{
								"id":45,
								"status":null,
								"title":"华熙米蓓尔皮肤护理系列",
								"detail":null,
								"link":"https://www.caimei365.com/product/search/list/0-0-0-1-0.html?wd=%25E7%25B1%25B3%25E8%2593%2593%25E5%25B0%2594&amp;searchTypeID=0",
								"image":"https://img.caimei365.com/group1/M00/03/B2/Cmis2F9R6kGAedqnAAEFz7A20Dk764.jpg",
								"beginTime":null,
								"endTime":null
							},
							{
								"id":26,
								"status":null,
								"title":"优斐斯液体敷料系列",
								"detail":null,
								"link":"https://www.caimei365.com/supplier/prolist-1285.html?brandID=67",
								"image":"https://img.caimei365.com/group1/M00/03/B2/Cmis2F9R6fiALawUAAC9Gw_OU98595.jpg",
								"beginTime":null,
								"endTime":null
							},
							{
								"id":29,
								"status":null,
								"title":"肌本演绎舒缓系列",
								"detail":null,
								"link":"https://www.caimei365.com/web/supplier/view/supplierHomePage.jsp?shopId=1248",
								"image":"https://img.caimei365.com/group1/M00/03/B2/Cmis2F9R6bmAaIdDAAD3eoag-y4911.jpg",
								"beginTime":null,
								"endTime":null
							},
							{
								"id":57,
								"status":null,
								"title":"上海汇融舜华颜冻干安瓶",
								"detail":null,
								"link":"https://www.caimei365.com/web/supplier/view/supplierHomePage.jsp?shopId=1259",
								"image":"https://img.caimei365.com/group1/M00/03/B2/Cmis2F9R6ZSACbCsAACzgFjQRcs111.jpg",
								"beginTime":null,
								"endTime":null
							},
							{
								"id":62,
								"status":null,
								"title":"韩国恩盛VITAL水光面膜",
								"detail":null,
								"link":"https://www.caimei365.com/product-3893.html",
								"image":"https://img.caimei365.com/group1/M00/03/D1/Cmis21-aHICADWnZAAGWiXX_syA466.jpg",
								"beginTime":null,
								"endTime":null
							}
						]
					},
					{
						"id":11,
						"type":null,
						"title":"高端院用产品",
						"detail":"皮肤护理  紧致抗衰  玻尿酸补水嫩肤 ",
						"link":null,
						"subFloors":null,
						"floorData":[
							{
								"id":32,
								"status":null,
								"title":"德玛莉肌活系列",
								"detail":null,
								"link":"https://www.caimei365.com/supplier/prolist-1267.html",
								"image":"https://img.caimei365.com/group1/M00/03/B4/Cmis2F9XMo2AELI3AAO-S150ml8816.jpg",
								"beginTime":null,
								"endTime":null
							},
							{
								"id":58,
								"status":null,
								"title":"美生美稚龄长效童颜",
								"detail":null,
								"link":"https://www.caimei365.com/product-3669.html",
								"image":"https://img.caimei365.com/group1/M00/03/B2/Cmis2F9R6tqAb9oFAAEnv5BPpTA032.jpg",
								"beginTime":null,
								"endTime":null
							},
							{
								"id":61,
								"status":null,
								"title":"BIOLINE高端护肤系列",
								"detail":null,
								"link":"https://www.caimei365.com/supplier/index.html?id=1225",
								"image":"https://img.caimei365.com/group1/M00/03/BF/Cmis2F-Gcn6AKqTSAAEhEKsbcVs589.jpg",
								"beginTime":null,
								"endTime":null
							},
							{
								"id":31,
								"status":null,
								"title":"肌本演绎高端护肤系列",
								"detail":null,
								"link":"https://www.caimei365.com/web/supplier/view/supplierHomePage.jsp?shopId=1248",
								"image":"https://img.caimei365.com/group1/M00/03/B2/Cmis2F9R6qyAB2CTAAC4XyL7zAg816.jpg",
								"beginTime":null,
								"endTime":null
							},
							{
								"id":51,
								"status":null,
								"title":"优斐斯护肤系列",
								"detail":null,
								"link":"https://www.caimei365.com/supplier/prolist-1285.html",
								"image":"https://img.caimei365.com/group1/M00/03/B2/Cmis2F9R6qOAREllAADzyGgdFoY829.jpg",
								"beginTime":null,
								"endTime":null
							}
						]
					},
					{
						"id":4,
						"type":null,
						"title":"术后修护",
						"detail":"皮肤屏障修复 净肤  美白 私密养护",
						"link":null,
						"subFloors":null,
						"floorData":[
							{
								"id":60,
								"status":null,
								"title":"肌本演绎修护系列",
								"detail":null,
								"link":"https://www.caimei365.com/supplier/index.html?id=1248",
								"image":"https://img.caimei365.com/group1/M00/03/BF/Cmis2F-GcJCAWAqdAB7ucSzYvvA841.jpg",
								"beginTime":null,
								"endTime":null
							},
							{
								"id":59,
								"status":null,
								"title":"优斐斯修护系列",
								"detail":null,
								"link":"https://www.caimei365.com/supplier/index.html?id=1285",
								"image":"https://img.caimei365.com/group1/M00/03/BF/Cmis2F-GcFqAXiioAAFxGLPuidY392.jpg",
								"beginTime":null,
								"endTime":null
							},
							{
								"id":36,
								"status":null,
								"title":"伯纳赫点斗修护系列",
								"detail":null,
								"link":"https://www.caimei365.com/cmpage/info-1-132.html",
								"image":"https://img.caimei365.com/group1/M00/03/B3/Cmis2F9R_5eAOfXIAADU3Nytmv0342.jpg",
								"beginTime":null,
								"endTime":null
							},
							{
								"id":47,
								"status":null,
								"title":"Reyoungel瑞漾修护系列",
								"detail":null,
								"link":"https://www.caimei365.com/supplier/prolist-1211.html?brandID=0",
								"image":"https://img.caimei365.com/group1/M00/03/3C/Cmis21y-xz2AHSu0AAGcagKhNL0844.jpg",
								"beginTime":null,
								"endTime":null
							},
							{
								"id":53,
								"status":null,
								"title":"UPLANT宫龄修护系列",
								"detail":null,
								"link":"https://www.caimei365.com/supplier/prolist-1247.html",
								"image":"https://img.caimei365.com/group1/M00/03/5C/Cmis211CTB2ARsSXAACVJxRbLsc158.jpg",
								"beginTime":null,
								"endTime":null
							}
						]
					},
					{
						"id":12,
						"type":null,
						"title":"导入液 针剂 ",
						"detail":"水光导入液 塑形针剂 配套耗材",
						"link":null,
						"subFloors":null,
						"floorData":[
							{
								"id":50,
								"status":null,
								"title":"青春抗衰动能素",
								"detail":null,
								"link":"https://www.caimei365.com/cmpage/info-1-182.html",
								"image":"https://img.caimei365.com/group1/M00/03/B3/Cmis2F9R-XKAGQppAADFs1u-igo687.jpg",
								"beginTime":null,
								"endTime":null
							},
							{
								"id":39,
								"status":null,
								"title":"无针水光导入液",
								"detail":null,
								"link":"https://www.caimei365.com/cmpage/info-1-138.html",
								"image":"https://img.caimei365.com/group1/M00/03/B3/Cmis2F9R-WmAJ48rAAChfUHq0jE879.jpg",
								"beginTime":null,
								"endTime":null
							},
							{
								"id":43,
								"status":null,
								"title":"补水 塑形针剂",
								"detail":null,
								"link":"https://www.caimei365.com/cmpage/info-1-141.html",
								"image":"https://img.caimei365.com/group1/M00/03/B3/Cmis2F9R-V2ADyOEAAEnv5BPpTA478.jpg",
								"beginTime":null,
								"endTime":null
							},
							{
								"id":40,
								"status":null,
								"title":"小气泡溶液",
								"detail":null,
								"link":"https://www.caimei365.com/cmpage/info-1-139.html",
								"image":"https://img.caimei365.com/group1/M00/03/B3/Cmis2F9R-VCACzDVAADJ7-QlA04237.jpg",
								"beginTime":null,
								"endTime":null
							},
							{
								"id":42,
								"status":null,
								"title":"治疗头",
								"detail":null,
								"link":"https://www.caimei365.com/cmpage/info-1-142.html",
								"image":"https://img.caimei365.com/group1/M00/01/17/Cmis21vESJGAJ-L8AACdGTWUK_Y617.jpg",
								"beginTime":null,
								"endTime":null
							}
						]
					},
					{
						"id":3,
						"type":null,
						"title":"项目仪器",
						"detail":"紧致抗衰 私密养护 美白祛斑 减脂塑形",
						"link":null,
						"subFloors":null,
						"floorData":[
							{
								"id":11,
								"status":null,
								"title":"除皱抗衰项目系列",
								"detail":null,
								"link":"http://www.caimei365.com/cmpage/info-1-39.html",
								"image":"https://img.caimei365.com/group1/M00/03/B3/Cmis2F9SAH6ASXTuAAB-HRqRRMI866.jpg",
								"beginTime":null,
								"endTime":null
							},
							{
								"id":10,
								"status":null,
								"title":"美白祛斑项目系列",
								"detail":null,
								"link":"http://www.caimei365.com/cmpage/info-1-38.html",
								"image":"https://img.caimei365.com/group1/M00/03/9A/Cmis2F8H3g6AZrebAAB-P2l3KJQ806.jpg",
								"beginTime":null,
								"endTime":null
							},
							{
								"id":9,
								"status":null,
								"title":"祛妊娠纹项目系列",
								"detail":null,
								"link":"http://www.caimei365.com/cmpage/info-1-40.html",
								"image":"https://img.caimei365.com/group1/M00/03/9A/Cmis2F8H3gWASntuAADIG70r2WM840.jpg",
								"beginTime":null,
								"endTime":null
							},
							{
								"id":7,
								"status":null,
								"title":"瘦身塑形项目系列",
								"detail":null,
								"link":"http://www.caimei365.com/cmpage/info-1-7.html",
								"image":"https://img.caimei365.com/group1/M00/03/B3/Cmis2F9SDIyADjOuAAChTjRFOmI030.jpg",
								"beginTime":null,
								"endTime":null
							},
							{
								"id":6,
								"status":null,
								"title":"私密养护项目系列",
								"detail":null,
								"link":"http://www.caimei365.com/cmpage/info-1-41.html",
								"image":"https://img.caimei365.com/group1/M00/03/9A/Cmis2F8H3fOAE8UeAABaHH4JaDo889.jpg",
								"beginTime":null,
								"endTime":null
							}
						]
					},
					{
						"id":5,
						"type":null,
						"title":"会所常用品",
						"detail":"面膜粉 洁面巾 卸妆棉 按摩精油",
						"link":null,
						"subFloors":null,
						"floorData":[
							{
								"id":12,
								"status":null,
								"title":"按摩精油",
								"detail":null,
								"link":"http://www.caimei365.com/product/search/list/0-0-0-1-0.html?wd=%25E6%258C%2589%25E6%2591%25A9%25E7%25B2%25BE%25E6%25B2%25B9&amp;searchTypeID=0",
								"image":"https://img.caimei365.com/group1/M00/03/B3/Cmis2F9SCp6AbxEmAACsLXphp3o046.jpg",
								"beginTime":null,
								"endTime":null
							},
							{
								"id":13,
								"status":null,
								"title":"软膜粉",
								"detail":null,
								"link":"https://www.caimei365.com/product/search/list/0-0-0-1-0.html?wd=%2520%25E8%25BD%25AF%25E8%2586%259C%25E7%25B2%2589&amp;searchTypeID=0",
								"image":"https://img.caimei365.com/group1/M00/03/B3/Cmis2F9SCpiALQVKAADRAwxVJyU552.jpg",
								"beginTime":null,
								"endTime":null
							},
							{
								"id":15,
								"status":null,
								"title":"卸妆棉",
								"detail":null,
								"link":"http://www.caimei365.com/product/search/list/0-0-0-1-0.html?wd=%25E5%258C%2596%25E5%25A6%2586%25E6%25A3%2589&amp;searchTypeID=0",
								"image":"https://img.caimei365.com/group1/M00/03/B3/Cmis2F9SCpGAAnfkAACLsfmvAUM980.jpg",
								"beginTime":null,
								"endTime":null
							},
							{
								"id":14,
								"status":null,
								"title":"无纺布制品",
								"detail":null,
								"link":"http://www.caimei365.com/product/search/list/0-0-0-1-0.html?wd=%25E6%2597%25A0%25E7%25BA%25BA%25E5%25B8%2583&amp;searchTypeID=0",
								"image":"https://img.caimei365.com/group1/M00/03/B3/Cmis2F9SCouABo2yAABoFVyTJ3A443.jpg",
								"beginTime":null,
								"endTime":null
							},
							{
								"id":8,
								"status":null,
								"title":"洁面巾",
								"detail":null,
								"link":"http://www.caimei365.com/product/search/list/0-0-0-1-0.html?wd=%25E6%25B4%2581%25E9%259D%25A2%25E5%25B7%25BE&amp;searchTypeID=0",
								"image":"https://img.caimei365.com/group1/M00/03/B3/Cmis2F9SCoaAf0xsAADEJHhV2oM348.jpg",
								"beginTime":null,
								"endTime":null
							}
						]
					}
				],
			}
		},
		filters: {
			NumFormat:function(text) {//处理金额
				return Number(text).toFixed(2);
			},
		},
		created(){
			this.initData(this.list)
		},
		computed: {
			...mapState(['hasLogin','userInfo','isActivity'])
		},
		methods:{
			initData(res){
				
				console.log(this.hotProductList)
			},
			navToDetailPage(id) {//跳转商品详情页
				this.$api.navigateTo(`/pages/goods/product?id=${id}`)
			}
		}
	}
</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;
			padding: 0 9rpx;
		}
		.tui-goods__imgbox {
			width: 182rpx;
			height: 182rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			box-sizing: border-box;
		}
		.tui-goods__img {
			max-width: 182rpx;
			max-height: 182rpx;
			display: block;
			border-radius: 10rpx;
		}
		.tui-pri__box {
			max-width: 182rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.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>