sj-miniprogram/pages/intention/intention.vue

<template>
  <step-layout 
    title="填写工作意向" 
    nextText="提交"
    :showSkip="!isEditMode"
    subtitle="我们会妥善保护你的隐私，后续你也可以在设置中将简历隐藏"
    @next="onSubmit" 
    @skip="onSkip">
    
    <view class="intention-form">
      
      <!-- Job Intentions -->
      <view class="form-section">
        <view class="section-title">求职意向</view>
        <view class="tag-list">
          <view 
            v-for="(item, index) in intentions" 
            :key="index"
            :class="['tag-item', item.selected ? 'active' : '']"
            @tap="toggleIntention(index)"
          >
            {{ item.name }}
          </view>
        </view>
      </view>

      <!-- Intern Duration -->
      <view class="form-section" v-if="isIntern">
        <view class="section-title">实习时长</view>
        <view class="input-box" @tap="selectInternDuration">
          <text :class="['date-text', !internDuration ? 'is-empty' : '']">{{ internDurationLabel || '请选择' }}</text>
          <text class="arrow"></text>
        </view>
      </view>

      <!-- Arrival Time -->
      <view class="form-section">
        <view class="section-title">到岗时间</view>
        <view class="input-box" @tap="selectTime">
          <text :class="['date-text', !arrivalTime ? 'is-empty' : '']">{{ arrivalTimeLabel || '1周内' }}</text>
          <text class="arrow"></text>
        </view>
      </view>

      <!-- Job Types -->
      <view class="form-section">
        <view class="section-title">求职类型<text class="sub">（多选）</text></view>
        <view class="tag-list cols-3">
          <view 
            v-for="(type, index) in jobTypes" 
            :key="index"
            :class="['tag-item', type.selected ? 'active' : '']"
            @tap="toggleType(index)"
          >
            {{ type.name }}
          </view>
        </view>
      </view>

      <!-- Target Companies -->
      <view class="form-section list-section">
        <view class="item-header">
          <text class="section-title">意向公司</text>
          <view class="icon-plus" @tap="addCompany"></view>
        </view>
        
        <view class="item-list">
          <!-- Empty State -->
          <view class="empty-state" v-if="targetCompanies.length === 0">
            <image src="/static/icons/empty-box.svg" class="empty-icon" mode="aspectFit"></image>
            <text class="empty-text">添加意向公司，为您精准推荐匹配岗位</text>
          </view>

          <!-- Company Items -->
          <view class="item" v-for="(comp, index) in targetCompanies" :key="index">
            <view class="icon-close" @tap.stop="deleteCompany(index)"></view>
            <view class="item-content">
              <view class="title-row">
                <text class="item-title">{{ comp.name }}</text>
              </view>
            </view>
          </view>
        </view>
      </view>

    </view>
    
    <!-- Custom Modal for Delete Confirmation -->
    <view class="custom-modal" :class="{ 'is-show': showModal }">
      <view class="modal-mask" @tap="closeModal"></view>
      <view class="modal-content">
        <view class="modal-title">提示</view>
        <view class="modal-body">{{ modalContent }}</view>
        <view class="modal-footer">
          <view class="btn-cancel" @tap="closeModal">取消</view>
          <view class="btn-confirm" @tap="confirmDelete">确定</view>
        </view>
      </view>
    </view>
    
  </step-layout>
</template>

<script src="./intention.js"></script>

<style lang="scss" scoped>
@import './intention.scss';
</style>