zhjwxt/uniapp/pages/contract/fill.vue

<!--合同信息填写页面-->
<template>
  <view class="contract-fill" style="background-color: #181A20; min-height: 100vh;">
    <!-- 表单区域 -->
    <view class="form-section" style="padding: 20rpx;">
      <view class="form-card" style="background-color: #2A2A2A; border-radius: 12rpx; padding: 30rpx;">
        <view class="card-title" style="color: #fff; font-size: 32rpx; font-weight: bold; margin-bottom: 30rpx;">
          请填写以下信息
        </view>
        
        <view 
          v-for="field in formFields" 
          :key="field.placeholder"
          class="form-item"
          style="margin-bottom: 30rpx;"
        >
          <view class="field-label" style="color: #fff; font-size: 26rpx; margin-bottom: 15rpx;">
            {{ field.placeholder }}
            <text v-if="field.is_required" style="color: #e74c3c;">*</text>
          </view>
          
          <!-- 文本输入 -->
          <input 
            v-if="field.field_type === 'text'"
            v-model="formData[field.placeholder]"
            :placeholder="`请输入${field.placeholder}`"
            style="background-color: #3A3A3A; color: #fff; border: 2rpx solid #555; border-radius: 8rpx; padding: 20rpx; font-size: 26rpx;"
          />
          
          <!-- 数字输入 -->
          <input 
            v-else-if="field.field_type === 'number'"
            v-model="formData[field.placeholder]"
            type="number"
            :placeholder="`请输入${field.placeholder}`"
            style="background-color: #3A3A3A; color: #fff; border: 2rpx solid #555; border-radius: 8rpx; padding: 20rpx; font-size: 26rpx;"
          />
          
          <!-- 金额输入 -->
          <input 
            v-else-if="field.field_type === 'money'"
            v-model="formData[field.placeholder]"
            type="digit"
            :placeholder="`请输入${field.placeholder}`"
            style="background-color: #3A3A3A; color: #fff; border: 2rpx solid #555; border-radius: 8rpx; padding: 20rpx; font-size: 26rpx;"
          />
          
          <!-- 日期选择 -->
          <picker 
            v-else-if="field.field_type === 'date'"
            mode="date"
            :value="formData[field.placeholder]"
            @change="onDateChange($event, field.placeholder)"
          >
            <view 
              class="date-picker"
              style="background-color: #3A3A3A; color: #fff; border: 2rpx solid #555; border-radius: 8rpx; padding: 20rpx; font-size: 26rpx;"
            >
              {{ formData[field.placeholder] || `请选择${field.placeholder}` }}
            </view>
          </picker>
          
          <!-- 多行文本 -->
          <textarea 
            v-else-if="field.field_type === 'textarea'"
            v-model="formData[field.placeholder]"
            :placeholder="`请输入${field.placeholder}`"
            style="background-color: #3A3A3A; color: #fff; border: 2rpx solid #555; border-radius: 8rpx; padding: 20rpx; font-size: 26rpx; min-height: 120rpx;"
          />
        </view>
      </view>
    </view>

    <!-- 提交按钮 -->
    <view class="submit-section" style="padding: 40rpx 20rpx;">
      <button 
        class="submit-btn"
        style="background-color: rgb(41, 211, 180); color: #fff; border: none; border-radius: 25rpx; padding: 25rpx; font-size: 30rpx; width: 100%;"
        @click="submitForm"
        :disabled="submitting"
      >
        {{ submitting ? '提交中...' : '提交信息' }}
      </button>
    </view>
  </view>
</template>

<script>
import apiRoute from '@/api/apiRoute.js'

export default {
  data() {
    return {
      contractId: 0,
      formFields: [],
      formData: {},
      submitting: false
    }
  },
  
  onLoad(options) {
    this.contractId = options.id
    this.getFormFields()
  },
  
  methods: {
    async getFormFields() {
      try {
        const res = await apiRoute.getContractFormFields(this.contractId)
        this.formFields = res.data
        
        // 初始化表单数据
        this.formFields.forEach(field => {
          this.$set(this.formData, field.placeholder, field.default_value || '')
        })
      } catch (error) {
        uni.showToast({
          title: '获取表单失败',
          icon: 'none'
        })
      }
    },
    
    onDateChange(e, fieldName) {
      this.$set(this.formData, fieldName, e.detail.value)
    },
    
    validateForm() {
      for (let field of this.formFields) {
        if (field.is_required && !this.formData[field.placeholder]) {
          uni.showToast({
            title: `请填写${field.placeholder}`,
            icon: 'none'
          })
          return false
        }
        
        // 验证金额格式
        if (field.field_type === 'money' && this.formData[field.placeholder]) {
          const amount = parseFloat(this.formData[field.placeholder])
          if (isNaN(amount) || amount < 0) {
            uni.showToast({
              title: `${field.placeholder}格式不正确`,
              icon: 'none'
            })
            return false
          }
        }
        
        // 验证数字格式
        if (field.field_type === 'number' && this.formData[field.placeholder]) {
          const number = parseFloat(this.formData[field.placeholder])
          if (isNaN(number)) {
            uni.showToast({
              title: `${field.placeholder}必须是数字`,
              icon: 'none'
            })
            return false
          }
        }
      }
      return true
    },
    
    async submitForm() {
      if (!this.validateForm()) return
      
      this.submitting = true
      try {
        await apiRoute.submitContractFormData(this.contractId, this.formData)
        
        uni.showToast({
          title: '提交成功',
          icon: 'success'
        })
        
        setTimeout(() => {
          uni.navigateTo({
            url: `/pages-common/contract/contract_sign?id=${this.contractId}&contractName=${encodeURIComponent('合同签署')}`
          })
        }, 1500)
      } catch (error) {
        uni.showToast({
          title: '提交失败',
          icon: 'none'
        })
      } finally {
        this.submitting = false
      }
    }
  }
}
</script>

<style scoped>
.form-item {
  margin-bottom: 30rpx;
}

.field-label {
  margin-bottom: 15rpx;
}

.date-picker {
  display: flex;
  align-items: center;
  min-height: 40rpx;
}

input, textarea {
  width: 100%;
  box-sizing: border-box;
}

.submit-btn:disabled {
  opacity: 0.6;
}
</style>