微信小程序获取用户头像与昵称

微信小程序获取用户头像与昵称

现在已经无法直接获取了，需要通过用户填写方式，参考代码如下：

<script setup>
import { ref, onMounted } from 'vue'
import EmptyHeader from '@/components/empty-header/empty-header.vue'
import { onUploadImage, onUpdateUserInfo } from '@/services/api'

const userInfoRef = ref({
  headImg: '',
  userName: ''
})

// 初始化用户信息
function initUserInfo() {
  const userInfo = uni.getStorageSync('userinfo') || {}
  if (userInfo.headImg && userInfo.userName) {
    userInfoRef.value = {
      headImg: userInfo.headImg,
      userName: userInfo.userName
    }
  } else {
    userInfoRef.value = {
      headImg: '/static/icons/mine.png',
      userName: ''
    }
  }
}

// 页面加载时初始化
onMounted(() => {
  initUserInfo()
})

// TODO 下面单个函数接口还没好
async function onChooseAvatar(e) {
  const tempFilePath = e.detail.avatarUrl
  // 上传头像获取真实链接
  const headImg = await onUploadImage({ tempFilePath })
  userInfoRef.value.headImg = headImg

  // TODO: 检查其他信息是否完备,都完备则更新用户信息
  if (userInfoRef.value.userName && userInfoRef.value.phone) {
    await onUpdateUserInfo({
      phone: userInfoRef.value.phone,
      nickName: userInfoRef.value.userName,
      headImg: userInfoRef.value.headImg
    })
    uni.showToast({
      title: '用户信息已更新',
      icon: 'success'
    })
  }
}

async function onBlurNickname(e) {
  userInfoRef.value.userName = e.detail.value

  // TODO: 检查其他信息是否完备,都完备则更新用户信息
  if (userInfoRef.value.headImg && userInfoRef.value.phone) {
    await onUpdateUserInfo({
      phone: userInfoRef.value.phone,
      nickName: userInfoRef.value.userName,
      headImg: userInfoRef.value.headImg
    })
    uni.showToast({
      title: '用户信息已更新',
      icon: 'success'
    })
  }
}

async function onBlurPhone(e) {
  userInfoRef.value.phone = e.detail.value

  // TODO: 检查其他信息是否完备,都完备则更新用户信息
  if (userInfoRef.value.headImg && userInfoRef.value.userName) {
    await onUpdateUserInfo({
      phone: userInfoRef.value.phone,
      nickName: userInfoRef.value.userName,
      headImg: userInfoRef.value.headImg
    })
    uni.showToast({
      title: '用户信息已更新',
      icon: 'success'
    })
  }
}
</script>

<template>
  <view class="page">
    <empty-header />
    <!-- 用户信息卡片 -->
    <view class="user-card">
      <view class="user-info">
        <button
          open-type="chooseAvatar"
          @chooseavatar="onChooseAvatar">
          <image
            class="avatar"
            :src="userInfoRef.headImg"
            mode="aspectFill" />
        </button>
        <view class="user-detail">
          <text
            v-if="userInfoRef.userName"
            class="nickname">
            {{ userInfoRef.userName }}
          </text>
          <input
            v-else
            type="nickname"
            placeholder="请输入昵称"
            @blur="onBlurNickname" />
          <text
            v-if="userInfoRef.phone"
            class="phone">
            {{ userInfoRef.phone }}
          </text>
          <input
            v-else
            placeholder="请输入手机号"
            @blur="onBlurPhone" />
        </view>
      </view>
    </view>
  </view>
</template>

<style scoped>
.page {
  min-height: 100vh;
  background-color: var(--page-bg-color);
  padding: 20rpx;
  padding-bottom: env(safe-area-inset-bottom);
}

.user-card {
  background: var(--card-bg-color);
  border-radius: 16rpx;
  padding: 60rpx 40rpx;
  margin-bottom: 20rpx;
  box-shadow: var(--box-shadow);
}

.user-info {
  display: flex;
  align-items: center;
}

.avatar {
  width: 140rpx;
  height: 140rpx;
  border-radius: 70rpx;
  margin-right: 30rpx;
  border: 6rpx solid var(--primary-light-color);
}

.user-detail {
  flex: 1;
}

.nickname {
  font-size: 40rpx;
  font-weight: bold;
  color: var(--text-color-primary);
  display: block;
}
</style>