junzitang/pagesT/user/VipList.vue

<template>
	<view :class="['qn-page-' + theme]">
		<u-tabs-swiper
			ref="tabs"
			font-size="28"
			:current="tab_current"
			inactive-color="#2A2A2A"
			:active-color="primaryColor"
			:bar-style="{ borderRadius: '0', height: '4rpx', backgroundColor: primaryColor }"
			:list="navList"
			:is-scroll="false"
			@change="tabClick"
		></u-tabs-swiper>
		<!-- 空白页 -->
		<Aempty text="您还没有相关会员卡" src="https://onlineimg.qianniao.vip/list.png" v-if="vipList.length === 0"></Aempty>
		<scroll-view @scrolltolower="scrollBootom" scroll-y="true" class="vip-scroll">
			<view
				class="bg_color"
				:class="
					item.styleId === 1
						? 'card-style-golden'
						: item.styleId === 2
						? 'card-style-erythrine'
						: item.styleId === 3
						? 'card-style-gray'
						: item.styleId === 4
						? 'card-style-brown'
						: item.styleId === 5
						? 'card-style-blue'
						: item.styleId === 6
						? 'card-style-black'
						: ''
				"
				v-for="item in vipList"
				:key="item.id"
				@click="checkVip(item)"
			>
				<view class="clearfix one_title">
					<image class="float_left vip_img" src="https://onlineimg.qianniao.vip/vip-icon.png" mode="aspectFit" />
					<view class="float_left vip-name">{{ item.name }}</view>
					<view v-if="parseFloat(item.price) === 0 && parseInt(item.renew) === 4" class="float_right like_btn" @click.stop="goPay(item)">免费领取</view>
					<view v-else-if="parseInt(item.renew) === 4" class="float_right like_btn" @click.stop="goPay(item)">立即开通</view>
					<view v-else-if="parseInt(item.renew) === 5 && parseFloat(item.price) !== 0" class="float_right like_btn" @click.stop="goPay(item)">立即续费</view>
				</view>
				<view v-if="tab_current === 0" class="vip-time">有效期：{{ item.effectiveDate === 5 ? '永久有效' : item.effectiveMonth + '个月' }}</view>
				<view v-else class="vip-time">{{ item.effectiveDate === 5 ? '有效期:永久有效' : '有效期至：' + $_utils.formatDate(item.expireTime) }}</view>
				<view class="vip-bottom clearfix">
					<view class="vip-yh float_left">折扣优惠·更多权限</view>
					<view class="vip-price float_right">
						<text class="rmb-ic">¥</text>
						{{ Number(item.price) }}
					</view>
				</view>
				<view class="vip-discount">
					{{ parseFloat(item.discount) }}
					<text class="vip-dis">折</text>
				</view>
			</view>
			<u-loadmore margin-top="20" v-if="vipList.length" :status="loading_status" />
		</scroll-view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			title: '',
			sources: '',
			loading_status: 'loadmore',
			vipList: [],
			tab_current: 0,
			page: 1,
			source: '',
			pageSize: 10,
			pageTotal: 0,
			payInfo: '',
			// 判断是否领取过
			received: '', // 4当前没有会员卡，5当前用户有
			navList: [
				{
					name: '全部'
				},
				{
					name: '我的会员卡'
				}
			]
		};
	},
	onLoad(options) {
		// 判断选择是1或2
		this.sources = parseInt(options.sources) || 0;
		if (this.sources === 1) {
			this.tab_current = 1;
			this.getMyVipCards();
		} else {
			this.getAllVipCard();
		}
		this.source = this.$common.source();
	},
	methods: {
		// 选择vip
		checkVip(item) {
			this.goPage(`/pagesT/user/VipDetail?id=${item.id}`);
		},
		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(item);
						}
					}
				});
			} else {
				this.payCheck(item);
			}
		},
		payCheck(item) {
			if (item.price > 0) {
				uni.navigateTo({
					url: `/pagesT/money/pay?price=${item.price}&vip=${1}&vipId=${item.id}`
				});
			} else {
				this.$u.api
					.createVipCardOrder({
						payType: 1,
						source: this.source,
						vipCardId: item.id
					})
					.then(({ data }) => {
						this.payInfo = data;
						if (this.payInfo.orderId) {
							this.$api.msg('免费领取成功，请在我的会员卡里查看');
							this.getlist();
						}
					});
			}
		},
		// 下拉请求
		scrollBootom() {
			if (this.pageTotal / this.pageSize > this.page) {
				this.page += 1;
				this.getlist();
			}
		},
		getlist() {
			if (this.tab_current === 0) {
				this.getAllVipCard();
			} else {
				this.getMyVipCards();
			}
		},
		// 获取会员列表
		getAllVipCard() {
			this.loading_status = 'loading';
			this.$u.api
				.getAllVipCard({
					page: this.page,
					pageSize: this.pageSize
				})
				.then(({ data, pageTotal, received }) => {
					if (this.page === 1) {
						this.vipList = data;
					} else {
						this.vipList = this.vipList.concat(data);
					}
					this.pageTotal = pageTotal;
					this.received = received;
					this.loading_status = this.$_utils.loadStatus(this.page, this.pageSize, this.pageTotal);
				});
		},
		// 获取我的会员卡
		getMyVipCards() {
			this.loading_status = 'loading';
			this.$u.api
				.getMyVipCards({
					page: this.page,
					pageSize: this.pageSize
				})
				.then(({ data, pageTotal }) => {
					if (this.page === 1) {
						this.vipList = data;
					} else {
						this.vipList = this.vipList.concat(data);
					}
					this.pageTotal = pageTotal;
					this.loading_status = this.$_utils.loadStatus(this.page, this.pageSize, this.pageTotal);
				});
		},
		//顶部tab点击
		tabClick(index) {
			this.vipList = [];
			this.tab_current = index;
			this.getlist();
		},
		changeTab(e) {
			this.vipList = [];
			this.tab_current = e.target.current;
			this.getlist();
		}
	}
};
</script>

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

