pet-system-fulfiller-app/pages/recruit/form/index.vue

<template>
  <view class="container">
    <!-- 个人信息卡片 -->
    <view class="card">
      <!-- 手机号 -->
      <view class="form-item">
        <text class="label">手机号</text>
        <view class="input-box">
          <view class="prefix-area">
            <text class="prefix">+86</text>
            <text class="arrow-down">﹀</text>
          </view>
          <input class="input" type="number" v-model="formData.mobile" />
        </view>
      </view>

      <!-- 验证码 -->
      <!-- <view class="form-item">
        <text class="label">验证码</text>
        <view class="input-box">
          <input class="input" type="number" v-model="formData.code" placeholder="验证码" />
          <text class="get-code-text" @click="getVerifyCode">{{ countDown > 0 ? countDown + 's' : '获取验证码' }}</text>
        </view>
      </view> -->

      <!-- 姓名 -->
      <view class="form-item">
        <text class="label">姓名</text>
        <view class="input-box">
          <input class="input" type="text" v-model="formData.name" />
        </view>
      </view>

      <!-- 性别 -->
      <view class="form-item">
        <text class="label">性别</text>
        <view class="gender-group">
          <view class="radio-item" @click="formData.gender = 1">
            <text class="radio-icon" :class="{ active: formData.gender === 1 }">{{ formData.gender === 1 ? '♂' : '○'
              }}</text>
            <text class="radio-label" :class="{ active: formData.gender === 1 }"> 男</text>
          </view>
          <view class="radio-item" @click="formData.gender = 2">
            <text class="radio-icon" :class="{ active: formData.gender === 2 }">{{ formData.gender === 2 ? '♀' : '○'
              }}</text>
            <text class="radio-label" :class="{ active: formData.gender === 2 }"> 女</text>
          </view>
        </view>
      </view>

      <!-- 生日 -->
      <view class="form-item">
        <text class="label">生日</text>
        <view class="input-box" @click="openPicker">
          <text>{{ formData.birthday || '请选择生日' }}</text>
          <!-- 灰色箭头 SVG -->
          <svg class="arrow-right" style="width:24rpx; height:24rpx; margin-left: auto;" 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 class="form-item">
        <text class="label">密码</text>
        <view class="input-box">
          <input class="input" :password="!showPwd" v-model="formData.password" placeholder="设置登录密码" />
          <view class="monkey-icon" @click="showPwd = !showPwd">
            <template v-if="showPwd">
              <!-- 睁眼线框图标 -->
              <svg class="svg-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path
                  d="M12 4.5C7 4.5 2.73 7.61 1 12C2.73 16.39 7 19.5 12 19.5C17 19.5 21.27 16.39 23 12C21.27 7.61 17 4.5 12 4.5ZM12 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 17ZM12 9C10.34 9 9 10.34 9 12C9 13.66 10.34 15 12 15C13.66 15 15 13.66 15 12C15 10.34 13.66 9 12 9Z"
                  fill="#CCCCCC" />
              </svg>
            </template>
            <template v-else>
              <!-- 闭眼线框图标 (带睫毛) -->
              <svg class="svg-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M12 7C7 7 2.73 10.11 1 14.5" stroke="#CCCCCC" stroke-width="2" stroke-linecap="round" />
                <path d="M23 14.5C21.27 10.11 17 7 12 7" stroke="#CCCCCC" stroke-width="2" stroke-linecap="round" />
                <path d="M12 7V4" stroke="#CCCCCC" stroke-width="2" stroke-linecap="round" />
                <path d="M16 8L18 5" stroke="#CCCCCC" stroke-width="2" stroke-linecap="round" />
                <path d="M8 8L6 5" stroke="#CCCCCC" stroke-width="2" stroke-linecap="round" />
                <path d="M20 10L22 8" stroke="#CCCCCC" stroke-width="2" stroke-linecap="round" />
                <path d="M4 10L2 8" stroke="#CCCCCC" stroke-width="2" stroke-linecap="round" />
              </svg>
            </template>
          </view>
        </view>
      </view>
    </view>

    <!-- 服务类型卡片 -->
    <view class="card">
      <view class="section-title">服务类型</view>
      <view class="service-types">
        <view class="type-btn" v-for="(item, index) in serviceTypes" :key="item.id"
          :class="{ selected: formData.serviceType.includes(item.id) }" @click="toggleService(item)">
          {{ item.name }}
        </view>
      </view>

      <!-- 所属站点 -->
      <view class="form-item">
        <text class="label">所属站点</text>
        <view class="input-box" @click="openStationPickerCascader">
          <view class="station-display" v-if="formData.station">
            <text class="area-tag" v-if="formData.areaPath">{{ formData.areaPath }}</text>
            <text class="station-name">{{ formData.station }}</text>
          </view>
          <text v-else style="color: #ccc">请选择所属站点</text>
          <!-- 灰色箭头 SVG -->
          <svg class="arrow-right" style="width:24rpx; height:24rpx; margin-left: auto;" 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>

    <!-- ... (Bottom content) ... -->

    <!-- 自定义日期选择器 (已存在) -->
    <!-- ... (Picker content) ... -->

    <!-- 自定义站点选择器 (级联版) -->
    <view class="picker-mask" :class="{ show: showStationPickerCascader }" @click="closeStationPickerCascader">
      <view class="picker-content" @click.stop>
        <view class="picker-header">
          <text class="picker-btn-cancel" @click="closeStationPickerCascader">取消</text>
          <text class="picker-title">请选择所属站点</text>
          <text class="picker-btn-confirm" @click="closeStationPickerCascader">关闭</text>
        </view>
        <view class="picker-body">
          <!-- 左侧：垂直路径 -->
          <view class="timeline-area">
            <!-- 已选节点 -->
            <view class="timeline-item" v-for="(item, index) in selectedPathway" :key="index"
              @click="jumpToStep(index)">
              <view class="timeline-dot"></view>
              <text>{{ item.name }}</text>
            </view>
            <!-- 当前正在选的提示 (如果还没选完) -->
            <view class="timeline-item active" v-if="selectStep === selectedPathway.length">
              <view class="timeline-dot"></view>
              <text>请选择</text>
            </view>
          </view>

          <!-- 右侧：待选项列表 -->
          <scroll-view scroll-y class="list-area">
            <view class="list-item" v-for="(item, index) in currentList" :key="item.id"
              @click="selectStationItem(item)">
              {{ item.name }}
            </view>
            <view v-if="currentList.length === 0" style="padding:20rpx;color:#999">
              无数据
            </view>
          </scroll-view>
        </view>
      </view>
    </view>

    <!-- 底部协议与按钮 -->
    <view class="footer-actions">
      <view class="agreement-row">
        <view class="checkbox" :class="{ checked: isAgreed }" @click="isAgreed = !isAgreed">
          <text v-if="isAgreed" class="check-mark">✓</text>
        </view>
        <text class="agree-text">我已阅读并同意 <text style="color:#2979ff" @click.stop="openPrivacy">《宠宝履约者说明》</text></text>
      </view>

      <view class="footer-btn-area">
        <button class="submit-btn" @click="goToAuth">下一步，实名认证</button>
      </view>
    </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>

    <!-- 协议弹窗 公共组件 -->
    <agreement :visible="showPrivacy" :title="agreementTitle" :content="agreementContent" @close="showPrivacy = false">
    </agreement>

  </view>
