添加导入钱包

src/api/path/login.api.js

@@ -6,7 +6,7 @@ export function getNetwork(param) {
   return service.get('main/network', param );
 }
 
-// 取钱包地址
+// 获取钱包地址
 export function createAccent(param) {
   return service.post('createAccont', param );
 }

src/i18n/zhHk/form.js

@@ -8,6 +8,9 @@ export default {
   CreateWallet: "創建錢包",
   PromptMessage: "提示信息",
   InconsistentPasswords: "兩次密碼不一致",
-
+  PleaseEnterThePrivateKey:"請輸入私鑰",
+  PleaseEnterTheMnemonicPhrase:"請輸入助記詞",
+  PrivateKey:"私鑰",
+  MemoryAidWord:"助記詞",
   PleaseFillIn: "請填寫",
 };

src/i18n/zhHk/router.js

@@ -21,6 +21,8 @@ export default {
   BackupMnemonic: "備份助記詞",
   AboutUs: "關於我們",
   SystemSettings: "系統設置",
+  ImportMethod:"導入方式",
+  ImportWallet:"導入錢包",
 
   LanguageSettings:"語言設置",
   

src/router/whitelist.js

@@ -30,6 +30,17 @@ export const whitelistRoutes = [
       leftArrow: true
     }
   },
+  {
+    path: "/importMethod",
+    name: "importMethod",
+    component: () => import("@/views/login/importMethod/index.vue"),
+    meta: {
+      title: "router.ImportMethod",   // 导入方式
+      keepAlive: false,
+      navbar: true,
+      leftArrow: true
+    }
+  },
   {
     path: "/createWallet",
     name: "createWallet",
@@ -41,6 +52,17 @@ export const whitelistRoutes = [
       leftArrow: true
     }
   },
