alighasami/vant
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

[Improvement] Sku: support i18n (#439)

Browse Source
This commit is contained in:
neverland
2017-12-15 15:38:32 +08:00
committed by GitHub
parent 2db9b12816
commit f43b496333
13 changed files with 846 additions and 507 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/locale/lang/en-US.js
+33
View File
@@ -93,5 +93,38 @@ export default {
vanAddressList: {
address: 'Address',
add: 'Add new address'
},
vanSku: {
unavailable: 'The product is no longer available for purchase',
spec: 'Please select the full specification',
least: 'Choose at least one',
quota: quota => `Buy up to ${quota} items`,
inventory: 'Inventory shortage',
purchase: count => `You have purchased ${count} items`
},
vanSkuActions: {
cart: 'Add to cart',
buy: 'Buy'
},
vanSkuMessages: {
fill: 'Please fill',
number: 'Please fill in the correct number format message',
email: 'Please fill in the correct email message',
idcard: 'Please fill in the correct ID number message',
overlimit: 'not more than 200 words',
placeholder: {
'id_no': 'Idcard Number',
text: 'Text',
tel: 'Number',
email: 'Email',
date: 'Date',
time: 'Time',
textarea: 'Text'
}
},
vanSkuStepper: {
title: 'Quantity',
remain: count => `Remain ${count} items`,
quota: quota => `Buy up to ${quota} items`
}
};
packages/locale/lang/zh-CN.js
+33
View File
@@ -97,5 +97,38 @@ export default {
vanAddressList: {
address: '收货地址',
add: '新增收货地址'
},
vanSku: {
unavailable: '商品已经无法购买啦',
spec: '请选择完整的规格',
least: '至少选择一件',
quota: quota => `限购${quota}件`,
inventory: '库存不足',
purchase: count => `您已购买${count}件`
},
vanSkuActions: {
cart: '加入购物车',
buy: '立即购买'
},
vanSkuMessages: {
fill: '请填写',
number: '请填写正确的数字格式留言',
email: '请填写正确的邮箱',
'id_no': '请填写正确的身份证号码',
overlimit: '写的太多了，不要超过200字',
placeholder: {
'id_no': '输入18位身份证号码',
text: '输入文本',
tel: '输入数字',
email: '输入邮箱',
date: '点击选择日期',
time: '点击选择时间',
textarea: '点击填写段落文本'
}
},
vanSkuStepper: {
title: '购买数量',
remain: count => `剩余${count}件`,
quota: quota => `每人限购${quota}件`
}
};
packages/sku/components/SkuActions.vue
+7 -9
View File
@@ -1,14 +1,15 @@
<template>
<div class="van-sku-actions">
<van-button v-if="showAddCartBtn" bottomAction @click="onAddCartClicked">加入购物车</van-button>
<van-button type="primary" bottomAction @click="onBuyClicked">{{ buyText }}</van-button>
<van-button v-if="showAddCartBtn" bottomAction @click="onAddCartClicked">{{ $t('cart') }}</van-button>
<van-button type="primary" bottomAction @click="onBuyClicked">{{ buyText || $t('buy') }}</van-button>
</div>
</template>
<script>
import VanButton from '../../button';
import { create } from '../../utils';
export default {
export default create({
name: 'van-sku-actions',
components: {
@@ -16,12 +17,9 @@ export default {
},
props: {
buyText: String,
skuEventBus: Object,
showAddCartBtn: Boolean,
buyText: {
type: String,
default: '立即购买'
}
showAddCartBtn: Boolean
},
methods: {
@@ -32,5 +30,5 @@ export default {
this.skuEventBus.$emit('sku:buy');
}
}
};
});
</script>
packages/sku/components/SkuHeader.vue
+4 -2
View File
@@ -12,7 +12,9 @@
</template>
<script>
export default {
import { create } from '../../utils';
export default create({
name: 'van-sku-header',
props: {
@@ -62,5 +64,5 @@ export default {
}
}
}
};
});
</script>
packages/sku/components/SkuMessages.vue
+18 -17
View File
@@ -6,7 +6,7 @@
:key="`${goodsId}-${index}`"
:required="message.required == '1'"
:label="message.name"
:placeholder="placeholderMap.textarea"
:placeholder="getPlaceholder('textarea')"
type="textarea"
v-model="messageValues[index]">
</field>
@@ -14,7 +14,7 @@
:key="`${goodsId}-${index}`"
:required="message.required == '1'"
:label="message.name"
:placeholder="placeholderMap[message.type]"
:placeholder="getPlaceholder(message.type)"
:type="getType(message)"
v-model="messageValues[index]">
</field>
@@ -23,13 +23,13 @@
</template>
<script>
import { create } from '../../utils';
import Field from '../../field';
import CellGroup from '../../cell-group';
import validateEmail from '../../utils/validate/email';
import validateNumber from '../../utils/validate/number';
import { DEFAULT_PLACEHOLDER_MAP } from '../constants';
export default {
export default create({
name: 'van-sku-messages',
components: {
@@ -43,12 +43,6 @@ export default {
goodsId: [Number, String]
},
data() {
return {
placeholderMap: Object.assign({}, DEFAULT_PLACEHOLDER_MAP, this.messagePlaceholderMap)
};
},
computed: {
internalMessages() {
if (Object.prototype.toString.call(this.messages) === '[object Array]') {
@@ -56,6 +50,7 @@ export default {
}
return [];
},
messageValues() {
const messageValues = [];
this.internalMessages.forEach((message, index) => {
@@ -71,6 +66,7 @@ export default {
if (type === 'id_no') return 'text';
return datetime > 0 ? 'datetime-local' : type;
},
getMessages() {
const messages = {};
@@ -83,6 +79,7 @@ export default {
return messages;
},
getCartMessages() {
const messages = {};
@@ -96,6 +93,11 @@ export default {
return messages;
},
getPlaceholder(key) {
return this.messagePlaceholderMap[key] || this.$t(`placeholder.${key}`);
},
validateMessages() {
const values = this.messageValues;
@@ -109,27 +111,26 @@ export default {
if (message.type === 'image') {
continue;
} else {
return `请填写${message.name}`;
return this.$t('fill') + message.name;
}
}
} else {
if (message.type === 'tel' && !validateNumber(value)) {
return '请填写正确的数字格式留言';
return this.$t('number');
}
if (message.type === 'email' && !validateEmail(value)) {
return '请填写正确的邮箱';
return this.$t('email');
}
if (message.type === 'id_no' && (value.length < 15 || value.length > 18)) {
return '请填写正确的身份证号码';
return this.$t('id_no');
}
}
if (value.length > 200) {
return `${message.name} 写的太多了<br/>不要超过200字`;
return `${message.name} ${this.$t('overlimit')}`;
}
}
}
}
};
});
</script>
packages/sku/components/SkuStepper.vue
+8 -10
View File
@@ -1,7 +1,7 @@
<template>
<div class="van-sku-stepper-stock">
<div class="van-sku-stepper-container">
<div class="van-sku__stepper-title">{{ stepperTitle }}：</div>
<div class="van-sku__stepper-title">{{ stepperTitle || $t('title') }}：</div>
<stepper
class="van-sku__stepper"
v-model="currentNum"
@@ -11,18 +11,19 @@
@overlimit="handleOverLimit">
</stepper>
</div>
<div v-if="!hideStock" class="van-sku__stock">剩余{{ stock }}件</div>
<div v-if="quota > 0" class="van-sku__quota">每人限购{{ quota }}件</div>
<div v-if="!hideStock" class="van-sku__stock">{{ $t('remain', stock) }}</div>
<div v-if="quota > 0" class="van-sku__quota">{{ $t('quota', quota) }}</div>
</div>
</template>
<script>
import { create } from '../../utils';
import Stepper from '../../stepper';
import { LIMIT_TYPE, DEFAULT_BUY_TEXT } from '../constants';
import { LIMIT_TYPE } from '../constants';
const { QUOTA_LIMIT, STOCK_LIMIT } = LIMIT_TYPE;
export default {
export default create({
name: 'van-sku-stepper',
components: {
@@ -35,6 +36,7 @@ export default {
selectedSku: Object,
selectedSkuComb: Object,
selectedNum: Number,
stepperTitle: String,
quota: Number,
quotaUsed: Number,
hideStock: {
@@ -44,10 +46,6 @@ export default {
disableStepperInput: {
type: Boolean,
default: false
},
stepperTitle: {
type: String,
default: DEFAULT_BUY_TEXT
}
},
@@ -107,5 +105,5 @@ export default {
});
}
}
};
});
</script>
packages/sku/constants.js
-14
View File
@@ -2,17 +2,3 @@ export const LIMIT_TYPE = {
QUOTA_LIMIT: 0,
STOCK_LIMIT: 1
};
export const DEFAULT_BUY_TEXT = '立即购买';
export const DEFAULT_STEPPER_TITLE = '购买数量';
export const DEFAULT_PLACEHOLDER_MAP = {
'id_no': '输入18位身份证号码',
text: '输入文本',
tel: '输入数字',
email: '输入邮箱',
date: '点击选择日期',
time: '点击选择时间',
textarea: '点击填写段落文本'
};
packages/sku/containers/SkuContainer.vue
+8 -11
View File
@@ -81,7 +81,7 @@ import SkuStepper from '../components/SkuStepper';
import SkuMessages from '../components/SkuMessages';
import SkuActions from '../components/SkuActions';
import { isAllSelected, getSkuComb, getSelectedSkuValues } from '../utils/skuHelper';
import { LIMIT_TYPE, DEFAULT_STEPPER_TITLE } from '../constants';
import { LIMIT_TYPE } from '../constants';
import { create } from '../../utils';
const { QUOTA_LIMIT } = LIMIT_TYPE;
@@ -121,10 +121,7 @@ export default create({
default: true
},
buyText: String,
stepperTitle: {
type: String,
default: DEFAULT_STEPPER_TITLE
},
stepperTitle: String,
bodyOffsetTop: {
type: Number,
default: 200
@@ -260,7 +257,7 @@ export default create({
},
validateSku() {
if (this.selectedNum === 0) {
return '商品已经无法购买啦';
return this.$t('unavailable');
}
if (this.isSkuCombSelected) {
@@ -268,7 +265,7 @@ export default create({
// sku留言没有错误则校验通过
return error;
} else {
return '请选择完整的规格';
return this.$t('spec');
}
},
handleCloseClicked() {
@@ -291,14 +288,14 @@ export default create({
},
handleOverLimit({ action, limitType, quota, quotaUsed }) {
if (action === 'minus') {
Toast('至少选择一件');
Toast(this.$t('least'));
} else if (action === 'plus') {
if (limitType === QUOTA_LIMIT) {
let msg = `限购${quota}件`;
if (quotaUsed > 0) msg += `，您已购买${quotaUsed}件`;
let msg = this.$t('quota', quota);
if (quotaUsed > 0) msg += `，${this.$t('purchase', quotaUsed)}`;
Toast(msg);
} else {
Toast('库存不足');
Toast(this.$t('inventory'));
}
}
},