shuili_manager/jwtech-h5-page/pages/capital/payment/edit.vue

<template>
  <view class="project-add">
    <!-- 项目新增表单卡片 -->
    <view class="form-card">
      <view class="form-title">资金支付</view>
      <view class="form-item">
        <text class="form-label">支付条款</text>
        <view class="form-content">
          <input v-model="form.projectName" class="form-input" placeholder="请输入支付条款" />
        </view>
      </view>
      <view class="form-item">
        <text class="form-label">支付期数</text>
        <view class="form-content">
          <input v-model="form.projectName" class="form-input" placeholder="请输入支付期数" />
        </view>
      </view>
      <view class="form-item">
        <text class="form-label">起始年月</text>
        <view class="form-content">
          <input v-model="form.projectName" class="form-input" placeholder="请选择起始年月" disabled/>
          <picker mode="region" v-model="form.region" @change="onRegionChange">
            <view class="form-select">
              选择
            </view>
          </picker>
        </view>
      </view>

      <view class="form-item">
        <text class="form-label">支付日期</text>
        <view class="form-content">
          <input v-model="form.projectName" class="form-input" placeholder="请选择支付日期" disabled/>
          <picker mode="selector" :range="projectTypes" v-model="form.projectType">
            <view class="form-select">
              选择
            </view>
          </picker>
        </view>
      </view>

      <view class="form-item">
        <text class="form-label">本期应付金额（万元）</text>
        <view class="form-content">
          <input v-model="form.legalEntity" class="form-input" placeholder="请输入本期应付金额（万元）" />
        </view>
      </view>

      <view class="form-item">
        <text class="form-label">本期实付金额（万元）</text>
        <view class="form-content">
          <input v-model="form.projectLeader" class="form-input" placeholder="请输入本期实付金额（万元）" />
        </view>
      </view>

      <view class="form-item">
        <text class="form-label">本期中央应付金额（万元）</text>
        <view class="form-content">
          <input v-model="form.leaderPhone" class="form-input" placeholder="请输入本期中央应付金额（万元）" type="number" />
        </view>
      </view>

      <view class="form-item">
        <text class="form-label">本期中央实付金额（万元）</text>
        <view class="form-content">
          <input v-model="form.legalRep" class="form-input" placeholder="请输入本期中央实付金额（万元）" />
        </view>
      </view>

      <view class="form-item">
        <text class="form-label">本期省级应付金额（万元）</text>
        <view class="form-content">
          <input v-model="form.legalRep" class="form-input" placeholder="请输入本期省级应付金额（万元）" />
        </view>
      </view>

      <view class="form-item">
        <text class="form-label">本期省级实付金额（万元）</text>
        <view class="form-content">
          <input v-model="form.legalRep" class="form-input" placeholder="请输入本期省级实付金额（万元）" />
        </view>
      </view>

      <view class="form-item">
        <text class="form-label">本期市级应付金额（万元）</text>
        <view class="form-content">
          <input v-model="form.legalRep" class="form-input" placeholder="请输入本期市级应付金额（万元）" />
        </view>
      </view>

      <view class="form-item">
        <text class="form-label">本期市级实付金额（万元）</text>
        <view class="form-content">
          <input v-model="form.legalRep" class="form-input" placeholder="请输入本期市级实付金额（万元）" />
        </view>
      </view>

      <view class="form-item">
        <text class="form-label">本期县级应付金额（万元）</text>
        <view class="form-content">
          <input v-model="form.legalRep" class="form-input" placeholder="请输入本期县级应付金额（万元）" />
        </view>
      </view>

      <view class="form-item">
        <text class="form-label">本期县级实付金额（万元）</text>
        <view class="form-content">
          <input v-model="form.legalRep" class="form-input" placeholder="请输入本期县级实付金额（万元）" />
        </view>
      </view>

      <view class="form-item">
        <text class="form-label">本期地方应付金额（万元）</text>
        <view class="form-content">
          <input v-model="form.legalRep" class="form-input" placeholder="请输入本期地方应付金额（万元）" />
        </view>
      </view>

      <view class="form-item">
        <text class="form-label">本期地方实付金额（万元）</text>
        <view class="form-content">
          <input v-model="form.legalRep" class="form-input" placeholder="请输入本期地方实付金额（万元）" />
        </view>
      </view>

      <view class="form-item">
        <text class="form-label">本期暂扣款（万元）</text>
        <view class="form-content">
          <input v-model="form.legalRep" class="form-input" placeholder="请输入本期暂扣款（万元）" />
        </view>
      </view>

      <view class="form-item">
        <text class="form-label">项目法人审核人</text>
        <view class="form-content">
          <input v-model="form.legalRep" class="form-input" placeholder="请输入项目法人审核人" />
        </view>
      </view>

      <view class="form-item">
        <text class="form-label">项目法人经办人</text>
        <view class="form-content">
          <input v-model="form.legalRep" class="form-input" placeholder="请输入项目法人经办人" />
        </view>
      </view>
    </view>

    <view class="cc-operation-row operation-row">
      <view class="buttons-group">
        <view class="button primary-button">确定</view>
        <view class="button default-button">取消</view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      form: {
        projectName: '',
        region: [],
        projectCode: '',
        projectType: 0,
        legalEntity: '',
        projectLeader: '',
        leaderPhone: '',
        legalRep: ''
      },
      projectTypes: ['请选择', '建筑', 'IT', '教育', '制造业'], // 可根据实际项目类型进行扩展
    };
  },
  methods: {
    // 处理选择行政区划的变化
    onRegionChange(e) {
      this.form.region = e.detail.value;
    },
    // 提交表单
    submitForm() {
      // 在这里处理表单提交的逻辑
      console.log("提交的表单数据：", this.form);
      // 你可以进行数据校验，提交到后端等操作
    }
  }
};
</script>

<style lang="scss" scoped>
.project-add {
  padding: 20px 20px 100px 20px;
  .form-card {
    background-color: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    .form-title {
      font-size: 18px;
      padding-bottom: 16px;
    }
    .form-item {
      .form-label {
        font-size: 14px;
        color: #595959;
        margin-bottom: 6px;
        display: block;
      }
      margin-bottom: 20px;
      .form-content {
        position: relative;
        padding-bottom: 16px;
        border-bottom: 1px solid #f0f0f0;
        .form-input {
          width: 100%;
          height: 30px;
          border-radius: 5px;
          font-size: 14px;
          color: #333;
        }
        .form-select {
          position: absolute;
          bottom: 4px;
          right: 0;
          color: #00B39D;
        }
      }
    }
  }
}



</style>