合伙人-我的钱包静态

htmldev/loan/src/assets/styles/reset.scss

@@ -4,7 +4,7 @@
   padding: 0;
   border: 0;
   box-sizing: border-box;
-  font-family: PingFangSC-Regular, HYQiHei-FES, "Helvetica Neue", Helvetica, STHeiTi, Arial, sans-serif;
+  font-family: PingFang SC, HYQiHei-FES, "Helvetica Neue", Helvetica, STHeiTi, Arial, sans-serif;
   line-height: 1.42857143;
   font-weight: 400;
   -webkit-tap-highlight-color: transparent;

htmldev/loan/src/router/index.js

@@ -100,17 +100,29 @@ const routes = [
   {
     path: '/partner/sale', // 放款总额
     name: 'Sale',
-    component: () => import(/* webpackChunkName: "partner_sale" */ '../views/partner/sale')
+    component: () => import(/* webpackChunkName: "partner_sale" */ '../views/partner/sale'),
+    meta: {
+      isUseCache: false,
+      keepAlive: true
+    }
   },
   {
     path: '/partner/wallet', // 我的钱包
     name: 'Wallet',
-    component: () => import(/* webpackChunkName: "partner_wallet" */ '../views/partner/wallet')
+    component: () => import(/* webpackChunkName: "partner_wallet" */ '../views/partner/wallet'),
+    meta: {
+      isUseCache: false,
+      keepAlive: true
+    }
   },
   {
     path: '/partner/business', // 我的合伙人
     name: 'Business',
-    component: () => import(/* webpackChunkName: "partner_business" */ '../views/partner/business')
+    component: () => import(/* webpackChunkName: "partner_business" */ '../views/partner/business'),
+    meta: {
+      isUseCache: false,
+      keepAlive: true
+    }
   },
   {
     path: '/partner/login', // 登录

htmldev/loan/src/views/partner/sale/index.vue

@@ -1,13 +1,237 @@
 <template>
-  <div>sale</div>
+  <div class="container">
+    <div class="header">
+      <h2 class="title">放款总额</h2>
+      <p class="count">7387万元</p>
+    </div>
+    <div class="better-scroll wrapper" ref="wrapper">
+      <ul>
+        <li class="list" v-for="(item, index) in listData" :key="index">
+          <p class="amount">
+            <span>放款金额：</span>
+            <span>20万元</span>
+          </p>
+          <p class="order-id">申请单号：19487357456w785563</p>
+          <p class="create-time">放款时间：2020-12-23 19:30</p>
+        </li>
+        <li class="bitmap" v-if="!listData.length && booFetchData">
+          <p>暂无记录</p>
+        </li>
+      </ul>
+    </div>
+  </div>
 </template>
 
 <script>
+  import BScroll from 'better-scroll'
+  import { Toast } from 'vant'
+  import axios from 'axios'
+
+  const PAGESIZE = 20
   export default {
-    name: 'sale'
+    name: 'sale',
+    props: {
+      tabindex: {
+        type: Number,
+        default: 1
+      }
+    },
+    data () {
+      return {
+        pager: {
+          pagenum: 1,
+          pagesize: PAGESIZE,
+          pagecount: 1
+        },
+        listData: [],
+        scroll: null,
+        numFetchStatus: 0,
+        arrFetchStatus: ['正在加载，请稍后～', '到底了'],
+        booFetchData: false,
+        numPositionY: 0
+      }
+    },
+    activated () {
+      if (!this.$route.meta.isUseCache) {
+        this.pager = {
+          pagenum: 1,
+          pagesize: PAGESIZE,
+          pagecount: 1
+        }
+        this.listData = []
+        this.scroll = null
+        this.numFetchStatus = 0
+        this.booFetchData = false
+        this.numPositionY = 0
+        this.funFetch()
+      } else {
+        this.$nextTick(() => {
+          if (this.scroll) {
+            this.scroll.refresh()
+            this.scroll.scrollTo(0, this.numPositionY)
+          }
+        })
+      }
+    },
+    async mounted () {
+      await this.$nextTick()
+      this.$refreshTitle('放款总额')
+    },
+    methods: {
+      funFetch () {
+        const vm = this
+        axios.post('/', {
+          Page: vm.pager.pagenum,
+          PageSize: vm.pager.pagesize
+        }).then(response => {
+          if (response.Status === 1) {
+            const data = response.Data
+            vm.pager.pagecount = data.pageCount * 1
+            vm.pager.pagenum++
+            vm.booFetchData = true
+            const temp = data.List
+            if (temp.length) {
+              vm.listData = vm.listData.concat(temp)
+              vm.$nextTick(() => {
+                if (!vm.scroll) {
+                  vm.scroll = new BScroll(vm.$refs.wrapper, {
+                    click: true,
+                    pullUpLoad: {
+                      threshold: -20
+                    },
+                    scrollbar: true
+                  })
+                  vm.scroll.on('pullingUp', () => {
+                    if (vm.pager.pagenum > vm.pager.pagecount || vm.pager.pagecount === 0) {
+                      vm.numFetchStatus = 1
+                      return
+                    }
+                    vm.funFetch()
+                  })
+                } else {
+                  vm.scroll.refresh()
+                  vm.scroll.finishPullUp()
+                }
+              })
+            }
+          }
+        }).catch(() => {
+          Toast('失败了')
+        })
+      }
+    }
   }
 </script>
 
 <style lang="scss" scoped>
+  .container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 100%;
+  }
+
+  .header {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 100%;
+    padding: 25px 0 21px;
+  }
+
+  .title {
+    width: 343px;
+    padding-left: 8px;
+    line-height: 33px;
+    font-size: 24px;
+    font-weight: 500;
+    color: #333;
+  }
+
+  .count {
+    width: 343px;
+    padding-left: 5px;
+    margin-top: 6px;
+    line-height: 42px;
+    font-size: 30px;
+    font-weight: 500;
+    color: #EE0A23;
+  }
+
+  .wrapper {
+    position: relative;
+    width: 100%;
+    height: calc(100vh - 127px);
+    overflow: hidden;
+
+    ul {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      width: 100%;
+      padding-bottom: 80px;
+    }
+  }
+
+  .list {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 343px;
+    padding: 16px 0;
+    margin-top: 16px;
+    border-radius: 4px;
+    background: #FFFFFF;
 
+    &:nth-of-type(1) {
+      margin-top: 0;
+    }
+  }
+
+  .amount {
+    display: flex;
+    align-items: center;
+    width: 311px;
+
+    span {
+      line-height: 20px;
+      font-size: 15px;
+      font-weight: 500;
+
+      &:nth-of-type(1) {
+        color: #333;
+      }
+
+      &:nth-of-type(2) {
+        color: #EE0A23;
+      }
+    }
+  }
+
+  .order-id {
+    width: 311px;
+    margin-top: 8px;
+    line-height: 17px;
+    font-size: 12px;
+    font-weight: 500;
+    color: #333;
+  }
+
+  .create-time {
+    width: 311px;
+    margin-top: 8px;
+    line-height: 17px;
+    font-size: 12px;
+    color: #999;
+  }
+
+  .bitmap {
+    p {
+      line-height: 22px;
+      font-size: 16px;
+      font-weight: 500;
+      text-align: center;
+      color: #333;
+    }
+  }
 </style>

htmldev/loan/src/views/partner/wallet/index.vue

@@ -1,13 +1,268 @@
 <template>
-  <div>wallet</div>
+  <div class="container">
+    <div class="header">
+      <h2 class="title">余额(元)</h2>
+      <p class="count">7387.00</p>
+      <button class="cashing">提现</button>
+    </div>
+    <p class="balance">余额明细</p>
+    <div class="better-scroll wrapper" ref="wrapper">
+      <ul>
+        <li class="list" v-for="(item, index) in listData" :key="index">
+          <p class="amount">
+            <span>奖励(元)：</span>
+            <span>+6,234.00</span>
+          </p>
+          <p class="description">推广奖励</p>
+          <p class="create-time">2020-12-23 19:30</p>
+        </li>
+        <li class="bitmap" v-if="!listData.length && booFetchData">
+          <p>暂无记录</p>
+        </li>
+      </ul>
+    </div>
+  </div>
 </template>
 
 <script>
+  import BScroll from 'better-scroll'
+  import { Toast } from 'vant'
+  import axios from 'axios'
+
+  const PAGESIZE = 20
   export default {
-    name: 'wallet'
+    name: 'wallet',
+    props: {
+      tabindex: {
+        type: Number,
+        default: 1
+      }
+    },
+    data () {
+      return {
+        pager: {
+          pagenum: 1,
+          pagesize: PAGESIZE,
+          pagecount: 1
+        },
+        listData: [],
+        scroll: null,
+        numFetchStatus: 0,
+        arrFetchStatus: ['正在加载，请稍后～', '到底了'],
+        booFetchData: false,
+        numPositionY: 0
+      }
+    },
+    activated () {
+      if (!this.$route.meta.isUseCache) {
+        this.pager = {
+          pagenum: 1,
+          pagesize: PAGESIZE,
+          pagecount: 1
+        }
+        this.listData = []
+        this.scroll = null
+        this.numFetchStatus = 0
+        this.booFetchData = false
+        this.numPositionY = 0
+        this.funFetch()
+      } else {
+        this.$nextTick(() => {
+          if (this.scroll) {
+            this.scroll.refresh()
+            this.scroll.scrollTo(0, this.numPositionY)
+          }
+        })
+      }
+    },
+    async mounted () {
+      await this.$nextTick()
+      this.$refreshTitle('我的钱包')
+    },
+    methods: {
+      funFetch () {
+        const vm = this
+        axios.post('/', {
+          Page: vm.pager.pagenum,
+          PageSize: vm.pager.pagesize
+        }).then(response => {
+          if (response.Status === 1) {
+            const data = response.Data
+            vm.pager.pagecount = data.pageCount * 1
+            vm.pager.pagenum++
+            vm.booFetchData = true
+            const temp = data.List
+            if (temp.length) {
+              vm.listData = vm.listData.concat(temp)
+              vm.$nextTick(() => {
+                if (!vm.scroll) {
+                  vm.scroll = new BScroll(vm.$refs.wrapper, {
+                    click: true,
+                    pullUpLoad: {
+                      threshold: -20
+                    },
+                    scrollbar: true
+                  })
+                  vm.scroll.on('pullingUp', () => {
+                    if (vm.pager.pagenum > vm.pager.pagecount || vm.pager.pagecount === 0) {
+                      vm.numFetchStatus = 1
+                      return
+                    }
+                    vm.funFetch()
+                  })
+                } else {
+                  vm.scroll.refresh()
+                  vm.scroll.finishPullUp()
+                }
+              })
+            }
+          }
+        }).catch(() => {
+          Toast('失败了')
+        })
+      }
+    }
   }
 </script>
 
 <style lang="scss" scoped>
+  .container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 100%;
+  }
+
+  .header {
+    position: relative;
+    left: 0;
+    top: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 100%;
+    padding: 25px 0 21px;
+    background: #fff;
+  }
+
+  .title {
+    width: 343px;
+    padding-left: 8px;
+    line-height: 33px;
+    font-size: 24px;
+    font-weight: 500;
+    color: #333;
+  }
+
+  .count {
+    width: 343px;
+    padding-left: 5px;
+    margin-top: 6px;
+    line-height: 42px;
+    font-size: 30px;
+    font-weight: 500;
+    color: #EE0A23;
+  }
+
+  .cashing {
+    position: absolute;
+    right: 16px;
+    bottom: 24px;
+    width: 96px;
+    height: 45px;
+    border-radius: 4px;
+    line-height: 45px;
+    font-size: 15px;
+    font-weight: 500;
+    text-align: center;
+    color: #fff;
+    background: linear-gradient(90deg, #E5C7A5 0%, #CFAA7F 100%), linear-gradient(90deg, #DBC3A9 0%, #C7AB8A 100%);
+    box-shadow: 0 14px 9px -10px rgba(219, 208, 194, 1);
+  }
+
+  .balance {
+    width: 100%;
+    padding-left: 32px;
+    margin: 31px 0 14px;
+    line-height: 20px;
+    font-size: 15px;
+    color: #333;
+  }
+
+  .wrapper {
+    position: relative;
+    width: 100%;
+    height: calc(100vh - 192px);
+    overflow: hidden;
+
+    ul {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      width: 100%;
+      padding-bottom: 80px;
+    }
+  }
+
+  .list {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 343px;
+    padding: 16px 0;
+    margin-top: 16px;
+    border-radius: 4px;
+    background: #FFFFFF;
+
+    &:nth-of-type(1) {
+      margin-top: 0;
+    }
+  }
+
+  .amount {
+    display: flex;
+    align-items: center;
+    width: 311px;
+
+    span {
+      line-height: 20px;
+      font-size: 15px;
+      font-weight: 500;
+
+      &:nth-of-type(1) {
+        color: #333;
+      }
 
+      &:nth-of-type(2) {
+        color: #EE0A23;
+      }
+    }
+  }
+
+  .description {
+    width: 311px;
+    margin-top: 8px;
+    line-height: 17px;
+    font-size: 12px;
+    font-weight: 500;
+    color: #333;
+  }
+
+  .create-time {
+    width: 311px;
+    margin-top: 8px;
+    line-height: 17px;
+    font-size: 12px;
+    color: #999;
+  }
+
+  .bitmap {
+    p {
+      line-height: 22px;
+      font-size: 16px;
+      font-weight: 500;
+      text-align: center;
+      color: #333;
+    }
+  }
 </style>