|
|
@@ -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>
|
