cfc/cfc-frontend/pages/login/scan-login.vue

<template>
  <view class="page">
    <view class="card">
      <view class="icon">{{ icon }}</view>
      <text class="title">{{ title }}</text>
      <text class="desc">{{ desc }}</text>

      <button
        v-if="status === 'needlogin'"
        class="btn btn-primary"
        @tap="goLogin"
      >微信一键登录</button>

      <button
        v-if="status === 'error'"
        class="btn btn-primary"
        @tap="tryScan"
      >重试</button>

      <button
        v-if="status === 'success'"
        class="btn btn-primary"
        @tap="goHome"
      >进入小程序首页</button>
    </view>
  </view>
</template>

<script>
import { wechatWebScan } from '@/utils/api.js'

export default {
  data() {
    return {
      state: '',
      status: 'loading', // loading / success / needlogin / error
      message: ''
    }
  },
  computed: {
    icon() {
      if (this.status === 'success') return '✅'
      if (this.status === 'error') return '❌'
      if (this.status === 'needlogin') return '🔑'
      return '⏳'
    },
    title() {
      if (this.status === 'success') return '登录成功'
      if (this.status === 'error') return '登录失败'
      if (this.status === 'needlogin') return '需要先登录'
      return '正在确认登录…'
    },
    desc() {
      if (this.status === 'success') return '已与电脑端同步登录，请返回电脑端客户端继续'
      if (this.status === 'error') return this.message || '二维码无效或已过期，请在电脑端重新获取'
      if (this.status === 'needlogin') return '请先登录小程序，登录后将自动完成电脑端登录'
      return '请稍候'
    }
  },
  onLoad(query) {
    this._onLoadFired = true
    query = query || {}
    var state = query.state || ''
    if (!state && query.scene) {
      // 小程序码 scene 为 URL 编码串
      try {
        state = decodeURIComponent(query.scene)
      } catch (e) {
        state = query.scene
      }
    }
    this.state = state || ''
    this.tryScan()
  },
  onShow() {
    // 首次进入：onLoad 已处理；从登录页返回时重新尝试
    if (this._onLoadFired) {
      this._onLoadFired = false
      return
    }
    if (this.state && this.status !== 'success') {
      this.tryScan()
    }
  },
  methods: {
    tryScan() {
      if (!this.state) {
        this.status = 'error'
        this.message = '二维码缺少参数，请在电脑端重新获取'
        return
      }
      var token = uni.getStorageSync('token')
      if (!token) {
        this.status = 'needlogin'
        return
      }
      this.status = 'loading'
      var self = this
      wechatWebScan(this.state).then(function (res) {
        if (res && res.code === 200) {
          self.status = 'success'
        } else {
          self.status = 'error'
          self.message = (res && res.message) || '登录失败'
        }
      }).catch(function (e) {
        self.status = 'error'
        self.message = (e && e.message) || '网络异常，请重试'
      })
    },
    goLogin() {
      uni.navigateTo({ url: '/pages/login/login' })
    },
    goHome() {
      uni.switchTab({ url: '/pages/index/index' })
    }
  }
}
</script>

<style scoped>
.page {
  padding: 40rpx;
  min-height: 100vh;
  background: linear-gradient(135deg, #FFF7ED 0%, #FEF3C7 100%);
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
.card {
  width: 100%;
  max-width: 600rpx;
  margin-top: 16vh;
  background: #FFFFFF;
  border-radius: 24rpx;
  padding: 60rpx 40rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.08);
}
.icon {
  font-size: 96rpx;
  margin-bottom: 24rpx;
}
.title {
  font-size: 36rpx;
  font-weight: 700;
  color: #1E293B;
  margin-bottom: 16rpx;
}
.desc {
  font-size: 28rpx;
  color: #64748B;
  text-align: center;
  line-height: 1.6;
  margin-bottom: 40rpx;
}
.btn {
  width: 100%;
  padding: 28rpx;
  border-radius: 16rpx;
  font-size: 30rpx;
  font-weight: 600;
  text-align: center;
  border: none;
}
.btn-primary {
  background: linear-gradient(135deg, #F97316, #EA580C);
  color: #FFFFFF;
}
</style>