Merge branch 'feature/GFRS-222【0423】续期管理-续期列表' into dev

src/views/ebiz/renewalManage/List.vue

@@ -9,7 +9,14 @@
             </template>
           </van-search>
         </div>
-        <FieldDatePicter @confirm="onDateConfirm" label="应交日" name="应交日" :value.sync="payDate" type="year-month" :flag="true"></FieldDatePicter>
+        <van-cell-group @click="selectTime = true">
+          <van-cell :value="payDate" is-link>
+            <template #title>
+              <span class="custom-title">应交日</span>
+              <span style="font-size: 10px; color: #6b6b6b;">(查询范围：当前月份前溯3月~后推1月)</span>
+            </template>
+          </van-cell>
+        </van-cell-group>
         <van-tabs v-model="active" sticky @change="tabChange" class="changeTab">
           <van-tab title="应收未收" :name="0"></van-tab>
           <van-tab title="已交费" :name="1"></van-tab>
@@ -93,10 +100,20 @@
         <div class="mt20">暂无数据</div>
       </div>
     </div>
+    <van-popup v-model="selectTime" position="bottom">
+      <van-datetime-picker
+        v-model="currentDate"
+        type="year-month"
+        title="选择年月日"
+        :formatter="formatter"
+        @cancel="selectTime = false"
+        @confirm="onDateConfirm"
+      />
+    </van-popup>
   </div>
 </template>
 <script>
-import { Sticky, Tabs, Tab, Col, Row, Search, Field, List, Icon } from 'vant'
+import { Sticky, Tabs, Tab, Col, Row, Search, Field, List, Icon, Cell, CellGroup, DatetimePicker, Popup } from 'vant'
 import FieldDatePicter from '@/components/ebiz/FieldDatePicter'
 import { getList, getInvalidOrderList } from '@/api/ebiz/renewalManage/renewalManage'
 import formatDate from '@/assets/js/utils/date-utils'
@@ -113,10 +130,16 @@ export default {
     [Sticky.name]: Sticky,
     [FieldDatePicter.name]: FieldDatePicter,
     [List.name]: List,
-    [Icon.name]: Icon
+    [Icon.name]: Icon,
+    [Cell.name]: Cell,
+    [CellGroup.name]: CellGroup,
+    [DatetimePicker.name]: DatetimePicker,
+    [Popup.name]: Popup
   },
   data() {
     return {
+      selectTime: false,
+      currentDate: new Date(),
       loading: false,
       invalidLoading: false,
       finishedText: '',
@@ -140,6 +163,14 @@ export default {
   },
 
   methods: {
+    formatter(type, val) {
+      if (type === 'year') {
+        return `${val}年`
+      } else if (type === 'month') {
+        return `${val}月`
+      }
+      return val
+    },
     // 获取续期保单列表
     async getpolicyList() {
       let param = {
@@ -201,10 +232,6 @@ export default {
     },
     // 搜索
     search() {
-      if (!this.searchVal.trim()) {
-        this.$toast('请输入保单号/投保人')
-        return
-      }
       if (this.active === 3) {
         this.getInvalidList({ status: '2' })
       } else {
@@ -213,7 +240,8 @@ export default {
     },
     // 选定日期
     onDateConfirm(val) {
-      this.payDate = val
+      this.payDate = formatDate.formatDate(val, 'yyyy-MM')
+      this.selectTime = false
       this.getpolicyList()
     },
     // 去保单详情页
@@ -264,6 +292,15 @@ export default {
 }
 </script>
 <style lang="scss" scoped>
+/deep/ .van-cell__title {
+  flex: 5;
+}
+
+.timePicker {
+  position: sticky;
+  bottom: 0;
+}
+
 .grayText {
   color: #999999;
 }