调整

src/App.vue

@@ -10,7 +10,6 @@ import Vue from 'vue'
 import { test } from '@/utils/test'  // 本地测试
 export default Vue.extend({
   mounted() {
-    console.log(this.$store)
     // getCurrentBTYAddress('',(res: any) => {
     //   console.log('res', res)
     //   this.$store.commit('app/SET_ADDRESS', res)

src/components/Header.vue

+<template>
+  <div class="w-full mb-0 px-4 bg-theme-color flex justify-between items-center fixed top-0 z-50" :class="height">
+    <slot name="left"></slot>
+    <slot></slot>
+    <slot name="right"></slot>
+  </div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue'
+export default Vue.extend({
+  props: {
+    height: {
+      type: String,
+      default: 'h-16'
+    }
+  }
+})
+</script>
\ No newline at end of file

src/components/MiningCard.vue

@@ -21,7 +21,7 @@
       </div> -->
       <div class="flex-grow border-r border-solid border-brown2">
         <p>今日出矿</p>
-        <p>{{ info.dayTicketYield || 0 }} BTY</p>
+        <p>{{ info.todayAmount || 0 }} BTY</p>
       </div>
       <div class="flex-grow border-r border-solid border-brown2">
         <p>已运行天数</p>

src/components/Popup.vue

+<template>
+  <van-popup v-model="show" :close-on-click-overlay="false">
+    <div class="p-3 flex flex-col bg-theme-color text-white1">
+      <div class="mb-5">{{ title }}</div>
+      <input class="mb-2 bg-theme-color border-b border-solid border-white2" type="text" v-model="val">
+      <button class="bg-blue" @click="submit">确定</button>
+    </div>
+  </van-popup>
+</template>
+
+<script lang="ts">
+import Vue from 'vue'
+import { Popup } from 'vant'
+export default Vue.extend({
+  components: {
+    'van-popup': Popup
+  },
+  data() {
+    return {
+      val: ''
+    }
+  },
+  props: {
+    title: {
+      type: String,
+      default: '请输入推荐人'
+    },
+    show: {
+      type: Boolean,
+      default: false
+    }
+  },
+  methods: {
+    submit() {
+      this.$emit('getMessage', this.val)
+    }
+  }
+})
+</script>

src/router/index.ts

@@ -7,17 +7,20 @@ const routes: Array<RouteConfig> = [
   {
     path: '/',
     name: 'Home',
-    component: () => import(/* webpackChunkName: "about" */ '../views/Home.vue')
+    // component: () => import(/* webpackChunkName: "about" */ '../views/Home.vue')
+    component: () => import(/* webpackChunkName: "about" */ '../views/Home/index.vue')
   },
   {
     path: '/details',
     name: 'Details',
-    component: () => import(/* webpackChunkName: "about" */ '../views/Details.vue')
+    component: () => import(/* webpackChunkName: "about" */ '../views/Details/index.vue')
+    // component: () => import(/* webpackChunkName: "about" */ '../views/Details.vue')
   },
   {
     path: '/mine',
     name: 'Mine',
-    component: () => import(/* webpackChunkName: "about" */ '../views/Mine.vue')
+    component: () => import(/* webpackChunkName: "about" */ '../views/Mine/index.vue')
+    // component: () => import(/* webpackChunkName: "about" */ '../views/Mine.vue')
   },
 ]
 

src/style.css

@@ -47,3 +47,17 @@
 .text-15px {
   font-size: 15px;
 }
+
+.hide {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.no-content {
+  min-height: calc(100vh - 320px)
+}
+
+.special {
+  color: #FA6400
+}
\ No newline at end of file

src/utils/bus.ts

+import Vue from 'vue'
+const Bus = new Vue()
+
+export default Bus
\ No newline at end of file

src/views/Details.vue

@@ -137,12 +137,6 @@ export default Vue.extend({
       service.getBalance(this.$store.state.app.address, 'coins').then((res: any) => {
         console.log(res)
         this.profit = Math.floor((res.data.result as any)[0].balance / 1e8)
-      }).catch(() => {
-        Toast({
-          duration: 3000,
-          message: '请求失败',
-          forbidClick: true
-        })
       })
     },
     getInfo() {

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>
+    <div class="mb-6 flex items-center justify-between">
+      <div class="text-left flex-grow">
+        <p class="mb-2 text-xs text-brown">委托票数</p>
+        <p class="text-base text-red1 font-semibold">3000 BTY=1票</p>
+      </div>
+      <div class="text-left flex-grow">
+        <p class="mb-2 text-xs text-brown">收益发放</p>
+        <p class="text-base text-red1 font-semibold">已实际出矿收益为准</p>
+      </div>
+    </div>
+    <div class="bg-gradient-7 py-2 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>
+      </div>
+      <div class="flex-grow border-r border-solid border-card2-color">
+        <div>矿机周期</div>
+        <div>{{ info.days }}天</div>
+      </div>
+      <div class="flex-grow">
+        <div>技术服务费</div>
+        <div class="special">限时免费</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue'
+export default Vue.extend({
+  props: {
+    info: {
+      type: Object
+    }
+  }
+})
+</script>
\ No newline at end of file

src/views/Details/DetailsFooter.vue

+<template>
+  <div class="w-full h-16 px-4 bg-card-color fixed bottom-0 flex items-center justify-between">
+    <div class="flex items-center">
+      <div class="text-sm text-white mr-3">{{ leftText }}</div>
+      <van-stepper v-model="value" :min="min" :max="max" integer />
+    </div>
+    <button class="bg-gradient-4 w-24 h-9 text-brown2 text-15px rounded-full" @click="buy">{{ btnText }}</button>
+  </div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue'
+import { Stepper } from 'vant'
+export default Vue.extend({
+  components: {
+    'van-stepper': Stepper
+  },
+  props: {
+    leftText: {
+      type: String,
+      default: '票数'
+    },
+    btnText: {
+      type: String,
+      default: '购买'
+    },
+    max: {
+      type: Number,
+      default: 60
+    },
+    min: {
+      type: [Number, String],
+      default: 1
+    }
+  },
+  data() {
+    return {
+      value: ''
+    }
+  },
+  methods: {
+    buy() {
+      this.$emit('buy', this.value)
+    }
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+  /deep/ .van-stepper__minus,
+  /deep/ .van-stepper__plus,
+  /deep/ .van-stepper__input {
+    color: #EFB771;
+    background: #3A3A3C;
+    border-color: #7A7979;
+  }
+  /deep/ .van-stepper__minus--disabled,
+  /deep/ .van-stepper__plus--disabled {
+    color: #c8c9cc;
+    background-color: #3A3A3C;
+    cursor: not-allowed;
+  }
+  /deep/ .van-stepper__minus--disabled,
+  /deep/ .van-stepper__plus--disabled,
+  /deep/ .van-stepper__minus--disabled:active,
+  /deep/ .van-stepper__plus--disabled:active {
+    background-color: #3A3A3C;
+  }
+</style>
\ No newline at end of file

src/views/Details/DetailsList.vue

+<template>
+  <div class="bg-theme-color pt-3">
+    <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>
+      </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>
+      </div>
+    </div>
+    <div class="bg-card2-color px-4 pb-16 mt-3">
+      <p class="details-title">风险提示</p>
+      <div class="py-2 text-sm text-white3 text-left">
+        <p class="pb-2 leading-5">1.bty会发生价格波动的情况，且挖矿难度是逐渐递增的。币价的波动或者挖矿难度的提高
+          都可能导致挖矿收益变动。本矿池不作保证收益承诺。用户须仔细评估自己的风险承受能力，
+          在可接受的风控范围内投资数字货币挖矿。矿池发起方对本矿池条款保留所有解释权。</p><br />
+        <p>2.由于法律政策、战争、地震、火灾和电力故障等不可抗原因导致矿池暂停运营，矿池发起
+          人不承担赔偿责任。</p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue'
+export default Vue.extend({
+  props: {
+    info: {
+      type: Object
+    }
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+  .details-title {
+    line-height: 44px;
+    color: #EFB771;
+    text-align: left;
+    border-bottom: 1px solid #47474B;
+  }
+  .details-item {
+    line-height: 36px;
+    color: rgba(255, 255, 255, 0.75);
+    font-size: 14px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+</style>
\ No newline at end of file

src/views/Details/index.vue

+<template>
+  <div>
+    <nav-bar left-arrow @click-left="onClickLeft" fixed>
+      <template #title>
+        <div class="text-lg text-white">
+          矿机详情
+        </div>
+      </template>
+    </nav-bar>
+    <DetailsCard :info="info" />
+    <DetailsList :info="info" />
+    <DetailsFooter :max="Math.floor(profit/ticketNum)" :min="1" @buy="buy" />
+  </div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue'
+import DetailsCard from '@/views/Details/DetailsCard.vue'
+import DetailsList from '@/views/Details/DetailsList.vue'
+import DetailsFooter from '@/views/Details/DetailsFooter.vue'
+import { NavBar, Toast } from 'vant'
+
+import service from '@/service/chain33'
+import { poolInfo, bindPool, checkBind } from '@/service/pool'
+import { signTxGroup } from '@33cn/wallet-api'
+export default Vue.extend({
+  components: {
+    'nav-bar': NavBar,
+    DetailsCard,
+    DetailsList,
+    DetailsFooter
+  },
+  data() {
+    return {
+      info: {} as any,
+      fee: 0,
+      profit: 0,
+      isBind: false,
+      ticketNum: 10000
+    }
+  },
+  methods: {
+    onClickLeft() {
+      this.$router.back()
+    },
+    getFee() {
+      service.getProperFee(0, 0).then(res => {
+        this.fee = res.data.result.properFee
+      })
+      service.getBalance(this.$store.state.app.address, 'coins').then((res: any) => {
+        this.profit = Math.floor((res.data.result as any)[0].balance / 1e8)
+      })
+    },
+    getInfo() {
+      poolInfo(this.$route.query.id as string).then((res: any) => {
+        this.info = res.data.data
+      })
+    },
+    checkBind() {
+      checkBind(this.$route.query.id as string).then(res => {
+        if (res.data.data.isSucc) {
+          this.isBind = true
+        }
+      }).catch(() => {
+        this.isBind = false
+      })
+    },
+    signGroup(txs:Array<string>){
+      return signTxGroup(txs.join(),'none',-1);
+    },
+    async buy(value: string) {
+      // if (this.profit/this.ticketNum < +this.info.minTicket) {
+      if (this.profit/this.ticketNum < 1) {
+        Toast(`您的票数余额为${Math.floor(this.profit/this.ticketNum)}票，不足${this.info.minTicket}票`)
+        return
+      }
+      const bindRes = await service.createBindMiner({
+        bindAddr: this.info.minerAddr,
+        originAddr: this.$store.state.app.address,
+        amount: this.ticketNum * +value * 1e8,
+        checkBalance: false
+      })
+      const transRes = await service.createTransaction({
+        fee: this.fee,
+        to: '16htvcBNSEA7fZhAdLJphDwQRQJaHpyHTp',
+        amount: this.ticketNum * Number(value) * 1e8,
+        note: 'coins->ticket',
+        execName: 'ticket'
+      })
+      const sign = await this.signGroup([bindRes.data.result.txHex, transRes.data.result]);
+      Toast.loading({
+        duration: 0,
+        message: '购买中',
+        forbidClick: true
+      })
+      console.log('sign', sign)
+      const send = await service.sendTransaction(sign)
+      if (send.data.result.error) {
+        Toast('购买失败')
+        return
+      }
+      let res = {} as any
+      const timer = setInterval(async() => {
+        res = await service.getTransaction(send.data.result)
+        if (!res.data.error) {
+          clearInterval(timer)
+          const next = res.data.result.tx.next
+          const transaction = await service.getTransaction(next)
+          if (transaction.data.result.receipt.ty === 1) {
+            Toast(res.data.result.receipt.tyName)
+          } else {
+            const isBind = this.isBind ? true : false
+            bindPool(this.info.id, value, isBind).then(async (r: any) => {
+              if (r.data.data.isSucc) {
+                this.$toast('购买成功')
+              }
+            }).catch(e => {
+              Toast(e.response.data.reason)
+            })
+          }
+        }
+      }, 1000)
+    }
+  },
+  created() {
+    this.getFee()
+    this.getInfo()
+    this.checkBind()
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+  /deep/ .van-nav-bar {
+    background: #323232;
+    color: #fff;
+  }
+  /deep/ .van-nav-bar .van-icon {
+    color: #fff;
+  }
+  /deep/ .van-nav-bar__content {
+    height: 56px;
+  }
+  /deep/ .van-hairline--bottom::after {
+    border-bottom: none;
+  }
+</style>
\ No newline at end of file

src/views/Home.vue

 <template>
   <div class="w-full min-h-screen pb-4">
-    <div class="home-header h-16 mb-0 px-4 flex justify-between items-center">
+    <div class="w-full h-16 mb-0 px-4 bg-theme-color flex justify-between items-center fixed top-0 z-50">
       <div class="text-2xl text-white">社区矿池</div>
       <div class="flex-shrink-0 text-sm text-white" @click="goMining">
         我的矿机
@@ -200,14 +200,14 @@ export default Vue.extend({
           if (!res.data.error) {
             clearInterval(timer)
             if (res.data.result.receipt.ty === 1) {
-              Toast({
+              this.$toast({
                 message: '领取失败',
                 duration: 3000
               })
               this.btnText = '领取收益'
               this.btnType = false
             } else {
-              Toast({
+              this.$toast({
                 message: '领取成功',
                 duration: 3000
               })
@@ -315,7 +315,7 @@ export default Vue.extend({
     }
   }
   .no-content {
-    height: calc(100vh - 320px)
+    min-height: calc(100vh - 320px)
   }
   .hide {
     overflow: hidden;

src/views/Home/InfoCard.vue

+<template>
+  <div class="px-4 pt-20">
+    <div class="flex flex-col py-4 px-5 mb-11 bg-card bg-cover rounded-lg">
+      <div class="text-sm text-left pb-3 tracking-normal hide">当前地址：{{ addr }}</div>
+      <div class="flex items-center justify-between">
+        <div>
+          <p class="text-xs text-brown">可领收益</p>
+          <p class="text-3xl text-red1">{{ profit }}</p>
+        </div>
+        <div>
+          <p class="text-xs text-brown">参与票数</p>
+          <p class="text-3xl text-red1">{{ ticketNum }}</p>
+        </div>
+        <button
+          class="bg-gradient-2 w-20 h-8 leading-8 rounded-full text-sm text-white"
+          :disabled="btnClick"
+          @click="getIncome">{{ btnText }}</button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue'
+import service from '@/service/chain33'
+import { userMinedData } from '@/service/pool'
+import { Toast } from 'vant'
+import Bus from '@/utils/bus'
+export default Vue.extend({
+  data() {
+    return {
+      addr: '',
+      profit: 0,
+      ticketNum: 0,
+      fee: 0,
+      btnClick: false,
+      btnText: '领取收益',
+      timer: 0
+    }
+  },
+  methods: {
+    waitToPool() {
+      this.timer = setInterval(() => {
+        this.getInfo()
+      }, 5000)
+    },
+    getInfo() {
+      service.getBalance(this.$store.state.app.address, 'ticket').then((res: any) => {
+        this.profit = Math.floor((res.data.result as any)[0].balance / 1e8)
+        if (this.profit > 3000) {
+          this.btnClick = true
+          this.btnText = '等待挖矿'
+          this.waitToPool()
+        } else {
+          if (this.timer) clearInterval(this.timer)
+          this.btnText = '领取收益'
+          this.btnClick = false
+        }
+      })
+    },
+    getFee() {
+      service.getProperFee(0, 0).then(res => {
+        this.fee = res.data.result.properFee
+      })
+    },
+    getTicket() {
+      userMinedData().then(res => {
+        this.ticketNum = res.data.data.tickets
+      })
+    },
+    async getIncome() {
+      if (!this.profit) {
+        this.$toast('当前无收益可领')
+        return
+      }
+      Toast.loading({
+        message: '领取中',
+        forbidClick: true,
+        duration: 0
+      })
+      const transaction = await service.createTransaction({
+        to: '16htvcBNSEA7fZhAdLJphDwQRQJaHpyHTp',
+        amount: this.profit * 1e8,
+        fee: this.fee,
+        note: 'ticket -> coins',
+        isWithdraw: true,
+        execName: 'ticket'
+      })
+      await service.signTransition((transaction as any).data.result, async (sign: any) => {
+        let s = {} as any
+        if (typeof sign === 'string') {
+          s = JSON.parse(sign)
+        } else {
+          s = sign
+        }
+        if (s.error) {
+          Toast.clear()
+          return
+        }
+        const send = await service.sendTransaction(s.signHash)
+        if (send.data.error) {
+          Toast(send.data.error)
+          return
+        }
+        let res = {} as any
+        const timer = setInterval(async() => {
+          res = await service.getTransaction(send.data.result)
+          if (!res.data.error) {
+            clearInterval(timer)
+            if (res.data.result.receipt.ty === 1) {
+              this.$toast({
+                message: '领取失败',
+                duration: 3000
+              })
+            } else {
+              this.$toast({
+                message: '领取成功',
+                duration: 3000
+              })
+              this.getInfo()
+            }
+          }
+        }, 1000)
+      })
+    }
+  },
+  created() {
+    this.addr = this.$store.state.app.address
+    this.getInfo()
+    this.getFee()
+    this.getTicket()
+    Bus.$on('updateMsg', () => {
+      this.getTicket()
+    })
+  }
+})
+</script>
\ No newline at end of file

src/views/Home/PoolList.vue

+<template>
+  <div class="px-4">
+    <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="">
+        <div class="dot-r"></div>
+      </div>
+      <div>
+        <template v-if="lists.length > 0">
+          <div class="no-content">
+            <van-pull-refresh
+              v-model="isLoading"
+              success-text="刷新成功"
+              @refresh="onRefresh">
+              <MiningCard v-for="(i, index) in lists" :key="index" :info="i" />
+            </van-pull-refresh>
+          </div>
+        </template>
+        <template v-else>
+          <div class="no-content text-white flex items-center justify-center">
+            暂无矿池
+          </div>
+        </template>
+      </div>
+    </div>
+    <Popup :show="show" @getMessage="addInvite" />
+  </div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue'
+import MiningCard from '@/components/MiningCard.vue'
+import Popup from '@/components/Popup.vue'
+import Bus from '@/utils/bus'
+import { invitePool, poolList } from '@/service/pool'
+import { PullRefresh, Toast } from 'vant'
+export default Vue.extend({
+  components: {
+    'van-pull-refresh': PullRefresh,
+    MiningCard,
+    Popup
+  },
+  data() {
+    return {
+      lists: [] as any,
+      isLoading: false,
+      refresh: false,
+      page: 1,
+      pageSize: 10,
+      count: 0,
+      timer: 0,
+      waiter: 180000,
+      show: false
+    }
+  },
+  methods: {
+    getList() {
+      poolList({
+        page: this.page,
+        pageSize: this.pageSize
+      }).then((res: any) => {
+        if (this.refresh) {
+          this.refresh = false
+          this.lists = []
+        }
+        res.data.data?.list ? this.lists.push(...res.data.data?.list) : this.lists = []
+        this.count = +res.data.data.count
+        document.addEventListener('scroll', this.scrollEvent)
+      }).catch(e => {
+        const err = e.response
+        if (err.data?.code === 406 && err.data?.reason === 'USER_NOT_BIND') {
+          this.show = true
+        }
+        if (this.timer) {
+          clearInterval(this.timer)
+        }
+      })
+      this.isLoading = false
+    },
+    onRefresh() {
+      this.page = 1
+      this.refresh = true
+      this.getList()
+    },
+    scrollEvent() {
+      const e = document.querySelector('.mining-card')
+      const g = (e as HTMLElement)?.offsetHeight
+      const h = document.documentElement?.scrollTop || document.body.scrollTop
+      if (this.lists.length < this.count) {
+        if (h > (g * this.page * (this.pageSize - 3))) {
+          this.page++
+          this.getList()
+        }
+      }
+    },
+    setTimer() {
+      if (this.timer) clearInterval(this.timer)
+      this.timer = setInterval(() => {
+        this.onRefresh()
+      }, this.waiter)
+    },
+    addInvite(val: string) {
+      const regexp = /^(1|3)[a-zA-Z\d]{24,33}$/
+      if (!val) {
+        Toast('请先输入推荐人地址')
+        return
+      } else if (!regexp.test(val)) {
+        Toast('请输入正确的推荐人地址')
+        return
+      }
+      invitePool(val).then((res: any) => {
+        if (res.data.data.isSucc) {
+          Toast('添加成功')
+          this.show = false
+          this.getList()
+          Bus.$emit('updateMsg', true)
+        } else {
+          Toast('请输入正确的推荐人地址')
+        }
+      }).catch(() => {
+        Toast('请输入正确的推荐人地址')
+      })
+    },
+  },
+  created() {
+    this.getList()
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+  .card-list { 
+    border: 1px solid #A67855;
+    border-top: none;
+    border-radius: 5px;
+    .home-title {
+      top: 0;
+      left: 50%;
+      transform: translate3d(-50%, -50%, 0);
+      &::before, &::after {
+        display: block;
+        content: '';
+        width: 15%;
+        height: 5px;
+        border-top: 1px solid #A67855;
+        position: absolute;
+      }
+      &::after {
+        border-top-right-radius: 5px;
+        top: 50%;
+        right: -1px;
+      }
+      &::before {
+        border-top-left-radius: 5px;
+        top: 50%;
+        left: -1px;
+      }
+      .dot-l, .dot-r {
+        width: 6px;
+        height: 6px;
+        border-radius: 50%;
+        background: #A67855;
+        box-shadow: 0 0 2px 1px #A67855;
+        position: absolute;
+        top: 50%;
+        transform: translate3d(0, -50%, 0);
+      }
+      .dot-l {
+        left: 14%;
+      }
+      .dot-r {
+        right: 14%;
+      }
+    }
+  }
+  /deep/ .van-pull-refresh {
+    overflow: inherit;
+  }
+  /deep/ .van-popup--center {
+    width: 90%;
+    border-radius: 12px;
+  }
+</style>
\ No newline at end of file

src/views/Home/index.vue

+<template>
+  <div class="w-full min-h-screen pb-4">
+    <Header>
+      <template name="left">
+        <div class="text-2xl text-white">社区矿池</div>
+      </template>
+      <template name="right">
+        <div class="flex-shrink-0 text-sm text-white" @click="goMining">
+          我的矿机
+          <span class="inline-block w-4 h-4 rounded-full bg-gradient-1">
+            <van-icon name="arrow" color="#323232" size="12" />
+          </span>
+        </div>
+      </template>
+    </Header>
+    <InfoCard />
+    <PoolList />
+  </div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue'
+import Header from '@/components/Header.vue'
+import InfoCard from '@/views/Home/InfoCard.vue'
+import PoolList from '@/views/Home/PoolList.vue'
+import { Icon } from 'vant'
+export default Vue.extend({
+  components: {
+    Header,
+    'van-icon': Icon,
+    InfoCard,
+    PoolList
+  },
+  methods: {
+    goMining() {
+      this.$router.push({ path: '/mine', query: {}})
+    },
+  }
+})
+</script>
\ No newline at end of file

src/views/Mine/MachineList.vue

+<template>
+  <div class=" min-h-screen pb-5 px-4 pt-16">
+    <keep-alive>
+      <template v-if="lists.length > 0">
+        <van-pull-refresh
+          v-model="isLoading"
+          success-text="刷新成功"
+          @refresh="onRefresh">
+          <mining-info v-for="(i, index) in lists" :key="index" :type="active" :info="i" />
+        </van-pull-refresh>
+      </template>
+      <template v-else>
+        <div class="no-content text-white flex items-center justify-center">暂无矿机</div>
+      </template>
+    </keep-alive>
+  </div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue'
+import MiningInfo from '@/components/MiningInfo.vue'
+import { PullRefresh } from 'vant'
+import { userMachineList } from '@/service/pool'
+export default Vue.extend({
+  components: {
+    MiningInfo,
+    'van-pull-refresh': PullRefresh
+  },
+  props: {
+    active: {
+      type: [Number, String],
+      default: 1
+    }
+  },
+  data() {
+    return {
+      lists: [] as any,
+      isLoading: false,
+      page: 1,
+      pageSize: 10,
+      count: 0,
+    }
+  },
+  methods: {
+    getNowList() {
+      userMachineList({
+        page: this.page,
+        pageSize: this.pageSize,
+        status: 2
+      }).then(res => {
+        this.count = +res.data.data.count
+        this.lists = res.data.data.list || []
+        document.addEventListener('scroll', this.scrollEvent)
+      })
+      this.isLoading = false
+    },
+    getEndList() {
+      userMachineList({
+        page: this.page,
+        pageSize: this.pageSize,
+        status: 1
+      }).then(res => {
+        this.count = +res.data.data.count
+        this.lists = res.data.data.list || []
+        document.addEventListener('scroll', this.scrollEvent)
+      })
+      this.isLoading = false
+    },
+    scrollEvent() {
+      const e = document.querySelector('.mining-card')
+      const g = (e as HTMLElement)?.offsetHeight
+      const h = document.documentElement?.scrollTop || document.body.scrollTop
+      if (this.lists.length < this.count) {
+        if (h > (g * this.page * (this.pageSize - 3))) {
+          this.page++
+          if (this.active === 1) {
+            this.getNowList()
+          } else {
+            this.getEndList()
+          }
+        }
+      }
+    },
+    onRefresh() {
+      this.page = 1
+      this.pageSize = 10
+      if (this.active === 1) {
+        this.getNowList()
+      } else {
+        this.getEndList()
+      }
+    },
+  },
+  created() {
+    this.getNowList()
+  },
+  watch: {
+    active(n) {
+      this.lists = []
+      if (n === 1) {
+        this.getNowList()
+      } else {
+        this.getEndList()
+      }
+    }
+  },
+  beforeDestroy() {
+    document.removeEventListener('scroll', this.scrollEvent)
+  }
+})
+</script>
\ No newline at end of file

src/views/Mine/index.vue

+<template>
+  <div class="mine">
+    <nav-bar left-arrow @click-left="onClickLeft" fixed>
+      <template #title>
+        <div class="tab-tool">
+          <div :class="{'active': active === 1}" @click="setTab(1)">进行中</div>
+          <div :class="{'active': active === 2}" @click="setTab(2)">已结束</div>
+        </div>
+      </template>
+    </nav-bar>
+    <machine-list :active="active" />
+  </div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue'
+import { NavBar } from 'vant'
+import MachineList from '@/views/Mine/MachineList.vue'
+export default Vue.extend({
+  components: {
+    'nav-bar': NavBar,
+    MachineList
+  },
+  data() {
+    return {
+      active: 1,
+    }
+  },
+  methods: {
+    
+    onClickLeft() {
+      this.$router.back()
+    },
+    setTab(n: number) {
+      this.active = n
+    }
+  },
+})
+</script>
+
+<style lang="scss" scoped>
+  .tab-tool {
+    width: 140px;
+    height: 32px;
+    line-height: 32px;
+    color: #EFB771;
+    display: flex;
+    align-items: center;
+    border: 1px solid #EFB771;
+    border-radius: 6px;
+    overflow: hidden;
+    box-sizing: border-box;
+    div {
+      height: 100%;
+      flex: 1;
+    }
+  }
+  .active {
+    background: linear-gradient(to right, #FCE4C1, #EFB771);
+    color: #4F320D;
+  }
+
+  .no-content {
+    height: calc(100vh - 84px);
+  }
+
+  /deep/ .van-nav-bar {
+    background: #323232;
+  }
+
+  /deep/ .van-nav-bar .van-icon {
+    color: #fff;
+  }
+
+  /deep/ .van-nav-bar__content {
+    height: 56px;
+  }
+
+  /deep/ .van-hairline--bottom::after {
+    border-bottom: none;
+  }
+
+  /deep/ .van-pull-refresh {
+    overflow: inherit;
+  }
+</style>
\ No newline at end of file

tailwind.config.js

@@ -25,6 +25,7 @@ module.exports = {
       'brown1': '#4F320D',         // 收益按钮
       'brown2': '#68615D',     
       'brown3': '#8A5727',
+      'orange1': '#EFB771',
       black: colors.black,
       white: colors.white,
       gray: colors.coolGray,