chore: add i18n support for StepForm.vue; :star2:

chenghongxing

2020-07-16 8e72934d38f0fccdc90cd105690fc64c9c06912f

chore: add i18n support for StepForm.vue; :star2:

 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,11 +20,16 @@

export default {
  name: 'StepForm',
  i18n: require('./i18n'),
  components: {Step1, Step2, Step3},
  data () {
    return {
      desc: '将一个冗长或用户不熟悉的表单任务分成多个步骤，指导用户完成。',
      current: 0
    }
  },
  computed: {
    desc() {
      return this.$t('pageDesc')
    }
  },
  methods: {
@@ -47,7 +52,7 @@

<style lang="less" scoped>
  .steps{
    max-width: 750px;
    max-width: 950px;
    margin: 16px auto;
  }
</style>

 src/pages/form/step/i18n.js

New file
@@ -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'
    }
  }
}