mirror of
https://github.com/iczer/vue-antd-admin
synced 2025-04-05 19:41:37 +08:00
chore: add i18n support for StepForm.vue; 🌟
This commit is contained in:
chenghongxing
parent
e6fb49260d
commit
8e72934d38
@ -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')
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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 () {
|
||||
|
||||
@ -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>
|
||||
|
||||
61
src/pages/form/step/i18n.js
Normal file
61
src/pages/form/step/i18n.js
Normal 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'
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user