yitisheng-mini-app/pages/zyb/login.vue

<!--登录页面-->
<script>

import ApiConstant from "@/common/ApiConstant";
import Request from '@/common/request'
import StaticConstant from "@/common/StaticConstant";
let request = new Request()
export default {
  name: "home",
  components: {},
  computed: {
    StaticConstant() {
      return StaticConstant
    }
  },
  data() {
    return {
      checkFlag: false,
      isTick: true
    }
  },
  onReady() {

  },
  methods: {
    login(rrrr) {
      var sessionKey = ''
      if (rrrr && rrrr.detail && rrrr.detail.code) {
        //选择授权
        uni.login({
          success: (res) => {
            console.log('获取code', res)
            if (res.code) {
              let code = res.code
              request.post(ApiConstant.User.wxLogin, {
                code: code,
                encryptedData: rrrr.detail.encryptedData,
                iv: rrrr.detail.iv
              }).then(r => {
                console.log('请求登录', r)
                if (r.success) {
                  console.log(r)
                  uni.setStorageSync('token', r.result.token)
                  uni.setStorageSync('userInfo', r.result.userInfo)
                  //uni.setStorageSync('scoreInfo',r.result.scoreInfo)
                  //跳转到首页
                  wx.reLaunch({
                    url: '/pages/zyb/home',
                  })
                } else {
                  uni.showToast({
                    title: '微信授权登录失败',
                    icon: 'none'
                  })
                }
              }).catch(err => {
              }).finally(() => {
              });
            } else {
              uni.showModal({
                title: '未获取到code'
              })
            }
          }
        });
      } else {
        uni.showToast({
          title: '授权失败,请同意授权',
          icon: 'none'
        })
        return
      }
      console.log(rrrr)
    },
    getPhoneNumber(r) {
      console.log('微信授权登录', r.detail)
      if (r.detail.userInfo) {
        uni.showToast({
          title: '授权成功'
        })
      } else {
        // console.log('微信授权失败')
        uni.showToast({
          title: '授权失败,请同意授权',
          icon: 'none'
        })
        return
      }

      let encryptedData = r.detail.encryptedData
      let iv = r.detail.iv
      // 获取code
      uni.getUserProfile({
        desc: 'Wexin', // 这个参数是必须的
        success: res => {
          console.log(res)
        },
        fail: err => {
          console.log(err)
        }
      })

      uni.login({
        success: (res) => {
          console.log('获取code', res)
          if (res.code) {
            let code = res.code
            apiLogin({
              code: code,
              loginType: '0',
              encryptedData: encryptedData,
              iv: iv
            }).then(res => {
              console.log('请求登录', res)
              const data = res[1]['data'];
              if (data.code === 200) {
                // 保存token
                uni.setStorageSync('token', data.data)
                // 判断跳转页面方法

              } else {
                console.log('微信授权登录失败')
                uni.showToast({
                  title: '微信授权登录失败',
                  icon: 'none'
                })
                return
              }
            });
          } else {
            uni.showModal({
              title: '未获取到code'
            })
            return
          }
        }
      });
    },
    gotoMianze() {
      uni.navigateTo({
        url: '/pages/zyb/other/disclaimer'
      })
    },
    gotoXieyi() {
      uni.navigateTo({
        url: '/pages/zyb/other/userAgreement'
      })

    },
    checkboxChange(r) {
      console.log(r)
      if (r.detail.value && r.detail.value.length > 0) {
        this.checkFlag = true
      } else {
        this.checkFlag = false
      }
    }
  },
  onload() {
  }
}
</script>

<template>
  <view class="header" style="border-top:3rpx solid #f6f6f6"></view>
  <view class="content">
    <view class="textcenter">
      <view class="flex">
        <view class="title">
          {{ StaticConstant.systemName }}
        </view>

      </view>
    </view>
    <view class="textcenter">
      <text class="low-title">全国
        <text style="font-size: 35rpx">600</text>
        万+考生的选择
      </text>
    </view>

    <button class='login-but' :disabled="!this.checkFlag" open-type="getPhoneNumber" @getphonenumber="login">
      手机号快捷登录
    </button>

    <view class="uni-flex flex" style="margin-top: 100rpx">
      <checkbox-group @change="checkboxChange">
        <label>
          <checkbox value="cb"/>
          登录代表{{ StaticConstant.systemName }}
          <text style="color: #4975fd" @click="gotoMianze">免责声明、</text>
          <text style="color: #4975fd" @click="gotoXieyi">用户协议</text>
          ，
          并授权使用您的{{ StaticConstant.systemName }}账号信息（如昵称、头像）以便您统一管理
        </label>
      </checkbox-group>
    </view>
  </view>

</template>

<style scoped lang="scss">
.content {
  margin-top: 200rpx;
  padding: 30rpx;
}

.textcenter {
  text-align: center;
  margin: 30rpx 0;
}

/*标题*/
.title {
  margin: 0 auto;
  //color:white;
  font-size: 90rpx;
  font-weight: 600;
}

/*小标题*/
.low-title {
  font-size: 40rpx;
}

///登录按钮
.login-but {
  color: white;
  width: 500rpx;
  background: linear-gradient(rgba(52, 145, 212, 0.83), #3658d0);
  border-radius: 50rpx
}
</style>