src/app/lib/ServerAPI.js

@@ -72,6 +72,15 @@ class ServerAPI {
         )
     }
 
+    static ChangeUsername(uuid, session, username, callback = function () { }) {
+        core.request(
+            "/User/ChangeUsername",
+            { uuid, session, username },
+            { method: 'POST' },
+            callback
+        )
+    }
+
     static BindWXWork(uuid, session, code, callback = function () { }) {
         core.request(
             "/User/BindWXWork",

src/pages/Setup/UserInfo/BindEmail.vue

@@ -40,7 +40,7 @@ import Footer from '../../../components/Footer.vue';
 import { App } from '../../../app/app';
 import { useRouter } from 'vue-router';
 import { ServerAPI } from '../../../app/lib/ServerAPI';
-import {  Postcard, Finished } from '@element-plus/icons-vue';
+import { Postcard, Finished } from '@element-plus/icons-vue';
 
 let router = useRouter();
 
@@ -112,11 +112,11 @@ let Submit = () => {
         return ElMessage.error('请确保每项不能为空');
 
     ServerAPI.BindEmail(App.user.uuid, App.user.session, form.email, form.code, (res) => {
-        if (!res || res.code !== 0){
+        if (!res || res.code !== 0) {
             getCaptcha();
             return ElMessage.error(`绑定失败！${res.msg || ''}`);
         }
-           
+
         App.refershUser(res.data);
         ElMessage.success('绑定成功！');
         router.push('/UpdateInfo');

src/pages/Setup/UserInfo/UpdateInfoStage1.vue

@@ -9,7 +9,11 @@
 
             <el-form :model="form" ref="formRef" label-width="auto" :label-position="'right'" style>
                 <el-form-item label="用户名" prop="username">
-                    <el-input v-model="form.username" disabled />
+                    <el-input v-model="form.username" placeholder="请输入用户名">
+                        <template #append>
+                            <el-button @click="UpdateUsername">更新名称</el-button>
+                        </template>
+                    </el-input>
                 </el-form-item>
 
                 <el-form-item label="邮箱" prop="email">
@@ -89,6 +93,23 @@ const handleAvatarSuccess = (res) => {
 const handleAvatarFail = () => {
     ElMessage.error('头像上传失败！请稍后再试');
 }
+
+function checkUsername(username) {
+    const regex = /^[\u4e00-\u9fa5A-Za-z0-9]{2,8}$/;
+    return regex.test(username);
+}
+
+const UpdateUsername = () => {
+    if(!checkUsername(form.username))
+        return ElMessage.error('用户名需在2到8位之间，且只能含有英文字母和汉字');
+    ServerAPI.ChangeUsername(App.user.uuid, App.user.session, form.username, (r) => {
+        if(!r || r.code !== 0)
+            return ElMessage.error(`更新用户名失败！${r.msg || ''}`);
+        ElMessage.success('更新用户名成功！');
+        App.refershUser(r.data);
+        router.go(0);
+    })
+}
 </script>
 
 <style scoped>