junzitang/pagesT/user/VipDetail.vue

<template>
	<view :class="['qn-page-' + theme]">
		<view class="vimg">
			<view class="contAll">
				<image class="img" src="https://onlineimg.qianniao.vip/vip-icon.png" alt="" />
				<text class="contUser">{{ infoList.name }}</text>
				<text v-if="parseFloat(infoList.price) === 0 && parseInt(infoList.renew) === 4" class="cont_desc">免费领取</text>
				<text v-else-if="parseInt(infoList.renew) === 4" class="cont_desc">立即开通</text>
				<text v-else-if="parseInt(infoList.renew) === 5 && parseFloat(infoList.price) !== 0" class="cont_desc">立即续费</text>
				<text v-else class="cont_desc">{{ infoList.effectiveDate === 5 ? '长期有效' : (infoList.effectiveMonth || 0) + '个月' }}</text>
			</view>
			<view class="vip-head">
				<image class="vipCont" src="https://onlineimg.qianniao.vip/v-1.png"></image>
				<view class="vip-cont-in clearfix">
					<view class="float_left vipContit">
						<view v-if="infoList.vipDiscount === 5" class="openVip">
							会员折扣
							<text class="vip-discount">{{ parseFloat(infoList.discount) }}</text>
							折
						</view>
						<view v-else class="openVip">更多优惠</view>
						<view class="returnVip">专享会员权益</view>
					</view>
					<view class="float_right vipRight"><image src="https://onlineimg.qianniao.vip/v-2.png" alt="" /></view>
				</view>
			</view>
		</view>
		<view class="main_view">
			<text class="view_text vip-title-t">会员权益</text>
			<view class="content">
				<ul class="clearfix gqbm-ul">
					<li v-if="infoList.freeShipping === 5" class="quick-btn-item">
						<text class="ibonfont ibonbaoyou"></text>
						<view class="qt-tit">包邮特权</view>
					</li>
					<li v-if="infoList.vipDiscount === 5" class="quick-btn-item">
						<text class="ibonfont ibonhuiyuanqia-dazhe"></text>
						<view class="qt-tit">折扣特权</view>
					</li>
					<li v-if="infoList.hasMonthCoupon === 5" class="quick-btn-item">
						<text class="ibonfont ibonyouhuiquan"></text>
						<view class="qt-tit">优惠券特权</view>
					</li>
				</ul>
			</view>
		</view>
		<!-- <view class="vip-super">
			<img src="https://onlineimg.qianniao.vip/v-2.png" alt="">
			<text class="vip-title">超级会员权益</text>
		</view> -->
		<view class="main-get" v-if="infoList.hasMonthCoupon === 5">
			<text class="view_text">每月优惠券</text>
			<scroll-view scroll-x class="coupon-hua">
				<view class="ye_color clearfix" v-for="item in infoList.monthCoupon" :key="item.id">
					<view class="float_left coupon-price">
						<view class="vip-price">
							￥
							<text>{{ $_utils.formatNub(item.reducePrice) }}</text>
						</view>
						<view class="vip-coupon">优惠券</view>
					</view>
					<view class="float_left vip-line"></view>
					<view class="float_right coupon-desc">
						<view class="vip-coupon-desc coupon-b">{{ item.name }}</view>
						<view class="vip-coupon-desc">有效期：一个月</view>
					</view>
				</view>
			</scroll-view>
			<view class="look-coupon" v-if="infoList.hasBuy === 4 && infoList.hasReceived === 4">开卡后领取</view>
			<view class="look-coupon" @click="hasCoupon" v-else-if="infoList.hasReceived === 5 && infoList.hasBuy === 5">本月已经领取</view>
			<view class="look-coupon" @click="getCoupon" v-else-if="infoList.hasReceived === 4 && infoList.hasBuy === 5">一键领取并查看</view>
		</view>
		<view class="main_view view_li">
			<text class="view_text">使用说明</text>
			<view class="m_title"><textarea style="width:100%" :disabled="true" auto-height v-model="remark" /></view>
		</view>
		<view class="vip-bottom" v-if="parseFloat(infoList.price) > 0 || (parseInt(infoList.renew) === 4 && parseFloat(infoList.price) === 0)">
			<view class="vip-btn" v-if="parseFloat(infoList.price) === 0 && parseInt(infoList.renew) === 4" @click="noMoey"><text>免费领取</text></view>
			<view class="vip-btn" v-else-if="parseInt(infoList.renew) === 4" @click="goPay">
				立即开通
				<text class="btn-text" v-if="infoList.effectiveMonth > 0">￥{{ $_utils.formatNub(infoList.price) }}/{{ infoList.effectiveMonth }}个月</text>
				<text v-else>/ 永久有效</text>
			</view>
			<view class="vip-btn" v-else-if="parseInt(infoList.renew) === 5 && parseFloat(infoList.price) !== 0" @click="goPay">
				立即续费
				<text v-if="infoList.effectiveMonth > 0">￥{{ $_utils.formatNub(infoList.price) }}/{{ infoList.effectiveMonth }}个月</text>
				<text v-else>/ 永久有效</text>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			vipId: '',
			infoList: {},
			source: '', //订单来源
			monthCouponIds: '',
			payInfo: '',
			remark: [],
			// 判断是否领取过
			received: ''
		};
	},
	onLoad(options) {
		this.vipId = options.id;
		this.source = this.$common.source();
		this.getVipInfo();
	},
	methods: {
		async goPay(item) {
			// if (this.$store.state.baseSet.personnelReview === 5) {
			// 验证账户状态
			this.userAudit();
			if (!this.isUserAudit) {
				return;
			}
			// }
			if (this.received === 5) {
				uni.showModal({
					title: '此会员卡购买成功后，其余拥有会员卡自动作废',
					success: async res => {
						if (res.confirm) {
							this.payCheck();
						}
					}
				});
			} else {
				this.payCheck();
			}
		},
		payCheck() {
			if (this.infoList.price > 0) {
				uni.navigateTo({
					url: `/pagesT/money/pay?price=${this.infoList.price}&vip=${1}&vipId=${this.infoList.id}`
				});
			} else {
				this.$u.api
					.createVipCardOrder({
						payType: 1,
						source: this.source,
						vipCardId: this.infoList.id
					})
					.then(({ data }) => {
						this.payInfo = data;
						if (this.payInfo.orderId) {
							this.$api.msg('免费领取成功，请在我的会员卡里查看');
							this.getlist();
						}
					});
			}
		},
		// 已经领取过，仅作提示语
		claimed() {
			this.$api.msg('免费会员卡只可领取一次，不能重复领取');
		},
		hasCoupon() {
			this.$api.msg('优惠券每月只可领取一次，不能重复领取');
		},
		getVipInfo() {
			this.$u.api.getVipInfo(this.vipId).then(({ data }) => {
				this.infoList = data;
				this.remark = this.infoList.remark.split('/n');
				this.monthCouponIds = data.monthCouponIds;
				this.received = data.received;
			});
		},
		// 免费领取
		noMoey() {
			if (this.received === 5) {
				uni.showModal({
					title: '此会员卡购买成功后，其余拥有会员卡自动作废',
					success: res => {
						if (res.confirm) {
							this.$u.api
								.createVipCardOrder({
									payType: 1,
									source: this.source,
									vipCardId: this.infoList.id
								})
								.then(({ data }) => {
									this.payInfo = data;
									if (this.payInfo.orderId) {
										this.$api.msg('免费领取成功，请在我的会员卡里查看');
									}
									this.getVipInfo();
								});
						}
					}
				});
			} else {
				this.$u.api
					.createVipCardOrder({
						payType: 1,
						source: this.source,
						vipCardId: this.infoList.id
					})
					.then(({ data }) => {
						this.payInfo = data;
						if (this.payInfo.orderId) {
							this.$api.msg('免费领取成功，请在我的会员卡里查看');
						}
						this.getVipInfo();
					});
			}
		},
		// 一键领取优惠券
		async getCoupon() {
			this.$u.api
				.oneKeyReceive({
					couponId: this.monthCouponIds,
					vipCardId: this.vipId
				})
				.then(res => {
					this.$api.msg('领取成功');
					this.goPage('/pagesT/user/DiscountCoupon');
				});
		}
	}
};
</script>

