ebiz-h5/src/views/ebiz/questions/QuestionsList.vue

<template>
  <div class="question-container">
    <div class="header">
      <van-search show-action @cancel="searchCancel" v-model="searchValue" placeholder="请输入投保人/被保人/险种名称/问题件类型关键字">
        <template #action>
          <div @click="searchProblems">搜索</div>
        </template>
      </van-search>
      <!-- <van-tabs v-model="active" @change="changeProblemList">
        <van-tab title="待处理"> -->
      <van-list
        class="vanList"
        :immediate-check="false"
        v-model="pendingListLoading"
        :finished="pendingListFinished"
        finished-text="没有更多了"
        @load="loadMore"
      >
        <van-notice-bar wrapable :scrollable="false" text="温馨提示：请在收到问题件之日起10日内处理，否则系统将逾期自动撤单。" />
        <div class="item" v-for="item in pendingList" :key="item.id">
          <div class="time">{{ item.createdTime }}</div>
          <div class="top">
            <div class="col">
              <van-tag class="tag" plain type="primary" color="#77bbff">投保</van-tag>
              <div class="text">{{ item.prtName }}</div>
            </div>
            <div class="col">
              <van-tag class="tag" plain type="primary" color="#da9887">被保</van-tag>
              <div class="text">{{ item.insuredName }}</div>
            </div>
            <div class="col">
              <van-tag class="tag" plain type="primary" color="#95ddd1">主险</van-tag>
              <div class="text">{{ item.mainRiskName }}</div>
            </div>
            <div class="col">
              <van-tag class="tag" plain type="primary" color="#ffcc99">类型</van-tag>
              <div class="text">{{ item.statusComment }}</div>
            </div>
          </div>
          <div class="bottom">
            <div class="list">
              <van-tag class="tag" plain color="#77bbff">投保单号</van-tag>
              <div class="text">{{ item.prtNo }}</div>
            </div>
            <div class="list">
              <van-tag class="tag" plain>状态</van-tag>
              <div class="text">{{ item.status | stateFilter }}</div>
            </div>
          </div>
          <div class="buttons">
            <van-button class="button" round type="info" size="small" color="#e4393c" @click="toDetail(item)">去处理</van-button>
          </div>
        </div>
      </van-list>
      <!-- </van-tab>
        <van-tab title="已处理">
          <van-list
            class="vanList"
            :immediate-check="false"
            v-model="processedListLoading"
            :finished="processedListFinished"
            finished-text="没有更多了"
            @load="loadMore"
          >
            <div class="item" v-for="item in processedList" :key="item.id">
              <div class="time">{{ item.createdTime }}</div>
              <div class="top">
                <div class="col">
                  <van-tag class="tag" plain type="primary" color="#77bbff">投保</van-tag>
                  <div class="text">{{ item.prtName }}</div>
                </div>
                <div class="col">
                  <van-tag class="tag" plain type="primary" color="#da9887">被保</van-tag>
                  <div class="text">{{ item.insuredName }}</div>
                </div>
                <div class="col">
                  <van-tag class="tag" plain type="primary" color="#95ddd1">主险</van-tag>
                  <div class="text">{{ item.mainRiskName }}</div>
                </div>
                <div class="col">
                  <van-tag class="tag" plain type="primary" color="#ffcc99">类型</van-tag>
                  <div class="text">{{ item.statusComment }}</div>
                </div>
              </div>
              <div class="bottom">
                <div class="list">
                  <van-tag class="tag" plain type="primary" color="#77bbff">投保单号</van-tag>
                  <div class="text">{{ item.prtNo }}</div>
                </div>
                <div class="list">
                  <van-tag class="tag" plain>状态</van-tag>
                  <div class="text">{{ item.status | stateFilter }}</div>
                </div>
              </div>
            </div>
          </van-list>
        </van-tab>
      </van-tabs> -->
    </div>
  </div>
