From fbc232d78a3de2d80814286b904108bbdedad96b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E5=98=89=E6=B6=B5?= <chenjiahan@youzan.com>
Date: Fri, 17 May 2019 16:30:08 +0800
Subject: [PATCH] [improvement] Card: use Image component

---
 packages/card/index.less                      |  9 -----
 packages/card/index.tsx                       | 35 ++++++++++++-------
 .../card/test/__snapshots__/demo.spec.js.snap | 13 +++++--
 3 files changed, 33 insertions(+), 24 deletions(-)

diff --git a/packages/card/index.less b/packages/card/index.less
index e8bd4c79c..fde0b3cb0 100644
--- a/packages/card/index.less
+++ b/packages/card/index.less
@@ -19,19 +19,10 @@
 
   &__thumb {
     position: relative;
-    display: flex;
     flex: none;
-    align-items: center;
-    justify-content: center;
     width: @card-thumb-size;
     height: @card-thumb-size;
     margin-right: 10px;
-
-    img {
-      max-width: 100%;
-      max-height: 100%;
-      border: none;
-    }
   }
 
   &__content {
diff --git a/packages/card/index.tsx b/packages/card/index.tsx
index 0888312e7..ede70c584 100644
--- a/packages/card/index.tsx
+++ b/packages/card/index.tsx
@@ -1,6 +1,7 @@
 import { use, isDef } from '../utils';
 import { inherit } from '../utils/functional';
 import Tag from '../tag';
+import Image from '../image';
 
 // Types
 import { CreateElement, RenderContext } from 'vue/types';
@@ -53,27 +54,35 @@ function Card(
 
   function ThumbTag() {
     if (slots.tag || props.tag) {
-      const DefaultTag = (
-        <Tag mark type="danger">
-          {props.tag}
-        </Tag>
+      return (
+        <div class={bem('tag')}>
+          {slots.tag ? (
+            slots.tag()
+          ) : (
+            <Tag mark type="danger">
+              {props.tag}
+            </Tag>
+          )}
+        </div>
       );
-
-      return <div class={bem('tag')}>{slots.tag ? slots.tag() : DefaultTag}</div>;
     }
   }
 
   function Thumb() {
     if (slots.thumb || thumb) {
-      const DefaultThumb = props.lazyLoad ? (
-        <img class={bem('img')} vLazy={thumb} />
-      ) : (
-        <img class={bem('img')} src={thumb} />
-      );
-
       return (
         <a href={props.thumbLink} class={bem('thumb')}>
-          {slots.thumb ? slots.thumb() : DefaultThumb}
+          {slots.thumb ? (
+            slots.thumb()
+          ) : (
+            <Image
+              src={thumb}
+              width="100%"
+              height="100%"
+              fit="contain"
+              lazy-load={props.lazyLoad}
+            />
+          )}
           {ThumbTag()}
         </a>
       );
diff --git a/packages/card/test/__snapshots__/demo.spec.js.snap b/packages/card/test/__snapshots__/demo.spec.js.snap
index 660a2609f..0639e4172 100644
--- a/packages/card/test/__snapshots__/demo.spec.js.snap
+++ b/packages/card/test/__snapshots__/demo.spec.js.snap
@@ -4,7 +4,12 @@ exports[`renders demo correctly 1`] = `
 <div>
   <div>
     <div class="van-card">
-      <div class="van-card__header"><a class="van-card__thumb"><img src="//img.yzcdn.cn/upload_files/2017/07/02/af5b9f44deaeb68000d7e4a711160c53.jpg" class="van-card__img"></a>
+      <div class="van-card__header"><a class="van-card__thumb">
+          <div class="van-image" style="width: 100%; height: 100%;"><img src="//img.yzcdn.cn/upload_files/2017/07/02/af5b9f44deaeb68000d7e4a711160c53.jpg" class="van-image__img" style="object-fit: contain;">
+            <div class="van-image__loading"><i class="van-icon van-icon-photo-o" style="font-size: 22px;">
+                <!----></i></div>
+          </div>
+        </a>
         <div class="van-card__content">
           <div class="van-card__title">2018秋冬新款男士休闲时尚军绿飞行夹克秋冬新款男</div>
           <div class="van-card__desc van-ellipsis">描述信息</div>
@@ -18,7 +23,11 @@ exports[`renders demo correctly 1`] = `
   </div>
   <div>
     <div class="van-card">
-      <div class="van-card__header"><a class="van-card__thumb"><img src="//img.yzcdn.cn/upload_files/2017/07/02/af5b9f44deaeb68000d7e4a711160c53.jpg" class="van-card__img">
+      <div class="van-card__header"><a class="van-card__thumb">
+          <div class="van-image" style="width: 100%; height: 100%;"><img src="//img.yzcdn.cn/upload_files/2017/07/02/af5b9f44deaeb68000d7e4a711160c53.jpg" class="van-image__img" style="object-fit: contain;">
+            <div class="van-image__loading"><i class="van-icon van-icon-photo-o" style="font-size: 22px;">
+                <!----></i></div>
+          </div>
           <div class="van-card__tag"><span class="van-tag van-tag--mark" style="background-color: rgb(255, 68, 68);">标签</span></div>
         </a>
         <div class="van-card__content">