QinUi

# ItemOrder 订单卡片

统一封装

# 基础用法

<template>
  <qinui-item-order :data="theOneData" />
</template>

<script setup>
  const theOneData = {
    incrementId: 'DZ2401091719403896381649',
    createdAt: '01-09 17:19:40',
    pOrderId: '',
    payAmount: '0.00',
    productTitle: '测试预约时段测试预约时段测试预约时段',
    productSubTitle: '描述',
    productSkuTitle: '',
    orderState: '待使用',
    canReserve: true,
    ticketNo: '',
    productUnitLabel: '件',
    total: 1,
    showReserve: true,
    productDate: '2020年10月11日',
    reserveState: 2,
    poster:
      'https://dz-cdn.test.fanzhi.cn/images/51/71/676c329c8dbbf8727f68ad0257f4.jpg',
    needAppointment: true,
    appointmentType: 1,
    isThirdOrder: false,
    isLogistics: 0,
  };
</script>

# 扩展按钮演示

<template>
  <qinui-item-order :data="theTwoData" />
</template>

<script setup>
  const theTwoData = {
    incrementId: 'DZ2306200954593896339739',
    createdAt: '06-20 09:54:59',
    pOrderId: '',
    payAmount: '1.00',
    productTitle: '空调清洗服务',
    productSubTitle: '描述',
    productSkuTitle: '',
    orderState: '待支付',
    canReserve: false,
    ticketNo: '',
    productUnitLabel: '件',
    total: 1,
    productDate: '2022年11月12日',
    showReserve: false,
    reserveState: 2,
    poster:
      'https://dz-cdn.test.fanzhi.cn/images/37/bc/87654f20ba5dd1e63c89502876ac.jpg',
    needAppointment: true,
    appointmentType: 1,
    isThirdOrder: false,
    isLogistics: 0,
  };
</script>

# API

# Props

参数 说明 类型 默认值 可选值
data 数据 Object - -
fieldNames 字段映射，参考 Object {
incrementId: 'incrementId',
orderState: 'orderState',
poster: 'poster',
productTitle: 'productTitle',
productSkuTitle: 'productSkuTitle',
createdAt: 'createdAt',
productDate: 'productDate',
total: 'total',
productUnitLabel: 'productUnitLabel',
payAmount: 'payAmount',
}		 -

# FieldNames Props

参数 说明 类型 默认值 可选值
incrementId 订单 id String incrementId -
orderState 订单状态 String orderState -
poster 封面图 String poster -
productTitle 标题 String productTitle -
productSkuTitle 副标题 String productSkuTitle -
createdAt 创建时间 String createdAt -
productDate 有效期时间 String productDate -
total 下单个数 String total -
productUnitLabel 单位 String productUnitLabel -
payAmount 支付金额 String payAmount -

# Events

事件名 说明 回调参数
@click 点击触发 -

← LayoutOrderList 订单列表 →