englishread-front/subPages/home/submit.vue

<template>
  <view class="submit-container">
    
    <!-- 主体内容 -->
    <view class="main-content">  
      <!-- 表单卡片 -->
      <view class="form-card">
        <!-- 标题 -->
        <view class="title-section">
          <text class="main-title">信息填写</text>
        </view>
        <!-- 姓名 -->
        <view class="form-item">
          <text class="form-label">姓名</text>
          <uv-input 
            v-model="formData.name"
            placeholder="请输入"
            border="bottom"
            :custom-style="{
              backgroundColor: '#fff',
              borderRadius: '12rpx',
              paddingLeft: '-24rpx',
              fontSize: '32rpx'
            }"
          ></uv-input>
        </view>
        
        <!-- 联系方式 -->
        <view class="form-item">
          <text class="form-label">联系方式</text>
          <uv-input 
            v-model="formData.phone"
            placeholder="请输入"
            border="bottom"
            :custom-style="{
              backgroundColor: '#fff',
              paddingLeft: '-24rpx',
              fontSize: '32rpx'
            }"
          ></uv-input>
        </view>
        
        <!-- 个人期待 -->
        <view class="form-item">
          <text class="form-label">个人期待</text>
          <uv-textarea 
            v-model="formData.looking"
            placeholder="请输入"
            border="bottom"
            :auto-height="true"
            :custom-style="{
              backgroundColor: '#fff',
              paddingLeft: '-24rpx',
              fontSize: '32rpx',
            }"
          ></uv-textarea>
        </view>
        
        <!-- 文化背景 -->
        <view class="form-item">
          <text class="form-label">文化背景</text>
          <uv-textarea 
            v-model="formData.background"
            placeholder="请输入"
            border="none"
            :auto-height="true"
            :custom-style="{
              backgroundColor: '#fff',
              paddingLeft: '-24rpx',
              fontSize: '32rpx',
            }"
          ></uv-textarea>
        </view>
      </view>
    </view>
    
    <!-- 底部固定提交栏 -->
    <view class="bottom-bar">
      <uv-button 
        type="primary" 
        text="提交" 
        :custom-style="{
          width: '100%',
          height: '82rpx',
          borderRadius: '44rpx',
          backgroundColor: '#06DADC',
          fontSize: '36rpx',
          fontWeight: '500',
          border: '1px solid #06DADC'
        }"
        @click="handleSubmit"
      ></uv-button>
      <uv-safe-bottom></uv-safe-bottom>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        name: '',
        phone: '',
        looking: '',
        background: '',
        linkId: this.linkId
      }
    }
  },
  methods: {
    async handleSubmit() {
      // console.log('提交表单', this.formData)
      // 这里添加表单提交逻辑
      if (!this.formData.name) {
        uni.showToast({
          title: '请输入姓名',
          icon: 'none'
        })
        return
      }
      if (!this.formData.phone) {
        uni.showToast({
          title: '请输入联系方式',
          icon: 'none'
        })
        return
      }
      
      try{

        const subRes = await this.$api.home.getSignup({
          ...this.formData
        })
        if (subRes.code === 200) {
          uni.showToast({
            title: '提交成功',
            icon: 'success'
          })
          setTimeout(() => {
            uni.navigateBack()
          }, 800)
        } else {
          uni.showToast({
            title: subRes.msg,
            icon: 'none'
          })
        }
      } catch (error) {
        uni.showToast({
          title: error.msg,
          icon: 'none'
        })
      }
        
    }
  },
  onLoad(options) {
    this.formData.linkId = options.id
  }
}
</script>

<style scoped lang="scss">
.submit-container {
  background: #F2F2F2;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.main-content {
  flex: 1;
  padding: 40rpx 32rpx 120rpx;
}

.form-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  margin: 0 18rpx;
  height: 732rpx;
  border-radius: 32rpx;
  padding-top: 40rpx;
  padding-right: 32rpx;
  padding-bottom: 40rpx;
  padding-left: 32rpx;
  gap: 44rpx;

  // box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
  
  .title-section {
    // margin-bottom: 40rpx;
    
    .main-title {
      font-size: 32rpx;
      font-weight: 500;
      color: $primary-text-color;
      line-height: 1.4;
    }
  }
}

.form-item {
  // margin-bottom: 48rpx;
  
  &:last-child {
    margin-bottom: 0;
  }
  
  .form-label {
    display: block;
    font-size: 26rpx;
    line-height: 1.4;
    color: $primary-text-color;
    margin-bottom: 10rpx;
  }
}

.bottom-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff;
  padding: 24rpx 50rpx;
  z-index: 999;
}
</style>