合伙人-我的合伙人页

htmldev/loan/src/router/index.js

@@ -29,7 +29,7 @@ const routes = [
   {
     path: '/loan/explain/:orderProductId', // 贷款介绍
     name: 'loanExplain',
-    component: () => import(/* webpackChunkName: "loan_goods" */ '../views/loan/explain'),
+    component: () => import(/* webpackChunkName: "loan_explain" */ '../views/loan/explain'),
     props: true
   },
   {
@@ -96,7 +96,11 @@ const routes = [
       {
         path: 'mine', // 我的
         name: 'partnerMine',
-        component: () => import(/* webpackChunkName: "partner_mine" */ '../views/partner/mine')
+        component: () => import(/* webpackChunkName: "partner_mine" */ '../views/partner/mine'),
+        meta: {
+          isUseCache: false,
+          keepAlive: true
+        }
       }
     ]
   },
@@ -129,12 +133,36 @@ const routes = [
   },
   {
     path: '/partner/business', // 我的合伙人
-    name: 'partnerBusiness',
     component: () => import(/* webpackChunkName: "partner_business" */ '../views/partner/business'),
-    meta: {
-      isUseCache: false,
-      keepAlive: true
-    }
+    children: [
+      {
+        path: '', // 全部
+        name: 'partnerAll',
+        component: () => import(/* webpackChunkName: "partner_all" */ '../views/partner/all'),
+        meta: {
+          isUseCache: false,
+          keepAlive: true
+        }
+      },
+      {
+        path: 'sign', // 已签约
+        name: 'partnerSign',
+        component: () => import(/* webpackChunkName: "partner_sign" */ '../views/partner/sign'),
+        meta: {
+          isUseCache: false,
+          keepAlive: true
+        }
+      },
+      {
+        path: 'unsigned', // 未签约
+        name: 'partnerUnsigned',
+        component: () => import(/* webpackChunkName: "partner_unsigned" */ '../views/partner/unsigned'),
+        meta: {
+          isUseCache: false,
+          keepAlive: true
+        }
+      }
+    ]
   },
   {
     path: '/partner/login', // 登录

htmldev/loan/src/views/partner/all/components/main.vue

@@ -0,0 +1,349 @@
+<template>
+  <div class="better-scroll wrapper" ref="wrapper">
+    <ul>
+      <li class="list" v-for="(item, index) in listData" :key="index"
+          @click="$emit('funSelect', item.orderId)">
+        <p class="add-time">下单时间：{{ item.orderCreatedTime }}</p>
+        <div class="select-wrap">
+          <div class="icon-wrap" v-if="$route.name === 'all'">
+            <img src="" alt="" v-show="selectedData.indexOf(item.orderId) > -1">
+            <i v-show="selectedData.indexOf(item.orderId) < 0"></i>
+          </div>
+          <div :class="$route.name === 'all' ? 'w-575' : 'w-640'">
+            <div class="goods-info">
+              <div class="left-wrap">
+                <img :src="item.productImg.imgUrl" alt="">
+              </div>
+              <div class="right-wrap">
+                <p>订单编号：{{ item.orderId }}</p>
+                <p>订单金额：¥{{ item.orderAmount }}</p>
+                <p>开票金额：¥{{ item.ableAmount }}</p>
+              </div>
+            </div>
+            <p class="good-list">包含商品：{{ funGetGoodsDetail(item.productInfo) }}</p>
+            <!--已开票订单列表，才展示这个按钮-->
+            <p class="jump-detail" v-if="$route.name === 'complete'" @click="funJumpDetail(item)">
+              <a href="javascript:;">查看发票</a>
+            </p>
+          </div>
+        </div>
+      </li>
+      <li class="bitmap" v-if="!listData.length && booFetchData">
+        <p>暂无记录</p>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+  import BScroll from 'better-scroll'
+  import { Toast } from 'vant'
+  import axios from 'axios'
+
+  const PAGESIZE = 20
+  const eapiDomain = process.env.API_DOMAIN
+  export default {
+    name: 'mains',
+    props: {
+      numPositionY: {
+        type: Number,
+        default: 0
+      },
+      selectedData: {
+        type: Array,
+        default: function () {
+          return []
+        }
+      },
+      // 发票唯一编码
+      invoiceNo: {
+        type: String,
+        default: ''
+      }
+    },
+    data () {
+      return {
+        pager: {
+          pagenum: 1,
+          pagesize: PAGESIZE
+        },
+        listData: [],
+        scroll: null,
+        numFetchStatus: 0,
+        arrFetchStatus: ['正在加载，请稍后～', '到底了'],
+        booFetchData: false
+      }
+    },
+    activated () {
+      if (!this.$route.meta.isUseCache) {
+        this.pager = {
+          pagenum: 1,
+          pagesize: PAGESIZE
+        }
+        this.listData = []
+        this.numFetchStatus = 0
+        this.booFetchData = false
+        this.funFetch()
+      } else {
+        this.$nextTick(() => {
+          if (this.scroll) {
+            this.scroll.refresh()
+            this.scroll.scrollTo(0, this.numPositionY)
+          }
+        })
+      }
+    },
+    beforeDestroy () {
+      if (this.scroll) {
+        this.scroll.destroy()
+      }
+    },
+    methods: {
+      funFetch () {
+        const vm = this
+        const { CellPhoneParam } = vm.$root
+        let api = ''
+        let postData = {}
+        switch (vm.$route.name) {
+          case 'all':
+            api = '/web/ApiInvoice/getInvoiceOrderList'
+            postData = {
+              LoginCellphone: CellPhoneParam
+            }
+            break
+          case 'complete':
+            api = '/web/ApiInvoice/getHadInvoiceOrderList'
+            postData = {
+              LoginCellphone: CellPhoneParam
+            }
+            break
+          case 'order':
+            api = '/web/ApiInvoice/getInvoiceOrderByInvoiceNo'
+            postData = {
+              invoiceNo: this.invoiceNo
+            }
+            break
+        }
+        if (!CellPhoneParam) {
+          vm.$toast('未登录')
+          return
+        }
+        axios.post(`${eapiDomain}${api}`, {
+          ...postData,
+          page: vm.pager.pagenum,
+          pageSize: vm.pager.pagesize
+        }).then(response => {
+          if (response.Status === 1) {
+            let list = []
+            switch (vm.$route.name) {
+              case 'all':
+                if (Object.keys(response.Data).indexOf('list') > -1) {
+                  list = response.Data.list
+                }
+                break
+              case 'complete':
+                list = response.Data
+                break
+              case 'order':
+                list = response.Data
+                break
+            }
+            vm.pager.pagenum++
+            vm.booFetchData = true
+            if (list && list.length) {
+              vm.listData = vm.listData.concat(list)
+              if (vm.$route.name === 'all') {
+                vm.$emit('funGetInitData', vm.listData, response.Data.amount, response.Data.orderIdList)
+              }
+              vm.$nextTick(() => {
+                if (!vm.scroll) {
+                  vm.scroll = new BScroll(vm.$refs.wrapper, {
+                    click: true,
+                    pullUpLoad: {
+                      threshold: -20
+                    },
+                    scrollbar: true
+                  })
+                  vm.scroll.on('pullingUp', () => {
+                    vm.funFetch()
+                  })
+                } else {
+                  vm.scroll.refresh()
+                  vm.scroll.finishPullUp()
+                }
+              })
+            }
+          } else {
+            Toast(response.ErrorMsg)
+          }
+        })
+      },
+      funGetGoodsDetail (goods) {
+        return goods.map(item => item.bigCateName + 'x' + item.productNum).join('；')
+      },
+      funJumpDetail (item) {
+        if (item.isOfflineOpen === '是') {
+          this.$toast('线下开票订单，如有疑问，请联系客服处理')
+          return
+        }
+        this.$router.push({ path: '/' })
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .wrapper {
+    position: relative;
+    width: 100%;
+    height: calc(100vh - 124px);
+    margin-top: 124px;
+    overflow: hidden;
+
+    ul {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      width: 100%;
+      padding: 0 0 300px;
+    }
+  }
+
+  .list {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 694px;
+    border-radius: 6px;
+    margin-bottom: 19px;
+    background: #fff;
+
+    &:nth-last-child(1) {
+      margin-bottom: 0;
+    }
+
+    .add-time {
+      width: 100%;
+      padding: 22px 28px 20px;
+      border-bottom: 1px dashed #DFDFDF;
+      line-height: 32px;
+      font-size: 22px;
+      color: #333;
+    }
+
+    .select-wrap {
+      display: flex;
+      margin-top: 28px;
+    }
+
+    .icon-wrap {
+      display: flex;
+      justify-content: center;
+      width: 46px;
+      height: 46px;
+      margin-right: 26px;
+
+      img {
+        width: 100%;
+        height: 100%;
+        margin-top: 42px;
+      }
+
+      i {
+        width: 37px;
+        height: 37px;
+        margin-top: 46px;
+        border: 2px solid #CCCCCC;
+        border-radius: 50%;
+        background: #FFFFFF;
+      }
+    }
+
+    .w-575 {
+      width: 575px;
+    }
+
+    .w-640 {
+      width: 640px;
+    }
+
+    .goods-info {
+      display: flex;
+      align-items: center;
+      width: 100%;
+    }
+
+    .left-wrap {
+      width: 127px;
+      height: 127px;
+      overflow: hidden;
+
+      img {
+        display: block;
+        width: 100%;
+      }
+    }
+
+    .right-wrap {
+      margin-left: 25px;
+
+      p {
+        line-height: 32px;
+        font-size: 22px;
+        color: #333;
+
+        &:nth-of-type(2) {
+          margin-top: 10px;
+        }
+
+        &:nth-of-type(3) {
+          margin-top: 10px;
+          color: #BA877A;
+        }
+      }
+    }
+
+    .good-list {
+      width: 100%;
+      padding: 9px 19px;
+      margin: 17px 0 28px;
+      line-height: 32px;
+      font-size: 22px;
+      word-break: break-all;
+      color: #999;
+      background: #F9F9F9;
+    }
+
+    .jump-detail {
+      display: flex;
+      justify-content: flex-end;
+      width: 100%;
+      padding: 18px 0 22px;
+      border-top: 1px dashed #DFDFDF;
+
+      a {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 134px;
+        height: 49px;
+        background: #FFFFFF;
+        border-radius: 2px;
+        border: 1px solid #001947;
+        font-size: 22px;
+        color: #001947;
+      }
+    }
+  }
+
+  .bitmap {
+    padding-top: 200px;
+
+    p {
+      line-height: 38px;
+      font-size: 28px;
+      font-weight: 500;
+      color: #999;
+    }
+  }
+</style>

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

@@ -0,0 +1,37 @@
+<template>
+  <Main :numPositionY="numPositionY"
+        ref="myOrder"></Main>
+</template>
+
+<script>
+  import Main from './components/main'
+
+  export default {
+    name: 'all',
+    components: {
+      Main
+    },
+    data () {
+      return {
+        numPositionY: 0
+      }
+    },
+    activated () {
+      if (!this.$route.meta.isUseCache) {
+        this.numPositionY = 0
+      }
+      this.$route.meta.isUseCache = false
+    },
+    beforeRouteLeave (to, from, next) {
+      if (['partnerSign', 'partnerUnsigned'].includes(to.name)) {
+        from.meta.isUseCache = true
+      }
+      this.numPositionY = this.$refs.myOrder.scroll ? this.$refs.myOrder.scroll.y : 0
+      next()
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+
+</style>

htmldev/loan/src/views/partner/business/components/tabBar.vue

@@ -0,0 +1,157 @@
+<template>
+  <div class="navigator-container" ref="navigato">
+    <ul class="tab-list" ref="tabList">
+      <li v-for="(item, index) in navList" class="tab-item" @click="selectNav(item)" :key="index">
+        <p :class="{'link-active': item.id === currentTabIndex}">
+          <span class="label">{{ item.name }}</span>
+          <span class="value">{{ item.value }}</span>
+        </p>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+  import BScroll from 'better-scroll'
+
+  export default {
+    props: {
+      // 渲染的列表数据
+      navList: {
+        type: Array,
+        default: function () {
+          return []
+        }
+      }
+    },
+    data () {
+      return {
+        currentTabIndex: 1, // 当前默认tab
+        scroll: null
+      }
+    },
+    mounted () {
+      this.funInitBScroll()
+      this._initTabListWidth()
+      const timer = setTimeout(() => {
+        clearTimeout(timer)
+        // this._adjust(this.currentTabIndex)
+      }, 500)
+    },
+    methods: {
+      funInitTabIndex (index) {
+        this.currentTabIndex = index
+      },
+      funInitBScroll () {
+        const options = {
+          probeType: 1,
+          click: true,
+          scrollY: false,
+          scrollX: true,
+          scrollbar: false,
+          startY: 0,
+          freeScroll: false,
+          mouseWheel: true,
+          bounce: true,
+          zoom: false
+        }
+        this.scroll = new BScroll(this.$refs.navigato, options)
+      },
+      selectNav (item) {
+        if (item === undefined) {
+          return
+        }
+        this.currentTabIndex = item.id
+        this.$emit('funChange', item.id)
+        // this._adjust(item.id)
+      },
+      _initTabListWidth () {
+        const tabList = this.$refs.tabList
+        const items = tabList.children
+        let width = 0
+        for (let i = 0; i < items.length; i++) {
+          width += items[i].clientWidth
+        }
+        tabList.style.width = (width + 1) + 'px'
+      },
+      // 导航类目超过一屏在使用
+      _adjust (tabId) {
+        const viewportWidth = this.$refs.navigato.clientWidth
+        const tabListWidth = this.$refs.tabList.clientWidth
+        const minTranslate = Math.min(0, viewportWidth - tabListWidth)
+        const middleTranslate = viewportWidth / 2
+        const items = this.$refs.tabList.children
+        let width = 0
+        this.navList.every((item, index) => {
+          if (item.id === tabId) {
+            return false
+          }
+          width += items[index].clientWidth
+          return true
+        })
+        let translate = middleTranslate - width
+        translate = Math.max(minTranslate, Math.min(0, translate))
+        this.scroll.scrollTo(translate, 0, 300)
+      }
+    }
+  }
+</script>
+<style lang='scss' scoped>
+  .navigator-container {
+    width: 100%;
+    height: 47px;
+    margin-top: 9px;
+    font-size: 0;
+    overflow: hidden;
+
+    p {
+      display: inline-block;
+    }
+
+    .tab-item {
+      display: inline-block;
+      width: 125px;
+      text-align: center;
+
+      p {
+        position: relative;
+        left: 0;
+        top: 0;
+
+        &.link-active {
+          .value {
+            font-weight: 500;
+            color: #C9A585;
+          }
+
+          &:after {
+            position: absolute;
+            left: 0;
+            bottom: 0;
+            content: '';
+            width: 100%;
+            height: 2px;
+            border-radius: 2px;
+            background: linear-gradient(90deg, #DBC3A9 0%, #C7AB8A 100%);
+          }
+        }
+      }
+
+      .label {
+        display: inline-block;
+        line-height: 47px;
+        font-size: 16px;
+        font-weight: 500;
+        color: #333;
+      }
+
+      .value {
+        display: inline-block;
+        margin-left: 4px;
+        line-height: 47px;
+        font-size: 18px;
+        color: #999;
+      }
+    }
+  }
+</style>

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

@@ -1,13 +1,108 @@
 <template>
-  <div>business</div>
+  <div class="container">
+    <div class="header">
+      <van-search
+        v-model="value"
+        placeholder="请输入姓名…"/>
+      <TabBar :navList="navList" @funChange="funChange" ref="myNav"/>
+    </div>
+    <keep-alive>
+      <router-view v-if="$route.meta.keepAlive"></router-view>
+    </keep-alive>
+    <router-view v-if="!$route.meta.keepAlive"></router-view>
+  </div>
 </template>
 
 <script>
+  import { Search } from 'vant'
+  import TabBar from './components/tabBar'
+
   export default {
-    name: 'business'
+    name: 'business',
+    components: {
+      'van-search': Search,
+      TabBar
+    },
+    data () {
+      return {
+        value: '',
+        navList: [
+          {
+            id: 1,
+            name: '全部',
+            value: '0'
+          },
+          {
+            id: 2,
+            name: '已签约',
+            value: '0'
+          },
+          {
+            id: 3,
+            name: '未签约',
+            value: '0'
+          }
+        ]
+      }
+    },
+    activated () {
+      this.$refs.myNav.funInitTabIndex(this.$route.name === 'partnerAll' ? 1 : (this.$route.name === 'partnerSign' ? 2 : 3))
+    },
+    methods: {
+      funChange (id) {
+        const path = id === 1 ? '/partner/business' : (id === 2 ? '/partner/business/sign' : '/partner/business/unsigned')
+        this.$router.replace({ path: path })
+      }
+    }
   }
 </script>
 
 <style lang="scss" scoped>
+  .header {
+    position: fixed;
+    left: 0;
+    right: 0;
+    top: 0;
+    z-index: 99;
+    width: 100%;
+    padding-top: 12px;
+    background: #fff;
+  }
+
+  ::v-deep .van-search {
+    width: 341px;
+    height: 40px;
+    border-radius: 20px;
+    margin: 0 auto;
+    background: #F7F6F9;
+
+    .van-search__content {
+      padding-left: 0;
+    }
 
+    .van-cell {
+      align-items: center;
+    }
+
+    .van-icon-search {
+      font-size: 22px;
+      color: #DDDDDD;
+    }
+
+    .van-field__control {
+      line-height: 17px;
+      font-size: 12px;
+      color: #333;
+      overflow: hidden;
+      background: transparent;
+      -webkit-text-fill-color: #333;
+      opacity: 1;
+
+      &::-webkit-input-placeholder {
+        color: #999;
+        -webkit-text-fill-color: #999;
+        opacity: 1;
+      }
+    }
+  }
 </style>

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

@@ -0,0 +1,13 @@
+<template>
+  <div>sign</div>
+</template>
+
+<script>
+  export default {
+    name: 'sign'
+  }
+</script>
+
+<style scoped>
+
+</style>

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

@@ -0,0 +1,13 @@
+<template>
+  <div>unsigned</div>
+</template>
+
+<script>
+  export default {
+    name: 'unsigned'
+  }
+</script>
+
+<style scoped>
+
+</style>