添加电投问题件页面和路由

src/views/ebiz/questions/QuestionsList.vue

@@ -0,0 +1,279 @@
+<template>
+  <div class="question-container">
+    <div class="header">
+      <van-search show-action @cancel="searchCancel" v-model="searchValue" placeholder="请输入投保人/被保人/险种名称/问题件类型关键字">
+        <template #action>
+          <div>搜索</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 | createTimeFormatFilter }}</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.businessType }}</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.statusComment }}</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 | createTimeFormatFilter }}</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.businessType }}</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.statusComment }}</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'
+import dateUtil from '@/assets/js/utils/date-utils.js'
+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: false,
+      processedListLoading: false,
+      pendingListFinished: false,
+      processedListFinished: false,
+      pendingList: [],
+      processedList: [],
+      searchValue: '',
+      currentPage: 1,
+      pageSize: 10
+    }
+  },
+  methods: {
+    toDetail(item) {
+      this.$jump({
+        flag: 'h5',
+        extra: {
+          url: `${window.location.origin}/#/questions/detail`
+        },
+        routerInfo: {
+          path: `/questions/detail?id=${item.id}`
+        }
+      })
+    },
+    searchCancel() {
+      this.searchValue = ''
+    },
+    async loadMore() {
+      const rs = await getQuestionList({
+        type: this.active,
+        pageInfo: {
+          pageNum: this.currentPage,
+          pageSize: this.pageSize
+        }
+      })
+      if (rs && rs.result === '0') {
+        this.currentPage++
+        if (this.active === 0) {
+          this.pendingListLoading = false
+          this.pendingList.push(...rs.content.list)
+        } else {
+          this.processedListLoading = false
+          this.processedList.push(...rs.content.list)
+        }
+        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
+      }
+    },
+    changeProblemList() {
+      this.currentPage = 1
+      this.pendingList.splice(0)
+      this.processedList.splice(0)
+      this.pendingListFinished = false
+      this.processedListFinished = false
+      if (this.active === 0) {
+        this.pendingListLoading = true
+      } else {
+        this.processedListLoading = true
+      }
+      this.loadMore()
+    }
+  },
+  created() {
+    this.loadMore()
+  },
+  filters: {
+    createTimeFormatFilter(val) {
+      return dateUtil.formatDate(new Date(val), 'yyyy-MM-dd HH:mm:ss')
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.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>