caimei-applets-caimei/pages/user/member/member-product.vue

<template>
	<view class="container clearfix">
		<view class="cm-member-top">
			<image class="banner" :src="banner" mode=""></image>
		</view>
		<view class="cm-member-main ">
			<view class="cm-member-product clearfix">
				<view 	v-for="(pro,index) in productList"
						:key="index" 
						:id="pro.productId" 
						class="product-list" 
						@click="productDetail(pro.productId)"
				>
					<view class="product-image">
						<image :src="pro.image" mode=""></image>
					</view>
					<view class="product-mains">
						<view class="product-name">
							{{ pro.name }}
						</view>
						<view class="product-tags">
							<view class="floor-item-act" v-if="pro.actStatus==1">
								<view class="floor-tags" v-if="PromotionsFormat(pro.promotions)">
									{{pro.promotions.name}}
									<text v-if="pro.priceFlag != 1">:￥{{ pro.price | NumFormat }}</text>
								</view>
								<view class="floor-tags" v-else>{{pro.promotions.name}}</view>	
							</view>
							<view class="floor-item-act" v-if="pro.actStatus==0">
								<view class="floor-tags" v-if="pro.actStatus ==0  &&  pro.ladderPriceFlag==1">阶梯价格</view>	
							</view>
						</view>
						<view class="product-price">
							<view class="list-none" v-if="pro.priceFlag == 1">￥未公开价格</view>
							<view class="list-none" v-else-if="pro.priceFlag == 2">￥价格仅会员可见</view>
							<view class="list-none-price" v-else>￥{{ pro.price | NumFormat }}</view>
						</view>
						<view class="product-svip">
							<view class="svip" v-if='pro.proType == 0'>
								<view class="tags">SVIP</view>
							</view>
							<view class="svip" v-if='pro.proType == 1'>
								<view class="tags">SVIP</view>
								<view class="price">{{ pro.discount }}</view>
							</view>
							<view class="svip" v-if='pro.proType == 2'>
								<view class="tags">SVIP</view>
								<view class="price">￥{{ pro.discountPrice | NumFormat }}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 透明模态层 -->
		<modal-layer v-if='isModallayer'></modal-layer>
	</view>
</template>

