-
+
-
+
+
/* eslint-disable camelcase */
import Vue from 'vue';
-import Popup from '../../popup';
-import Toast from '../../toast';
-import SkuHeader from '../components/SkuHeader';
-import SkuRow from '../components/SkuRow';
-import SkuRowItem from '../components/SkuRowItem';
-import SkuStepper from '../components/SkuStepper';
-import SkuMessages from '../components/SkuMessages';
-import SkuActions from '../components/SkuActions';
+import Popup from '../popup';
+import Toast from '../toast';
+import SkuHeader from './components/SkuHeader';
+import SkuRow from './components/SkuRow';
+import SkuRowItem from './components/SkuRowItem';
+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 } from '../constants';
-import { create } from '../../utils';
+} from './utils/skuHelper';
+import { LIMIT_TYPE } from './constants';
+import { create } from '../utils';
const { QUOTA_LIMIT } = LIMIT_TYPE;
@@ -115,13 +126,20 @@ export default create({
},
props: {
+ sku: Object,
goods: Object,
+ value: Boolean,
+ buyText: String,
goodsId: [Number, String],
+ stepperTitle: String,
+ hideStock: Boolean,
+ resetStepperOnHide: Boolean,
+ resetSelectedSkuOnHide: Boolean,
+ disableStepperInput: Boolean,
initialSku: {
type: Object,
default: () => ({})
},
- sku: Object,
quota: {
type: Number,
default: 0
@@ -130,25 +148,18 @@ export default create({
type: Number,
default: 0
},
- hideStock: Boolean,
showAddCartBtn: {
type: Boolean,
default: true
},
- buyText: String,
- stepperTitle: String,
bodyOffsetTop: {
type: Number,
default: 200
},
- resetStepperOnHide: Boolean,
- resetSelectedSkuOnHide: Boolean,
- disableStepperInput: Boolean,
messagePlaceholderMap: {
type: Object,
default: () => ({})
- },
- value: Boolean
+ }
},
data() {
@@ -205,19 +216,19 @@ export default create({
maxHeight: maxHeight + 'px'
};
},
+
isSkuCombSelected() {
return isAllSelected(this.sku.tree, this.selectedSku);
},
- // sku数据不存在时不渲染模板
+
isSkuEmpty() {
- for (var key in this.sku) {
- if (Object.prototype.hasOwnProperty.call(this.sku, key)) return false;
- }
- return true;
+ return Object.keys(this.sku).length === 0;
},
+
hasSku() {
return !this.sku.none_sku;
},
+
selectedSkuComb() {
if (!this.hasSku) {
return {
@@ -230,13 +241,14 @@ export default create({
}
return null;
},
+
skuTree() {
return this.sku.tree || [];
}
},
created() {
- var skuEventBus = new Vue();
+ const skuEventBus = new Vue();
this.skuEventBus = skuEventBus;
skuEventBus.$on('sku:close', this.handleCloseClicked);
@@ -263,19 +275,23 @@ export default create({
}
});
},
+
getSkuMessages() {
return this.$refs.skuMessages ? this.$refs.skuMessages.getMessages() : {};
},
+
getSkuCartMessages() {
return this.$refs.skuMessages
? this.$refs.skuMessages.getCartMessages()
: {};
},
+
validateSkuMessages() {
return this.$refs.skuMessages
? this.$refs.skuMessages.validateMessages()
: '';
},
+
validateSku() {
if (this.selectedNum === 0) {
return this.$t('unavailable');
@@ -289,9 +305,11 @@ export default create({
return this.$t('spec');
}
},
+
handleCloseClicked() {
this.show = false;
},
+
handleSkuSelected(skuValue) {
// 点击已选中的sku时则取消选中
this.selectedSku =
@@ -305,9 +323,11 @@ export default create({
selectedSkuComb: this.selectedSkuComb
});
},
+
handleNumChange(num) {
this.selectedNum = num;
},
+
handleOverLimit({ action, limitType, quota, quotaUsed }) {
if (action === 'minus') {
Toast(this.$t('least'));
@@ -321,12 +341,15 @@ export default create({
}
}
},
+
handleAddCartClicked() {
this.handleBuyOrAddCart('add-cart');
},
+
handleBuyClicked() {
this.handleBuyOrAddCart('buy-clicked');
},
+
handleBuyOrAddCart(type) {
const error = this.validateSku();
if (error) {
diff --git a/packages/sku/components/SkuActions.vue b/packages/sku/components/SkuActions.vue
index 199128944..1654c7b29 100644
--- a/packages/sku/components/SkuActions.vue
+++ b/packages/sku/components/SkuActions.vue
@@ -1,7 +1,17 @@
@@ -26,9 +26,6 @@ export default create({
},
computed: {
- skuTree() {
- return this.sku.tree;
- },
goodsImg() {
const s1Id = this.selectedSku.s1;
const skuImg = this.getSkuImg(s1Id);
@@ -45,14 +42,11 @@ export default create({
},
methods: {
- onCloseClicked() {
- this.skuEventBus.$emit('sku:close');
- },
getSkuImg(id) {
if (!id) return;
// 目前skuImg都挂载在skuTree中s1那类sku上
- const treeItem = this.skuTree.filter(treeItem => treeItem.k_s === 's1')[0] || {};
+ const treeItem = this.sku.tree.filter(treeItem => treeItem.k_s === 's1')[0] || {};
if (!treeItem.v) {
return;
diff --git a/packages/sku/components/SkuMessages.vue b/packages/sku/components/SkuMessages.vue
index e72796c25..a1839030c 100644
--- a/packages/sku/components/SkuMessages.vue
+++ b/packages/sku/components/SkuMessages.vue
@@ -1,26 +1,14 @@
@@ -47,26 +35,23 @@ export default create({
computed: {
internalMessages() {
- if (Object.prototype.toString.call(this.messages) === '[object Array]') {
- return this.messages;
- }
- return [];
+ return Array.isArray(this.messages) ? this.messages.filter(message => message.type !== 'image') : [];
},
messageValues() {
- const messageValues = [];
- this.internalMessages.forEach((message, index) => {
- messageValues[index] = '';
- });
-
- return messageValues;
+ return this.internalMessages.map(() => '');
}
},
methods: {
- getType({ type, datetime }) {
- if (type === 'id_no') return 'text';
- return datetime > 0 ? 'datetime-local' : type;
+ getType(message) {
+ if (+message.multiple === 1) {
+ return 'textarea';
+ }
+ if (message.type === 'id_no') {
+ return 'text';
+ }
+ return message.datetime > 0 ? 'datetime-local' : message.type;
},
getMessages() {
@@ -96,8 +81,9 @@ export default create({
return messages;
},
- getPlaceholder(key) {
- return this.messagePlaceholderMap[key] || this.$t(`placeholder.${key}`);
+ getPlaceholder(message) {
+ const type = +message.multiple === 1 ? 'textarea' : message.type;
+ return this.messagePlaceholderMap[type] || this.$t(`placeholder.${type}`);
},
validateMessages() {
diff --git a/packages/sku/components/SkuRowItem.vue b/packages/sku/components/SkuRowItem.vue
index e33068a34..3c0920a0d 100644
--- a/packages/sku/components/SkuRowItem.vue
+++ b/packages/sku/components/SkuRowItem.vue
@@ -1,12 +1,14 @@
+ :class="{
+ 'van-sku-row__item--active': isChoosed,
+ 'van-sku-row__item--disabled': !isChoosable
+ }"
+ @click="onSkuSelected"
+ >
{{ skuValue.name }}
- {{ skuValue.name }}
-
+
-
- {{ $t('cart') }}
- {{ buyText || $t('buy') }}
+
@@ -20,15 +30,6 @@ export default create({
buyText: String,
skuEventBus: Object,
showAddCartBtn: Boolean
- },
-
- methods: {
- onAddCartClicked() {
- this.skuEventBus.$emit('sku:addCart');
- },
- onBuyClicked() {
- this.skuEventBus.$emit('sku:buy');
- }
}
});
diff --git a/packages/sku/components/SkuHeader.vue b/packages/sku/components/SkuHeader.vue
index cbe82c8c6..b8469abd9 100644
--- a/packages/sku/components/SkuHeader.vue
+++ b/packages/sku/components/SkuHeader.vue
@@ -1,12 +1,12 @@
- ![]()
+ ![]()
{{ goods.title }}
￥{{ price }}
-
+