crm-mobile/components/base/list-tab-header.vue

<template>
  <view class="list-tab-header linear-gradient">
    <view class="container">
      <view class="nav">
        <text
          v-for="(item, i) in list"
          :key="i"
          :class="{active: value === i}"
          class="nav-item"
          @click="handleClick(i, item)">
          {{ item.label }}
        </text>
        <!-- #ifdef MP-WEIXIN -->
        <slot />
        <!-- #endif -->
      </view>
      <!-- #ifndef MP-WEIXIN -->
      <slot />
      <view v-if="showSearch" class="header-control">
        <button class="search-btn" @click="handleSearch">
          <text class="icon wk wk-search" />
        </button>
      </view>
      <!-- #endif -->
    </view>
		
    <!-- #ifdef MP-WEIXIN -->
    <view v-if="showSearch" class="search-box">
      <view class="box" @click="handleSearch">
        <text class="wk wk-search" />
        <text class="wk-placeholder">
          {{ placeholder }}
        </text>
      </view>
    </view>
    <!-- #endif -->

    <uni-popup ref="popup" :mask-click="false" type="dialog">
      <wk-popup-expiration />
    </uni-popup>
  </view>
</template>

<script>
  import { mapGetters } from 'vuex'
	
  export default {
    name: 'ListTabHeader',
    props: {
      navList: {
        type: Array,
        default: () => []
      },
      value: {
        type: Number,
        default: 0
      },
      showSearch: {
        type: Boolean,
        default: true
      },
      placeholder: {
        type: String,
        default: ''
      },
      hasBorder: {
        type: Boolean,
        default: true
      }
    },
    data() {
      return {}
    },
    computed: {
			...mapGetters({
				showExpiration: 'user/showExpiration'
			}),
			list() {
				return this.navList.filter(o => {
					if (this.$isEmpty(o.action) || o.noCheck) return true
					return this.$auth(o.action)
				})
			}
    },
    watch: {
      list: {
        handler() {
          if (this.list.length === 0) return
          if (this.value > this.list.length - 1) {
            this.handleClick(0, this.list[0])
          }
        },
        deep: true
      },
      showExpiration: {
        handler() {
          if (this.showExpiration) {
            this.$nextTick(function() {
              this.$refs.popup.open()
            })
          }
        },
        immediate: true,
        deep: true
      }
    },
    methods: {
      handleClick(index, item) {
        this.$emit('input', index)
        this.$emit('change', {
          index: index,
          item: item
        })
      },
      handleSearch() {
        this.$emit('search')
      }
    }
  }
</script>

<style scoped lang="scss">
	.list-tab-header {
		width: 100%;
		padding: 0 34rpx;

		.container {
			width: 100%;
			color: white;
			@include left;

			.nav {
				flex: 1;
				height: 96rpx;
				font-size: 32rpx;
				@include left;

				.nav-item {
					position: relative;
					line-height: 96rpx;
					margin-right: 36rpx;

					&.active {
						font-weight: 500;
						font-size: 42rpx;
					}
				}
			}

			.header-control {
				@include right;
				.search-btn {
					.icon {
						font-weight: 400;
						font-size: 42rpx;
					}
				}
			}
		}
		
		.search-box {
			width: 100%;
			padding-top: 10rpx;
			padding-bottom: 20rpx;
			
			.box {
				width: 100%;
				height: 62rpx;
				color: #BBBBBB;
				background-color: white;
				border-radius: 12rpx;
				padding: 0 20rpx;
				@include left;
				
				.wk-search {
					margin-right: 15rpx;
				}
			}
		}
	}
</style>