ebiz-h5/src/views/ebiz/proposal/List.vue

.
<template>
  <div class="proposal-list-container">
    <van-sticky>
      <van-tabs :line-width="45" title-inactive-color="#999999" v-model="active" @change="tabChange" title-active-color="#E9332E">
        <van-tab title="制作中" name="1"></van-tab>
        <van-tab title="已制作" name="2"></van-tab>
        <van-tab title="转投保" name="3"></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="loadMore"
      class="pb45"
    >
      <div v-if="isSuccess">
        <div v-if="proposalList.length > 0">
          <div v-for="(item, index) in proposalList" :key="index">
            <div class="fs12 mt20 mb5 text-center c-gray-dark">{{ item.orderInfoDTO.appntDateLabel }}</div>

            <div class="bg-white radius5 mh15 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.appntDTO.name }}</span>
                </div>
              </div>

              <div v-for="(insure, insureIndex) in item.insuredDTOs" :key="insureIndex">
                <div class="mv15">
                  <div class="w45 inline-b">
                    <van-tag plain color="#DD9C56">被保</van-tag>
                  </div>
                  <span class="fs15 c-gray-dark">{{ insure.name }}</span>
                </div>
                <div v-for="(mainRisk, riskIndex) in insure.mainRisk" :key="riskIndex">
                  <div class="mv10">
                    <span class="w45 inline-b">
                      <van-tag plain type="danger">主险</van-tag>
                    </span>
                    <span class="fs15 c-gray-dark">{{ mainRisk.riskName }}</span>
                  </div>
                  <div class="mv10 pl45 flex" v-for="(addtion, addtionIndex) in mainRisk.addtion" :key="addtionIndex">
                    <span class="mr10" style="flex-shrink: 0">
                      <van-tag mark color="#DDF2EF" text-color="#E9332E">附加</van-tag>
                    </span>
                    <span class="fs13">{{ addtion.riskName }}</span>
                  </div>
                </div>
              </div>

              <div class="flex fs15 c-gray-dark justify-content-s mt5 mb5">
                <span class="c-gray-darker fwb">首期总保费（元）</span>
                <span class="yellow fwb">{{ item.firstPrem | moneyFormat }}</span>
              </div>
              <div class="text-right pv5">
                <van-button v-if="active == 2" round size="small" @click="toInsurance(item)" class="mr5" type="danger">转投保</van-button>
                <van-button v-if="active == 1" round @click="edit(item)" size="small" class="mr5" type="danger">编辑</van-button>
                <van-button v-if="active == 2" plain round @click="preview(item)" size="small" class="mr5" type="danger">预览</van-button>
                <van-button size="small" round :plain="active == 3 ? false : true" @click="deleteProposal(item, active, index)" type="danger">删除</van-button>
              </div>
            </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-list>
    <van-button type="danger" @click="addProposal" class="bottom-btn fs16">点我新增</van-button>
  </div>
</template>

<script>
import { Tabs, Tab, Tag, Dialog, List, Sticky, Toast } from 'vant'
import { getList, toInsurance, deleteProposal } from '@/api/ebiz/proposal/proposal.js'
import { formatRiskList } from '@/assets/js/utils/formatRiskList.js'
import riskRules from '../common/risk-rules.js'

