crm-mobile/pages_crm/leads/index.vue

<template>
  <view class="uni-app">
    <view class="status-bar" />
    <view class="main-container">
      <wk-nav-bar title="线索" :show-left="!showTabbar">
        <!-- #ifndef MP-WEIXIN -->
        <button class="button white-btn" @click="handleCrmSearch">
          <text class="wk wk-search" />
        </button>
        <!-- #endif -->
      </wk-nav-bar>

      <!-- #ifdef MP-WEIXIN -->
      <view class="search-box linear-gradient">
        <view class="box" @click="handleCrmSearch">
          <text class="wk wk-search" />
          <text class="wk-placeholder">
            请输入线索名称/手机/电话
          </text>
        </view>
      </view>
      <!-- #endif -->

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

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

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

    <wk-tabbar
      v-if="showTabbar"
      v-model="footerIndex"
      :list="mixinFooterNav" />
  </view>
</template>

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

  import LeadsItem from './components/leadsItem.vue'
  import ListFilter from '../components/listFilter/index.vue'

  import tabbar from '@/mixins/tabbar.js'
  import mainListMixins from '@/mixins/mainList.js'

  export default {
    name: 'LeadsIndex',
    components: {
      LeadsItem,
      ListFilter
    },
    mixins: [tabbar, mainListMixins],
    data() {
      return {
        navIndex: 0,
        navList: [
          {label: '线索', com: 'CustomerList', action: 'crm.leads.read'}
        ],

        GetListFn: GetList, // 获取列表数据接口
        listType: 'crm_leads',

        refreshPage: false	// 刷新页面标志
      }
    },
    computed: {
      showAddBtn() {
        return this.$auth('crm.leads.save')
      }
    },
    onShow() {
      if (this.refreshPage) {
        this.$nextTick(function() {
          this.refreshPage = false
          this.getList({}, true)
        })
      }
    },
    methods: {
      handleFilter(opt) {
        this.listParams = {
          page: 0,
          limit: 15
        }
        this.getList(opt, true)
      },
      handleAdd() {
        this.$Router.navigateTo({
          url: '/pages_crm/leads/create'
        })
      },

      handleCrmSearch() {
        this.$Router.navigateTo({
          url: '/pages_crm/crmSearch',
          query: {
            type: 'leads'
          }
        })
      }
    }
  }
</script>

<style scoped lang="scss">
	@import '../style/list.scss';

	.main-container {
		.list-view {
			flex: 1;
			overflow-y: hidden;

			.list-wrapper {
				width: 100%;
				height: 100%;
				display: flex;
				flex-direction: column;
				overflow: hidden;

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