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

<template>
  <view class="page-container">
    <scroll-view scroll-y class="form-content">
      <view class="form-card">
      <!-- School -->
      <view class="form-item">
        <view class="label-row">
            <text class="label">学校名称</text>
            <text class="tag-missing" v-if="!form.school">待完善</text>
        </view>
        <view class="input-box">
          <input type="text" v-model="form.school" placeholder="请填写" placeholder-class="ph-style" />
        </view>
      </view>
      
      <!-- Degree -->
      <view class="form-item">
        <view class="label-row">
            <text class="label">学历</text>
            <text class="tag-missing" v-if="!form.degree">待完善</text>
        </view>
        <view class="input-box" @tap="openPicker">
          <view class="date-picker-wrap">
            <text :class="['date-text', !form.degree ? 'is-empty' : '']">{{ form.degree || '请选择' }}</text>
          </view>
          <text class="arrow"></text>
        </view>
      </view>
      
      <!-- Major -->
      <view class="form-item">
        <view class="label-row">
            <text class="label">专业名称</text>
            <text class="tag-missing" v-if="!form.major">待完善</text>
        </view>
        <view class="input-box">
          <input type="text" v-model="form.major" placeholder="请填写" placeholder-class="ph-style" />
        </view>
      </view>
      
      <!-- Time -->
      <view class="form-item">
        <view class="label-row">
            <text class="label">在校时间</text>
            <text class="tag-missing" v-if="!form.startTime || !form.endTime">待完善</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>
      
      <!-- Exp -->
      <view class="form-item">
        <view class="label-row">
            <view>
                <text class="label">在校经历</text>
                <text class="optional">（选填）</text>
            </view>
        </view>
        <view class="textarea-box">
          <textarea v-model="form.desc" placeholder="请输入详细的在校经历或所获荣誉" placeholder-class="ph-style" :maxlength="500"></textarea>
        </view>
      </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 Picker Popup -->
    <view class="picker-popup" v-if="showPicker" @touchmove.stop.prevent>
      <view class="picker-mask" @tap.stop="closePicker"></view>
      <view class="picker-content">
        <view class="picker-header">
          <text class="btn-cancel" @tap.stop="closePicker">取消</text>
          <text class="title">学历</text>
          <text class="btn-confirm" @tap.stop="confirmPicker">确定</text>
        </view>
        <picker-view class="picker-view" :value="pickerValue" @change="onPickerChange" indicator-style="height: 50px;">
          <picker-view-column>
            <view class="picker-item" v-for="(item, index) in degreeOptions" :key="index">{{item}}</view>
          </picker-view-column>
          <picker-view-column>
            <view class="picker-item" v-for="(item, index) in typeOptions" :key="index">{{item}}</view>
          </picker-view-column>
        </picker-view>
      </view>
    </view>
    
    <!-- Custom Date Picker Popup -->
    <view class="picker-popup" v-if="showDatePicker" @touchmove.stop.prevent>
      <view class="picker-mask" @tap.stop="closeDatePicker"></view>
      <view class="picker-content">
        <view class="picker-header">
          <text class="btn-cancel" @tap.stop="closeDatePicker">取消</text>
          <text class="title">{{ datePickerType === 'start' ? '入学时间' : '毕业时间' }}</text>
          <text class="btn-confirm" @tap.stop="confirmDatePicker">确定</text>
        </view>
        <picker-view class="picker-view" :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>
      </view>
    </view>
  </view>
</template>

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

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