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

<template>
  <view class="qual-container">
    <!-- 顶部提示 -->
    <view class="top-tip">根据国家政策要求，请尽快完成实名认证与健康认证，否则无法开展配送业务。我们承诺将严格保管好您的个人信息。</view>

    <!-- 如果没有选择服务类型 -->
    <view class="empty-state" v-if="serviceTypes.length === 0">
        <text class="empty-tip">请返回第一步选择服务类型</text>
        <button class="back-btn" @click="goBackToForm">返回选择</button>
    </view>

    <!-- 动态渲染资质卡片 -->
    <view class="qual-card" v-for="(item, index) in serviceTypes" :key="item.id">
      <view class="card-title">{{ item.name }}服务资质</view>
      
      <view class="upload-wrapper">
         <!-- 已有图片列表 -->
         <view class="img-item" v-for="(img, imgIndex) in qualifications[item.name]" :key="imgIndex">
             <image :src="img" class="preview-img" mode="aspectFill" @click="previewImage(item.name, imgIndex)"></image>
             <view class="delete-btn" @click.stop="deleteImage(item.name, imgIndex)">×</view>
         </view>
         
         <!-- 上传/添加按钮 -->
         <view class="upload-box" @click="chooseImage(item.name)">
             <text class="plus-icon">+</text>
             <text class="upload-text">上传</text>
         </view>
      </view>
    </view>
    
    <!-- 底部按钮 -->
    <view class="footer-actions">
      <button class="submit-btn" @click="submit">立即提交</button>
    </view>

  </view>
</template>

<script>
import logic from './qualifications_logic.js';
export default logic;
</script>

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