[breaking change] Card: rewrite

example/components/demo-block/index.js

@@ -1,5 +1,7 @@
 Component({
   properties: {
     title: String
-  }
+  },
+
+  externalClasses: ['custom-class']
 });

example/components/demo-block/index.wxml

@@ -1,4 +1,4 @@
-<view class="demo-block">
+<view class="custom-class demo-block">
   <view wx:if="{{ title }}" class="demo-block__title">{{ title }}</view>
   <slot />
 </view>

example/pages/card/index.js

@@ -1,11 +1,5 @@
 Page({
   data: {
-  },
+    imageURL: '//img.yzcdn.cn/upload_files/2017/07/02/af5b9f44deaeb68000d7e4a711160c53.jpg'
-
+  }
-  onLoad: function () {
+});
-
-  },
-
-  onShow: function() {
-  },
-})

example/pages/card/index.json

@@ -1,7 +1,8 @@
 {
   "navigationBarTitleText": "Card 卡片",
   "usingComponents": {
+    "demo-block": "../../components/demo-block/index",
     "van-card": "../../dist/card/index",
-    "van-panel": "../../dist/panel/index"
+    "van-button": "../../dist/button/index"
   }
 }

example/pages/card/index.wxml

@@ -1,27 +1,29 @@
-<van-panel without-border>
+<view class="container">
+  <demo-block title="基础用法">
     <van-card
-    card-class="test-card"
+      title="标题"
-    thumb="https://img.yzcdn.cn/upload_files/2016/11/25/FpqPXlrMRjKwJs8VdTu3ZDJCj4j5.jpeg?imageView2/2/w/200/h/200/q/90/format/jpeg"
+      desc="描述信息"
-    price="999.99"
-    title="红烧牛肉【虚拟商品】【有库存】【有sku】"
       num="2"
-    desc="3000克 50%"
+      price="2.00"
-    status="已发货"
+      thumb="{{ imageURL }}"
-  >
+      custom-class="card"
-  </van-card>
+    />
+  </demo-block>
 
-</van-panel>
+  <demo-block title="高级用法">
-
-<van-panel title="使用slot">
     <van-card
-    card-class="test-card"
+      title="标题"
-    thumb="https://img.yzcdn.cn/upload_files/2016/11/25/FpqPXlrMRjKwJs8VdTu3ZDJCj4j5.jpeg?imageView2/2/w/200/h/200/q/90/format/jpeg"
+      desc="描述信息"
-    useThumbSlot="{{ true }}"
+      num="2"
-    useDetailSlot="{{ true }}"
+      price="2.00"
+      thumb="{{ imageURL }}"
+      custom-class="card"
+      use-footer-slot="{{ true }}"
     >
-    <!-- 右侧详情 -->
+      <div slot="footer">
-    <view slot="detail-slot" class="van-card__detail">
+        <van-button size="mini" custom-class="button">按钮</van-button>
-      我是自定义内容区域
+        <van-button size="mini">按钮</van-button>
-    </view>
+      </div>
     </van-card>
-</van-panel>
+  </demo-block>
+</view>

example/pages/card/index.wxss

@@ -1 +1,12 @@
+.container {
+  height: 100vh;
+  background-color: #fff;
+}
 
+.card {
+  margin: 0 -15px;
+}
+
+.button {
+  margin-right: 5px;
+}

packages/card/README.md

@@ -1,61 +1,80 @@
 ## Card 卡片
 
 ### 使用指南
+
 在 index.json 中引入组件
 ```json
-{
 "usingComponents": {
   "van-card": "path/to/vant-weapp/dist/card/index"
 }
-}
 ```
+
 ### 代码演示
 
 #### 基础用法
-卡片可以用于左侧图片，右侧描述信息的展示。默认是商品相关内容的展示，需要展示其他内容可以使用自定义slot。
 
 ```html
 <van-card
-  card-class="test-card"
+  title="标题"
-  thumb="https://img.yzcdn.cn/upload_files/2016/11/25/FpqPXlrMRjKwJs8VdTu3ZDJCj4j5.jpeg?imageView2/2/w/200/h/200/q/90/format/jpeg"
+  desc="描述"
-  price="999.99"
-  title="红烧牛肉【虚拟商品】【有库存】【有sku】"
   num="2"
-  desc="3000克 50%"
+  price="2.00"
-  status="已发货"
+  thumb="{{ imageURL }}"
->
+/>
-</van-card>
 ```
 
