crm-mobile/pages_crm/crmSearch.vue

<template>
  <view class="uni-app">
    <view class="status-bar" />
    <view class="main-container">
      <wk-nav-bar :title="searchTitle" />
			
      <view class="search-box">
        <text class="wk wk-search" />
        <input
          v-model="keyword"
          type="text"
          :maxlength="50"
          :placeholder="placeholder"
          placeholder-class="wk-placeholder"
          class="input-core">
        <image
          :src="$static('images/icon/delete_fill.png')"
          alt=""
          class="delete-icon"
          @click="handleClear" />
      </view>

      <view class="list-view">
        <wk-scroll-view
          :status="listStatus"
          :refresh="false"
          :show-empty="showEmpty"
          class="list-scroll"
          @loadmore="getList()">
          <template v-for="(item, index) in listData">
            <leads-item
              v-if="crmType === 'leads'"
              :key="index"
              :item-data="item" />
            <customer-item
              v-else-if="crmType === 'customer'"
              :key="index"
              :item-data="item" />
            <customer-item
              v-else-if="crmType === 'pool'"
              :key="index"
              :item-data="item"
              :pool-id="poolId"
              is-seas />
            <contacts-item
              v-else-if="crmType === 'contacts'"
              :key="index"
              :item-data="item" />
            <business-item
              v-else-if="crmType === 'business'"
              :key="index"
              :item-data="item" />
            <contract-item
              v-else-if="crmType === 'contract'"
              :key="index"
              :item-data="item" />
            <received-item
              v-else-if="crmType === 'receivables'"
              :key="index"
              :item-data="item" />
            <product-item
              v-else-if="crmType === 'product'"
              :key="index"
              :item-data="item" />
            <invoice-item
              v-else-if="crmType === 'invoice'"
              :key="index"
              :item-data="item" />
          </template>
        </wk-scroll-view>
      </view>
    </view>
  </view>
</template>

<script>
  import { GetList as GetLeadsList } from 'API/crm/leads'
  import { GetList as GetCustomerList } from 'API/crm/customer'
  import { PoolList as GetPoolList } from 'API/crm/pool'
  import { GetList as GetContactsList } from 'API/crm/concat'
  import { GetList as GetBusinessLeadsList } from 'API/crm/business'
  import { GetList as GetContractList } from 'API/crm/contract'
  import { GetList as GetReceivablesList } from 'API/crm/received'
  import { GetList as GetProductList } from 'API/crm/product'
  import { GetList as GetInvoiceList } from 'API/crm/invoice'
	
  import LeadsItem from './leads/components/leadsItem.vue'
  import CustomerItem from './customer/components/customerItem.vue'
  import ContactsItem from './contacts/components/contactsItem.vue'
  import BusinessItem from './business/components/businessItem.vue'
  import ContractItem from './contract/components/contractItem.vue'
  import ReceivedItem from './receivables/components/receivedItem.vue'
  import ProductItem from './product/components/productItem.vue'
  import InvoiceItem from './invoice/components/invoiceItem.vue'

  export default {
    name: 'CrmSearch',
    components: {
      LeadsItem,
      CustomerItem,
      ContactsItem,
      BusinessItem,
      ContractItem,
      ReceivedItem,
      ProductItem,
      InvoiceItem
    },
    data() {
      return {
        crmType: null,
        poolId: null,

        keyword: '',
        timer: null,

        params: {
          page: 0,
          limit: 15,
          search: ''
        },
        listStatus: 'more',
        listData: [],
        showEmpty: false,

        apiMap: {
          leads: {
            func: GetLeadsList,
            type: 1,
            typeName: '线索',
            placeholder: '请输入线索名称/手机/电话',
          },
          customer: {
            func: GetCustomerList,
            type: 2,
            typeName: '客户',
            placeholder: '请输入客户名称/手机/电话'
          },
          contacts: {
            func: GetContactsList,
            type: 3,
            typeName: '联系人',
            placeholder: '请输入联系人姓名/手机/电话'
          },
          business: {
            func: GetBusinessLeadsList,
            type: 5,
            typeName: '商机',
            placeholder: '请输入商机名称'
          },
          contract: {
            func: GetContractList,
            type: 6,
            typeName: '合同',
            placeholder: '请输入客户名称/合同编号/合同名称'
          },
          receivables: {
            func: GetReceivablesList,
            type: 7,
            typeName: '回款',
            placeholder: '请输入客户名称/回款编号'
          },
          product: {
            func: GetProductList,
            type: 4,
            typeName: '产品',
            placeholder: '请输入产品名称'
          },
          pool: {
            func: GetPoolList,
            type: 8,
            typeName: '公海',
            placeholder: '请输入客户名称/手机/电话'
          },
          invoice: {
            func: GetInvoiceList,
            type: 18,
            typeName: '发票',
            placeholder: '请输入发票号码/客户名称/合同编号'
          }
        }
      }
    },
    computed: {
      apiObj() {
        return this.apiMap[this.crmType] || {}
      },
      searchTitle() {
        return this.apiObj.typeName || ''
      },
      placeholder() {
        return this.apiObj.placeholder || '请输入关键字'
      }
    },
    watch: {
      keyword(val) {
        // 禁止输入 emoji
        const regStr = /[\ud800-\udbff]|[\udc00-\udfff]/g;
        if (regStr.test(val)) {
          val = val.replace(regStr, '');
        }
        this.keyword = val
				
        this.params.page = 0
        if (this.timer) {
          clearTimeout(this.timer)
          this.timer = null
        }
        this.timer = setTimeout(() => {
          clearTimeout(this.timer)
          this.timer = null
          this.params.search = this.keyword
          this.getList()
        }, 800)
      },
    },
    onLoad(options) {
      this.crmType = options.type
      this.poolId = options.poolId
    },
    methods: {
      /**
       * 获取选项列表
       */
      getList() {
        this.params.page++

        this.listStatus = 'loading'
        if (this.crmType === 'pool') {
          this.params.poolId = this.poolId
        }

        this.apiObj.func({
					...this.params,
					type: this.apiObj.type
        }).then(res => {
          this.showEmpty = true
          if (this.params.page === 1) {
            this.listData = []
          }
          console.log(res.list)
          this.listData = this.listData.concat(res.list)
          this.listStatus = res.lastPage ? 'noMore' : 'more'
        }).catch(() => {
          this.listStatus = 'more'
        })
      },
			
      handleClear() {
        this.keyword = ''
      }
    }
  }
</script>

<style scoped lang="scss">
	.main-container {
		.search-box {
			background-color: white;
			padding: 10rpx 30rpx;
			@include left;
			
			.wk-search {
				font-size: 38rpx;
				color: $light;
			}
		
			.input-core {
				flex: 1;
				height: 76rpx;
				font-size: 28rpx;
				padding: 0 20rpx;
				display: block;
			}
		
			.delete-icon {
				width: 32rpx;
				height: 32rpx;
			}
		}
		
		.list-view {
			flex: 1;
			overflow: hidden;
			background-color: white;
			// padding: 0 34rpx;
			margin-top: 15rpx;

			.list-scroll {
				width: 100%;
				height: 100%;
				overflow: hidden;
				.cell {
					border-bottom: 1rpx solid $border-color;
					padding: 20rpx 0;
					.cell-title {
						font-size: 30rpx;
					}
					.cell-desc {
						font-size: 24rpx;
						color: $gray;
					}
				}
			}
		}
	}
</style>