[Improvement] Sku: optimize DOM (#704)

packages/sku/components/SkuHeader.vue

@@ -1,12 +1,14 @@
 <template>
   <div class="van-sku-header van-hairline--bottom">
     <div class="van-sku-header__img-wrap">
-      <img class="van-sku__goods-img" :src="goodsImg" >
+      <img :src="goodsImg" >
     </div>
     <div class="van-sku-header__goods-info">
       <div class="van-sku__goods-name van-ellipsis">{{ goods.title }}</div>
-      <div class="van-sku__goods-price"><span class="van-sku__price-symbol">￥</span><span class="van-sku__price-num">{{ price }}</span></div>
-      <span class="van-sku__close-icon" @click="skuEventBus.$emit('sku:close')" />
+      <div class="van-sku__goods-price">
+        <span class="van-sku__price-symbol">￥</span><span class="van-sku__price-num">{{ price }}</span>
+      </div>
+      <icon name="close" class="van-sku__close-icon" @click="skuEventBus.$emit('sku:close')" />
     </div>
   </div>
 </template>
@@ -18,11 +20,11 @@ export default create({
   name: 'sku-header',
 
   props: {
-    skuEventBus: Object,
     sku: Object,
+    goods: Object,
+    skuEventBus: Object,
     selectedSku: Object,
-    selectedSkuComb: Object,
-    goods: Object
+    selectedSkuComb: Object
   },
 
   computed: {
@@ -32,6 +34,7 @@ export default create({
       // 优先使用选中sku的图片
       return skuImg || this.goods.picture;
     },
+
     price() {
       if (this.selectedSkuComb) {
         return (this.selectedSkuComb.price / 100).toFixed(2);

packages/sku/components/SkuImgUploader.vue

@@ -2,56 +2,51 @@
   <div class="van-sku-img-uploader">
     <!-- 头部 -->
     <van-uploader
-      :disabled="!canUpload"
-      :before-read="beforeReadFile"
+      :disabled="!!paddingImg"
       :after-read="afterReadFile"
-      accept="image/*">
+      :max-size="maxSize * 1024 * 1024"
+      accept="image/*"
+      @oversize="$toast($t('maxSize', maxSize))"
+    >
       <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>
+          <icon name="photograph" />
+          <span class="label">{{ $t(value ? 'rephoto' : 'photo') }}</span> {{ $t('or') }}
+          <icon name="photo" />
+          <span class="label">{{ $t(value ? 'reselect' : 'select') }}</span>
         </template>
       </div>
     </van-uploader>
     <!-- 图片列表区域 -->
-    <div class="van-sku-img-uploader__imglist" v-if="paddingImg || imgList.length > 0">
+    <div class="van-clearfix" 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>
+        class="van-sku-img-uploader__img"
+      >
         <img :src="img">
+        <icon name="clear" class="van-sku-img-uploader__delete" @click="$emit('input', '')" />
       </div>
       <!-- 正在上传的图片,有上传等待提示 -->
-      <div
-        v-if="paddingImg"
-        class="van-sku-img-uploader__img-container">
+      <div v-if="paddingImg" class="van-sku-img-uploader__img">
         <img :src="paddingImg">
-        <van-loading class="van-sku-img-uploader__uploading" type="spinner" color="black" />
+        <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 VanUploader from '../../uploader';
 import { create } from '../../utils';
 
 export default create({
   name: 'sku-img-uploader',
 
   components: {
-    'van-uploader': Uploader,
-    'van-icon': Icon,
-    'van-loading': Loading
+    VanUploader
   },
 
   props: {
@@ -72,50 +67,25 @@ export default create({
       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.uploadImg(file.file, file.content).then(img => {
+        this.$emit('input', img);
         this.$nextTick(() => {
           this.paddingImg = '';
         });
       }).catch(() => {
         this.paddingImg = '';
       });
-    },
-    deleteImg() {
-      this.$emit('input', '');
-    },
-    updateImg(img) {
-      this.$emit('input', img);
     }
   }
 });

packages/sku/components/SkuMessages.vue

@@ -7,7 +7,8 @@
         :label="$t('onePic')"
         :key="`${goodsId}-${index}`"
         :required="message.required == '1'"
-        :title="message.name">
+        :title="message.name"
+      >
         <sku-img-uploader
           v-model="messageValues[index].value"
           :upload-img="messageConfig.uploadImg"
@@ -70,6 +71,7 @@ export default create({
     resetMessageValues(messages) {
       return (messages || []).map(() => ({ value: '' }));
     },
+
     getType(message) {
       if (+message.multiple === 1) {
         return 'textarea';

packages/sku/components/SkuRow.vue

@@ -1,9 +1,7 @@
 <template>
   <div class="van-sku-row">
     <div class="van-sku-row__title">{{ skuRow.k }}：</div>
-    <div class="van-sku-row__items">
-      <slot />
-    </div>
+    <slot />
   </div>
 </template>
 

packages/sku/components/SkuRowItem.vue

@@ -5,7 +5,7 @@
       'van-sku-row__item--active': isChoosed,
       'van-sku-row__item--disabled': !isChoosable
     }"
-    @click="onSkuSelected"
+    @click="onSelect"
   >
     {{ skuValue.name }}
   </span>
@@ -41,14 +41,14 @@ export default create({
           return matchedSku[skuKey] == sku[skuKey]; // eslint-disable-line
         });
       });
-      const stock = filteredSku.reduce((total, sku) => (total += sku.stock_num), 0);
 
+      const stock = filteredSku.reduce((total, sku) => (total += sku.stock_num), 0);
       return stock > 0;
     }
   },
 
   methods: {
-    onSkuSelected() {
+    onSelect() {
       if (this.isChoosable) {
         this.skuEventBus.$emit('sku:select', {
           ...this.skuValue,

packages/sku/components/SkuStepper.vue

@@ -57,6 +57,7 @@ export default create({
     currentNum(num) {
       this.skuEventBus.$emit('sku:numChange', num);
     },
+
     stepperLimit(limit) {
       if (limit < this.currentNum) {
         this.currentNum = limit;
@@ -71,6 +72,7 @@ export default create({
       }
       return this.skuStockNum;
     },
+
     quotaText() {
       const { quotaText } = this.customStepperConfig;
       let text = '';
@@ -83,6 +85,7 @@ export default create({
 
       return text;
     },
+
     stepperLimit() {
       const quotaLimit = this.quota - this.quotaUsed;
       let limit;
@@ -105,6 +108,7 @@ export default create({
     setCurrentNum(num) {
       this.currentNum = num;
     },
+
     onOverLimit(action) {
       this.skuEventBus.$emit('sku:overLimit', {
         action,
@@ -113,6 +117,7 @@ export default create({
         quotaUsed: this.quotaUsed
       });
     },
+
     onChange(currentValue) {
       const { handleStepperChange } = this.customStepperConfig;
       handleStepperChange && handleStepperChange(currentValue);