ChronicDisease_UniApp/src/pages/login/login.vue

<template>
  <CustomNav title="登录" leftType="home" />
  <view class="login-container">
    <view class="avatar-area">
      <!-- only available in Weixin Mini Program: chooseAvatar open-type -->
      <!-- 使用 tap 事件在打开前设置锁，防止重复调用导致 chooseAvatar:fail 错误 -->
      <button
        class="avatar-wrapper"
        :class="{ disabled: isChoosing }"
        :disabled="isChoosing"
        open-type="chooseAvatar"
        @tap="startChooseAvatar"
        @chooseavatar="onChooseAvatar"
      >
        <view class="avatar-frame">
          <image class="avatar-img" :src="avatarUrl" mode="aspectFill" />
        </view>
      </button>
    </view>

    <form @submit.prevent="onSubmit">
      <input class="nickname-input" type="nickname" placeholder="请输入昵称" v-model="nickname" @blur="onNicknameBlur" />

      <button form-type="submit" class="login-btn">使用微信登录并完善信息</button>
    </form>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { onMounted } from 'vue'
import PageTitle from '@/components/PageTitle.vue'
import CustomNav from '@/components/CustomNav.vue'

const title = ref('登录')

const defaultAvatarUrl = 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0'
const avatarUrl = ref(defaultAvatarUrl)
// 防止重复触发 chooseAvatar 的并发锁
const isChoosing = ref(false)
const nickname = ref('')

// 处理chooseAvatar事件回调（微信小程序）
function onChooseAvatar(e: any) {
  // 在微信小程序中，e.detail 可能包含 avatarUrl（字符串）或更复杂结构
  try {
    const detail = e?.detail
    let url = ''
    if (!detail) {
      // 兼容某些平台直接传回字符串
      url = typeof e === 'string' ? e : ''
    } else if (typeof detail === 'string') {
      url = detail
    } else if (detail.avatarUrl) {
      url = detail.avatarUrl
    } else if (Array.isArray(detail) && detail[0]) {
      url = detail[0]
    }
    if (url) {
      avatarUrl.value = url
    }
    // 如果 detail 中包含昵称（某些平台可能提供），尝试填充
    if (detail && detail.nickName && !nickname.value) {
      nickname.value = detail.nickName
    }
  } catch (err) {
    // ignore
  } finally {
    // 无论成功或失败，都在回调后清理并发锁
    isChoosing.value = false
  }
}

// 在点击（tap）打开 chooseAvatar 之前设置锁，防止重复打开
function startChooseAvatar() {
  if (isChoosing.value) {
    // 如果已经在打开中，直接忽略后续点击
    return
  }
  isChoosing.value = true
  // 为了避免因回调丢失导致一直锁住，设置一个安全超时（3s）作为兜底
  setTimeout(() => {
    isChoosing.value = false
  }, 3000)
}

function onNicknameBlur() {
  // 微信会在 onBlur 时进行安全检测，若不通过会清空输入，这里仅作默认处理
}

function onSubmit() {
  // 保存用户信息到本地存储（可以改为调用后端或 uni.login + 后端换取 session）
  const user = {
    avatar: avatarUrl.value,
    nickname: nickname.value || '微信用户'
  }
  uni.setStorageSync('user_info', user)

  // 如果是在小程序端，使用 navigateBack 或 switchTab 返回个人中心
  // 直接尝试使用 switchTab 返回个人中心（若失败则 navigateTo）
  try {
    uni.switchTab({ url: '/pages/profile/profile' })
  } catch (e) {
    uni.navigateTo({ url: '/pages/profile/profile' })
  }
}
</script>

<style>
.login-container {
  padding: 40rpx;
  padding-top: calc(var(--status-bar-height) + 44px + 40rpx);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.avatar-area {
  margin-top: 80rpx;
  margin-bottom: 40rpx;
}

.avatar-wrapper {
  width: 180rpx;
  height: 180rpx;
  border-radius: 180rpx;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 0px;
  padding-right: 0px;
}

.avatar-frame {
  width: 100%;
  height: 100%;
  border-radius: 90rpx;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.nickname-input {
  width: 100%;
  height: 80rpx;
  border: 1rpx solid #ddd;
  border-radius: 8rpx;
  padding: 0 20rpx;
  margin-bottom: 30rpx;
}

.login-btn {
  width: 100%;
  height: 80rpx;
  background-color: #007aff;
  color: #fff;
  border-radius: 8rpx;
  line-height: 80rpx;
  text-align: center;
}
</style>