+  {
+    path: "/importWallet",
+    name: "importWallet",
+    component: () => import("@/views/login/importWallet/index.vue"),
+    meta: {
+      title: "router.ImportWallet",   //  导入钱包
+      keepAlive: false,
+      navbar: true,
+      leftArrow: true
+    }
+  },
   {
     path: "/backupMnemonic",
     name: "backupMnemonic",

src/stores/modules/systemStore.js

@@ -11,6 +11,7 @@ const INITIALIZE = {
     address: "",
     privateKey: "",
   },
+  ISCREATE: true
 };
 try {
   const SYSTEM_STORE = getLocalStorage("SYSTEM_STORE");
@@ -105,6 +106,9 @@ export const useSystemStore = defineStore("useSystemStore", {
       };
       return stsFn;
     },
+    getISCREATE(){
+      return this.ISCREATE || getLocalStorage("ISCREATE");
+    }
   },
   actions: {
     localLoading(value = false) {

src/views/login/backupMnemonic/index.vue

@@ -15,7 +15,7 @@
       <a class="button-group-mnemonic a-link im-copy-btn" :data-clipboard-text="walletData.words">
         {{ $t("login.CopyMnemonic") }}</a
       >
-      <van-button round block type="primary" native-type="submit" @click="next">
+      <van-button class="btn" round block type="primary" native-type="submit" @click="next">
         {{ $t("login.BackupComplete") }}
       </van-button>
     </div>
@@ -33,7 +33,8 @@ useCopy();
 
 
 const router = useRouter();
-
+const route = useRoute();
+const walletInfo = route.query.walletInfo;
 const systemStore = useSystemStore();
 const {
   authState,
@@ -52,7 +53,7 @@ const next = async () => {
     systemStore.getWallet.privateKey.trim()
   );  
   router.push({
-    path:"/me"
+    path:"/wallet"
   })
 };
  
@@ -61,11 +62,14 @@ const next = async () => {
 onMounted(async () => {
   const { data } = await createAccent({});
   walletData.value = JSON.parse(atob(data.content));
+  // 将钱包信息，网络信息一起保存
   systemStore.setStateValue({
     key: "wallet",
     value: {
       address: walletData.value.address1,
       privateKey: walletData.value.privateKey,
+      words:walletData.value.words,
+      walletInfo:walletInfo
     },
     localStorage: true,
   });
@@ -102,4 +106,14 @@ onMounted(async () => {
     margin-bottom: 21px;
   }
 }
+.btn{
+    background: @theme-color1;
+    border-radius: 70px;
+    font-family: PingFang SC, PingFang SC;
+    font-weight: 600;
+    font-size: 19px;
+    color: #FFFFFF;
+    height: 54px !important;
+    border:none !important;
+  }
 </style>

src/views/login/createWallet/index.vue

@@ -46,31 +46,37 @@
         name="promptMessage"
         :label="$t('form.PromptMessage')"
         :placeholder="$t('form.PleaseFillIn') + $t('form.PromptMessage')"
-        :rules="[
-          {
-            required: true,
-            message: $t('form.PleaseFillIn') + $t('form.PromptMessage'),
-          },
-        ]"
       />
     </van-cell-group>
     <div class="button-group"  >
-      <van-button round block type="primary" native-type="submit">
+      <van-button class="btn" round block type="primary" native-type="submit">
         {{ $t("form.ConfirmCreation") }}
       </van-button>
     </div>
   </van-form>
+  <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="show = false">確定</van-button>
+      </div>
+    </div>
+  </van-popup>
 </template>
 
 <script setup>
 import _ from "lodash";
-import { useSystemStore } from "@/stores/modules/systemStore"
 import { cryptoEncode } from "@/utils/crypto.js"
+import { useRoute } from 'vue-router'
 
 const router = useRouter();
-const systemStore = useSystemStore();
-const form = ref({});
+const route = useRoute();
+const network = JSON.parse(route.query.network);
 
+const form = ref({});
+const show = ref(false);
 
 const onSubmit = ()=>{
   if(form.value.password !== form.value.confirmPassword){ 
@@ -79,14 +85,17 @@ const onSubmit = ()=>{
   }
   let data = _.cloneDeep(form.value)
   data.password = cryptoEncode(data.password)
-  systemStore.setStateValue({
-    key: "user_login_information",
-    value: data,
-    localStorage: true,
-  });
-console.log(data)
+  data.confirmPassword = cryptoEncode(data.confirmPassword)
+  // 将网络和钱包信息保存
+  data.networkName = network.name;
+  data.networkUrl = network.url;
+  data.networkImg = network.icon;
+  
   router.push({
     path: "/backupMnemonic",
+    query: {
+      walletInfo: JSON.stringify(data)
+    }
   });
 }
 
@@ -101,5 +110,15 @@ console.log(data)
   position: absolute;
   left: 16px;
   bottom: 70px;
+  .btn{
+    background: @theme-color1;
+    border-radius: 70px;
+    font-family: PingFang SC, PingFang SC;
+    font-weight: 600;
+    font-size: 19px;
+    color: #FFFFFF;
+    height: 54px !important;
+    border:none !important;
+  }
 }
 </style>

src/views/login/importMethod/index.vue

@@ -0,0 +1,77 @@
+<template>
+    <div class="container">
+        <div class="cell-box" v-for="(item,i) in tabList" :key="item.name" @click="goTo(i)">
+            <van-image
+                width="44px"
+                height="44px"
+                round
+                src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
+            />
+            <div class="cell-content">
+                <div>
+                    <div class="cell-title">{{item.name}}</div>
+                    <div>{{item.text}}</div>
+                </div>
+                <svg-icon name="right1" style="width: 16px;height:16px"/>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { useRoute } from 'vue-router'
+const router = useRouter();
+const route = useRoute();
+const network = route.query.network;
+const tabList = [
+    {
+        name:'私鑰導入',
+        text:'通過輸入明文私鑰或掃描二維碼進行導入'
+    },
+    {
+        name:'助記詞導入',
+        text:'通過輸入助記詞或掃描二維碼進行導入'
+    },
+    // {
+    //     name:'keystore導入',
+    //     text:'通過輸入keystore文件內容或掃描二維碼進行導入'
+    // }
+]
+const goTo = (i) => {
+    router.push({
+        path: '/importWallet',
+        query: {
+            type:i,
+            network:network
+        }
+    })
+}
+</script>
+
+<style lang="less" scoped>
+.container{
+    padding:16px;
+    .cell-box{
+        display: flex;
+        align-items: center;
+        margin-bottom: 16px;
+        .cell-content{
+            flex: 1;
+            margin-left: 16px;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            font-family: PingFang SC, PingFang SC;
+            font-weight: 400;
+            font-size: 12px;
+            color: #8D8D8D;
+            .cell-title{
+                font-weight: 500;
+                font-size: 15px;
+                color: #000000;
+                margin-bottom: 4px;
+            }
+        }
+    }
+}
+</style>

src/views/login/importWallet/index.vue

@@ -0,0 +1,144 @@
+<template>
+    <van-form @submit="onSubmit"  >
+      <van-cell-group inset>
+        <van-field
+            v-model="form.userKey"
+            :label="type == 0?$t('form.PrivateKey'):$t('form.MemoryAidWord')"
+            rows="2"
+            autosize
+            type="textarea"
+            :placeholder="type == 0?$t('form.PleaseEnterThePrivateKey'):$t('form.PleaseEnterTheMnemonicPhrase')"
+            show-word-limit
+        />
+        <van-field
+          v-model="form.username"
+          name="username"
+          :label="$t('form.WalletName')"
+          :placeholder="$t('form.PleaseFillIn') + $t('form.WalletName')"
+          :rules="[
+            {
+              required: true,
+              message: $t('form.PleaseFillIn') + $t('form.WalletName'),
+            },
+          ]"
+        />
+        <van-field
+          v-model="form.password"
+          type="password"
+          name="password"
+          :label="$t('form.WalletPassword')"
+          :placeholder="$t('form.PleaseFillIn') + $t('form.WalletPassword')"
+          :rules="[
+            {
+              required: true,
+              message: $t('form.PleaseFillIn') + $t('form.WalletPassword'),
+            },
+          ]"
+        />
+  
+        <van-field
+          v-model="form.confirmPassword"
+          type="password"
+          name="confirmPassword"
+          :label="$t('form.ConfirmPassword')"
+          :placeholder="$t('form.PleaseFillIn') + $t('form.ConfirmPassword')"
+          :rules="[
+            {
+              required: true,
+              message: $t('form.PleaseFillIn') + $t('form.ConfirmPassword'),
+            },
+          ]"
+        />
+  
+        <van-field
+          v-model="form.promptMessage"
+          name="promptMessage"
+          :label="$t('form.PromptMessage')"
+          :placeholder="$t('form.PleaseFillIn') + $t('form.PromptMessage')"
+        />
+      </van-cell-group>
+      <div class="button-group"  >
+        <van-button class="btn" round block type="primary" native-type="submit">
+          {{ $t("router.ImportWallet") }}
+        </van-button>
+      </div>
+    </van-form>
+  </template>
+  
+  <script setup>
+  import _ from "lodash";
+  import { cryptoEncode } from "@/utils/crypto.js"
+  import { useRoute } from 'vue-router'
+  import { useSystemStore } from "@/stores/modules/systemStore";
+  import { useWalletAuth } from "@/composables/useWalletAuth";
+  const {
+  authState,
+  loginWithPrivateKey,
+  loginWithStorage,
+  logout,
+  hasStoredWallet,
+  getBalance,
+} = useWalletAuth();
+  const router = useRouter();
+  const route = useRoute();
+  const systemStore = useSystemStore();
+  const network = JSON.parse(route.query.network);
+  const type = route.query.type;
+  
+  const form = ref({});
+  
+  const onSubmit = async ()=>{
+    if(form.value.password !== form.value.confirmPassword){ 
+      $msg($t("form.InconsistentPasswords"));
+      return 
+    }
+    let data = _.cloneDeep(form.value)
+    data.password = cryptoEncode(data.password)
+    data.confirmPassword = cryptoEncode(data.confirmPassword)
+    // 将网络和钱包信息保存
+    data.networkName = network.name;
+    data.networkUrl = network.url;
+    data.networkImg = network.icon;
+
+    systemStore.setStateValue({
+        key: "wallet",
+        value: {
+            address: '',
+            privateKey: type == 0? data.userKey :"",
+            words: type == 1? data.userKey :"",
+            walletInfo:data
+        },
+        localStorage: true,
+    });
+    await loginWithPrivateKey(
+      systemStore.getWallet.privateKey.trim()
+    ); 
+    router.push({
+        path:"/wallet"
+    })
+  }
+  
+  </script>
+  
+  <style scoped lang="less">
+  .van-cell-group{
+    margin-top: 16px;
+  }
+  .button-group{
+    width: calc(100% - 32px);
+    position: absolute;
+    left: 16px;
+    bottom: 70px;
+    .btn{
+      background: @theme-color1;
+      border-radius: 70px;
+      font-family: PingFang SC, PingFang SC;
+      font-weight: 600;
+      font-size: 19px;
+      color: #FFFFFF;
+      height: 54px !important;
+      border:none !important;
+    }
+  }
+  </style>
+  

src/views/login/index.vue

@@ -8,13 +8,12 @@
 
 
     <div class="operation-body">
-      <van-button type="primary" round @click="showBottom = true">{{ $t("login.CreateWallet") }}</van-button>
-      <van-button   class="operation-button" type="default" round @click="showBottom = true">{{ $t("login.ImportWallet")}}</van-button>
+      <van-button class="create-btn" type="primary" round @click="changeCreate">{{ $t("login.CreateWallet") }}</van-button>
+      <van-button class="operation-button" type="default" round @click="changeImport">{{ $t("login.ImportWallet")}}</van-button>
     </div>
 
     <div class="bottom-body">
-      <van-radio-group v-model="checked"><van-radio name="1" icon-size="16"  style="margin-right: 6px;"  /></van-radio-group>
-      
+      <van-checkbox v-model="checked" icon-size="16" style="margin-right: 6px;" checked-color="#4765dd"></van-checkbox>
       <span> {{ $t("login.LoginTxt") }} Angel Toke</span>
       <a class="a-link" @click="toAgreement">{{ $t("login.PrivacyPolicy") }}</a>
       <span>和</span>
@@ -40,18 +39,62 @@
   </van-popup>
 </template>
 <script setup>
-
-
+import { useSystemStore } from "@/stores/modules/systemStore"
 const router = useRouter()
- 
-const checked = ref('')
-const showBottom = ref(false)
+const systemStore = useSystemStore();
 
+const checked = ref(false)
+const showBottom = ref(false);
+const isCreate = ref(true); //true:创建钱包  false：导入钱包
+const isFirst = ref(true); //true:首次  false:不是首次
+// 创建
+const changeCreate = () => {
+  isCreate.value = true;
+  if(checked.value){
+    goTo();
+  }else{
+    showBottom.value = true;
+  }
+}
+// 导入
+const changeImport = () => {
+  isCreate.value = false;
+  if(checked.value){
+    goTo();
+  }else{
+    showBottom.value = true;
+  }
+}
+// 弹框跳转
 const evAgree = ()=>{
-  router.push({
-    path: '/selectNetwork'
-  })
+  goTo();
+}
+const goTo = () => {
+  systemStore.setStateValue({
+    key: "ISCREATE",
+    value: isCreate.value,
+    localStorage: true,
+  });
+  // 如果是第一次登录，需要选择网络
+  if(isFirst.value){
+    router.push({
+      path: '/selectNetwork'
+    })
+  }else{
+    // 以后登录直接去创建或者导入，不需要选择网络
+    if(isCreate.value){
+      router.push({
+        path: '/createWallet'
+      })
+    }else{
+      // 导入方式
+      router.push({
+        path: '/importMethod'
+      })
+    }
+  }
 }
+// 跳转协议
 const toAgreement = () =>{
   router.push({
     path: '/agreement'
@@ -94,6 +137,28 @@ const toAgreement = () =>{
     margin-top: 90px;
     .operation-button{
       margin-top: 23px;
+      border-radius: 70px;
+      border: 1px solid #8D8D8D;
+      box-sizing: border-box;
+      color: #000000;
+      height: 50px !important;
+      font-family: PingFang SC, PingFang SC;
+      font-weight: 600;
+      font-size: 19px;
+      color: #000000;
+      padding: 14px 0;
+    }
+    .create-btn{
+      background: @theme-color1 !important;
+      border:none !important;
+      border-radius: 70px;
+      height: 50px !important;
+      box-sizing: border-box;
+      font-family: PingFang SC, PingFang SC;
+      font-weight: 600;
+      font-size: 19px;
+      color: #FFFFFF;
+      padding: 14px 0;
     }
   }
   .bottom-body{

src/views/login/selectNetwork/index.vue

@@ -20,8 +20,11 @@
 </template>
 <script setup> 
 import { getNetwork } from '@/api/path/login.api'
+import { useSystemStore } from "@/stores/modules/systemStore";
 
 const router = useRouter()
+const systemStore = useSystemStore();
+
 
 const value = ref('')
 const networkList  = ref([])
@@ -44,9 +47,9 @@ const networkComputed = computed(() => {
 
 const selectNetwork = (item) => {
   router.push({
-    path: '/createWallet',
+    path: systemStore.getISCREATE?'/createWallet':'/importMethod',
     query: {
-      network: item.url
+      network: JSON.stringify(item)
     }
   })
 }

src/views/wallet/index.vue

@@ -112,7 +112,7 @@
               </div>
             </div>
           </div>
-          <div class="pop-btn">
+          <div class="pop-btn" @click="addWallet">
             <van-button class="btn" type="primary" size="large" color="#4765DD"> 
               <svg-icon style="width: 24px; height: 24px;margin-right: 4px;" name="add1" />添加钱包
             </van-button>
@@ -177,7 +177,19 @@
   
   <script setup>
   import { useRouter } from 'vue-router'
+  import { useSystemStore } from "@/stores/modules/systemStore";
+  import { useWalletAuth } from "@/composables/useWalletAuth";
+  const systemStore = useSystemStore();
   const router = useRouter();
+  const walletInfo = systemStore.getWallet;
+  const {
+  authState,
+  loginWithPrivateKey,
+  loginWithStorage,
+  logout,
+  hasStoredWallet,
+  getBalance,
+} = useWalletAuth();
   const isShow = ref(true);
   const showWallet = ref(false);
   const showHistory = ref(false);
@@ -189,6 +201,14 @@
     showHistory.value = true;
     type.value = val;
   }
+  // 添加钱包
+  const addWallet = () => {
+    
+  }
+  onMounted(async ()=>{
+    const aa = await getBalance();
+    console.log(aa)
+  })
   </script>
   
   <style lang="less" scoped>