<script>
	import { mapState,mapMutations} from 'vuex'
	import modalLayer from '@/components/modal-layer'
	export default {
		components:{
			modalLayer
		},
		data() {
			return {
				StaticUrl:this.$Static,
				isModallayer:false,
				banner:'https://img.caimei365.com/group1/M00/00/28/rB-lGGE4XKWADKAdAANR7wZz3OQ936.jpg',
				params:{
					userId:0,
					redemptionCode:'',
					source:2,
				},
				productList:[
					{
						image:'https://img.caimei365.com/group1/M00/00/10/rB-lGGCHqP-AIE9-AAEQHiqWjQY981.png',
						name:'ET-SPACE全身热疗系统生物热能太空舱',
						unit:'台',
						ladderPriceFlag:0,
						priceFlag:1,
						originalPrice:100,
						price:5000000,
						actStatus:0,
						promotions:null,
						isChecked:false,
						productIds:1000,
						proType:1,
						discount:'8.8折'
					},
					{
						image:'https://img.caimei365.com/group1/M00/00/10/rB-lGGCHqP-AIE9-AAEQHiqWjQY981.png',
						name:'ET-SPACE全身热疗系统全身热疗系统生物热能太空舱',
						unit:'台',
						ladderPriceFlag:1,
						priceFlag:2,
						originalPrice:100,
						price:500000,
						actStatus:1,
						promotions:{
							type:1,
							mode:1,
							name:'优惠价'
						},
						isChecked:false,
						productIds:1001,
						proType:2,
						discountPrice:50000,
					},
					{
						image:'https://img.caimei365.com/group1/M00/00/10/rB-lGGCHqP-AIE9-AAEQHiqWjQY981.png',
						name:'ET-SPACE全身热疗系统全身热疗系统生物热能太空舱',
						unit:'台',
						ladderPriceFlag:1,
						priceFlag:0,
						originalPrice:100,
						price:5000000,
						actStatus:1,
						promotions:{
							type:0,
							mode:0,
							name:'单品满减'
						},
						isChecked:false,
						productIds:1002,
						proType:0,
						discountPrice:50000,
					},
					{
						image:'https://img.caimei365.com/group1/M00/00/10/rB-lGGCHqP-AIE9-AAEQHiqWjQY981.png',
						name:'ET-SPACE全身热疗系统全身热疗系统生物热能太空舱',
						unit:'台',
						ladderPriceFlag:1,
						priceFlag:0,
						originalPrice:100,
						price:50000000,
						actStatus:0,
						promotions:null,
						isChecked:false,
						productIds:1003,
						proType:0,
						discountPrice:50000,
					},
					{
						image:'https://img.caimei365.com/group1/M00/00/10/rB-lGGCHqP-AIE9-AAEQHiqWjQY981.png',
						name:'ET-SPACE全身热疗系统生物热能太空舱',
						unit:'台',
						ladderPriceFlag:0,
						priceFlag:1,
						originalPrice:100,
						price:5000000,
						actStatus:0,
						promotions:null,
						isChecked:false,
						productIds:1000,
						proType:1,
						discount:'8.8折'
					},
					{
						image:'https://img.caimei365.com/group1/M00/00/10/rB-lGGCHqP-AIE9-AAEQHiqWjQY981.png',
						name:'ET-SPACE全身热疗系统全身热疗系统生物热能太空舱',
						unit:'台',
						ladderPriceFlag:1,
						priceFlag:2,
						originalPrice:100,
						price:500000,
						actStatus:1,
						promotions:{
							type:1,
							mode:1,
							name:'优惠价'
						},
						isChecked:false,
						productIds:1001,
						proType:2,
						discountPrice:50000,
					},
					{
						image:'https://img.caimei365.com/group1/M00/00/10/rB-lGGCHqP-AIE9-AAEQHiqWjQY981.png',
						name:'ET-SPACE全身热疗系统全身热疗系统生物热能太空舱',
						unit:'台',
						ladderPriceFlag:1,
						priceFlag:0,
						originalPrice:100,
						price:5000000,
						actStatus:1,
						promotions:{
							type:0,
							mode:0,
							name:'单品满减'
						},
						isChecked:false,
						productIds:1002,
						proType:0,
						discountPrice:50000,
					},
					{
						image:'https://img.caimei365.com/group1/M00/00/10/rB-lGGCHqP-AIE9-AAEQHiqWjQY981.png',
						name:'ET-SPACE全身热疗系统全身热疗系统生物热能太空舱',
						unit:'台',
						ladderPriceFlag:1,
						priceFlag:0,
						originalPrice:100,
						price:50000000,
						actStatus:0,
						promotions:null,
						isChecked:false,
						productIds:1003,
						proType:0,
						discountPrice:50000,
					}
				]
			}
		},
		onLoad() {
			
		},
		filters: {
			NumFormat:function(text) {//处理金额
				return Number(text).toFixed(2)
			}
		},
		computed: {
			...mapState(['hasLogin','userInfo','identity','isActivity'])
		},
		methods: {
			PromotionsFormat(promo){//促销活动类型数据处理
				if(promo!=null){
					if(promo.type == 1 && promo.mode == 1){
						return true
					}else{
						return false
					}
				}
				return false
			},
			productDetail(productId) {
				this.isModallayer = true
				this.$api.navigateTo(`/pages/goods/product?id=${productId}`)
				this.isModallayer = false
			},
		},
		onPullDownRefresh() {
			setTimeout(() => {
				uni.stopPullDownRefresh()
			}, 200)
		},
		onShow(){
			this.$api.getComStorage('userInfo').then((resolve) =>{
				this.params.userId = resolve.userId ? resolve.userId : 0
			}).catch(error =>{
				console.log('暂无用户信息~')
			})
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #F7F7F7;
	}
	.container{
		width: 100%;
		height: auto;
	}
	.cm-member-top{
		width: 100%;
		height: 340rpx;
		box-sizing: border-box;
		padding: 0 24rpx;
		margin: 24rpx 0 0 0;
		.banner{
			width: 100%;
			height: 340rpx;
			display: block;
			border-radius: 16rpx;
		}
	}
	.cm-member-main{
		width: 100%;
		box-sizing: border-box;
		padding: 0  24rpx 24rpx 24rpx;
		background-color: #F7F7F7;
		.cm-member-product{
			width: 100%;
			margin-top: 24rpx;
			.product-list{
				width: 339rpx;
				height: 560rpx;
				border-radius: 16rpx;
				float: left;
				margin-right: 24rpx;
				margin-bottom: 24rpx;
				background-color: #FFFFFF;
				&:nth-child(2n){
					margin-right: 0;
				}
				.product-image{
					width: 339rpx;
					height: 339rpx;
					image{
						width: 339rpx;
						height: 339rpx;
						display: block;
						border-radius: 16rpx 16rpx 0 0;
					}
				}
				.product-mains{
					width: 100%;
					height: auto;
					box-sizing: border-box;
					padding: 0 24rpx;
					margin-top: 8rpx;
					.product-name{
						line-height: 36rpx;
						text-overflow: ellipsis;
						overflow: hidden;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						line-clamp: 2;
						-webkit-box-orient: vertical;
						font-size: $font-size-26;
						color: #333333;
						text-align: justify;
					}
					.product-tags{
						width: 100%;
						height: 32rpx;
						margin-top: 4rpx;
						.floor-item-act{
							width: 100%;
							height: 32rpx;
							text-align: center;
							box-sizing: border-box;
							float: left;
							.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 8rpx;
								font-size: $font-size-20;
								border: 1px solid #E15616;
								float: left;
							}
						}
					}
					.product-price{
						width: 100%;
						line-height: 37rpx;
						font-size: $font-size-26;
						color: #333333;
						margin-top: 8rpx;
						.list-none-price{
							text-decoration: line-through;
							color: #999999;
						}
					}
					.product-svip{
						width: 100%;
						height: 32rpx;
						margin-top: 10rpx;
						.svip{
							padding-left: 44rpx;
							height: 32rpx;
							position: relative;
							.tags{
								width: 60rpx;
								height: 32rpx;
								background-color: #333333;
								text-align: center;
								line-height: 32rpx;
								font-size: $font-size-22;
								color: #F0CB72;
								position: absolute;
								left: 0;
								top: 0;
								border-radius: 8rpx 16rpx 8rpx 8rpx;
							}
							.price{
								height: 32rpx;
								box-sizing: border-box;
								border-radius:0 8rpx 8rpx 0;
								background-color: #F0CB72;
								line-height: 32rpx;
								color: #333333;
								text-align: center;
								padding:0 9rpx 0 25rpx;
								font-size: $font-size-26;
								float: left;
							}
						}
					}
				}
			}
		}
	}
</style>