调整

src/components/InfoBar.vue

+<template>
+  <div class="py-2 text-13px flex items-center justify-between rounded" :class="[bgColor, color]">
+    <div class="flex-1 border-r border-solid" :class="[borderColor]">
+      <slot name="left"></slot>
+    </div>
+    <div class="flex-1 border-r border-solid" :class="[borderColor]">
+      <slot></slot>
+    </div>
+    <div class="flex-1">
+      <slot name="right"></slot>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue'
+export default Vue.extend({
+  props: {
+    info: {
+      type: Object
+    },
+    bgColor: {
+      type: String,
+      default: 'bg-gradient-7'
+    },
+    color: {
+      type: String,
+      default: 'text-brown3'
+    },
+    borderColor: {
+      type: String,
+      default: 'border-card2-color'
+    }
+  }
+})
+</script>
\ No newline at end of file

src/components/ListLine.vue

 <template>
-  <div class="">
-
+  <div class="leading-9 text-white3 text-sm flex items-center justify-between">
+    <div class="flex-shrink-0 mr-3">
+      <slot></slot>
+    </div>
+    <div class="flex-grow-0 hide">
+      <slot name="right"></slot>
+    </div>
   </div>
 </template>
 

src/components/MiningCard.vue

@@ -4,7 +4,6 @@
     <div>
       <div class="px-2 flex items-center justify-between">
         <span class="font-semibold text-white1">{{ info.friendlyName }}</span>
-        <!-- <span class="text-xs text-t-color leading-4 border border-solid border-card-text py-0.5 px-1.5 rounded">{{ '节点稳定 省时省力' }}</span> -->
       </div>
       <div class="pb-3 flex items-center justify-between">
         <div class="px-2 flex flex-col items-start">
@@ -14,29 +13,24 @@
         <button class="w-24 h-9 rounded-full text-sm text-brown1 text-medium bg-gradient-4" @click="goMining">立即委托</button>
       </div>
     </div>
-    <div class="bg-gradient-5 text-13px text-t-color rounded-lg flex justify-between items-center py-1.5">
-      <!-- <div class="text-left text-t-color text-13px pl-2 pr-5 border-r border-solid border-brown2 ">
-        <p>必选理由</p>
-        <p>比特元生态爆发，低门槛即可参与</p>
-      </div> -->
-      <div class="flex-grow border-r border-solid border-brown2">
+    <info-bar bgColor="bg-gradient-5" color="text-t-color" borderColor="border-brown2">
+      <template v-slot:left>
         <p>今日出矿</p>
         <p>{{ info.todayAmount || 0 }} BTY</p>
-      </div>
-      <div class="flex-grow border-r border-solid border-brown2">
-        <p>已运行天数</p>
-        <p>{{ info.runDays || 0 }}天</p>
-      </div>
-      <div class="flex-grow">
+      </template>
+      <p>已运行天数</p>
+      <p>{{ info.runDays || 0 }}天</p>
+      <template v-slot:right>
         <p>已委托</p>
         <p>{{ info.entrustTicket || 0 }}票</p>
-      </div>
-    </div>
+      </template>
+    </info-bar>
   </div>
 </template>
 
 <script lang="ts">
 import Vue from 'vue'
