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

<template>
	<view class="container clearfix">
		<view class="cm-member-top">
			<view
				class="cm-member-cel"
				v-if="userVip.vipFlag == 1 || userVip.vipFlag == -1"
				@click="hanldPayUrl('/pages/user/member/member-record')"
				>购买记录</view
			>
			<view class="cm-member-head">
				<view class="cm-member-text" v-if="isRequest">
					<view class="cm-member-h1">
						<text v-if="userVip.vipFlag == 0">采美·超级会员</text>
						<text v-if="userVip.vipFlag == 1">已开通采美·超级会员</text>
						<text v-if="userVip.vipFlag == -1">采美·超级会员已过期</text>
					</view>
					<view class="cm-member-p">
						<text v-if="userVip.vipFlag == 0">享专属特权</text>
						<text v-else>有效期至：{{ userVip.endTime }}</text>
					</view>
				</view>
				<view class="cm-member-btn" v-if="userVip.vipFlag == 1 || userVip.vipFlag == -1">
					<view class="btn" @click="hanldPayUrl('/pages/user/member/member-renew')">续费</view>
				</view>
			</view>
		</view>
		<view class="cm-member-main" v-if="userVip.vipFlag == 0 || userVip.vipFlag == -1">
			<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.duration }}个月</view>
					<view class="text-2"> <text>￥</text>{{ pay.price }}</view>
					<view class="text-3" v-if="index == 0 || index == 1">{{ pay.price / pay.duration }}/月</view>
				</view>
			</view>
			<view class="cm-member-button">
				<view class="pay-btn pay" @click="hanldWechatPay">立即支付{{ handelPayMsg.price }}元开通</view>
				<view class="pay-btn none" @click="hanldeShowBeans">抵扣{{ handelPayMsg.beans }}个采美豆开通</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">
								<view class="coupon-tags" v-if="pro.couponsLogo">优惠券</view>
								<template 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>
								</template>
								<template v-if="pro.svipProductFlag == 1">
									<template v-if="pro.priceFlag != 1 && userIdentity == 2">
										<view class="svip-tags">
											<view class="tags">SVIP</view>
											<view class="price">{{ pro.svipPriceTag }}</view>
										</view>
									</template>
									<template v-else>
										<view class="svip-tags"> <view class="tags none">SVIP</view> </view>
									</template>
								</template>
							</view>
						</view>
						<view class="product-price">
							<view class="list-none" v-if="pro.priceFlag == 1">￥未公开价格</view>
							<template v-else>
								<view class="list-none" v-if="pro.priceFlag == 2 && userIdentity == 4"
									>￥价格仅会员可见</view
								>
								<view class="list-none-price" v-else>￥{{ pro.price | NumFormat }}</view>
							</template>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 透明模态层 -->
		<modal-layer v-if="isModallayer"></modal-layer>
		<!-- 弹窗 -->
		<template>
			<view class="cm-model-alert" v-if="isShowBeansModal">
				<view class="content">
					<view class="title">
						<text>购买超级会员</text>
						<text class="iconfont icon-iconfontguanbi" @click.stop="hideTips"></text>
					</view>
					<view class="text-content">
						<view class="text"
							>确定使用<text class="text-p">{{ handelPayMsg.beans }}</text
							>个采美豆抵扣{{ handelPayMsg.month }}的采美超级会员吗？</view
						>
					</view>
					<view class="text-button">
						<view class="btn btn-cancel" @click="handelCanelBeans">取消</view>
						<view class="btn btn-confirm" @click="handelConfirmBeans">确定</view>
					</view>
				</view>
			</view>
		</template>
	</view>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