<style lang="scss">
page {
	background-color: #f5f9fc;
}

.vimg {
	width: 100%;
	background-color: #000000;
}

.vip-discount {
	font-size: 40upx;
	padding: 0 10upx;
}

.vimg .butImg {
	width: 100%;
	height: 300rpx;
	margin-top: 100rpx;
}

.contAll {
	color: #ffffff;
	padding-top: 80rpx;
	height: 70rpx;
	// transform: translateX(30rpx);

	.img {
		width: 70rpx;
		height: 70rpx;
		border-radius: 35px;
		display: inline-block;
		vertical-align: middle;
		margin-left: 30upx;
	}

	.contUser {
		font-size: 30rpx;
		font-weight: bold;
		margin: 0 20rpx;
		// transform: translateY(10rpx);
	}

	.cont_desc {
		display: inline-block;
		// transform: translateY(10rpx);
		border: 1rpx solid rgba(127, 127, 127, 1);
		border-radius: 20rpx 0rpx 20rpx 0rpx;
		padding: 10upx;
		font-size: 24rpx;
		text-align: center;
		color: #7f7f7f;
	}
}

.vipRight image {
	width: 121rpx;
	height: 90rpx;
	position: absolute;
	top: 80upx;
	right: 80upx;
}

.vipCont {
	margin-top: 100rpx;
	height: 300rpx;
	width: 100%;
	display: block;
}

