MOSE-Official-Website-20250712/subPages/index/volunteerApply.vue

<template>
  <view class="volunteer-apply-page">
    <!-- 头部背景图 -->
    <view class="header-section">
      <image src="../static/volunteer_bg@2x.png" class="bg-image" mode="aspectFit"></image>
    </view>
    
    <!-- 提示信息 -->
    <view class="tip-section">
      <uv-icon name="info-circle-fill" color="#1488DB" size="32"></uv-icon>
      <text class="tip-text">以下内容均为必填项，请根据您的实际情况认真填写！</text>
    </view>
    
    <!-- 表单内容 -->
    <view class="form-section">
      <uv-form ref="form" :model="formData" :rules="rules" labelPosition="left" labelWidth="120">
        <!-- 姓名 -->
        <uv-form-item label="姓名" prop="name" borderBottom>
          <uv-input 
            v-model="formData.name" 
            placeholder="请输入您的姓名"
            border="none"
            clearable
          ></uv-input>
        </uv-form-item>
        
        <!-- 手机号 -->
        <uv-form-item label="手机号" prop="phone" borderBottom>
          <uv-input 
            v-model="formData.phone" 
            placeholder="请输入您的手机号"
            border="none"
            clearable
            type="number"
          ></uv-input>
        </uv-form-item>
        
        <!-- 性别 -->
        <uv-form-item label="性别" prop="gender" borderBottom>
          <uv-input 
            v-model="formData.genderText" 
            placeholder="请选择"
            border="none"
            readonly
            @click="showGenderPicker = true"
            suffixIcon="arrow-right"
          ></uv-input>
        </uv-form-item>
        
        <!-- 所在地区 -->
        <uv-form-item label="所在地区" prop="region" borderBottom>
          <uv-input 
            v-model="formData.regionText" 
            placeholder="请选择"
            border="none"
            readonly
            @click="showRegionPicker = true"
            suffixIcon="arrow-right"
          ></uv-input>
        </uv-form-item>
        
        <!-- 详细地址 -->
        <uv-form-item label="详细地址" prop="address" borderBottom>
          <uv-input 
            v-model="formData.address" 
            placeholder="请输入详细地址"
            border="none"
            clearable
          ></uv-input>
        </uv-form-item>
        
        <!-- 职业类型 -->
        <uv-form-item label="职业类型" prop="profession" borderBottom>
          <uv-input 
            v-model="formData.professionText" 
            placeholder="请选择"
            border="none"
            readonly
            @click="showProfessionPicker = true"
            suffixIcon="arrow-right"
          ></uv-input>
        </uv-form-item>
        
        <!-- 最高学历 -->
        <uv-form-item label="最高学历" prop="education" borderBottom>
          <uv-input 
            v-model="formData.educationText" 
            placeholder="请选择"
            border="none"
            readonly
            @click="showEducationPicker = true"
            suffixIcon="arrow-right"
          ></uv-input>
        </uv-form-item>
        
        <!-- 技能特长 -->
        <uv-form-item label="技能特长" prop="skills">
          <uv-textarea 
            v-model="formData.skills" 
            placeholder="请输入您的技能特长"
            border="none"
            :maxlength="200"
            count
            height="120"
          ></uv-textarea>
        </uv-form-item>
      </uv-form>
      
      <!-- 紧急联系人信息 -->
      <view class="emergency-section">
        <view class="section-title">紧急联系人信息</view>
        
        <uv-form ref="emergencyForm" :model="emergencyData" labelPosition="left" labelWidth="120">
          <!-- 联系人姓名 -->
          <uv-form-item label="姓名" prop="name" borderBottom>
            <uv-input 
              v-model="emergencyData.name" 
              placeholder="请输入您的紧急联系人姓名"
              border="none"
              clearable
            ></uv-input>
          </uv-form-item>
          
          <!-- 联系人手机号 -->
          <uv-form-item label="手机号" prop="phone" borderBottom>
            <uv-input 
              v-model="emergencyData.phone" 
              placeholder="请输入您的紧急联系人手机号"
              border="none"
              clearable
              type="number"
            ></uv-input>
          </uv-form-item>
        </uv-form>
      </view>
    </view>
    
    <!-- 提交按钮 -->
    <view class="submit-section">
      <!-- 圆角的 -->

      <uv-button 
        type="primary" 
        shape="circle"
        size="large"
        :loading="submitting"
        @click="submitApplication"
      >
        提交申请
      </uv-button>
    </view>
    
    <!-- 性别选择器 -->
    <uv-picker
      ref="genderPicker"
      v-model="showGenderPicker"
      :columns="genderOptions"
      @confirm="onGenderConfirm"
      @cancel="showGenderPicker = false"
    ></uv-picker>
    
    <!-- 地区选择器 -->
    <uv-picker
      ref="regionPicker"
      v-model="showRegionPicker"
      :columns="regionOptions"
      @confirm="onRegionConfirm"
      @cancel="showRegionPicker = false"
    ></uv-picker>
    
    <!-- 职业选择器 -->
    <uv-picker
      ref="professionPicker"
      v-model="showProfessionPicker"
      :columns="professionOptions"
      @confirm="onProfessionConfirm"
      @cancel="showProfessionPicker = false"
    ></uv-picker>
    
    <!-- 学历选择器 -->
    <uv-picker
      ref="educationPicker"
      v-model="showEducationPicker"
      :columns="educationOptions"
      @confirm="onEducationConfirm"
      @cancel="showEducationPicker = false"
    ></uv-picker>
  </view>
</template>

