stellar-ui-plus 1.20.21 → 1.20.23

package/components/ste-barcode/encode.ts

@@ -172,7 +172,7 @@ export function stringToCode128(text: string) {
 
     codes = codes.concat(codesForChar(b1, b2, barc.currcs))
     // code C takes 2 chars each time
-    if (barc.currcs === CODESET.C)
+    if (barc.currcs === CODESET.C)
       i++
   }
 
@@ -203,7 +203,7 @@ export function stringToCode128(text: string) {
   function perhapsCodeC(bytes: number[], codeset: number) {
     for (let i = 0; i < bytes.length; i++) {
       const b = bytes[i]
-      if ((b < 48 || b > 57) && b !== CHAR_TILDE)
+      if ((b < 48 || b > 57) && b !== CHAR_TILDE)
         return codeset
     }
     return CODESET.C
@@ -221,13 +221,13 @@ export function stringToCode128(text: string) {
         if (chr2 === -1) {
           shifter === SET_CODEB
           currcs = CODESET.B
-        }
+        }
         else if (chr2 !== -1 && !charCompatible(chr2, currcs)) {
           // need to check ahead as well
           if (charCompatible(chr2, CODESET.A)) {
             shifter = SET_CODEA
             currcs = CODESET.A
-          }
+          }
           else {
             shifter = SET_CODEB
             currcs = CODESET.B
@@ -235,7 +235,7 @@ export function stringToCode128(text: string) {
         }
       }
       /* eslint-enable no-unused-expressions */
-    }
+    }
     else {
       // if there is a next char AND that next char is also not compatible
 
@@ -251,11 +251,11 @@ export function stringToCode128(text: string) {
             currcs = CODESET.A
             break
         }
-      }
+      }
       else {
         // no need to shift code sets, a temporary SHIFT will suffice
         shifter = SET_SHIFT
-      }
+      }
     }
 
     // ok some type of shift is nessecary
@@ -263,12 +263,12 @@ export function stringToCode128(text: string) {
       result.push(shifter)
       // result.push(codeValue(chr2));-----------------------------------
       result.push(codeValue(chr1))
-    }
+    }
     else {
       if (currcs === CODESET.C) {
         // include next as well
         result.push(codeValue(chr1, chr2))
-      }
+      }
       else {
         result.push(codeValue(chr1))
       }
@@ -284,19 +284,19 @@ function codeValue(chr1: number, chr2: any = undefined) {
   if (typeof chr2 === 'undefined')
     return chr1 >= 32 ? chr1 - 32 : chr1 + 64
   else
-    return Number.parseInt(String.fromCharCode(chr1) + String.fromCharCode(chr2))
+    return Number.parseInt(String.fromCharCode(chr1) + String.fromCharCode(chr2))
 }
 
 function charCompatible(chr: number, codeset: number) {
   const csa = codeSetAllowedFor(chr)
-  if (csa === CODESET.ANY)
+  if (csa === CODESET.ANY)
     return true
     // if we need to change from current
-  if (csa === CODESET.AB)
+  if (csa === CODESET.AB)
     return true
-  if (csa === CODESET.A && codeset === CODESET.A)
+  if (csa === CODESET.A && codeset === CODESET.A)
     return true
-  if (csa === CODESET.B && codeset === CODESET.B)
+  if (csa === CODESET.B && codeset === CODESET.B)
     return true
   return false
 }
