caimei-applets-caimei/components/cm-module/pageTemplate/templateC.vue

<template>
	<view class="section_page_main clearfix">
		<view class="floor-item ad_01">
			<image
				class="item-img-gg"
				:src="floorData.floorContent.appletsAdsImage1"
				@click="
					BannerNavigateTo(
						floorData.floorContent.linkType1,
						floorData.floorContent.linkParam1.id ? floorData.floorContent.linkParam1.id : '',
						floorData.floorContent.adsLink1,
						floorData.floorContent.linkParam1.keyword ? floorData.floorContent.linkParam1.keyword : ''
					)
				"
				mode="aspectFill"
			>
			</image>
		</view>
		<view class="floor-item ad_02">
			<image
				class="item-img-gg"
				:src="floorData.floorContent.appletsAdsImage2"
				@click="
					BannerNavigateTo(
						floorData.floorContent.linkType2,
						floorData.floorContent.linkParam2.id ? floorData.floorContent.linkParam2.id : '',
						floorData.floorContent.adsLink2,
						floorData.floorContent.linkParam2.keyword ? floorData.floorContent.linkParam2.keyword : ''
					)
				"
				mode="aspectFill"
			>
			</image>
		</view>
		<view
			class="floor-item ad_04 clearfix"
			v-for="(item, idx) in floorData.floorImageList"
			v-if="idx < 3"
			:key="idx"
			@click.stop="navToDetailPage(item)"
		>
			<image class="item-img tui-skeleton-fillet" :src="item.image" mode="aspectFill"></image>
			<view class="floor-item_tag" v-if="item.listType == 2">
				<text>{{ item.label }}</text>
			</view>
			<view class="floor-item-content">
				<view class="title tui-skeleton-rect">
					<text class="mclap-tag" v-if="item.product.beautyActFlag == '1'">美博会</text>
					<text class="mclap" :class="item.product.beautyActFlag == '1' ? 'indent' : ''"
						>{{ item.name }}
					</text>
				</view>
				<view class="floor-item-price" v-if="item.listType == 1">
					<view class="floor-item-act">
						<view class="coupon-tags" v-if="item.product.couponsLogo">优惠券</view>
						<template v-if="userIdentity === 3">
							<template v-if="item.product.actStatus === 1">
								<view class="floor-tags" v-if="PromotionsFormat(item.product.promotions)">
									{{ item.product.promotions.name }}
									<text
										v-if="hasLogin && item.product.priceFlag != 1 && item.product.shopID == shopId"
										>:￥{{ item.product.price | NumFormat }}</text
									>
								</view>
								<view class="floor-tags" v-else>{{ item.product.promotions.name }}</view>
							</template>
							<template v-if="item.product.actStatus === 0 && item.product.ladderPriceFlag === 1">
								<view class="floor-tags">阶梯价格</view>
							</template>
						</template>
						<template v-else>
							<template v-if="item.product.actStatus === 1">
								<view class="floor-tags" v-if="PromotionsFormat(item.product.promotions)">
									{{ item.product.promotions.name }}
									<text v-if="hasLogin && item.product.priceFlag != 1"
										>:￥{{ item.product.price | NumFormat }}</text
									>
								</view>
								<view class="floor-tags" v-else>{{ item.product.promotions.name }}</view>
							</template>
							<template v-if="item.product.actStatus === 0 && item.product.ladderPriceFlag === 1">
								<view class="floor-tags">阶梯价格</view>
							</template>
						</template>
					</view>
					<view v-if="hasLogin">
						<template v-if="item.product.productCategory == 1">
							<template v-if="userIdentity == 3">
								<template v-if="item.product.shopID == shopId">
									<view class="title-none" v-if="item.product.priceFlag === 1">
										<text class="p big">￥未公开价格</text>
									</view>
									<view
										class="price tui-skeleton-rect"
										v-else
										:class="PromotionsFormat(item.product.promotions) ? 'none' : ''"
									>
										<text class="p sm">￥</text>
										<text class="p big">{{
											(PromotionsFormat(item.product.promotions)
												? item.product.originalPrice
												: item.product.price) | NumFormat
										}}</text>
									</view>
								</template>
								<template v-else>
									<view class="no-price">
										<view class="p-stars">
											<text class="p-no">￥</text>
											<uni-grader
												:grade="Number(item.product.priceGrade)"
												:margin="14"
											></uni-grader>
										</view>
									</view>
								</template>
							</template>
							<template v-else-if="userIdentity === 4">
								<view class="title-none" v-if="item.product.priceFlag === 1">
									<text class="p big">￥未公开价格</text>
								</view>
								<view class="title-none" v-if="item.product.priceFlag === 2">
									<text class="p big">￥价格仅会员可见</text>
								</view>
								<view
									class="price tui-skeleton-rect"
									v-if="item.product.priceFlag === 0"
									:class="PromotionsFormat(item.product.promotions) ? 'none' : ''"
								>
									<text class="p sm">￥</text>
									<text class="p big">{{
										(PromotionsFormat(item.product.promotions)
											? item.product.originalPrice
											: item.product.price) | NumFormat
									}}</text>
								</view>
							</template>
							<template v-else>
								<view class="title-none" v-if="item.product.priceFlag === 1">
									<text class="p big">￥未公开价格</text>
								</view>
								<view
									class="price tui-skeleton-rect"
									v-else
									:class="PromotionsFormat(item.product.promotions) ? 'none' : ''"
								>
									<text class="p sm">￥</text>
									<text class="p big">{{
										(PromotionsFormat(item.product.promotions)
											? item.product.originalPrice
											: item.product.price) | NumFormat
									}}</text>
								</view>
							</template>
						</template>
						<template v-else>
							<view class="price tui-skeleton-rect" v-if="item.product.detailTalkFlag == '2'">
								<text class="p sm">￥</text> <text class="p big">价格详聊</text>
							</view>
							<view class="price tui-skeleton-rect" v-else>
								<text class="p sm">￥</text>
								<text class="p big">{{ item.product.price | NumFormat }}</text>
							</view>
						</template>
					</view>
					<view v-else class="no-price">
						<template v-if="item.product.productCategory == 1">
							<view class="p-stars">
								<text class="p-no">￥</text>
								<uni-grader :grade="Number(item.product.priceGrade)" :margin="14"></uni-grader>
							</view>
						</template>
						<template v-else>
							<view class="p-stars"> <text class="p-no">￥登录可见</text> </view>
						</template>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
