ruoyi-miniapp/sub/common/waiting.vue

<template>
  <view class="waiting">
    <u--image
      src="/static/favicon.png"
      width="288rpx"
      height="288rpx"
      mode="aspectFit"
      :fade="true"
      duration="200"
    ></u--image>
    <button class="login" @click="login">授权登录</button>
  </view>
</template>

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

export default {
  data() {
    return {
      scene: ''
    }
  },
  methods: {
    login() {
      if (!this.scene) {
        uni
          .showModal({
            content: '链接失效，请重新扫码',
            showCancel: false
          })
          .then(() => {
            uni.exitMiniProgram({
              success: res => {
                console.log(res)
              }
            })
          })
      } else {
        uni.showLoading({
          title: '登陆中。。。'
        })
        qrLogin({
          code: this.scene,
          openid: getAccessToken()
        }).then(res => {
          setTimeout(() => {
            uni.hideLoading()
            uni.switchTab({
              url: '/pages/index'
            })
          }, 3000)
        })
      }
    }
  },
  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, 24rpx) var(--Number-40px, 80rpx);
    justify-content: center;
    align-items: center;
    border-radius: var(--Number-120px, 240rpx);
    background: var(--LightMode-Light-Light, #fff);
    box-shadow: 0px 6rpx 8rpx 0px rgba(0, 0, 0, 0.03);
    color: var(--LightMode-Success-Success, #17c653);
    font-family: 'PingFang SC';
    font-size: 32rpx;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
  }
  .title {
    font-family: 'PingFang SC';
    font-size: 32rpx;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
  }
}
</style>