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

<template>
	<view class="container clearfix">
		<view class="cm-member-top">
			<view class="cm-member-cel" @click="hanldPayUrl('/pages/user/member/member-record')">购买记录</view>
			<view class="cm-member-head">
				<view class="cm-member-text">
					<view class="cm-member-h1">
						<text v-if="memberType == 0">采美·超级会员</text>
						<text v-if="memberType == 1">已开通采美·超级会员</text>
						<text v-if="memberType == 2">采美·超级会员已过期</text>
					</view>
					<view class="cm-member-p">
						<text v-if="memberType == 0">享专属特权</text>
						<text v-else>有效期至：2021-10-01</text>
					</view>
				</view>
				<view class="cm-member-btn">
					<view class="btn" @click="hanldPayUrl('/pages/user/member/member-renew')">续费</view>
				</view>
			</view>
		</view>
		<view class="cm-member-main">
			<view class="title">超级会员套餐</view>
			<view class="cm-member-pay">
				<view class="pay-item" 
					  v-for="(pay,index) in payList" 
					  :key="index" 
					  :class="{current: tabCurrent === index}" 
					  @click="handleCheckedPay(index,pay)"
				>
					<view class="hot" v-if="index == 0">推荐</view>
					<view class="text-1">{{ pay.month }}</view>
					<view class="text-2"> <text>￥</text>{{ pay.money }}</view>
					<view class="text-3">{{ pay.text }}</view>
				</view>
			</view>
			<view class="cm-member-button">
				<view class="pay-btn pay" @click="hanldPayUrl('/pages/user/member/member-pay')">立即支付{{ payAmount }}元开通</view>
				<view class="pay-btn none">抵扣{{ payBeans }}个采美豆开通</view>
			</view>
		</view>
		<view class="cm-member-main">
			<view class="title">专属特权</view>
			<view class="cm-member-privilege clearfix">
				<view class="privilege-item" v-for="(priv,index) in privilegeList" :key="index">
					<image class="image" :src="priv.icon" mode=""></image>
					<view class="text-2">{{ priv.privText }}</view>
					<view class="text-3">{{ priv.privName }}</view>
				</view>
			</view>
		</view>
		<view class="cm-member-main">
			<view class="title">专属优惠券<text class="small">每月可领4个</text></view>
			<view class="cm-member-coupon clearfix">
				<view 	v-for="(coupon,index) in productCouponList"
						:key="index" 
						:id="coupon.couponId" 
						class="coupon-list" 
						:class="coupon.useStatus == 1 ? 'none' : ''"
				>
					<view class="list-cell-tags">{{ coupon.couponType | TypeFormat }}</view>
					<view class="list-cell-le">
						<view class="coupon-maxMoney"><text class="small">￥</text>{{ coupon.couponAmount }}</view>
						<view class="coupon-minMoney">满{{ coupon.touchPrice }}可用</view>
						<view class="coupon-texts">
							<text v-if="coupon.couponType == 0">
								{{ coupon.productType && coupon.productType == 1 ? '全商城商品通用' : '仅可购买指定商品'  }}
							</text>
							<text v-if="coupon.couponType == 1">
								{{ coupon.categoryType == 1 ? '仅限购买产品类商品' : '仅限购买仪器类商品' }}
							</text>
							<text v-if="coupon.couponType == 3">仅限购买店铺【{{ coupon.shopName }}】的商品</text>
							<text v-if="coupon.couponType == 4 || coupon.couponType == 2">全商城商品通用</text>
						</view>
					</view>
					<view class="list-cell-ri">
						<view class="icon-used-btn receive" v-if="coupon.useStatus == 0" @click="receiveCoupon(coupon)">立即领取</view>
						<view class="icon-used-btn make" v-if="coupon.useStatus == 1">已领取</view>
					</view>
				</view>
			</view>
		</view>
		<view class="cm-member-main none">
			<view class="title">
				优惠商品
				<view class="more" @click="hanldPayUrl('/pages/user/member/member-product')">更多<text class="iconfont icon-xiayibu"></text></view>
			</view>
			<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="coupon-tags">优惠券</view>
								<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-else>
								<view class="coupon-tags">优惠券</view>
								<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 none">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,
				memberType:0,
				tabCurrent:0,
				params:{
					userId:0,
					redemptionCode:'',
					source:2,
				},
				payList:[
					{month:'12个月',money:4800,type:1,text:'400元/月',beans:480000},
					{month:'3个月',money:1500,type:2,text:'500元/月',beans:150000},
					{month:'1个月',money:600,type:3,text:'',beans:60000},
				],
				payAmount:4800,
				payBeans:480000,
				privilegeList:[
					{
						icon:'https://static.caimei365.com/app/img/icon/icon-member-prer1@2x.png',
						privText:'优惠商品',
						privName:'超级会员专享'
					},
					{
						icon:'https://static.caimei365.com/app/img/icon/icon-member-prer2@2x.png',
						privText:'专属优惠券',
						privName:'超级会员专享'
					},
					{
						icon:'https://static.caimei365.com/app/img/icon/icon-member-prer3@2x.png',
						privText:'采美豆翻倍',
						privName:'下单返采美豆'
					},
					{
						icon:'https://static.caimei365.com/app/img/icon/icon-member-prer4@2x.png',
						privText:'专属客服',
						privName:'一对一'
					},
					{
						icon:'https://static.caimei365.com/app/img/icon/icon-member-prer5@2x.png',
						privText:'专属销售顾问',
						privName:'一对一'
					},
					{
						icon:'https://static.caimei365.com/app/img/icon/icon-member-prer6@2x.png',
						privText:'快速发货',
						privName:'会员加速'
					},
					{
						icon:'https://static.caimei365.com/app/img/icon/icon-member-prer7@2x.png',
						privText:'售后服务',
						privName:'会员加速'
					},
					{
						icon:'https://static.caimei365.com/app/img/icon/icon-member-prer8@2x.png',
						privText:'敬请期待',
						privName:'更多特权'
					}
				],
				productCouponList:[
					{
						couponAmount:5000,
						touchPrice:2000,
						couponType:0,
						productType:1,
						categoryType:1,
						shopName:null,
						useStatus:0,
					},
					{
						couponAmount:5000,
						touchPrice:2000,
						couponType:1,
						productType:1,
						categoryType:1,
						shopName:null,
						useStatus:0,
					},
					{
						couponAmount:5000,
						touchPrice:2000,
						couponType:2,
						productType:1,
						categoryType:1,
						shopName:null,
						useStatus:1,
					},
					{
						couponAmount:5000,
						touchPrice:2000,
						couponType:3,
						productType:1,
						categoryType:1,
						shopName:null,
						useStatus:1,
					},
				],
				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,
					}
				]
			}
		},
		onLoad() {
			
		},
		filters: {
			TypeFormat:function(value) {
				switch (value) {
					case 0:
						return  '活动券'
						break
					case 1:
						return  '品类券'
						break
					case 2:
						return  '用户专享券'
						break
					case 3:
						return  '店铺券'
						break
					case 4:
						return  '新用户券'
						break
				}
			},
			NumFormat:function(text) {//处理金额
				return Number(text).toFixed(2)
			}
		},
		computed: {
			...mapState(['hasLogin','userInfo','identity','isActivity'])
		},
		methods: {
			hanldPayUrl(url){
				this.$api.navigateTo(url)
			},
			handleCheckedPay(index,pay){// 选择会员
				this.tabCurrent = index
				this.payAmount = pay.money
				this.payBeans = pay.beans
			},
			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: 242rpx;
		box-sizing: border-box;
		padding: 0 24rpx;
		background: url(https://static.caimei365.com/app/img/icon/icon-member-bg01@2x.png) no-repeat;
		background-size: cover;
		position: relative;
		.cm-member-cel{
			float: right;
			line-height: 40rpx;
			font-size: $font-size-26;
			margin-top: 40rpx;
			color: #F0CB72;
			text-align: right;
		}
		.cm-member-head{
			width: 702rpx;
			height: 132rpx;
			box-sizing: border-box;
			padding: 30rpx 32rpx 0 109rpx;
			background: url(https://static.caimei365.com/app/img/icon/icon-member-bg02@2x.png) no-repeat;
			background-size: cover;
			position: absolute;
			bottom: 0;
			left: 24rpx;
			border-radius: 16rpx 16rpx 0 0;
			.cm-member-text{
				float: left;
				.cm-member-h1{
					line-height: 42rpx;
					font-size: $font-size-30;
					color: #55331D;
					text-align: left;
					margin-bottom: 12rpx;
					font-weight: bold;
				}
				.cm-member-p{
					line-height: 30rpx;
					font-size: $font-size-22;
					color: #55331D;
					text-align: left;
				}
			}
			.cm-member-btn{
				float: right;
				padding-top: 12rpx;
				.btn{
					width: 118rpx;
					height: 48rpx;
					background: linear-gradient(270deg, #585658 0%, #323031 100%);
					border-radius: 24rpx;
					line-height: 48rpx;
					text-align: center;
					font-size: $font-size-24;
					color: #F0CB72;
				}
			}
		}
	}
	.cm-member-main{
		width: 100%;
		box-sizing: border-box;
		padding: 40rpx 24rpx;
		background-color: #FFFFFF;
		margin-bottom: 20rpx;
		&.none{
			background-color: #F7F7F7;
			padding: 20rpx 24rpx 0 24rpx;
		}
		.title{
			font-size: $font-size-32;
			line-height: 45rpx;
			text-align: left;
			color:#55331D;
			font-weight: bold;
			.small{
				font-size: $font-size-24;
				color: #E4AA43;
				font-weight: normal;
				margin-left: 15rpx;
			}
			.more{
				float: right;
				font-weight: normal;
				line-height: 45rpx;
				font-size: $font-size-26;
				color: #999999;
				.iconfont{
					margin-left: 10rpx;
				}
			}
		}
		.cm-member-pay{
			width: 100%;
			height:236rpx;
			margin: 40rpx 0;
			.pay-item{
				width: 218rpx;
				height: 100%;
				float: left;
				margin-right: 24rpx;
				border: 1px solid #F0F0F0;
				border-radius: 16rpx;
				box-sizing: border-box;
				text-align: center;
				padding: 40rpx 0;
				position: relative;
				.hot{
					width: 80rpx;
					height: 36rpx;
					text-align: center;
					line-height: 36rpx;
					font-size: $font-size-24;
					color: #FFFFFF;
					background-color: #FF2A2A;
					border-radius: 0 8rpx 8rpx 8rpx;
					position: absolute;
					left: 0;
					top: -10rpx;
				}
				&.current{
					background-color: #FDF8EE;
					border: 1px solid #F0CC8C;
				}
				&:last-child{
					margin-right: 0;
				}
				.text-1{
					line-height: 40rpx;
					font-size: $font-size-28;
					margin-bottom: 10rpx;
					color: #55331D;
				}
				.text-2{
					line-height: 59rpx;
					font-size: $font-size-40;
					margin-bottom: 10rpx;
					color: #FF2A2A;
					font-weight: bold;
					text{
						font-size: $font-size-26;
					}
				}
				.text-3{
					line-height: 33rpx;
					font-size: $font-size-24;
					color: #666666;
				}
				
			}
		}
		.cm-member-button{
			width: 100%;
			box-sizing: border-box;
			padding: 0 51rpx;
			.pay-btn{
				width: 100%;
				height: 90rpx;
				line-height: 90rpx;
				border-radius: 50rpx;
				text-align: center;
				font-size: $font-size-30;
				color: #55331D;
				box-sizing: border-box;
				margin-bottom: $font-size-24;
				&.pay{
					background: linear-gradient(90deg, #FEE9BA 0%, #F0CB72 100%);
					font-weight: bold;
				}
				&.none{
					border: 1px solid #F0CB72;
					margin-bottom: 0;
				}
			}
		}
		.cm-member-privilege{
			width: 100%;
			margin: 24rpx 0 16rpx 0;
			background-color: #FFFFFF;
			.privilege-item{
				width: 25%;
				height: 196rpx;
				margin: 16rpx 0;
				float: left;
				display: flex;
				flex-direction: column;
				align-items: center;
				.image{
					width: 90rpx;
					height: 90rpx;
					display: block;
				}
				.text-2{
					font-size: $font-size-26;
					color: #333333;
					line-height: 36rpx;
					margin-top: 12rpx;
				}
				.text-3{
					font-size: $font-size-22;
					color: #999999;
					line-height: 30rpx;
					margin-top: 6rpx;
				}
			}
		}
		.cm-member-coupon{
			width: 100%;
			margin: 24rpx 0 0 0;
			.coupon-list{
				width: 338rpx;
				height: 148rpx;
				border-radius: 8rpx;
				margin-bottom: 24rpx;
				box-sizing: border-box;
				background: url(https://static.caimei365.com/app/img/icon/icon-member-coupon@2x.png);
				background-size: cover;
				margin-right: 24rpx;
				float: left;
				position: relative;
				&:nth-child(2n){
					margin-right: 0;
				}
				&.none{
					background: url(https://static.caimei365.com/app/img/icon/icon-member-coupon-none@2x.png);
					background-size: cover;
				}
				.list-cell-tags{
					display: inline-block;
					padding: 0 10rpx;
					height: 27rpx;
					line-height: 27rpx;
					background-color: #E4AA43;
					color: #55331D;
					font-size: $font-size-20;
					border-radius: 8rpx 0 8rpx 0;
					text-align: center;
					position: absolute;
					top: 0;
					left: 0;
				}
				.list-cell-le{
					width: 258rpx;
					height: 100%;
					box-sizing: border-box;
					padding: 27rpx 24rpx 0 26rpx;
					float: left;
					.coupon-maxMoney{
						width: 100%;
						height: 50rpx;
						line-height: 50rpx;
						font-size: 40rpx;
						color: #55331D;
						text-align: left;
						.small{
							font-size: $font-size-24;
						}
					}
					.coupon-minMoney{
						width: 100%;
						height: 30rpx;
						line-height: 30rpx;
						font-size: $font-size-24;
						color: #55331D;
						text-align: left;
					}
					.coupon-texts{
						width: 100%;
						height: 30rpx;
						line-height: 30rpx;
						font-size: $font-size-24;
						color: #55331D;
						text-align: left;
						-o-text-overflow: ellipsis;
						text-overflow: ellipsis;
						display: -webkit-box;
						word-break: break-all;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 1;
						overflow: hidden;
					}
				}
				.list-cell-ri{
					width: 80rpx;
					height: 100%;
					float: right;
					.icon-used-btn{
						width: 100%;
						height: 100%;
						box-sizing: border-box;
						font-size: $font-size-22;
						text-align: center;
						&.receive{
							color: #55331D;
							padding: 15rpx 28rpx;
						}
						&.make{
							padding: 30rpx 28rpx;
							color: #FFFFFF;
						}
					}
				}
			}
		}
		.cm-member-product{
			width: 100%;
			margin-top: 16rpx;
			.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;
								&.none{
									border-radius: 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>