refactor(Card): extract render function

src/card/index.js

@@ -28,154 +28,145 @@ export default createComponent({
   emits: ['click-thumb'],
 
   setup(props, { slots, emit }) {
-    return () => {
+    const renderTitle = () => {
-      const { thumb } = props;
+      if (slots.title) {
+        return slots.title();
+      }
 
+      if (props.title) {
+        return (
+          <div class={[bem('title'), 'van-multi-ellipsis--l2']}>
+            {props.title}
+          </div>
+        );
+      }
+    };
+
+    const renderThumbTag = () => {
+      if (slots.tag || props.tag) {
+        return (
+          <div class={bem('tag')}>
+            {slots.tag ? (
+              slots.tag()
+            ) : (
+              <Tag mark type="danger">
+                {props.tag}
+              </Tag>
+            )}
+          </div>
+        );
+      }
+    };
+
+    const renderThumbImage = () => {
+      if (slots.thumb) {
+        return slots.thumb();
+      }
+
+      return (
+        <Image
+          src={props.thumb}
+          width="100%"
+          height="100%"
+          fit="cover"
+          lazyLoad={props.lazyLoad}
+        />
+      );
+    };
+
+    const renderThumb = () => {
+      if (slots.thumb || props.thumb) {
+        return (
+          <a
+            href={props.thumbLink}
+            class={bem('thumb')}
+            onClick={(event) => {
+              emit('click-thumb', event);
+            }}
+          >
+            {renderThumbImage()}
+            {renderThumbTag()}
+          </a>
+        );
+      }
+    };
+
+    const renderDesc = () => {
+      if (slots.desc) {
+        return slots.desc();
+      }
+
+      if (props.desc) {
+        return <div class={[bem('desc'), 'van-ellipsis']}>{props.desc}</div>;
+      }
+    };
+
+    const renderPriceText = () => {
+      const priceArr = props.price.toString().split('.');
+      return (
+        <div>
+          <span class={bem('price-currency')}>{props.currency}</span>
+          <span class={bem('price-integer')}>{priceArr[0]}</span>.
+          <span class={bem('price-decimal')}>{priceArr[1]}</span>
+        </div>
+      );
+    };
+
+    return () => {
       const showNum = slots.num || isDef(props.num);
       const showPrice = slots.price || isDef(props.price);
       const showOriginPrice = slots['origin-price'] || isDef(props.originPrice);
       const showBottom =
         showNum || showPrice || showOriginPrice || slots.bottom;
 
-      function onThumbClick(event) {
+      const Price = showPrice && (
-        emit('click-thumb', event);
+        <div class={bem('price')}>
-      }
+          {slots.price ? slots.price() : renderPriceText()}
+        </div>
+      );
 
-      function ThumbTag() {
+      const OriginPrice = showOriginPrice && (
-        if (slots.tag || props.tag) {
+        <div class={bem('origin-price')}>
-          return (
+          {slots['origin-price']
-            <div class={bem('tag')}>
+            ? slots['origin-price']()
-              {slots.tag ? (
+            : `${props.currency} ${props.originPrice}`}
-                slots.tag()
+        </div>
-              ) : (
+      );
-                <Tag mark type="danger">
-                  {props.tag}
-                </Tag>
-              )}
-            </div>
-          );
-        }
-      }
 
-      function Thumb() {
+      const Num = showNum && (
-        if (slots.thumb || thumb) {
+        <div class={bem('num')}>
-          return (
+          {slots.num ? slots.num() : `x${props.num}`}
-            <a
+        </div>
-              href={props.thumbLink}
+      );
-              class={bem('thumb')}
-              onClick={onThumbClick}
-            >
-              {slots.thumb ? (
-                slots.thumb()
-              ) : (
-                <Image
-                  src={thumb}
-                  width="100%"
-                  height="100%"
-                  fit="cover"
-                  lazy-load={props.lazyLoad}
-                />
-              )}
-              {ThumbTag()}
-            </a>
-          );
-        }
-      }
 
-      function Title() {
+      const Footer = slots.footer && (
-        if (slots.title) {
+        <div class={bem('footer')}>{slots.footer()}</div>
-          return slots.title();
+      );
-        }
 
-        if (props.title) {
+      const Bottom = showBottom && (
-          return (
+        <div class={bem('bottom')}>
-            <div class={[bem('title'), 'van-multi-ellipsis--l2']}>
+          {slots['price-top']?.()}
-              {props.title}
+          {Price}
-            </div>
+          {OriginPrice}
-          );
+          {Num}
-        }
+          {slots.bottom?.()}
-      }
+        </div>
-
+      );
-      function Desc() {
-        if (slots.desc) {
-          return slots.desc();
-        }
-
-        if (props.desc) {
-          return <div class={[bem('desc'), 'van-ellipsis']}>{props.desc}</div>;
-        }
-      }
-
-      function PriceContent() {
-        const priceArr = props.price.toString().split('.');
-        return (
-          <div>
-            <span class={bem('price-currency')}>{props.currency}</span>
-            <span class={bem('price-integer')}>{priceArr[0]}</span>.
-            <span class={bem('price-decimal')}>{priceArr[1]}</span>
-          </div>
-        );
-      }
-
-      function Price() {
-        if (showPrice) {
-          return (
-            <div class={bem('price')}>
-              {slots.price ? slots.price() : PriceContent()}
-            </div>
-          );
-        }
-      }
-
-      function OriginPrice() {
-        if (showOriginPrice) {
-          const slot = slots['origin-price'];
-          return (
-            <div class={bem('origin-price')}>
-              {slot ? slot() : `${props.currency} ${props.originPrice}`}
-            </div>
-          );
-        }
-      }
-
-      function Num() {
-        if (showNum) {
-          return (
-            <div class={bem('num')}>
-              {slots.num ? slots.num() : `x${props.num}`}
-            </div>
-          );
-        }
-      }
-
-      function Footer() {
-        if (slots.footer) {
-          return <div class={bem('footer')}>{slots.footer()}</div>;
-        }
-      }
 
       return (
         <div class={bem()}>
           <div class={bem('header')}>
-            {Thumb()}
+            {renderThumb()}
             <div class={bem('content', { centered: props.centered })}>
               <div>
-                {Title()}
+                {renderTitle()}
-                {Desc()}
+                {renderDesc()}
                 {slots.tags?.()}
               </div>
-              {showBottom && (
+              {Bottom}
-                <div class="van-card__bottom">
-                  {slots['price-top']?.()}
-                  {Price()}
-                  {OriginPrice()}
-                  {Num()}
-                  {slots.bottom?.()}
-                </div>
-              )}
             </div>
           </div>
-          {Footer()}
+          {Footer}
         </div>
       );
     };