app/pages/mine/openShop/secon.vue

<template>
  <div class="photo-msg">
    <u-form ref="secondForm" :model="form" :rules="rules" :label-width="250">
      <h4>财务资质信息</h4>
      <u-form-item prop="settlementBankAccountName" label="银行开户名">
        <u-input
          type="text"
          v-model="form.settlementBankAccountName"
          placeholder="请填写银行开户名称"
        />
      </u-form-item>
      <u-form-item prop="settlementBankAccountNum" label="银行账号">
        <u-input
          type="text"
          v-model="form.settlementBankAccountNum"
          placeholder="请填写银行账号"
        />
      </u-form-item>
      <u-form-item prop="settlementBankBranchName" label="开户银行支行名称">
        <u-input
          type="text"
          v-model="form.settlementBankBranchName"
          placeholder="请填写开户银行支行名称"
        />
      </u-form-item>
      <u-form-item prop="settlementBankJointName" label="支行联行号">
        <u-input
          type="text"
          v-model="form.settlementBankJointName"
          placeholder="请填写支行联行号"
        />
      </u-form-item>

      <u-form-item>
        <!-- <button @click="uni.navigateBack()" :style="{background:'#F50505'}">返回</button> -->
        <button type="primary" @click="next" :style="{ background: '#FE3C3C' }" class="bunem">
          填写其他信息
        </button>
      </u-form-item>
    </u-form>
  </div>
</template>
<script>
import { applySecond } from "@/api/goods";
export default {
  //   props: {
  //     content: {
  //       default: {},
  //       type: Object,
  //     },
  //   },
  data() {
    return {
      loading: false, // 加载状态
      form: {}, // 表单数据
      rules: {
        // 验证规则
        settlementBankAccountName: [
          { required: true, message: "请填写银行开户名称", trigger: "blur" },
          {
            min: 2,
            max: 20,
            message: "长度在 2 到 20 个字符",
            trigger: "blur",
          },
        ],
        settlementBankAccountNum: [
          { required: true, message: "请填写银行账号", trigger: "blur" },
          {
            pattern: /^\d{16,19}$/,
            message: "请输入 16 到 19 位的银行账号",
            trigger: "blur",
          },
        ],
        settlementBankBranchName: [
          {
            required: true,
            message: "请填写开户银行支行名称",
            trigger: "blur",
          },
          {
            min: 4,
            max: 50,
            message: "长度在 4 到 50 个字符",
            trigger: "blur",
          },
        ],
        settlementBankJointName: [
          { required: true, message: "请填写支行联行号", trigger: "blur" },
          {
            pattern: /^\d{12}$/,
            message: "请输入 12 位的支行联行号",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    ngm() {
      uni.navigateBack({
        delta: 1, // 返回上一级页面
      });
    },
    // 下一步
    next() {
      this.$refs.secondForm.validate((valid) => {
        if (valid) {
          this.loading = true;
          if (this.form.settlementBankJointName != "") {
            applySecond(this.form)
              .then((res) => {
                if (res.data.success) {
                  uni.navigateTo({
                  url: "/pages/mine/openShop/ThirdApply",
                });

                }else {
                  uni.showToast({
                    title: "请正确输入",
                    icon: "none",
                    duration: 1500,
                  });
                }
               
              })
              .catch(() => {
                this.loading = false;
                uni.showToast({
                    title: "请正确输入",
                    icon: "none",
                    duration: 1500,
                  });
              });
          } else {
            console.log("error");
          }
        }
      });
    },
  },
  mounted() {
    // if (this.content != {}) {
    //   this.form = JSON.parse(JSON.stringify(this.content));
    //   this.$forceUpdate();
    // }
    // this.$refs.secondForm.resetFields();
  },
};
</script>
<style lang="scss" scoped>
h4 {
  margin-bottom: 10px;
  padding: 0 10px;
  border: 1px solid #ddd;
  background-color: #f8f8f8;
  font-weight: bold;
  color: #333;
  font-size: 14px;
  line-height: 40px;
  text-align: left;
}
.ivu-input-wrapper {
  width: 300px;
}
.photo-msg {
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
}
::v-deep {
  // .u-form-item--left__content {
  //   width: 100px;
  //   white-space: nowrap;
  // }
  .bunem{
    width: 309px;
    margin-top: 20px;
    height: 32px;
    display: flex;
    align-items: #ffffff;
    margin-bottom: 35px;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 14px;
  }
  .u-input {
    margin-left: 30px; // 可根据实际情况调整这个值
  }
}
</style>