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" v-if="tempData.liveList != ''">
						<view class="tui-group-name" @click="LiveGoPath">
							<view class="tui-group-title"><text>采美LIVE</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" @click="LiveGoPathPros(live)">
							<view class="tui-goods__imgbox" v-if="flIndex === 0">
								<image :src="live.homePageImage" 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" v-if="tempData.cmImageList != ''">
						<view class="tui-group-name" @click="NewActivityList">
							<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" @click="NewActivityListPath(cmImage)">
							<view class="tui-goods__imgbox" v-if="flIndex === 0">
								<image :src="cmImage.homePageImage" 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" v-if="tempData.infoList != ''">
						<view class="tui-group-name" @click="NavArticlePath('https://www.caimei365.com/info/center-3-1.html')">
							<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" @click="NavArticlePath(info.link)">
							<view class="tui-goods__imgbox" v-if="flIndex === 0">
								<image :src="info.homePageImage" 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.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
			},
			NavArticlePath(LINK){
				// 友盟埋点首页文章模块点击
				if(process.env.NODE_ENV != 'development'){
					this.$uma.trackEvent('Um_Event_HomeArticleTemplateClick', {
						Um_Key_ArticleLink: `${LINK}`,
						Um_Key_PageName: '首页文章模块',
						Um_Key_SourcePage: '商城首页',
					})
				}
				this.$api.navigateTo(`/h5/pages/article/path?link=${LINK}`)
			},
			NewActivityList(){
				this.$api.navigateTo('/h5/pages/activity/activity-list')
			},
			NewActivityListPath(pros){
				// 友盟埋点首页活动模块点击
				if(process.env.NODE_ENV != 'development'){
					this.$uma.trackEvent('Um_Event_HomeActivityTemplateClick', {
						Um_Key_ActivityName: `${pros.title}`,
						Um_Key_PageName: '首页活动模块',
						Um_Key_SourcePage: '商城首页',
					})
				}
				/**
				 * 页面跳转类型
				 * 1、二级页面,2、搜索项目仪器,3、直播页面,4、自由页面,5、商品详情,6、仪器项目详情,7、供应商主页
				 * 8、专题活动页,9、二手市场介绍,10、二手商品列表,11、二手商品发布,12、商品搜索,13、信息详情
				 * 14、品牌招商介绍页,15、维修保养介绍页,16、首页,17、注册页,18、信息中心,19、供应商列表
				 **/
				if(pros.linkType){
					console.log(pros.linkType)
					const typeMap = {
					 	1:`/pages/goods/goods-instrument?linkId=${pros.linkParam.id}&title=${pros.name}`,
					 	2:`/pages/goods/instrument-details?id=${pros.linkParam.id}`,
						4:`/h5/pages/activity/activity?title=${pros.title}&link=${pros.appletsLink}`,
					 	5:`/pages/goods/product?id=${pros.linkParam.id}`,
					 	// 7:`/supplier/pages/user/my-shop?shopId=${pros.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:`/search/pages/search/search?keyWord=${pros.linkParam.keyword}`,
					 	13:`/h5/pages/article/path?link=${pros.link}`,
					 	14:`/h5/pages/article/path?link=${pros.link}`,
					 	15:`/h5/pages/article/path?link=${pros.link}`,
					 	17:`/pages/login/register-select`,
					 	18:`/h5/pages/article/path?link=${pros.link}`,
					 	19:`/search/pages/search/search-supplier?keyWord=${pros.linkParam.keyword}`
					}
					const url = typeMap[pros.linkType];
					uni.navigateTo({
					  	url:url
					})
				}
			},
			LiveGoPath(){//查看直播
				this.$api.navigateTo('/h5/pages/article/path-live')
				
				// uni.navigateToMiniProgram({
				// 	appId: 'wx92d650b253f8f2e3',
				// 	path: '/pages/index/index',
				// 	extraData: {
				// 		'data1': 'test'
				// 	},
				// 	envVersion: 'develop',
				// 	success(res) {
				// 		// 打开成功
				// 		console.log(res)
				// 	}
				// })
			},
			LiveGoPathPros(live){
				// 友盟埋点首页直播模块点击
				if(process.env.NODE_ENV != 'development'){
					this.$uma.trackEvent('Um_Event_HomeLiveTemplateClick', {
						Um_Key_LiveName: `${live.liveTitle}`,
						Um_Key_PageName: '首页直播模块',
						Um_Key_SourcePage: '商城首页',
					})
				}
				this.$api.navigateTo(`/h5/pages/article/page-image?title=${live.liveTitle}&image=${live.advertisingImage}`)
			}
		}
	}
</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;
					left:0;
				}
				&.icon-jieshu{
					color: #FFFFFF;
					left:0;
					font-size: 22rpx;
				}
			}
		}
		.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>