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>