添加了头像

src/views/mine/Archives.vue

@@ -2,13 +2,32 @@
     <div class="archives">
         <div class="user-info">
             <div class="avatar">
-                <a-avatar :size="85" shape="circle" :src="userinfo.img">
+                <a-upload
-                    <template v-slot:icon><UserOutlined /></template>
+                    v-model:fileList="fileList"
-                </a-avatar>
+                    name="avatar"
-                <div class="user-name">
+                    list-type="picture-card"
+                    class="avatar-uploader"
+                    :show-upload-list="false"
+                    :customRequest="uploadspic"
+                    @change="handleChange"
+                >
+                    <a-avatar :size="85" shape="circle" :src="userinfo.img">
+                        <template v-slot:icon><UserOutlined /></template>
+                    </a-avatar>
+                    <div class="mengceng" style="width: 85px;height: 85px;">
+                        修改头像
+                    </div>
+                </a-upload>
+               
+                <div class="user-name" v-if="showname">
+        
+                    <div class="update-btn" @click="updateUserName" style="color: #fff;cursor: unset;">修改</div>
                     <div class="value">{{ userinfo.name }}</div>
                     <div class="update-btn" @click="updateUserName">修改</div>
                 </div>
+                <div class="user-name" v-else>
+                    <a-input size="small" v-model:value="userinfo.name" placeholder="请输入新的昵称" />
+                </div>
             </div>
             <div class="form-box basic">
                 <div class="title">基本信息</div>
@@ -78,7 +97,7 @@
                     </div>
                     <div class="input-box native-lang">
                         <div class="label">母语</div>
-                        <a-select
+                        <!-- <a-select
                             v-model:value="userinfo.mtongue"
                             style="width: 171px"
                             size="small"
@@ -88,7 +107,9 @@
                             <a-select-option v-for="(item, index) in chiveslist[1]" :key="index" :value="item.name">
                                 {{ item.name }}
                             </a-select-option>
-                        </a-select>
+                        </a-select> -->
+                        <a-input size="small" v-model:value="userinfo.mtongue" placeholder="请输入新的母语" />
+
                     </div>
                     <div class="input-box video-lang">
                         <div class="label">短视频</div>
@@ -358,8 +379,11 @@ export default defineComponent({
          * 修改用户名
          * @return { void }
          */
+        const showname = ref(true)
         function updateUserName (): void {
             console.log('修改');
+            showname.value = false
+
         }
         /**
          * 添加我还会说语言
@@ -602,6 +626,17 @@ export default defineComponent({
             console.log(e)
             userinfo.value.currency=e
 
+        }
+        async function uploadspic(file: AntUpload) {
+            const res = await uploadflie(file.file, (info: any) => {
+                console.log(info);
+                // uploadpicprogress.value = info.percent.toFixed(2) * 100;
+            });
+            console.log(res);
+
+            //  picinfo.fileId=res.fileId
+            //  picinfo.url=res.video.url
+            formData.value.img = res.video.url;
         }
          currencyindex.value=userinfo.value.currencyValue
         return {
@@ -641,7 +676,9 @@ export default defineComponent({
             currencylist,
             zonelist,
             currencychange,
-            currencyindex
+            currencyindex,
+            showname,
+            uploadspic
         }
     }
 });
@@ -682,7 +719,8 @@ export default defineComponent({
                 .value {
                     font-size: 17px;
                     color: #111111;
-                    margin-right: 10px;
+                    margin: 0 10px;
+                    line-height: 1;
                 }
             }
         }
@@ -929,6 +967,39 @@ export default defineComponent({
     }
     ::v-deep(.ant-upload-list) {
         display: none;
-      }
+    }
+    .avatar-uploader{
+        width: unset;
+        padding: 0;
+        border: none;
+        background-color: none;
+        position: relative;
+        &::v-deep(.ant-upload){
+            padding: 0;
+            border: none;
+            background-color: #fff;
+            width: unset;
+            height: unset;
+        }
+        .mengceng{
+            
+            position: absolute;
+            left: 0;
+            top: 0;
+            opacity:0;
+            font-size: 10px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: #fff;
+            background-color: #000;
+            border-radius: 50%;
+            line-height: 1;
+            &:hover{
+                opacity: 0.5;
+            }
+        }
+
+    }
 }
 </style>