.vip-cont-in {
	// padding: 58upx 80upx 0;
}

.vip-head {
	position: relative;
}

.vipContit {
	position: absolute;
	top: 60upx;
	left: 80upx;

	.openVip {
		font-size: 32rpx;
		font-weight: bold;
		color: #d8b17f;
		line-height: 70rpx;
	}

	.returnVip {
		// padding-top:18rpx;
		font-size: 30rpx;
		font-weight: 300;
		color: #ffffff;
	}
}

.main-get {
	background: #ffffff;
	padding: 1rpx 20rpx;

	.coupon-hua {
		height: 200upx;
		white-space: nowrap;
		width: 100%;
	}

	.look-coupon {
		margin: 30upx 0 30upx 14upx;
		width: 690upx;
		height: 88upx;
		border: 1px solid #e8caa0;
		background: rgba(255, 255, 255, 1);
		border-radius: 20upx;
		font-size: 30upx;
		color: #e8caa0;
		font-weight: 500;
		text-align: center;
		line-height: 88upx;
	}

	.ye_color {
		display: inline-block;
		color: #ffffff;
		margin: 40upx 0 30upx 30upx;
		width: 492upx;
		height: 160upx;
		background: linear-gradient(90deg, rgba(232, 202, 160, 1), rgba(216, 177, 127, 1));
		border-radius: 20upx;
		padding: 40upx;

		.vip-price {
			width: 100upx;
			white-space: nowrap;
			overflow: hidden;
			font-size: 30upx;
			font-weight: bold;
			padding-bottom: 10upx;
		}

		.vip-coupon {
			font-size: 24upx;
		}

		.coupon-desc {
			width: 240upx;
		}

		.vip-coupon-desc {
			font-size: 24upx;
			width: 240upx;
			overflow: hidden;
			text-overflow: ellipsis;
		}

		.coupon-b {
			padding-bottom: 10upx;
			font-size: 28upx;
		}

		.vip-line {
			padding: 40upx 0;
			transform: translateX(20upx);
			width: 1upx;
			height: 100upx;
			background: rgba(239, 241, 254, 1);
		}
	}

	.view_text {
		position: relative;
		// transform: translateY(-10rpx);
		font-weight: bold;
		font-size: 40rpx;
		color: #111111;
		display: inline-block;
		width: 200rpx;
		text-align: center;
		z-index: 1;

		&:after {
			content: '';
			display: block;
			height: 20upx;
			width: 210rpx;
			background: linear-gradient(90deg, rgba(232, 202, 160, 1), rgba(216, 177, 127, 1));
			opacity: 0.4;
			transform: translateY(-4rpx);
			z-index: -1;
			position: absolute;
			bottom: -10upx;
			left: 0;
		}
	}
}