</template>

<script>
import { sendSmsCode } from '@/api/resource/sms'
import { getAreaStationList } from '@/api/system/areaStation'
import { listAllService } from '@/api/service/list'
import { getAgreement } from '@/api/system/agreement'
import Agreement from '@/components/agreement/index.vue'

export default {
  components: { Agreement },
  data() {
    return {
      formData: {
        mobile: '', code: '', name: '', gender: 1, birthday: '',
        password: '', serviceType: [], station: '', stationId: null, areaPath: ''
      },
      showPwd: false, isAgreed: false, serviceTypes: [],
      countDown: 0, timer: null,
      showPicker: false, years: [], months: [], days: [],
      pickerValue: [0, 0, 0], tempYear: 0, tempMonth: 0, tempDay: 0,
      showStationPickerCascader: false, selectStep: 0,
      selectedPathway: [], currentList: [], fullStationData: [],
      selectedStationId: null,
      showPrivacy: false, agreementTitle: '', agreementContent: '', currentAgreementId: ''
    }
  },
  onLoad() {
    this.initDateData(); this.loadServiceTypes();
    this.loadAreaStationData(); this.restoreFormData();
  },
  beforeDestroy() { if (this.timer) clearInterval(this.timer); },
  methods: {
    async loadAreaStationData() {
      try { const res = await getAreaStationList(); this.fullStationData = res.data || []; }
      catch (err) { console.error('加载站点列表失败:', err); }
    },
    restoreFormData() {
      try {
        const saved = uni.getStorageSync('recruit_form_data');
        if (saved) {
          const d = JSON.parse(saved);
          Object.assign(this.formData, d);
          if (d._selectedPathway) { this.selectedPathway = d._selectedPathway; this.selectStep = this.selectedPathway.length; }
          if (this.selectedPathway.length > 0) {
            const last = this.selectedPathway[this.selectedPathway.length - 1];
            if (last) this.loadStations(last.id);
          }
        }
      } catch (e) { console.error('恢复表单数据失败', e); }
    },
    initDateData() {
      const currentYear = new Date().getFullYear();
      for (let i = 1980; i <= currentYear + 5; i++) this.years.push(i);
      for (let i = 1; i <= 12; i++) this.months.push(i);
      for (let i = 1; i <= 31; i++) this.days.push(i);
    },
    openPicker() {
      const dateStr = this.formData.birthday || '2000-01-01';
      const [y, m, d] = dateStr.split('-').map(Number);
      const yIndex = this.years.indexOf(y); const mIndex = this.months.indexOf(m); const dIndex = this.days.indexOf(d);
      this.pickerValue = [yIndex > -1 ? yIndex : 0, mIndex > -1 ? mIndex : 0, dIndex > -1 ? dIndex : 0];
      this.tempYear = this.years[this.pickerValue[0]]; this.tempMonth = this.months[this.pickerValue[1]]; this.tempDay = this.days[this.pickerValue[2]];
      this.showPicker = true;
    },
    closePicker() { this.showPicker = false; },
    onPickerChange(e) {
      const val = e.detail.value;
      this.tempYear = this.years[val[0]]; this.tempMonth = this.months[val[1]]; this.tempDay = this.days[val[2]];
    },
    confirmPicker() {
      const mStr = this.tempMonth < 10 ? '0' + this.tempMonth : this.tempMonth;
      const dStr = this.tempDay < 10 ? '0' + this.tempDay : this.tempDay;
      this.formData.birthday = `${this.tempYear}-${mStr}-${dStr}`; this.closePicker();
    },
    async loadServiceTypes() {
      try {
        const res = await listAllService();
        this.serviceTypes = (res.data || []).map(item => ({ id: item.id, name: item.name }));
      } catch (err) { console.error('加载服务类型失败:', err); this.serviceTypes = []; }
    },
    toggleService(item) {
      const idx = this.formData.serviceType.indexOf(item.id);
      if (idx > -1) this.formData.serviceType.splice(idx, 1);
      else this.formData.serviceType.push(item.id);
    },
    async openStationPickerCascader() {
      this.showStationPickerCascader = true;
      if (this.selectedPathway.length === 0) await this.resetStationPicker();
    },
    async resetStationPicker() { this.selectStep = 0; this.selectedPathway = []; this.filterLocalChildren(0); },
    closeStationPickerCascader() { this.showStationPickerCascader = false; },
    filterLocalChildren(parentId) { this.currentList = this.fullStationData.filter(item => item.parentId == parentId); },
    async selectStationItem(item) {
      this.selectedPathway[this.selectStep] = item;
      const sons = this.fullStationData.filter(i => i.parentId == item.id);
      if (sons.length > 0) {
        this.selectStep++; this.selectedPathway = this.selectedPathway.slice(0, this.selectStep); this.currentList = sons;
      } else { this.confirmStation(); }
    },
    async jumpToStep(step) {
      this.selectStep = step;
      if (step === 0) this.filterLocalChildren(0);
      else { const parent = this.selectedPathway[step - 1]; if (parent) this.filterLocalChildren(parent.id); }
    },
    confirmStation() {
      const path = this.selectedPathway.map(i => i.name);
      this.formData.station = path[path.length - 1];
      this.formData.stationId = this.selectedPathway[this.selectedPathway.length - 1].id;
      this.formData.areaPath = path.slice(0, -1).join(' ');
      this.closeStationPickerCascader();
    },
    async openPrivacy() {
      try {
        uni.showLoading({ title: '加载中...' });
        const res = await getAgreement(3);
        if (res.code === 200 && res.data) {
          this.agreementTitle = res.data.title; this.agreementContent = res.data.content; this.showPrivacy = true;
        } else { uni.showToast({ title: res.msg || '获取协议失败', icon: 'none' }); }
      } catch (err) { console.error('获取协议详情失败:', err); }
      finally { uni.hideLoading(); }
    },
    goToAuth() {
      if (!this.isAgreed) { uni.showToast({ title: '请勾选协议', icon: 'none' }); return; }
      if (!this.formData.mobile || this.formData.mobile.length !== 11) { uni.showToast({ title: '请输入正确的手机号', icon: 'none' }); return; }
      if (!this.formData.name) { uni.showToast({ title: '请输入姓名', icon: 'none' }); return; }
      if (this.formData.serviceType.length === 0) { uni.showToast({ title: '请选择服务类型', icon: 'none' }); return; }
      if (!this.formData.stationId) { uni.showToast({ title: '请选择所属站点', icon: 'none' }); return; }
      uni.setStorageSync('recruit_form_data', JSON.stringify({ ...this.formData, _selectedPathway: this.selectedPathway }));
      const selectedServices = this.serviceTypes.filter(s => this.formData.serviceType.includes(s.id));
      uni.navigateTo({ url: `/pages/recruit/auth/index?services=${encodeURIComponent(JSON.stringify(selectedServices))}` });
    }
  }
}
</script>

