ruoyi-miniapp/sub/common/waiting.vue

<template>
  <view class="waiting">
    <u--image
      src="/static/favicon.png"
      width="144px"
      height="144px"
      mode="aspectFit"
      :fade="true"
      duration="200"
    ></u--image>
    <button
      class="login"
      @click="login"
      :loading="loading"
      loadingText="授权中..."
      v-if="!isLogin"
    >
      授权登录
    </button>
    <text v-else class="title">登录成功</text>
  </view>
</template>

<script>
import { getAccessToken, getOpenId } from '@/utils/auth'
import { qrLogin } from '@/api/login'

export default {
  data() {
    return {
      scene: '',
      loading: false,
      isLogin: false
    }
  },
  methods: {
    login() {
      if (!this.scene) {
        uni
          .showModal({
            content: '链接失效，请重新扫码',
            showCancel: false
          })
          .then(() => {
            uni.exitMiniProgram({
              success: res => {
                console.log(res)
              }
            })
          })
      } else {
        this.loading = true
        qrLogin({
          code: this.scene,
          openid: getAccessToken()
        }).then(res => {
          this.loading = false
          this.isLogin = true
          uni.exitMiniProgram()
        })
      }
    }
  },
  onLoad(query) {
    // scene 需要使用 decodeURIComponent 才能获取到生成二维码时传入的 scene
    this.scene = decodeURIComponent(query.scene)
  }
}
</script>

<style lang="scss" scoped>
.waiting {
  height: 100vh;
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
  background: #17c653;
  gap: 40px;
  .login {
    display: flex;
    padding: var(--Number-12px, 12px) var(--Number-40px, 40px);
    justify-content: center;
    align-items: center;
    border-radius: var(--Number-120px, 120px);
    background: var(--LightMode-Light-Light, #fff);
    box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.03);
    color: var(--LightMode-Success-Success, #17c653);
    font-family: 'PingFang SC';
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
  }
  .title {
    font-family: 'PingFang SC';
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
  }
}
</style>