</template>
<script>
import { getQuestionList } from '@/api/ebiz/questions'
import { Sticky, Search, Swipe, SwipeItem, List, Tag, Tabs, Tab, NoticeBar } from 'vant'
export default {
  name: 'questionsList',
  components: {
    [Sticky.name]: Sticky,
    [Search.name]: Search,
    [Swipe.name]: Swipe,
    [SwipeItem.name]: SwipeItem,
    [List.name]: List,
    [Tag.name]: Tag,
    [Tabs.name]: Tabs,
    [Tab.name]: Tab,
    [NoticeBar.name]: NoticeBar
  },
  data() {
    return {
      active: 0,
      pendingListLoading: true,
      processedListLoading: false,
      pendingListFinished: false,
      processedListFinished: false,
      pendingList: [],
      processedList: [],
      searchValue: '',
      currentPage: 1,
      pageSize: 10,
      searchCurrentPage: 1
    }
  },
  methods: {
    toDetail(item) {
      // 保存当前选择的问题件信息
      localStorage.setItem('currentProblemItem', JSON.stringify(item))
      this.$jump({
        flag: 'h5',
        extra: {
          url: `${window.location.origin}/#/questions/detail/${item.id}/${item.businessType}?receiveType=${item.receiveType}&prtNo=${item.prtNo}`
        },
        routerInfo: {
          path: `/questions/detail/${item.id}/${item.businessType}?receiveType=${item.receiveType}&prtNo=${item.prtNo}`
        }
      })
    },
    searchCancel() {
      this.searchValue = ''
    },
    async loadMore() {
      try {
        const rs = await getQuestionList({
          type: this.active,
          pageInfo: {
            pageNum: this.currentPage,
            pageSize: this.pageSize
          },
          keyword: this.searchValue ? this.searchValue : ''
        })
        if (rs && rs.result === '0') {
          this.currentPage++
          if (this.active === 0) {
            this.pendingListLoading = false
            this.pendingList.push(...rs.content.list)
            this.pendingList.reverse()
          } else {
            this.processedListLoading = false
            this.processedList.push(...rs.content.list)
            this.processedList.reverse()
          }
          if (rs.content.pageNum >= rs.content.pages && this.active === 0) {
            this.pendingListFinished = true
          } else if (rs.content.pageNum >= rs.content.pages && this.active === 1) {
            this.processedListFinished = true
          }
        } else {
          this.pendingListFinished = true
          this.processedListFinished = true
          this.pendingListLoading = false
          this.processedListLoading = false
        }
      } catch (reson) {
        this.pendingListLoading = false
        this.pendingListFinished = true
        this.processedListLoading = false
        this.processedListFinished = true
      }
    },
    changeProblemList() {
      this.currentPage = 1
      this.pendingList.splice(0)
      this.processedList.splice(0)
      this.pendingListFinished = false
      this.processedListFinished = false
      this.searchValue = ''
      if (this.active === 0) {
        this.pendingListLoading = true
      } else {
        this.processedListLoading = true
      }
      this.loadMore()
    },
    async searchProblems() {
      // 每次搜索查询第一页
      this.currentPage = 1
      // 开启loading, 复位finished
      if (this.active === 0) {
        this.pendingListLoading = true
        this.pendingListFinished = false
        this.pendingList.splice(0)
      } else {
        this.processedListLoading = true
        this.processedListFinished = false
        this.processedList.splice(0)
      }
      this.loadMore()
    },
    appCallBack(data) {
      if (data.trigger == 'left_button_click') {
        this.$jump({
          flag: 'service'
        })
      }
    }
  },
  created() {
    setTimeout(() => {
      // eslint-disable-next-line no-undef
      EWebBridge.webCallAppInJs('webview_left_button', {
        // 是否拦截原生返回事件 1是 其他否
        intercept: '1'
      })
    }, 100)
    // 筛选按钮的点击事件
    window.appCallBack = this.appCallBack
    localStorage.removeItem('currentProblemItem')
    this.loadMore()
  },
  filters: {
    stateFilter(val) {
      switch (val) {
        case '0':
        case '2':
          return '待客户处理问题件'
        case '1':
          return '待核心处理问题件'
        case '3':
          return '已线下打印通知书,待客户处理'
        case '4':
          return '问题件逾期未处理,已撤单'
        default:
          return ''
      }
    }
  }
}
</script>
<style lang="scss" scoped>
/deep/ .van-field__body {
  font-size: 12px;
}

.question-container {
  overflow-x: hidden;
  .contentList {
    box-sizing: border-box;
    width: 750px;
    display: flex;
    transition: all 0.4s;
    position: relative;
    overflow-y: auto;
    .vanList {
      width: 375px;
    }
  }
  .alert {
    background: rgba(255, 204, 153, 1);
    color: #e4393c;
    font-size: 12px;
    white-space: nowrap;
    height: 24px;
    line-height: 24px;
  }
  .item {
    padding: 0 20px;
    margin-bottom: 10px;
    background: #fff;
    .time {
      text-align: center;
      font-size: 12px;
      color: #888;
      padding: 10px 0;
    }
    .top {
      .col {
        display: flex;
        align-items: center;
        margin-bottom: 0.5em;
        font-size: 12px;
        line-height: 12px;
        .tag {
          text-align: center;
          margin-right: 1em;
          padding: 0.5em 1em;
        }
      }
    }
    .bottom {
      padding: 0.5em 0;
      border-top: 1px solid #efefef;
      .list {
        display: flex;
        align-items: center;
        margin-bottom: 0.5em;
        .tag {
          padding: 0.5em 1.5em;
          width: 5em;
          text-align: center;
          margin-right: 1em;
          font-size: 12px;
          line-height: 12px;
        }
        .text {
          font-size: 12px;
          line-height: 12px;
        }
      }
    }
    .buttons {
      display: flex;
      flex-direction: row-reverse;
      padding-bottom: 0.5em;
      .button {
        width: 83px;
        line-height: 22px;
      }
    }
  }
}
</style>