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 ross" v-if="shopAdvert.length>0">
						<swiper class="tui-goods__ross" 
								circular 
								@change="swiperChange"
								:indicator-dots="false" 
								:autoplay="true"
								:interval="5000"
								:duration="500"
							>
							<swiper-item v-for="(item, index) in shopAdvert" :key="item">
								<view class="tui-goods__ross" @click="NavToDetailPage(item)">
									<image class="ross-image" :src="item.appImage" mode=""></image>
								</view>
							</swiper-item>
						</swiper>
						<view class="swiper__dots-box">
						    <view
						        v-for="(item, idx) in shopAdvert"
						        :key="idx"
						        :class="[idx === current ? 'swiper__dots-long' : 'none']"
						        :data-index="current"
						        class="swiper__dots-item"
						    ></view>
						</view>
					</view>
					<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'
import cmsMixins from '@/mixins/cmsMixins.js'
export default {
	mixins: [cmsMixins],
	name: 'pagesProduct',
	props: {
		templateData: {
			type: Object
		}
	},
	data() {
		return {
			tempData: {},
			current: 0 ,// 切换轮播
			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)
	},
	computed: {
		...mapState(['shopAdvert'])
	},
	methods: {
		initData(data) {
			this.tempData = data
		},
		swiperChange(e) {//轮播图切换
			this.current = e.detail.current
		},
		NavToDetailPage(item) {
            console.log(item)
            // 采美供应商广告图点击量统计
            this.cmsMoudleHits(5, item.id)
			//跳转
			this.$api.FlooryNavigateTo(item)
		},
		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.cmsSysStatistics(4)
			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: '商城首页'
				})
			}
			// 采美埋点首页活动模块数据统计
			this.cmsSysStatistics(3)
			/**
			 * 页面跳转类型
			 * 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?link=${pros.appletsLink}&linkId=${pros.linkParam.id}`,
					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}`,
					20: `/pages/goods/good-floor?linkId=${pros.linkParam.id}&title=${pros.name}`,
					21: '/pages/h5/activity/meobohui',
					22: `/pages/goods/good-floor-temp?linkId=${pros.linkParam.id}&title=${pros.name}`,
					23: `/pages/h5/activity/activity-topic?linkId=${pros.linkParam.id}`, //活动专题页面
					25: '/pages/goods/goods-doc-list', //美业资料
					28: `/pages/h5/article/path?link=${pros.link}`, // 采美认证通
					29: '/pages/user/coupon/coupon-collection' //领券中心
				}
				const url = typeMap[pros.linkType]
				uni.navigateTo({
					url: url
				})
			}
            // 采美活动点击量统计
            this.cmsMoudleHits(3, pros.id)
		},
		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.cmsSysStatistics(2)
			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;
		&.ross{
			padding: 0;
			position: relative;
			.swiper__dots-box{
				position: absolute;
				bottom: 30rpx;
				left: 0;
				right: 0;
				/* #ifndef APP-NVUE */
				display: flex;
				/* #endif */
				flex: 1;
				flex-direction: row;
				justify-content: center;
				align-items: center;
				.swiper__dots-item{
					width: 8rpx;
					height: 8rpx;
					border-radius: 100%;
					margin-left: 6px;
					background-color:rgba(255,255,255,.7);
				}
				.swiper__dots-long{
					width: 35rpx;
					height: 8rpx;
					border-radius: 4rpx;
					background-color: #ffff;
					transition: all 0.4s;
				}
			}
		}
		.tui-goods__ross{
			width: 307rpx;
			height: 460rpx;
			text-align: center;
			line-height: 460rpx;
			color: #fff;
			font-size: 40rpx;
			float: left;
			border-radius: 16rpx;
			.ross-image{
				width: 100%;
				height: 100%;
				border-radius: 16rpx;
				display: block;
			}
		}
	}
	.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>