ebiz-h5/src/views/YB_APP/policyList.vue

<template>
  <div class="public_container">
    <!-- 最上方的搜索框 -->
    <div>
      <van-search shape="round" v-model="findValue" placeholder="请输入保单号" />
      <!-- 右侧搜索按钮 -->
      <button class="searchButton" @click="keywordSearch(findValue)">搜索</button>
    </div>
    <!-- 无内容显示的背景 -->
    <div v-if="filpolicyListDTOList == ''">
      <img class="noContentImg" src="../../assets/YB_APP/images/noguarantee.png" />
      <p class="noContentText">暂无保单</p>
    </div>
    <!-- 卡片列表 -->
    <div v-if="filpolicyListDTOList != ''">
      <div class="cardList" v-for="(item, index) in filpolicyListDTOList" :key="index">
        <div :class="[item.orderStatus == 0 ? 'topbackground1' : 'topbackground2']">
          <img class="cardListImg" v-if="item.orderStatus == 0" src="../../assets/YB_APP/images/sign1.png" />
          <!-- 字左边小对号图片  -->
          <img class="cardListImg" v-if="item.orderStatus != 0" src="../../assets/YB_APP/images/sign2.png" />
          <span class="cardListText">{{ item.riskName }}</span>
        </div>
        <!-- 卡片内容 -->
        <div class="cardConetent">
          <div class="textList">
            <p style="font-size: 14px; font-weight: 600; margin-bottom: 13px; color: #535353">
              <span>保单号</span><span>{{ item.policyNo }}</span>
            </p>
            <p>
              <span>被保人</span><span>{{ item.insuredName }}</span>
            </p>
            <p>
              <span>承保日期</span><span>{{ item.cvaliDate }}</span>
            </p>
            <p>
              <span>销售渠道</span><span>{{ item.bankChannel }}</span>
            </p>
            <!-- 根据0,1状态判断显示是否和文字颜色 -->
            <p v-if="item.visitSuccess == 0"><span>回访成功</span><span class="visitNo">否</span></p>
            <p v-if="item.visitSuccess == 1"><span>回访成功</span><span>是</span></p>
            <p v-if="item.visitFinish == 0"><span>回访完成</span><span class="visitNo">否</span></p>
            <p v-if="item.visitFinish == 1"><span>回访完成</span><span>是</span></p>
          </div>
          <!-- 右边状态图片 -->
          <div class="rightState">
            <!-- 有效 -->
            <img v-if="item.orderStatus == 0" class="rightStateImg" src="../../assets/YB_APP/images/stamp1.png" alt="" />
            <!-- 退保终止 -->
            <img v-if="item.orderStatus == 1" class="rightStateImg" src="../../assets/YB_APP/images/stamp2.png" alt="" />
            <!-- 犹退终止 -->
            <img v-if="item.orderStatus == 2" class="rightStateImg" src="../../assets/YB_APP/images/stamp3.png" alt="" />
            <!-- 协退终止 -->
            <img v-if="item.orderStatus == 3" class="rightStateImg" src="../../assets/YB_APP/images/stamp4.png" alt="" />
            <!-- 当日撤单 -->
            <img v-if="item.orderStatus == 4" class="rightStateImg" src="../../assets/YB_APP/images/stamp5.png" alt="" />
            <!-- 理赔终止 -->
            <img v-if="item.orderStatus == 5" class="rightStateImg" src="../../assets/YB_APP/images/stamp6.png" alt="" />
            <!-- 失效终止 -->
            <img v-if="item.orderStatus == 6" class="rightStateImg" src="../../assets/YB_APP/images/stamp7.png" alt="" />
            <button class="rightStateButton" @click="goPolicyDetail(item.policyNo)">查看详情</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Button, Search } from 'vant'
import { ref } from 'vue'
import { YBpolicyListAgent } from '@/api/YB_APP/index'