-#### 使用slot
+#### 高级用法
-`van-card` 由 `van-card__thumb` 和 `van-card__detail` 组成。分别负责左侧图片展示和右侧内容区域展示。两部分内容可以使用slot进行替换。
+可以通过具名`slot`添加定制内容
 
 ```html
 <van-card
-  card-class="test-card"
+  title="标题"
-  useDetailSlot="{{ true }}"
+  desc="描述"  
+  num="2"
+  price="2.00"
+  thumb="{{ imageURL }}"
+  use-footer-slot="{{ true }}"
 >
-  <!-- 右侧详情 -->
+  <div slot="footer">
-  <view slot="detail-slot" class="van-card__detail">
+    <van-button size="mini">按钮</van-button>
-    我是标题
+    <van-button size="mini">按钮</van-button>
-  </view>
+  </div>
 </van-card>
 ```
 
 ### API
+
 | 参数 | 说明 | 类型 | 默认值 |
-|-----|-----|-----|-----|
+|-----------|-----------|-----------|-------------|
-| card-class | 自定义最外层class | String | -
+| thumb | 左侧图片 | `String` | - |
-| thumb | 左侧缩略图 | String | -
+| title | 标题 | `String` | - |
-| price | 商品价格 | String | -
+| desc | 描述 | `String` | - |
-| title | 商品标题 | String | -
+| num | 商品数量 | `String | Number` | - |
-| desc | 商品描述 | String | -
+| price | 商品价格 | `String | Number` | - |
-| num | 商品数量 | Number | -
+| centered | 内容是否垂直居中 | `String` | `false` |
-| status | 商品状态 | String | -
+| currency | 货币符号 |  `String` | `¥` |
-| useDetailSlot | 是否使用detail-slot（true时需要添加对应slot） | Boolean | `false`
+| use-desc-slot | 是否使用 desc slot | `Boolean` | `false` |
+| use-title-slot | 是否使用 title slot | `Boolean` | `false` |
+| use-thumb-slot | 是否使用 thumb slot | `Boolean` | `false` |
+| use-footer-slot | 是否使用 footer slot | `Boolean` | `false` |
+
+### Slot
+
+| 名称 | 说明 |
+|-----------|-----------|
+| title | 自定义标题 |
+| desc | 自定义描述 |
+| tags | 自定义 tags |
+| thumb | 自定义 thumb |
+| footer | 自定义 footer |
 
 ### 外部样式类
+
 | 类名 | 说明 |
 |-----------|-----------|
-| card-class | 根节点自定义样式类，通过这个可以改变根节点上的样式 |
+| custom-class | 根节点样式类 |
-| thumb-class | 左侧图片自定义样式类，可以通过这个修改图片的展示大小形式 |
+| thumb-class | 左侧图片样式类 |
+| title-class | 标题样式类 |
+| price-class | 价格样式类 |
+| desc-class | 描述样式类 |
+| num-class | 数量样式类 |

packages/card/index.js

@@ -3,22 +3,29 @@ Component({
     multipleSlots: true
   },
 
-  externalClasses: ['card-class', 'thumb-class'],
+  externalClasses: [
+    'custom-class',
+    'thumb-class',
+    'title-class',
+    'price-class',
+    'desc-class',
+    'num-class'
+  ],
 
   properties: {
-    useThumbSlot: {
+    num: String,
-      type: Boolean,
-      value: false
-    },
-    useDetailSlot: {
-      type: Boolean,
-      value: false
-    },
-    thumb: String,
-    price: String,
-    title: String,
-    num: Number,
     desc: String,
-    status: String
+    thumb: String,
+    title: String,
+    price: String,
+    centered: Boolean,
+    currency: {
+      type: String,
+      default: '¥'
+    },
+    useDescSlot: Boolean,
+    useTitleSlot: Boolean,
+    useThumbSlot: Boolean,
+    useFooterSlot: Boolean
   }
 });

packages/card/index.pcss

