贷款-我的合伙人

htmldev/loan/src/main.js

@@ -1,6 +1,7 @@
 import Vue from 'vue'
 import App from './App.vue'
 import router from './router'
+import store from './store'
 import { toThousands } from './filter/toThousands'
 import refreshTitle from './utils/refreshTitle'
 
@@ -21,5 +22,6 @@ Vue.directive('myBlur', {
 })
 new Vue({
   router,
+  store,
   render: h => h(App)
 }).$mount('#app')

htmldev/loan/src/store/index.js

@@ -0,0 +1,11 @@
+import Vue from 'vue'
+import Vuex from 'vuex'
+import business from './modules/business'
+
+Vue.use(Vuex)
+
+export default new Vuex.Store({
+  modules: {
+    business
+  }
+})

htmldev/loan/src/store/modules/business.js

@@ -0,0 +1,29 @@
+const state = {
+  search: ''
+}
+
+const getters = {
+  searchValue (state) {
+    return state.search
+  }
+}
+
+const actions = {
+  setSearchValue ({ commit }, value) {
+    commit('UPDATE_SEARCH_VALUE', value)
+  }
+}
+
+const mutations = {
+  UPDATE_SEARCH_VALUE (state, value) {
+    state.search = value
+  }
+}
+
+export default {
+  namespaced: true,
+  state,
+  getters,
+  actions,
+  mutations
+}

htmldev/loan/src/views/partner/all/api/index.js

@@ -0,0 +1,19 @@
+import request from '@/api/request'
+
+/**
+ * 获取我合伙人
+ * @param page
+ * @param pageNum
+ * @param value 搜索值，默认空字符串
+ * @param type 获取那个列表的值，默认全部 0-全部 1-已签约 2-未签约
+ */
+export const getPartnerList = (page = 1, pageNum = 20, value = '', type = 0) => request({
+  method: 'POST',
+  url: '/home/applyOrder/orderList',
+  data: {
+    page,
+    pageNum,
+    value,
+    type
+  }
+})

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

@@ -1,32 +1,26 @@
 <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>
+      <li class="list" v-for="(item, index) in listData" :key="index" @click="$emit('funSelect', item.orderId)">
+        <div class="top-wrap">
+          <div class="info-wrap">
+            <div class="avatar">
+              <img src="" alt="">
             </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 class="name">
+              <span>张小效</span>
+              <span>2022-09-23到期</span>
             </p>
           </div>
+          <a class="contact-wrap" href="javascript:;">
+            <span>159****9087</span>
+            <img src="../image/btn_phone@2x.png" alt="">
+          </a>
         </div>
+        <a class="bottom-wrap border-top-1px" href="javascript:;">
+          <span>他(她)的业绩</span>
+          <img src="../image/btn_next@2x.png" alt="">
+        </a>
       </li>
       <li class="bitmap" v-if="!listData.length && booFetchData">
         <p>暂无记录</p>
@@ -39,6 +33,7 @@
   import BScroll from 'better-scroll'
   import { Toast } from 'vant'
   import axios from 'axios'
+  import { mapGetters } from 'vuex'
 
   const PAGESIZE = 20
   const eapiDomain = process.env.API_DOMAIN
@@ -74,13 +69,18 @@
         booFetchData: false
       }
     },
+    computed: {
+      ...mapGetters({
+        search: 'business/searchValue'
+      })
+    },
     activated () {
       if (!this.$route.meta.isUseCache) {
         this.pager = {
           pagenum: 1,
           pagesize: PAGESIZE
         }
-        this.listData = []
+        this.listData = [1, 2, 3, 4]
         this.numFetchStatus = 0
         this.booFetchData = false
         this.funFetch()
@@ -93,6 +93,23 @@
         })
       }
     },
