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

[new feature] sku组件增加图片上传功能 (#612)

Browse Source 
* [new feature] sku组件增加图片上传功能
This commit is contained in:
wny
2018-02-07 11:29:07 +08:00
committed by GitHub
parent 30e42284e9
commit 7b89e11701
11 changed files with 361 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/locale/lang/en-US.js
+11
View File
@@ -113,10 +113,12 @@ export default {
},
vanSkuMessages: {
fill: 'Please fill',
upload: 'Please upload',
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',
onePic: 'only one picture',
placeholder: {
'id_no': 'Idcard Number',
text: 'Text',
@@ -127,6 +129,15 @@ export default {
textarea: 'Text'
}
},
vanSkuImgUploader: {
or: 'Or',
uploading: 'Uploading...',
rephoto: 'Take Again',
photo: 'Take',
reselect: 'Reselect',
select: 'Select Photo',
maxSize: maxSize => `The upload limit is up to ${maxSize}MB，please try to compress the photo`
},
vanSkuStepper: {
title: 'Quantity',
remain: count => `Remain ${count} items`,
packages/locale/lang/zh-CN.js
+11
View File
@@ -117,10 +117,12 @@ export default {
},
vanSkuMessages: {
fill: '请填写',
upload: '请上传',
number: '请填写正确的数字格式留言',
email: '请填写正确的邮箱',
'id_no': '请填写正确的身份证号码',
overlimit: '写的太多了，不要超过200字',
onePic: '仅限一张',
placeholder: {
'id_no': '输入18位身份证号码',
text: '输入文本',
@@ -131,6 +133,15 @@ export default {
textarea: '点击填写段落文本'
}
},
vanSkuImgUploader: {
or: '或',
uploading: '正在上传...',
rephoto: '重拍',
photo: '拍照',
reselect: '重新选择照片',
select: '选择照片',
maxSize: maxSize => `最大可上传图片为${maxSize}MB，请尝试压缩图片尺寸`
},
vanSkuStepper: {
title: '购买数量',
remain: count => `剩余${count}件`,
packages/sku/Sku.vue
+7 -3
View File
@@ -81,7 +81,7 @@
<sku-messages
ref="skuMessages"
:goods-id="goodsId"
:message-placeholder-map="messagePlaceholderMap"
:message-config="messageConfig"
:messages="sku.messages"
/>
</slot>
@@ -165,9 +165,13 @@ export default create({
type: Number,
default: 200
},
messagePlaceholderMap: {
messageConfig: {
type: Object,
default: () => ({})
default: () => ({
placeholderMap: {},
uploadImg: () => Promise.resolve(),
uploadMaxSize: 5
})
},
customStepperConfig: {
type: Object,
packages/sku/components/SkuImgUploader.vue
+122
View File
@@ -0,0 +1,122 @@
<template>
<div class="van-sku-img-uploader">
<!-- 头部 -->
<van-uploader
:disabled="!canUpload"
:before-read="beforeReadFile"
:after-read="afterReadFile"
accept="image/*">
<div class="van-sku-img-uploader__header">
<div v-if="paddingImg">{{ $t('uploading') }}</div>
<template v-else>
<van-icon name="photograph" />
<span class="label">{{ getPhotoText(value) }}</span> {{ $t('or') }}
<van-icon name="photo" />
<span class="label">{{ getPicText(value) }}</span>
</template>
</div>
</van-uploader>
<!-- 图片列表区域 -->
<div class="van-sku-img-uploader__imglist" v-if="paddingImg || imgList.length > 0">
<!-- 已有的图片,图片右上角显示删除按钮 -->
<div
v-for="(img, index) in imgList"
:key="index"
class="van-sku-img-uploader__img-container">
<span class="van-sku-img-uploader__delete-picture" @click="deleteImg(index)">
<van-icon name="clear" />
</span>
<img :src="img">
</div>
<!-- 正在上传的图片,有上传等待提示 -->
<div
v-if="paddingImg"
class="van-sku-img-uploader__img-container">
<img :src="paddingImg">
<van-loading class="van-sku-img-uploader__uploading" type="spinner" color="black" />
</div>
</div>
</div>
</template>
<script>
import Icon from '../../icon';
import Uploader from '../../uploader';
import Loading from '../../loading';
import { create } from '../../utils';
export default create({
name: 'van-sku-img-uploader',
components: {
'van-uploader': Uploader,
'van-icon': Icon,
'van-loading': Loading
},
props: {
value: String,
uploadImg: {
type: Function,
required: true
},
maxSize: {
type: Number,
default: 6
}
},
data() {
return {
// 正在上传的图片base 64
paddingImg: ''
};
},
computed: {
imgList() {
return this.value && !this.paddingImg ? [this.value] : [];
},
canUpload() {
// 判断当前是否允许上传图片
if (this.paddingImg) return false;
return true;
}
},
methods: {
getPhotoText(value) {
return value ? this.$t('rephoto') : this.$t('photo');
},
getPicText(value) {
return value ? this.$t('reselect') : this.$t('select');
},
beforeReadFile(file) {
// 拦截非图片的文件，以及大小限制
if (file.size > this.maxSize * 1024 * 1024) {
Toast(this.$t('maxSize', this.maxSize));
return false;
}
return true;
},
afterReadFile(file) {
// 上传文件
this.paddingImg = file.content;
this.uploadImg(file.file).then(img => {
this.updateImg(img);
this.$nextTick(() => {
this.paddingImg = '';
});
}).catch(() => {
this.paddingImg = '';
});
},
deleteImg() {
this.$emit('input', '');
},
updateImg(img) {
this.$emit('input', img);
}
}
});
</script>
packages/sku/components/SkuMessages.vue
+49 -27
View File
@@ -1,14 +1,29 @@
<template>
<cell-group class="van-sku-messages">
<field
v-for="(message, index) in internalMessages"
v-model="messageValues[index]"
:key="`${goodsId}-${index}`"
:required="message.required == '1'"
:label="message.name"
:placeholder="getPlaceholder(message)"
:type="getType(message)"
/>
<template v-for="(message, index) in messages">
<cell
v-if="message.type === 'image'"
class="van-sku-messages__image-cell"
:label="$t('onePic')"
:key="`${goodsId}-${index}`"
:required="message.required == '1'"
:title="message.name">
<sku-img-uploader
v-model="messageValues[index].value"
:upload-img="messageConfig.uploadImg"
:max-size="messageConfig.uploadMaxSize"
/>
</cell>
<field
v-else
v-model="messageValues[index].value"
:key="`${goodsId}-${index}`"
:required="message.required == '1'"
:label="message.name"
:placeholder="getPlaceholder(message)"
:type="getType(message)"
/>
</template>
</cell-group>
</template>
@@ -16,30 +31,36 @@
import { create } from '../../utils';
import Field from '../../field';
import CellGroup from '../../cell-group';
import Cell from '../../cell';
import validateEmail from '../../utils/validate/email';
import validateNumber from '../../utils/validate/number';
import SkuImgUploader from './SkuImgUploader';
export default create({
name: 'van-sku-messages',
components: {
SkuImgUploader,
Field,
Cell,
CellGroup
},
props: {
messages: Array,
messagePlaceholderMap: Object,
messageConfig: Object,
goodsId: [Number, String]
},
computed: {
internalMessages() {
return Array.isArray(this.messages) ? this.messages.filter(message => message.type !== 'image') : [];
},
data() {
return {
messageValues: this.messages.map(() => ({ value: '' }))
};
},
messageValues() {
return this.internalMessages.map(() => '');
computed: {
messagePlaceholderMap() {
return this.messageConfig.placeholderMap || {};
}
},
@@ -57,8 +78,9 @@ export default create({
getMessages() {
const messages = {};
this.messageValues.forEach((value, index) => {
if (this.internalMessages[index].datetime > 0) {
this.messageValues.forEach((item, index) => {
let value = item.value;
if (this.messages[index].datetime > 0) {
value = value.replace(/T/g, ' ');
}
messages[`message_${index}`] = value;
@@ -70,8 +92,9 @@ export default create({
getCartMessages() {
const messages = {};
this.messageValues.forEach((value, index) => {
const message = this.internalMessages[index];
this.messageValues.forEach((item, index) => {
let value = item.value;
const message = this.messages[index];
if (message.datetime > 0) {
value = value.replace(/T/g, ' ');
}
@@ -90,17 +113,16 @@ export default create({
const values = this.messageValues;
for (let i = 0; i < values.length; i++) {
const value = values[i];
const message = this.internalMessages[i];
const value = values[i].value;
const message = this.messages[i];
if (value === '') {
// 必填字段的校验
if (message.required == '1') { // eslint-disable-line
if (message.type === 'image') {
continue;
} else {
return this.$t('fill') + message.name;
}
const textType = message.type === 'image'
? 'upload'
: 'fill';
return this.$t(textType) + message.name;
}
} else {
if (message.type === 'tel' && !validateNumber(value)) {
packages/sku/components/SkuStepper.vue
+5 -1
View File
@@ -9,6 +9,7 @@
:max="stepperLimit"
:disable-input="disableStepperInput"
@overlimit="onOverLimit"
@change="onChange"
/>
</div>
<div v-if="!hideStock" class="van-sku__stock">{{ $t('remain', stock) }}</div>
@@ -104,7 +105,6 @@ export default create({
setCurrentNum(num) {
this.currentNum = num;
},
onOverLimit(action) {
this.skuEventBus.$emit('sku:overLimit', {
action,
@@ -112,6 +112,10 @@ export default create({
quota: this.quota,
quotaUsed: this.quotaUsed
});
},
onChange(currentValue) {
const { handleStepperChange } = this.customStepperConfig;
handleStepperChange && handleStepperChange(currentValue);
}
}
});
packages/vant-css/src/sku.css
+75 -2
View File
@@ -1,4 +1,5 @@
@import './common/var.css';
@import './mixins/clearfix.css';
.van-sku {
&-container {
@@ -144,7 +145,7 @@
margin-right: 20px;
}
}
&__stepper {
top: 7px;
left: 4px;
@@ -163,13 +164,85 @@
color: $gray-dark;
font-size: 12px;
}
&__quota {
display: inline-block;
color: $red;
font-size: 12px;
}
&-messages {
&__image-cell {
.van-cell__title {
width: 90px;
}
.van-cell__value {
text-align: left;
}
}
}
&-img-uploader {
display: inline-block;
&__header {
padding: 0 10px;
border: 1px solid #e5e5e5;
line-height: 24px;
border-radius: 3px;
font-size: 12px;
.van-icon {
top: 3px;
margin-right: 5px;
font-size: 14px;
}
}
&__imglist {
@mixin clearfix;
}
&__img-container {
height: 60px;
width: 60px;
margin-top: 10px;
margin-right: 10px;
float: left;
position: relative;
border: #e5e5e5 1px solid;
img {
max-width: 100%;
max-height: 100%;
top: 50%;
position: relative;
transform: translateY(-50%);
}
}
&__delete-picture {
position: absolute;
color: $red;
top: -10px;
right: -17px;
z-index: 1;
width: 22px;
height: 22px;
}
&__uploading {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
width: 20px;
height: 20px;
}
}
/* sku actions */
&-actions {
display: flex;