feat:导入

src/components/InputPasswordDialog.vue

@@ -13,11 +13,12 @@
 import Vue from 'vue';
 import Component from 'vue-class-component';
 import { Prop, PropSync } from 'vue-property-decorator';
-import { Dialog } from 'vant';
+import { Dialog, Field } from 'vant';
 
 @Component({
   components: {
-    [Dialog.Component.name]: Dialog.Component
+    [Dialog.Component.name]: Dialog.Component,
+    'van-field': Field
   }
 })
 export default class InputPasswordDialog extends Vue {

src/components/LockStatusDialog.vue

@@ -43,16 +43,6 @@
             />
           </van-radio>
         </van-cell>
-
-        <!-- <van-cell class="lockstatus_item" title="全锁定" label="不可转账，不可挖矿" clickable @click="radio = '3'">
-                    <img slot="icon" src="@/assets/all_lock@2x.png" alt="">
-                    <van-radio name="3"  slot="right-icon">
-                        <img class="radio_icon"
-                            slot="icon"
-                            slot-scope="props"
-                            :src="props.checked ? activeIcon : inactiveIcon "/>
-                    </van-radio>
-        </van-cell>-->
       </van-cell-group>
     </van-radio-group>
   </van-dialog>
@@ -60,7 +50,7 @@
 <script lang='ts'>
 import Vue from 'vue';
 import Component from 'vue-class-component';
-import { Dialog } from 'vant';
+import { Dialog, RadioGroup, Radio, CellGroup, Cell } from 'vant';
 import { Prop, PropSync } from 'vue-property-decorator';
 // import getNodeStatus from '../mixins/getNodeStatus';
 let activeIcon = require('@/assets/image/activeIcon@2x.png');
@@ -68,7 +58,11 @@ let inactiveIcon = require('@/assets/image/inactiveIcon@2x.png');
 
 @Component({
   components: {
-    [Dialog.Component.name]: Dialog.Component
+    [Dialog.Component.name]: Dialog.Component,
+    'van-radio-group': RadioGroup,
+    'van-cell-group': CellGroup,
+    'van-cell': Cell,
+    'van-radio': Radio
   }
 })
 export default class LockStatusDialog extends Vue {
@@ -103,10 +97,10 @@ export default class LockStatusDialog extends Vue {
 </script>
 <style scoped>
 .van-radio {
-  height: 0.68rem;
+  /* height: 0.68rem; */
 }
 </style>
-<style lang="scss"  scoped>
+<style lang="scss" scoped>
 .lockstatus_item {
   align-items: center;
   .van-cell__title {
@@ -114,12 +108,16 @@ export default class LockStatusDialog extends Vue {
     text-align: left;
   }
   img {
-    width: 0.54rem;
-    height: 0.4rem;
+    width: 20px;
+    height: 16px;
+    margin-right: 6px;
   }
   img.radio_icon {
-    width: 0.48rem;
+    width: 10px;
     height: auto;
   }
 }
+/deep/ .van-nav-bar {
+  color: #000
+}
 </style>
\ No newline at end of file

src/components/WalletStatus.vue

@@ -6,15 +6,15 @@
     </li>
     <!-- showLockStatusDialog -->
     <li @click="lockStatusHandler"> 
-      <div v-if="!walletStatus.isWalletLock">
+      <div v-if="!walletStatus.isWalletLock" class="block">
         <img :src="require(`@/assets/image/full_unlock${isIcon?'_icon':'_button'}@2x.png`)" alt />
         <div class="desc active">全解锁</div>
       </div>
-      <div v-else-if="walletStatus.isWalletLock && walletStatus.isTicketLock">
+      <div v-else-if="walletStatus.isWalletLock && walletStatus.isTicketLock" class="block">
         <img :src="require(`@/assets/image/all_lock${isIcon?'_icon':'_button'}@2x.png`)" alt />
         <div class="desc">全锁定</div>
       </div>
-      <div v-else>
+      <div v-else class="block">
         <img :src="require(`@/assets/image/mine_unlock${isIcon?'_icon':'_button'}@2x.png`)" alt />
         <div class="desc active" >挖矿解锁</div>
       </div> 
@@ -29,10 +29,7 @@
       <div class="desc" :class="[blockSync?'active':'']" >
         <!-- blockanmation -->
           <div>区块同步</div>
-          <!-- <div v-if="!blockSync">
-            {{`(${peerHeight})`}}
-          </div> -->
-            <!-- {{`(${Math.floor(peerHeight/allHeight * 100)}/100)`}}</div> -->
+          <div v-if="!isIcon" class="block-height" :class="[blockSync?'active':'']">{{`(${peerHeight})`}}</div>
       </div>
     </li>
     <!-- autoMiningHandler -->
@@ -41,7 +38,7 @@
       <img :src="require(`@/assets/image/ticket${isButton}_normal@2x.png`)" v-else alt />
       <div class="desc" :class="[(walletStatus && !walletStatus.isAutoMining)?'':'active']">自动购票</div>
     </li>
-    <div v-if="!isIcon" class="block-height" :class="[blockSync?'active':'']">{{`(${peerHeight})`}}</div>
+    <!-- <div v-if="!isIcon" class="block-height" :class="[blockSync?'active':'']">{{`(${peerHeight})`}}</div> -->
   </ul>
 </template>
 <script lang="ts">
@@ -106,17 +103,9 @@ export default Vue.extend({
 }
 ul.wallet-status-component{
   display: flex;
-  display: grid;
-  grid-template-columns: repeat(5,1fr);
-  place-content: space-between;
+  align-items: flex-start;
+  justify-content: center;
   padding: 6px 0;
-  // justify-content: space-between;
-  .block-height{
-    grid-column: 3 / span 3;
-    &.active{
-      color: rgba(230, 88, 132, 0.7);
-    }
-  }
   .action{
     width: 100%;
     height:auto;
@@ -126,16 +115,27 @@ ul.wallet-status-component{
     animation: hue 3s linear infinite;
   }
   li {
+    flex: 1;
+    display: flex;
     flex-direction: column;
     justify-content: center;
+    align-items: center;
     text-align: center;
     overflow: hidden;
+    div.block {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+    }
     img{
-      width: 14px;
+      width: 50%;
       height: auto;
     }
     div.desc {
-      font-size: 14px;
+      margin-top: 6px;
+      font-size: 12px;
+      text-align: center;
       &.active {
         color: rgba(230, 88, 132, 0.7);
       }

src/views/NodePage/Details/index.vue

@@ -32,8 +32,10 @@
 import Vue from 'vue'
 import LockStatusDialog from '@/components/LockStatusDialog.vue';
 import InputPasswordDialog from '@/components/InputPasswordDialog.vue';
-import MinerTips from '@/components/MinerTips.vue';
 import WalletStatus from '@/components/WalletStatus.vue';
+import { getNodeStatus } from '@/utils/getDeviceInfo';
+import { rpc } from '@/service/rpc';
+import { Toast } from 'vant';
 
 export default Vue.extend({
   components: {
@@ -44,25 +46,137 @@ export default Vue.extend({
   data() {
     return {
       walletStatus: {} as any,
-      blockSync: {} as any,
-      peerHeight: undefined as undefined|number,
-      allHeight: undefined as undefined|number,
+      // blockSync: false,
+      // peerHeight: undefined as undefined|number,
+      // allHeight: undefined as undefined|number,
       passwordDialogShow: false,
-      errMsg: {} as any,
+      errMsg: '',
       lockStatusDialogShow: false,
       showAction: false,
+      isSync: false,
+      ticketCount: undefined as undefined|number,
+      peersInfo: {} as any,
+      accounts: {} as any,
+      password: '',
+      userSelectedStatus: '',
+      timer: 0 
+    }
+  },
+  computed: {
+    ip(): string {
+      console.log(this.$route.params.ip)
+      return this.$route.params.ip || ''
+    },
+    url(): string {
+      return this.ip ? `http://${this.ip}:8801` : '';
+    },
+    peerInfo(): any {
+      return (
+        (this.peersInfo && this.peersInfo.peers &&
+          this.peersInfo.peers.find((peer: any) => {
+            return peer.self;
+          })) ||
+        {}
+      );
+    },
+    peerHeight(): number {
+      return (this.peerInfo.header && this.peerInfo.header.height) || 0;
+    },
+    allHeight(): number {
+      return (
+        (this.peersInfo.peers &&
+          this.peersInfo.peers.reduce(
+            (acc: number, cur: any) => Math.max(acc, cur.header.height),
+            0
+          )) ||
+        0
+      );
+    },
+    blockSync(): boolean {
+      return this.peerHeight === this.allHeight;
+    },
+    paiWalletInfo():any {
+      return (
+        this.accounts && this.accounts.wallets &&
+        this.accounts.wallets.find((wallet: any) => {
+          return wallet.label === 'YUAN-miner节点'
+        }) || {}
+      )
+    },
+    walletLabel():string {
+      return this.paiWalletInfo.label || ''
+    }
+  },
+  created() {
+    this.init()
+    this.timer = setInterval(() => {
+        let {getTicketCount,getPeerInfo} = rpc;
+        const {url} = this;
+        let promise = [getTicketCount.call(rpc,url),getPeerInfo.call(rpc,url)]
+        Promise.all(promise).then(([ticketCount,peersInfo]) => {
+          this.ticketCount = ticketCount;
+          this.peersInfo = peersInfo;
+        })
+    }, 2000);
+  },
+  beforeDestroy() {
+    if (this.timer) {
+      clearInterval(this.timer)
     }
   },
   methods: {
     async init() {
-      
-
-      const {walletStatus,isSync,ticketCount,peersInfo,accounts} = await this.getNodeStatus({ip:this.ip});
+      const {walletStatus,isSync,ticketCount,peersInfo,accounts} = await getNodeStatus({ip:this.ip});
       this.walletStatus = walletStatus;
       this.isSync = isSync;
       this.ticketCount = ticketCount;
       this.peersInfo = peersInfo;
       this.accounts = accounts;
+    },
+    reCheckLockStatusHandler() {
+      this.passwordDialogShow = false
+      this.lockStatusDialogShow = true
+    },
+    async confirmPasswordHandler(password: string) {
+      this.errMsg = '';
+      this.password = password;
+      if (this.password === '') {
+        this.errMsg = '请输入密码';
+        return;
+      }
+      try {
+        let flag = true; // true : 解锁购票 ；false : 解锁整个钱包
+        if (this.userSelectedStatus === '1') {
+          flag = false;
+        }
+        const {msg} = await rpc.unlock(this.password, flag, 0, this.url);
+        if (msg) {
+          if (
+            ['ErrVerifyOldpasswdFail', 'ErrInputPassword'].includes(
+              msg
+            )
+          ) {
+            this.errMsg = '请输入正确的密码';
+            return;
+          } else {
+            throw msg;
+          }
+        }
+        await rpc.lock(this.url);
+        await rpc.unlock(this.password, flag, 0, this.url);
+      } catch (err: any) {
+        Toast(err.message || err);
+      } finally {
+        this.init();
+      }
+    },
+    showPasswordDialogHandler(status: string) {
+      console.log('userSelected status:', status)
+      this.userSelectedStatus = status
+      this.passwordDialogShow = true
+      this.lockStatusDialogShow = false
+      // this.hideLockStatusDialog();
+      // this.showPasswordDialog();
     }
   }
 })

src/views/NodePage/List/index.vue

@@ -84,7 +84,7 @@ export default Vue.extend({
     return {
       pageShow: false,
       wifiName: '',
-      devices: [{}] as Array<any>,
+      devices: [] as Array<any>,
       isfeedback: false,
       btyAddress: ''
     }