export default {
  name: 'proposalList',
  components: {
    [Tabs.name]: Tabs,
    [Tab.name]: Tab,
    [Tag.name]: Tag,
    [List.name]: List,
    [Sticky.name]: Sticky
  },

  data() {
    return {
      active: 1,
      proposalList: [],
      finishedText: '没有更多了',
      finished: false,
      error: false,
      loading: false,
      pageSize: 5, //每页数据条数
      morePage: 1, // 当前页数
      isSuccess: false
    }
  },
  created() {
    this.$CacheUtils.removeLocItem('orderNo')
    // document.body.style.backgroundColor = '#F5F5F5'
    setTimeout(() => {
      // eslint-disable-next-line no-undef
      EWebBridge.webCallAppInJs('webview_left_button', {
        intercept: '1' //是否拦截原生返回事件 1是 其他否
      })
    }, 100)
    window.appCallBack = this.appCallBack
  },
  mounted() {
    this.loadMore()
  },
  methods: {
    appCallBack(data) {
      if (data.trigger == 'left_button_click') {
        this.$jump({
          flag: 'home'
        })
      }
    },
    //获取建议书列表
    getProposalList(tabType, pageInfo) {
      let status = '0' + tabType
      let request = {
        proposalInfoDTO: {
          status
        },
        pageInfo
      }
      getList(request).then(res => {
        if (res.result == '0') {
          this.isSuccess = true
          let content = res.content
          this.morePage++
          let list = content.list
          if (list.length == 0) {
            this.finishedText = ''
          } else {
            this.finishedText = '已经全部加载'
          }
          list = formatRiskList(list, 'insuredDTOs', 'riskDTOLst') //格式化数据为本地显示结果

          this.proposalList = this.proposalList.concat(list)
          console.log(this.proposalList)
          if (this.proposalList.length == 0) {
            this.isSuccess = false
          }
          this.loading = false
          if (content.nextPage == 0) {
            //当下一页为0时  表示全部数据加载完毕
            this.finished = true
          }
        } else {
          this.finished = true
          this.loading = false
          this.finishedText = res.resultMessage
        }
      })
    },

    loadMore() {
      let pageInfo = {
        pageNum: this.morePage,
        pageSize: this.pageSize
      }
      let active = this.active
      this.getProposalList(active, pageInfo)
    },
    tabChange(index) {
      this.morePage = 1
      this.active = index
      this.proposalList = []
      ;[this.loading, this.finished] = [true, false]

      this.finishedText = '正在加载...'
      this.loadMore()
    },
    //删除建议书
    deleteProposal(item) {
      let params = {
        orderDTO: {
          orderInfoDTO: {
            orderNo: item.orderInfoDTO.orderNo
          }
        },
        type: '1'
      }
      Dialog.confirm({
        className: 'dialog-delete',
        title: '提示',
        message: '确认删除建议书?',
        cancelButtonColor: '#E9332E',
        confirmButtonColor: '#FFFFFF'
      })
        .then(() => {
          deleteProposal(params).then(res => {
            if (res.result == '0') {
              this.proposalList = []
              this.morePage = 1
              ;[this.loading, this.finished] = [true, false]
              this.loadMore()
            }
          })
        })
        .catch(() => {})
    },
    //点我新增
    addProposal() {
      this.$jump({
        flag: 'h5',
        extra: {
          url: location.origin + '/#/proposal/appnt'
        },
        routerInfo: {
          path: '/proposal/appnt'
        }
      })
    },
    //编辑
    edit(item) {
      //建议书列表 编辑=》制作中的建议书跳转到选择被保险人页面；
      localStorage.orderNo = item.orderInfoDTO.orderNo
      this.$jump({
        flag: 'h5',
        extra: {
          url: location.origin + '/#/proposal/chooseInsuredPerson',
          needRefresh: '1'
        },
        routerInfo: {
          path: '/proposal/chooseInsuredPerson'
        }
      })
    },
    //预览 跳转至利益演示
    preview(item) {
      console.log(item.insuredDTOs[0].mainRisk[0].mainRiskCode)
      localStorage.orderNo = item.orderInfoDTO.orderNo
      //新增 解决直接点击预览报错问题
      localStorage.mainRiskCode = item.insuredDTOs[0].mainRisk[0].mainRiskCode
      this.$jump({
        flag: 'h5',
        extra: {
          url: location.origin + '/#/proposal/proposalInfo'
        },
        routerInfo: {
          path: '/proposal/proposalInfo'
        }
      })
    },
    //转投保
    async toInsurance(item) {
      if (item.insuredDTOs[0].mainRisk.length === 2) {
        let prodCodes = item.insuredDTOs[0].riskDTOLst
        let prd26 = prodCodes.some(item => {
          return item.riskCode === 'GFRS_M0026'
        })
        let prd17 = prodCodes.some(item => {
          return item.riskCode === 'GFRS_M0017'
        })
        // 如果选择的产品不是GFRS_M0026&GFRS_M0017弹出提示
        if (!(prd26 && prd17)) {
          return Toast.fail('暂不支持组合产品转投保')
        }
      }
      let flag = item.insuredDTOs[0].riskDTOLst.some(v => {
        return v.riskCode == 'GFRS_M0024'
      })
      if (flag && (await riskRules.getProductSellPermissionList('GFRS_M0024', this))) {
        return this.$toast('抱歉，您没有该产品的销售权限！')
      }

      let params = {
        proposalInfoDTO: {
          proposalNo: item.orderInfoDTO.orderNo
        }
      }
      toInsurance(params).then(res => {
        if (res.result == '0') {
          localStorage.chooseProductCodes = ''
          localStorage.orderNo = res.content.orderNo
          this.$jump({
            flag: 'h5',
            extra: {
              url: location.origin + '/#/sale/insuredInfo?edit=1',
              backToFirst: '1'
            },
            routerInfo: {
              path: '/sale/insuredInfo?edit=1'
            }
          })
        } else {
          Toast.fail(res.resultMessage)
        }
      })
    }
  }
}
</script>