[new feature] Sku: update style & add several props (#3875)

src/sku/components/SkuHeader.tsx

@@ -50,10 +50,9 @@ function SkuHeader(
         <img src={goodsImg} />
       </div>
       <div class={bem('goods-info')}>
-        <div class="van-sku__goods-name van-ellipsis">{goods.title}</div>
         {slots.default && slots.default()}
         <Icon
-          name="close"
+          name="clear"
           class="van-sku__close-icon"
           onClick={() => {
             skuEventBus.$emit('sku:close');

src/sku/components/SkuHeaderItem.tsx

@@ -0,0 +1,25 @@
+import { createNamespace } from '../../utils';
+import { inherit } from '../../utils/functional';
+
+// Types
+import { CreateElement, RenderContext } from 'vue/types';
+import { DefaultSlots } from '../../utils/types';
+
+export type SkuHeaderItemProps = {};
+
+const [createComponent, bem] = createNamespace('sku-header-item');
+
+function SkuHeader(
+  h: CreateElement,
+  props: SkuHeaderItemProps,
+  slots: DefaultSlots,
+  ctx: RenderContext<SkuHeaderItemProps>
+) {
+  return (
+    <div class={bem()} {...inherit(ctx)}>
+      {slots.default && slots.default()}
+    </div>
+  );
+}
+
+export default createComponent<SkuHeaderItemProps>(SkuHeader);

src/sku/components/SkuImgUploader.js

@@ -18,20 +18,16 @@ export default createComponent({
   data() {
     return {
       // 正在上传的图片 base64
-      paddingImg: ''
+      paddingImg: '',
+      uploadFail: false
     };
   },
 
-  computed: {
-    imgList() {
-      return this.value && !this.paddingImg ? [this.value] : [];
-    }
-  },
-
   methods: {
     afterReadFile(file) {
       // 上传文件
       this.paddingImg = file.content;
+      this.uploadFail = false;
       this.uploadImg(file.file, file.content)
         .then(img => {
           this.$emit('input', img);
@@ -40,23 +36,53 @@ export default createComponent({
           });
         })
         .catch(() => {
-          this.paddingImg = '';
+          this.uploadFail = true;
         });
     },
 
     onOversize() {
       this.$toast(`最大可上传图片为${this.maxSize}MB，请尝试压缩图片尺寸`);
+    },
+
+    renderUploader(content, disabled = false) {
+      return (
+        <Uploader
+          class={bem('uploader')}
+          disabled={disabled}
+          afterRead={this.afterReadFile}
+          maxSize={this.maxSize * 1024 * 1024}
+          onOversize={this.onOversize}
+        >
+          <div class={bem('img')}>
+            {content}
+          </div>
+        </Uploader>
+      );
+    },
+
+    renderMask() {
+      return (
+        <div class={bem('mask')}>
+          {this.uploadFail
+            ? (
+              [
+                <Icon name="warning-o" size="20px" />,
+                <div class={bem('warn-text')}>上传失败<br />重新上传</div>
+              ]
+            ) : (
+              <Loading type="spinner" size="20px" color="white" />
+            )}
+        </div>
+      );
     }
   },
 
   render(h) {
-    const { imgList, paddingImg } = this;
-
-    const ImageList = (paddingImg || imgList.length > 0) && (
-      <div class="van-clearfix">
-        {imgList.map(img => (
-          <div class={bem('img')}>
-            <img src={img} />
+    return (
+      <div class={bem()}>
+        {this.value && this.renderUploader(
+          [
+            <img src={this.value} />,
             <Icon
               name="clear"
               class={bem('delete')}
@@ -64,40 +90,24 @@ export default createComponent({
                 this.$emit('input', '');
               }}
             />
-          </div>
-        ))}
-        {paddingImg && (
-          <div class={bem('img')}>
-            <img src={paddingImg} />
-            <Loading type="spinner" class={bem('uploading')} />
+          ],
+          true
+        )}
+
+        {this.paddingImg && this.renderUploader(
+          [
+            <img src={this.paddingImg} />,
+            this.renderMask()
+          ],
+          !this.uploadFail
+        )}
+
+        {!this.value && !this.paddingImg && this.renderUploader(
+          <div class={bem('trigger')}>
+            <Icon name="photograph" size="22px" />
           </div>
         )}
       </div>
     );
-
-    return (
-      <div class={bem()}>
-        <Uploader
-          disabled={!!paddingImg}
-          afterRead={this.afterReadFile}
-          maxSize={this.maxSize * 1024 * 1024}
-          onOversize={this.onOversize}
-        >
-          <div class={bem('header')}>
-            {paddingImg ? (
-              <div>正在上传...</div>
-            ) : (
-              [
-                <Icon name="photograph" />,
-                <span class="label">{this.value ? '重拍' : '拍照'} 或 </span>,
-                <Icon name="photo" />,
-                <span class="label">{this.value ? '重新选择照片' : '选择照片'}</span>
-              ]
-            )}
-          </div>
-        </Uploader>
-        {ImageList}
-      </div>
-    );
   }
 });

src/sku/components/SkuMessages.js

@@ -127,6 +127,7 @@ export default createComponent({
         {this.messages.map((message, index) => (message.type === 'image' ? (
           <Cell
             class={bem('image-cell')}
+            value-class={bem('image-cell-value')}
             label="仅限一张"
             title={message.name}
             key={`${this.goodsId}-${index}`}

src/sku/components/SkuRow.tsx

@@ -19,8 +19,8 @@ function SkuRow(
   ctx: RenderContext<SkuRowProps>
 ) {
   return (
-    <div class={bem()} {...inherit(ctx)}>
-      <div class={bem('title')}>{props.skuRow.k}：</div>
+    <div class={[bem(), 'van-hairline--bottom']} {...inherit(ctx)}>
+      <div class={bem('title')}>{props.skuRow.k}</div>
       {slots.default && slots.default()}
     </div>
   );

src/sku/components/SkuRowItem.js

@@ -37,6 +37,7 @@ export default createComponent({
 
   render(h) {
     const choosed = this.skuValue.id === this.selectedSku[this.skuKeyStr];
+    const imgUrl = this.skuValue.imgUrl || this.skuValue.img_url;
 
     return (
       <span
@@ -49,7 +50,8 @@ export default createComponent({
         ]}
         onClick={this.onSelect}
       >
-        {this.skuValue.name}
+        {imgUrl && <img class="van-sku-row__item-img" src={imgUrl} />}
+        <span class="van-sku-row__item-name">{this.skuValue.name}</span>
       </span>
     );
   }

src/sku/components/SkuStepper.js

@@ -7,14 +7,11 @@ const { QUOTA_LIMIT, STOCK_LIMIT } = LIMIT_TYPE;
 
 export default createComponent({
   props: {
-    hideStock: Boolean,
-    selectedSku: Object,
+    stock: Number,
     skuEventBus: Object,
     skuStockNum: Number,
     selectedNum: Number,
     stepperTitle: String,
-    hideQuotaText: Boolean,
-    selectedSkuComb: Object,
     disableStepperInput: Boolean,
     customStepperConfig: Object,
     quota: {
@@ -48,40 +45,6 @@ export default createComponent({
   },
 
   computed: {
-    stock() {
-      const { stockNum } = this.customStepperConfig;
-      if (stockNum !== undefined) {
-        return stockNum;
-      }
-      if (this.selectedSkuComb) {
-        return this.selectedSkuComb.stock_num;
-      }
-      return this.skuStockNum;
-    },
-
-    stockText() {
-      const { stockFormatter } = this.customStepperConfig;
-      if (stockFormatter) return stockFormatter(this.stock);
-
-      return `剩余${this.stock}件`;
-    },
-
-    quotaText() {
-      const { quotaText, hideQuotaText } = this.customStepperConfig;
-
-      if (hideQuotaText) return '';
-
-      let text = '';
-
-      if (quotaText) {
-        text = quotaText;
-      } else if (this.quota > 0) {
-        text = `每人限购${this.quota}件`;
-      }
-
-      return text;
-    },
-
     stepperLimit() {
       const quotaLimit = this.quota - this.quotaUsed;
       let limit;
@@ -125,7 +88,7 @@ export default createComponent({
     return (
       <div class="van-sku-stepper-stock">
         <div class="van-sku-stepper-container">
-          <div class="van-sku__stepper-title">{this.stepperTitle || '购买数量'}：</div>
+          <div class="van-sku__stepper-title">{this.stepperTitle || '购买数量'}</div>
           <Stepper
             vModel={this.currentNum}
             class="van-sku__stepper"
@@ -135,10 +98,6 @@ export default createComponent({
             onChange={this.onChange}
           />
         </div>
-        {!this.hideStock && <div class="van-sku__stock">{this.stockText}</div>}
-        {!this.hideQuotaText && this.quotaText && (
-          <div class="van-sku__quota">{this.quotaText}</div>
-        )}
       </div>
     );
   }