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

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

  import InvoiceItem from './components/invoiceItem'
  import ListFilter from '../components/listFilter/index.vue'

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

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

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

      handleCrmSearch() {
        this.$Router.navigateTo({
          url: '/pages_crm/crmSearch',
          query: {
            type: 'invoice'
          }
        })
      }
    }
  }
</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>