feat: 个人资料

src/api/path/im.api.js

@@ -9,4 +9,9 @@ export function imLogin(param) {
 // 上传文件
 export function uploadFile(param) {
   return service.post('file', param);
-}
+}
+
+// 获取用户信息
+export function userInfoEdit(param) {
+  return service.put('user', param );
+}

src/views/me/personalInformation/index.vue

@@ -1,178 +1,199 @@
 <template>
-    <div class="container">
-        <div class="userimg">
-            <van-image 
-                round 
-                width="60" 
-                height="60" 
-                :src="systemStore.avatar"
-            />
-        </div>
-        <div class="username">{{ systemStore.nickname || "Angel Token"}}</div>
-        <div class="useraddress">
-            <span>0xF3fefE…EcaB</span>
-            <svg-icon style="width: 18px; height: 18px;" name="copy" />
-        </div>
-        <van-list class="user-bar-list">
-            <van-cell title="修改暱稱" value="Wallet" is-link @click="show = true"></van-cell>
-            <van-cell 
-                class="user-bar-list-last" 
-                title="修改頭像">
-                <template #right-icon>
-                    <van-uploader :after-read="afterRead">
-                        <van-icon name="arrow" color="#969799" size="16"/>
-                    </van-uploader>
-                </template>
-            </van-cell>  
-        </van-list>
-        <div class="qrcode">
-            <qrcode-vue :value="qrtext" :size="239" :margin="2" background="transparent"/>
-            <div class="text">掃一掃上面的二維碼，加我爲好友</div>
-        </div>
-        <van-popup v-model:show="show" :style="{ borderRadius:'25px' }">
-            <div class="pop-content">
-                <div class="pop-title">請輸入暱稱</div>
-                <van-field v-model="nickname" class="pop-input"/>
-                <div class="pop-btn">
-                    <van-button type="default" class="btn cancel" @click="show = false">取消</van-button>
-                    <van-button type="default" class="btn confirm" @click="updateUserName">確定</van-button>
-                </div>
-            </div>
-        </van-popup>
+  <div class="container">
+    <div class="userimg">
+      <van-image round width="60" height="60" :src="systemStore.avatar" />
+    </div>
+    <div class="username">{{ systemStore.nickname || "Angel Token" }}</div>
+    <div class="useraddress">
+      <span>0xF3fefE…EcaB</span>
+      <svg-icon style="width: 18px; height: 18px" name="copy" />
+    </div>
+    <van-list class="user-bar-list">
+      <van-cell
+        title="修改暱稱"
+        :value="systemStore.nickname"
+        is-link
+        @click="show = true"
+      ></van-cell>
+      <van-cell class="user-bar-list-last" title="修改頭像">
+        <template #right-icon>
+          <van-uploader :after-read="afterRead">
+            <van-icon name="arrow" color="#969799" size="16" />
+          </van-uploader>
+        </template>
+      </van-cell>
+    </van-list>
+    <div class="qrcode">
+      <qrcode-vue
+        :value="qrtext"
+        :size="239"
+        :margin="2"
+        background="transparent"
+      />
+      <div class="text">掃一掃上面的二維碼，加我爲好友</div>
     </div>
+    <van-popup v-model:show="show" :style="{ borderRadius: '25px' }">
+      <div class="pop-content">
+        <div class="pop-title">請輸入暱稱</div>
+        <van-field v-model="nickname" class="pop-input" />
+        <div class="pop-btn">
+          <van-button type="default" class="btn cancel" @click="show = false"
+            >取消</van-button
+          >
+          <van-button type="default" class="btn confirm" @click="updateUserName"
+            >確定</van-button
+          >
+        </div>
+      </div>
+    </van-popup>
+  </div>
 </template>
 
-<script setup>
-import { userInfoEdit } from "@/api/path/user.api"
-import QrcodeVue from 'qrcode.vue'
-import { useSystemStore  } from "@/stores/modules/systemStore";
-import { useWalletStore  } from "@/stores/modules/walletStore"
-import { uploadFile } from "@/api/path/im.api"
-import { updateUserInfo } from "@/common/login"
+<script setup> 
+import QrcodeVue from "qrcode.vue";
+import { useSystemStore } from "@/stores/modules/systemStore";
+import { useWalletStore } from "@/stores/modules/walletStore";
+import { uploadFile, userInfoEdit } from "@/api/path/im.api";
+import { updateUserInfo } from "@/common/login";
 
 const systemStore = useSystemStore();
-const walletStore = useWalletStore()
+const walletStore = useWalletStore();
 
 const show = ref(false);
-const nickname = ref('');
-const qrtext = ref('');
- 
+const nickname = ref("");
+const qrtext = ref("");
+
 const afterRead = async (file) => {
-    const formData = new FormData();
-    formData.append('uuid', walletStore.account);
-    formData.append('file', file.file);
-    const { code, data} = await uploadFile(formData)
-    if (code === 200) {
-      await updateUserInfo(walletStore.account)
-    }
-}
+  const formData = new FormData();
+  formData.append("uuid", walletStore.account);
+  formData.append("file", file.file);
+  const { code, data } = await uploadFile(formData);
+  if (code === 200) {
+    await updateUserInfo(walletStore.account);
+  }
+};
 
 const updateUserName = async () => {
-  const res = await userInfoEdit({
-    name: nickname.value
-  })
-}
+  const { code} = await userInfoEdit({
+    username:  walletStore.account,
+    nickname:  nickname.value,
+  });
+  if (code === 200) {
+    await updateUserInfo(walletStore.account);
+  }
+  show.value = false;
+};
 </script>
 
 <style lang="less" scoped>
