community-front/subPages/index/components/SignUpForm.vue

<template>
  <view>
  
  <uv-popup 
    ref="popup"
    mode="bottom" 
    border-radius="20"
    @close="handleClose"
  >
    <view class="signup-form">
      <!-- 表单标题 -->
      <view class="form-header">
        <text class="form-title">我要报名</text>
      </view>
      
      <!-- 表单内容 -->
      <view class="form-content">
        <!-- 姓名 -->
        <view class="form-item">
          <view class="input-container">
            <text class="input-label required">姓名</text>
            <uv-input 
              v-model="formData.name"
              placeholder="请输入您的姓名"
              border="none"
              :custom-style="inputStyle"
            ></uv-input>
          </view>
        </view>
        
        <!-- 性别 -->
        <view class="form-item">
          <view class="input-container" @click="showGenderPicker">
            <text class="input-label required">性别</text>
            <view class="picker-input">
              <text class="picker-text" :class="{ placeholder: !formData.sex }">{{ formData.sex || '请选择' }}</text>
              <uv-icon name="arrow-right" size="14" color="#999"></uv-icon>
            </view>
          </view>
        </view>
        
        <!-- 年龄 -->
        <view class="form-item">
          <view class="input-container">
            <text class="input-label required">年龄</text>
            <uv-input 
              v-model="formData.age"
              placeholder="请输入您的年龄"
              type="number"
              border="none"
              :custom-style="inputStyle"
            ></uv-input>
          </view>
        </view>
        
        <!-- 手机号 -->
        <view class="form-item">
          <view class="input-container">
            <text class="input-label required">手机号</text>
            <uv-input 
              v-model="formData.phone"
              placeholder="请输入您的手机号"
              type="number"
              border="none"
              :custom-style="inputStyle"
            ></uv-input>
          </view>
        </view>
        
        <!-- 所在地区 -->
        <view class="form-item">
          <view class="input-container" @click="openAreaPicker">
            <text class="input-label">所在宿集区</text>
            <view class="picker-input">
              <text class="picker-text" :class="{ placeholder: !formData.area }">{{ formData.area || '请选择宿集区' }}</text>
              <uv-icon name="arrow-right" size="14" color="#999"></uv-icon>
            </view>
          </view>
        </view>
        
        <!-- 详细地址 -->
        <view class="form-item">
          <view class="input-container">
            <text class="input-label">详细地址</text>
            <uv-input 
              v-model="formData.address"
              placeholder="请输入详细地址"
              border="none"
              :custom-style="inputStyle"
            ></uv-input>
          </view>
        </view>
      </view>
      
      <!-- 提交按钮 -->
      <view class="form-footer">
        <uv-button 
          type="primary" 
          text="提交报名"
          :custom-style="buttonStyle"
          @click="submitForm"
        ></uv-button>
      </view>
    </view>
  </uv-popup>
  
  <!-- 性别选择器 -->
  <uv-picker
    ref="genderPicker"
    :columns="genderOptions"
    @confirm="onGenderConfirm"
    @cancel="onGenderCancel"
    @close="onGenderCancel"
  ></uv-picker>
  <uv-picker ref="areaPicker" :columns="columns" @confirm="onAreaConfirm"></uv-picker>

</view>
</template>

<script>
export default {
  name: 'SignUpForm',

  data() {
    return {
      show: false,
      formData: {
        name: '',
        sex: '',
        age: '',
        phone: '',
        area: '',
        address: ''
      },
      genderOptions: [['男', '女']],

      inputStyle: {
        backgroundColor: 'transparent',
        fontSize: '28rpx'
      },
      buttonStyle: {
        width: '100%',
        height: '88rpx',
        borderRadius: '44rpx'
      }
    }
  },
  computed:{
    columns(){
      return [[...this.$store.state.areaList.map(item => item.title)]]
    }
  },
  methods: {
    handleClose() {
      this.$emit('close')
      this.$refs.popup.close()
    },
    
    showGenderPicker() {
      this.$refs.genderPicker.open()
    },
    
    openAreaPicker() {
      // 打开选择器
      this.$refs.areaPicker.open()
    },

    onGenderConfirm(value) {
      this.formData.sex = value.value[0]
    },
    
    onAreaConfirm(value) {
      
      this.formData.area = value.value[0]
    },
    

    
    validateForm() {
      if (!this.formData.name.trim()) {
        uni.showToast({
          title: '请输入姓名',
          icon: 'none'
        })
        return false
      }
      
      if (!this.formData.sex) {
        uni.showToast({
          title: '请选择性别',
          icon: 'none'
        })
        return false
      }
      
      if (!this.formData.age.trim()) {
        uni.showToast({
          title: '请输入年龄',
          icon: 'none'
        })
        return false
      }
      
      if (!this.formData.phone.trim()) {
        uni.showToast({
          title: '请输入手机号',
          icon: 'none'
        })
        return false
      }
      
      if (!/^1[3-9]\d{9}$/.test(this.formData.phone)) {
        uni.showToast({
          title: '请输入正确的手机号',
          icon: 'none'
        })
        return false
      }
      
      return true
    },
    
    submitForm() {
      if (!this.validateForm()) {
        return
      }
      
      this.formData.sex = this.formData.sex === '男' ? 0 : 1
      // 提交表单数据

      // delete this.formData.age

      this.$emit('submit', this.formData)
      
      // 重置表单
      this.resetForm()
      
      // 关闭弹窗
      this.handleClose()
    },
    
    resetForm() {
      this.formData = {
        name: '',
        sex: '',
        age: '',
        phone: '',
        area: '',
        address: ''
      }
    },
    
    open() {
      this.$refs.popup.open()
    },
    
    close() {
      this.$refs.popup.close()
    }
  },

  expose: ['open', 'close']
}
</script>

<style lang="scss" scoped>
.signup-form {
  max-height: 1000rpx;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  
  .form-header {
    padding: 40rpx 30rpx 20rpx;
    text-align: center;
    border-bottom: 1rpx solid #f0f0f0;
    
    .form-title {
      font-size: 36rpx;
      font-weight: bold;
      color: #333333;
    }
  }
  
  .form-content {
    flex: 1;
    padding: 30rpx;
    overflow-y: auto;
    
    .form-item {
      margin-bottom: 30rpx;
      
      &:last-child {
        margin-bottom: 0;
      }
      
      .input-container {
        background: #f3f7f8;
        border-radius: 16rpx;
        padding: 24rpx 30rpx;
        display: flex;
        align-items: center;
        
        .input-label {
          font-size: 28rpx;
          color: #333333;
          margin-right: 20rpx;
          min-width: 120rpx;
          
          &.required::before {
            content: '*';
            color: #ff4757;
            margin-right: 4rpx;
          }
        }
        
        .picker-input {
          flex: 1;
          display: flex;
          align-items: center;
          justify-content: space-between;
          
          .picker-text {
            font-size: 28rpx;
            color: #333333;
            
            &.placeholder {
              color: #999999;
            }
          }
        }
      }
    }
  }
  
  .form-footer {
    padding: 30rpx;
    border-top: 1rpx solid #f0f0f0;
  }
}
</style>