From 290651af10c817fc3e474ea20db6f23d155fafc1 Mon Sep 17 00:00:00 2001
From: mengxiaolong <meng.xiaolong@ebiz-digits.com>
Date: Thu, 26 Nov 2020 11:08:24 +0800
Subject: [PATCH] =?UTF-8?q?feature:=20=E6=83=A0=E6=A1=82=E4=BF=9D=E6=95=B0?=
 =?UTF-8?q?=E6=8D=AE=E6=9F=A5=E8=AF=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

1. 增加刷新功能
---
 src/views/ebiz/hgb/index.vue | 156 ++++++++++++++++++-----------------
 1 file changed, 82 insertions(+), 74 deletions(-)

diff --git a/src/views/ebiz/hgb/index.vue b/src/views/ebiz/hgb/index.vue
index 2f62a21dd..7aedbb06b 100644
--- a/src/views/ebiz/hgb/index.vue
+++ b/src/views/ebiz/hgb/index.vue
@@ -1,80 +1,82 @@
 <template>
-  <div class="hgb bg-white pb60">
-    <p class="title p15">惠桂保销售量</p>
-    <div class="order-count">
-      <div class="available-count">
-        <p class="count-num active">{{ cvilNum }}</p>
-        <p class="count-text active">生效单量</p>
-      </div>
-      <div class="unavailable-count">
-        <p class="count-num inactive">{{ uncvilNum }}</p>
-        <p class="count-text inactive">失效单量</p>
-      </div>
-    </div>
-    <p class="title p15 search">
-      <span>惠桂保客户明细</span>
-      <van-icon name="search" @click="idSidebarShow = true" />
-    </p>
-    <div class="table-container">
-      <table class="table">
-        <thead>
-          <tr>
-            <th>序号</th>
-            <th>生效日</th>
-            <th>投保人</th>
-            <th>分单号</th>
-            <th>到期日</th>
-          </tr>
-        </thead>
-        <tbody>
-          <template v-if="tableData.length">
-            <tr v-for="(data, i) in tableData" :key="i" @click="toDetail(data)">
-              <td>{{ i + 1 }}</td>
-              <td v-for="(key, j) in keys" :key="j">
-                {{ data[key] }}
-              </td>
-            </tr>
-          </template>
-          <tr v-else>
-            <td colspan="5">暂无数据</td>
-          </tr>
-        </tbody>
-      </table>
-    </div>
-
-    <!-- 分页 -->
-    <div class="pagination bg-white" v-if="tableData.length">
-      <van-pagination v-model="currentPage" :total-items="totalItems" :items-per-page="10" @change="onPageChanged" />
-    </div>
-
-    <!-- 弹出层 -->
-    <van-popup
-      @click.native.self="isSearchDateShow = false"
-      v-model="idSidebarShow"
-      position="left"
-      :style="{ width: '70vw', height: '100%' }"
-      @close="onSideBarClosed"
-    >
-      <p class="p15 fw600">查找</p>
-      <van-field v-model="param.startDate" label="生效日" placeholder="请选择" readonly @click="isSearchDateShow = true" />
-      <van-field v-model="param.prtName" maxlength="10" label="担保人" placeholder="请输入" />
-
-      <div class="btn-group">
-        <van-button size="small" @click="idSidebarShow = false">取消</van-button>
-        <van-button size="small" type="danger" @click="queryData">确定</van-button>
-      </div>
-
-      <transition name="van-slide-up">
-        <div class="search-date" v-show="isSearchDateShow">
-          <van-datetime-picker v-model="currentDate" type="date" :max-date="maxDate" @confirm="onSearchDateConfirm" @cancel="isSearchDateShow = false" />
+  <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
+    <div class="hgb bg-white pb60">
+      <p class="title p15">惠桂保销售量</p>
+      <div class="order-count">
+        <div class="available-count">
+          <p class="count-num active">{{ cvilNum }}</p>
+          <p class="count-text active">生效单量</p>
         </div>
