crm-mobile/pages_crm/contract/index.vue

<template>
  <view class="uni-app">
    <view class="status-bar" />
    <view class="main-container">
      <wk-nav-bar title="合同" :show-left="!showTabbar">
        <button
          class="button white-btn"
          @click="handleToStatic">
          <text class="ft ft-statistics" />
        </button>
        <!-- #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="contract"
            @filter="handleFilter" />

          <wk-scroll-view
            v-if="!refreshPage"
            :status="listStatus"
            class="list-scroll"
            @refresh="getList({}, true)"
            @loadmore="getList()">
            <contract-item
              v-for="item in listData"
              :key="item.contractId"
              :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/contract'

  import ContractItem from './components/contractItem'
  import ListFilter from '../components/listFilter/index.vue'

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

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

        refreshPage: false	// 刷新页面标志
      }
    },
    computed: {
      showAddBtn() {
        return this.$auth('crm.contract.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/contract/create',
          query: {
            type: 'contract'
          }
        })
      },

      handleCrmSearch() {
        this.$Router.navigateTo({
          url: '/pages_crm/crmSearch',
          query: {
            type: 'contract'
          }
        })
      },

      handleToStatic() {
        this.$Router.navigateTo('/pages_crm/statistics/contract')
      }
    }
  }
</script>

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

.ft-statistics {
  font-size: 34rpx;
}

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