Anti-fraud-mobile/components/Login/index.vue

<!-- components/login-modal.vue -->
<template>
  <uni-popup ref="popup" type="bottom" :safe-area="false">
    <view class="login-modal">
      <text class="title">请先登录以查看消息</text>
      <button 
        open-type="getUserInfo"
        @getuserinfo="handleAuth"
        class="auth-btn">微信一键登录</button>
      
      <view class="close" @click="close">稍后再说</view>
    </view>
  </uni-popup>
</template>

<script>
export default {
  created() {
    uni.$on('show-login-modal', this.show)
  },
  beforeDestroy() {
    uni.$off('show-login-modal')
  },
  methods: {
    show() {
      if (!this.$refs.popup.isOpened) {
        this.$refs.popup.open()
      }
    },
    close() {
      this.$refs.popup.close()
    },
    async handleAuth(e) {
      if (e.detail.errMsg === 'getUserInfo:ok') {
        try {
          const { code } = await uni.login({ provider: 'weixin' })
          
          // 发送登录请求（复用之前的登录逻辑）
          const res = await uni.request({
            url: '/api/login',
            method: 'POST',
            data: {
              code,
              encryptedData: e.detail.encryptedData,
              iv: e.detail.iv
            }
          })

          if (res.data.token) {
            uni.setStorageSync('token', res.data.token)
            this.close()
            uni.$emit('login-success') // 通知其他页面
          }
        } catch (err) {
          uni.showToast({ title: '登录失败', icon: 'none' })
        }
      } else {
        uni.showToast({ title: '授权失败', icon: 'none' })
      }
    }
  }
}
</script>

<style scoped>
.login-modal {
  background: #fff;
  padding: 40rpx;
  border-radius: 24rpx 24rpx 0 0;
  text-align: center;
}

.title {
  font-size: 32rpx;
  display: block;
  margin-bottom: 40rpx;
}

.auth-btn {
  background: #07c160;
  color: white;
  border-radius: 48rpx;
  margin-bottom: 20rpx;
}

.close {
  color: #666;
  padding: 20rpx;
  font-size: 28rpx;
}
</style>