绿满眶商城微信小程序-uniapp
peng
2025-08-25 55123926ff2dffb26e6b0d4228993013a40c4be8
pages/mine/set/personMsg.vue
@@ -1,14 +1,16 @@
<template>
   <view class="person-msg">
      <view class="head c-content" @click="changeFace">
      <view class="head c-content">
         <image v-if="form.face" :src="endpoint + '/' + form.face" mode=""></image>
         <image v-else :src="'/pages/subComponents/static/missing-face.png'" mode=""></image>
         <view>点击修改头像</view>
         <button class="avatar-button" type="default" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">点击修改头像</button>
      </view>
      <u-form :model="form" ref="uForm" class="form">
         <u-form-item label="昵称" label-width="150">
            <u-input v-model="form.nickName" placeholder="请输入昵称" />
            <u-input v-model="form.nickName" placeholder="请输入昵称" type="nickname"/>
         </u-form-item>
         <u-form-item label="性别" label-width="150">
            <u-radio-group v-model="form.sex" :active-color="lightColor">
               <u-radio name="1">男</u-radio>
@@ -127,6 +129,7 @@
         this.getMemberTag()
      },
      methods: {
         toggleTag(tag) {
            console.log(tag)
         },
@@ -278,39 +281,67 @@
               }
            });
         },
         /**
          * 修改头像
          * @param {Object} e
          */
         onChooseAvatar(e){
            console.log(e.detail.avatarUrl)
            console.log("")
            console.log(e.detail)
            const tempFilePath = e.detail.avatarUrl;
            let fileName = tempFilePath.substring(tempFilePath.lastIndexOf('/') + 1);
            if (fileName.indexOf('%') > -1) {
               fileName = decodeURIComponent(fileName);
            }
            const fileKey = getFileKey(fileName);
            this.cosClient.uploadFile({
               Bucket: this.bucket,
               Region: this.region,
               Key: fileKey,
               FilePath: tempFilePath,
               SliceSize: 1024 * 1024 * 5 /* 触发分块上传的阈值,5M */
            }, (err, data) => {
               if (err) {
                  console.log('上传失败', err);
               } else {
                  this.form.face = fileKey;
               }
            });
         },
         /**
          * 修改头像
          */
         changeFace(index) {
            uni.chooseImage({
               count: 1,
               sizeType: ['compressed'],
               sourceType: ['album'],
               success: (chooseImageRes) => {
                  const tempFilePath = chooseImageRes.tempFilePaths[0];
                  let fileName = tempFilePath.substring(tempFilePath.lastIndexOf('/') + 1);
                  // 处理安卓可能的URI编码
                  if (fileName.indexOf('%') > -1) {
                     fileName = decodeURIComponent(fileName);
                  }
                  const fileKey = getFileKey(fileName);
                  this.cosClient.uploadFile({
                     Bucket: this.bucket,
                     Region: this.region,
                     Key: fileKey,
                     FilePath: tempFilePath,
                     SliceSize: 1024 * 1024 * 5 /* 触发分块上传的阈值,5M */
                  }, (err, data) => {
                     if (err) {
                        console.log('上传失败', err);
                     } else {
                        this.form.face = fileKey;
                     }
                  });
               },
            });
         },
         // changeFace(index) {
         //    uni.chooseImage({
         //       count: 1,
         //       sizeType: ['compressed'],
         //       sourceType: ['album'],
         //       success: (chooseImageRes) => {
         //          const tempFilePath = chooseImageRes.tempFilePaths[0];
         //          let fileName = tempFilePath.substring(tempFilePath.lastIndexOf('/') + 1);
         //          // 处理安卓可能的URI编码
         //          if (fileName.indexOf('%') > -1) {
         //             fileName = decodeURIComponent(fileName);
         //          }
         //          const fileKey = getFileKey(fileName);
         //          this.cosClient.uploadFile({
         //             Bucket: this.bucket,
         //             Region: this.region,
         //             Key: fileKey,
         //             FilePath: tempFilePath,
         //             SliceSize: 1024 * 1024 * 5 /* 触发分块上传的阈值,5M */
         //          }, (err, data) => {
         //             if (err) {
         //                console.log('上传失败', err);
         //             } else {
         //                this.form.face = fileKey;
         //             }
         //          });
         //       },
         //    });
         // },
         /**
          * 选择地址
@@ -497,4 +528,16 @@
      color: #999;
      font-size: 24rpx;
   }
   .avatar-button {
       background: transparent;
       color: $font-color-light;
       font-size: $font-sm;
       line-height: 2em;
       margin: 0;
       padding: 0;
       border: none;
       &::after {
         border: none;
       }
     }
</style>