chore(Sku): prettier code

src/sku/components/SkuRowItem.js

@@ -5,19 +5,23 @@ const [createComponent] = createNamespace('sku-row-item');
 
 export default createComponent({
   props: {
+    lazyLoad: Boolean,
     skuValue: Object,
     skuKeyStr: String,
     skuEventBus: Object,
     selectedSku: Object,
+    largePicturePreview: Boolean,
     skuList: {
       type: Array,
       default: () => [],
     },
-    largePicturePreview: Boolean,
-    lazyLoad: Boolean,
   },
 
   computed: {
+    imgUrl() {
+      return this.skuValue.imgUrl || this.skuValue.img_url;
+    },
+
     choosable() {
       return isSkuChoosable(this.skuList, this.selectedSku, {
         key: this.skuKeyStr,
@@ -35,45 +39,51 @@ export default createComponent({
         });
       }
     },
+
     onPreviewImg(event) {
       event.stopPropagation();
-      this.skuEventBus.$emit(
-        'sku:previewImage',
-        this.skuValue.imgUrl || this.skuValue.img_url
-      );
+      this.skuEventBus.$emit('sku:previewImage', this.imgUrl);
+    },
+
+    genImage(classPrefix) {
+      const { imgUrl } = this;
+
+      if (imgUrl && this.largePicturePreview) {
+        if (this.lazyLoad) {
+          return (
+            <img class={`${classPrefix}-img`} src={imgUrl} vLazy={imgUrl} />
+          );
+        }
+
+        return <img class={`${classPrefix}-img`} src={imgUrl} />;
+      }
     },
   },
 
   render() {
     const choosed = this.skuValue.id === this.selectedSku[this.skuKeyStr];
-    const imgUrl = this.skuValue.imgUrl || this.skuValue.img_url;
-    const BEM_NAME = this.largePicturePreview
+    const classPrefix = this.largePicturePreview
       ? 'van-sku-row__picture-item'
       : 'van-sku-row__item';
 
     return (
       <span
         class={[
-          `${BEM_NAME}`,
-          choosed ? `${BEM_NAME}--active` : '',
-          !this.choosable ? `${BEM_NAME}--disabled` : '',
+          classPrefix,
+          choosed ? `${classPrefix}--active` : '',
+          !this.choosable ? `${classPrefix}--disabled` : '',
         ]}
         onClick={this.onSelect}
       >
         {this.largePicturePreview && (
           <img
-            class={`${BEM_NAME}-img-icon`}
+            class={`${classPrefix}-img-icon`}
             src="https://img.yzcdn.cn/upload_files/2020/06/18/Fn6Qf0fGRFyuD8xh0Gi1w2ng59G1.png"
             onClick={this.onPreviewImg}
           />
         )}
-        {imgUrl &&
-          (this.largePicturePreview && this.lazyLoad ? (
-            <img class={`${BEM_NAME}-img`} src={imgUrl} vLazy={imgUrl} />
-          ) : (
-            <img class={`${BEM_NAME}-img`} src={imgUrl} />
-          ))}
-        <span class={`${BEM_NAME}-name`}>{this.skuValue.name}</span>
+        {this.genImage(classPrefix)}
+        <span class={`${classPrefix}-name`}>{this.skuValue.name}</span>
       </span>
     );
   },