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

<template>
	<view class="container clearfix">
		<view class="cm-member-top">
			<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>
		</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.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>
		<!-- 弹窗 -->
		<template>
			<view class="cm-model-alert" v-if="isShowBeansModal">
				<view class="content">
					<view class="title">
						<text>购买超级会员</text>
						<text class="iconfont icon-iconfontguanbi" @click.stop="handelCanelBeans"></text>
					</view>
					<view class="text-content">
						<view class="text"
							>确定使用<text class="text-p">{{ handelPayMsg.beans }}</text
							>个采美豆抵扣{{ handelPayMsg.duration }}个月的采美超级会员吗？</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'
export default {
	components: {},
	data() {
		return {
			StaticUrl: this.$Static,
			isRequest: false,
			isShowBeansModal: false,
			payList: [],
			userVip: {},
			handelPayMsg: {
				beans: 0,
				price: 0,
				month: '',
				packageId: 0
			},
			payParam: {
				userId: 0,
				packageId: 1
			},
			tabCurrent: 0
		}
	},
	onLoad() {
		this.getUserSuperPackage()
	},
	filters: {
		TypeFormat(value) {
			switch (value) {
				case 0:
					return '活动券'
					break
				case 1:
					return '品类券'
					break
				case 2:
					return '用户专享券'
					break
				case 3:
					return '店铺券'
					break
				case 4:
					return '新用户券'
					break
			}
		}
	},
	computed: {
		...mapState(['hasLogin', 'userInfo', 'identity', 'isActivity'])
	},
	methods: {
		async initGetStotage() {
			const userInfo = await this.$api.getStorage()
			this.payParam.userId = userInfo.userId ? userInfo.userId : 0
			this.userIdentity = userInfo.userIdentity ? userInfo.userIdentity : 0
			this.getUserSuperCenter()
		},
		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
					this.handelPayMsg = data[0]
					this.payParam.packageId = data[0].packageId
				})
				.catch(error => {
					console.log('获取会员套餐异常~')
				})
		},
		getUserSuperCenter() {
			// 获取会员中心数据
			this.UserService.getUserSuperCenter({ userId: this.payParam.userId })
				.then(response => {
					let data = response.data
					this.userVip = data.vip
					this.isRequest = true
				})
				.catch(error => {
					this.$util.msg(error.msg, 2000)
				})
		},
		hanldeShowBeans() {
			// 显示采美豆抵扣开通超级会员弹窗
			if (process.env.NODE_ENV != 'development') {
				// 友盟埋点收集续费购买超级会员采美豆抵扣会员
				this.$uma.trackEvent('Um_Event_userClubRenewMemberBeansConfirm', {
					Um_Key_Month: `${this.handelPayMsg.duration}个月`,
					Um_Key_SourcePage: '续费购买超级会员'
				})
			}
			this.isShowBeansModal = true
		},
		handelCanelBeans() {
			// 取消采美豆抵扣超级会员
			if (process.env.NODE_ENV != 'development') {
				// 友盟埋点收集取消采抵扣会员
				this.$uma.trackEvent('Um_Event_userClubRenewMemberBeansCancel', {
					Um_Key_Month: `${this.handelPayMsg.duration}个月`,
					Um_Key_SourcePage: '会员中心'
				})
			}
			this.isShowBeansModal = false
		},
		handelConfirmBeans() {
			// 确认采美豆抵扣开通超级会员
			if (process.env.NODE_ENV != 'development') {
				// 友盟埋点收集确定采抵扣会员
				this.$uma.trackEvent('Um_Event_userClubRenewMemberBeansConfirms', {
					Um_Key_Month: `${this.handelPayMsg.duration}个月`,
					Um_Key_SourcePage: '会员中心'
				})
			}
			this.PayService.getUserRegisterSuperBeans(this.payParam)
				.then(response => {
					this.isShowBeansModal = false
					this.$util.msg('续费成功', 2000, true, 'success')
					setTimeout(() => {
						uni.navigateBack({ delta: 1 })
					}, 2000)
				})
				.catch(error => {
					this.$util.msg(error.msg, 2000)
				})
		},
		hanldWechatPay() {
			// 跳转微信只开通超级会员
			if (process.env.NODE_ENV != 'development') {
				// 友盟埋点收集线上续费购买超级会员线上支付
				this.$uma.trackEvent('Um_Event_userClubRenewMemberConfirm', {
					Um_Key_Month: `${this.handelPayMsg.duration}个月`,
					Um_Key_SourcePage: '续费购买超级会员'
				})
			}
			this.PayService.getUserRegisterSuperPay(this.payParam)
				.then(response => {
					this.handelPayMsg.vipRecordId = response.data
					this.$api.navigateTo(`/pages/user/member/member-pay?data=${JSON.stringify(this.handelPayMsg)}`)
				})
				.catch(error => {
					this.$util.msg(error.msg, 2000)
				})
		},
		handleCheckedPay(index, pay) {
			// 选择会员
			this.tabCurrent = index
			this.payParam.packageId = pay.packageId
			this.handelPayMsg = pay
		}
	},
	onShow() {
		this.initGetStotage()
	}
}
</script>

<style lang="scss">
.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-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-main {
	width: 100%;
	box-sizing: border-box;
	padding: 40rpx 24rpx;
	background-color: #ffffff;
	margin-bottom: 20rpx;
	.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;
		}
	}
	.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-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: #FF5B00;
				}
			}
		}
		.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>