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 class="tui-goods__item" v-if="tempData.baikeList.length > 0">
                    	<view class="tui-group-name" @click="NavArticlePath('https://www.caimei365.com/encyclopedia/product.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="(item, flIndex) in tempData.baikeList" :key="flIndex" @click="NavArticlePath(item.link)">
                    		<view class="tui-goods__imgbox" v-if="flIndex === 0">
                    			<image :src="item.image" mode="" class="tui-goods__img"></image>
                    			<view class="tui-goods__name">{{ item.name }}</view>
                    		</view>
                    		<view class="tui-goods__text" v-if="flIndex > 0">{{ item.name }}</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(`/pages/h5/article/path?link=${LINK}`)
			},
			NewActivityList(){
				this.$api.navigateTo('/pages/h5/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:`/pages/h5/activity/activity?title=${pros.title}&link=${pros.appletsLink}`,
					 	5:`/pages/goods/product?id=${pros.linkParam.id}`,
					 	// 7:`/pages/supplier/user/my-shop?shopId=${pros.linkParam.id}`,
					 	8:'/pages/h5/activity/activity-list',
					 	9:'/pages/second/form/introduce',
					 	10:'/pages/second/product/product-list',
					 	11:'/pages/second/form/form',
					 	12:`/pages/search/search?keyWord=${pros.linkParam.keyword}`,
					 	13:`/pages/h5/article/path?link=${pros.link}`,
					 	14:`/pages/h5/article/path?link=${pros.link}`,
					 	15:`/pages/h5/article/path?link=${pros.link}`,
					 	17:'/pages/login/register-select',
					 	18:`/pages/h5/article/path?link=${pros.link}`,
					 	19:`/pages/search/search-supplier?keyWord=${pros.linkParam.keyword}`
					}
					const url = typeMap[pros.linkType]
					uni.navigateTo({
					  	url:url
					})
				}
			},
			LiveGoPath(){//查看直播
				this.$api.navigateTo('/pages/h5/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(`/pages/h5/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;
		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>