sj-miniprogram/pages/experience/position-select.vue

<template>
  <view class="position-select-page">
    <view class="search-header">
      <view class="search-box">
        <text class="icon-search"></text>
        <input type="text" v-model="searchQuery" placeholder="搜索职位名称" placeholder-style="color: #A0AABF;" />
      </view>
    </view>
    
    <view class="content-body" v-if="!searchQuery">
      <!-- Left side -->
      <scroll-view class="left-menu" scroll-y>
        <view 
          v-for="(item, index) in positionData" 
          :key="index"
          :class="['menu-item', activeIndex === index ? 'active' : '']"
          @tap="selectMenu(index)"
        >
          <text class="menu-name">{{ item.name }}</text>
          <view class="active-indicator" v-if="activeIndex === index"></view>
        </view>
      </scroll-view>
      
      <!-- Right side -->
      <scroll-view class="right-content" scroll-y :scroll-into-view="scrollIntoId" scroll-with-animation @scroll="onRightScroll">
        <!-- 一级分类 Wrapper -->
        <view class="category-wrapper" v-for="(item, index) in positionData" :key="'wrapper-'+index" :id="'category-' + index">
          
          <!-- 二级分类 Section -->
          <view class="category-section" v-for="(sub, sIdx) in item.sections" :key="'sub-'+sIdx">
            <view class="section-title">{{ sub.name }}</view>
            <view class="tags-grid">
              <view 
                :class="['tag-item', pos === currentSelected ? 'selected' : '']" 
                v-for="(pos, pIdx) in sub.children" 
                :key="pIdx" 
                @tap="selectPosition(pos)"
              >
                {{ pos }}
              </view>
            </view>
          </view>
          
        </view>
      </scroll-view>
    </view>
    
    <scroll-view class="search-results" scroll-y v-else>
      <view class="result-list" v-if="searchResults.length > 0">
        <view :class="['result-item', pos === currentSelected ? 'selected' : '']" v-for="(pos, index) in searchResults" :key="index" @tap="selectPosition(pos)">
          {{ pos }}
        </view>
      </view>
      <view class="empty-state" v-else>
        <text class="empty-text">未找到相关职位</text>
      </view>
    </scroll-view>
  </view>
</template>

<script src="./position-select.js"></script>

<style lang="scss" scoped>
@import './position-select.scss';
</style>