+import InfoBar from '@/components/InfoBar.vue'
 export default Vue.extend({
   props: {
     info: {
@@ -44,11 +38,11 @@ export default Vue.extend({
     }
   },
   components: {
+    InfoBar
   },
   methods: {
     goMining() {
       this.$emit('goDetails', (this.info as any).id)
-      // this.$router.push({ path: '/details', query: { id: (this.info as any).id || '1' }})
     }
   }
 })
@@ -83,7 +77,6 @@ export default Vue.extend({
     }
     .income-count {
       font-size: 35px;
-      // font-family: DINAlternate-Bold, DINAlternate;
       font-weight: bold;
       color: #EFB771;
       line-height: 41px;

src/components/MiningInfo.vue

@@ -3,9 +3,9 @@
     class="mining-card w-84 h-56 px-2 pt-10 pb-2"
     :class="{'bg-bg1-card': type === 1, 'bg-bg2-card': type === 2}">
     <div class="mining-name bg-gradient-3 text-white text-13px rounded-r-full">{{ info.name }}</div>
-    <img v-if="type === 2" class="w-18 h-16 end-img" src="@/assets/image/end.png" />
-    <img v-if="type === 1" class="w-full h-full under" src="@/assets/image/bg1-card.png" />
-    <img v-if="type === 2" class="w-full h-full under" src="@/assets/image/bg2-card.png" />
+    <img v-if="type === 2" class="w-18 h-16 end-img" :src="constant.CARD" />
+    <img v-if="type === 1" class="w-full h-full under" :src="constant.BG_START" />
+    <img v-if="type === 2" class="w-full h-full under" :src="constant.BG_END" />
     <div>
       <div class="px-2 flex items-center justify-between">
         <span class="font-semibold text-white1">{{ info.friendlyName }}</span>
@@ -23,7 +23,7 @@
     </div>
     <div class="bg-gradient-5 rounded-lg flex justify-between items-center py-2">
       <div class="text-left text-t-color text-13px pl-2 overflow-hidden">
-        <p class="tracking-tight pool-addr">矿池地址：{{ info.addr }}</p>
+        <p class="tracking-tight hide">矿池地址：{{ info.addr }}</p>
         <p class="tracking-tight">矿机周期：{{ info.period }}</p>
       </div>
     </div>
@@ -32,9 +32,8 @@
 
 <script lang="ts">
 import Vue from 'vue'
+import constant from '@/constance/Image'
 export default Vue.extend({
-  components: {
-  },
   props: {
     type: {
       type: Number
@@ -43,6 +42,11 @@ export default Vue.extend({
       type: Object
     }
   },
+  computed: {
+    constant() {
+      return constant.MINE_IMAGE
+    }
+  }
 })
 </script>
 
@@ -94,7 +98,6 @@ export default Vue.extend({
     }
     .income-count {
       font-size: 35px;
-      // font-family: DINAlternate-Bold, DINAlternate;
       font-weight: bold;
       line-height: 41px;
       padding-top: 12px;
@@ -107,9 +110,4 @@ export default Vue.extend({
       color: #906227;
     }
   }
-  .pool-addr {
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
 </style>
\ No newline at end of file

src/constance/Image.ts

+
+
+const HOME_IMAGE = {
+  TITLE: require('@/assets/image/title.png'),
+  TITLE_LEFT: require('@/assets/image/title-l.png'),
+  TITLE_RIGHT: require('@/assets/image/title-r.png'),
+  CARD: require('@/assets/image/card.png')
+}
+
+const MINE_IMAGE = {
+  BG_START: require('@/assets/image/bg1-card.png'),
+  BG_END: require('@/assets/image/bg2-card.png'),
+  END: require('@/assets/image/end.png')
+}
+
+export default {
+  HOME_IMAGE,
+  MINE_IMAGE
+}
\ No newline at end of file

src/utils/test.ts

 // export const test = {
-//   addr: '13SnepxL5RELnLwxGTWFkMJMgMJqJhP4FV',
+//   addr: '12c2vCE13SmnExVSNG1bpMsNKqCZbrBcGf',
 //   privateKey: '0xCC38546E9E659D15E6B4893F0AB32A06D103931A8230B0BDE71459D2B27D6944'
 // }
 // export const test = {

src/views/Details/DetailsBar.vue

 <template>
-  <div class="bg-gradient-7 py-2 text-13px text-brown3 flex items-center justify-between rounded">
+  <div class="bg-gradient-7 py-1.5 text-13px text-brown3 flex items-center justify-between rounded">
     <div class="flex-grow border-r border-solid border-card2-color">
       <div>挖矿门槛</div>
       <div>最低{{ info.minTicket || 10 }}票</div>

src/views/Details/DetailsCard.vue

 <template>
   <div class="bg-gradient-6 p-4 pt-20">
     <div class="pb-4">
-      <div class="text-brown1 text-base font-semibold text-left">{{ info.friendlyName || 'xinghao' }}</div>
+      <div class="text-brown1 text-base font-semibold text-left">{{ info.friendlyName || '-' }}</div>
     </div>
     <div class="mb-6 flex items-center justify-between">
       <div class="text-left flex-grow">
@@ -13,16 +13,27 @@
         <p class="text-base text-red1 font-semibold">已实际出矿收益为准</p>
       </div>
     </div>
-    <details-bar :info="info" />
+    <info-bar>
+      <template v-slot:left>
+        <div>挖矿门槛</div>
+        <div>最低{{ info.minTicket || 10 }}票</div>
+      </template>
+      <div>矿机周期</div>
+      <div>{{ info.days }}天</div>
+      <template v-slot:right>
+        <div>技术服务费</div>
+        <div class="special">限时免费</div>
+      </template>
+    </info-bar>
   </div>
 </template>
 
 <script lang="ts">
 import Vue from 'vue'
-import DetailsBar from '@/views/Details/DetailsBar.vue'
+import InfoBar from '@/components/InfoBar.vue'
 export default Vue.extend({
   components: {
-    DetailsBar
+    InfoBar
   },
   props: {
     info: {

src/views/Details/DetailsList.vue

@@ -3,47 +3,47 @@
     <div class="bg-card2-color px-4">
       <p class="details-title">购买说明</p>
       <div class="py-2">
-        <p class="details-item">
-          <span>挖矿门槛</span>
-          <span>最低{{ info.minTicket || 10 }}票</span>
-        </p>
-        <p class="details-item">
-          <span>矿池周期</span>
-          <span>{{ info.days }}天</span>
-        </p>
-        <p class="details-item">
-          <span>技术服务费</span>
-          <span class="special">限时免费</span>
-        </p>
-        <p class="details-item">
-          <span>运行机制</span>
-          <span>到期本金自动取回</span>
-        </p>
+        <list-line>
+          挖矿门槛
+          <template v-slot:right><span>最低{{ info.minTicket || 10 }}票</span></template>
+        </list-line>
+        <list-line>
+          矿池周期
+          <template v-slot:right><span>{{ info.days || '-' }}天</span></template>
+        </list-line>
+        <list-line>
+          技术服务费
+          <template v-slot:right><span class="special">限时免费</span></template>
+        </list-line>
+        <list-line>
+          运行机制
+          <template v-slot:right><span>到期本金自动取回</span></template>
+        </list-line>
       </div>
     </div>
     <div class="bg-card2-color px-4 mt-3">
       <p class="details-title">挖矿信息</p>
       <div class="py-2">
-        <p class="details-item">
-          <span class="flex-shrink-0 mr-3">矿池地址</span>
-          <span class="flex-grow-0 hide">{{ info.minerAddr || '-' }}</span>
-        </p>
-        <p class="details-item">
-          <span class="flex-shrink-0 mr-3">发起人挖矿地址</span>
-          <span class="flex-grow-0 hide">{{ info.selfAddr || '-' }}</span>
-        </p>
-        <p class="details-item">
-          <span>发起人委托票数</span>
-          <span>{{ info.selfEntrustTicket || 0 }}票</span>
-        </p>
-        <p class="details-item">
-          <span>当前委托人数</span>
-          <span class="special">{{ info.entrustPerson || 0 }}人</span>
-        </p>
-        <p class="details-item">
-          <span>当前委托挖矿票数</span>
-          <span class="special">{{ info.entrustTicket || 0 }}票</span>
-        </p>
+        <list-line>
+          矿池地址
+          <template v-slot:right><span>{{ info.minerAddr || '-' }}</span></template>
+        </list-line>
+        <list-line>
+          发起人挖矿地址
+          <template v-slot:right><span>{{ info.selfAddr || '-' }}</span></template>
+        </list-line>
+        <list-line>
+          发起人委托票数
+          <template v-slot:right><span>{{ info.selfEntrustTicket || 0 }} 票</span></template>
+        </list-line>
+        <list-line>
+          当前委托人数
+          <template v-slot:right><span class="special">{{ info.entrustPerson || 0 }} 人</span></template>
+        </list-line>
+        <list-line>
+          当前委托挖矿票数
+          <template v-slot:right><span class="special">{{ info.entrustTicket || 0 }} 票</span></template>
+        </list-line>
       </div>
     </div>
     <div class="bg-card2-color px-4 pb-16 mt-3">
@@ -61,7 +61,11 @@
 
 <script lang="ts">
 import Vue from 'vue'
+import ListLine from '@/components/ListLine.vue'
 export default Vue.extend({
+  components: {
+    ListLine
+  },
   props: {
     info: {
       type: Object

src/views/Details/index.vue

@@ -35,8 +35,8 @@ export default Vue.extend({
       info: {} as any,
       fee: 0,
       profit: 0,
-      isBind: false,
-      ticketNum: 10000
+      isBind: false,                    // 是否初次委托
+      ticketNum: 10000                  // 每票BTY
     }
   },
   methods: {
@@ -110,6 +110,7 @@ export default Vue.extend({
             Toast(res.data.result.receipt.tyName)
           } else {
             const isBind = this.isBind ? true : false
+            if (isBind) return
             bindPool(this.info.id, value, isBind).then(async (r: any) => {
               if (r.data.data.isSucc) {
                 this.$toast('购买成功')

src/views/Home/PoolList.vue

@@ -3,9 +3,9 @@
     <div class="card-list relative py-7 px-3">
       <div class="home-title w-full absolute flex items-start justify-center">
         <div class="dot-l"></div>
-        <img class="w-1/5" src="../../assets/image/title-l.png" alt="">
-        <img class="w-1/4 mt-1.5 mx-1" src="../../assets/image/title.png" alt="">
-        <img class="w-1/5" src="../../assets/image/title-r.png" alt="">
+        <img class="w-1/5" :src="constant.TITLE_LEFT" alt="">
+        <img class="w-1/4 mt-1.5 mx-1" :src="constant.TITLE" alt="">
+        <img class="w-1/5" :src="constant.TITLE_RIGHT" alt="">
         <div class="dot-r"></div>
       </div>
       <div>
@@ -34,6 +34,7 @@
 import Vue from 'vue'
 import MiningCard from '@/components/MiningCard.vue'
 import Popup from '@/components/Popup.vue'
+import constant from '@/constance/Image'
 import Bus from '@/utils/bus'
 import { invitePool, poolList, checkBind } from '@/service/pool'
 import { PullRefresh, Toast } from 'vant'
@@ -56,6 +57,11 @@ export default Vue.extend({
       show: false
     }
   },
+  computed: {
+    constant() {
+      return constant.HOME_IMAGE
+    }
+  },
   methods: {
     getList() {
       poolList({
@@ -136,6 +142,10 @@ export default Vue.extend({
   },
   created() {
     this.getList()
+    this.setTimer()
+  },
+  beforeDestroy() {
+    if (this.timer) clearInterval(this.timer)
   }
 })
 </script>

src/views/Mine.vue

@@ -41,8 +41,6 @@ export default Vue.extend({
     return {
       active: 1,
       isLoading: false,
-      // onLine: [],
-      // offLine: [],
       lists: [],
       page: 1,
       pageSize: 10,

src/views/Mine/index.vue

 <template>
-  <div class="mine">
+  <div>
     <nav-bar left-arrow @click-left="onClickLeft" fixed>
       <template #title>
         <div class="tab-tool">