import uniGrader from '@/components/uni-grade/uni-grade.vue'
export default {
	name: 'templateC',
	components: {
		uniGrader
	},
	props: {
		pageData: {
			type: Object
		},
		userIdentity: {
			type: Number
		}
	},
	data() {
		return {
			shopId: 0,
			floorData: {}
		}
	},
	filters: {
		NumFormat: function(text) {
			//处理金额
			return Number(text).toFixed(2)
		}
	},
	created() {
		this.initData(this.pageData)
	},
	computed: {
		...mapState(['hasLogin', 'userInfo', 'isActivity'])
	},
	watch: {
		pageData: {
			handler: function(el) {
				//监听对象的变换使用 function，箭头函数容易出现this指向不正确
				this.pageData = el
				this.initData(this.pageData)
			},
			deep: true
		}
	},
	methods: {
		initData(data) {
			this.floorData = data
			// console.log(this.floorData)
			this.$api
				.getStorage()
				.then(resolve => {
					this.shopId = resolve.shopId ? resolve.shopId : 0
				})
				.catch(err => {
					console.log('err', err)
				})
		},
		PromotionsFormat(promo) {
			//促销活动类型数据处理
			if (promo != null) {
				if (promo.type == 1 && promo.mode == 1) {
					return true
				} else {
					return false
				}
			}
			return false
		},
		navToDetailPage(pros) {
			//跳转商品详情页
			this.$api.FlooryNavigateTo(pros)
		},
		BannerNavigateTo(linkType, linkId, linkHref, keyword) {
			//跳转商品详情页
			this.$api.BannerNavigateTo(linkType, linkId, linkHref, keyword)
		}
	}
}
</script>

