feat: add Card

Author: pengshanglong

src/components/card/index.jsx

@@ -0,0 +1,100 @@
+import classNames from 'classnames'
+
+export default {
+  name: 'Card',
+  props: {
+    note: {
+      type: String,
+      default: '',
+    },
+    isFull: {
+      type: Boolean,
+      default: false,
+    },
+    thumb: {
+      type: String,
+      default: '',
+    },
+    title: {
+      type: String,
+      default: '',
+    },
+    extra: {
+      type: String,
+      default: '',
+    },
+    icon: {
+      type: Object,
+      default: () => {},
+    },
+    onClick: {
+      type: Function,
+      default: () => () => {},
+    },
+    renderIcon: {
+      type: String,
+      default: '',
+    },
+    extraStyle: {
+      type: Object,
+      default: () => {},
+    },
+    className: {
+      type: [String, Array],
+      default: '',
+    },
+  },
+  methods: {
+    handleClick(args) {
+      if (typeof this.onClick === 'function') {
+        this.onClick(args)
+      }
+    },
+  },
+  render() {
+    const { title, note, extra, extraStyle, thumb, isFull, icon, renderIcon } = this
+
+    const rootClass = classNames(
+      'at-card',
+      {
+        'at-card--full': isFull,
+      },
+      this.className
+    )
+    const iconClass = classNames({
+      'at-icon': true,
+      [`at-icon-${icon && icon.value}`]: icon && icon.value,
+      'at-card__header-icon': true,
+    })
+
+    const iconStyle = {
+      color: (icon && icon.color) || '',
+      fontSize: (icon && `${icon.size}px`) || '',
+    }
+
+    return (
+      <view onClick={this.handleClick} class={rootClass}>
+        <view class="at-card__header">
+          {thumb && (
+            <view class="at-card__header-thumb">
+              <image class="at-card__header-thumb-info" mode="scaleToFill" src={thumb} />
+            </view>
+          )}
+          {renderIcon || this.$slots.renderIcon || ''}
+          {!thumb && icon && icon.value && <view class={iconClass} style={iconStyle}></view>}
+
+          <view class="at-card__header-title">{title}</view>
+          {extra && (
+            <view style={{ ...extraStyle }} class="at-card__header-extra">
+              {extra}
+            </view>
+          )}
+        </view>
+        <view class="at-card__content">
+          <view class="at-card__content-info">{this.$slots.default}</view>
+          {note && <view class="at-card__content-note">{note}</view>}
+        </view>
+      </view>
+    )
+  },
+}

src/components/index.ts

@@ -1,5 +1,6 @@
 import Grid from './grid/index'
 import List from './list/index'
 import ListItem from './list/item/index'
+import Card from './card/index'
 
-export { Grid, List, ListItem }
+export { Grid, List, ListItem, Card }

src/pages/index/index.vue

@@ -2,6 +2,18 @@
   <view 
     class="index"
   >
+    <Card
+      note="小Tips"
+      extra="额外信息"
+      title="这是个标题"
+      thumb="http://img10.360buyimg.com/jdphoto/s72x72_jfs/t5872/209/5240187906/2872/8fa98cd/595c3b2aN4155b931.png"
+    >
+      <Icon
+        slot="renderIcon"
+        value="bell"
+      />
+      这也是内容区 可以随意定义功能
+    </Card>
     <List>
       <ListItem
         title="标题文字"
@@ -171,6 +183,7 @@
       font-color="#2d8cf0"
       line-color="#2d8cf0"
     />
+    </card>
   </view>
 </template>
 
@@ -198,7 +211,7 @@ import ModalAction  from '../../components/modal/action/index.jsx'
 import Toast from '../../components/toast/index.jsx'
 import SwipeAction from '../../components/swipe-action/index.jsx'
 import Message from '../../components/message/index.jsx'
-import { Grid, List, ListItem } from '../../components/index'
+import { Grid, List, ListItem, Card } from '../../components/index'
 
 export default {
   name: 'Index',
@@ -228,6 +241,7 @@ export default {
     Grid,
     List,
     ListItem,
+    Card,
   },
   data() {
     return {