uniAppXCX/pages/login/login.vue

<template>
  <view class="loginPage">
    <image class="bk" :src="'https://file.rongcyl.cn/festatic/bkm/imgv2/loginBk.png'" mode="widthFix"></image>
    <view class="box">
      <image class="logo" :src="'https://file.rongcyl.cn/festatic/bkm/imgv2/logo.png'" mode="widthFix"></image>
      <button @click="wxLogin" class="button" type="default">微信授权登录</button>
      <view class="textButton" @click="noLogin">暂不登录</view>
      <view class="tip">
        <radio :checked="checkbox1" @click="checkbox1 = !checkbox1" style="transform: scale(0.6)" color="#333333" />
        <view class="text">
          我已阅读并同意
          <span class="textColor2" @click="$navigateTo('/pages/userAgreement/userAgreement')">《用户协议》</span>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { loginByWeixinApi } from '@/api/user.js'

import { up } from '@/api/monitor'
export default {
  data() {
    return {
      checkbox1: false,
    }
  },
  onShow() {
    console.log(getCurrentPages(), '宋宋宋宋宋宋宋')
  },
  methods: {
    noLogin() {
      console.log('sssssssss')
      wx.switchTab({
        url: '/pages/index/index',
      })
    },
    wxLogin: function (e) {
      if (!this.checkbox1) {
        wx.showToast({
          title: '请先阅读并同意《用户协议》',
          icon: 'none',
        })
      }
      let _this = this
      wx.getUserProfile({
        desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
        success: res => {
          console.log(res, 'res111')
          _this.getWXCode(res.userInfo)
        },
        fail: () => {
          console.log('微信登录失败')
          // util.showErrorToast('微信登录失败');
        },
      })
    },
    getWXCode(userInfo) {
      let _this = this
      wx.login({
        success: function (res) {
          console.log(res, 'res222')
          if (res.code) {
            let params = {
              code: res.code,
              userInfo: userInfo,
            }
            _this.executeLoginApi(params)
          }
        },
        fail: function (err) {
          reject(err)
        },
      })
    },
    executeLoginApi(params) {
      let _this = this
      console.log(222)
      let inviteId = getApp().globalData.inviteId
      if (inviteId) {
        console.log('有邀请id', inviteId)
        params.inviteId = inviteId
      }
      loginByWeixinApi(params).then(res => {
        console.log('调用登录api', res)
        //存储用户信息
        wx.setStorageSync('userInfo', res.data.userInfo)
        wx.setStorageSync('token', res.data.token)
        wx.setStorageSync('userId', res.data.userId)
        getApp().globalData.hasLogin = true

        up()

        let routerList = getCurrentPages()
        let index = 0
        for (var i = 0; i < routerList.length; i++) {
          if (routerList[i].route == 'pages/login/login') {
            index += 1
          }
        }
        wx.navigateBack({
          delta: index,
        })
      })
    },
  },
}
</script>

<style scoped lang="scss">
.loginPage {
  background: #e6f2ff;
  height: 100vh;
  overflow: hidden;
  // background: url(https://mall.rongtongh.cn/storage/img/ka.jpeg) no-repeat;
  // background-size: 100% 100%;
  .bk {
    height: 100%;
    width: 100%;
  }
  .box {
    position: absolute;
    bottom: 15%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 100%;
    // background-color: rgba(255, 255, 255, 0.7);
    // padding: 30px 10px;
    .logo {
      width: 94px;
      height: 94px;
      margin-bottom: 20vh;
    }
    .tip {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-bottom: 10px;
      color: #000;
      font-size: 12px;

      .checkBox {
        // font-size: 12px;
        height: 12px;
        width: 12px;
      }
    }
    .button {
      height: 48px;
      width: calc(100% - 60px);
      border-radius: 24px;
      line-height: 48px;
      font-size: 14px;
      background: #fea200;
      color: #fff;
      margin-bottom: 20px;
    }
    .textButton {
      font-size: 14px;
      color: #666;
      margin-bottom: 75px;
    }
  }
}
</style>