<style lang="scss">
.section_page_main {
	width: 100%;
	height: auto;
	box-sizing: border-box;
	.floor-item {
		width: 339rpx;
		height: 516rpx;
		margin-right: 20rpx;
		font-size: $font-size-24;
		color: $text-color;
		background: #ffffff;
		line-height: 36rpx;
		border-radius: 16rpx;
		margin-bottom: 20rpx;
		float: left;
		box-sizing: border-box;
		position: relative;
		&.ad_01 {
			width: 100%;
			height: 240rpx;
			.item-img-gg {
				width: 100%;
				height: 240rpx;
				display: block;
				border-radius: 16rpx;
			}
		}
		&.ad_02 {
			margin-right: 20rpx;
		}
		&:nth-child(odd) {
			margin-right: 0;
		}
		.item-img-gg {
			width: 339rpx;
			height: 516rpx;
			display: block;
			border-radius: 16rpx;
		}
		.item-img {
			width: 339rpx;
			height: 339rpx;
			border-radius: 16rpx 16rpx 0 0;
			display: block;
			margin-bottom: 8rpx;
		}
		.floor-item_tag {
			width: 100%;
			height: 32rpx;
			float: left;
			margin: 20rpx 0;
			padding: 0 20rpx;
			box-sizing: border-box;
			text {
				display: inline-block;
				padding: 0 8rpx;
				border: 1px solid #e3ebf7;
				border-radius: 8rpx;
				color: #9aa5b5;
				font-size: $font-size-22;
				line-height: 32rpx;
				text-align: center;
				float: left;
			}
		}
		.floor-item_tag {
			width: 100%;
			height: 32rpx;
			float: left;
			margin: 8rpx 0;
			padding: 0 20rpx;
			box-sizing: border-box;
			margin-bottom: 20rpx;
			text {
				display: inline-block;
				padding: 0 8rpx;
				border: 1px solid #e3ebf7;
				border-radius: 8rpx;
				color: #9aa5b5;
				font-size: $font-size-22;
				line-height: 32rpx;
				text-align: center;
				float: left;
			}
		}
		.floor-item-content {
			width: 100%;
			padding: 0 20rpx;
			box-sizing: border-box;
		}
		.floor-item-act {
			display: block;
			width: 100%;
			height: 32rpx;
			text-align: center;
			box-sizing: border-box;
			.coupon-tags {
				height: 32rpx;
				box-sizing: border-box;
				border-radius: 8rpx;
				background-color: #fff1eb;
				line-height: 28rpx;
				color: #f94b4b;
				text-align: center;
				display: inline-block;
				padding: 0 10rpx;
				font-size: $font-size-20;
				border: 1px solid #f94b4b;
				float: left;
				margin-right: 12rpx;
			}
			.floor-tags {
				height: 32rpx;
				box-sizing: border-box;
				border-radius: 8rpx;
				background-color: #ffffff;
				line-height: 28rpx;
				color: $color-system;
				text-align: center;
				display: inline-block;
				padding: 0 16rpx;
				font-size: $font-size-20;
				border: 1px solid #e15616;
				float: left;
			}
		}
		.title-none {
			font-size: $font-size-26;
			color: #ff2a2a;
			line-height: 54rpx;
		}
		.title {
			width: 100%;
			height: 70rpx;
			display: flex;
			line-height: 35rpx;
			flex-direction: column;
			margin: 8rpx 0;
			padding: 0;
			position: relative;
			.mclap {
				width: 100%;
				line-height: 35rpx;
				text-overflow: ellipsis;
				display: -webkit-box;
				word-break: break-all;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				overflow: hidden;
				font-size: 26rpx;
				&.indent {
					text-indent: 95rpx;
				}
			}
			.mclap-tag {
				display: block;
				width: 84rpx;
				height: 32rpx;
				background-image: linear-gradient(270deg, #f9c023 0%, #f83600 100%);
				border-radius: 4rpx 48rpx 4px 4px;
				line-height: 32rpx;
				font-size: $font-size-22;
				color: #ffffff;
				text-align: center;
				position: absolute;
				left: 0;
				top: 0;
			}
		}
		.no-price {
			height: 54rpx;
			line-height: 54rpx;
			display: flex;
			box-sizing: border-box;
			.p-no {
				font-size: $font-size-28;
				color: $text-color;
				display: block;
				float: left;
			}
			.p-stars {
				float: left;
			}
		}
		.price {
			color: #ff2a2a;
			line-height: 54rpx;
			&.none {
				text-decoration: line-through;
				color: #999999;
			}
			.sm {
				font-size: $font-size-24;
			}
			.big {
				font-size: $font-size-28;
			}
		}
	}
}
</style>