ebiz-h5/src/views/ebiz/healthInsuranceRenewal/list.vue

<template>
  <div class="sale-list-container pb50">
<!--    <van-search placeholder="请选择客户经理姓名" v-model="searchName" show-action @change="searchList" @keyup.enter="searchList">-->
<!--      <template #action>-->
<!--        <div style="display: flex;">-->
<!--          <div @click="searchList" style="padding: 0px 10px;border: 1px solid #eee;border-radius: 5px;">搜索</div>-->
<!--          <div style="padding: 0px 10px;border: 1px solid #eee;border-radius: 5px;margin-left: 15px;" @click="openshowDataPicker">日期</div>-->
<!--        </div>-->
<!--      </template>-->
<!--    </van-search>-->
    <div style="display: flex;line-height: 36px;background:#fff;padding: 10px;">
      <div style="padding: 0px 10px;border: 1px solid #eee;border-radius: 5px;margin-left: 15px;" @click="openshowDataPicker">日期</div>
    </div>
    <van-sticky>
      <van-tabs :line-width="45" v-model="active" @change="tabChange" sticky>
        <van-tab name="0" title="未续保"></van-tab>
        <van-tab name="1" title="已续保"></van-tab>
      </van-tabs>
    </van-sticky>

    <van-list
      v-model="loading"
      :immediate-check="false"
      :finished="finished"
      :finished-text="finishedText"
      error-text="请求失败，点击重新加载"
      :error.sync="error"
      @load="getOrderList"
      class="pb45">
      <div v-if="listData.length > 0">
        <div v-for="(item, index) in listData" :key="index">
          <div style="background: #fff;margin: 15px;border-radius: 5px;padding: 15px;">
            <div style="line-height: 35px;"><span style="width: 40%;display: inline-block;">客户名称</span><span style="width: 60%;display: inline-block;">{{item.name}}</span></div>
            <div style="line-height: 35px;"><span style="width: 40%;display: inline-block;">保单号</span><span style="width: 60%;display: inline-block;">{{item.contNo}}</span></div>
            <div style="line-height: 35px;"><span style="width: 40%;display: inline-block;">保单终止时间</span><span style="width: 60%;display: inline-block;">{{item.endDate}}</span></div>
            <div style="line-height: 35px;" v-if="item.continueFlag == '0'"><span style="width: 40%;display: inline-block;">是否续保</span><span style="width: 60%;display: inline-block;color: #d9001b;">未续保</span></div>
            <div style="line-height: 35px;" v-if="item.continueFlag == '1'"><span style="width: 40%;display: inline-block;">是否续保</span><span style="width: 60%;display: inline-block;">已续保</span></div>
            <div style="line-height: 35px;"><span style="width: 40%;display: inline-block;">服务经理</span><span style="width: 60%;display: inline-block;">{{item.agentManager}}</span></div>
            <div style="line-height: 35px;display: flex;justify-content: flex-end;"><van-button round @click="goDetail(item)" size="small" style="height: 26px;line-height: 26px;" class="mr5" type="danger" v-no-more-click="1000">详情</van-button></div>
          </div>
        </div>
      </div>

      <div v-else class="text-center">
        <img class="mt40" src="@/assets/images/pic_page-non.png" />
        <div class="fs17 mt40">暂无数据</div>
      </div>
    </van-list>
    <van-popup v-model="showDataPicker" position="bottom">
      <van-datetime-picker type="year-month" v-model="currentDate" title="选择日期" @confirm="onConfirmDate" @cancel="showDataPicker = false" :min-date="minDate" :max-date="maxDate"/>
    </van-popup>  </div>
</template>

<script>
import { Search, Tabs, Tab, List, Tag, Sticky, Field, Icon } from 'vant'
import { healthgetRenewalList } from '@/api/ebiz/healthInsuranceRenewal/healthInsuranceRenewal'
import { getAgentInfo } from '@/api/ebiz/my/my.js'
export default {
  name: 'saleList',
  components: {
    [Field.name]: Field,
    [Search.name]: Search,
    [Tabs.name]: Tabs,
    [Tab.name]: Tab,
    [List.name]: List,
    [Tag.name]: Tag,
    [Sticky.name]: Sticky,
    [Icon.name]: Icon,
  },
  data() {
    return {
      searchName: '',
      active: '0',
      listData: [],
      loading: false,
      finished: false,
      total: '',
      currentPage: 1,
      error: false,
      finishedText: '没有更多了',
      pageSize: 5,
      showDataPicker:false,
      minDate: new Date(2000, 0),
      maxDate: new Date(2100, 12),
      currentDate: new Date()
    }
  },
  mounted() {
    this.getAgentInfo()
  },
  methods: {
    getAgentInfo(){
      let params = {

      }
      getAgentInfo(params).then(res=>{
        if (res.result == 0) {
          this.getOrderList()
        } else {
          this.$toast(res.resultMessage)
        }
      })
    },
    //列表查询
    getOrderList() {
      let params = {
        renewalFlag: this.active,
        agentCode: 'G0000025',
        cvaliStartDate: '2023-12-01',
        cvaliEndDate: '2023-12-10',
      }
      healthgetRenewalList(params).then(res => {
        if (res.result == '0') {
          if(this.active == '0'){
            if(res.unRenewalInformationDTOList && res.unRenewalInformationDTOList.length != 0){
              this.listData = res.unRenewalInformationDTOList
            }
          }
          if(this.active == '1'){
            if(res.informationDTOList && res.informationDTOList.length != 0){
              this.listData = res.informationDTOList
            }
          }
          ;[this.loading, this.finished] = [false, true]
        } else {
          this.$toast(res.resultMessage)
        }
      })
    },
    //切换
    tabChange(name) {
      this.currentPage = 1
      this.active = name
      this.listData = []
      ;[this.loading, this.finished] = [true, false]
      this.finishedText = '正在加载...'
      this.getOrderList()
    },
    //搜索
    searchList() {
      this.currentPage = 1
      this.listData = []
      ;[this.loading, this.finished] = [true, false]
      this.finishedText = '正在加载...'
      this.getOrderList()
    },
    //投保单详情
    goDetail(item) {
      this.$router.push({
        path: '/healthInsuranceRenewal/detail',
        query: {
          grpContNo: item.grpContNo,
          renewalFlag: this.active,
          agentCode: 'G0000025',
          cvaliStartDate: '2023-12-01',
          cvaliEndDate: '2023-12-10',
        }
      })
    },
    //打开日期选择
    openshowDataPicker(){
      this.currentDate = new Date()
      this.showDataPicker = true
    },
    //日期选择
    onConfirmDate(value){
      let aaa = new Date(value)
      let thisYear = aaa.getFullYear()
      let thisMonth = aaa.getMonth()+1
      if(thisMonth < 10){
        thisMonth = '0'+thisMonth
      }
      this.currentDate = thisYear + '-' + thisMonth
      console.log(this.currentDate)
      this.showDataPicker = false
    }
  }
}
</script>
<style lang="scss" scoped>

</style>