<template> 
 | 
  <GlobalWindow title="选择客户" width="1000px" @close="close" :visible.sync="isShowMemberList"> 
 | 
    <div> 
 | 
      <div class="df_ac mb20"> 
 | 
        <el-input v-model="modalSearchValue" placeholder="请输入客户名称" class="w400" @keyup.enter.native="queryList"> 
 | 
          <!-- <el-button slot="append" icon="el-icon-search" @click="queryList()" /> --> 
 | 
        </el-input> 
 | 
        <el-button class="ml10" type="primary" @click="queryList()">查询</el-button> 
 | 
      </div> 
 | 
      <el-table ref="table" v-loading="listLoading" :data="list" element-loading-text="Loading" border fit 
 | 
        :header-row-class-name="'table-header'" class="doumee-element-table doumee-element-tableb" 
 | 
        @row-click="rowClick"> 
 | 
  
 | 
        <el-table-column align="center" label="客户类型" prop="cardName" show-overflow-tooltip min-width="80" /> 
 | 
        <el-table-column align="center" label="客户名称" show-overflow-tooltip prop="remainingMoney" min-width="80" /> 
 | 
        <el-table-column align="center" label="联系人" show-overflow-tooltip prop="remainingGiveMoney" min-width="80" /> 
 | 
        <el-table-column label="联系电话" prop="createTime" min-width="100" align="center" /> 
 | 
        <el-table-column label="统一信用代码" prop="createTime" min-width="120" align="center" /> 
 | 
        <el-table-column label="营业期限" prop="createTime" min-width="100" align="center" /> 
 | 
        <el-table-column label="默认发票类型" prop="createTime" min-width="100" align="center" /> 
 | 
      </el-table> 
 | 
      <Pagination @size-change="handleSizeChange" @current-change="getList" :pagination="pagination" /> 
 | 
    </div> 
 | 
  </GlobalWindow> 
 | 
</template> 
 | 
  
 | 
<script> 
 | 
import { memberList, memberDetailInfo } from '@/api' 
 | 
import GlobalWindow from '@/components/common/GlobalWindow' 
 | 
import dayjs from 'dayjs' 
 | 
// import { debounce } from '@/utils/debounce' 
 | 
  
 | 
import Pagination from '@/components/common/Pagination' 
 | 
export default { 
 | 
  components: { 
 | 
    Pagination, 
 | 
    GlobalWindow 
 | 
  }, 
 | 
  props: { 
 | 
    isShowChooseBtn: { 
 | 
      type: Boolean, 
 | 
      default: () => true 
 | 
    }, 
 | 
    type: { // (10: 商品折扣  20: 订场折扣 30: 门票折扣 40: 套餐折扣 50:活动折扣 60:课程折扣) 
 | 
      type: String, 
 | 
      default: 'default' 
 | 
    } 
 | 
  }, 
 | 
  data() { 
 | 
    return { 
 | 
      searchValue: '', 
 | 
      isShowMemberList: false, 
 | 
      modalSearchValue: '', 
 | 
      list: [], 
 | 
      totalCount: 0, 
 | 
      pagination: { 
 | 
        pageSize: 10, 
 | 
        page: 1, 
 | 
        total: 0 
 | 
      }, 
 | 
      listLoading: false, 
 | 
  
 | 
    } 
 | 
  }, 
 | 
  created() { 
 | 
    // (10: 商品折扣  20: 订场折扣 30: 门票折扣 40: 套餐折扣 50:活动折扣 60:课程折扣) 
 | 
  }, 
 | 
  methods: { 
 | 
    clearSearch() { 
 | 
      this.searchValue = '' 
 | 
      this.modalSearchValue = '' 
 | 
    }, 
 | 
    handleMemberSelect(item) { 
 | 
      memberDetailInfo({ param: { memberId: item.id } }).then((res) => { 
 | 
        if (res.errorCode !== '000000') return 
 | 
        const obj = res.record || {} 
 | 
        obj.searchValue = this.searchValue 
 | 
        this.$emit('select', obj) 
 | 
      }) 
 | 
    }, 
 | 
    clear() { 
 | 
      this.searchValue = '' 
 | 
      setTimeout(() => { 
 | 
        this.$refs.searchValueRef.focus() 
 | 
      }) 
 | 
      this.$emit('clear') 
 | 
    }, 
 | 
    rowClick(item) { 
 | 
      memberDetailInfo({ param: { memberId: item.id } }).then((res) => { 
 | 
        if (res.errorCode !== '000000') return 
 | 
        const obj = res.record || {} 
 | 
        this.searchValue = obj.nickName 
 | 
        obj.searchValue = this.modalSearchValue 
 | 
        if (item.phone) { 
 | 
          this.searchValue += '-' + item.phone 
 | 
        } 
 | 
        if (item.number) { 
 | 
          this.searchValue += '(' + item.number + ')' 
 | 
        } 
 | 
        this.$emit('select', obj) 
 | 
      }) 
 | 
      this.isShowMemberList = false 
 | 
    }, 
 | 
    getList() { 
 | 
      const { pagination, modalSearchValue } = this 
 | 
      this.listLoading = true 
 | 
      memberList({ pagination, param: { keyword: modalSearchValue } }).then((res) => { 
 | 
        this.listLoading = false 
 | 
        if (res.errorCode !== '000000') return 
 | 
        this.list = res.recordList 
 | 
        this.pagination.total = res.total || 0 
 | 
        this.totalCount = res.totalCount 
 | 
      }, () => { 
 | 
        this.listLoading = false 
 | 
      }) 
 | 
    }, 
 | 
    openModal() { 
 | 
      this.modalSearchValue = '' 
 | 
      // this.queryList() 
 | 
      this.isShowMemberList = true 
 | 
    }, 
 | 
    queryList() { 
 | 
      this.pagination.page = 1 
 | 
      this.getList() 
 | 
    }, 
 | 
    currentChange(val) { 
 | 
      this.pagination.page = val 
 | 
      this.getList() 
 | 
    }, 
 | 
    clear() { 
 | 
      this.filters = {} 
 | 
      this.pagination.pageSize = 10 
 | 
      this.pagination.page = 1 
 | 
      this.getList() 
 | 
    }, 
 | 
    handleSizeChange(capacity) { 
 | 
      this.pagination.pageSize = capacity 
 | 
      this.getList() 
 | 
    }, 
 | 
    close() { 
 | 
      this.isShowMemberList = false 
 | 
    } 
 | 
  } 
 | 
} 
 | 
</script> 
 | 
  
 | 
<style lang="scss" scoped> 
 | 
.member_search_wrap { 
 | 
  display: flex; 
 | 
  
 | 
  ::v-deep .el-input__validateIcon { 
 | 
    display: none !important; 
 | 
  } 
 | 
} 
 | 
</style> 
 |