feature: 惠桂保数据查询

1. 调试数据查询接口
2. 增加分页, 筛选功能

src/api/ebiz/hgb/index.js

@@ -0,0 +1,11 @@
+import request from '@/assets/js/utils/request'
+import getUrl from '@/assets/js/utils/get-url'
+
+// 惠桂保数据查询
+export function selectHgb(data) {
+  return request({
+    url: getUrl('/sale/order/selectHgb', 1),
+    method: 'post',
+    data
+  })
+}

src/views/ebiz/hgb/index.vue

@@ -1,13 +1,13 @@
 <template>
-  <div class="hgb bg-white">
+  <div class="hgb bg-white pb60">
     <p class="title p15">惠桂保销售量</p>
     <div class="order-count">
       <div class="available-count">
-        <p class="count-num active">10000</p>
+        <p class="count-num active">{{ cvilNum }}</p>
         <p class="count-text active">生效单量</p>
       </div>
       <div class="unavailable-count">
-        <p class="count-num inactive">10000</p>
+        <p class="count-num inactive">{{ uncvilNum }}</p>
         <p class="count-text inactive">失效单量</p>
       </div>
     </div>
@@ -41,27 +41,32 @@
         </tbody>
       </table>
     </div>
+
+    <!-- 分页 -->
+    <div class="pagination bg-white" v-if="tableData.length">
+      <van-pagination v-model="currentPage" :total-items="totalItems" :items-per-page="10" />
+    </div>
+
     <!-- 弹出层 -->
-    <van-popup v-model="idSidebarShow" position="left" :style="{ width: '70vw', height: '100%' }">
+    <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 label="生效日" placeholder="请选择" readonly @click="isSearchDateShow = true" />
+      <van-field v-model="param.startDate" label="生效日" placeholder="请选择" readonly @click="isSearchDateShow = true" />
-      <van-field label="担保人" placeholder="请输入" />
+      <van-field v-model="param.prtName" maxlength="10" label="担保人" placeholder="请输入" />
 
       <div class="btn-group">
-        <van-button size="small">取消</van-button>
+        <van-button size="small" @click="idSidebarShow = false">取消</van-button>
-        <van-button size="small" type="danger">确定</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
+          <van-datetime-picker v-model="currentDate" type="date" :max-date="maxDate" @confirm="onSearchDateConfirm" @cancel="isSearchDateShow = false" />
-            v-model="currentDate"
-            type="date"
-            :min-date="minDate"
-            :max-date="maxDate"
-            @confirm="isSearchDateShow = false"
-            @cancel="isSearchDateShow = false"
-          />
         </div>
       </transition>
     </van-popup>
@@ -69,18 +74,24 @@
 </template>
 
 <script>
-import { Popup, DatetimePicker, Field } from 'vant'
+import { Popup, DatetimePicker, Field, Pagination } from 'vant'
+import { selectHgb } from '@/api/ebiz/hgb'
+import dateUtil from '@/assets/js/utils/date-utils'
+
 export default {
   name: 'HgbIndex',
   components: {
     [Popup.name]: Popup,
     [DatetimePicker.name]: DatetimePicker,
-    [Field.name]: Field
+    [Field.name]: Field,
+    [Pagination.name]: Pagination
   },
   data() {
     return {
-      minDate: new Date(2020, 0, 1),
+      totalItems: 0,
-      maxDate: new Date(2025, 10, 1),
+      cvilNum: 0,
+      uncvilNum: 0,
+      maxDate: new Date(),
       currentDate: new Date(),
       idSidebarShow: false,
       isSearchDateShow: false,
@@ -88,10 +99,47 @@ export default {
       form: {
         availableDate: '',
         applicant: ''
+      },
+      currentPage: 1,
+      param: {
+        prtName: '',
+        startDate: '',
+        pageInfo: {
+          pageNum: 1,
+          pageSize: 10
+        }
       }
     }
   },
+  created() {
+    this.getData()
+  },
   methods: {
+    queryData() {
+      if (!this.param.startDate) {
+        return this.$toast('请选择生效日')
+      }
+      if (!this.param.prtName.trim()) {
+        return this.$toast('请输入担保人')
+      }
+      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
+    },
+    async getData(param) {
+      const res = await selectHgb(param ? param : this.param)
+      if (res.result === '0') {
+        this.cvilNum = res.content.cvilNum
+        this.uncvilNum = res.content.uncvilNum
+        this.totalItems = res.content.list.total
+      } else {
+        this.$toast(res.resultMessage)
+      }
+    },
     toDetail(data) {
       console.log(data)
       this.$jump({
@@ -101,6 +149,10 @@ export default {
         },
         routerInfo: { path: `/hgb/orderDetail` }
       })
+    },
+    onSideBarClosed() {
+      this.param.startDate = ''
+      this.param.prtName = ''
     }
   }
 }
@@ -181,5 +233,21 @@ export default {
       }
     }
   }
+
+  .pagination {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+  }
+}
+
+::v-deep .van-pagination__item {
+  color: #ff0033;
+}
+
+::v-deep .van-pagination__item--active {
+  background-color: #ff0033;
+  color: #fff;
 }
 </style>