yunshengtai-uniapp/pages/user/agreement/index.vue

<template>
	<!--pages/user/agreement/index.wxml-->
	<view>
		<view class="back-btn" :style="'top:' + navTopHeight + 'rpx'" @tap="backPage">
			<image src="/static/images/back.png" mode></image>
		</view>
		<view class="pay-box" v-if="userInfo.nickname != '' && userInfo.isVip == 1">
			<image src="https://download.cyjyyjy.com/pay1.png" class="img1"></image>
			<image src="https://download.cyjyyjy.com/pay2.png" class="img2"></image>
		</view>
		<view class="agreement-box" v-else>
			<image src="https://download.cyjyyjy.com/agreement1.png" class="img1"></image>
			<image src="https://download.cyjyyjy.com/agreement2.png" class="img2"></image>
			<image src="https://download.cyjyyjy.com/agreement3.png" class="img3"></image>
			<!-- <image src="../../../images/agreement.png" class="img"></image> -->
			<view class="btn-box" @tap="toPay" v-if="userInfo.nickname"></view>
			<block v-else>
				<button class="btn-box" v-if="canIUseGetUserProfile" @tap="getUserProfile"></button>
				<button class="btn-box" v-else-if="canIUse" open-type="getUserInfo" @getuserinfo="getUserInfo"></button>
				<view v-else> 请使用1.4.4及以上版本基础库 </view>
			</block>
		</view>
	</view>
</template>

<script>
	// pages/user/agreement/index.js
	const app = getApp();

	export default {
		data() {
			return {
				navTopHeight: app.globalData.menuTop + app.globalData.navTopHeight + 10,
				userInfo: null,
				canIUse: uni.canIUse('button.open-type.getUserInfo'),
				canIUseGetUserProfile: false,
				code: "",
				hasUserInfo: false
			};
		},

		components: {},
		props: {},

		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function(options) {
			if (uni.getUserProfile) {
				this.setData({
					canIUseGetUserProfile: true
				});
			}

			uni.login({
				success: res => {
					// 发送 res.code 到后台换取 openId, sessionKey, unionId
					this.setData({
						code: res.code
					});
				}
			});
			let pages = getCurrentPages();
			app.http('get', 'userinfo').then(res => {
				if (res.data.success) {
					uni.setStorageSync('userInfo', res.data.data);
					this.setData({
						userInfo: res.data.data
					});
				}
			}).then(() => {
				if (pages[pages.length - 2]) {

				} else {
					if (this.userInfo.isVip) {
						setTimeout(() => {
							uni.reLaunch({
								url: '/pages/user/mine/index'
							});
						}, 2000);
					}
				}
			});
		},

		/**
		 * 生命周期函数--监听页面初次渲染完成
		 */
		onReady: function() {},
		onShow: function() {
			app.getInfo();
		},

		/**
		 * 生命周期函数--监听页面隐藏
		 */
		onHide: function() {},

		/**
		 * 生命周期函数--监听页面卸载
		 */
		onUnload: function() {},

		/**
		 * 页面相关事件处理函数--监听用户下拉动作
		 */
		onPullDownRefresh: function() {},

		/**
		 * 页面上拉触底事件的处理函数
		 */
		onReachBottom: function() {},

		/**
		 * 用户点击右上角分享
		 */
		onShareAppMessage: function() {},
		methods: {
			getUserProfile(e) {
				// 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认，开发者妥善保管用户快速填写的头像昵称，避免重复弹窗
				uni.getUserProfile({
					desc: '展示用户信息',
					// 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
					success: response => {
						uni.showLoading({
							title: '登陆中...'
						});
						let data = {
							code: this.code,
							iv: response.iv,
							encryptedData: response.encryptedData,
							spread: 0,
							login_type: 0
						};
						app.http('POST', 'wxapp/auth', data).then(result => {
							if (result.data.success) {
								uni.hideLoading();
								uni.setStorageSync('token', 'Bearer ' + result.data.data.token);
								uni.setStorageSync('userInfo', result.data.data.user);
								uni.showModal({
									title: "提示",
									content: '登陆成功！点击确定按钮完善信息',
									success: res => {
										if (res.confirm) {
											if (result.data.data.user.isVip == false) {
												uni.navigateTo({
													url: '../personalData/index'
												});
											} else {
												setTimeout(() => {
													uni.reLaunch({
														url: '/pages/user/index'
													});
												}, 1000);
											}
										} else {
											if (result.data.data.user.isVip == false) {
												uni.navigateTo({
													url: '../personalData/index'
												});
											} else {
												setTimeout(() => {
													uni.reLaunch({
														url: '/pages/user/index'
													});
												}, 1000);
											}
										}
									}
								});
							} else {
								uni.showToast({
									title: result.data.msg,
									icon: 'none'
								});
							}
						});
					}
				});
			},

			getUserInfo(e) {
				// 不推荐使用getUserInfo获取用户信息，预计自2021年4月13日起，getUserInfo将不再弹出弹窗，并直接返回匿名的用户个人信息
				this.setData({
					userInfo: e.detail.userInfo,
					hasUserInfo: true
				});
			},

			toPay() {
				uni.navigateTo({
					url: '../personalData/index'
				});
			},

			backPage() {
				uni.navigateBack({
					delta: 1
				});
			},

			/**
			 * 生命周期函数--监听页面显示
			 */
			getUser() {
				this.setData({
					userInfo: uni.getStorageSync('userInfo')
				});
			}

		}
	};
</script>
<style>
	/* pages/user/agreement/index.wxss */
	.agreement-box {
		width: 100%;
		position: relative;
	}

	.agreement-box image {
		width: 100%;
		display: block;
	}

	.agreement-box .img {
		height: 2848rpx;
	}

	.agreement-box .img1 {
		height: 924rpx;
	}

	.agreement-box .img2 {
		height: 834rpx;
	}

	.agreement-box .img3 {
		height: 1090rpx;
	}

	.btn-box {
		width: 440rpx !important;
		height: 142rpx !important;
		padding: 0 !important;
		position: absolute;
		top: 658rpx;
		left: 50%;
		margin-left: -220rpx !important;
		background: none !important;
	}

	.pay-box {
		width: 100%;
		min-height: 100vh;
	}

	.pay-box image {
		width: 100%;
		display: block;
	}

	.pay-box .img1 {
		height: 609rpx;
	}

	.pay-box .img2 {
		height: 1235rpx;
	}
</style>