前端

jiangping

2025-07-17 44daeb43fecda93c1a6a1f0e37ad420291f29b0d

 small-program/pages/set-up/set-up.vue

@@ -2,27 +2,22 @@
   <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>
@@ -31,11 +26,73 @@
</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){ 
         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: `web/public/upload?folder=member` ,
              filePath: fileUrl,
              name: 'file', 
              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() {
           var that = this
           this.$u.api.editMemberInfo({
                     name:that.name,
                     coverImage:that.nickname,
                     coverImage:that.coverImage,
            }).then(res =>{
             uni.showToast({
               title: '更新成功',
               icon: "none",
               duration: 2000
             });
            })
         } 
      }
   }
</script>