.vip-scroll {
	/* #ifdef H5 */
	height: calc(100vh - 88upx - 44px);
	/*#endif*/

	/* #ifdef MP || APP-PLUS*/
	height: calc(100vh - 88upx);
	/*#endif*/
}

.vip-discount {
	position: absolute;
	left: 0upx;
	top: 0upx;
	width: 100%;
	text-align: center;
	font-size: 200upx;
	opacity: 0.3;

	.vip-dis {
		font-size: 30upx;
		color: #ffffff;
	}
}

.card-style-golden {
	background: linear-gradient(to right, #c1a167, #e9d5aa);
}

.card-style-erythrine {
	background: linear-gradient(to right, #745757, #966d6d);
}

.card-style-gray {
	background: linear-gradient(to right, #434247, #7a7985);
}

.card-style-brown {
	background: linear-gradient(to right, #736e6c, #978c8c);
}

.card-style-blue {
	background: linear-gradient(to right, #576074, #6d7b96);
}

.card-style-black {
	background: linear-gradient(to right, #373737, #4a4a4a);
}

.bg_color {
	margin: 30upx auto 0;
	height: 270upx;
	width: 600upx;
	padding: 0 30upx;
	border-radius: 20upx;
	color: #ffffff;
	font-size: 25upx;
	color: rgba($color: #ffffff, $alpha: 0.8);
	position: relative;

	.vip-bottom {
		position: absolute;
		bottom: 5upx;
		left: 24upx;
		width: 550upx;
		line-height: 90upx;

		// padding: ;
		.vip-yh {
			color: rgba($color: #ffffff, $alpha: 0.8);
			padding-top: 10upx;
		}

		.vip-price {
			font-size: 60upx;
			font-weight: bold;
			text-align: right;
			color: #ffffff;
			.rmb-ic {
				font-weight: 400;
				font-size: 24upx;
				margin-right: 10upx;
			}
		}
	}

	.vip-time {
		padding-top: 20upx;
		font-size: 24upx;
		color: rgba($color: #ffffff, $alpha: 0.7);
	}

	.one_title {
		position: relative;
		padding-top: 30upx;

		.vip-name {
			color: #ffffff;
			font-size: 32upx;
			font-weight: 600;
		}

		.vip_img {
			width: 40rpx;
			height: 40rpx;
			// transform: translateX(-20rpx);
			vertical-align: middle;
			margin-right: 20upx;
			opacity: 0.9;
		}
	}

	.like_btn {
		position: relative;
		z-index: 10;
		font-size: 24upx;
		color: #333333;
		display: inline-block;
		height: 42upx;
		width: 120upx;
		border-radius: 28upx;
		background: rgba($color: #ffffff, $alpha: 0.6);
		text-align: center;
		line-height: 42upx;
	}

	.discount {
		font-size: 30upx;

		.normal_font {
			font-size: 18upx;
		}
	}

	.expiration {
		padding: 20upx 0;
	}
}
</style>