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

<template name="pagesProduct">
	<view>
		<view class="container-pages clearfix">
			<scroll-view scroll-x>
				<view class="tui-goods__list">
					<view class="tui-goods__item">
						<view class="tui-group-name">
							<view class="tui-group-title"><text>精彩直播</text></view>
							<view class="iconfont icon-xiayibu"></view>
						</view>
						<view class="tui-goods__main" :class="flIndex == 0 ? 'one' : ''" v-for="(live, flIndex) in tempData.liveList" :key="flIndex">
							<view class="tui-goods__imgbox" v-if="flIndex === 0">
								<image :src="live.image" mode="" class="tui-goods__img"></image>
								<view class="tui-goods__name">{{ live.liveTitle }}</view>
								<view class="tui-goods__statu">
									<text class="iconfont icon-weikaishi" v-if="live.liveStatus == '1'"></text>
									<image :src="iconLive" mode="widthFix" class="icon-live" v-if="live.liveStatus == '2'"></image>
									<text class="iconfont icon-jieshu" v-if="live.liveStatus == '3'"></text>
									<text>{{ live.liveStatus | statusType }}</text>
								</view>
							</view>
							<view class="tui-goods__text" v-if="flIndex > 0">{{ live.liveTitle }}</view>
						</view>
					</view>
					<view class="tui-goods__item">
						<view class="tui-group-name">
							<view class="tui-group-title"><text>最新活动</text></view>
							<view class="iconfont icon-xiayibu"></view>
						</view>
						<view class="tui-goods__main" :class="flIndex == 0 ? 'one' : ''" v-for="(cmImage, flIndex) in tempData.cmImageList" :key="flIndex">
							<view class="tui-goods__imgbox" v-if="flIndex === 0">
								<image :src="cmImage.image" mode="" class="tui-goods__img"></image>
								<view class="tui-goods__name">{{ cmImage.title }}</view>
							</view>
							<view class="tui-goods__text" v-if="flIndex > 0">{{ cmImage.title }}</view>
						</view>
					</view>
					<view class="tui-goods__item">
						<view class="tui-group-name">
							<view class="tui-group-title"><text>热门文章</text></view>
							<view class="iconfont icon-xiayibu"></view>
						</view>
						<view class="tui-goods__main" :class="flIndex == 0 ? 'one' : ''" v-for="(info, flIndex) in tempData.infoList" :key="flIndex">
							<view class="tui-goods__imgbox" v-if="flIndex === 0">
								<image :src="info.guidanceImage" mode="" class="tui-goods__img"></image>
								<view class="tui-goods__name">{{ info.title }}</view>
							</view>
							<view class="tui-goods__text" v-if="flIndex > 0">{{ info.title }}</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import { mapState,mapMutations} from 'vuex';
	export default{
		name:"pagesProduct",
		props:{
			templateData:{
				type:Object
			}
		},
		data() {
			return{
				tempData:{},
				iconLive:'https://static-b.caimei365.com/app/img/icon/icon-live.gif'
			}
		},
		filters: {
			statusType:function(value) {
				switch (value) {
					case '1':
						return  '未开始';
						break;
					case '2':
						return  '直播中';
						break;
					case '3':
						return  '已结束';
						break;
				}
			},
			NumFormat:function(value) {//处理金额
				return Number(value).toFixed(2);
			},
		},
		created(){
			this.initData(this.templateData)
		},
		methods:{
			initData(data){
				this.tempData = data
			},
			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:508rpx;
		padding: 24rpx;
		float: left;
		background-color: #F7F7F7;
		margin-top: 16rpx;
		box-sizing: border-box;
		background-color: #F7F7F7;
		overflow: hidden;
		display: flex;
		align-items: center;
		.tui-goods__list {
			display: flex;
			align-items: center;
		}
		.tui-goods__item {
			background-color: #fff;
			width: 307rpx;
			height: 460rpx;
			border-radius: 16rpx;
			box-sizing: border-box;
			margin-right: 16rpx;
			padding: 17rpx;
		}
		.tui-group-name{
			width: 100%;
			height: 36rpx;
			float: left;
			margin-bottom: 13rpx;
			.tui-group-title{
				font-size: 26rpx;
				line-height: 36rpx;
				float: left;
				color: #333333;
			}
			.icon-xiayibu{
				font-size: 26rpx;
				line-height: 36rpx;
				float: right;
				color: #909090;
			}
		}
		.tui-goods__main{
			width: 100%;
			height: auto;
			float: left;
			position: relative;
			&.one{
				margin-bottom: 14rpx;
			}
		}
		.tui-goods__imgbox {
			width: 273rpx;
			height: 273rpx;
			box-sizing: border-box;
			border-radius: 8rpx;
		}
		.tui-goods__img {
			max-width: 273rpx;
			max-height: 273rpx;
			border-radius: 8rpx;
			display: block;
		}
		.tui-goods__name{
			width: 100%;
			height: 48rpx;
			float: left;
			line-height: 48rpx;
			box-sizing: border-box;
			padding-left: 12rpx;
			font-size: $font-size-24;
			color: #FFFFFF;
			background-color: rgba(0,0,0,0.4);
			position: absolute;
			bottom: 0;
			left: 0;
			white-space: nowrap;
			text-overflow: ellipsis;
			overflow: hidden;
			border-radius:0 0 8rpx 8rpx;
		}
		.tui-goods__statu{
			padding-left: 45rpx;
			padding-right: 10rpx;
			height: 35rpx;
			position: absolute;
			top: 17rpx;
			left: 17rpx;
			background-color: rgba(0,0,0,0.4);
			border-radius: 18rpx;
			line-height: 35rpx;
			color: #FFFFFF;
			text-align: right;
			font-size: $font-size-20;
			.icon-live{
				width: 17rpx;
				height: 17rpx;
				display: block;
				margin: 0 auto;
				position: absolute;
				left: 15rpx;
				top: 9rpx;
			}
			.iconfont{
				width: 35rpx;
				height: 35rpx;
				line-height: 35rpx;
				display: block;
				position: absolute;
				left: 10rpx;
				font-size: $font-size-26;
				&.icon-weikaishi{
					color: #E56D00;
				}
				&.icon-jieshu{
					color: #333333;
				}
			}
		}
		.tui-goods__text{
			width: 100%;
			height: 44rpx;
			float: left;
			line-height: 44rpx;
			box-sizing: border-box;
			padding-left: 12rpx;
			font-size: $font-size-24;
			color: #666666;
			white-space: nowrap;
			text-overflow: ellipsis;
			overflow: hidden;
			position: relative;
			&::before{
				content: '';
				width: 8rpx;
				height: 8rpx;
				border-radius: 50%;
				background-color: #cccccc;
				position: absolute;
				left: 0;
				top: 18rpx;
			}
		}
	}	
</style>