refactor(Card): extract render function

src/card/index.js

@@ -28,20 +28,21 @@ export default createComponent({
   emits: ['click-thumb'],
 
   setup(props, { slots, emit }) {
-    return () => {
+    const renderTitle = () => {
-      const { thumb } = props;
+      if (slots.title) {
-
+        return slots.title();
-      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) {
-        emit('click-thumb', event);
       }
 
-      function ThumbTag() {
+      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')}>
@@ -55,48 +56,42 @@ export default createComponent({
           </div>
         );
       }
+    };
+
+    const renderThumbImage = () => {
+      if (slots.thumb) {
+        return slots.thumb();
       }
 
-      function Thumb() {
+      return (
-        if (slots.thumb || thumb) {
+        <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={onThumbClick}
+            onClick={(event) => {
+              emit('click-thumb', event);
+            }}
           >
-              {slots.thumb ? (
+            {renderThumbImage()}
-                slots.thumb()
+            {renderThumbTag()}
-              ) : (
-                <Image
-                  src={thumb}
-                  width="100%"
-                  height="100%"
-                  fit="cover"
-                  lazy-load={props.lazyLoad}
-                />
-              )}
-              {ThumbTag()}
           </a>
         );
       }
-      }
+    };
 
-      function Title() {
+    const renderDesc = () => {
-        if (slots.title) {
-          return slots.title();
-        }
-
-        if (props.title) {
-          return (
-            <div class={[bem('title'), 'van-multi-ellipsis--l2']}>
-              {props.title}
-            </div>
-          );
-        }
-      }
-
-      function Desc() {
       if (slots.desc) {
         return slots.desc();
       }
@@ -104,9 +99,9 @@ export default createComponent({
       if (props.desc) {
         return <div class={[bem('desc'), 'van-ellipsis']}>{props.desc}</div>;
       }
-      }
+    };
 
-      function PriceContent() {
+    const renderPriceText = () => {
       const priceArr = props.price.toString().split('.');
       return (
         <div>
@@ -115,67 +110,63 @@ export default createComponent({
           <span class={bem('price-decimal')}>{priceArr[1]}</span>
         </div>
       );
-      }
+    };
 
-      function Price() {
+    return () => {
-        if (showPrice) {
+      const showNum = slots.num || isDef(props.num);
-          return (
+      const showPrice = slots.price || isDef(props.price);
+      const showOriginPrice = slots['origin-price'] || isDef(props.originPrice);
+      const showBottom =
+        showNum || showPrice || showOriginPrice || slots.bottom;
+
+      const Price = showPrice && (
         <div class={bem('price')}>
-              {slots.price ? slots.price() : PriceContent()}
+          {slots.price ? slots.price() : renderPriceText()}
         </div>
       );
-        }
-      }
 
-      function OriginPrice() {
+      const OriginPrice = showOriginPrice && (
-        if (showOriginPrice) {
-          const slot = slots['origin-price'];
-          return (
         <div class={bem('origin-price')}>
-              {slot ? slot() : `${props.currency} ${props.originPrice}`}
+          {slots['origin-price']
+            ? slots['origin-price']()
+            : `${props.currency} ${props.originPrice}`}
         </div>
       );
-        }
-      }
 
-      function Num() {
+      const Num = showNum && (
-        if (showNum) {
-          return (
         <div class={bem('num')}>
           {slots.num ? slots.num() : `x${props.num}`}
         </div>
       );
-        }
-      }
 
-      function Footer() {
+      const Footer = slots.footer && (
-        if (slots.footer) {
+        <div class={bem('footer')}>{slots.footer()}</div>
-          return <div class={bem('footer')}>{slots.footer()}</div>;
+      );
-        }
+
-      }
+      const Bottom = showBottom && (
+        <div class={bem('bottom')}>
+          {slots['price-top']?.()}
+          {Price}
+          {OriginPrice}
+          {Num}
+          {slots.bottom?.()}
+        </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>
       );
     };