k94314517
2025-07-17 bbd9c436f23f5fdbe712c4a22d90b457066bdf38
small-program/pages/set-up/set-up.vue
@@ -2,40 +2,115 @@
   <view class="setup">
      <div class="setup-tx">
         <view class="setup-tx-image">
            <image src="/static/logo.png" mode="widthFix"></image>
            <image v-if="fullCoverImage && fullCoverImage !=''" :src="fullCoverImage" mode="widthFix"></image>
            <image v-else src="/static/logo.png" mode="widthFix"></image>
         </view>
         <button open-type="chooseAvatar" class="setup-tx-btn">更换头像</button>
         <button open-type="chooseAvatar"  @chooseavatar="onChooseAvatar" class="setup-tx-btn">更换头像</button>
      </div>
      <view class="setup-list">
         <view class="setup-list-item">
            <view class="label">昵称</view>
            <view class="val">
               <input type="text" placeholder="请输入" />
               <input type="text"  v-model='nickName' placeholder="请输入" />
            </view>
         </view>
         <view class="setup-list-item">
            <view class="label">真实姓名</view>
            <view class="val">
               <input type="text" placeholder="请输入" />
            </view>
         </view>
         <view class="setup-list-item">
            <view class="label">绑定手机</view>
            <view class="val">
               <button open-type="getPhoneNumber">授权</button>
               <input type="text" v-model='name' placeholder="请输入" />
            </view>
         </view>
      </view>
      <view class="setup-sub">退出登录</view>
      <view class="setup-sub" @click="updateMemberInfo">保存</view>
   </view>
</template>
<script>
   import { mapState } from 'vuex'
   export default {
      computed: {
         ...mapState(['navHeight', 'statusbarHeight','userInfo','token','openid'])
      },
      data() {
         return {
            name:null,
            coverImage:null,
            nickName:null,
            fullCoverImage:null
         };
      },
      onShow(options){
         console.log(this.userInfo)
         this.coverImage = this.userInfo.coverImage
         this.nickName = this.userInfo.nickName
         this.fullCoverImage = this.userInfo.fullCoverImage
         this.name = this.userInfo.name
      },
      methods: {
         onChooseAvatar(e){
          const { detail } = e
          var that =this
           uni.compressImage({
            src: detail.avatarUrl,
            quality: 80,
            success: res => {
              that.uploadFile(res.tempFilePath);
            }
           })
         },
         uploadFile(fileUrl) {
           var that = this
           console.log(fileUrl, 'fileUrl')
           uni.uploadFile({
               url: this.$baseUrl + 'web/public/upload',
               filePath: fileUrl,
               name: 'file',
               formData: {
                  'folder': 'member'
               },
               success:(data)=>{
                   const res = JSON.parse(data.data)
                   that.coverImage = res.data.imgaddr
                   that.fullCoverImage = res.data.url
                   that.updateMemberInfo()
               },
               fail:(e)=>{
                  uni.showToast({
                     title: '上传失败',
                     duration: 2000,
                     icon: "none"
                  });
               }
           })
         },
         updateMemberInfo() {
           if((!this.name ||this.name.trim() =='' )
              &&(!this.nickName ||this.nickName.trim() =='')
              &&(!this.coverImage ||this.coverImage.trim() =='')){
              uni.showToast({
                  title: '对不起,请按要求填写信息!',
                  icon: "none",
                  duration: 2000
              });
              return
           }
           var that = this
           this.$u.api.editMemberInfo({
               name:that.name,
               nickName:that.nickName,
               coverImage:that.coverImage,
            }).then(res =>{
                that.userInfo.name = this.name
                that.userInfo.nickName = this.nickName
                that.userInfo.coverImage = this.coverImage
                that.userInfo.fullCoverImage = this.fullCoverImage
               uni.showToast({
                  title: '更新成功',
                  icon: "none",
                  duration: 2000
                });
            })
         }
      }
   }
</script>
@@ -137,7 +212,8 @@
         border-radius: 44rpx;
         font-weight: 500;
         font-size: 32rpx;
         color: #5BBE38;
         color: white;
         background-color: #15CF52;
         margin-top: 80rpx;
         border: 1rpx solid #15CF52;
      }