caimei-applets-caimei/components/cm-module/pageTemplate/template-product.vue

<template>
    <view class="floor-item ad_04 clearfix" @click.stop="navToDetailPage(data)">
    	<image class="item-img tui-skeleton-fillet" :src="data.image" mode="aspectFill"></image>
    	<template-Type :product="data"></template-Type>
    	<view class="floor-item-content">
    		<view class="title tui-skeleton-rect">
    			<text class="mclap-tag" v-if="data.beautyActFlag == '1'">美博会</text>
    			<text class="mclap" :class="data.beautyActFlag == '1' ? 'indent' : ''"
    		>{{ data.name }} 
    			</text>
    		</view>
    		<view class="floor-item-price">
    			<template>
    				<template-Tags :product="data"></template-Tags>
    			</template>
    			<view v-if="hasLogin">
    				<template-Price :product="data"></template-Price>
    			</view>
    			<view v-else class="no-price">
    				<view class="p-stars">
    					<text class="p-no">￥</text>
    					<uni-grader
    						:grade="Number(data.priceGrade)"
    						:margin="14"
    					></uni-grader>
    				</view>
    			</view>
    		</view>
    	</view>
    </view>
</template>

<script>
import { mapState, mapMutations } from 'vuex'	
import uniGrader from '@/components/uni-grade/uni-grade.vue'
import templateTags from '@/components/cm-module/pageTemplate/templateTags.vue'
import templatePrice from '@/components/cm-module/pageTemplate/templatePrice.vue'
import templateType from '@/components/cm-module/pageTemplate/templateType.vue'	
export default {
    name: 'TemplateProduct',
	components: {
		uniGrader,
		templateTags,
		templatePrice,
		templateType
	},
    props: {
        data: {
            type: Object,
            default: () => {}
        }
    },
    computed: {
       ...mapState(['hasLogin', 'userInfo', 'isActivity']),
    },
    methods: {
        // 跳转商品详情
	   navToDetailPage(pros) {
			this.$api.navigateTo(`/pages/goods/product?id=${pros.productId}`)
	   }
    }
}
</script>

<style lang="scss" scoped>
.floor-item {
	width: 332rpx;
	height: 516rpx;
	font-size: $font-size-24;
	color: $text-color;
	background: #ffffff;
	line-height: 36rpx;
	border-radius: 16rpx;
	margin-right: 10rpx;
	margin-bottom: 10rpx;
	float: left;
	box-sizing: border-box;
	position: relative;
	&:nth-child(2n) {
		margin-right: 0;
	}
	.item-img {
		width: 330rpx;
		height: 330rpx;
		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-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;
	}
	.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 {
			line-height: 54rpx;
			font-size: $font-size-28;
			color: $text-color;
			display: inline-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>