library-wechat/subpkg/pages/user-info/user-info.vue

<template>
  <view class="user-info-page">
    <view v-if="pageReady">
      <view class="user-info-section">
        <!-- 点击获取头像 -->
        <button open-type="chooseAvatar" @chooseavatar="onChooseAvatar" class="avatar-btn">
          <image v-show="avatarUrl" :src="avatarUrl" class="avatar-img"></image>
          <image v-show="!avatarUrl" src="@/static/images/logo.jpg" class="avatar-img"></image>
          <text class="tip-text">点击更换头像</text>
        </button>
      </view>

      <!-- 昵称 -->
      <view class="form-item">
        <text class="label">昵称</text>
        <input 
          class="input" 
          type="nickname" 
          v-model="nickname" 
          placeholder="请输入昵称"
        />
        <uni-icons type="right" size="18" color="#ccc"></uni-icons>
      </view>

      <!-- 保存按钮 -->
      <view class="save-box">
        <button class="save-btn" @click="saveUserInfo">保存修改</button>
      </view>
    </view>
  </view>
</template>

<script>
import config from '@/utils/config'
import { FetchBindRead } from '@/api/user';

const USER_KEY = 'user-info';

export default {
  data() {
    return {
      pageReady: false,
      nickname: '',
      avatarUrl: '',  // 仅存放 base64，用于显示
      imgId: '',      // 仅用于提交后端
      saving: false   // 防重复提交
    };
  },
  onReady() {
    //等页面完全渲染完成，再渲染chooseAvatar按钮
    this.pageReady = true;
    this.loadUserInfo();
  },
  methods:{
    // 加载用户信息
    async loadUserInfo() {
      const userInfo = uni.getStorageSync(USER_KEY) || {};
      this.nickname = userInfo.nickname || '';
      const avatarId = userInfo.avatarId || '';
      console.log(userInfo)
      if (avatarId) {
        try {
          uni.showLoading({ title: '加载头像中...' });
          this.imgId = avatarId;
          const url = `${config.baseUrl}/files/${avatarId}`;
          console.log(url)
          this.avatarUrl = url
        } catch (err) {
          console.error('头像加载失败', err);
          this.avatarUrl = '';
        } finally {
          uni.hideLoading();
        }
      } else {
        this.avatarUrl = '';
        this.imgId = '';
      }
    },


    // 选择头像 + 上传 + 转base64预览
    async onChooseAvatar(e) {
      const tempFilePath = e.detail.avatarUrl;
      uni.showLoading({ title: '上传中...' });

      try {
        // 上传头像
        const uploadRes = await new Promise((resolve, reject) => {
          uni.uploadFile({
            // url: config.baseUrl + '/api/fileRelevant/uploadWxAvatarImg',
            url: config.baseUrl + '/api/fileRelevant/uploadHttpsImg',
            filePath: tempFilePath,
            name: 'file',
            success: resolve,
            fail: reject
          });
        });

        const resData = JSON.parse(uploadRes.data);
        const imgId = resData.data;
        this.imgId = imgId;

        // 转base64显示
        // const url = `${config.baseUrl}/api/fileRelevant/getImg?imgType=5&imgId=${imgId}`;
        const url = `${config.baseUrl}/files/${imgId}`;
        // this.avatarUrl = await this.urlToBase64(url);
        this.avatarUrl = url

        uni.showToast({ title: '头像上传成功', icon: 'success' });
      } catch (err) {
        console.error(err);
        uni.showToast({ title: '头像上传失败', icon: 'none' });
      } finally {
        uni.hideLoading();
      }
    },

    // 最简稳定版：图片链接转base64
    urlToBase64(url) {
      return new Promise((resolve, reject) => {
        uni.request({
          url,
          method: 'GET',
          responseType: 'arraybuffer',
          success: (res) => {
            try {
              const base64 = uni.arrayBufferToBase64(res.data);
              resolve(`data:image/jpeg;base64,${base64}`);
            } catch (e) {
              reject(e);
            }
          },
          fail: reject
        });
      });
    },
    // 保存（防重复提交 + 同步缓存）
    async saveUserInfo() {
      if (this.saving) return;
      if (!this.nickname.trim()) {
        uni.showToast({ title: '请输入昵称', icon: 'none' });
        return;
      }

      this.saving = true;
      uni.showLoading({ title: '保存中...' });

      try {
        const openId = uni.getStorageSync('wx_login_code') || '';
        const params = {
          avatar: this.imgId,
          libcode: config.LIB_CODE,
          nickname: this.nickname,
          openid: openId
        };

        const res = await FetchBindRead(params);
        console.log('FetchBindRead',res)
        if(res.code !== 200){
            uni.showToast({title: res.message || '保存失败',icon:'none'})
            return
        }

        // 保存到缓存
        uni.setStorageSync(USER_KEY, {
          nickname: this.nickname,
          avatarId: this.imgId
        });

        uni.showToast({ title: '保存成功', icon: 'success' });
        setTimeout(() => {
          uni.navigateBack();
        }, 1500);

      } catch (error) {
        console.error(error);
        uni.showToast({ title: '保存失败', icon: 'none' });
      } finally {
        uni.hideLoading();
        this.saving = false;
      }
    }

  }
};
</script>

<style lang="scss" scoped>
.user-info-page {
  background-color: #f5f5f5;
  min-height: 100vh;
  padding: 20rpx;
  box-sizing: border-box;
}

.user-info-section {
  background: #fff;
  padding: 40rpx 0;
  border-radius: 12rpx;
  margin-bottom: 20rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.avatar-btn {
  background: transparent;
  pointer-events: auto !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  &::after {
    border: none !important;
  }
}


.avatar-img {
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 10rpx;
}

.tip-text {
  font-size: 26rpx;
  color: #999;
}

.form-item {
  background-color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 30rpx;
  height: 88rpx;
  border-radius: 12rpx;
  margin-bottom: 20rpx;
}

.label {
  font-size: 30rpx;
  color: #333;
  width: 120rpx;
}

.input {
  flex: 1;
  font-size: 30rpx;
  color: #333;
  text-align: right;
}

.save-box {
  margin-top: 60rpx;
  padding: 0 20rpx;
}

.save-btn {
  height: 88rpx;
  line-height: 88rpx;
  background-color: #007aff;
  color: #fff;
  border-radius: 44rpx;
  font-size: 32rpx;
}
</style>