bjquanjiang
/
DigitalScholl


			
				
					
						
						
							
							<template>
  <view class="page">
    <!-- 顶部搜索栏 -->
    <l-banner v-model="searchText" placeholder="搜索项目名/项目值" type="search" noSearchButton fill fixed />

    <!-- 选单列表 -->
    <view class="layer-list">
      <view v-for="(item, index) of list" @click="itemClick(item)" :key="index" class="layer-item">
        <view v-for="fieldItem of fieldList" :key="fieldItem.name">
          <text class="text-black label">{{ fieldItem.label || '(未命名标题)' }}：</text>
          <text>{{ item[fieldItem.name] }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      searchText: '',

      sourceList: [],
      fieldList: []
    }
  },

  // 按下返回键，移除监听
  onBackPress() {
    this.OFF('select-layer')
  },

  // 页面卸载，移除监听
  onUnload() {
    this.OFF('select-layer')
  },

  async onLoad() {
    await this.init()
  },

  methods: {
    // 页面初始化
    async init() {
      this.LOADING('加载数据中…')
      const { source, layerData } = this.GET_PARAM()

      this.sourceList = source
      this.fieldList = layerData

      this.$nextTick(() => {
        this.HIDE_LOADING()
      })
    },

    // 点击选择某一项
    itemClick(item) {
      this.EMIT('select-layer', item)
      this.NAV_BACK()
    }
  },

  computed: {
    // 根据搜索值按需渲染
    list() {
      if (!this.searchText) {
        return this.sourceList
      }

      return this.sourceList.filter(item => this.fieldList.some(t => (item[t.name] || '').includes(this.searchText)))
    }
  }
}
</script>

<style lang="less" scoped>
.layer-item {
  padding: 20rpx 25rpx;
  border-bottom: 1rpx solid #ddd;
  background: #ffffff;
  color: #8f8f94;

  .label {
    white-space: nowrap;
  }

  &:first-child {
    border-top: 1rpx solid #ddd;
  }
}
</style>

<style>
page {
  padding-top: 100rpx;
}
</style>