crm-mobile/components/wk-base-filter/wk-base-filter.vue

<template>
  <view class="wk-base-filter">
    <view class="menu">
      <template v-for="(tab, index) in copyTabs">
        <view
          :key="index"
          class="menu-item"
          @click="handleOpenFilter(index)">
          <text class="text">
            {{ tab.tabLabel }}
          </text>
          <text class="icon" />
          <!--:class="{ active: tab.type === 'filter' && !$isEmpty(tab.value) }" -->
        </view>
        <view v-if="index < copyTabs.length - 1" :key="index | filterKey" class="line" />
      </template>
    </view>
		
    <uni-popup
      ref="filterPopup"
      radius="20rpx 20rpx 0 0"
      type="bottom">
      <view class="popup">
        <view class="popup-header">
          <text class="wk wk-close icon" @click="handleCloseFilter" />
          <view class="wk-tabs">
            <view
              v-for="(tab, index) in copyTabs"
              :key="index"
              :class="{active: tabIndex === index }"
              class="wk-tab-item"
              @click="handleToggleTabs(index)">
              {{ tab.label }}
            </view>
          </view>
        </view>
				
        <scroll-view
          :style="{maxHeight: maxHeight + 'px'}"
          scroll-y
          class="popup-content">
          <view class="options-group">
            <view
              v-for="(item, index) in popupOptions"
              :key="index"
              :class="{active: index === activeOptionIndex}"
              class="options-group-item"
              @click="handleOptionClick(index, item)">
              <text class="text">
                {{ item.label }}
              </text>
              <text v-if="item.showMoreIcon" class="wk wk-arrow-right icon" />
              <text v-else-if="index === activeOptionIndex" class="wk wk-check icon" />
            </view>
          </view>
        </scroll-view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
  import { deepCopy } from '@/utils/lib.js'
	
  export default {
    name: 'WkBaseFilter',
    filters: {
      filterKey(key) {
        return 'empty_' + key
      }
    },
    props: {
      tabs: {
        type: Array,
        required: true
      }
    },
    data() {
      return {
        maxHeight: 0,
				
        tabIndex: null,
        popupOptions: [],
        activeOptionIndex: null,
				
        copyTabs: []
      }
    },
    watch: {
      tabs: {
        handler(val) {
          this.initCom()
        },
        deep: true
      }
    },
    mounted() {
      this.initCom()
    },
    methods: {
      initCom() {
        const sysInfo = uni.getSystemInfoSync()
        this.maxHeight = sysInfo.windowHeight * 0.75
        // 编译成微信小程序时直接修改 tabs 会导致无法取 tabLabel 值
        this.copyTabs = deepCopy(this.tabs).map(tab => {
          let tabLabel = tab.label
          if (!this.$isEmpty(tab.value)) {
            const findRes = tab.options.find(o => o.value == tab.value)
            if (findRes) {
              tabLabel = findRes.label
            }
          }
          tab.tabLabel = tabLabel
          return tab
          // this.$set(tab, 'tabLabel', tabLabel)
        })
        // console.log('tabs', this.tabs, this.copyTabs)
      },
      handleOpenFilter(index) {
        this.handleToggleTabs(index)
        this.$refs.filterPopup.open()
      },
			
      handleCloseFilter() {
        this.$refs.filterPopup.close()
        this.tabIndex = null
        this.clearOptionsData()
      },
			
      handleToggleTabs(index) {
        const tab = this.copyTabs[index]
        this.clearOptionsData()
        this.tabIndex = index
        this.popupOptions = tab.options
        this.activeOptionIndex = tab.valueData
      },
			
      handleOptionClick(index, option) {
        this.activeOptionIndex = index
        const tabItem = this.copyTabs[this.tabIndex]
				
        tabItem.tabLabel = option.label
        tabItem.value = option.value
        tabItem.valueData = index
        this.$set(this.copyTabs, this.tabIndex, tabItem)
				
        if (option.showMoreIcon) {
          const that = this
          const callback = () => that.handleCloseFilter()
          this.$emit('filter', tabItem, this.tabIndex, this.copyTabs, callback)
        } else {
          this.$emit('filter', tabItem, this.tabIndex, this.copyTabs)
          this.handleCloseFilter()
        }
      },
			
      setDefault(data) {
        this.copyTabs.forEach(tab => {
          if (
            data.hasOwnProperty(tab.field) &&
            !this.$isEmpty(data[tab.field])
          ) {
            const findIndex = tab.options.findIndex(o => o.value === data[tab.field])
            if (findIndex !== -1) {
              this.$set(tab, 'valueData', findIndex)
              this.$set(tab, 'value', data[tab.field])
              this.$set(tab, 'tabLabel', tab.options[findIndex].label)
            }
          }
        })
      },
			
      clearOptionsData() {
        this.popupOptions = null
        this.activeOptionIndex = null
        this.isBusinessStauts = false
      }
    }
  }
</script>

<style scoped lang="scss">
	.wk-tabs {
		.wk-tab-item {
			padding: 15rpx 0;
			// &::after {
			// 	width: 50%;
			// }
			&.active {
				color: $theme-color;
			}
		}
	}

	.wk-base-filter {
		.menu {
			width: 100%;
			height: 80rpx;
			@include center;
			
			.menu-item {
				flex: 1;
				font-size: $wk-font-base;
				color: $gray;
				padding: 0 10rpx;
				overflow: hidden;
				@include center;
				
				.text {
					max-width: calc(100% - 40rpx);
					@include ellipsis;
				}
				
				.icon {
					width: 0;
					height: 0;
					border-left: 10rpx solid transparent;
					border-right: 10rpx solid transparent;
					border-top: 10rpx solid $gray;
					margin-left: 10rpx;
					&.active {
						border-top: 10rpx solid $theme-color;
					}
				}
			}
			
			.line {
				width: 1rpx;
				height: 40rpx;
				margin: 0 auto;
				background-color: #CBCBCB;
			}
		}
		
		.popup {
			padding: 10rpx 36rpx 20rpx 36rpx;
			
			.popup-header {
				position: relative;
				@include center;
				.text {
					font-size: $wk-font-large;
				}
				.icon {
					position: absolute;
					left: -20rpx;
					top: 50%;
					transform: translateY(-50%);
					color: $gray;
					font-size: $wk-font-medium;
					padding: 20rpx;
				}
			}
			
			.popup-content {
				width: 100%;
				min-height: 700rpx;
				margin-top: 20rpx;
				overflow: hidden;
				display: flex;
				align-items: flex-start;
				justify-content: flex-start;
				flex-direction: column;
				
				.options-group {
					width: 100%;
					.options-group-item {
						color: $dark;
						font-size: $wk-font-base;
						border-bottom: 1rpx solid $border-color;
						padding: 22rpx 0;
						@include left;
						
						.text {
							flex: 1;
						}
						.icon {
							font-size: $wk-font-medium;
							color: inherit;
							line-height: 1;
						}
						
						&.active {
							color: $theme-color;
						}
					}
				}
			}
		}
	}
</style>