@@ -305,11 +305,11 @@ function codeSetAllowedFor(chr: number) {
   if (chr >= 48 && chr <= 57) {
     // 0-9
     return CODESET.ANY
-  }
+  }
   else if (chr >= 32 && chr <= 95) {
     // 0-9 A-Z
     return CODESET.AB
-  }
+  }
   else {
     // if non printable
     return chr < 32 ? CODESET.A : CODESET.B

package/components/ste-donut-chart/ATTRIBUTES.md

@@ -0,0 +1,33 @@
+#### Props
+| 属性名 | 说明  | 类型 | 默认值  | 可选值 | 支持版本 |
+| ----- | ----- | --- | ------- | ------ | -------- |
+| `width` | 图表宽度，单位rpx | `number / string` | `750` | - | - |
+| `height` | 图表高度，单位rpx | `number / string` | `200` | - | - |
+| `canvas2d` | canvas2d模式，用于解决小程序层级过高及拖拽卡顿问题 | `boolean` | `true` | - | - |
+| `pixelRatio` | 设备像素比，解决开启canvas2d后画布模糊的问题 | `number` | `微信小程序由具体设备决定，其余的默认为1` | - | - |
+| `animation` | 是否动画展示图表 | `boolean` | `true` | - | - |
+| `timing` | 图表动画效果 | `string` | `easeOut` | `easeOut`：由快到慢<br/>`easeIn`：由慢到快<br/>`easeInOut`：慢快慢<br/>`linear`：匀速 | - |
+| `duration` | 动画展示时长（单位：毫秒） | `string` | `1000` | - | - |
+| `rotate` | 横屏模式 | `boolean` | `false` | - | - |
+| `rotateLock` | 横屏锁定模式 | `boolean` | `false` | - | - |
+| `background` | 背景颜色，开启滚动条后请赋值 | `string` | `rgba(0,0,0,0)` | - | - |
+| `color` | 主题颜色数组，16进制颜色格式 | `array` | `["#165DFF","#14C9C9","#F7BA1E","#3491FA","#722ED1","#9FDB1D"]` | - | - |
+| `padding` | 画布填充边距（顺序为上右下左），单位px | `array` | `[5,5,5,5]` | - | - |
+| `fontSize` | 全局默认字体大小，单位px | `number` | `13` | - | - |
+| `fontColor` | 全局默认字体颜色 | `string` | `#666666` | - | - |
+| `dataLabel` | 是否显示图表区域内数据点上方的数据文案 | `boolean` | `false` | - | - |
+| `dataPointShape` | 是否显示数据点的图形标识 | `boolean` | `true` | - | - |
+| `dataPointShapeType` | 图形标识点显示类型 | `string` | `solid` | `solid`：实心<br/>`hollow`：空心 | - |
+| `touchMoveLimit` | 图表拖拽时每秒重新渲染的帧数 | `number` | `24` | - | - |
+| `enableScroll` | 开启滚动条功能 | `boolean` | `false` | - | - |
+| `enableMarkLine` | 是否启用标记线功能 | `boolean` | `false` | - | - |
+| `scrollPosition` | 连续更新数据时滚动条的位置 | `string` | `current` | `current`：当前位置<br/>`left`：左对齐<br/>`right`：右对齐 | - |
+| `series` | 图表数据 | `object` | `{}` | - | - |
+| `xAxis` | X轴配置 | `-` | <a href="https://www.ucharts.cn/v2/#/document/index" target="_blank">文档地址</a> | - | - |
+| `yAxis` | Y轴配置 | `-` | <a href="https://www.ucharts.cn/v2/#/document/index" target="_blank">文档地址</a> | - | - |
+| `legend` | 图例配置 | `-` | <a href="https://www.ucharts.cn/v2/#/document/index" target="_blank">文档地址</a> | - | - |
+| `title` | 标题配置（仅适用于 ring、arcbar、gauge） | `-` | <a href="https://www.ucharts.cn/v2/#/document/index" target="_blank">文档地址</a> | - | - |
+| `subtitle` | 副标题配置 | `-` | <a href="https://www.ucharts.cn/v2/#/document/index" target="_blank">文档地址</a> | - | - |
+| `extra` | 额外配置项 | `-` | <a href="https://www.ucharts.cn/v2/#/document/index" target="_blank">文档地址</a> | - | - |
+
+

package/components/ste-function-list/ste-function-list.vue

@@ -12,23 +12,23 @@ const rootStyle = computed(() => {
 });
 
 const emits = defineEmits<{
-    (e: 'click-header', type: 'title' | 'subhead' | 'more'): void;
-    (e: 'click-item', type: 'image' | 'title' | 'subhead' | 'status' | 'button', item: FunctionListItem): void;
+    (e: 'click-header', type: 'empty' | 'title' | 'subhead' | 'more'): void;
+    (e: 'click-item', type: 'empty' | 'image' | 'title' | 'subhead' | 'status' | 'button', item: FunctionListItem): void;
     (e: 'click-empty', type: 'image' | 'text' | 'button'): void;
 }>();
 
-const onClickHeader = (type: 'title' | 'subhead' | 'more') => emits('click-header', type);
+const onClickHeader = (type: 'empty' | 'title' | 'subhead' | 'more') => emits('click-header', type);
 
-const onClickItem = (type: 'image' | 'title' | 'subhead' | 'status' | 'button', item: FunctionListItem) => emits('click-item', type, item);
+const onClickItem = (type: 'empty' | 'image' | 'title' | 'subhead' | 'status' | 'button', item: FunctionListItem) => emits('click-item', type, item);
 
 const onClickEmpty = (type: 'image' | 'text' | 'button') => emits('click-empty', type);
 </script>
 <template>
     <view class="ste-function-list-root" :style="[rootStyle]">
-        <view class="ste-function-list-header">
+        <view class="ste-function-list-header" @click="onClickHeader('empty')">
             <view class="ste-function-list-header-l">
-                <view class="ste-function-list-title" @click="onClickHeader('title')">{{ title }}</view>
-                <view class="ste-function-list-subhead" @click="onClickHeader('subhead')">
+                <view class="ste-function-list-title" @click.stop="onClickHeader('title')">{{ title }}</view>
+                <view class="ste-function-list-subhead" @click.stop="onClickHeader('subhead')">
                     <slot name="subhead">
                         {{ subhead }}
                     </slot>
@@ -36,7 +36,7 @@ const onClickEmpty = (type: 'image' | 'text' | 'button') => emits('click-empty',
             </view>
             <view class="ste-function-list-header-r">
                 <slot name="header-right">
-                    <view class="ste-function-list-more" @click="onClickHeader('more')">
+                    <view class="ste-function-list-more" @click.stop="onClickHeader('more')">
                         更多
                         <ste-icon code="&#xe674;" color="#353535"></ste-icon>
                     </view>
@@ -45,24 +45,17 @@ const onClickEmpty = (type: 'image' | 'text' | 'button') => emits('click-empty',
         </view>
         <view class="ste-function-list-content" v-if="data?.length">
             <scroll-view scroll-x class="content-list" :class="{ multiple: data?.length > 1 }">
-                <view class="content-list-item" v-for="(item, index) in data" :key="index">
-                    <view class="content-list-item-image" @click="onClickItem('image', item)">
+                <view class="content-list-item" v-for="(item, index) in data" :key="index" @click="onClickItem('empty', item)">
+                    <view class="content-list-item-image" @click.stop="onClickItem('image', item)">
                         <ste-image :src="item.image" mode="aspectFill"></ste-image>
                     </view>
                     <view class="content-list-item-info">
-                        <view class="content-list-item-info-title" @click="onClickItem('title', item)">{{ item.title }}</view>
-                        <view class="content-list-item-info-subhead" v-if="item.subhead" @click="onClickItem('subhead', item)">{{ item.subhead }}</view>
+                        <view class="content-list-item-info-title" @click.stop="onClickItem('title', item)">{{ item.title }}</view>
+                        <view class="content-list-item-info-subhead" v-if="item.subhead" @click.stop="onClickItem('subhead', item)">{{ item.subhead }}</view>
                         <view class="content-list-item-info-footer">
-                            <view class="content-list-item-info-status" @click="onClickItem('status', item)">{{ item.statusText }}</view>
-                            <view class="content-list-item-info-button" v-if="item.buttonText || buttonText || item.buttonIcon || buttonIcon">
-                                <ste-button
-                                    :mode="100"
-                                    :rootStyle="{ height: '56rpx' }"
-                                    type="primary"
-                                    @click="onClickItem('button', item)"
-                                    :background="item.buttonBg || buttonBg"
-                                    :color="item.buttonColor || buttonColor"
-                                >
+                            <view class="content-list-item-info-status" @click.stop="onClickItem('status', item)">{{ item.statusText }}</view>
+                            <view class="content-list-item-info-button" v-if="item.buttonText || buttonText || item.buttonIcon || buttonIcon" @click.stop="onClickItem('button', item)">
+                                <ste-button :mode="100" :rootStyle="{ height: '56rpx' }" type="primary" :background="item.buttonBg || buttonBg" :color="item.buttonColor || buttonColor">
                                     <ste-icon :code="item.buttonIcon || buttonIcon" :color="item.buttonColor || buttonColor" />
                                     {{ item.buttonText || buttonText }}
                                 </ste-button>
@@ -73,7 +66,7 @@ const onClickEmpty = (type: 'image' | 'text' | 'button') => emits('click-empty',
             </scroll-view>
         </view>
         <view class="ste-function-list-empty" v-else>
-            <ste-image :src="emptyImage" width="96" height="96" @clicl="onClickEmpty('image')" />
+            <ste-image :src="emptyImage" width="96" height="96" @click="onClickEmpty('image')" />
             <view class="empty-message" @click="onClickEmpty('text')">{{ emptyText }}</view>
             <ste-button :mode="100" :rootStyle="{ height: '56rpx' }" type="primary" :background="buttonBg" :color="buttonColor" @click="onClickEmpty('button')">
                 {{ emptyButtonText }}

package/components/ste-goods-info/README.md

@@ -127,7 +127,7 @@
 </template>
 ```
 
-### 插槽
+### 默认插槽
 
 - 默认插槽内容为商品编码下的其他展示项
 
@@ -149,6 +149,28 @@
 </template>
 ```
 
+### 替换步进器插槽
+
+- 使用该插槽后步进器将无法生效
+
+```html
+<script setup lang="ts">
+    import { ref } from 'vue';
+    const data = ref({
+        image: 'https://image.whzb.com/chain/StellarUI/bg1.jpg',
+        title: '商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称',
+        tag: '新品',
+        code: '123456',
+        barCode: '1234567890123',
+        price: '88800',
+        originalPrice: '99900',
+    });
+</script>
+<template>
+    <ste-goods-info :data="data"><template v-slot:stepper>步进器</template></ste-goods-info>
+</template>
+```
+
 ### 水印
 
 - 属性`watermark`接收水印图片URL，用于展示水印
@@ -208,10 +230,10 @@
 
 #### 组件插槽(Slots)
 
-| 名称    | 说明                               | 支持版本 |
-| ------- | ---------------------------------- | -------- |
-| default | 默认插槽，在编码下方出现的其他内容 | -        |
-| stepper | 步进器插槽，替换掉自带步进器       | -        |
+| 名称    | 说明                                       | 支持版本 |
+| ------- | ------------------------------------------ | -------- |
+| default | 默认插槽，在编码下方出现的其他内容         | -        |
+| stepper | 步进器位置插槽，使用该插槽后将替换掉步进器 | -        |
 
 ---$
 {{xuyajun}}

package/components/ste-goods-info/ste-goods-info.easycom.json

@@ -189,11 +189,11 @@
         {
             "name": "[event]click",
             "description": "点击确定按钮时触发",
-            "type": "(type: 'image' | 'title' | 'code' | 'price' | 'originalPrice' | 'stepper') => void",
+            "type": "(type:'empty' | 'image' | 'title' | 'code' | 'price' | 'originalPrice' | 'stepper') => void",
             "params": [
                 {
                     "name": "type",
-                    "description": "点击位置:'image' | 'title' | 'code' | 'price' | 'originalPrice' | 'stepper'"
+                    "description": "点击位置: `empty` , `image` , `title` , `code` , `price` , `originalPrice` , `stepper`"
                 }
             ]
         },
@@ -250,7 +250,7 @@
             "params": [
                 {
                     "name": "type",
-                    "description": "点击的区域：'method' | 'back' | 'item' | 'right'"
+                    "description": "点击的区域：`method`, `back`, `item`, `right`"
                 },
                 {
                     "name": "item",

package/components/ste-goods-info/ste-goods-info.vue

@@ -16,7 +16,7 @@ const emits = defineEmits<{
     (e: 'update:number', number?: number): void;
     (e: 'update:checked', checked?: boolean): void;
     (e: 'change', change: { number?: number; checked?: boolean; applyForNumber?: number }, data: GoodsInfoType): void;
-    (e: 'click', type: 'image' | 'title' | 'code' | 'price' | 'originalPrice' | 'stepper'): void;
+    (e: 'click', type: 'empty' | 'image' | 'title' | 'code' | 'price' | 'originalPrice' | 'stepper'): void;
     (e: 'plus', value: number | string, suspend: () => void, next: () => void, stop: () => void): void;
     (e: 'minus', value: number | string, suspend: () => void, next: () => void, stop: () => void): void;
     (e: 'click-suggest', type: 'method' | 'back' | 'item' | 'right', item?: { label: string; value: string | number }): void;
@@ -83,7 +83,7 @@ const checkboxChange = () => {
     emits('change', { checked: _checked.value }, props.data);
 };
 
-const onClick = (type: 'image' | 'title' | 'code' | 'price' | 'originalPrice' | 'stepper') => {
+const onClick = (type: 'empty' | 'image' | 'title' | 'code' | 'price' | 'originalPrice' | 'stepper') => {
     emits('click', type);
 };
 
@@ -168,14 +168,14 @@ const viewClass = computed(() => {
             <view @click="clickChecked" class="ste-goods-info-checkbox left" v-if="checkbox === 'left'">
                 <setCheckbox :disabled="checkboxDisabled" iconSize="30" :model-value="_checked" />
             </view>
-            <view class="ste-goods-info-view" :class="viewClass">
-                <view class="ste-goods-info-image">
-                    <setImage :radius="imageRadius" :src="data.image" :width="imageSize" :height="imageSize" @click="onClick('image')" />
+            <view class="ste-goods-info-view" :class="viewClass" @click="onClick('empty')">
+                <view class="ste-goods-info-image" @click.stop="onClick('image')">
+                    <setImage :radius="imageRadius" :src="data.image" :width="imageSize" :height="imageSize" />
                 </view>
                 <view class="ste-goods-info-content">
                     <view class="content-header">
                         <view class="ste-goods-info-header">
-                            <view class="ste-goods-info-title" :style="[titleStyle]" @click="onClick('title')">
+                            <view class="ste-goods-info-title" :style="[titleStyle]" @click.stop="onClick('title')">
                                 <view class="ste-goods-info-tag-box" v-if="data.tag">
                                     <view class="ste-goods-info-tag" :style="{ background: _tagBg }">{{ data.tag }}</view>
                                 </view>
@@ -185,7 +185,7 @@ const viewClass = computed(() => {
                                 <setCheckbox :disabled="checkboxDisabled" iconSize="30" :model-value="_checked" />
                             </view>
                         </view>
-                        <view class="ste-goods-info-codes" @click="onClick('code')">
+                        <view class="ste-goods-info-codes" @click.stop="onClick('code')">
                             {{ data.code }}
                             <span style="color: #e6e8ea">|</span>
                             {{ data.barCode }}
@@ -196,23 +196,28 @@ const viewClass = computed(() => {
                     </view>
                     <view class="content-footer">
                         <view class="ste-goods-info-price" v-if="showPriceRow">
-                            <view class="ste-goods-info-price-left" v-if="!hidePrice">
-                                <setPrice :value="data.price" :digits="2" bold :styleType="3" :line-price-color="priceColor" :fontSize="priceSize" @click="onClick('price')" />
-                                <setPrice
-                                    v-if="data.originalPrice"
-                                    :digits="2"
-                                    :value="data.originalPrice"
-                                    isSuggestPrice
-                                    line-price-color="#666666"
-                                    marginLeft="16"
-                                    fontSize="20"
-                                    @click="onClick('originalPrice')"
-                                    :showUnit="false"
-                                />
+                            <view class="ste-goods-info-price-left">
+                                <block v-if="!hidePrice">
+                                    <view @click.stop="onClick('price')">
+                                        <setPrice :value="data.price" :digits="2" bold :styleType="3" :line-price-color="priceColor" :fontSize="priceSize" />
+                                    </view>
+                                    <view @click.stop="onClick('originalPrice')">
+                                        <setPrice
+                                            v-if="data.originalPrice"
+                                            :digits="2"
+                                            :value="data.originalPrice"
+                                            isSuggestPrice
+                                            line-price-color="#666666"
+                                            marginLeft="16"
+                                            fontSize="20"
+                                            :showUnit="false"
+                                        />
+                                    </view>
+                                </block>
                             </view>
-                            <view class="ste-goods-info-price-right" v-if="stepper" @click="onClick('stepper')">
+                            <view class="ste-goods-info-price-right" @click.stop="onClick('stepper')">
                                 <slot name="stepper">
-                                    <view :class="{ readonly: readonlyStepper }" @click.stop="true">
+                                    <view v-if="stepper" :class="{ readonly: readonlyStepper }" @click.stop="true">
                                         <steStepper
                                             v-model="_number"
                                             :precision="precision"
@@ -347,10 +352,16 @@ const viewClass = computed(() => {
 
                 .ste-goods-info-price {
                     width: 100%;
-                    height: 34rpx;
+                    line-height: 34rpx;
                     display: flex;
                     justify-content: space-between;
-                    align-items: anchor-center;
+                    align-items: center;
+                    .ste-goods-info-price-left {
+                        display: flex;
+                        flex-direction: row;
+                        align-items: flex-end;
+                    }
+
                     .ste-goods-info-price-right .readonly {
                         pointer-events: none;
                     }

package/components/ste-order-card/README.md

@@ -4,25 +4,151 @@
 
 ---$
 
-### 基础用法
+### 基础用法(一条数据)
 
 - 属性`title`用于设置组件标题
-- 属性`subhead`用于设置组件副标题
+- 属性`image`用于设置标题图片
 - 属性`data`用于设置组件数据
-- 属性`buttonText`用于设置数据项按钮文字缺省值
-- 属性`buttonIcon`用于设置数据项按钮图标缺省值
+- 属性`statusText`用于设置状态文本内容
+- 属性`tagText`用于设置标签文本内容
+- 属性`helperText`用于设置标签辅助信息文本内容
+- 属性`mainBtnText`用于设置主要按钮文本内容
+- 属性`subBtnText`用于设置次要按钮文本内容
 
 ```html
 <script setup lang="ts">
-    import type { FunctionListItem } from 'stellar-ui-plus/components/ste-function-list/props';
     import { ref } from 'vue';
 
-    const data = ref<FunctionListItem[]>([
-        { title: '早餐   梅姨家常菜', subhead: '红烧牛肉面、海盐芝士燕麦奶、黑胡椒香煎鸡蛋', statusText: '当前不可取消', image: 'https://image.whzb.com/chain/StellarUI/bg1.jpg' },
+    const data = ref([
+        {
+            image: 'https://image.whzb.com/chain/StellarUI/bg1.jpg',
+            title: '梅姨家常菜馆',
+            subTitle: '商品描述',
+        },
     ]);
 </script>
 <template>
-    <ste-function-list title="今日餐食" subhead="食刻准备 到点开吃" :data="data" buttonText="核销" buttonIcon="&#xe693;" />
+    <ste-order-card
+        title="梅姨家常菜馆"
+        image="https://image.whzb.com/chain/StellarUI/bg1.jpg"
+        :data="data"
+        statusText="待核销"
+        tagText="标签"
+        helperText="辅助信息：XXXX-XX-XX"
+        mainBtnText="主要功能"
+        subBtnText="次要功能"
+    />
+</template>
+```
+
+### 显示详情(一条数据)
+
+- 属性`show-detail`用于设置商品信息下是否显示详情字样(多条数据无效)
+
+```html
+<script setup lang="ts">
+    import { ref } from 'vue';
+
+    const data = ref([
+        {
+            image: 'https://image.whzb.com/chain/StellarUI/bg1.jpg',
+            title: '梅姨家常菜馆',
+            subTitle: '商品描述',
+        },
+    ]);
+</script>
+<template>
+    <ste-order-card
+        title="梅姨家常菜馆"
+        image="https://image.whzb.com/chain/StellarUI/bg1.jpg"
+        :data="data"
+        statusText="待核销"
+        tagText="标签"
+        helperText="辅助信息：XXXX-XX-XX"
+        mainBtnText="主要功能"
+        subBtnText="次要功能"
+        show-detail
+    />
+</template>
+```
+
+### 基础用法(多条数据)
+
+```html
+<script setup lang="ts">
+    import { ref } from 'vue';
+
+    const data = ref([
+        {
+            image: 'https://image.whzb.com/chain/StellarUI/bg1.jpg',
+            title: '梅姨家常菜馆',
+            subTitle: '商品描述',
+        },
+        {
+            image: 'https://image.whzb.com/chain/StellarUI/bg1.jpg',
+            title: '梅姨家常菜馆',
+            subTitle: '商品描述',
+        },
+        {
+            image: 'https://image.whzb.com/chain/StellarUI/bg1.jpg',
+            title: '梅姨家常菜馆',
+            subTitle: '商品描述',
+        },
+    ]);
+</script>
+<template>
+    <ste-order-card
+        title="梅姨家常菜馆"
+        image="https://image.whzb.com/chain/StellarUI/bg1.jpg"
+        :data="data"
+        statusText="待核销"
+        tagText="标签"
+        helperText="辅助信息：XXXX-XX-XX"
+        mainBtnText="主要功能"
+        subBtnText="次要功能"
+        show-detail
+    />
+</template>
+```
+
+### 显示更多
+
+- 属性`show-more`设置下方按钮左侧是否显示更多字样
+
+```html
+<script setup lang="ts">
+    import { ref } from 'vue';
+
+    const data = ref([
+        {
+            image: 'https://image.whzb.com/chain/StellarUI/bg1.jpg',
+            title: '梅姨家常菜馆',
+            subTitle: '商品描述',
+        },
+        {
+            image: 'https://image.whzb.com/chain/StellarUI/bg1.jpg',
+            title: '梅姨家常菜馆',
+            subTitle: '商品描述',
+        },
+        {
+            image: 'https://image.whzb.com/chain/StellarUI/bg1.jpg',
+            title: '梅姨家常菜馆',
+            subTitle: '商品描述',
+        },
+    ]);
+</script>
+<template>
+    <ste-order-card
+        title="梅姨家常菜馆"
+        image="https://image.whzb.com/chain/StellarUI/bg1.jpg"
+        :data="data"
+        statusText="待核销"
+        tagText="标签"
+        helperText="辅助信息：XXXX-XX-XX"
+        mainBtnText="主要功能"
+        subBtnText="次要功能"
+        show-more
+    />
 </template>
 ```