chore: add i18n support for StepForm.vue; 🌟

src/pages/form/step/Step1.vue

@@ -2,43 +2,43 @@
   <div>
     <a-form style="max-width: 500px; margin: 40px auto 0;">
       <a-form-item
-        label="付款账户"
-        :labelCol="{span: 5}"
-        :wrapperCol="{span: 19}"
+        :label="$t('payment')"
+        :labelCol="{span: 7}"
+        :wrapperCol="{span: 17}"
       >
         <a-select value="1" placeholder="ant-design@alipay.com">
           <a-select-option value="1">ant-design@alipay.com</a-select-option>
         </a-select>
       </a-form-item>
       <a-form-item
-        label="收款账户"
-        :labelCol="{span: 5}"
-        :wrapperCol="{span: 19}"
+        :label="$t('collection')"
+        :labelCol="{span: 7}"
+        :wrapperCol="{span: 17}"
       >
         <a-input-group :compact="true" style="display: inline-block; vertical-align: middle">
           <a-select defaultValue="alipay" style="width: 100px">
-            <a-select-option value="alipay">支付宝</a-select-option>
-            <a-select-option value="wexinpay">微信</a-select-option>
+            <a-select-option value="alipay">{{$t('alipay')}}</a-select-option>
+            <a-select-option value="wexinpay">{{$t('wechat')}}</a-select-option>
           </a-select>
           <a-input :style="{width: 'calc(100% - 100px)'}" value="test@example.com"/>
         </a-input-group>
       </a-form-item>
       <a-form-item
-        label="收款人姓名"
-        :labelCol="{span: 5}"
-        :wrapperCol="{span: 19}"
+        :label="$t('collectionName')"
+        :labelCol="{span: 7}"
+        :wrapperCol="{span: 17}"
       >
         <a-input value="Alex" />
       </a-form-item>
       <a-form-item
-        label="转账金额"
-        :labelCol="{span: 5}"
-        :wrapperCol="{span: 19}"
+        :label="$t('transferAmount')"
+        :labelCol="{span: 7}"
+        :wrapperCol="{span: 17}"
       >
         <a-input prefix="￥" value="5000" />
       </a-form-item>
-      <a-form-item :wrapperCol="{span: 19, offset: 5}">
-        <a-button type="primary" @click="nextStep">下一步</a-button>
+      <a-form-item :wrapperCol="{span: 17, offset: 7}">
+        <a-button type="primary" @click="nextStep">{{$t('nextStep')}}</a-button>
       </a-form-item>
     </a-form>
   </div>