.main_view {
	padding: 1rpx 20rpx;
	background: #fff;
	// margin: 0 auto;
	width: 100%;
	border-radius: 8rpx;

	// position: relative;
	.vip-title-t {
		transform: translateY(-30rpx);
	}

	.view_text {
		position: relative;
		// transform: translateY(-10rpx);
		font-weight: bold;
		font-size: 40upx;
		color: #111111;
		display: inline-block;
		width: 180rpx;
		text-align: center;
		z-index: 1;

		&:after {
			content: '';
			display: block;
			height: 20upx;
			width: 180rpx;
			background: linear-gradient(90deg, rgba(232, 202, 160, 1), rgba(216, 177, 127, 1));
			opacity: 0.4;
			transform: translateY(-4rpx);
			z-index: -1;
			position: absolute;
			bottom: -10upx;
			left: 0;
		}
	}
}

.mi_title {
	text-align: center;
	font-size: 18upx;
	color: #8f8f8f;
	margin: 10upx 0;
}

.m_title {
	padding: 30upx 30upx 200upx 30upx;
	display: block;
	width: 100%;
	text-align: left;
	font-size: 28upx;
	color: #8f8f8f;
	margin: 10upx 0;
}

.text_color {
	color: #c1a167;
	font-size: 28upx;
}

.text_border {
	color: #000;
	border: 2upx solid #111111;
	border-radius: 22upx;
	text-align: center;
	display: inline-block;
	font-size: 18upx;
	width: 160upx;
	height: 50upx;
	line-height: 50upx;
}

.bg_color {
	margin: 50upx 0;
	width: 100%;
	height: 194upx;
	background: linear-gradient(to right, #373737, #4a4a4a);

	.card-padd {
		padding: 80upx 30upx;
	}
}

.vip-bottom {
	background-color: #ffffff;
	position: fixed;
	bottom: 0;
	width: 100%;
	padding: 20upx 0;
	// height: 100upx;
	z-index: 95;
	box-shadow: 10px 10px 20px 10px rgba(193, 192, 192, 1);
}

.vip-btn {
	margin: 0 auto;
	width: 690upx;
	height: 88upx;
	background: linear-gradient(90deg, rgba(232, 202, 160, 1), rgba(216, 177, 127, 1));
	border-radius: 20upx;
	text-align: center;
	font-size: 30rpx;
	font-weight: 600;
	line-height: 88upx;
}

.btn-text {
	padding-left: 20upx;
}

.content {
	.gqbm-ul {
		list-style: none;
		width: 100%;
		color: #333;
		padding: 30upx 36upx;

		.quick-btn-item {
			float: left;

			.qt-tit {
				font-size: 28rpx;
				font-weight: 300;
				transform: translateX(-12rpx);
			}
			.ibonfont {
				width: 76upx;
				height: 60upx;
				display: inline-block;
				font-size: 76rpx;
				color: #d8a96c;
				margin: 0 105rpx 30rpx 0;
			}
		}

		.quick-btn-item:nth-child(4n + 0) {
			padding-right: 0;
		}
	}
}

.vip-super {
	height: 111upx;
	font-size: 40upx;
	line-height: 111upx;
	text-align: center;

	image {
		width: 48upx;
		height: 35upx;
	}

	.vip-title {
		padding-left: 12upx;
		font-weight: 500;
	}
}
</style>