crm-mobile/pages_crm/customerAndContacts/customerList.vue

<template>
  <view class="list-wrapper">
    <list-filter
      crm-type="customer"
      @filter="handleFilter" />

    <wk-scroll-view
      :status="listStatus"
      class="list-scroll"
      @refresh="getList({}, true)"
      @loadmore="getList()">
      <customer-item
        v-for="item in listData"
        :key="item.customerId"
        :item-data="item" />
    </wk-scroll-view>

    <wk-drag-button
      v-if="showAddBtn"
      @click="handleAdd">
      <view class="wk-drag-btn">
        <text class="wk wk-plus icon" />
      </view>
    </wk-drag-button>
  </view>
</template>

<script>
  import {
    GetList
  } from 'API/crm/customer'

  import CustomerItem from '../customer/components/customerItem'
  import ListFilter from '../components/listFilter/index.vue'

  import mainListMixins from '../../mixins/mainList.js'
  import { deepCopy } from '@/utils/lib.js'

  export default {
    name: 'CustomerList',
    components: {
      CustomerItem,
      ListFilter
    },
    mixins: [mainListMixins],
    data() {
      return {
        GetListFn: GetList, // 获取列表数据接口
        listType: 'crm_customer',

        sortOptions: [ // 排序规则选项
          {label: '客户名称正序', order: 2, field: 'customerName'},
          {label: '客户名称倒序', order: 1, field: 'customerName'},
          {label: '创建时间正序', order: 2, field: 'createTime'},
          {label: '创建时间倒序', order: 1, field: 'createTime'},
          {label: '最后跟进时间正序', order: 2, field: 'lastTime'},
          {label: '最后跟进时间倒序', order: 1, field: 'lastTime'},
        ],

        dragWidth: 0
      }
    },
    computed: {
      showAddBtn() {
        return this.$auth('crm.customer.save')
      }
    },
    methods: {
      handleFilter(opt) {
        this.listParams = {
          page: 0,
          limit: 15
        }
        this.getList(opt, true)
      },

      handleAdd() {
        console.log('add click')
        this.$Router.navigateTo({
          url: '/pages_crm/customer/create'
        })
      }
    }
  }
</script>

<style scoped lang="scss">
	.list-wrapper {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		overflow: hidden;

		.list-scroll {
			flex: 1;
			overflow: hidden;
		}
	}
</style>