feat: all submitting logic for step-form

mock/server/config/routes.js

@@ -38,5 +38,28 @@ module.exports = {
       status: 'error',
       currentAuthority: 'guest'
     })
+  },
+
+  'POST /api/form/step': (req, res) => {
+    const {
+      payAccount,
+      receiverAccount,
+      receiverType,
+      receiverName,
+      amount,
+      password
+    } = req.body
+    if (password === 'admin') {
+      res.send({
+        errno: 0,
+        status: 'ok'
+      })
+    } else {
+      res.send({
+        errno: 1,
+        status: 'error',
+        message: 'Invalid username or password'
+      })
+    }
   }
 }

src/services/index.js

@@ -5,6 +5,10 @@ export function userLogin (token) {
   return baseRequest.post(routes.USER_TOKEN, token)
 }
 
+export function pushStepForm (formData) {
+  return baseRequest.post(routes.STEP_FORM, formData)
+}
+
 export function fetchAllAnalysis () {
   return baseRequest.get(routes.ANALYSIS)
 }

src/services/routes.js

@@ -6,6 +6,8 @@ export const baseURL = isDevMode
 
 export const USER_TOKEN = '/login'
 
+export const CURRENT_USER = '/user'
+
 export const ANALYSIS = '/analysis'
 
 export const WORKSPACE = '/workspace'
@@ -18,4 +20,4 @@ export const WORKSPACE_RADAR = '/workspace/radar'
 
 export const WORKSPACE_TEAMS = '/workspace/teams'
 
-export const CURRENT_USER = '/user'
+export const STEP_FORM = '/form/step'

src/store/modules/formStep/actions.js

@@ -0,0 +1,17 @@
+import { pushStepForm } from 'SERVICES'
+
+export default {
+  // Should secure password to transport (under HTTPS protocol)
+  // eg. md5(salt + form['password'])
+  pushStepForm ({ commit, state }, password) {
+    return pushStepForm({
+      ...state.form,
+      password
+    })
+      .then(res => res.data)
+      .then(res => {
+        if (res.errno !== 0) throw new Error(`[pushStepForm]: ${res.message}`)
+        return res
+      })
+  }
+}

src/store/modules/formStep/index.js

@@ -1,7 +1,9 @@
 import state from './state'
 import mutations from './mutations'
+import actions from './actions'
 
 export default {
   state,
-  mutations
+  mutations,
+  actions
 }

src/view/Form/Step/Confirm.vue

@@ -46,21 +46,19 @@
           type="primary"
           :loading="loading"
           @click="onSubmit"
-        >{{submitText}}</el-button>
-        <el-button type="plain" @click="onCancel">{{cancelText}}</el-button>
+        >{{text.submit}}</el-button>
+        <el-button type="plain" @click="onCancel">{{text.cancel}}</el-button>
       </el-form-item>
     </el-form>
   </div>
 </template>
 
 <script>
-import { mapState } from 'vuex'
+import { mapState, mapActions } from 'vuex'
 
 export default {
   data () {
     return {
-      submitText: '提交',
-      cancelText: '取消',
       confirmForm: {
         password: 'admin'
       },
@@ -71,6 +69,8 @@ export default {
         ]
       },
       text: {
+        submit: '提交',
+        cancel: '上一步',
         alert: '确认转账后，资金将直接打入对方账户，无法退回。',
         payAccount: '付款账号',
         receiverAccount: '收款人账号',
@@ -85,26 +85,34 @@ export default {
     updateBreadcrumb () {
       this.$emit('updateBreadcrumb', 'confirm')
     },
-    postAllForm () {
+    pushForm () {
       this.loading = true
-      // postFormData(this.confirmForm.password)
-      //   .then(() => {
-      //     this.loading = false
-      //     this.$router.push('success')
-      //   })
-      setTimeout(() => {
-        this.loading = false
-        this.$router.push('success')
-      }, 1000)
+      this.pushStepForm(this.confirmForm.password)
+        .then(() => {
+          this.loading = false
+          this.$router.push('success')
+        })
+        .catch((e) => {
+          this.loading = false
+          this.$message({
+            showClose: true,
+            message: '密码错误',
+            type: 'error'
+          })
+          console.error(e)
+        })
     },
     onSubmit () {
       this.$refs.confirmForm.validate()
-        .then(this.postAllForm)
+        .then(this.pushForm)
         .catch(err => console.error(`[validate]: ${err}`))
     },
     onCancel () {
       this.$router.push('info')
-    }
+    },
+    ...mapActions('formStep', [
+      'pushStepForm'
+    ])
   },
 
   computed: {