接口

.env.development

+NODE_ENV="development"
+VUE_APP_URL="http://192.168.21.109:8008"
\ No newline at end of file

.env.production

+NODE_ENV="production"
+VUE_APP_URL="http://"
\ No newline at end of file

.eslintrc.js

@@ -13,6 +13,10 @@ module.exports = {
   },
   rules: {
     'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
-    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+    "@typescript-eslint/no-explicit-any": 0,
+    "@typescript-eslint/explicit-module-boundary-types": 0,
+    "@typescript-eslint/ban-types": 0,
+    "@typescript-eslint/no-this-alias": 0
   }
 }

package.json

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
+    "build:test": "vue-cli-service build --mode development",
     "build": "vue-cli-service build",
     "lint": "vue-cli-service lint",
     "dev": "vue-cli-service serve"
@@ -12,11 +13,13 @@
     "autoprefixer": "^9",
     "axios": "^0.21.1",
     "babel-plugin-import": "^1.13.3",
+    "better-scroll": "^2.4.2",
     "core-js": "^3.6.5",
     "postcss": "^7",
     "register-service-worker": "^1.7.1",
     "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.0.2",
     "vant": "^2.12.25",
+    "vconsole": "^3.9.1",
     "vue": "^2.6.11",
     "vue-class-component": "^7.2.3",
     "vue-property-decorator": "^9.1.2",

public/index.html

@@ -4,6 +4,7 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <script type="text/javascript" src="https://fe33cn.gitee.io/fe33cn_libs/jsBridge-cdn.js?v=v20200120"></script>
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
     <title><%= htmlWebpackPlugin.options.title %></title>
   </head>

src/App.vue

@@ -4,6 +4,21 @@
   </div>
 </template>
 
+<script lang="ts">
+import Vue from 'vue'
+import { getCurrentBTYAddress } from '@/utils/bridge'  // 币钱包环境
+// import { test } from '@/utils/test'  // 本地测试
+export default Vue.extend({
+  mounted() {
+    // this.$store.commit('app/SET_ADDRESS', test.addr)
+    getCurrentBTYAddress('',(res: any) => {
+      console.log('res', res)
+      this.$store.commit('app/SET_ADDRESS', res)
+    })
+  }
+})
+</script>
+
 <style lang="scss">
 #app {
   font-family: Avenir, Helvetica, Arial, sans-serif;

src/components/MiningCard.vue

