crm-mobile/pages_crm/seas/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="pool"
            @filter="handleFilter" />

          <wk-scroll-view
            v-if="!refreshPage"
            :status="listStatus"
            class="list-scroll"
            @refresh="getList({}, true)"
            @loadmore="getList()">
            <customer-item
              v-for="item in listData"
              :key="item.customerId"
              :item-data="item"
              :pool-id="filterData.poolId"
              is-seas />
          </wk-scroll-view>
        </view>
      </view>
    </view>

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

<script>
  import {PoolList} from 'API/crm/pool'

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

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

  export default {
    name: 'SeasIndex',
    components: {
      CustomerItem,
      ListFilter
    },
    mixins: [tabbar, mainListMixins],
    data() {
      return {
        GetListFn: PoolList, // 获取列表数据接口
        listType: 'crm_pool',
        filterData: {
          poolId: null
        },

        refreshPage: false	// 刷新页面标志
      }
    },
    onShow() {
      console.log('show ref', this.refreshPage)
      if (this.refreshPage) {
        this.$nextTick(function() {
          this.refreshPage = false
          this.getList({}, true)
        })
      }
    },
    methods: {
      /**
       * 拦截请求
       * @return {Boolean}
       */
      beforeGetList(params) {
        // 没有公海poolId参数，禁止请求列表
        return Boolean(params.poolId)
      },

      handleFilter(opt) {
        this.listParams = {
          page: 0,
          limit: 15
        }
        this.getList(opt, true)
      },

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

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

	.main-container {
		overflow-y: hidden;

		.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>