MedSmartApp/pages/login/index.vue

<template>
  <view class="login-container">
    <!-- 登录标题 -->
    <text class="title">智能医疗问诊系统</text>
    
    <!-- 微信登录按钮 -->
    <button 
      class="wechat-btn" 
      open-type="getPhoneNumber" 
      @getphonenumber="handleGetPhoneNumber"
      @tap="handleGetUserProfile"
    >
      
      <text class="btn-text">微信一键登录</text>
    </button>
    
    <!-- 加载状态 -->
    <view v-if="loading" class="loading-mask">
      <uni-spinner type="circular" color="#07c160" size="40"></uni-spinner>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      loading: false,
      userInfo: null,
      rawData: null
    };
  },
  mounted() {
    this.initWechat();
  },
  methods: {
    initWechat() {
      // 移除依赖 WeixinJSBridge 的代码，因为小程序环境没有该对象
      console.log('跳过依赖 WeixinJSBridge 的初始化');
    },
    handleGetUserProfile() {
      wx.showLoading({
        title: '获取信息中...', // 缩短提示文字
        mask: true
      });
      wx.getUserProfile({
        desc: '用于完善会员资料',
        success: (res) => {
          this.userInfo = res.userInfo;
          this.rawData = res.rawData;
          console.log('获取到的 rawData:', this.rawData); 
          wx.hideLoading();
        },
        fail: (err) => {
          console.error('获取用户信息失败:', err);
          wx.showToast({ title: '请授权后再登录', icon: 'none' });
          wx.hideLoading();
        }
      });
    },
    // 处理获取手机号事件
    handleGetPhoneNumber: async function(e) {
      if (e.detail.errMsg === 'getPhoneNumber:ok') {
        if (!this.rawData) {
          console.error('请先授权获取用户信息');
          wx.showToast({ title: '请先授权获取用户信息', icon: 'none' });
          return;
        }
        try {
          wx.showLoading({
            title: '登录中...', // 缩短提示文字
            mask: true
          });
          this.loading = true;
          const encryptedData = e.detail.encryptedData;
          const iv = e.detail.iv;
          
          const { code } = await new Promise((resolve, reject) => {
            wx.login({
              success: (res) => resolve(res),
              fail: (err) => reject(err)
            });
          });

          const response = await new Promise((resolve, reject) => {
            wx.request({
              url: 'http://localhost:8080/api/auth/wechat/login',
              method: 'POST',
              data: {
                code,
                encryptedData,
                iv,
                rawData: this.rawData // 使用获取到的 rawData
              },
              success: (res) => resolve(res),
              fail: (err) => {
                if (err.errMsg.includes('request:fail url not in domain list')) {
                  wx.showToast({
                    title: '请求域名未配置，请联系管理员',
                    icon: 'none',
                    duration: 3000
                  });
                }
                console.error('网络请求失败:', err);
                reject(err);
              }
            });
          });

          console.log('后端返回的完整数据:', response.data); // 打印完整的响应数据

          if (response.data) {
            if (response.data.wxNickname && response.data.wxAvatarUrl) {
              wx.setStorageSync('userToken', response.data.token);
              wx.setStorageSync('userInfo', {
                userId: response.data.userId,
                wxNickname: response.data.wxNickname,
                wxAvatarUrl: response.data.wxAvatarUrl
              });
              wx.navigateTo({
                url: '/pages/home/index'
              });
            } else {
              console.error('后端未返回微信昵称或头像信息:', response.data);
              wx.showToast({ title: '获取用户信息失败，请重试', icon: 'none' });
            }
          } else {
            console.error('登录响应数据为空:', response);
            wx.showToast({ title: '登录失败，请重试', icon: 'none' });
          }
        } catch (error) {
          console.error('登录过程出错:', error);
          wx.showToast({ title: '登录失败，请重试', icon: 'none' });
        } finally {
          this.loading = false;
          wx.hideLoading();
        }
      } else {
        console.error('用户拒绝授权', e.detail.errMsg);
        wx.showToast({ title: '请授权后再登录', icon: 'none' });
      }
    }
  }
};
</script>

<style scoped lang="scss">
.login-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background-color: #f0f2f5;
}

.title {
  font-size: 36rpx;
  color: #1a73e8;
  margin-bottom: 80rpx;
  font-weight: bold;
}

.wechat-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 600rpx;
  height: 120rpx;
  background-color: #07c160;
  color: white;
  border-radius: 60rpx;
  box-shadow: 0 8rpx 32rpx rgba(7, 193, 96, 0.15);
  font-size: 32rpx;
  margin-bottom: 40rpx;
  
  .wechat-icon {
    width: 60rpx;
    height: 60rpx;
    margin-right: 20rpx;
  }
}

.loading-mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}
</style>