@@ -47,6 +47,7 @@
 <script>
 export default {
   name: 'Step1',
+  i18n: require('./i18n'),
   methods: {
     nextStep () {
       this.$emit('nextStep')

src/pages/form/step/Step2.vue

@@ -3,44 +3,44 @@
     <a-form style="max-width: 500px; margin: 40px auto 0;">
       <a-alert
         :closable="true"
-        message="确认转账后，资金将直接打入对方账户，无法退回。"
+        :message="$t('note')"
         style="margin-bottom: 24px;"
       />
       <a-form-item
-        label="付款账户"
-        :labelCol="{span: 5}"
-        :wrapperCol="{span: 19}"
+        :label="$t('payment')"
+        :labelCol="{span: 7}"
+        :wrapperCol="{span: 17}"
         class="stepFormText"
       >
         ant-design@alipay.com
       </a-form-item>
       <a-form-item
-        label="收款账户"
-        :labelCol="{span: 5}"
-        :wrapperCol="{span: 19}"
+        :label="$t('collection')"
+        :labelCol="{span: 7}"
+        :wrapperCol="{span: 17}"
         class="stepFormText"
       >
         test@example.com
       </a-form-item>
       <a-form-item
-        label="收款人姓名"
-        :labelCol="{span: 5}"
-        :wrapperCol="{span: 19}"
+        :label="$t('collectionName')"
+        :labelCol="{span: 7}"
+        :wrapperCol="{span: 17}"
         class="stepFormText"
       >
         Alex
       </a-form-item>
       <a-form-item
-        label="转账金额"
-        :labelCol="{span: 5}"
-        :wrapperCol="{span: 19}"
+        :label="$t('transferAmount')"
+        :labelCol="{span: 7}"
+        :wrapperCol="{span: 17}"
         class="stepFormText"
       >
         ￥ 5,000.00
       </a-form-item>
-      <a-form-item :wrapperCol="{span: 19, offset: 5}">
-        <a-button :loading="loading" type="primary" @click="nextStep">提交</a-button>
-        <a-button style="margin-left: 8px" @click="prevStep">上一步</a-button>
+      <a-form-item :wrapperCol="{span: 17, offset: 7}">
+        <a-button :loading="loading" type="primary" @click="nextStep">{{$t('submit')}}</a-button>
+        <a-button style="margin-left: 8px" @click="prevStep">{{$t('preStep')}}</a-button>
       </a-form-item>
     </a-form>
   </div>
@@ -49,6 +49,7 @@
 <script>
 export default {
   name: 'Step2',
+  i18n: require('./i18n'),
   data () {
     return {
       loading: false

src/pages/form/step/Step3.vue

@@ -1,19 +1,16 @@
 <template>
-  <div>
-    <a-form style="max-width: 500px; margin: 40px auto 0;">
-      <result title="支付完成" :is-success="true" />
-      <a-form-item :wrapperCol="{span: 16, offset: 8}">
-        <a-button type="primary" @click="doOnceAgin">再转一笔</a-button>
-        <a-button style="margin-left: 8px">查看账单</a-button>
-      </a-form-item>
-    </a-form>
+  <div style="max-width: 500px; margin: 40px auto 0; text-align: center">
+    <result :title="$t('success')" :is-success="true" />
+    <a-button type="primary" @click="doOnceAgin">{{$t('doAgain')}}</a-button>
+    <a-button style="margin-left: 8px">{{$t('bill')}}</a-button>
   </div>
 </template>
 
 <script>
-import Result from '../../../components/result/Result'
+import Result from '@/components/result/Result'
 export default {
   name: 'Step3',
+  i18n: require('./i18n'),
   components: {Result},
   methods: {
     doOnceAgin () {

src/pages/form/step/StepForm.vue

@@ -1,9 +1,9 @@
 <template>
   <a-card :bordered="false">
     <a-steps class="steps" :current="current">
-      <a-step title="填写转账信息" />
-      <a-step title="确认转账信息" />
-      <a-step title="完成" />
+      <a-step :title="$t('input')" />
+      <a-step :title="$t('confirm')" />
+      <a-step :title="$t('complete')" />
     </a-steps>
     <div class="content">
       <step1 v-if="current === 0" @nextStep="nextStep"></step1>
@@ -20,13 +20,18 @@ import Step3 from './Step3'
 
 export default {
   name: 'StepForm',
+  i18n: require('./i18n'),
   components: {Step1, Step2, Step3},
   data () {
     return {
-      desc: '将一个冗长或用户不熟悉的表单任务分成多个步骤，指导用户完成。',
       current: 0
     }
   },
+  computed: {
+    desc() {
+      return this.$t('pageDesc')
+    }
+  },
   methods: {
     nextStep () {
       if (this.current < 2) {
@@ -47,7 +52,7 @@ export default {
 
 <style lang="less" scoped>
   .steps{
-    max-width: 750px;
+    max-width: 950px;
     margin: 16px auto;
   }
 </style>

src/pages/form/step/i18n.js

@@ -0,0 +1,61 @@
+module.exports = {
+  messages: {
+    CN: {
+      pageDesc: '将一个冗长或用户不熟悉的表单任务分成多个步骤，指导用户完成。',
+      input: '请填写转账信息',
+      confirm: '确认转账信息',
+      complete: '完成',
+      payment: '付款账户',
+      collection: '收款账户',
+      alipay: '支付宝',
+      wechat: '微信',
+      collectionName: '收款人姓名',
+      transferAmount: '转账金额',
+      nextStep: '下一步',
+      preStep: '上一步',
+      submit: '提交',
+      note: '确认转账后，资金将直接打入对方账户，无法退回。',
+      success: '支付完成',
+      doAgain: '再转一笔',
+      bill: '查看账单'
+    },
+    HK: {
+      pageDesc: '將一個冗長或用戶不熟悉的表單任務分成多個步驟，指導用戶完成。',
+      input: '請填寫轉賬信息',
+      confirm: '確認轉賬信息',
+      complete: '完成',
+      payment: '付款賬戶',
+      collection: '收款賬戶',
+      alipay: '支付寶',
+      wechat: '微信',
+      collectionName: '收款人姓名',
+      transferAmount: '裝張金額',
+      nextStep: '下一步',
+      preStep: '上一步',
+      submit: '提交',
+      note: '確認轉賬後，現金將直接打入對方賬戶，無法退回。',
+      success: '支付完成',
+      doAgain: '再轉一筆',
+      bill: '查看賬單'
+    },
+    US: {
+      pageDesc: 'Divide a long or unfamiliar form task into several steps to guide the user to complete it.',
+      input: 'Fill transfer information',
+      confirm: 'Confirm transfer information',
+      complete: 'Complete',
+      payment: 'Payment account',
+      collection: 'Collection account',
+      alipay: 'Alipay',
+      wechat: 'Wechat',
+      collectionName: 'Name of payee',
+      transferAmount: 'Transfer amount',
+      nextStep: 'Next',
+      preStep: 'Back',
+      submit: 'Submit',
+      note: 'After confirming the transfer, the funds will be directly transferred into the other party\'s account and cannot be returned.',
+      success: 'Payment successful',
+      doAgain: 'Do Again',
+      bill: 'Check the bill'
+    }
+  }
+}