uniapp/pagesAccount/vip/index.vue

<template>
	<view class="content">
		<view class="one">
			<scroll-view :scroll-x="true" class="money_scroll_view">
				<view :class="['list',form.active==index?'active':'']" v-for="(item,index) in moneyList" :key="index"
					@tap="toChange(item,index)">
					<view class="title">
						{{item.title}}
					</view>
					<view class="money">
						<span class="fh">¥</span>{{item.money}}
					</view>
					<view class="other">
						有效期:{{item.days}}天
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="two">
			<view class="two_1">
				<button @tap="toBuy">确认协议并立即以{{form.money}}元支付</button>
			</view>
			<view class="agree">
				<checkbox-group @change="changeAgree">
					<label>
						<checkbox :checked="agree" />
						<text @tap.stop="toAgree()">我已阅读并同意“会员服务协议”</text>
					</label>
				</checkbox-group>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 用户信息
				userInfo: {},
				// vip信息
				moneyList: [],
				form: {
					active: 0,
					mongy: 0
				},
				// 用戶协议
				agree: true,
				// 修改用户信息
				updateUser: {},
			}
		},
		onLoad() {
			const that = this;
			// 查询用户信息
			that.searchUser();
			// 查询其他信息
			that.searchOther();
		},
		methods: {
			// 查询用户信息
			searchUser() {
				const that = this;
				uni.getStorage({
					key: 'token',
					success: async (res) => {
						let user = that.$jwt(res.data);
						let arr = await that.$api(`user/${user._id}`, 'GET');
						if (arr.errcode == '0') {
							that.$set(that, `userInfo`, arr.data)
						}
					},
					fail: (err) => {
						console.log('暂无登录信息');
					}
				})
			},
			// 选择
			toChange(e, index) {
				const that = this;
				let form = {
					active: index,
					money: e.money,
					days: e.days
				}
				that.$set(that, `form`, form)
			},
			// 购买
			toBuy() {
				const that = this;
				let user = that.userInfo;
				let money = that.form.money;
				let days = that.form.days;
				// 1:是否同意协议
				if (that.agree == true) {
					if (user && user._id) {
						let updateUser;
						if (user && user.is_vip == '0') {
							let vip_start_time = that.$moment().format('YYYY-MM-DD HH:mm:ss');
							let vip_end_time = that.$moment().add(days, 'days').format('YYYY-MM-DD HH:mm:ss');
							updateUser = {
								id: user._id,
								is_vip: '1',
								vip_start_time: vip_start_time,
								vip_end_time: vip_end_time
							}
							// 用户基本信息修改
							that.$set(that, `updateUser`, updateUser);
							// 支付
							that.oneBuy({
								user_id: user._id,
								money: money
							})
						} else if (user && user.is_vip == '1') {
							let vip_end_time = that.$moment(user.vip_end_time).add(days, 'days').format(
								'YYYY-MM-DD HH:mm:ss');
							updateUser = {
								id: user._id,
								vip_end_time: vip_end_time
							}
							// 用户基本信息修改
							that.$set(that, `updateUser`, updateUser);
							// 支付
							that.oneBuy({
								user_id: user._id,
								money: money
							})
						}
					} else {
						uni.showToast({
							title: '暂无用户信息，无法支付！',
							icon: 'none'
						})
					}

				} else {
					uni.showToast({
						title: '请阅读并同意“会员服务协议”',
						icon: 'none'
					})
				}

			},
			// 支付
			oneBuy(e) {
				const that = this;
				// uni.requestPayment--支付
				uni.showModal({
					title: '支付',
					content: `您确认要支付${e.money}元吗？`,
					success: function(res) {
						if (res.confirm) {
							console.log('确认支付');
							that.toPay(e)
						} else if (res.cancel) {
							console.log('取消支付');
						}
					}
				});
			},
			// 确认支付
			async toPay(e) {
				const that = this;
				// 支付成功-修改个人信息，创建支付记录
				let updateUser = that.updateUser;
				let form = {
					user_id: that.userInfo._id,
					user_name: that.userInfo.nick_name,
					money_no: 'NO' + that.$moment().valueOf(),
					type: 'VIP',
					create_time: that.$moment().format('YYYY-MM-DD HH:mm:ss'),
					money: e.money
				}
				let res;
				res = await that.$api(`user/${updateUser.id}`, 'POST', updateUser);
				if (res.errcode == '0') {
					res = await that.$api('moneylog', 'POST', form);
					if (res.errcode == '0') {
						uni.showToast({
							title: '开通成功',
							icon: 'success'
						})
						uni.navigateBack()
					} else {
						uni.showToast({
							title: res.errmsg,
							icon: 'error'
						})
					}
				}

			},
			// 同意隐私协议
			changeAgree() {
				const that = this;
				let agree = true;
				if (that.agree) agree = false;
				that.$set(that, `agree`, agree);
			},
			// 查看会员服务协议
			toAgree() {
				const that = this;
				uni.navigateTo({
					url: `/pagesAccount/other/vipagree`
				})
			},
			// 查询其他信息
			async searchOther() {
				const that = this;
				let res;
				// 查询vip信息
				res = await that.$api('vipsetting', 'GET', {
					is_use: '0'
				})
				if (res.errcode == '0') {
					that.$set(that, `moneyList`, res.data);
					if (res.total > 0) {
						let form = {
							active: 0,
							money: res.data[0].money,
							days: res.data[0].days
						}
						console.log(form);
						that.$set(that, `form`, form)
					}
				}
			}
		}
	}
</script>

<style lang="scss">
	.content {
		background-color: var(--rgb000);
		padding: 0 2vw;
		overflow-y: auto;

		.one {
			margin: 10px 0;

			.money_scroll_view {
				white-space: nowrap;

				.list {
					display: inline-block;
					margin: 0 10px 0 0;
					background-color: var(--rgbfff);
					padding: 8px;
					border-radius: 5px;
					text-align: center;

					.title {
						font-size: 14px;
						font-weight: bold;
						margin: 0 0 10px 0;
					}

					.money {
						font-size: 16px;
						font-weight: bold;
						color: var(--rgbffd);
						margin: 0 0 10px 0;

						.fh {
							font-size: 12px;
							padding: 0 5px 0 0;
						}
					}

					.other {
						font-size: 12px;
						font-weight: bold;

					}
				}

				.list:last-child {
					margin: 0;
				}

				.active {
					background-color: var(--rgbfa4);
				}
			}

		}

		.two {
			.two_1 {
				margin: 0 0 15px 0;

				button {
					border-radius: 25px;
					color: var(--rgbffd);
					font-family: monospace;
					font-weight: bold;
				}
			}
		}

		.agree {
			text-align: center;
			font-size: 12px;
			margin: 0 0 2vw 0;
			color: var(--rgbfff);
		}
	}
</style>