<style>
page {
  background-color: #F5F6F8;
}

.container {
  padding: 20rpx;
}

.card {
  background-color: #fff;
  border-radius: 20rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
}

.form-item {
  display: flex;
  align-items: center;
  margin-bottom: 30rpx;
}

.form-item:last-child {
  margin-bottom: 0;
}

.label {
  width: 120rpx;
  font-size: 30rpx;
  font-weight: bold;
  color: #333;
  margin-right: 20rpx;
  flex-shrink: 0;
}

.input-box {
  flex: 1;
  height: 80rpx;
  background-color: #F8F8F8;
  border-radius: 8rpx;
  display: flex;
  align-items: center;
  padding: 0 20rpx;
  font-size: 28rpx;
  color: #333;
}

.input {
  flex: 1;
  height: 100%;
  font-size: 28rpx;
}

.station-display {
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1.4;
  padding: 10rpx 0;
}

.area-tag {
  font-size: 22rpx;
  color: #999;
  margin-bottom: 4rpx;
}

.station-name {
  font-size: 28rpx;
  color: #333;
  font-weight: 500;
}

.prefix-area {
  display: flex;
  align-items: center;
  margin-right: 20rpx;
  height: 100%;
}

.prefix {
  color: #333;
  margin-right: 5rpx;
}

