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>精彩直播</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){
				 this.$api.navigateTo(`/h5/pages/article/path?link=${LINK}`)
			},
			NewActivityList(){
				this.$api.navigateTo('/h5/pages/activity/activity-list')
			},
			NewActivityListPath(pros){
				this.$api.FlooryNavigateTo(pros)
			},
			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){
				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>