npm package: @retailwe/ui-order-card
Description: ## 引入
Latest version: 0.0.26

# order-card

## 引入

全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。

```json
// app.json 或 index.json
"usingComponents": {
  "wr-order-card": "@retailwe/ui-order-card/index",
}
```

## 代码演示

### 基础用法

```ts
import { Order } from '@/components/order-card/index.d';

Page({
  data: {
    order: {},
  },
  onLoad() {
    const order: Order = {
      id: 1,
      storeName: '滨海大厦店',
      amount: 19998,
      statusDesc: '待支付',
      goodsList: [
        {
          id: 1,
          title: '臻味天天坚果每日坚果礼盒坚果零食大礼包 儿童款200g',
          thumb:
            'https://image.fenlaishop.com/product/admin_undefined_1575186755489.jpg',
          price: 9999,
          num: 1,
          specs: ['新品'],
        },
        {
          id: 2,
          title: '臻味天天坚果每日坚果礼盒坚果零食大礼包 成人款540g',
          thumb:
            'https://image.fenlaishop.com/product/admin_undefined_1575186755489.jpg',
          price: 9999,
          num: 1,
          specs: ['新品', '满减'],
        },
      ],
    };
    this.setData({ order });
  },
});
```


```html
<wr-order-card wr-class="order-section c-order-card" order="{{order}}">
  <block wx:for="{{order.goodsList}}" wx:key="id" wx:for-item="goods" wx:for-index="gIndex">
    <wr-goods-card data="{{goods}}" bind:cardtap="onGoodsCardTap" data-index="{{gIndex}}" />
  </block>
</wr-order-card>
```

### 折叠部分商品

```html
<wr-order-card wr-class="order-section c-order-card" order="{{order}}" defaultShowNum="1">
  <block wx:for="{{order.goodsList}}" wx:key="id" wx:for-item="goods" wx:for-index="gIndex">
    <wr-goods-card data="{{goods}}" bind:cardtap="onGoodsCardTap" data-index="{{gIndex}}" />
  </block>
</wr-order-card>
```

### 底部自定义内容

```html
<wr-order-card wr-class="order-section c-order-card" order="{{order}}">
  <block wx:for="{{order.goodsList}}" wx:key="id" wx:for-item="goods" wx:for-index="gIndex">
    <wr-goods-card data="{{goods}}" bind:cardtap="onGoodsCardTap" data-index="{{gIndex}}" />
  </block>
  <view slot="more">
    <view class="price-total">
      <view class="float">
        共 {{order.goodsList.length}} 件商品 合计：
        <view class="symbol">¥</view>
        <wr-price
          fill
          wr-class="order-price"
          decimal-class="order-price__decimal"
          price="{{order.amount + ''}}"
          symbol="">
        </wr-price>
      </view>
      <view class="clear"></view>
    </view>
  </view>
</wr-order-card>
```

### 右上角自定义内容

```html
<wr-order-card wr-class="order-section c-order-card" order="{{order}}" use-top-right-slot>
  <block wx:for="{{order.goodsList}}" wx:key="id" wx:for-item="goods" wx:for-index="gIndex">
    <wr-goods-card data="{{goods}}" bind:cardtap="onGoodsCardTap" data-index="{{gIndex}}" />
  </block>
  <view class="text-btn" slot="top-right" bindtap="onClick">联系客服</view>
</wr-order-card>
```

## API

### order-card Props

| 参数 | 说明 | 类型 | 默认值 | 版本 |
|-----------|-----------|-----------|-------------|-------------|
| order | 订单对象 | *object* | - | - |
| use-top-right-slot | 是否使用右上角插槽 | *boolean* | `false` | - |
| default-show-num | 默认显示的商品数量，多余部分折叠 | *number* | `2` | - |

#### order 结构

```ts
export interface OrderGoods {
  id: number;
  thumb: string; // 商品图片
  title: string; // 商品名称
  specs: string[]; // 商品规格
  price: number; // 商品付款单价
  num: number; // 商品数量
  [keyName: string]: any;
}

export interface Order {
  id: number;
  storeName: string; // 门店名称
  status?: number; // 订单状态
  statusDesc?: string; // 订单状态描述
  amount: number; // 订单总付款金额
  goodsList: OrderGoods[]; // 商品列表
  [keyName: string]: any;
}

```



#### goods 结构

```ts
interface OrderGoods {
  id: number;
  thumb: string; // 商品图片
  title: string; // 商品名称
  specs: string[]; // 商品规格
  price: number; // 商品付款单价
  num: number; // 商品数量
  [keyName: string]: any;
}
```

### order-card Event

| 事件名 | 说明 | 参数 |
|-----------|-----------|-----------|
| cardtap | 卡片被点击时触发 | - |
| showall | 展开所有商品时触发 | - |

### order-card Slot

| 名称 | 说明 |
|-----------|-----------|
| - | 传入商品组件order-goods-card |
| more | 自定以卡片底部的内容 |
| top-right | 自定义右上角显示内容 |

### CSS Var
| 类名 | 属性 | 说明 | 默认值 |
| --------------- | -------- | -------- | ------ |
| --ui-order-card-order-status-color | color | 订单卡片右上角状态颜色 | #fa550f |
| --ui-order-card-more-mask-color | color | 订单卡片 展开更多 颜色 | #fa550f |