-      </transition>
-    </van-popup>
-  </div>
+        <div class="unavailable-count">
+          <p class="count-num inactive">{{ uncvilNum }}</p>
+          <p class="count-text inactive">失效单量</p>
+        </div>
+      </div>
+      <p class="title p15 search">
+        <span>惠桂保客户明细</span>
+        <van-icon name="search" @click="idSidebarShow = true" />
+      </p>
+      <div class="table-container">
+        <table class="table">
+          <thead>
+            <tr>
+              <th>序号</th>
+              <th>生效日</th>
+              <th>投保人</th>
+              <th>分单号</th>
+              <th>到期日</th>
+            </tr>
+          </thead>
+          <tbody>
+            <template v-if="tableData.length">
+              <tr v-for="(data, i) in tableData" :key="i" @click="toDetail(data)">
+                <td>{{ i + 1 }}</td>
+                <td v-for="(key, j) in keys" :key="j">
+                  {{ data[key] }}
+                </td>
+              </tr>
+            </template>
+            <tr v-else>
+              <td colspan="5">暂无数据</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+
+      <!-- 分页 -->
+      <div class="pagination bg-white" v-if="tableData.length">
+        <van-pagination v-model="currentPage" :total-items="totalItems" :items-per-page="10" @change="onPageChanged" />
+      </div>
+
+      <!-- 弹出层 -->
+      <van-popup
+        @click.native.self="isSearchDateShow = false"
+        v-model="idSidebarShow"
+        position="left"
+        :style="{ width: '70vw', height: '100%' }"
+        @close="onSideBarClosed"
+      >
+        <p class="p15 fw600">查找</p>
+        <van-field v-model="param.startDate" label="生效日" placeholder="请选择" readonly @click="isSearchDateShow = true" />
+        <van-field v-model="param.prtName" maxlength="10" label="担保人" placeholder="请输入" />
+
+        <div class="btn-group">
+          <van-button size="small" @click="idSidebarShow = false">取消</van-button>
+          <van-button size="small" type="danger" @click="queryData">确定</van-button>
+        </div>
+
+        <transition name="van-slide-up">
+          <div class="search-date" v-show="isSearchDateShow">
+            <van-datetime-picker v-model="currentDate" type="date" :max-date="maxDate" @confirm="onSearchDateConfirm" @cancel="isSearchDateShow = false" />
+          </div>
+        </transition>
+      </van-popup>
+    </div>
+  </van-pull-refresh>
 </template>
 
 <script>
-import { Popup, DatetimePicker, Field, Pagination } from 'vant'
+import { Popup, DatetimePicker, Field, Pagination, PullRefresh } from 'vant'
 import { selectHgb } from '@/api/ebiz/hgb'
 import dateUtil from '@/assets/js/utils/date-utils'
 
@@ -84,10 +86,12 @@ export default {
     [Popup.name]: Popup,
     [DatetimePicker.name]: DatetimePicker,
     [Field.name]: Field,
-    [Pagination.name]: Pagination
+    [Pagination.name]: Pagination,
+    [PullRefresh.name]: PullRefresh
   },
   data() {
     return {
+      isLoading: false,
       totalItems: 0,
       cvilNum: 0,
       uncvilNum: 0,
@@ -116,6 +120,9 @@ export default {
     this.getData()
   },
   methods: {
+    onRefresh() {
+      location.reload()
+    },
     onPageChanged(page) {
       this.currentPage = page
       this.param.pageInfo.pageNum = page
@@ -128,11 +135,12 @@ export default {
       if (!this.param.prtName.trim()) {
         return this.$toast('请输入担保人')
       }
+      this.currentPage = 1
+      this.param.pageInfo.pageNum = 1
       this.getData({ ...this.param })
       this.idSidebarShow = false
     },
     onSearchDateConfirm(date) {
-      console.log(dateUtil.formatDate(date, 'yyyy-MM-dd'))
       this.param.startDate = dateUtil.formatDate(date, 'yyyy-MM-dd')
       this.isSearchDateShow = false
     },