sj-miniprogram/pages/experience/add-work.vue

<template>
  <view class="page-container">
    <scroll-view scroll-y class="form-content">
      <view class="form-card">
      <!-- Company Name -->
      <view class="form-item">
        <view class="label-row">
            <text class="label">公司名称</text>
            <text class="tag-missing" v-if="!form.company">待完善</text>
        </view>
        <view class="input-box">
          <input type="text" v-model="form.company" placeholder="请填写" placeholder-class="ph-style" />
        </view>
      </view>
      
      <!-- Industry -->
      <view class="form-item">
        <view class="label-row"><text class="label">公司行业</text></view>
        <view class="input-box" @tap="openIndustrySelector">
          <view class="date-picker-wrap">
            <text :class="['date-text', !form.industry ? 'is-empty' : '']">{{ form.industry || '请选择' }}</text>
          </view>
          <text class="arrow"></text>
        </view>
      </view>

        <!-- Time -->
      <view class="form-item">
        <view class="label-row"><text class="label">在职时间</text></view>
        <view class="input-box">
          <view class="date-picker-wrap" style="justify-content: space-between; padding: 0 10rpx;">
             <view @tap="openDatePicker('start')">
                <text :class="['date-text', !form.startTime ? 'is-empty' : '']">{{ form.startTime || '入职时间' }}</text>
             </view>
             <text class="date-separator">—</text>
             <view @tap="openDatePicker('end')">
                <text :class="['date-text', !form.endTime ? 'is-empty' : '']">{{ form.endTime || '至今' }}</text>
             </view>
          </view>
        </view>
      </view>
      
      <!-- Position Name -->
      <view class="form-item">
        <view class="label-row"><text class="label">职位名称</text></view>
        <view class="input-box" @tap="openPositionSelector">
          <view class="date-picker-wrap">
            <text :class="['date-text', !form.positionName ? 'is-empty' : '']">{{ form.positionName || '请选择' }}</text>
          </view>
          <text class="arrow"></text>
        </view>
      </view>

      <!-- Department -->
      <view class="form-item">
        <view class="label-row">
            <view>
                <text class="label">所属部门</text>
                <text class="optional">（选填）</text>
            </view>
        </view>
        <view class="input-box">
          <input type="text" v-model="form.department" placeholder="请填写" placeholder-class="ph-style" />
        </view>
      </view>

      <!-- Work Content -->
      <view class="form-item">
        <view class="label-row"><text class="label">工作内容</text></view>
        <view class="textarea-box">
          <textarea v-model="form.content" placeholder="请填写您的主要工作职责或业绩" placeholder-class="ph-style" :maxlength="500"></textarea>
        </view>
      </view>

      <!-- Switches -->
      <view class="switch-row" style="margin-top: 20rpx;">
          <text class="s-label">该经历为实习</text>
          <switch :checked="form.isIntern" color="#1F6CFF" style="transform: scale(0.8);" @change="e => form.isIntern = e.detail.value" />
      </view>
      
      <view class="switch-row">
          <text class="s-label">屏蔽该公司</text>
          <switch :checked="form.isHidden" color="#1F6CFF" style="transform: scale(0.8);" @change="e => form.isHidden = e.detail.value" />
      </view>
      </view>
    </scroll-view>
    
    <view class="footer-btn-area">
      <button class="btn-save" :class="{'is-disabled': !isComplete}" @tap="saveForm">
        <text v-if="isEdit">修改</text>
        <text v-else>保存</text>
      </button>
    </view>
  

    <!-- Custom Date Picker Popup (Two-columns with Title Active State) -->
    <view class="picker-popup" v-if="showDatePicker" @touchmove.stop.prevent>
      <view class="picker-mask" @tap.stop="closeDatePicker"></view>
      <view class="picker-content">
        <!-- Range Tab Header -->
        <view class="range-tabs-header">
          <view :class="['tab-item', datePickerType === 'start' ? 'active' : '']" @tap="switchDateTab('start')">
            <text class="tab-label">入职时间</text>
            <text class="tab-val">{{ tempStartTime || '请选择' }}</text>
          </view>
          <view :class="['tab-item', datePickerType === 'end' ? 'active' : '']" @tap="switchDateTab('end')">
            <text class="tab-label">离职时间</text>
            <text class="tab-val">{{ tempEndTime || '至今' }}</text>
          </view>
        </view>
        
        <picker-view class="picker-view" style="height: 340rpx;" :value="datePickerValue" @change="onDatePickerChange" indicator-style="height: 50px;">
          <picker-view-column>
            <view class="picker-item" v-for="(item, index) in yearOptions" :key="index">{{item}}</view>
          </picker-view-column>
          <picker-view-column>
            <view class="picker-item" v-for="(item, index) in monthOptions" :key="index">{{item}}</view>
          </picker-view-column>
        </picker-view>

        <!-- Bottom Confirm Button -->
        <view class="picker-bottom-btn-area">
          <text class="btn-bottom" @tap.stop="confirmDatePicker">确定</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script src="./add-work.js"></script>

<style lang="scss" scoped>
@import './add-work.scss';
</style>