sj-miniprogram/pages/experience/experience.vue

<template>
  <step-layout 
    title="填写工作经历" 
    :showSkip="!isEditMode"
    @next="goNext" 
    @skip="goSkip">
    
    <view class="exp-list">
      
      <!-- Education Section -->
      <view class="section">
        <view class="section-header">
          <text class="section-title">教育经历</text>
          <view class="icon-plus" @tap="addEducation"></view>
        </view>
        <view class="item-list">
          <!-- Empty State -->
          <view class="empty-state" v-if="educationList.length === 0">
            <image src="/static/icons/empty-box.svg" class="empty-icon" mode="aspectFit"></image>
            <text class="empty-text">填写真实教育经历，展现您的学术背景</text>
          </view>
          
          <view class="item" v-for="(item, index) in educationList" :key="index" @tap="editEducation(index)">
            <view class="icon-close" @tap.stop="deleteEducation(index)"></view>
            <view class="item-content">
              <view class="title-row">
                <text class="item-title">{{ item.school }}</text>
              </view>
              <view class="item-desc">
                <text class="desc-text">{{ item.education || item.degree || '' }} {{ (item.education || item.degree) && item.educationType ? '·' : '' }} {{ item.educationType || '' }} {{ ((item.education || item.degree || item.educationType) && item.major) ? '·' : '' }} {{ item.major || '' }}</text>
                <text class="item-time" v-if="item.time || item.startTime">{{ item.startTime ? item.startTime + '—' + (item.endTime ? item.endTime : '至今') : item.time }}</text>
              </view>
            </view>
            <view class="arrow"></view>
          </view>
        </view>
      </view>

      <!-- Work Section -->
      <view class="section">
        <view class="section-header">
          <text class="section-title">工作经历</text>
          <view class="icon-plus" @tap="addWork"></view>
        </view>
        <view class="item-list">
          <view class="empty-state" v-if="workList.length === 0">
            <image src="/static/icons/empty-box.svg" class="empty-icon" mode="aspectFit"></image>
            <text class="empty-text">填写工作经历，展现您的职业轨迹</text>
          </view>

          <view class="item" v-for="(item, index) in workList" :key="index" @tap="editWork(index)">
            <view class="icon-close" @tap.stop="deleteWork(index)"></view>
            <view class="item-content">
              <view class="title-row">
                <text class="item-title">{{ item.company }}</text>
              </view>
              <view class="item-desc">
                <text class="desc-text">{{ item.positionName || item.position || '工作经历' }}</text>
                <text class="item-time" v-if="item.time || item.startTime">{{ item.startTime ? item.startTime + '—' + (item.endTime ? item.endTime : '至今') : item.time }}</text>
              </view>
            </view>
            <view class="arrow"></view>
          </view>
        </view>
      </view>

      <!-- Project Section -->
      <view class="section border-none">
        <view class="section-header">
          <text class="section-title">项目经历</text>
          <view class="icon-plus" @tap="addProject"></view>
        </view>
        <view class="item-list">
          <view class="empty-state" v-if="projectList.length === 0">
            <image src="/static/icons/empty-box.svg" class="empty-icon" mode="aspectFit"></image>
            <text class="empty-text">填写真实项目经历，突显您的实战能力</text>
          </view>

          <view class="item" v-for="(item, index) in projectList" :key="index" @tap="editProject(index)">
            <view class="icon-close" @tap.stop="deleteProject(index)"></view>
            <view class="item-content">
              <view class="title-row">
                <text class="item-title">{{ item.name }}</text>
              </view>
              <view class="item-desc">
                <text class="desc-text">{{ item.role || '项目经历' }}</text>
                <text class="item-time" v-if="item.time || item.startTime">{{ item.startTime ? item.startTime + '—' + (item.endTime ? item.endTime : '至今') : item.time }}</text>
              </view>
              <view class="item-detail">{{ item.desc }}</view>
            </view>
            <view class="arrow"></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="./experience.js"></script>

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