sl-sfy-safety/src/views/form/stepForm/Step2.vue

<template>
  <el-form
    ref="formRef"
    :label-width="90"
    :model="formValue"
    :rules="rules"
    style="margin: 40px auto 0 0"
  >
    <el-form-item label="付款账户" prop="myAccount">
      <span>NaiveUiAdmin@163.com</span>
    </el-form-item>
    <el-form-item label="收款账户" prop="account">
      <span>NaiveUiAdmin@qq.com</span>
    </el-form-item>
    <el-form-item label="收款人姓名" prop="name">
      <span>Ah jung</span>
    </el-form-item>
    <el-form-item label="转账金额" prop="money">
      <span>￥1980</span>
    </el-form-item>
    <el-divider />
    <el-form-item label="支付密码" prop="password">
      <el-input v-model="formValue.password" type="password" />
    </el-form-item>
    <el-form-item>
      <el-space>
        <el-button :loading="loading" type="primary" @click="formSubmit(formRef)">提交</el-button>
        <el-button @click="prevStep">上一步</el-button>
      </el-space>
    </el-form-item>
  </el-form>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import { ElMessage } from 'element-plus';
  import type { ElForm } from 'element-plus';

  type FormInstance = InstanceType<typeof ElForm>;

  const formRef = ref<FormInstance>();

  const loading = ref(false);

  const formValue = ref({
    password: '086611',
  });

  const rules = {
    password: {
      required: true,
      message: '请输入支付密码',
      trigger: 'blur',
    },
  };

  const emit = defineEmits(['prevStep', 'nextStep']);

  function prevStep() {
    emit('prevStep');
  }

  function formSubmit(formEl: FormInstance | undefined) {
    if (!formEl) return;
    loading.value = true;
    formEl.validate((valid) => {
      if (valid) {
        setTimeout(() => {
          emit('nextStep');
        }, 1500);
      } else {
        ElMessage({
          message: '验证失败，请填写完整信息',
          type: 'danger',
        });
      }
    });
  }
</script>