order-card

引入

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

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

代码演示

基础用法

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 });
  },
});

<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>

折叠部分商品

<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>

底部自定义内容

<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>

右上角自定义内容

<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 结构

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 结构

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 |