@@ -1,55 +1,94 @@
-@import "../color/index.pcss";
+@import '../common/var.pcss';
-@import "../helper/index.pcss";
+@import '../common/_mixins.pcss';
 
 .van-card {
-  display: flex;
+  color: $text-color;
-  margin-left: 0px;
+  height: 100px;
-  padding: 5px 15px;
+  font-size: 16px;
-  overflow: hidden;
+  background: #fafafa;
   position: relative;
-  font-size: 14px;
+  box-sizing: border-box;
+  padding: 5px 15px 5px 115px;
+
+  &--center,
+  &__thumb {
+    align-items: center;
+    justify-content: center;
   }
 
-.van-card__thumb {
+  &__thumb {
+    top: 5px;
+    left: 15px;
     width: 90px;
     height: 90px;
-  position: relative;
+    position: absolute;
-  margin-left: auto;
-  margin-right: auto;
-  overflow: hidden;
-  background-size: cover;
   }
 
-.van-card__img {
+  &__img {
-  position: absolute;
+    border: none;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  width: auto;
-  height: auto;
     max-width: 100%;
     max-height: 100%;
   }
 
-.van-card__detail {
+  &,
-  flex: 1;
+  &__thumb,
-  margin-left: 10px;
+  &__row {
-  position: relative;
+    display: flex;
   }
 
-.van-card__detail-row {
+  &__content {
-  overflow: hidden;
+    width: 100%;
+
+    &--center {
+      height: 90px;
+      align-items: center;
+    }
+  }
+
+  &__title,
+  &__desc {
     line-height: 20px;
-  min-height: 20px;
+    word-break: break-all;
-  margin-bottom: 3px;
   }
 
-.van-card__right-col {
+  &__title {
-  float: right;
+    max-height: 40px;
+
+    @mixin multi-ellipsis 2;
   }
 
-.van-card__left-col {
+  &__desc {
-  margin-right: 80px;
+    color: $gray-darker;
+    font-size: 12px;
+    max-height: 20px;
+
+    @mixin ellipsis;
   }
 
+  &__price,
+  &__num {
+    flex: 1;
+    min-width: 80px;
+    line-height: 20px;
+    text-align: right;
+  }
+
+  &__price {
+    font-size: 14px;
+  }
+
+  &__num {
+    color: $gray-darker;
+    font-size: 12px;
+  }
+
+  &__footer {
+    right: 15px;
+    bottom: 5px;
+    position: absolute;
+
+    .van-button {
+      margin-left: 5px;
+    }
+  }
+}

packages/card/index.wxml

@@ -1,33 +1,22 @@
-<view class="card-class van-card">
+<view class="custom-class van-card">
-  <!-- 左侧图片 -->
+  <view class="van-card__thumb">
-  
+    <slot wx:if="{{ useThumbSlot }}" name="thumb" />
-  <view class="thumb-class van-card__thumb">
+    <image wx:else src="{{ thumb }}" class="van-card__img thumb-class" />
-    <image class="van-card__img"
-      src="{{ thumb }}"
-      mode="aspectFit"
-    ></image>
   </view>
-  <!-- 右侧详情 -->
+  <view class="van-card__content">
-  <view class="van-card__detail">
+    <slot wx:if="{{ useTitleSlot }}" name="title" />
-    <slot wx:if="{{ useDetailSlot }}" name="detail-slot"></slot>
+    <view wx:elseif="{{ title || price }}" class="van-card__row">
-    <block wx:else>
+      <view wx:if="{{ title }}" class="van-card__title title-class">{{ title }}</view>
-      <view class="van-card__detail-row">
+      <view wx:if="{{ price }}" class="van-card__price price-class">{{ currency }} {{ price }}</view>
-        <view class="van-card__right-col">¥ {{ price }}</view>
+    </view>
-        <view class="van-card__left-col van-ellipsis--l2">
+    <slot wx:if="{{ useDescSlot }}" name="desc" />
-          {{ title }}
+    <view wx:elseif="{{ desc || num }}" class="van-card__row">
-        </view>
+      <view wx:if="{{ desc }}" class="van-card__desc desc-class">{{ desc }}</view>
-      </view>
+      <view wx:if="{{ num }}" class="van-card__num num-class">x {{ num }}</view>
-
+    </view>
-      <view class="van-card__detail-row van-c-gray-darker">
+    <slot name="tags" />
-        <view wx:if="{{ num }}" class="van-card__right-col">x {{ num }}</view>
+  </view>
-        <view wx:if="{{ desc }}" class="van-card__left-col">
+  <view class="van-card__footer" wx:if="{{ useFooterSlot }}">
-          {{ desc }}
+    <slot name="footer" />
-        </view>
-      </view>
-
-      <view wx:if="{{ status }}" class="van-card__detail-row">
-        <view class="van-card__left-col van-c-red">{{ status }}</view>
-      </view>
-    </block>
   </view>
 </view>

packages/common/_mixins.pcss

@@ -13,3 +13,17 @@
   box-sizing: border-box;
   border: 0 solid $border-retina-color;
 }
+
+@define-mixin multi-ellipsis $lines {
+  overflow : hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: $lines;
+  -webkit-box-orient: vertical;
+}
+
+@define-mixin ellipsis {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}