-

zhangwei

2024-09-12 f7aa204aa8d20b090d7943969ddeb9871a1fad76

 src/pages/mine/mine.vue

@@ -1,42 +1,191 @@
<template>
   <view class="">
      <view class="content chuany-flex chuany-align-end chuany-justify-center">
         <up-avatar src="/static/avatar.jpg" shape="circle" size='80'></up-avatar>
         <button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
            <!-- <image class="avatar" src="{{avatarUrl}}"></image> -->
            <up-avatar :src="userInfo.avatar" shape="circle" size='80'></up-avatar>
         </button>

      </view>
      <fui-list>
         <fui-list-cell arrow>
            <view class="fui-list__item">
               <text>姓名</text>
               <text class="fui-text__explain">李丽</text>
            </view>
         </fui-list-cell>
         <fui-list-cell arrow>
            <view class="fui-list__item">
               <text>手机号</text>
               <text class="fui-text__explain">13215465785</text>
            </view>
         </fui-list-cell>
         <fui-list-cell arrow @click="goApply">
            <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"  :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> -->
   </view>
</template>

<script setup>
   import {ref} from 'vue';
   import {
      apiBaseUrl
   } from '@/common/setting/constVarsHelper.js';
   import {
      onLoad,
      onShow
   } from "@dcloudio/uni-app";
   import {
      ref,
      reactive,
      getCurrentInstance,
      toRefs,
      computed
   } from 'vue';
   const {
      $upload,
      $api,
      $db,
      $util
   } = getCurrentInstance().appContext.config.globalProperties
   import {
      useStore
   } from 'vuex'
   const store = useStore()
   onLoad(() => {
      // getUser()
   })
   onShow(() => {
      // getUser()
   })
   // let userInfo = reactive({
   //    nickname: '',
   //    phone: '',
   //    userWorker: false
   // })
   let userInfo = computed(() => store.getters.userInfo || {})
   let showEdit = ref(false)
   // let src = "http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg"
   const goApply = ()=>{
   const goApply = () => {
      uni.navigateTo({
         url: '/pages/mine/apply'
      });
   }
   const isShow = () => {
      showEdit.value = true
   }
   const onChooseAvatar = (e) => {
      const {
         avatarUrl
      } = e.detail
      uploadFile(avatarUrl)
   }
   const uploadFile = (val) => {
      uni.showLoading();
      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) => {

            let res = JSON.parse(uploadFileRes.data);
            if (res.code == 1) {
               let obj = {
                  Avatar: res.data
               }
               $api.saveUser(obj).then(red => {
                  if (red.code == 1) {
                     $util.showToast({
                        title: "头像保存成功！",
                        icon: "success"
                     })
                     store.dispatch('getUserInfo')
                  } else {
                     this.$util.showToast({
                        title: red.error
                     })
                  }
               })
            } else {
               this.$util.showToast({
                  title: res.error
               })
            }

         },
         fail: (error) => {
            console.log("交互失败");
            console.log(error);
            if (error && error.response) {
               $upload.showError(error.response);
            }
         },
         complete: () => {
            uni.hideLoading();
         }
      });
   }
   const saveUserNikename = (val) => {
      if(!userInfo.nickname){
         $util.showToast({
            title: "请输入昵称！",
            icon: "success"
         })
         return 
      }
      $api.saveUser({
         Nickname: userInfo.nickname
      }).then(res => {
         if (res.code == 1) {
            $util.showToast({
               title: "昵称保存成功！",
               icon: "success"
            })
            store.commit('setUserInfo',userInfo.value)
            showEdit.value = false
         }
      })
   }
   const blurNickName = (val) => {
      userInfo.nickname = val
   }
</script>

<style>
   .content {
      height: 300rpx;
      background-color: #d8d8d8;
      background: linear-gradient(to bottom, #fbec99, #ffffff);
   }

   .avatar-wrapper {
      border-radius: 50%;
      width: 80px !important;
      height: 80px;
      margin: 0;
      padding: 0;
      background-color: transparent;
   }

   .fui-list__item {
@@ -45,6 +194,7 @@
      display: flex;
      align-items: center;
      justify-content: space-between;

   }

   .fui-text__explain {
@@ -52,4 +202,8 @@
      color: #7F7F7F;
      flex-shrink: 0;
   }

   .u-form-item__body {
      padding: 0 !important;
   }
</style>