ebiz-h5/src/views/ebiz/serve/PolicyList.vue

<template>
  <div class="policy-list-container">
    <div class="policy-list-content">
      <!-- tab 栏切换 -->
      <van-tabs v-model="active">
        <van-tab title="有效">
          <div v-if="validList.length > 0">
            <div class="fs12" v-for="(item, index) in validList" :key="index">
              <div class="flex align-items-c justify-content-c h40">
                <div>保单号:</div>
                <div>{{ item.policyNo }}</div>
              </div>

              <div class="bg-white pv15 pr15 pl10">
                <div class="flex justify-content-s align-items-c">
                  <div>
                    <div class="w45 inline-b">
                      <van-tag plain color="#5CA7DE">投保</van-tag>
                    </div>
                    <span class="fs15 c-gray-dark">{{ item.appntName }}</span>
                  </div>
                </div>

                <div class="mv15">
                  <div class="w45 inline-b">
                    <van-tag plain color="#DD9C56">被保</van-tag>
                  </div>
                  <span class="fs15 c-gray-dark">{{ item.insuredName }}</span>
                </div>

                <div class="mv10">
                  <span class="w45 inline-b">
                    <van-tag plain type="danger">主险</van-tag>
                  </span>
                  <span class="fs15 c-gray-dark">{{ item.riskName }}</span>
                </div>

                <van-row class="mb15">
                  <van-col span="12" class="fwb fs15">保额（元）</van-col>
                  <van-col span="12" class="text-right fwb" style="color: red">{{ `${item.amount}.00` }}</van-col>
                </van-row>
                <div class="pt15" style="border-top:1px solid #dadada">
                  <div>
                    <div class="w120 inline-b">
                      <van-tag plain color="#999999">保单生效日期</van-tag>
                    </div>
                    <span class="fs14 c-gray-dark">{{ item.effectDate }}</span>
                  </div>
                </div>
                <div class="mt10 flex justify-content-fe">
                  <van-button round @click="goToDetail(item.policyNo)" size="small" class="mr5" type="danger" plain v-no-more-click="1000">查看详情</van-button>
                </div>
              </div>
            </div>
          </div>
          <div v-else class="text-center">
            <img class="mt40 w250" src="@/assets/images/pic_page-non.png" />
            <div class="fs17 c-gray-dark mt40">暂无保单列表</div>
          </div>
        </van-tab>
        <van-tab title="已失效">
          <div v-if="invalidList.length > 0">
            <div class="fs12" v-for="(item, index) in invalidList" :key="index">
              <div class="flex align-items-c justify-content-c h40">
                <div>保单号:</div>
                <div>{{ item.policyNo }}</div>
              </div>

              <div class="bg-white pv15 pr15 pl10">
                <div class="flex justify-content-s align-items-c">
                  <div>
                    <div class="w45 inline-b">
                      <van-tag plain color="#5CA7DE">投保</van-tag>
                    </div>
                    <span class="fs15 c-gray-dark">{{ item.appntName }}</span>
                  </div>
                </div>

                <div class="mv15">
                  <div class="w45 inline-b">
                    <van-tag plain color="#DD9C56">被保</van-tag>
                  </div>
                  <span class="fs15 c-gray-dark">{{ item.insuredName }}</span>
                </div>

                <div class="mv10">
                  <span class="w45 inline-b">
                    <van-tag plain type="danger">主险</van-tag>
                  </span>
                  <span class="fs15 c-gray-dark">{{ item.riskName }}</span>
                </div>

                <van-row class="mb15">
                  <van-col span="12" class="fwb fs15">保额（元）</van-col>
                  <van-col span="12" class="text-right fwb" style="color: red">{{ `${item.amount}.00` }}</van-col>
                </van-row>
                <div class="pt15" style="border-top:1px solid #dadada">
                  <div>
                    <div class="w120 inline-b">
                      <van-tag plain color="#999999">保单生效日期</van-tag>
                    </div>
                    <span class="fs14 c-gray-dark">{{ item.effectDate }}</span>
                  </div>
                </div>

                <div class="mt10 flex justify-content-fe">
                  <van-button round @click="goToDetail(item.policyNo)" size="small" class="mr5" type="danger" plain v-no-more-click="1000">查看详情</van-button>
                </div>
              </div>
            </div>
          </div>
          <div v-else class="text-center">
            <img class="mt40 w250" src="@/assets/images/pic_page-non.png" />
            <div class="fs17 c-gray-dark mt40">暂无保单列表</div>
          </div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
import { Search, List, Tab, Tabs, Tag, Row, Col } from 'vant'
import { getPolicyList } from '@/api/ebiz/serve/serve'
export default {
  data() {
    return {
      // 搜索框
      search: '',
      // 列表信息
      policyListDTOList: [],
      // 高亮的 tab 栏
      active: 2,
      validList: [], // 有效列表
      invalidList: [], // 无效列表
      customerNumber: localStorage.getItem('customerNumber')
    }
  },
  created() {
    let that = this
    // 获取表单列表
    that.getPolicyList()
  },
  methods: {
    // 获取保单列表
    getPolicyList() {
      let that = this
      let data = {
        customId: that.customerNumber
      }
      getPolicyList(data).then(res => {
        // console.log(res)
        if (res.result == 0) {
          res.policyListDTOList.map(item => {
            if (item.orderStatus == '0') {
              item.orderStatus = '有效'
              that.validList.push(item)
            } else if (item.orderStatus == '1') {
              item.orderStatus = '无效'
              that.invalidList.push(item)
            }
          })
          //   that.policyListDTOList = res.policyListDTOList
          console.log(that.validList)
          console.log(that.invalidList)
        } else {
          this.$toast(res.resultMessage)
          // EWebBridge.webCallAppInJs('bridge', {
          //   flag: 'webview_toast',
          //   extra: { content: res.resultMessage }
          // })
        }
      })
    },
    // 点击去详情
    goToDetail(policyNo) {
      console.log(policyNo)
      window.localStorage.setItem('policyNo', policyNo)
      let that = this
      that.$jump({
        flag: 'h5',
        extra: {
          url: location.origin + '/#/serve/detail'
        },
        routerInfo: {
          path: '/serve/detail'
        }
      })
    }
  },
  components: {
    [Search.name]: Search,
    [List.name]: List,
    [Tab.name]: Tab,
    [Tabs.name]: Tabs,
    [Tag.name]: Tag,
    [Row.name]: Row,
    [Col.name]: Col
  }
}
</script>

<style lang="scss" scoped>
@import '@/assets/sass/variables.scss';
.list-container {
  .list-content {
    .list-header {
      background: $white;
    }
    .list-main {
      background: $white;
    }
  }
}
</style>