zkxw/mobile-h5/pages/login/web-qr/index.vue

<template>
  <view class="web-qr-page">
    <view class="web-qr-brand">
      <image
        class="web-qr-brand__logo"
        src="/static/logo.png"
        mode="widthFix"
      />
      <view class="web-qr-brand__title">网页登录授权</view>
    </view>

    <view v-if="!sessionId" class="web-qr-card web-qr-card--error">
      <text class="web-qr-msg">请从电脑登录页重新扫码</text>
    </view>

    <view v-else-if="done" class="web-qr-card web-qr-card--ok">
      <text class="web-qr-msg web-qr-msg--ok">电脑端即将登录，可关闭本页</text>
    </view>

    <view v-else class="web-qr-card">
      <text class="web-qr-desc">
        正在登录电脑端管理后台，请授权手机号完成验证
      </text>

      <view class="login-agree" @click="toggleAgree">
        <view class="login-agree__box" :class="{ 'is-on': agreed }">
          <text v-if="agreed" class="login-agree__check">✓</text>
        </view>
        <view class="login-agree__text">
          已阅读并同意
          <text class="login-agree__link" @click.stop="openProtocol('user')">
            《用户协议》
          </text>
          和
          <text class="login-agree__link" @click.stop="openProtocol('privacy')">
            《隐私政策》
          </text>
        </view>
      </view>

      <button
        v-if="agreed"
        class="web-qr-btn oa-btn-loading"
        :class="{ 'is-loading': loading }"
        open-type="getPhoneNumber"
        :disabled="loading"
        @getphonenumber="onGetPhoneNumber"
      >
        <view class="oa-btn-loading__label">授权手机号并登录电脑端</view>
        <view v-if="loading" class="oa-btn-loading__spin" aria-hidden="true" />
      </button>
      <view
        v-else
        class="web-qr-btn oa-btn-loading"
        :class="{ 'is-loading': loading }"
        @click="onWechatGate"
      >
        <view class="oa-btn-loading__label">授权手机号并登录电脑端</view>
        <view v-if="loading" class="oa-btn-loading__spin" aria-hidden="true" />
      </view>
    </view>

    <ConfirmDialog
      :show="agreeDialogVisible"
      title="请先同意协议"
      cancel-text="取消"
      confirm-text="同意并授权"
      :confirm-open-type="agreeDialogForWechat ? 'getPhoneNumber' : ''"
      @update:show="agreeDialogVisible = $event"
      @confirm="onAgreeConfirm"
      @cancel="onAgreeCancel"
      @getphonenumber="onAgreeGetPhoneNumber"
    >
      <text>授权前需阅读并同意</text>
      <text class="confirm-dialog__link" @click.stop="openProtocol('user')">
        《用户协议》
      </text>
      <text>和</text>
      <text class="confirm-dialog__link" @click.stop="openProtocol('privacy')">
        《隐私政策》
      </text>
      <text>。是否同意并继续？</text>
    </ConfirmDialog>
  </view>
</template>

<script>
  import { webQrScanned, webQrConfirm } from '../../../utils/auth.js'
  import ConfirmDialog from '../../../components/ConfirmDialog.vue'

  export default {
    components: {
      ConfirmDialog
    },
    data() {
      return {
        sessionId: '',
        done: false,
        agreed: false,
        agreeDialogVisible: false,
        agreeDialogForWechat: false,
        loading: false
      }
    },
    onLoad(options) {
      const opts = options || {}
      let sid = ''
      if (opts.scene) {
        try {
          sid = decodeURIComponent(String(opts.scene))
        } catch (e) {
          sid = String(opts.scene)
        }
      } else if (opts.sessionId) {
        sid = String(opts.sessionId)
      }
      sid = (sid || '').trim()
      this.sessionId = sid
      if (!sid) return
      webQrScanned(sid).catch(() => {
        /* 软失败：PC 仍可继续轮询或用户可重试授权 */
      })
    },
    methods: {
      toggleAgree() {
        this.agreed = !this.agreed
      },
      onWechatGate() {
        if (this.loading) return
        this.agreeDialogForWechat = true
        this.agreeDialogVisible = true
      },
      onAgreeConfirm() {
        this.agreed = true
        this.agreeDialogVisible = false
        this.agreeDialogForWechat = false
      },
      onAgreeCancel() {
        this.agreeDialogVisible = false
        this.agreeDialogForWechat = false
      },
      onAgreeGetPhoneNumber(e) {
        this.agreed = true
        this.agreeDialogVisible = false
        this.agreeDialogForWechat = false
        this.onGetPhoneNumber(e)
      },
      openProtocol(type) {
        uni.navigateTo({ url: `/pages/protocol/index?type=${type}` })
      },
      async onGetPhoneNumber(e) {
        if (this.loading || this.done || !this.sessionId) return
        if (!this.agreed) {
          this.agreeDialogForWechat = true
          this.agreeDialogVisible = true
          return
        }
        const detail = (e && e.detail) || {}
        const errMsg = detail.errMsg || ''
        if ((errMsg && errMsg.indexOf('ok') === -1) || !detail.code) {
          uni.showToast({
            title: '需要授权手机号才能完成扫码登录',
            icon: 'none'
          })
          return
        }
        this.loading = true
        try {
          const loginRes = await new Promise((resolve, reject) => {
            uni.login({ provider: 'weixin', success: resolve, fail: reject })
          })
          const loginCode = loginRes && loginRes.code
          if (!loginCode) {
            throw new Error('微信登录失败，请重试')
          }
          await webQrConfirm({
            sessionId: this.sessionId,
            loginCode,
            phoneCode: detail.code
          })
          this.done = true
        } catch (err) {
          uni.showToast({
            title: (err && err.message) || '授权失败',
            icon: 'none'
          })
        } finally {
          this.loading = false
        }
      }
    }
  }
</script>

<style scoped>
  .web-qr-page {
    min-height: 100vh;
    padding: 120rpx 48rpx 64rpx;
    box-sizing: border-box;
    background: #fff;
  }

  .web-qr-brand {
    text-align: center;
    margin-bottom: 48rpx;
  }

  .web-qr-brand__logo {
    display: block;
    width: 320rpx;
    margin: 0 auto;
    border-radius: 16rpx;
  }

  .web-qr-brand__title {
    margin-top: 24rpx;
    font-size: 34rpx;
    font-weight: 600;
    color: #0a9f6d;
  }

  .web-qr-card {
    background: #f7faf8;
    border: 1px solid #e2ebe6;
    border-radius: 24rpx;
    padding: 40rpx 32rpx;
  }

  .web-qr-card--error .web-qr-msg {
    color: #c45656;
  }

  .web-qr-card--ok {
    background: #e9f9f2;
    border-color: #a7f3d0;
  }

  .web-qr-desc {
    display: block;
    font-size: 28rpx;
    line-height: 1.6;
    color: #334155;
    margin-bottom: 36rpx;
  }

  .web-qr-msg {
    display: block;
    font-size: 28rpx;
    line-height: 1.6;
    text-align: center;
    color: #334155;
  }

  .web-qr-msg--ok {
    color: #087f57;
    font-weight: 500;
  }

  .web-qr-btn {
    margin-top: 32rpx;
    height: 88rpx;
    border-radius: 44rpx;
    background: #0a9f6d;
    color: #fff;
    font-size: 30rpx;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    padding: 0;
    line-height: 1;
  }

  .web-qr-btn.is-loading {
    opacity: 0.75;
  }

  button.web-qr-btn::after {
    border: none;
  }
</style>