<script>
export default {
  name: 'VolunteerApply',
  data() {
    return {
      submitting: false,
      showGenderPicker: false,
      showRegionPicker: false,
      showProfessionPicker: false,
      showEducationPicker: false,
      
      formData: {
        name: '',
        phone: '',
        gender: '',
        genderText: '',
        region: '',
        regionText: '',
        address: '',
        profession: '',
        professionText: '',
        education: '',
        educationText: '',
        skills: ''
      },
      
      emergencyData: {
        name: '',
        phone: ''
      },
      
      rules: {
        name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
        phone: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }
        ],
        gender: [{ required: true, message: '请选择性别', trigger: 'change' }],
        region: [{ required: true, message: '请选择所在地区', trigger: 'change' }],
        address: [{ required: true, message: '请输入详细地址', trigger: 'blur' }],
        profession: [{ required: true, message: '请选择职业类型', trigger: 'change' }],
        education: [{ required: true, message: '请选择最高学历', trigger: 'change' }]
      },
      
      genderOptions: [['男', '女']],
      
      regionOptions: [[
        '北京市', '上海市', '广州市', '深圳市', '杭州市', '南京市', 
        '武汉市', '成都市', '西安市', '长沙市', '湖南省长沙市区'
      ]],
      
      professionOptions: [[
        '学生', '教师', '医生', '工程师', '设计师', '销售', 
        '服务员', '公务员', '自由职业', '专业技术人员', '其他'
      ]],
      
      educationOptions: [[
        '高中及以下', '大专', '本科', '硕士', '博士'
      ]]
    }
  },
  
  onLoad(options) {
    // 如果是编辑模式，加载已有数据
    if (options.edit && options.data) {
      this.loadExistingData(JSON.parse(decodeURIComponent(options.data)));
    }
  },
  
  methods: {
    // 加载已有数据（编辑模式）
    loadExistingData(data) {
      this.formData = {
        name: data.name || '李双欢',
        phone: data.phone || '15478451233',
        gender: data.gender || '男',
        genderText: data.gender || '男',
        region: data.region || '湖南省长沙市区',
        regionText: data.region || '湖南省长沙市区',
        address: data.address || '阳光小区45栋二单元1203',
        profession: data.profession || '专业技术人员',
        professionText: data.profession || '专业技术人员',
        education: data.education || '本科',
        educationText: data.education || '本科',
        skills: data.skills || '计算机、跑步'
      };
      
      this.emergencyData = {
        name: data.emergencyName || '李四',
        phone: data.emergencyPhone || '14563236320'
      };
    },
    
    // 性别选择确认
    onGenderConfirm(value) {
      this.formData.gender = value[0];
      this.formData.genderText = value[0];
      this.showGenderPicker = false;
    },
    
    // 地区选择确认
    onRegionConfirm(value) {
      this.formData.region = value[0];
      this.formData.regionText = value[0];
      this.showRegionPicker = false;
    },
    
    // 职业选择确认
    onProfessionConfirm(value) {
      this.formData.profession = value[0];
      this.formData.professionText = value[0];
      this.showProfessionPicker = false;
    },
    
    // 学历选择确认
    onEducationConfirm(value) {
      this.formData.education = value[0];
      this.formData.educationText = value[0];
      this.showEducationPicker = false;
    },
    
    // 提交申请
    async submitApplication() {
      try {
        // 验证主表单
        const valid = await this.$refs.form.validate();
        if (!valid) return;
        
        // 验证紧急联系人信息
        if (!this.emergencyData.name || !this.emergencyData.phone) {
          uni.showToast({
            title: '请填写紧急联系人信息',
            icon: 'none'
          });
          return;
        }
        
        this.submitting = true;
        
        // 模拟提交
        await this.submitVolunteerApplication();
        
        uni.showToast({
          title: '申请提交成功',
          icon: 'success'
        });
        
        setTimeout(() => {
          uni.navigateBack();
        }, 1500);
        
      } catch (error) {
        console.error('提交失败:', error);
        uni.showToast({
          title: '提交失败，请重试',
          icon: 'none'
        });
      } finally {
        this.submitting = false;
      }
    },
    
    // 提交志愿者申请API
    async submitVolunteerApplication() {
      // 模拟API调用
      return new Promise((resolve) => {
        setTimeout(() => {
          console.log('志愿者申请数据:', {
            ...this.formData,
            emergency: this.emergencyData
          });
          resolve();
        }, 1000);
      });
    }
  }
}
</script>

<style lang="scss" scoped>
// @import '@/uni.scss';

.volunteer-apply-page {
  min-height: 100vh;
  background-color: #f5f5f5;
}

.header-section {
  position: relative;
  width: 96%;
  height: 290rpx;
  margin: 25rpx auto;

  .bg-image {
    
    width: 100%;
    height: 100%;

  }
  

}

.tip-section {
  display: flex;
  align-items: center;
  padding: 30rpx;
  background-color: #fff;
  margin: 20rpx 30rpx;
  border-radius: 16rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
  
  .tip-text {
    margin-left: 16rpx;
    font-size: 28rpx;
    color: #666;
    line-height: 1.5;
  }
}

.form-section {
  background-color: #fff;
  margin: 20rpx 30rpx;
  border-radius: 16rpx;
  padding: 40rpx 30rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}

.emergency-section {
  margin-top: 40rpx;
  padding-top: 40rpx;
  border-top: 1rpx solid #f0f0f0;
  
  .section-title {
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 30rpx;
  }
}

.submit-section {
  padding: 40rpx 30rpx;
  padding-bottom: 60rpx;
}

// 覆盖uvUI样式
:deep(.uv-form-item__body__right__content__input) {
  font-size: 28rpx !important;
}

:deep(.uv-form-item__body__left__text) {
  font-size: 28rpx !important;
  color: #333 !important;
}

:deep(.uv-input__content__field-wrapper__field) {
  font-size: 28rpx !important;
}

:deep(.uv-textarea__content__field) {
  font-size: 28rpx !important;
}
</style>