MOSE-Official-Website-20250712/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.gender }">{{ formData.gender || '请选择' }}</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="chooseLocation">
            <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>
  

</view>
</template>

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

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

      inputStyle: {
        backgroundColor: 'transparent',
        fontSize: '28rpx'
      },
      buttonStyle: {
        width: '100%',
        height: '88rpx',
        borderRadius: '44rpx'
      }
    }
  },

  methods: {
    handleClose() {
      this.$emit('close')
      this.$refs.popup.close()
    },
    
    showGenderPicker() {
      this.$refs.genderPicker.open()
    },
    
    chooseLocation() {
      uni.chooseLocation({
        success: (res) => {
          console.log('位置名称：' + res.name)
          console.log('详细地址：' + res.address)
          console.log('纬度：' + res.latitude)
          console.log('经度：' + res.longitude)
          
          // 设置选中的地址
          this.formData.area = res.address || res.name 
          
          // 如果详细地址为空，也可以自动填充
          if (!this.formData.address && res.name) {
            this.formData.address = res.name
          }
        },
        fail: (err) => {
          console.log('选择位置失败：', err)
          uni.showToast({
            title: '获取位置失败',
            icon: 'none'
          })
        }
      })
    },
    
    onGenderConfirm(value) {
      this.formData.gender = value.value[0]
    },
    
    onGenderCancel() {
      // 性别选择器取消时的处理
    },
    

    
    validateForm() {
      if (!this.formData.name.trim()) {
        uni.showToast({
          title: '请输入姓名',
          icon: 'none'
        })
        return false
      }
      
      if (!this.formData.gender) {
        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.gender = this.formData.gender === '男' ? 0 : 1
      // 提交表单数据
      this.$emit('submit', this.formData)
      
      // 重置表单
      this.resetForm()
      
      // 关闭弹窗
      this.handleClose()
    },
    
    resetForm() {
      this.formData = {
        name: '',
        gender: '',
        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>