@@ -56,6 +56,7 @@ export default Vue.extend({
       margin-bottom: 0;
     }
     .mining-name {
+      max-width: 100%;
       padding: 2px 8px;
       position: absolute;
       top: 10px;

src/components/MiningInfo.vue

@@ -57,9 +57,6 @@ export default Vue.extend({
     position: relative;
     margin-bottom: 14px;
     background-size: 100% 100%;
-    // border-width: 1px;
-    // border-style: solid;
-    // border-top-width: 2px;
     border-radius: 9px;
     &:last-of-type {
       margin-bottom: 0;
@@ -76,6 +73,7 @@ export default Vue.extend({
       z-index: -1;
     }
     .mining-name {
+      max-width: 100%;
       padding: 2px 8px;
       position: absolute;
       top: 10px;

src/service/chain33.ts

+import { service } from "./service";
+import axios from 'axios'
+import { sign } from '@/utils/bridge'
+import { rawTransaction } from "@/type/request";
+
+async function chainRequire(method:string,data:any[], b?: boolean, _this?: any, cb?:any){
+  const CancelToken = axios.CancelToken;
+  return await service.request({
+    data:{
+      "jsonrpc":"2.0",
+      id:1,
+      method:method,
+      params:data
+    },
+    cancelToken: b ? new CancelToken(function executor(c) {
+      _this.cancelAjax = c
+    }) : undefined
+  }).then(res=>{
+    if(cb){
+      return cb(res)
+    }
+    return res
+  }).catch((err)=>{
+    if(cb){
+      return cb(err)
+    }
+    return err
+  })
+}
+
+/**
+   * 签名
+   * @param txHex 
+   * @param fn 
+   */
+// function signTransition (txHex: string, fn?: any){
+//   sign({
+//     createHash: txHex,
+//     exer: 'user.p.szhtest.rankvote',
+//     isWithhold: 1
+//   }, fn)
+// }
+async function signTransition(txHex:string,privateKey?:string){
+  return await chainRequire('Chain33.SignRawTx',[{
+      privkey: privateKey,
+      txHex: txHex,
+      expire: '1h',
+  }])
+}
+
+/**
+ * 发送签名
+ * @param txHex 
+ * @returns 
+ */
+async function sendTransaction (txHex:string){
+  return await chainRequire('Chain33.SendTransaction',[{
+    data: txHex
+  }])
+}
+
+/**
+ * 获取交易状态
+ */
+async function getTransaction(hash: string) {
+  return await chainRequire('Chain33.QueryTransaction', [{
+    hash: hash
+  }])
+}
+
+async function signFun(b: any, fn: any, fail?: any) {
+  // let s = {} as any
+  // if (typeof sign === 'string') {
+  //   s = JSON.parse(sign)
+  // } else {
+  //   s = sign
+  // }
+  // if (s.error) return
+  // const send = await sendTransaction(s.signHash)
+  // let res = {} as any
+  // const timer = setInterval(async() => {
+  //   res = await getTransaction(send.data.result)
+  //   if (!res.data.error) {
+  //     clearInterval(timer)
+  //     if (res.data.result.receipt.ty === 1) {
+  //       if (fail) fail()
+  //     } else {
+  //       if (fn) fn(res)
+  //     }
+  //   }
+  // }, 1000)
+  // web 测试
+  const sign = await signTransition(b.data.result, '')
+  const send = await sendTransaction(sign.data.result)
+  let res = {} as any
+  const timer = setInterval(async() => {
+    res = await getTransaction(send.data.result)
+    if (!res.data.error) {
+      clearInterval(timer)
+      if (res.data.result.receipt.ty === 1) {
+        if (fail) fail()
+      } else {
+        if (fn) fn(res)
+      }
+    }
+  }, 1000)
+}
+
+export default {
+  
+  /**
+   * 构造交易
+   * @param data 
+   * @returns 
+   */
+  createRawTransaction: async function (data: rawTransaction, fn?: any, fail?: any) {
+    const res = await chainRequire('Chain33.CreateRawTransaction', [data])
+    console.log(res)
+    // if 判断
+    return signFun(res, fn, fail)
+  },
+  /**
+   * 获取合约余额
+   * @param addr 
+   * @returns 
+   */
+  getBalance: async function (addr: string, execer: string) {
+    return service.request({
+      data: {
+        id: 1,
+        method: 'Chain33.GetBalance',
+        params: [{
+          addresses: [
+            addr
+          ],
+          execer: execer
+        }]
+      }
+    })
+  },
+}
\ No newline at end of file

src/service/pool.ts

+import { service } from "./service";
+
+export const bindPool = function(id: string) {
+  return service.post('/web/bind-pool', { id: id })
+}
+
+export const poolInfo = function(id: string|number) {
+  return service.get('/web/pool-info', { params: {id}})
+}
+
+export const poolList = function(data: {
+  page: number,
+  pageSize: number,
+  limit?: number
+}) {
+  return service.get('/web/pool-list', { params: data })
+}
+
+export const userMachineList = function(data: {
+  id?: string|number,
+  addr?: string,
+  page: string|number,
+  pageSize: string|number,
+  limit?: string|number
+}) {
+  return service.get('/web/user-machine-list', { params: data })
+}
+
+export const userMinedData = function(id: string|number) {
+  return service.get('/web/user-mined-data', { params: { id }})
+}
+
+export const userMinedDetail = function(id: string|number) {
+  return service.get('/web/user-mined-detail', { params: { id }})
+}
+
+export const userMinedList = function(data: {
+  id?: string|number,
+  addr?: string,
+  page: string|number,
+  pageSize: string|number,
+  limit?: string|number
+}) {
+  return service.get('/web/user-mined-list', { params: data })
+}
\ No newline at end of file

src/service/service.ts

+import axios from "axios";
+
+const baseUrl = process.env.VUE_APP_URL
+
+export const service = axios.create({
+  baseURL: baseUrl,
+  timeout: 15000
+})
+

src/store/app/index.ts

+
+const stateData = {
+	address: '',   // 用户地址
+}
+export type AppType = typeof stateData
+export const appStore = {
+	namespaced: true,
+		state: () => ({
+			...stateData
+		}),
+	mutations: {
+		SET_ADDRESS(state: AppType, s: string) {
+			state.address = s
+		},
+		CLEAR_ADDRESS(state: AppType) {
+			state.address = ''
+		},
+	},
+	actions: {
+
+	},
+	getters: {
+			
+	}
+};
+  

src/type/request.ts

+
+
+export interface rawTransaction {
+  to: string;
+  amount: number;
+  fee: number;
+  note?: string;
+  isToken?: boolean;
+  isWithdraw: boolean;
+  tokenSymbol?: string;
+  execName?: string;
+  exerce: string
+}
\ No newline at end of file

src/utils/bridge.ts

+const jsBridge = (window as any).jsBridge
+const _jsBridge = new jsBridge()
+
+export const sign = (params: any, fn?: Function) => _jsBridge.sign(params, fn)
+export const getCurrentBTYAddress = (params: any, fn?: Function) => _jsBridge.getCurrentBTYAddress(params, fn)
\ No newline at end of file

src/utils/test.ts

+// 测试账号文件
\ No newline at end of file

src/utils/utils.ts

+
+/**
+ * 获取已运行天数
+ * @param d 
+ * @returns 
+ */
+export const getUsedDays = (d: string) => {
+  const n = Date.now()
+  const p = new Date(d).getTime()
+  return Math.floor((n - p) / (1000 * 60 * 60 * 24))
+}
\ No newline at end of file

src/views/Details.vue

@@ -86,9 +86,9 @@
       <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">1.bty会发生价格波动的情况，且挖矿难度是逐渐递增的。币价的波动或者挖矿难度的提高
+          <p class="pb-2 leading-5">1.bty会发生价格波动的情况，且挖矿难度是逐渐递增的。币价的波动或者挖矿难度的提高
             都可能导致挖矿收益变动。本矿池不作保证收益承诺。用户须仔细评估自己的风险承受能力，
-            在可接受的风控范围内投资数字货币挖矿。矿池发起方对本矿池条款保留所有解释权。</p>
+            在可接受的风控范围内投资数字货币挖矿。矿池发起方对本矿池条款保留所有解释权。</p><br />
           <p>2.由于法律政策、战争、地震、火灾和电力故障等不可抗原因导致矿池暂停运营，矿池发起
             人不承担赔偿责任。</p>
         </div>
@@ -162,4 +162,26 @@ export default Vue.extend({
   /deep/ .van-hairline--bottom::after {
     border-bottom: none;
   }
+
+  /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/Home.vue

 <template>
-  <div class="w-full min-h-screen px-4 pt-7 pb-4">
-    <div class="mb-3 flex justify-between items-center">
+  <div class="w-full min-h-screen px-4 pt-2 pb-4">
+    <!-- <van-loading> -->
+    <div class="home-header h-16 mb-0 flex justify-between items-center">
       <div class="text-2xl text-white">社区矿池</div>
       <div class="flex-shrink-0 text-sm text-white" @click="goMining">
         我的矿机
@@ -20,7 +21,10 @@
           <p class="text-xs text-brown">参与票数</p>
           <p class="text-3xl text-red1">{{ 100 }}</p>
         </div>
-        <button class="bg-gradient-2 w-20 h-8 leading-8 rounded-full text-sm text-white">领取收益</button>
+        <button
+          class="bg-gradient-2 w-20 h-8 leading-8 rounded-full text-sm text-white"
+          :disabled="btnType"
+          @click="getIncome">{{ btnText }}</button>
       </div>
         
     </div>
@@ -33,31 +37,134 @@
         <div class="dot-r"></div>
       </div>
       <div>
-        <MiningCard v-for="i in 8" :key="i" />
+        <template v-if="lists.length > 0">
+          <van-pull-refresh
+            v-model="isLoading"
+            success-text="刷新成功"
+            @refresh="onRefresh">
+            <MiningCard v-for="i in 8" :key="i" />
+          </van-pull-refresh>
+        </template>
+        <template v-else>
+          <div class="no-content text-white flex items-center justify-center">
+            暂无矿池
+          </div>
+        </template>
       </div>
     </div>
+    <!-- </van-loading> -->
   </div>
 </template>
 
 <script lang="ts">
-import { Icon } from 'vant'
+import { Icon, PullRefresh, Toast } from 'vant'
 import MiningCard from '@/components/MiningCard.vue'
 import Vue from 'vue'
+import service from '@/service/chain33'
+import { poolList } from '@/service/pool'
 export default Vue.extend({
   components: {
-    // 'van-button': Button,
     'van-icon': Icon,
+    'van-pull-refresh': PullRefresh,
+    // 'van-loading': Loading,
     MiningCard
   },
+  data() {
+    return {
+      lists: [1] as any,
+      isLoading: false,
+      count: 0,
+      timer: 0,
+      btnText: '领取收益',
+      btnType: false,
+      page: 1,
+      pageSize: 10
+    }
+  },
   methods: {
+    getList() {
+      // Toast.loading({
+      //   duration: 15000,
+      //   message: '加载中'
+      // })
+      poolList({
+        page: this.page,
+        pageSize: this.pageSize
+      }).then((res: any) => {
+        this.lists = res.data.list
+        this.count = res.count
+        Toast.clear()
+      })
+      this.isLoading = false
+    },
+    getInfo() {
+      service.getBalance('', '').then(res => {
+        console.log(res)
+      })
+    },
+    getIncome() {
+      this.btnText = '领取中'
+      this.btnType = true
+      service.createRawTransaction({
+        to: '',
+        amount: 10,
+        fee: 0,
+        isWithdraw: false,
+        execName: 'string',
+        exerce: ''
+      }, () => {
+        console.log('success')
+        this.btnText = '领取收益'
+        this.btnType = false
+      }, () => {
+        this.$toast("领取失败")
+        this.btnText = '领取收益'
+        this.btnType = false
+      })
+    },
     goMining() {
       this.$router.push({ path: '/mine', query: {}})
+    },
+    onRefresh() {
+      this.getList()
+    },
+    scrollEvent() {
+      const e = document.querySelector('.mining-card')
+      const g = (e as HTMLElement)?.offsetHeight
+      const h = document.documentElement?.scrollTop
+      if (this.lists.length < this.count) {
+        if (h > (g * this.page * this.pageSize - 3)) {
+          this.getList()
+        }
+      }
+    },
+    setTimer() {
+      if (this.timer) clearInterval(this.timer)
+      this.timer = setInterval(() => {
+        this.getList()
+      }, 180000)
     }
+  },
+  mounted() {
+    const that = this
+    this.getList()
+    document.addEventListener('scroll', that.scrollEvent)
+  },
+  beforeDestroy() {
+    const that = this
+    document.removeEventListener('scroll', that.scrollEvent)
+    clearInterval(this.timer)
   }
 })
 </script>
 
 <style lang="scss" scoped>
+  .home-header {
+    position: sticky;
+    top: 0;
+    z-index: 50;
+    background: #323232;
+  }
   .icon {
     display: inline-block;
     width: 16px;
@@ -114,4 +221,10 @@ export default Vue.extend({
       }
     }
   }
+  .no-content {
+    height: calc(100vh - 320px)
+  }
+  /deep/ .van-pull-refresh {
+    overflow: inherit;
+  }
 </style>

src/views/Mine.vue

@@ -9,37 +9,70 @@
       </template>
     </nav-bar>
     <div class="pb-5 px-4 pt-16">
-      <mining-info v-for="i in 5" :key="i" :type="active" />
+      <keep-alive>
+        <template v-if="lists.length > 0">
+          <van-pull-refresh
+            v-model="isLoading"
+            success-text="刷新成功"
+            @refresh="onRefresh">
+            <mining-info v-for="i in 5" :key="i" :type="active" />
+          </van-pull-refresh>
+        </template>
+        <template v-else>
+          <div class="no-content text-white flex items-center justify-center">暂无矿机</div>
+        </template>
+      </keep-alive>
     </div>
   </div>
 </template>
 
 <script lang="ts">
 import Vue from 'vue'
-import { NavBar } from 'vant'
+import { NavBar, PullRefresh } from 'vant'
 import MiningInfo from '@/components/MiningInfo.vue'
 export default Vue.extend({
   components: {
     'nav-bar': NavBar,
+    'van-pull-refresh': PullRefresh,
     MiningInfo
   },
   data() {
     return {
-      active: 1
+      active: 1,
+      isLoading: false,
+      lists: [1,2]
     }
   },
   methods: {
     getList() {
       console.log('run')
+      this.isLoading = false
+    },
+    getEndList() {
+      console.log('end')
+      this.isLoading = false
     },
     onClickLeft() {
       this.$router.back()
     },
+    onRefresh() {
+      if (this.active === 1) {
+        this.getList()
+      } else {
+        this.getEndList()
+      }
+    },
     setTab(n: number) {
-      console.log(n)
       this.active = n
-      this.getList()
+      if (this.active === 1) {
+        this.getList()
+      } else {
+        this.getEndList()
+      }
     }
+  },
+  mounted() {
+    this.getList()
   }
 })
 </script>
@@ -66,6 +99,10 @@ export default Vue.extend({
     color: #4F320D;
   }
 
+  .no-content {
+    height: calc(100vh - 84px);
+  }
+
   /deep/ .van-nav-bar {
     background: #323232;
   }
@@ -81,4 +118,8 @@ export default Vue.extend({
   /deep/ .van-hairline--bottom::after {
     border-bottom: none;
   }
+
+  /deep/ .van-pull-refresh {
+    overflow: inherit;
+  }
 </style>
\ No newline at end of file