.arrow-down {
  font-size: 20rpx;
  color: #999;
  line-height: 1;
}

.get-code-text {
  color: #FF5722;
  font-size: 28rpx;
  font-weight: bold;
  margin-left: 20rpx;
}

.gender-group {
  display: flex;
  align-items: center;
}

.radio-item {
  display: flex;
  align-items: center;
  margin-right: 40rpx;
  font-size: 30rpx;
  color: #333;
}

.radio-icon {
  margin-right: 10rpx;
  font-size: 32rpx;
  color: #ccc;
}

.radio-icon.active {
  color: #FF5722;
}

.radio-label.active {
  color: #FF5722;
  font-weight: bold;
}

.arrow-right {
  color: #ccc;
  font-size: 24rpx;
  margin-left: auto;
}

.eye-icon {
  padding: 10rpx;
  color: #ccc;
}

.section-title {
  font-size: 30rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 20rpx;
}

.service-types {
  display: flex;
  flex-wrap: wrap;
  gap: 20rpx;
  margin-bottom: 30rpx;
}

.type-btn {
  width: calc((100% - 40rpx) / 3);
  height: 80rpx;
  background-color: #F8F8F8;
  border-radius: 8rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28rpx;
  color: #333;
  font-weight: 500;
}

.type-btn.selected {
  background-color: #FFF3E0;
  color: #FF5722;
  font-weight: bold;
}

.footer-actions {
  margin-top: 40rpx;
  padding: 0 10rpx;
  padding-bottom: 60rpx;
}

.agreement-row {
  display: flex;
  align-items: center;
  margin-bottom: 30rpx;
}