export default {
  name: 'policyList',
  components: {
    [Button.name]: Button,
    [Search.name]: Search
  },
  setup() {
    const value = ref('')
    return { value }
  },
  data() {
    return {
      findValue: '', // 上面搜索框的value
      policyListDTOList: [],
      filpolicyListDTOList: [] // 结合watch过滤后的卡片数据
    }
  },
  mounted() {
    this.YBpolicyListAgent()
  },
  methods: {
    YBpolicyListAgent() {
      let params = {
        signDate: '2022-09',
        appntName: '',
        insureName: '',
        riskCode: ''
      }
      console.log('我是log')
      YBpolicyListAgent(params).then((res) => {
        console.log(res, '我是res')
        if (res.result == 0) {
          this.policyListDTOList = res.policyListDTOList
          this.filpolicyListDTOList = res.policyListDTOList
          console.log(this.policyListDTOList, 'data里的policyListDTOList')
        }
      })
    },
    // (查看详情)按钮跳转
    goPolicyDetail(data) {
      console.log(data)
      this.$jump({
        flag: 'h5',
        extra: {
          url: location.origin + '/#/YB_APP/policyDetail?policyNo=' + data
        },
        routerInfo: {
          path: '/YB_APP/policyDetail?policyNo=' + data
        }
      })
    },
    // 上方关键词搜索按钮
    keywordSearch(value) {
      console.log('点击搜索了')
      this.filpolicyListDTOList = this.policyListDTOList.filter((p) => {
        return p.policyNo.indexOf(value) !== -1
      })
    }
  }
  // 关键词搜索过滤
  // watch: {
  // findValue: {
  //   handler(value) {
  //       this.filpolicyListDTOList = this.policyListDTOList.filter((p) => {
  //         // return p.policyNo.indexOf(value) !== -1  ||  p.insuredName.indexOf(value) !== -1
  //         return p.policyNo.indexOf(value) !== -1
  //       })
  // if (value == '') {
  //   this.filpolicyListDTOList = this.policyListDTOList
  // }
  // }
  // }
  // }
}
</script>
<style lang="scss" scoped>
.public_container {
  font-size: 12px;
  height: 100vh;
  width: 100vw;
}
/deep/ .van-search {
  // background-color: rgb(0, 255, 255);
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
  height: 6vh;
}
/deep/ .van-cell--borderless {
  height: 4vh;
  // background-color: #f7f7f7;
  font-size: 12px;
  line-height: 3.4vh;
}
.searchButton {
  position: absolute;
  top: 10px;
  right: 3.3vw;
  background-color: #2154cc;
  color: #ffffff;
  height: 3.7vh;
  width: 14vw;
  border-radius: 120px;
  font-size: 12px;
  border: 0px;
}
.noContentImg {
  height: 216px;
  width: 285px;
  position: absolute;
  top: 18%;
  left: calc(50% - 142px);
}
.noContentText {
  font-size: 9px;
  position: absolute;
  top: 37%;
  left: 44.5%;
  color: #b3b5ca;
}
.cardList {
  height: 28vh;
  width: 96%;
  border-radius: 12px;
  background-color: white;
  margin: 2vh auto;
  overflow: hidden;
}
.cardListImg {
  height: 18px;
  width: 14px;
  margin: 12px 7px;
  position: absolute;
}
.visitNo {
  color: #f22220;
  font-weight: 600;
}
.rightState {
  height: 100%;
  width: 32%;
  background-color: white;
}
.rightStateImg {
  height: 100px;
  width: 100px;
}
.rightStateButton {
  height: 30px;
  width: 78px;
  color: #d7523b;
  border: #d7523b 1px solid;
  border-radius: 30px;
  background-color: white;
  margin-top: 36px;
  margin-left: 10px;
  font-size: 12px;
}
.cardListText {
  line-height: 5vh;
  margin-left: 27px;
  font-weight: 600;
  font-size: 16px;
}
.cardConetent {
  height: 22.5vh;
  width: 100%;
  padding: 0px 20px;
  display: flex;
}
.textList {
  height: 90%;
  width: 68%;
  color: #9d9d9d;
  padding-top: 14px;
  font-size: 12px;
}
.textList > p {
  display: flex;
  margin-bottom: 11px;
}
.textList > p > span:nth-of-type(1) {
  display: block;
  // float:left;
  width: 50px;
  // background-color: blueviolet;
}
.textList > p > span:nth-of-type(2) {
  // width: 5vh;
  // background-color: rgb(65, 214, 77);
  margin-left: 8vw;
  width: 164px;
  // background-color: chartreuse;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
// .active {
//   color: #f22220;
// }
.topbackground1 {
  background: linear-gradient(to right, #435898, #6581c6);
  height: 4.5vh;
  width: 100%;
  color: white;
}
.topbackground2 {
  background: linear-gradient(to right, #fcfcfc, #e8e5e6);
  height: 4.5vh;
  width: 100%;
  color: #323232;
}
</style>