续期管理优化

src/api/ebiz/renewalManage/renewalManage.js

@@ -36,3 +36,12 @@ export function sendMsg(data) {
     data
   })
 }
+
+// 获取失效/终止保单列表
+export function getInvalidOrderList(data) {
+  return request({
+    url: getUrl('/sale/policy/policyListAgent', 1),
+    method: 'post',
+    data
+  })
+}

src/views/ebiz/renewalManage/List.vue

@@ -25,7 +25,7 @@
           <van-tab title="失效/终止" :name="3"></van-tab>
         </van-tabs>
       </van-sticky>
-      <van-list :immediate-check="false" v-model="loading" :finished="finished" finished-text="">
+      <van-list v-if="active !== 3" :immediate-check="false" v-model="loading" :finished="finished" :finished-text="finishedText">
         <div v-for="item in list" :key="item.contNo" class="dataList">
           <div style="font-size: 16px;" class="flex justify-content-s dataLine">
             <div>
@@ -63,8 +63,37 @@
           </p>
         </div>
       </van-list>
-
-      <div v-if="list && list.length === 0" class="list  text-center">
+      <div v-if="list.length === 0 && active !== 3" class="list text-center">
+        <img :src="src" />
+        <div class="mt20">暂无数据</div>
+      </div>
+      <van-list v-if="active === 3" :immediate-check="false" v-model="invalidLoading" :finished="invalidFinished" :finished-text="invalidFinishedText">
+        <div style="padding: 1em; border-bottom: 1px solid #e5e5e5;" class="invalidOrder" v-for="item in invalidList" :key="item.id">
+          <p class="invalidLine">{{ item.riskName }}</p>
+          <p class="invalidLine fs14" style="color: #999;">
+            <span>保单号:</span><span class="ml10">{{ item.policyNo }}</span>
+          </p>
+          <p class="invalidLine fs14">
+            <span>投保人:</span><span class="ml10">{{ item.appntName }}</span>
+          </p>
+          <p class="invalidLine fs14">
+            <span>被保人:</span><span class="ml10">{{ item.insuredName }}</span>
+          </p>
+          <p class="invalidLine fs14">
+            <span>保额(元):</span><span class="ml10">{{ item.amount }}</span>
+          </p>
+          <p class="invalidLine fs14">
+            <span>保单生效日期:</span><span class="ml10">{{ item.cvaliDate }}</span>
+          </p>
+          <p class="invalidLine fs14"><span>保单状态:</span><span class="ml10">终止</span></p>
+          <p class="detail">
+            <span class="detail-text">详情</span>
+            <van-icon name="arrow" />
+            <van-icon style="margin-left: -0.5em;" name="arrow" />
+          </p>
+        </div>
+      </van-list>
+      <div v-if="invalidList.length === 0 && active === 3" class="list text-center">
         <img :src="src" />
         <div class="mt20">暂无数据</div>
       </div>
@@ -74,7 +103,7 @@
 <script>
 import { Sticky, Tabs, Tab, Col, Row, Search, Field, List, Icon } from 'vant'
 import FieldDatePicter from '@/components/ebiz/FieldDatePicter'
-import { getList } from '@/api/ebiz/renewalManage/renewalManage'
+import { getList, getInvalidOrderList } from '@/api/ebiz/renewalManage/renewalManage'
 import formatDate from '@/assets/js/utils/date-utils'
 
 export default {
@@ -94,16 +123,20 @@ export default {
   data() {
     return {
       loading: false,
+      invalidLoading: false,
+      finishedText: '',
       finished: true,
+      invalidFinished: true,
+      invalidFinishedText: '',
       // 扣款日期
       payDate: formatDate.formatDate(new Date(), 'yyyy-MM'),
       // 搜索内容
       searchVal: '',
       list: [],
+      invalidList: [],
       active: 0,
       isShow: false,
       maxDate: new Date(),
-      errMessage: '',
       src: this.$assetsUrl + 'images/background.png'
     }
   },
@@ -122,23 +155,61 @@ export default {
         payFlag: this.active
       }
       this.$toast.loading({
+        duration: 0,
         message: '加载中...',
         forbidClick: true,
         loadingType: 'spinner'
       })
+      this.list.splice(0)
+      this.finishedText = ''
       let result = await getList(param)
+      this.finishedText = '没有更多了...'
       if (result.result === '0') {
         if (result.content) {
-          this.list.splice(0)
           this.list = result.content.list ? result.content.list : []
         }
+        this.$toast.clear()
+      } else {
+        this.$toast.clear()
+        this.$toast(result.resultMessage)
+      }
+    },
+    async getInvalidList(data) {
+      this.invalidList.splice(0)
+      this.$toast.loading({
+        duration: 0,
+        message: '加载中...',
+        forbidClick: true,
+        loadingType: 'spinner'
+      })
+      this.invalidFinishedText = ''
+      let result = await getInvalidOrderList(data)
+      this.invalidFinishedText = '没有更多了...'
+      this.$toast.clear()
+      if (result.result === '0') {
+        if (result.policyListDTOList) {
+          for (let item of result.policyListDTOList) {
+            if (item.orderStatus === '1') {
+              this.invalidList.push(item)
+            }
+          }
+        }
       } else {
         this.$toast(result.resultMessage)
       }
+      console.dir(result)
     },
     // 搜索
     search() {
+      if (!this.searchVal.trim()) {
+        this.$toast('请输入保单号/投保人')
+        return
+      }
+      if (this.active === 3) {
+        this.getInvalidList({ status: '2' })
+      } else {
         this.getpolicyList()
+      }
     },
     // 选定日期
     onDateConfirm(val) {
@@ -160,8 +231,12 @@ export default {
     // 切换扣款状态tab
     tabChange(name) {
       this.searchVal = ''
+      if (name !== 3) {
         this.active = name
         this.getpolicyList()
+      } else {
+        this.getInvalidList({ status: '2' })
+      }
     }
   },
   filters: {
@@ -177,6 +252,10 @@ export default {
 }
 </script>
 <style lang="scss" scoped>
+.invalidLine {
+  margin-bottom: 0.5em;
+}
+
 .detail {
   display: flex;
   align-items: center;