-.container{
-    margin: 25px 17px;
-    .userimg{
-        display: flex;
-        justify-content: center;
-    }
-    .username{
-        text-align: center;
-        margin: 10px 0 4px;
-        font-family: PingFang SC, PingFang SC;
-        font-weight: 500;
-        font-size: 16px;
-        color: @theme-color1;
-    }
-    .useraddress{
-        text-align: center;
-        font-family: PingFang SC, PingFang SC;
-        font-weight: 400;
-        font-size: 12px;
-        color: #8D8D8D;
-        display: flex;
-        align-items: center;
-        justify-content: center;
+.container {
+  margin: 25px 17px;
+  .userimg {
+    display: flex;
+    justify-content: center;
+  }
+  .username {
+    text-align: center;
+    margin: 10px 0 4px;
+    font-family:
+      PingFang SC,
+      PingFang SC;
+    font-weight: 500;
+    font-size: 16px;
+    color: @theme-color1;
+  }
+  .useraddress {
+    text-align: center;
+    font-family:
+      PingFang SC,
+      PingFang SC;
+    font-weight: 400;
+    font-size: 12px;
+    color: #8d8d8d;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .van-cell {
+    height: 42px;
+    background: @bg-color1;
+    border-bottom: 1px solid @bg-color1;
+    font-size: 15px;
+    &::after {
+      border-bottom: 1px solid #f2f2f2;
     }
-    .van-cell{
-        height: 42px;
-        background: @bg-color1;
-        border-bottom: 1px solid @bg-color1;
-        font-size: 15px ;
-        &::after{
-            border-bottom: 1px solid #F2F2F2;
-        }
-        }
-        .user-bar-list-last::after{
-            border-bottom: 0;
-        }
+  }
+  .user-bar-list-last::after {
+    border-bottom: 0;
+  }
 
-        .user-bar-list{
-            margin: 25px 0 37px;
-            border-radius: 12px;
-            overflow: hidden; 
+  .user-bar-list {
+    margin: 25px 0 37px;
+    border-radius: 12px;
+    overflow: hidden;
+  }
+  .qrcode {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    .text {
+      font-family:
+        PingFang SC,
+        PingFang SC;
+      font-weight: 400;
+      font-size: 15px;
+      color: #8d8d8d;
+      margin-top: 10px;
+    }
+  }
+  .pop-content {
+    padding: 27px 35px 25px 34px;
+    .pop-title {
+      font-family:
+        PingFang SC,
+        PingFang SC;
+      font-weight: 500;
+      font-size: 17px;
+      color: #000000;
+      text-align: center;
     }
-    .qrcode{
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        .text{
-            font-family: PingFang SC, PingFang SC;
-            font-weight: 400;
-            font-size: 15px;
-            color: #8D8D8D;
-            margin-top: 10px;
-        }
+    .pop-input {
+      background: #f2f2f2;
+      border-radius: 8px;
+      height: 40px;
+      margin: 21px 0 31px;
     }
-    .pop-content{
-        padding: 27px 35px 25px 34px;
-        .pop-title{
-            font-family: PingFang SC, PingFang SC;
-            font-weight: 500;
-            font-size: 17px;
-            color: #000000;
-            text-align: center;
-        }
-        .pop-input{
-            background: #F2F2F2;
-            border-radius: 8px;
-            height: 40px;
-            margin: 21px 0 31px;
-        }
-        .pop-btn{
-            display: flex;
-            justify-content: center;
-            .btn{
-                width: 83px;
-                height: 29px;
-                line-height: 29px;
-                padding: 5px 0 !important;
-                border-radius: 6px;
-                font-family: PingFang SC, PingFang SC;
-                font-weight: 400;
-                font-size: 15px;
-                box-sizing:border-box;
-            }
-            .cancel{
-                margin-right: 17px !important;
-                border: 1px solid #D8D8D8;
-                color: #000 !important;
-            }
-            .confirm{
-                background: @theme-color1;
-                color: #FFF;
-                font-weight: 500;
-            }
-        }
+    .pop-btn {
+      display: flex;
+      justify-content: center;
+      .btn {
+        width: 83px;
+        height: 29px;
+        line-height: 29px;
+        padding: 5px 0 !important;
+        border-radius: 6px;
+        font-family:
+          PingFang SC,
+          PingFang SC;
+        font-weight: 400;
+        font-size: 15px;
+        box-sizing: border-box;
+      }
+      .cancel {
+        margin-right: 17px !important;
+        border: 1px solid #d8d8d8;
+        color: #000 !important;
+      }
+      .confirm {
+        background: @theme-color1;
+        color: #fff;
+        font-weight: 500;
+      }
     }
+  }
 }
 :deep(.van-popup--center) {
-    margin: 0 40px !important;
-    width: auto !important;
+  margin: 0 40px !important;
+  width: auto !important;
 }
-</style>
+</style>