|
@@ -1,40 +1,58 @@
|
|
|
<template>
|
|
|
<div class="container">
|
|
|
<div class="userimg">
|
|
|
- <van-image
|
|
|
- round
|
|
|
- width="60"
|
|
|
- height="60"
|
|
|
+ <van-image
|
|
|
+ round
|
|
|
+ width="60"
|
|
|
+ height="60"
|
|
|
src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
|
|
|
/>
|
|
|
</div>
|
|
|
- <div class="username">{{walletStore.username}}</div>
|
|
|
+ <div class="username">{{ currentWallet.username }}</div>
|
|
|
<div class="useraddress">
|
|
|
- <span>{{formatAddress(walletStore.account)}}</span>
|
|
|
- <svg-icon style="width: 18px; height: 18px;" name="copy" />
|
|
|
+ <span>{{ formatAddress(currentWallet.account) }}</span>
|
|
|
+ <svg-icon style="width: 18px; height: 18px" name="copy" />
|
|
|
</div>
|
|
|
+
|
|
|
<van-list class="user-bar-list">
|
|
|
- <van-cell title="錢包名稱" :value="walletStore.username" is-link @click="changePop(1)"></van-cell>
|
|
|
- <van-cell title="查看私鑰" value="" is-link @click="changePop(2)"></van-cell>
|
|
|
+ <van-cell
|
|
|
+ title="錢包名稱"
|
|
|
+ :value="currentWallet.username"
|
|
|
+ is-link
|
|
|
+ @click="changePop(1)"
|
|
|
+ ></van-cell>
|
|
|
+ <van-cell
|
|
|
+ title="查看私鑰"
|
|
|
+ value=""
|
|
|
+ is-link
|
|
|
+ @click="changePop(2)"
|
|
|
+ ></van-cell>
|
|
|
</van-list>
|
|
|
+
|
|
|
<van-button class="footer-btn" size="large" @click="changePop(3)">删除钱包</van-button>
|
|
|
- <van-popup v-model:show="show" :style="{ borderRadius:'25px' }">
|
|
|
+
|
|
|
+ <!-- 弹窗:输入名称 / 密码 -->
|
|
|
+ <van-popup v-model:show="show" :style="{ borderRadius: '25px' }">
|
|
|
<div class="pop-content">
|
|
|
- <div class="pop-title">{{type == 1?'請輸入錢包名稱':'請輸入密碼'}}</div>
|
|
|
- <van-field v-model="text" class="pop-input" :type="type == 1?'text':'password'"/>
|
|
|
+ <div class="pop-title">
|
|
|
+ {{ type == 1 ? '請輸入錢包名稱' : '請輸入密碼' }}
|
|
|
+ </div>
|
|
|
+ <van-field v-model="text" class="pop-input" :type="type == 1 ? 'text' : 'password'"/>
|
|
|
<div class="pop-btn">
|
|
|
<van-button type="default" class="btn cancel" @click="cancel">取消</van-button>
|
|
|
<van-button type="default" class="btn confirm" @click="confirm">確定</van-button>
|
|
|
</div>
|
|
|
</div>
|
|
|
</van-popup>
|
|
|
+
|
|
|
+ <!-- 弹窗:显示私钥 -->
|
|
|
<van-popup v-model:show="showkey" position="bottom" round>
|
|
|
<div>
|
|
|
<div class="pop-title-key">
|
|
|
- <svg-icon style="width: 24px; height: 24px;" name="left-arrow" />
|
|
|
+ <svg-icon style="width: 24px; height: 24px" name="left-arrow"/>
|
|
|
<div class="title">查看私钥</div>
|
|
|
</div>
|
|
|
- <div class="pop-text">{{walletStore.privateKey}}</div>
|
|
|
+ <div class="pop-text">{{ qrtext }}</div>
|
|
|
<div class="qrcode">
|
|
|
<qrcode-vue :value="qrtext" :size="156" :margin="1" background="transparent"/>
|
|
|
</div>
|
|
@@ -47,102 +65,129 @@
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
-import QrcodeVue from 'qrcode.vue'
|
|
|
-import { useWalletStore } from "@/stores/modules/walletStore";
|
|
|
+import { ref, computed } from 'vue';
|
|
|
+import QrcodeVue from 'qrcode.vue';
|
|
|
+import { useWalletStore } from '@/stores/modules/walletStore';
|
|
|
import { showNotify } from 'vant';
|
|
|
+import { useRoute } from 'vue-router';
|
|
|
+
|
|
|
const walletStore = useWalletStore();
|
|
|
+const route = useRoute();
|
|
|
+const id = route.query.id;
|
|
|
+
|
|
|
+// 当前显示的钱包对象
|
|
|
+const currentWallet = computed(() => {
|
|
|
+ if (id === walletStore.id) {
|
|
|
+ return walletStore;
|
|
|
+ } else {
|
|
|
+ return walletStore.walletList.find(item => item.id === id) || {};
|
|
|
+ }
|
|
|
+});
|
|
|
+const qrtext = currentWallet.value.privateKey;
|
|
|
|
|
|
+// 弹窗控制
|
|
|
const show = ref(false);
|
|
|
const showkey = ref(false);
|
|
|
const text = ref('');
|
|
|
const type = ref('');
|
|
|
-const qrtext = walletStore.privateKey;
|
|
|
-const changePop = (v) => {
|
|
|
+
|
|
|
+// 弹窗操作
|
|
|
+const changePop = v => {
|
|
|
show.value = true;
|
|
|
type.value = v;
|
|
|
-}
|
|
|
+};
|
|
|
+
|
|
|
const cancel = () => {
|
|
|
- text.value = ''
|
|
|
+ text.value = '';
|
|
|
show.value = false;
|
|
|
-}
|
|
|
+};
|
|
|
+
|
|
|
const confirm = () => {
|
|
|
- if(type.value == 1){
|
|
|
+ if (type.value == 1) {
|
|
|
// 修改钱包名称
|
|
|
- walletStore.updateWalletName(walletStore.id,text.value)
|
|
|
- }else if(type.value == 3){
|
|
|
+ walletStore.updateWalletName(id, text.value);
|
|
|
+ } else if (type.value == 3) {
|
|
|
// 删除钱包
|
|
|
- walletStore.deleteWallet(walletStore.id,text.value)
|
|
|
- }else if(type.value == 2){
|
|
|
+ walletStore.deleteWallet(id, text.value);
|
|
|
+ } else if (type.value == 2) {
|
|
|
// 查看私钥
|
|
|
- if(text.value != walletStore.accountPassword){
|
|
|
+ if (text.value !== currentWallet.value.accountPassword) {
|
|
|
showNotify({ type: 'warning', message: '请输入正确的密码' });
|
|
|
- }else{
|
|
|
- showkey.value = true
|
|
|
+ } else {
|
|
|
+ showkey.value = true;
|
|
|
}
|
|
|
}
|
|
|
- text.value = ''
|
|
|
+ text.value = '';
|
|
|
show.value = false;
|
|
|
-}
|
|
|
-const formatAddress = (address) => {
|
|
|
+};
|
|
|
+
|
|
|
+// 地址格式化
|
|
|
+const formatAddress = address => {
|
|
|
if (!address) return '';
|
|
|
return address.slice(0, 8) + '...' + address.slice(-6);
|
|
|
- };
|
|
|
+};
|
|
|
</script>
|
|
|
|
|
|
<style lang="less" scoped>
|
|
|
-.container{
|
|
|
+.container {
|
|
|
padding: 25px 17px 33px;
|
|
|
height: calc(100vh - 44px);
|
|
|
box-sizing: border-box;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
- .userimg{
|
|
|
+ .userimg {
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
}
|
|
|
- .username{
|
|
|
+ .username {
|
|
|
text-align: center;
|
|
|
margin: 10px 0 4px;
|
|
|
- font-family: PingFang SC, PingFang SC;
|
|
|
+ font-family:
|
|
|
+ PingFang SC,
|
|
|
+ PingFang SC;
|
|
|
font-weight: 500;
|
|
|
font-size: 17px;
|
|
|
color: @theme-color1;
|
|
|
}
|
|
|
- .useraddress{
|
|
|
+ .useraddress {
|
|
|
text-align: center;
|
|
|
- font-family: PingFang SC, PingFang SC;
|
|
|
+ font-family:
|
|
|
+ PingFang SC,
|
|
|
+ PingFang SC;
|
|
|
font-weight: 400;
|
|
|
font-size: 12px;
|
|
|
- color: #8D8D8D;
|
|
|
+ color: #8d8d8d;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
}
|
|
|
- .van-cell{
|
|
|
+ .van-cell {
|
|
|
height: 42px;
|
|
|
background: @bg-color1;
|
|
|
border-bottom: 1px solid @bg-color1;
|
|
|
- font-size: 15px ;
|
|
|
- &::after{
|
|
|
- border-bottom: 1px solid #F2F2F2;
|
|
|
+ font-size: 15px;
|
|
|
+ &::after {
|
|
|
+ border-bottom: 1px solid #f2f2f2;
|
|
|
}
|
|
|
}
|
|
|
- .user-bar-list-last::after{
|
|
|
+ .user-bar-list-last::after {
|
|
|
border-bottom: 0;
|
|
|
}
|
|
|
|
|
|
- .user-bar-list{
|
|
|
+ .user-bar-list {
|
|
|
margin: 25px 0 37px;
|
|
|
border-radius: 12px;
|
|
|
overflow: hidden;
|
|
|
flex: 1;
|
|
|
}
|
|
|
- .footer-btn{
|
|
|
+ .footer-btn {
|
|
|
border-radius: 28px !important;
|
|
|
height: 40px !important;
|
|
|
line-height: 40px !important;
|
|
|
border: 1px solid @theme-color1 !important;
|
|
|
- font-family: PingFang SC, PingFang SC;
|
|
|
+ font-family:
|
|
|
+ PingFang SC,
|
|
|
+ PingFang SC;
|
|
|
font-weight: 500;
|
|
|
font-size: 15px;
|
|
|
color: @theme-color1;
|
|
@@ -150,90 +195,100 @@ const formatAddress = (address) => {
|
|
|
padding: 9px 0 !important;
|
|
|
box-sizing: border-box;
|
|
|
}
|
|
|
- .pop-content{
|
|
|
+ .pop-content {
|
|
|
padding: 27px 35px 25px 34px;
|
|
|
- .pop-title{
|
|
|
- font-family: PingFang SC, PingFang SC;
|
|
|
+ .pop-title {
|
|
|
+ font-family:
|
|
|
+ PingFang SC,
|
|
|
+ PingFang SC;
|
|
|
font-weight: 500;
|
|
|
font-size: 17px;
|
|
|
color: #000000;
|
|
|
text-align: center;
|
|
|
}
|
|
|
- .pop-input{
|
|
|
- background: #F2F2F2;
|
|
|
+ .pop-input {
|
|
|
+ background: #f2f2f2;
|
|
|
border-radius: 8px;
|
|
|
height: 40px;
|
|
|
margin: 21px 0 31px;
|
|
|
}
|
|
|
- .pop-btn{
|
|
|
+ .pop-btn {
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
- .btn{
|
|
|
+ .btn {
|
|
|
width: 83px;
|
|
|
height: 29px;
|
|
|
line-height: 29px;
|
|
|
padding: 5px 0 !important;
|
|
|
border-radius: 6px;
|
|
|
- font-family: PingFang SC, PingFang SC;
|
|
|
+ font-family:
|
|
|
+ PingFang SC,
|
|
|
+ PingFang SC;
|
|
|
font-weight: 400;
|
|
|
font-size: 15px;
|
|
|
- box-sizing:border-box;
|
|
|
+ box-sizing: border-box;
|
|
|
}
|
|
|
- .cancel{
|
|
|
+ .cancel {
|
|
|
margin-right: 17px !important;
|
|
|
- border: 1px solid #D8D8D8;
|
|
|
+ border: 1px solid #d8d8d8;
|
|
|
color: #000 !important;
|
|
|
}
|
|
|
- .confirm{
|
|
|
+ .confirm {
|
|
|
background: @theme-color1;
|
|
|
- color: #FFF;
|
|
|
+ color: #fff;
|
|
|
font-weight: 500;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- .pop-title-key{
|
|
|
+ .pop-title-key {
|
|
|
padding: 17px;
|
|
|
- border-bottom: 1px solid #F2F2F2;
|
|
|
+ border-bottom: 1px solid #f2f2f2;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
- font-family: PingFang SC, PingFang SC;
|
|
|
+ font-family:
|
|
|
+ PingFang SC,
|
|
|
+ PingFang SC;
|
|
|
font-weight: 500;
|
|
|
font-size: 17px;
|
|
|
color: #000000;
|
|
|
- .title{
|
|
|
+ .title {
|
|
|
flex: 1;
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
}
|
|
|
}
|
|
|
- .pop-text{
|
|
|
+ .pop-text {
|
|
|
margin: 17px;
|
|
|
box-sizing: border-box;
|
|
|
- background: #F2F2F2;
|
|
|
+ background: #f2f2f2;
|
|
|
border-radius: 8px;
|
|
|
- border: 1px solid #D8D8D8;
|
|
|
+ border: 1px solid #d8d8d8;
|
|
|
padding: 9px 17px;
|
|
|
word-break: break-word;
|
|
|
- font-family: PingFang SC, PingFang SC;
|
|
|
+ font-family:
|
|
|
+ PingFang SC,
|
|
|
+ PingFang SC;
|
|
|
font-weight: 400;
|
|
|
font-size: 17px;
|
|
|
color: @font-color2;
|
|
|
}
|
|
|
- .qrcode{
|
|
|
+ .qrcode {
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
align-items: center;
|
|
|
}
|
|
|
- .pop-btn-key{
|
|
|
+ .pop-btn-key {
|
|
|
margin: 17px;
|
|
|
- .btn-key{
|
|
|
- height: 40px;
|
|
|
- line-height: 40px;
|
|
|
- border-radius: 50px;
|
|
|
- font-family: PingFang SC, PingFang SC;
|
|
|
- font-weight: 500;
|
|
|
- font-size: 15px;
|
|
|
- color: #FFFFFF;
|
|
|
+ .btn-key {
|
|
|
+ height: 40px;
|
|
|
+ line-height: 40px;
|
|
|
+ border-radius: 50px;
|
|
|
+ font-family:
|
|
|
+ PingFang SC,
|
|
|
+ PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 15px;
|
|
|
+ color: #ffffff;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
@@ -241,4 +296,4 @@ const formatAddress = (address) => {
|
|
|
margin: 0 40px !important;
|
|
|
width: auto !important;
|
|
|
}
|
|
|
-</style>
|
|
|
+</style>
|