.checkbox {
  width: 32rpx;
  height: 32rpx;
  border: 2rpx solid #ccc;
  border-radius: 4rpx;
  margin-right: 15rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.checkbox.checked {
  border-color: #FF5722;
  background-color: #FF5722;
}

.check-mark {
  color: #fff;
  font-size: 22rpx;
}

.agree-text {
  font-size: 26rpx;
  color: #999;
}

.footer-btn-area {
  width: 100%;
  margin-top: 40rpx;
}

.submit-btn {
  background: linear-gradient(90deg, #FF6F00 0%, #FF5722 100%);
  color: #fff;
  font-size: 28rpx;
  font-weight: bold;
  height: 90rpx;
  line-height: 90rpx;
  border-radius: 45rpx;
  box-shadow: 0 10rpx 20rpx rgba(255, 87, 34, 0.2);
}

.submit-btn::after {
  border: none;
}

.picker-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 999;
  visibility: hidden;
  opacity: 0;
  transition: all 0.3s;
}

.picker-mask.show {
  visibility: visible;
  opacity: 1;
}

.picker-content {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #fff;
  border-radius: 20rpx 20rpx 0 0;
  transform: translateY(100%);
  transition: all 0.3s;
  height: 800rpx;
  display: flex;
  flex-direction: column;
}

.picker-mask.show .picker-content {
  transform: translateY(0);
}

.picker-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx;
  border-bottom: 1px solid #eee;
  font-size: 32rpx;
}

.picker-btn-cancel {
  color: #999;
}

.picker-title {
  font-weight: bold;
  color: #333;
}

.picker-btn-confirm {
  color: #FF5722;
  font-weight: bold;
}

.picker-view {
  width: 100%;
  height: 400rpx;
}

.picker-item {
  line-height: 50px;
  text-align: center;
  font-size: 32rpx;
  color: #333;
}

.monkey-icon {
  padding: 10rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.svg-icon {
  width: 40rpx;
  height: 40rpx;
}

.picker-body {
  flex: 1;
  display: flex;
  overflow: hidden;
  padding: 0 30rpx 30rpx;
}

.timeline-area {
  width: 200rpx;
  border-right: 1px solid #f5f5f5;
  padding-right: 20rpx;
  display: flex;
  flex-direction: column;
}

.timeline-item {
  position: relative;
  padding-bottom: 40rpx;
  padding-left: 30rpx;
  color: #333;
  font-size: 28rpx;
}

.timeline-item:last-child {
  padding-bottom: 0;
}

.timeline-dot {
  position: absolute;
  left: 0;
  top: 12rpx;
  width: 14rpx;
  height: 14rpx;
  border-radius: 50%;
  background-color: #eee;
}

.timeline-item.active .timeline-dot {
  background-color: #FF5722;
  box-shadow: 0 0 0 4rpx rgba(255, 87, 34, 0.2);
}

.timeline-item.active {
  font-weight: bold;
  color: #FF5722;
}

.timeline-item:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 6rpx;
  top: 30rpx;
  bottom: -10rpx;
  width: 2rpx;
  background-color: #f0f0f0;
}

.list-area {
  flex: 1;
  padding-left: 30rpx;
  overflow-y: auto;
}

.list-item {
  padding: 24rpx 0;
  border-bottom: 1px solid #f9f9f9;
  font-size: 28rpx;
  color: #666;
}

.list-item:active {
  background-color: #f5f5f5;
}

.picker-list {
  max-height: 600rpx;
  overflow-y: auto;
  padding: 20rpx 0;
}

.city-item {
  display: flex;
  align-items: center;
  padding: 24rpx 40rpx;
  font-size: 30rpx;
  color: #333;
}

.city-item.active {
  color: #FF5722;
  font-weight: bold;
}

.dot-radio {
  width: 16rpx;
  height: 16rpx;
  border-radius: 50%;
  background-color: #eee;
  margin-right: 20rpx;
  position: relative;
}

.city-item.active .dot-radio {
  background-color: #FF5722;
  box-shadow: 0 0 0 6rpx rgba(255, 87, 34, 0.2);
}

.station-item {
  padding: 30rpx 40rpx;
  font-size: 30rpx;
  color: #333;
  border-bottom: 1px solid #f9f9f9;
}

.station-item:last-child {
  border-bottom: none;
}
</style>