0.0.14

src/components/ReceiverAccount.vue

@@ -0,0 +1,45 @@
+<template>
+  <a-input-group compact>
+    <a-select v-model="type" style="width: 130px" @change="handleTypeChange">
+      <a-select-option value="alipay">支付宝</a-select-option>
+      <a-select-option value="bank">银行账户</a-select-option>
+    </a-select>
+    <a-input
+      style="width: calc(100% - 130px)"
+      v-model="number"
+      @change="handleNumberChange"
+    />
+  </a-input-group>
+</template>
+
+<script>
+export default {
+  props: {
+    value: {
+      type: Object
+    }
+  },
+  watch: {
+    value(val) {
+      Object.assign(this, val);
+    }
+  },
+  data() {
+    const { type, number } = this.value || {};
+    return {
+      type: type || "alipay",
+      number: number || ""
+    };
+  },
+  methods: {
+    handleTypeChange(val) {
+      this.$emit("change", { ...this.value, type: val });
+    },
+    handleNumberChange(e) {
+      this.$emit("change", { ...this.value, number: e.target.value });
+    }
+  }
+};
+</script>
+
+<style></style>

src/main.js

@@ -10,7 +10,8 @@ import {
   Radio,
   Menu,
   Form,
-  Input
+  Input,
+  Select
 } from "ant-design-vue";
 import Authorized from "./components/Authorized";
 import Auth from "./directives/auth";
@@ -25,6 +26,7 @@ Vue.use(Radio);
 Vue.use(Menu);
 Vue.use(Form);
 Vue.use(Input);
+Vue.use(Select);
 Vue.component("Authorized", Authorized);
 Vue.use(Auth);
 

src/store/modules/form.js

@@ -3,7 +3,11 @@ import request from "../../utils/request";
 
 const state = {
   step: {
-    payAccount: "123456"
+    payAccount: "123456",
+    receiverAccount: {
+      type: "alipay",
+      number: ""
+    }
   }
 };
 

src/views/Forms/StepForm/Step1.vue

@@ -17,6 +17,33 @@
           placeholder="请输入付款账号"
         />
       </a-form-item>
+      <a-form-item
+        label="收款账户"
+        :label-col="formItemLayout.labelCol"
+        :wrapper-col="formItemLayout.wrapperCol"
+      >
+        <ReceiverAccount
+          v-decorator="[
+            'receiverAccount',
+            {
+              initialValue: step.receiverAccount,
+              rules: [
+                {
+                  required: true,
+                  message: '请输入收款账号',
+                  validator: (rule, value, callback) => {
+                    if (value && value.number) {
+                      callback();
+                    } else {
+                      callback(false);
+                    }
+                  }
+                }
+              ]
+            }
+          ]"
+        />
+      </a-form-item>
       <a-form-item>
         <a-button type="primary" @click="handleSubmit">下一步</a-button>
       </a-form-item>
@@ -25,7 +52,9 @@
 </template>
 
 <script>
+import ReceiverAccount from "@/components/ReceiverAccount";
 export default {
+  components: { ReceiverAccount },
   data() {
     this.form = this.$form.createForm(this);
     return {

vue.config.js

@@ -1,3 +1,4 @@
+const path = require("path");
 module.exports = {
   css: {
     loaderOptions: {
@@ -6,6 +7,13 @@ module.exports = {
       }
     }
   },
+  configureWebpack: {
+    resolve: {
+      alias: {
+        "@": path.join(__dirname, "src")
+      }
+    }
+  },
   devServer: {
     proxy: {
       "/api": {