import modalLayer from '@/components/modal-layer'
export default {
	components: {
		modalLayer
	},
	data() {
		return {
			StaticUrl: this.$Static,
			isRequest: false,
			isModallayer: false,
			isShowBeansModal: false,
			memberType: 0,
			tabCurrent: 0,
			userIdentity: 0,
			userVip: {},
			handelPayMsg: {
				beans: 480000,
				price: 4800,
				month: '12个月',
				packageId: 1
			},
			payParam: {
				userId: 0,
				packageId: 1
			},
			payList: [],
			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: '更多特权'
				}
			],
			listQuery: {
				userId: 0,
				source: 1,
				pageNum: 1,
				pageSize: 4
			},
			productCouponList: [],
			productList: []
		}
	},
	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: {
		async initGetStotage() {
			const userInfo = await this.$api.getStorage()
			this.payParam.userId = this.listQuery.userId = userInfo.userId ? userInfo.userId : 0
			this.userIdentity = userInfo.userIdentity ? userInfo.userIdentity : 0
			this.getUserSuperCenter()
		},
		getUserSuperCenter() {
			// 获取会员中心数据
			this.UserService.getUserSuperCenter({ userId: this.payParam.userId })
				.then(response => {
					let data = response.data
					this.userVip = data.vip
					this.getSvipProductPage()
					this.getUserSuperPackage()
					this.isRequest = true
				})
				.catch(error => {
					this.$util.msg(error.msg, 2000)
				})
		},
		getSvipProductPage() {
			// 获取会员中心商品数据
			this.ProductService.getSvipProductPage(this.listQuery)
				.then(response => {
					let data = response.data.svipProductPage
					this.productList = data.results
				})
				.catch(error => {
					this.$util.msg(error.msg, 2000)
				})
		},
		getUserSuperPackage() {
			//获取会员中心套餐
			this.UserService.getUserSuperPackage()
				.then(response => {
					let data = response.data
					data.forEach(el => {
						el.beans = el.price * el.proportion
						el.packageId = el.id
					})
					this.payList = data
				})
				.catch(error => {
					console.log('获取会员套餐异常~')
				})
		},
		hanldeShowBeans() {
			// 显示采美豆抵扣开通超级会员弹窗
			this.isShowBeansModal = true
		},
		handelCanelBeans() {
			// 取消采美豆抵扣超级会员
			this.isShowBeansModal = false
		},
		handelConfirmBeans() {
			// 确认采美豆抵扣开通超级会员
			this.PayService.getUserRegisterSuperBeans(this.payParam)
				.then(response => {
					this.isShowBeansModal = false
					this.$util.msg('开通成功', 2000, true, 'success')
					this.getUserSuperCenter()
				})
				.catch(error => {
					this.$util.msg(error.msg, 2000)
				})
		},
		hanldWechatPay() {
			// 跳转微信只开通超级会员
			this.$api.navigateTo(`/pages/user/member/member-pay?data=${JSON.stringify(this.handelPayMsg)}`)
		},
		handleCheckedPay(index, pay) {
			// 选择会员
			this.tabCurrent = index
			this.payParam.packageId = pay.packageId
			this.handelPayMsg = pay
		},
		hanldPayUrl(url) {
			// 跳转
			this.$api.navigateTo(url)
		},
		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.initGetStotage()
	}
}
</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: 516rpx;
			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 {
					height: 72rpx;
					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: 6rpx;
					.floor-item-act {
						width: 100%;
						height: 32rpx;
						text-align: center;
						box-sizing: border-box;
						float: left;
					}
				}
				.product-price {
					width: 100%;
					line-height: 37rpx;
					font-size: $font-size-26;
					color: #f94b4b;
					margin-top: 8rpx;
					.list-none-price {
						text-decoration: line-through;
						color: #999999;
					}
				}
			}
		}
	}
}
.cm-model-alert {
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
	position: fixed;
	top: 0;
	left: 0;
	z-index: 8888;
	transition: all 0.4s;
	.content {
		width: 580rpx;
		height: 390rpx;
		position: absolute;
		background: $bg-color;
		left: 0;
		right: 0;
		bottom: 0;
		top: 0;
		margin: auto;
		padding: 20rpx 32rpx;
		border-radius: 12rpx;
		.title {
			width: 100%;
			height: 68rpx;
			line-height: 68rpx;
			font-size: $font-size-28;
			color: $text-color;
			text-align: center;
			position: relative;
			.icon-iconfontguanbi {
				width: 68rpx;
				height: 68rpx;
				text-align: center;
				line-height: 68rpx;
				position: absolute;
				right: 0;
				top: 0;
				font-size: $font-size-36;
				color: #999999;
			}
		}
		.text-content {
			width: 100%;
			height: auto;
			margin-top: 20px;
			.text {
				padding: 20rpx 0 0 0;
				line-height: 44rpx;
				font-size: $font-size-26;
				color: #666666;
				text-align: justify;
				.text-p {
					color: #e15616;
				}
			}
		}
		.text-button {
			width: 100%;
			height: 72rpx;
			display: flex;
			box-sizing: border-box;
			padding: 0 50rpx;
			margin-top: 30px;
			.btn {
				width: 200rpx;
				height: 72rpx;
				line-height: 72rpx;
				color: #fff;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: $font-size-26;
				border-radius: 44rpx;
				box-sizing: border-box;
				&.btn-confirm {
					background: $btn-confirm;
					margin-left: 78rpx;
				}
				&.btn-cancel {
					border: 1px solid #b2b2b2;
					color: #333333;
				}
			}
		}
	}
}
</style>