+    watch: {
+      search: {
+        handler: function (val) {
+          const timer = setTimeout(() => {
+            clearTimeout(timer)
+            this.pager = {
+              pagenum: 1,
+              pagesize: PAGESIZE
+            }
+            this.listData = []
+            this.numFetchStatus = 0
+            this.booFetchData = false
+            this.funFetch()
+          }, 200)
+        }
+      }
+    },
     beforeDestroy () {
       if (this.scroll) {
         this.scroll.destroy()
@@ -179,7 +196,7 @@
         })
       },
       funGetGoodsDetail (goods) {
-        return goods.map(item => item.bigCateName + 'x' + item.productNum).join('；')
+        return ''
       },
       funJumpDetail (item) {
         if (item.isOfflineOpen === '是') {
@@ -213,126 +230,95 @@
     display: flex;
     flex-direction: column;
     align-items: center;
-    width: 694px;
-    border-radius: 6px;
-    margin-bottom: 19px;
-    background: #fff;
+    width: 343px;
+    margin-bottom: 16px;
+    background: #FFF;
+    border-radius: 8px;
 
     &: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;
-    }
+  .top-wrap {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    width: 313px;
+    padding: 16px 0 17px;
+  }
 
-    .icon-wrap {
-      display: flex;
-      justify-content: center;
-      width: 46px;
-      height: 46px;
-      margin-right: 26px;
+  .info-wrap {
+    display: flex;
+    align-items: center;
+  }
 
-      img {
-        width: 100%;
-        height: 100%;
-        margin-top: 42px;
-      }
+  .avatar {
+    width: 48px;
+    height: 48px;
+    border-radius: 50%;
+    overflow: hidden;
+    background: pink;
 
-      i {
-        width: 37px;
-        height: 37px;
-        margin-top: 46px;
-        border: 2px solid #CCCCCC;
-        border-radius: 50%;
-        background: #FFFFFF;
-      }
+    img {
+      display: block;
+      width: 100%;
     }
+  }
 
-    .w-575 {
-      width: 575px;
-    }
+  .name {
+    display: flex;
+    flex-direction: column;
+    margin-left: 12px;
 
-    .w-640 {
-      width: 640px;
+    span:nth-of-type(1) {
+      line-height: 22px;
+      font-size: 16px;
+      font-weight: 500;
+      color: #333;
     }
 
-    .goods-info {
-      display: flex;
-      align-items: center;
-      width: 100%;
+    span:nth-of-type(2) {
+      margin-top: 8px;
+      line-height: 17px;
+      font-size: 12px;
+      color: #666;
     }
+  }
 
-    .left-wrap {
-      width: 127px;
-      height: 127px;
-      overflow: hidden;
+  .contact-wrap {
+    display: flex;
+    align-items: center;
 
-      img {
-        display: block;
-        width: 100%;
-      }
+    span {
+      line-height: 17px;
+      font-size: 12px;
+      color: #999;
     }
 
-    .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;
-        }
-      }
+    img {
+      width: 24px;
+      height: 24px;
+      margin-left: 9px;
     }
+  }
 
-    .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;
-    }
+  .bottom-wrap {
+    display: flex;
+    justify-content: space-between;
+    width: 313px;
+    padding: 10px 0;
+    @include border-top-1px(#E8E8E8);
 
-    .jump-detail {
-      display: flex;
-      justify-content: flex-end;
-      width: 100%;
-      padding: 18px 0 22px;
-      border-top: 1px dashed #DFDFDF;
+    span {
+      line-height: 17px;
+      font-size: 12px;
+      color: #333;
+    }
 
-      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;
-      }
+    img {
+      width: 22px;
+      height: 22px;
     }
   }
 

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

@@ -2,7 +2,7 @@
   <div class="container">
     <div class="header">
       <van-search
-        v-model="value"
+        v-model="searChValue"
         placeholder="请输入姓名…"/>
       <TabBar :navList="navList" @funChange="funChange" ref="myNav"/>
     </div>
@@ -25,7 +25,6 @@
     },
     data () {
       return {
-        value: '',
         navList: [
           {
             id: 1,
@@ -48,10 +47,22 @@
     activated () {
       this.$refs.myNav.funInitTabIndex(this.$route.name === 'partnerAll' ? 1 : (this.$route.name === 'partnerSign' ? 2 : 3))
     },
+    computed: {
+      searChValue: {
+        get () {
+          return this.$store.getters['business/searchValue']
+        },
+        set (val) {
+          this.$store.dispatch('business/setSearchValue', val)
+        }
+      }
+    },
     methods: {
       funChange (id) {
         const path = id === 1 ? '/partner/business' : (id === 2 ? '/partner/business/sign' : '/partner/business/unsigned')
-        this.$router.replace({ path: path })
+        this.$nextTick(() => {
+          this.$router.replace({ path: path })
+        })
       }
     }
   }