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>
		<c-drawer :drawer="drawer" @toClose="toClose">
			<view class="drawer_one">
				<uni-forms ref="payForm" :model="payForm" :rules="rules">
					<uni-forms-item name="type">
						<view class="label">支付方式</view>
						<uni-data-checkbox v-model="payForm.type" :localdata="typeList"
							:map="{text:'label',value:'value'}" @change="typeChange"></uni-data-checkbox>
					</uni-forms-item>
					<uni-forms-item>
						<view class="label">支付图片</view>
						<view class="img">
							<image class="image"
								:src="payForm.img_url&&payForm.img_url.length>0?payForm.img_url[0].url:''"
								mode="aspectFit" @tap="imgView(payForm.img_url)">
							</image>
						</view>
					</uni-forms-item>
					<uni-forms-item name="pay_no">
						<view class="label">转账单号/订单号</view>
						<uni-easyinput type="number" v-model="payForm.pay_no" placeholder="请输入转账单号/订单号" />
					</uni-forms-item>
					<!-- <uni-forms-item name="pay_url">
						<view class="label">支付账单明细截图</view>
						<upload :list="payForm.pay_url" name="pay_url" :count="1" @uplSuc="uplSuc" @uplDel="uplDel">
						</upload>
					</uni-forms-item> -->
				</uni-forms>
				<view class="btn">
					<button size="mini" @tap="toSave()">提交支付信息</button>
				</view>
				<view class="other">
					<view class="other_1">
						注：
					</view>
					<view class="other_2">
						<view class="tip">
							1.转账单号(微信)：我-服务-钱包-账单-账单详情
						</view>
						<view class="tip">
							1.订单号(支付宝)：我的-账单-账单详情
						</view>
					</view>
				</view>
			</view>
		</c-drawer>
	</view>
</template>

<script>
	import cDrawer from "../components/c-drawer.vue";
	import upload from "@/components/upload/index.vue";
	export default {
		components: {
			cDrawer,
			upload
		},
		data() {
			return {
				// 基本信息
				basicInfo: {},
				// 用户信息
				userInfo: {},
				// vip信息
				moneyList: [],
				form: {
					active: 0,
					mongy: 0
				},
				// 用戶协议
				agree: true,
				// 修改用户信息
				updateUser: {},
				// 抽屉
				drawer: {
					title: '支付',
					show: false,
					mode: 'right'
				},
				// 支付信息
				payForm: {
					type: '0',
					img_url: [],
					pay_url: []
				},
				rules: {
					pay_no: {
						rules: [{
							required: true,
							errorMessage: '请输入转账单号/订单号',
						}]
					},
					pay_url: {
						rules: [{
							required: false,
							errorMessage: '请上传支付账单明细截图',
						}]
					}
				},
				// 支付方式
				typeList: [{
					"value": 0,
					"text": "微信"
				}, {
					"value": 1,
					"text": "支付宝"
				}]
			}
		},
		onLoad() {
			const that = this;
			// 查询基本信息
			that.searchBasic();
			// 查询用户信息
			that.searchUser();
			// 查询其他信息
			that.searchOther();

		},
		methods: {
			// 查询基本信息
			searchBasic() {
				const that = this;
				uni.getStorage({
					key: 'basicInfo',
					success: (res) => {
						let data = res.data
						data.account_btn = data.account_btn.sort((a, b) => {
							return a.sort - b.sort
						});
						that.$set(that, `basicInfo`, data);
						// 支付方式默认值
						that.typeChange({
							detail: {
								value: '0'
							}
						})
					}
				})
			},
			// 查询用户信息
			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() {
				const that = this;
				that.$set(that, `drawer`, {
					title: '支付',
					show: true,
					mode: 'right'
				})
			},
			typeChange(e) {
				const that = this;
				let basicInfo = that.basicInfo;
				let value = e.detail.value;
				if (value == '0') that.$set(that.payForm, `img_url`, basicInfo.pay_info.wx_url)
				else if (value == '1') that.$set(that.payForm, `img_url`, basicInfo.pay_info.zfb_url)
			},
			// 图片保存
			uplSuc(e) {
				const that = this;
				that.$set(that.payForm, `${e.name}`, [...that.payForm[e.name], e.data]);
			},
			// 图片删除
			uplDel(e) {
				const that = this;
				let data = that.payForm[e.name];
				let arr = data.filter((i, index) => index != e.data.index);
				that.$set(that.payForm, `${e.name}`, arr);
			},
			// 提交保存
			toSave() {
				const that = this;
				that.$refs.payForm.validate().then(res => {
					that.toPay()
				}).catch(err => {
					console.log('表单错误信息：', err);
				})
			},
			// 确认支付
			async toPay() {
				const that = this;
				// 支付成功-修改个人信息，创建支付记录
				let updateUser = that.updateUser;
				let form = that.form;
				let payForm = that.payForm;
				let object = {
					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: form.money,
					pay_no: payForm.pay_no
				}
				let res;
				res = await that.$api(`user/${updateUser.id}`, 'POST', updateUser);
				if (res.errcode == '0') {
					res = await that.$api('moneylog', 'POST', object);
					if (res.errcode == '0') {
						uni.showToast({
							title: '开通成功',
							icon: 'success'
						})
						uni.navigateBack()
					} else {
						uni.showToast({
							title: res.errmsg,
							icon: 'error'
						})
					}
				}
			},
			// 关闭弹框
			toClose() {
				const that = this;
				that.$set(that, `drawer`, {
					title: '支付',
					show: false,
					mode: 'right'
				})
			},
			// 同意隐私协议
			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
						}
						that.$set(that, `form`, form)
					}
				}
				// 支付方式
				res = await that.$api('dictdata', 'GET', {
					type: 'app_pay_type'
				})
				if (res.errcode == '0') {
					that.$set(that, `typeList`, res.data)
				}
			},
			// 图片预览
			imgView(e) {
				const that = this;
				console.log(e);
				console.log(e[0].url);
				uni.previewImage({
					current: 0,
					urls: [e[0].url],
				});
			}
		}
	}
</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);
		}
	}

	.drawer_one {
		.label {
			font-size: 14px;
			margin: 0 0 5px 0;
			font-weight: bold;
		}

		.img {
			width: 100%;
			text-align: center;

			.image {
				width: 100%;
			}
		}


		.uni-forms-item {
			margin: 0;
		}

		.btn {
			text-align: center;
			margin: 30px 0 10px 0;

			button {
				background-color: var(--rgb67c);
				color: var(--rgbfff);
			}
		}

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

			.other_2 {
				.tip {
					font-size: 12px;
					font-weight: bold;
					color: var(--rgbfa4);
					margin: 0 0 5px 0;
				}
			}
		}
	}
</style>