applet/pages/login/wxLogin.vue

<template>
  <view class="login-container">
    <!-- <navbar ref="navbar" :config="config" backColor="#000" /> -->
    <uv-navbar title="登录" placeholder autoBack></uv-navbar>
    <image :src="$handleImageUrl('/logo.png')" mode="aspectFill"></image>
    <!-- <view class="title">赣鄱特产，浓情家味</view> -->
    <button class="auth-btn" type="default" @click="authLogin">授权登录</button>
    <view class="agree">
      <uv-checkbox-group v-model="checked">
        <uv-checkbox customStyle="display:flex;" name="1" activeColor="#ff4736">
          <view>我已阅读并同意 <text class="agree-text" @click.stop="goToAgreement()">《隐私协议》</text></view>
        </uv-checkbox>
      </uv-checkbox-group>
      <!-- <view class="agree_text">《隐私协议》</view> -->
    </view>
    <register ref="RegisterRef" />
  </view>
</template>

<script setup>
import {
  authorizationLogin,
  getOpenId,
  userInfo
} from "@/api/login.js"
import register from "./components/register.vue"
import { ref } from 'vue'
const checked = ref([]);
let code = "";
let isLoading = false, openId = null;
const RegisterRef = ref();
const authLogin = () => {
  if (!checked.value || checked.value.length === 0) {
    uni.showToast({
      title: '请先勾选隐私协议!',
      icon: 'none'
    });
    return false
  }
  if (isLoading) return
  isLoading = true;
  uni.showLoading({
    title: '登录中...'
  })
  uni.login({
    provider: 'weixin', //使用微信登录
    success: async (loginRes) => {
      if (loginRes.errMsg && loginRes.errMsg == 'login:ok' && loginRes.code) {
        code = loginRes.code;
        wxAuthorization(loginRes.code);
      } else {
        isLoading = false;
        uni.showToast({
          title: '登录失败!',
          icon: 'none'
        });
      }
    },
    fail: () => {
      isLoading = false;
      uni.showToast({
        title: '登录失败!',
        icon: 'none'
      });
    }
  })
}
const goAgreement = (val) => {
  uni.navigateTo({
    url: "/pages/user/agreement?type=" + val
  })
}
// 登录
const wxAuthorization = (code) => {
  getOpenId({ code: code }).then(res => {
    const {
      openId,
    } = res.data || {}
    authorizationLogin({ openId: openId, clientType: 1}).then(res => {
      if (res.data.token) {
        // 已注册
        getUser(res.data.token)
      } else {
        // 未注册 - 前往注册
        RegisterRef.value.open(openId)
      }
    }).catch((e) => {
      // 未注册 - 前往注册
      if (e.code == 100011) {
        RegisterRef.value.open(openId)
      }
    }).finally(() => {
      uni.hideLoading();
    })
  }).catch(err => {
    uni.showToast({
      title: '登录失败!',
      icon: 'none'
    })
  }).finally(() => {
    uni.hideLoading();
    isLoading = false;
  })
}

const getUser = (token) => {
  uni.setStorageSync('apiToken', token);
  userInfo().then(res => {
    uni.setStorageSync("personal", res.data)
    uni.switchTab({
      url: '/pages/tabtar/personalCenter'
    })
  })
}

const goToAgreement = () => {
  uni.navigateTo({
    url: "/pages/protocol/index?code=privacy_protocol"
  })
}

</script>
<style lang='scss' scoped>
.login-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 30rpx;
  box-sizing: border-box;

  > image {
    width: 210rpx;
    height: 210rpx;
    margin: 100rpx auto 30rpx;
  }

  .title {
    margin: 0 0 70rpx;
    font-size: 34rpx;
    text-align: center;
  }

  .auth-btn {
    width: 100%;
    height: 90rpx;
    line-height: 90rpx;
    margin-bottom: 30rpx;
    color: #fff;
    background-color: #ff4736;
    border-radius: 40rpx;
  }

  .privacy {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28rpx;

    .txt {
      color: #ff4736;
    }
  }

  .agree {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 24rpx;
    color: #999999;

    .agree-text {
      color: #0073ef;
      // font-size: 28rpx;
    }
  }
}
::v-deep .uv-checkbox-group {
  justify-content: center;
  flex: none;
}
// .agree_text {
//   color: #0073ef;
//   font-size: 28rpx;
// }
</style>