初步完成

zhangwei

2024-09-02 a2ddd3bec584b6eb91ab8845353fdb40c9b37ebe

 src/pages/mine/mine.vue

@@ -7,24 +7,31 @@
         </button>

      </view>
      <fui-list :topBorder='false'>
         <fui-list-cell arrow :bottomBorder='false' :padding="['20rpx', '32rpx', '20rpx', '32rpx']">
            <view class="fui-list__item">
               <text>昵称</text>
               <text class="fui-text__explain">{{userInfo.nickname}}</text>
               <!-- <input type="nickname" class="fui-text__explain weui-input" placeholder="请输入昵称" /> -->
            </view>
         </fui-list-cell>
         <fui-list-cell arrow :bottomBorder='false' :padding="['20rpx', '32rpx', '20rpx', '32rpx']">
            <view class="fui-list__item">
               <text>手机号</text>
               <text class="fui-text__explain">{{userInfo.phone}}</text>
            </view>
         </fui-list-cell>
         <fui-list-cell arrow @click="goApply" :bottomBorder='false' :padding="['20rpx', '32rpx', '20rpx', '32rpx']">
            <text>申请接单</text>
         </fui-list-cell>
      </fui-list>
      <up-cell title="昵称" :border="false">
         <template #value>
            <up-form labelPosition="left" :model="userInfo" ref="formRef" labelWidth='90' v-if="showEdit">
               <up-form-item prop="enterpriseInfo.businessLicense" ref="item1">
                  <up-input v-model="userInfo.nickname" type="nickname" @blur="blurNickName" border="none"
                     placeholder="请输入昵称" :readonly='!showEdit'>
                     <template #suffix>
                        <up-button @tap="saveUserNikename" text="保存" type="success" form-type="submit"
                           size="mini"></up-button>
                     </template>
                     <!-- <template #suffix v-else>
                        <up-icon name="edit-pen" @click='isShow'></up-icon>
                     </template> -->
                  </up-input>
						
               </up-form-item>
            </up-form>
            <text v-else>{{userInfo.nickname}}</text>
         </template>
         <template #right-icon v-if='!showEdit'>
            <up-icon name="edit-pen" @click='isShow'></up-icon>
         </template>
      </up-cell>
      <up-cell title="手机号" :value="userInfo.phone" isLink :border="false"></up-cell>
      <up-cell @click="goApply" title="申请接单" isLink :border="false"></up-cell>
      <!-- <view class="tabbtns">
         <up-button color='#fece01' class="text-69" text="保存" @click=''></up-button>
      </view> -->
@@ -32,6 +39,9 @@
</template>

<script setup>
   import {
      apiBaseUrl
   } from '@/common/setting/constVarsHelper.js';
   import {
      onLoad,
      onShow
@@ -45,7 +55,8 @@
   const {
      $upload,
      $api,
      $db
      $db,
      $util
   } = getCurrentInstance().appContext.config.globalProperties
   onLoad(() => {
      // getUser()
@@ -60,24 +71,97 @@
      phone: '',
      userWorker: false
   })
   let showEdit = ref(false)
   // let src = "http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg"
   const goApply = () => {
      uni.navigateTo({
         url: '/pages/mine/apply'
      });
   }
   const isShow = () => {
      showEdit.value = true
   }
   const onChooseAvatar = (e) => {
      const {
         avatarUrl
      } = e.detail
      avatarUrlImg.value = avatarUrl
      console.log(typeof(avatarUrl), avatarUrl, 'avatarUrl’');
      avatarUrlImg = avatarUrl
      uploadFile(avatarUrl)
   }
   const uploadFile = (val) => {
      let userToken = $db.get("userToken");
      uni.uploadFile({
         url: apiBaseUrl + 'api/UpFile/UpdateFile',
         filePath: val,
         fileType: 'image',
         name: 'file',
         header: {
            'Accept': 'application/json',
            'Content-Type': 'multipart/form-data',
            'Authorization': 'Bearer ' + userToken
         },
         formData: {
            'method': 'images.upload',
            'upfile': val
         },
         success: (uploadFileRes) => {
            //console.log("交互成功");
            //console.log(uploadFileRes);
            let res = JSON.parse(uploadFileRes.data);
            let obj = {
               Avatar: res.data
            }
            console.log(res.data, res, 'res.data', obj);
            $api.saveUser(obj).then(res => {
               if (res.code == 1) {
                  $util.showToast({
                     title: "头像保存成功！",
                     icon: "success"
                  })
                  getUser()
               }
            })
         },
         fail: (error) => {
            console.log("交互失败");
            console.log(error);
            if (error && error.response) {
               $upload.showError(error.response);
            }
         },
         complete: () => {
            setTimeout(function() {
                  uni.hideLoading();
               },
               250);
         }
      });
   }
   const getUser = (e) => {
      $api.getUser().then(res => {
         userInfo.nickname = res.data.nickname
         userInfo.phone = res.data.phone
         avatarUrlImg = res.data.avatar
         $db.set('userInfo', JSON.stringify(res.data))
      })
   }
   const saveUserNikename = (val) => {
      $api.saveUser({
         Nickname: userInfo.nickname
      }).then(res => {
         if (res.code == 1) {
            $util.showToast({
               title: "昵称保存成功！",
               icon: "success"
            })
            getUser()
            showEdit.value = false
         }
      })
   }
   const blurNickName = (val) => {
      userInfo.nickname = val
   }
</script>

@@ -110,4 +194,8 @@
      color: #7F7F7F;
      flex-shrink: 0;
   }
	
   .u-form-item__body{
      padding: 0 !important;
   }
</style>