crm-mobile/pages_crm/customerAndContacts/index.vue

<template>
  <view v-if="!refreshPage" class="uni-app">
    <view class="status-bar" />
    <view class="main-container">
      <wk-nav-bar
        v-if="type || !showTabbar"
        :title="navList[navIndex].label">
        <button
          v-if="activeCom === 'CustomerList'"
          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>
			
      <list-tab-header
        v-else
        v-model="navIndex"
        :nav-list="navList"
        :placeholder="placeholderText"
        @search="handleCrmSearch">
        <button
          v-if="activeCom === 'CustomerList'"
          class="button white-btn"
          @click="handleToStatic">
          <text class="ft ft-statistics" />
        </button>
      </list-tab-header>

      <!-- #ifdef MP-WEIXIN -->
      <view v-if="type" class="search-box linear-gradient">
        <view class="box" @click="handleCrmSearch">
          <text class="wk wk-search" />
          <text class="wk-placeholder">
            {{ placeholderText }}
          </text>
        </view>
      </view>
      <!-- #endif -->	
			
      <view class="list-view">
        <!-- #ifdef MP-WEIXIN -->
        <customer-list v-if="activeCom === 'CustomerList'" />
        <contacts-list v-else-if="activeCom === 'ContactsList'" />
        <!-- #endif -->
        <!-- #ifndef MP-WEIXIN -->
        <components :is="activeCom" />
        <!-- #endif -->
      </view>
    </view>
		
    <wk-tabbar
      v-if="!type && showTabbar"
      v-model="footerIndex"
      :list="mixinFooterNav" />
  </view>
</template>

<script>
  import ListTabHeader from '@/components/base/list-tab-header.vue'
  import CustomerList from './customerList.vue'
  import ContactsList from './contactsList.vue'
  import tabbar from '@/mixins/tabbar.js'
	
  export default {
    name: 'CustomerIndex',
    components: {
      ListTabHeader,
      CustomerList,
      ContactsList
    },
    mixins: [tabbar],
    data() {
      return {
        type: null,
				
        navIndex: 0,
        navList: [
          {label: '客户', com: 'CustomerList', noCheck: true, action: 'crm.customer.index'},
          {label: '联系人', com: 'ContactsList', noCheck: true, action: 'crm.contacts.index'}
        ],
				
        refreshPage: false	// 刷新页面标志
      }
    },
    computed: {
      activeCom() {
        const index = this.navIndex || 0
        const auth = this.navList[index].action
        if (!this.$auth(auth)) {
          this.$toast('权限不足')
          return ''
        }
        return this.navList[index].com
      },
      placeholderText() {
        return this.activeCom === 'CustomerList' ? '请输入客户名称/手机/电话' : '请输入联系人姓名/手机/电话'
      }
    },
    onLoad(opt) {
      this.type = opt.type || null
      this.navIndex = Number(opt.index) || 0
    },
    onShow() {
      if (this.refreshPage) {
        this.$nextTick(function() {
          this.refreshPage = false
        })
      }
    },
    methods: {
      handleCrmSearch() {
        const crmType = this.activeCom === 'CustomerList' ? 'customer' : 'contacts'
        this.$Router.navigateTo({
          url: '/pages_crm/crmSearch',
          query: {
            type: crmType
          }
        })
      },
			
      handleToStatic() {
        this.$Router.navigateTo('/pages_crm/statistics/customer')
      }
    }
  }
</script>

<style scoped lang="scss">
	.ft-statistics {
		font-size: 34rpx;
	}
	
	.main-container {
		.white-btn {
			.wk-search {
				font-weight: 400;
				font-size: 42rpx;
			}
		}
		
		.search-box {
			width: 100%;
			padding: 10rpx 32rpx 20rpx;
			
			.box {
				width: 100%;
				height: 62rpx;
				color: #BBBBBB;
				background-color: white;
				border-radius: 12rpx;
				padding: 0 20rpx;
				@include left;
				
				.wk-search {
					margin-right: 15rpx;
				}
			}
		}
		
		.list-view {
			flex: 1;
			overflow-y: hidden;
		}
	}
</style>