分布表单

mock/form.js

@@ -0,0 +1,13 @@
+function form(method) {
+  let res = null;
+  switch (method) {
+    case "POST":
+      res = { message: "OK" };
+      break;
+    default:
+      res = null;
+  }
+  return res;
+}
+
+module.exports = form;

src/main.js

@@ -1,7 +1,7 @@
 import Vue from "vue";
 import App from "./App.vue";
 import router from "./router";
-import store from "./store";
+import store from "./store/index.js";
 import {
   Button,
   Layout,

src/store.js → src/store/index.js

@@ -1,10 +1,12 @@
 import Vue from "vue";
 import Vuex from "vuex";
+import form from "./modules/form";
 
 Vue.use(Vuex);
 
 export default new Vuex.Store({
   state: {},
-  mutations: {},
-  actions: {}
+  modules: {
+    form
+  }
 });

src/store/modules/form.js

@@ -0,0 +1,36 @@
+import router from "../../router";
+import request from "../../utils/request";
+
+const state = {
+  step: {
+    payAccount: "123456"
+  }
+};
+
+const actions = {
+  async submitStepForm({ commit }, { payload }) {
+    await request({
+      url: "/api/form",
+      method: "POST",
+      data: payload
+    });
+    commit("saveStepFormData", payload);
+    router.push("/form/step-form/result");
+  }
+};
+
+const mutations = {
+  saveStepFormData(state, { payload }) {
+    state.step = {
+      ...state.step,
+      ...payload
+    };
+  }
+};
+
+export default {
+  namespaced: true,
+  state,
+  actions,
+  mutations
+};

src/views/Forms/StepForm/Step1.vue

@@ -1,9 +1,60 @@
 <template>
-  <div>第一步</div>
+  <div>
+    <a-form layout="horizontal" :form="form">
+      <a-form-item
+        label="付款账户"
+        :label-col="formItemLayout.labelCol"
+        :wrapper-col="formItemLayout.wrapperCol"
+      >
+        <a-input
+          v-decorator="[
+            'payAccount',
+            {
+              initialValue: step.payAccount,
+              rules: [{ required: true, message: '请输入付款账号' }]
+            }
+          ]"
+          placeholder="请输入付款账号"
+        />
+      </a-form-item>
+      <a-form-item>
+        <a-button type="primary" @click="handleSubmit">下一步</a-button>
+      </a-form-item>
+    </a-form>
+  </div>
 </template>
 
 <script>
-export default {};
+export default {
+  data() {
+    this.form = this.$form.createForm(this);
+    return {
+      formItemLayout: {
+        labelCol: { span: 4 },
+        wrapperCol: { span: 14 }
+      }
+    };
+  },
+  computed: {
+    step() {
+      return this.$store.state.form.step;
+    }
+  },
+  methods: {
+    handleSubmit() {
+      const { form, $router, $store } = this;
+      form.validateFields((err, values) => {
+        if (!err) {
+          $store.commit({
+            type: "form/saveStepFormData",
+            payload: values
+          });
+          $router.push("/form/step-form/confirm");
+        }
+      });
+    }
+  }
+};
 </script>
 
 <style></style>

src/views/Forms/StepForm/Step2.vue

@@ -1,9 +1,71 @@
 <template>
-  <div>第二步</div>
+  <div>
+    <a-form layout="horizontal" :form="form">
+      <a-form-item
+        label="付款账户"
+        :label-col="formItemLayout.labelCol"
+        :wrapper-col="formItemLayout.wrapperCol"
+      >
+        {{ step.payAccount }}
+      </a-form-item>
+      <a-form-item
+        label="密码"
+        :label-col="formItemLayout.labelCol"
+        :wrapper-col="formItemLayout.wrapperCol"
+      >
+        <a-input
+          v-decorator="[
+            'password',
+            {
+              initialValue: step.payAccount,
+              rules: [{ required: true, message: '请输入密码' }]
+            }
+          ]"
+          type="password"
+          placeholder="请输入付款密码"
+        />
+      </a-form-item>
+      <a-form-item>
+        <a-button type="primary" @click="handleSubmit">提交</a-button>
+        <a-button style="margin-left: 8px" @click="onPrev">上一步</a-button>
+      </a-form-item>
+    </a-form>
+  </div>
 </template>
 
 <script>
-export default {};
+export default {
+  data() {
+    this.form = this.$form.createForm(this);
+    return {
+      formItemLayout: {
+        labelCol: { span: 4 },
+        wrapperCol: { span: 14 }
+      }
+    };
+  },
+  computed: {
+    step() {
+      return this.$store.state.form.step;
+    }
+  },
+  methods: {
+    handleSubmit() {
+      const { form, $store, step } = this;
+      form.validateFields((err, values) => {
+        if (!err) {
+          $store.dispatch({
+            type: "form/submitStepForm",
+            payload: { ...step, ...values }
+          });
+        }
+      });
+    },
+    onPrev() {
+      this.$router.push("/form/step-form/info");
+    }
+  }
+};
 </script>
 
 <style></style>

src/views/Forms/StepForm/Step3.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>第三步</div>
+  <div>操作成功，预计两小时到账</div>
 </template>
 
 <script>