pet-system-fulfiller-app/pages/recruit/auth.vue

<template>
  <view class="auth-container">
    <!-- 顶部提示 -->
    <view class="top-tip">请确保身份信息的准确，以免影响后续履约费用结算。</view>

    <!-- 表单信息 -->
    <view class="form-card">
      <!-- 证件类型 -->
      <view class="form-item">
        <text class="label">证件类型</text>
        <view class="read-only-text">居民身份证</view>
      </view>

      <!-- 真实姓名 -->
      <view class="form-item">
        <text class="label">真实姓名</text>
        <view class="gray-input-box">
          <input class="input-area" type="text" v-model="formData.name" placeholder="证件姓名" placeholder-class="input-placeholder" />
        </view>
      </view>

      <!-- 证件号码 -->
      <view class="form-item">
        <text class="label">证件号码</text>
        <view class="gray-input-box">
          <input class="input-area" type="idcard" v-model="formData.idNumber" placeholder="身份证号" placeholder-class="input-placeholder" />
        </view>
      </view>

      <!-- 有效日期 -->
      <view class="form-item">
        <text class="label">有效日期</text>
        <view class="gray-input-box" @click="openPicker">
          <text class="input-area" :class="{'input-placeholder': !formData.expiryDate}">
            {{ formData.expiryDate || '选择有效结束期限' }}
          </text>
          <!-- 箭头SVG -->
           <svg class="arrow-right" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg">
                <path d="M340.864 149.312a30.592 30.592 0 0 0 0 42.752L652.736 512 340.864 831.872a30.592 30.592 0 0 0 0 42.752 29.12 29.12 0 0 0 41.728 0L714.24 534.336a32 32 0 0 0 0-45.056L382.592 149.312a29.12 29.12 0 0 0-41.728 0z" fill="#CCCCCC"></path>
           </svg>
        </view>
      </view>
    </view>

    <!-- 身份证正面 -->
    <view class="upload-card">
      <view class="upload-box" @click="chooseImage('front')">
        <image v-if="idCardFront" :src="idCardFront" class="preview-img" mode="aspectFill"></image>
        <template v-else>
           <!-- 相机图标SVG -->
           <svg class="camera-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M12 12C14.7614 12 17 9.76142 17 7C17 4.23858 14.7614 2 12 2C9.23858 2 7 4.23858 7 7C7 9.76142 9.23858 12 12 12Z" fill="#E0E0E0"/>
              <circle cx="12" cy="12" r="3" stroke="#CCCCCC" stroke-width="2"/>
              <path d="M20 6H17.82L16.4 4.47C15.96 4 15.34 3.73 14.68 3.73H9.32C8.66 3.73 8.04 4 7.6 4.47L6.18 6H4C2.9 6 2 6.9 2 8V18C2 19.1 2.9 20 4 20H20C21.1 20 22 19.1 22 18V8C22 6.9 21.1 6 20 6ZM12 17C9.24 17 7 14.76 7 12C7 9.24 9.24 7 12 7C14.76 7 17 9.24 17 12C17 14.76 14.76 17 12 17Z" fill="#CCCCCC"/>
           </svg>
           <text class="upload-text">点击上传</text>
        </template>
      </view>
      <text class="card-label">证件带照片面</text>
    </view>

    <!-- 身份证反面 -->
    <view class="upload-card">
      <view class="upload-box" @click="chooseImage('back')">
         <image v-if="idCardBack" :src="idCardBack" class="preview-img" mode="aspectFill"></image>
         <template v-else>
            <!-- 相机图标SVG -->
           <svg class="camera-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M20 6H17.82L16.4 4.47C15.96 4 15.34 3.73 14.68 3.73H9.32C8.66 3.73 8.04 4 7.6 4.47L6.18 6H4C2.9 6 2 6.9 2 8V18C2 19.1 2.9 20 4 20H20C21.1 20 22 19.1 22 18V8C22 6.9 21.1 6 20 6ZM12 17C9.24 17 7 14.76 7 12C7 9.24 9.24 7 12 7C14.76 7 17 9.24 17 12C17 14.76 14.76 17 12 17Z" fill="#CCCCCC"/>
           </svg>
           <text class="upload-text">点击上传</text>
         </template>
      </view>
      <text class="card-label">证件国徽面</text>
    </view>

    <!-- 底部按钮 -->
    <view class="footer-btn-area">
      <button class="next-btn" @click="goToQualifications">下一步，完善资质</button>
    </view>

    <!-- 自定义日期选择器 -->
    <view class="picker-mask" :class="{show: showPicker}" @click="closePicker">
        <view class="picker-content" @click.stop>
            <view class="picker-header">
                <text class="picker-btn-cancel" @click="closePicker">取消</text>
                <text class="picker-title">选择有效结束期限</text>
                <text class="picker-btn-confirm" @click="confirmPicker">确定</text>
            </view>
            <picker-view 
                class="picker-view" 
                indicator-style="height: 50px;" 
                :value="pickerValue" 
                @change="onPickerChange"
            >
                <picker-view-column>
                    <view class="picker-item" v-for="(item,index) in years" :key="index">{{item}}年</view>
                </picker-view-column>
                <picker-view-column>
                    <view class="picker-item" v-for="(item,index) in months" :key="index">{{item}}月</view>
                </picker-view-column>
                <picker-view-column>
                    <view class="picker-item" v-for="(item,index) in days" :key="index">{{item}}日</view>
                </picker-view-column>
            </picker-view>
        </view>
    </view>

  </view>
</template>

<script>
import logic from './auth_logic.js'; // 注意文件名可能需要对应
export default logic;
</script>

<style>
@import './auth.css';
</style>