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

<template>
  <view class="page-container">
    <scroll-view scroll-y class="form-content">
      <view class="form-card">
      <!-- Project Name -->
      <view class="form-item">
        <view class="label-row">
            <text class="label">项目名称</text>
            <text class="tag-missing" v-if="!form.name">待完善</text>
        </view>
        <view class="input-box">
          <input type="text" v-model="form.name" placeholder="请输入" placeholder-class="ph-style" />
        </view>
      </view>
      
      <!-- Role -->
      <view class="form-item">
        <view class="label-row">
            <text class="label">担任角色</text>
            <text class="tag-missing" v-if="!form.role">待完善</text>
        </view>
        <view class="input-box">
          <input type="text" v-model="form.role" 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">待完善</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>
      
      <!-- Project Desc -->
      <view class="form-item">
        <view class="label-row">
            <text class="label">项目描述</text>
            <text class="tag-missing" v-if="!form.desc">待完善</text>
        </view>
        <view class="textarea-box">
          <textarea v-model="form.desc" placeholder="请输入项目具体内容和职责" placeholder-class="ph-style" :maxlength="500"></textarea>
        </view>
      </view>
      
      <!-- Project Performance -->
      <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.performance" placeholder="请输入您的项目产出或收益" placeholder-class="ph-style" :maxlength="500"></textarea>
        </view>
      </view>

      <!-- Project Link -->
      <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.link" placeholder="请输入" placeholder-class="ph-style" />
        </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 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-project.js"></script>

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