ebiz-h5/src/views/ebiz/preserve/common/Search.vue

<!-- 保全搜索客户页面-->
<template>
  <div class="search-container bg-white">
    <div class="search-content flex relative">
      <van-dropdown-menu class="pr5 ml10 mt5" active-color="#e9332e" v-if="isSearch">
        <van-dropdown-item v-model="selected" :options="options" />
      </van-dropdown-menu>
      <van-search class="search-box flex1" v-model="searchVal" show-action @search="onSearch" @cancel="onCancel" @input="handleInput">
        <div slot="action" v-if="isSearch" @search="onSearch" @click="onSearch(searchVal)" v-no-more-click="2000">搜索</div>
        <div slot="action" v-else @click="onCancel" v-no-more-click="2000">取消</div>
      </van-search>
    </div>
    <ul class="search-list-container" v-if="list.length">
      <li
        class="search-list-item flex pt10 pb10 pl15 pr15 relative"
        @click="handleClick(item)"
        v-no-more-click="2000"
        v-for="(item, index) in list"
        :key="index"
      >
        <img src="@/assets/images/bnf_avatar.png" width="60" height="60" class="radius50 v-middle item-avatar mr20 ml10" />
        <div class="item-info fl fs12">
          <p class="username mb5">{{ item.customerName }}</p>
          <p class="mobile gray mb5">手机号: {{ item.customerMobile }}</p>
          <p class="idno gray">证件号码: {{ item.idNo }}</p>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import { Search, DropdownMenu, DropdownItem } from 'vant'
import { customerList, pcPolicyInfo } from '@/api/ebiz/preserve/preserve'
export default {
  name: 'Search',
  // props: {
  //   options: {
  //     type: Array,
  //     default: () => []
  //   }
  // },
  data() {
    return {
      searchVal: '', // 搜索关键词
      list: [], // 客户列表
      selected: 0, // 搜索类型 0 客户姓名 1 证件号码 2 手机号
      isSearch: true, // 是否显示搜索按钮
      options: [
        { text: '客户姓名', value: 0 },
        { text: '证件号码', value: 1 },
        { text: '手机号', value: 2 }
      ],
      entry: '', // 入口
      surrenderType: ''
    }
  },
  components: {
    [Search.name]: Search,
    [DropdownMenu.name]: DropdownMenu,
    [DropdownItem.name]: DropdownItem
  },
  created() {
    document.getElementsByTagName('body')[0].classList.add('bg-white')
  },
  destroyed() {
    document.getElementsByTagName('body')[0].classList.remove('bg-white')
  },
  methods: {
    // 搜索
    onSearch(val) {
      if (!val) {
        this.$toast('请输入搜索内容')
        return
      }
      if (localStorage['preserve-customerInfo']) {
        localStorage.removeItem('preserve-customerInfo')
      }
      customerList({
        queryParam: val,
        queryType: this.selected //0客户姓名，1证件号码，2手机号
      }).then(res => {
        this.$toast.clear()
        if (res.result == 0) {
          this.list = res.content.customerList
          if (this.list.length == 0) {
            this.$toast(`暂无此客户`)
          }
        } else {
          this.$toast(res.resultMessage || '暂无此客户')
        }
      })
      this.isSearch = false
    },
    // 取消
    onCancel() {
      this.selected = 0
      this.searchVal = ''
      this.isSearch = true
      this.list = []
    },
    handleInput(val) {
      if (!this.isSearch && val == '') {
        this.isSearch = true
        this.list = []
      }
    },
    // 点击客户
    handleClick(params) {
      if (this.checkValidity(params) == '0' && this.entry != 'CM') {
        return this.$toast('您的证件有效期已过期，请立即更新您的证件有效期。如有问题，请致电400-694-6688')
      }
      this.entry = this.$route.query.entry
      let url = ''
      switch (this.entry) {
        case 'BB':
          url = `/preserve/bb/contactInfo?entry=BB`
          break
        case 'BC':
          url = `/preserve/common/policyList?entry=BC`
          break
        case 'PC':
          url = `/preserve/pc/RenewalInfo?entry=PC`
          break
        case 'CT':
          url = `/preserve/common/policyList?entry=CT`
          break
        case 'WT':
          url = `/preserve/common/policyList?entry=WT`
          break
        default:
          break
      }
      if (this.entry == 'PC') {
        pcPolicyInfo({
          customerNo: params.customerNo,
          edorType: 'PC', //续期账号变更
          idno: params.idNo,
          mobile: params.customerMobile,
          name: params.customerName
        }).then(
          res => {
            if (res.result == '0') {
              this.$store.commit('updatePcPolicyInfo', res.content)
              localStorage.setItem('preserve-customerInfo', JSON.stringify(params))
              this.jupmTo(url)
            } else {
              this.$toast(res.resultMessage)
            }
          },
          error => {
            console.log(error)
          }
        )
      } else {
        localStorage.setItem('preserve-customerInfo', JSON.stringify(params))
        this.jupmTo(url)
      }
    },
    // 页面跳转
    jupmTo(url) {
      this.$jump({
        flag: 'h5',
        extra: {
          url: location.origin + `/#${url}`
        },
        routerInfo: {
          path: url
        }
      })
    },
    //判断证件有效期 0-已过期 1-未过期
    checkValidity(params) {
      if (Date.parse(params.idEndDate) < Date.parse(new Date())) {
        return '0'
      } else return '1'
    }
  }
}
</script>

<style lang="scss" scoped>
.search-container {
  .search-content:not(:last-child)::after {
    position: absolute;
    box-sizing: border-box;
    content: ' ';
    pointer-events: none;
    right: 0;
    bottom: 0;
    left: 4.26667vw;
    border-bottom: 1px solid #dadada;
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
  }
  .search-list-item:not(:last-child)::after {
    position: absolute;
    box-sizing: border-box;
    content: ' ';
    pointer-events: none;
    right: 0;
    bottom: 0;
    left: 4.26667vw;
    border-bottom: 1px solid #dadada;
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
  }
  /deep/[class*='van-hairline']::after {
    border: none;
  }
}
</style>