stellar-ui-plus 1.20.17 → 1.20.19
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/ste-function-list/README.md +61 -13
- package/components/ste-function-list/props.ts +8 -0
- package/components/ste-function-list/ste-function-list.easycom.json +88 -10
- package/components/ste-function-list/ste-function-list.vue +61 -14
- package/components/ste-goods-info/ste-goods-info.vue +86 -68
- package/components/ste-order-card/README.md +77 -0
- package/components/ste-order-card/config.json +5 -0
- package/components/ste-order-card/props.ts +10 -0
- package/components/ste-order-card/ste-order-card.easycom.json +25 -0
- package/components/ste-order-card/ste-order-card.vue +199 -0
- package/package.json +1 -1
- package/components/ste-function-list/useData.ts +0 -5
|
@@ -4,25 +4,66 @@
|
|
|
4
4
|
|
|
5
5
|
---$
|
|
6
6
|
|
|
7
|
-
### 基础用法
|
|
7
|
+
### 基础用法(一条数据)
|
|
8
8
|
|
|
9
|
-
- 属性`
|
|
10
|
-
- 属性`
|
|
11
|
-
- 属性`
|
|
12
|
-
-
|
|
9
|
+
- 属性`title`用于设置组件标题
|
|
10
|
+
- 属性`subhead`用于设置组件副标题
|
|
11
|
+
- 属性`data`用于设置组件数据
|
|
12
|
+
- 属性`buttonText`用于设置数据项按钮文字缺省值
|
|
13
|
+
- 属性`buttonIcon`用于设置数据项按钮图标缺省值
|
|
13
14
|
|
|
14
15
|
```html
|
|
15
16
|
<script setup lang="ts">
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
17
|
+
import type { FunctionListItem } from 'stellar-ui-plus/components/ste-function-list/props';
|
|
18
|
+
import { ref } from 'vue';
|
|
19
|
+
|
|
20
|
+
const data = ref<FunctionListItem[]>([
|
|
21
|
+
{ title: '早餐 梅姨家常菜', subhead: '红烧牛肉面、海盐芝士燕麦奶、黑胡椒香煎鸡蛋', statusText: '当前不可取消', image: 'https://image.whzb.com/chain/StellarUI/bg1.jpg' },
|
|
22
|
+
]);
|
|
23
|
+
</script>
|
|
24
|
+
<template>
|
|
25
|
+
<ste-function-list title="今日餐食" subhead="食刻准备 到点开吃" :data="data" buttonText="核销" buttonIcon="" />
|
|
26
|
+
</template>
|
|
27
|
+
```
|
|
28
|
+
|
|
29
|
+
### 基础用法(空数据)
|
|
30
|
+
|
|
31
|
+
- 属性`empty-button-text`用于设置空数据按钮的文字
|
|
32
|
+
- 属性`empty-image`用于设置空数据展示图片
|
|
33
|
+
- 属性`empty-text`用于设置空数据展示文字
|
|
34
|
+
|
|
35
|
+
```html
|
|
36
|
+
<template>
|
|
37
|
+
<ste-function-list title="今日餐食" subhead="食刻准备 到点开吃" empty-button-text="去订餐" empty-image="https://image.whzb.com/chain/StellarUI/bg1.jpg" empty-text="暂未订餐，先去看看吧~" />
|
|
38
|
+
</template>
|
|
39
|
+
```
|
|
40
|
+
|
|
41
|
+
### 数据按钮自定义
|
|
42
|
+
|
|
43
|
+
- 属性`empty-button-text`用于设置空数据按钮的文字
|
|
44
|
+
- 属性`empty-image`用于设置空数据展示图片
|
|
45
|
+
- 属性`empty-text`用于设置空数据展示文字
|
|
46
|
+
|
|
47
|
+
```html
|
|
48
|
+
<script setup lang="ts">
|
|
49
|
+
import type { FunctionListItem } from 'stellar-ui-plus/components/ste-function-list/props';
|
|
50
|
+
import { ref } from 'vue';
|
|
51
|
+
|
|
52
|
+
const data = ref<FunctionListItem[]>([
|
|
53
|
+
{
|
|
54
|
+
title: '早餐 梅姨家常菜',
|
|
55
|
+
subhead: '红烧牛肉面、海盐芝士燕麦奶、黑胡椒香煎鸡蛋',
|
|
56
|
+
statusText: '当前不可取消',
|
|
57
|
+
image: 'https://image.whzb.com/chain/StellarUI/bg1.jpg',
|
|
58
|
+
buttonText: '自定义',
|
|
59
|
+
},
|
|
60
|
+
{ title: '早餐 梅姨家常菜', subhead: '红烧牛肉面、海盐芝士燕麦奶、黑胡椒香煎鸡蛋', statusText: '当前不可取消', image: 'https://image.whzb.com/chain/StellarUI/bg1.jpg' },
|
|
61
|
+
{ title: '早餐 梅姨家常菜', subhead: '红烧牛肉面、海盐芝士燕麦奶、黑胡椒香煎鸡蛋', statusText: '当前不可取消', image: 'https://image.whzb.com/chain/StellarUI/bg1.jpg' },
|
|
62
|
+
{ title: '早餐 梅姨家常菜', subhead: '红烧牛肉面、海盐芝士燕麦奶、黑胡椒香煎鸡蛋', statusText: '当前不可取消', image: 'https://image.whzb.com/chain/StellarUI/bg1.jpg' },
|
|
63
|
+
]);
|
|
23
64
|
</script>
|
|
24
65
|
<template>
|
|
25
|
-
<ste-
|
|
66
|
+
<ste-function-list title="今日餐食" subhead="食刻准备 到点开吃" :data="data" buttonText="核销" buttonIcon="" />
|
|
26
67
|
</template>
|
|
27
68
|
```
|
|
28
69
|
|
|
@@ -32,5 +73,12 @@
|
|
|
32
73
|
|
|
33
74
|
<!-- props -->
|
|
34
75
|
|
|
76
|
+
#### 组件插槽(Slots)
|
|
77
|
+
|
|
78
|
+
| 名称 | 说明 | 支持版本 |
|
|
79
|
+
| ------------ | ------------------------------------------------------- | -------- |
|
|
80
|
+
| subhead | 组件头部副标题插槽（若副标题有表情/图片等，请使用插槽） | - |
|
|
81
|
+
| header-right | 组件头部右侧插槽（替换右侧`更多`） | - |
|
|
82
|
+
|
|
35
83
|
---$
|
|
36
84
|
{{xuyajun}}
|
|
@@ -7,6 +7,8 @@ export type FunctionListItem = {
|
|
|
7
7
|
image?: string;
|
|
8
8
|
buttonText?: string;
|
|
9
9
|
buttonIcon?: string;
|
|
10
|
+
buttonBg?: string;
|
|
11
|
+
buttonColor?: string;
|
|
10
12
|
};
|
|
11
13
|
|
|
12
14
|
export type Props = {
|
|
@@ -15,6 +17,8 @@ export type Props = {
|
|
|
15
17
|
title: string;
|
|
16
18
|
subhead: string;
|
|
17
19
|
data: (FunctionListItem & { [key: string]: any })[];
|
|
20
|
+
buttonBg: string;
|
|
21
|
+
buttonColor: string;
|
|
18
22
|
emptyImage: string;
|
|
19
23
|
emptyText: string;
|
|
20
24
|
emptyButtonText: string;
|
|
@@ -31,6 +35,10 @@ export default {
|
|
|
31
35
|
subhead: { type: String, default: () => '' },
|
|
32
36
|
/** 列表数据 */
|
|
33
37
|
data: { type: Array as PropType<(FunctionListItem & { [key: string]: any })[]>, default: () => [] },
|
|
38
|
+
/** 按钮背景颜色 */
|
|
39
|
+
buttonBg: { type: String, default: () => '#EC3E1A' },
|
|
40
|
+
/** 按钮字体颜色 */
|
|
41
|
+
buttonColor: { type: String, default: () => '#fff' },
|
|
34
42
|
/** 列表操作按钮文字 */
|
|
35
43
|
buttonText: { type: String, default: () => '' },
|
|
36
44
|
/** 列表操作按钮图标 */
|
|
@@ -4,24 +4,102 @@
|
|
|
4
4
|
"example": "<ste-function-list></ste-function-list>",
|
|
5
5
|
"tutorial": "https://stellar-ui.intecloud.com.cn/plus/#/?active=function-list",
|
|
6
6
|
"attributes": [
|
|
7
|
+
{
|
|
8
|
+
"name": "background",
|
|
9
|
+
"description": "组件背景色",
|
|
10
|
+
"type": "string",
|
|
11
|
+
"default": "#fff"
|
|
12
|
+
},
|
|
13
|
+
{
|
|
14
|
+
"name": "contentBg",
|
|
15
|
+
"description": "内容区域背景",
|
|
16
|
+
"type": "string",
|
|
17
|
+
"default": "#f9f9f9"
|
|
18
|
+
},
|
|
7
19
|
{
|
|
8
20
|
"name": "title",
|
|
9
|
-
"description": "
|
|
21
|
+
"description": "组件标题",
|
|
22
|
+
"type": "string"
|
|
23
|
+
},
|
|
24
|
+
{
|
|
25
|
+
"name": "subhead",
|
|
26
|
+
"description": "组件副标题",
|
|
27
|
+
"type": "string"
|
|
28
|
+
},
|
|
29
|
+
{
|
|
30
|
+
"name": "data",
|
|
31
|
+
"description": "数据列表",
|
|
32
|
+
"type": "{title: string; subhead?: string; statusText?: string; image?: string; buttonText?: string; buttonIcon?: string; buttonBg?: string; buttonColor?: string;}[]",
|
|
33
|
+
"default": "[]"
|
|
34
|
+
},
|
|
35
|
+
{
|
|
36
|
+
"name": "buttonBg",
|
|
37
|
+
"description": "列表操作按钮背景(如果数据项不提供则使用该属性)",
|
|
38
|
+
"type": "string",
|
|
39
|
+
"default": "#EC3E1A"
|
|
40
|
+
},
|
|
41
|
+
{
|
|
42
|
+
"name": "buttonColor",
|
|
43
|
+
"description": "列表操作按钮文本颜色(如果数据项不提供则使用该属性)",
|
|
10
44
|
"type": "string",
|
|
11
|
-
"default": "
|
|
45
|
+
"default": "#fff"
|
|
12
46
|
},
|
|
13
47
|
{
|
|
14
|
-
"name": "
|
|
15
|
-
"description": "
|
|
16
|
-
"type": "
|
|
48
|
+
"name": "buttonText",
|
|
49
|
+
"description": "列表操作按钮文字(如果数据项不提供则使用该属性)",
|
|
50
|
+
"type": "string"
|
|
51
|
+
},
|
|
52
|
+
{
|
|
53
|
+
"name": "buttonIcon",
|
|
54
|
+
"description": "列表操作按钮图标(如果数据项不提供则使用该属性)",
|
|
55
|
+
"type": "string",
|
|
56
|
+
"default": "#fff"
|
|
57
|
+
},
|
|
58
|
+
{
|
|
59
|
+
"name": "emptyImage",
|
|
60
|
+
"description": "列表为空时显示的图片",
|
|
61
|
+
"type": "string"
|
|
62
|
+
},
|
|
63
|
+
{
|
|
64
|
+
"name": "emptyText",
|
|
65
|
+
"description": "列表为空时显示的文字",
|
|
66
|
+
"type": "string"
|
|
67
|
+
},
|
|
68
|
+
{
|
|
69
|
+
"name": "emptyButtonText",
|
|
70
|
+
"description": "列表为空时显示的按钮文字",
|
|
71
|
+
"type": "string"
|
|
72
|
+
},
|
|
73
|
+
{
|
|
74
|
+
"name": "[event]click-header",
|
|
75
|
+
"description": "点击列表头部触发",
|
|
76
|
+
"type": "(type: 'title' | 'subhead' | 'more') => void",
|
|
77
|
+
"params": [
|
|
78
|
+
{
|
|
79
|
+
"name": "type",
|
|
80
|
+
"description": "点击的区域类型（可选值：`title`, `subhead`,`more`）"
|
|
81
|
+
}
|
|
82
|
+
]
|
|
83
|
+
},
|
|
84
|
+
{
|
|
85
|
+
"name": "[event]click-item",
|
|
86
|
+
"description": "点击列表项触发",
|
|
87
|
+
"type": "(type: 'image' | 'title' | 'subhead' | 'status' | 'button') => void",
|
|
17
88
|
"params": [
|
|
18
89
|
{
|
|
19
|
-
"name": "
|
|
20
|
-
"description": "
|
|
21
|
-
}
|
|
90
|
+
"name": "type",
|
|
91
|
+
"description": "点击的区域类型（可选值：`image` , `title` , `subhead` , `status` , `button`）"
|
|
92
|
+
}
|
|
93
|
+
]
|
|
94
|
+
},
|
|
95
|
+
{
|
|
96
|
+
"name": "[event]click-empty",
|
|
97
|
+
"description": "数据为空时点击内容触发",
|
|
98
|
+
"type": "(type: 'image' | 'text' | 'button') => void",
|
|
99
|
+
"params": [
|
|
22
100
|
{
|
|
23
|
-
"name": "
|
|
24
|
-
"description": "
|
|
101
|
+
"name": "type",
|
|
102
|
+
"description": "点击的区域类型（可选值：`image` , `text` , `button`）"
|
|
25
103
|
}
|
|
26
104
|
]
|
|
27
105
|
}
|
|
@@ -1,9 +1,6 @@
|
|
|
1
1
|
<script setup lang="ts">
|
|
2
|
-
import {
|
|
3
|
-
import propData from './props';
|
|
4
|
-
import { useColorStore } from '../../store/color';
|
|
5
|
-
|
|
6
|
-
let { getColor } = useColorStore();
|
|
2
|
+
import { computed } from 'vue';
|
|
3
|
+
import propData, { type FunctionListItem } from './props';
|
|
7
4
|
|
|
8
5
|
const props = defineProps(propData);
|
|
9
6
|
|
|
@@ -13,13 +10,25 @@ const rootStyle = computed(() => {
|
|
|
13
10
|
'--ste-function-list-content-bg': props.contentBg,
|
|
14
11
|
};
|
|
15
12
|
});
|
|
13
|
+
|
|
14
|
+
const emits = defineEmits<{
|
|
15
|
+
(e: 'click-header', type: 'title' | 'subhead' | 'more'): void;
|
|
16
|
+
(e: 'click-item', type: 'image' | 'title' | 'subhead' | 'status' | 'button', item: FunctionListItem): void;
|
|
17
|
+
(e: 'click-empty', type: 'image' | 'text' | 'button'): void;
|
|
18
|
+
}>();
|
|
19
|
+
|
|
20
|
+
const onClickHeader = (type: 'title' | 'subhead' | 'more') => emits('click-header', type);
|
|
21
|
+
|
|
22
|
+
const onClickItem = (type: 'image' | 'title' | 'subhead' | 'status' | 'button', item: FunctionListItem) => emits('click-item', type, item);
|
|
23
|
+
|
|
24
|
+
const onClickEmpty = (type: 'image' | 'text' | 'button') => emits('click-empty', type);
|
|
16
25
|
</script>
|
|
17
26
|
<template>
|
|
18
27
|
<view class="ste-function-list-root" :style="[rootStyle]">
|
|
19
28
|
<view class="ste-function-list-header">
|
|
20
29
|
<view class="ste-function-list-header-l">
|
|
21
|
-
<view class="ste-function-list-title">{{ title }}</view>
|
|
22
|
-
<view class="ste-function-list-subhead">
|
|
30
|
+
<view class="ste-function-list-title" @click="onClickHeader('title')">{{ title }}</view>
|
|
31
|
+
<view class="ste-function-list-subhead" @click="onClickHeader('subhead')">
|
|
23
32
|
<slot name="subhead">
|
|
24
33
|
{{ subhead }}
|
|
25
34
|
</slot>
|
|
@@ -27,7 +36,7 @@ const rootStyle = computed(() => {
|
|
|
27
36
|
</view>
|
|
28
37
|
<view class="ste-function-list-header-r">
|
|
29
38
|
<slot name="header-right">
|
|
30
|
-
<view class="ste-function-list-more">
|
|
39
|
+
<view class="ste-function-list-more" @click="onClickHeader('more')">
|
|
31
40
|
更多
|
|
32
41
|
<ste-icon code="" color="#353535"></ste-icon>
|
|
33
42
|
</view>
|
|
@@ -37,17 +46,24 @@ const rootStyle = computed(() => {
|
|
|
37
46
|
<view class="ste-function-list-content" v-if="data?.length">
|
|
38
47
|
<scroll-view scroll-x class="content-list" :class="{ multiple: data?.length > 1 }">
|
|
39
48
|
<view class="content-list-item" v-for="(item, index) in data" :key="index">
|
|
40
|
-
<view class="content-list-item-image">
|
|
49
|
+
<view class="content-list-item-image" @click="onClickItem('image', item)">
|
|
41
50
|
<ste-image :src="item.image" mode="aspectFill"></ste-image>
|
|
42
51
|
</view>
|
|
43
52
|
<view class="content-list-item-info">
|
|
44
|
-
<view class="content-list-item-info-title">{{ item.title }}</view>
|
|
45
|
-
<view class="content-list-item-info-subhead" v-if="item.subhead">{{ item.subhead }}</view>
|
|
53
|
+
<view class="content-list-item-info-title" @click="onClickItem('title', item)">{{ item.title }}</view>
|
|
54
|
+
<view class="content-list-item-info-subhead" v-if="item.subhead" @click="onClickItem('subhead', item)">{{ item.subhead }}</view>
|
|
46
55
|
<view class="content-list-item-info-footer">
|
|
47
|
-
<view class="content-list-item-info-status">{{ item.statusText }}</view>
|
|
56
|
+
<view class="content-list-item-info-status" @click="onClickItem('status', item)">{{ item.statusText }}</view>
|
|
48
57
|
<view class="content-list-item-info-button" v-if="item.buttonText || buttonText || item.buttonIcon || buttonIcon">
|
|
49
|
-
<ste-button
|
|
50
|
-
|
|
58
|
+
<ste-button
|
|
59
|
+
:mode="100"
|
|
60
|
+
:rootStyle="{ height: '56rpx' }"
|
|
61
|
+
type="primary"
|
|
62
|
+
@click="onClickItem('button', item)"
|
|
63
|
+
:background="item.buttonBg || buttonBg"
|
|
64
|
+
:color="item.buttonColor || buttonColor"
|
|
65
|
+
>
|
|
66
|
+
<ste-icon :code="item.buttonIcon || buttonIcon" :color="item.buttonColor || buttonColor" />
|
|
51
67
|
{{ item.buttonText || buttonText }}
|
|
52
68
|
</ste-button>
|
|
53
69
|
</view>
|
|
@@ -56,6 +72,13 @@ const rootStyle = computed(() => {
|
|
|
56
72
|
</view>
|
|
57
73
|
</scroll-view>
|
|
58
74
|
</view>
|
|
75
|
+
<view class="ste-function-list-empty" v-else>
|
|
76
|
+
<ste-image :src="emptyImage" width="96" height="96" @clicl="onClickEmpty('image')" />
|
|
77
|
+
<view class="empty-message" @click="onClickEmpty('text')">{{ emptyText }}</view>
|
|
78
|
+
<ste-button :mode="100" :rootStyle="{ height: '56rpx' }" type="primary" :background="buttonBg" :color="buttonColor" @click="onClickEmpty('button')">
|
|
79
|
+
{{ emptyButtonText }}
|
|
80
|
+
</ste-button>
|
|
81
|
+
</view>
|
|
59
82
|
</view>
|
|
60
83
|
</template>
|
|
61
84
|
|
|
@@ -137,6 +160,10 @@ const rootStyle = computed(() => {
|
|
|
137
160
|
align-items: center;
|
|
138
161
|
justify-content: space-between;
|
|
139
162
|
margin-top: 10rpx;
|
|
163
|
+
.content-list-item-info-status {
|
|
164
|
+
flex: 1;
|
|
165
|
+
padding-right: 20rpx;
|
|
166
|
+
}
|
|
140
167
|
}
|
|
141
168
|
}
|
|
142
169
|
}
|
|
@@ -148,5 +175,25 @@ const rootStyle = computed(() => {
|
|
|
148
175
|
}
|
|
149
176
|
}
|
|
150
177
|
}
|
|
178
|
+
.ste-function-list-empty {
|
|
179
|
+
width: 100%;
|
|
180
|
+
height: 120rpx;
|
|
181
|
+
display: flex;
|
|
182
|
+
align-items: center;
|
|
183
|
+
justify-content: space-between;
|
|
184
|
+
border-radius: 12rpx;
|
|
185
|
+
background-color: var(--ste-function-list-content-bg);
|
|
186
|
+
padding: 0 20rpx;
|
|
187
|
+
margin-top: 24rpx;
|
|
188
|
+
.empty-message {
|
|
189
|
+
flex: 1;
|
|
190
|
+
padding: 0 20rpx;
|
|
191
|
+
white-space: nowrap;
|
|
192
|
+
overflow: hidden;
|
|
193
|
+
text-overflow: ellipsis;
|
|
194
|
+
font-size: 28rpx;
|
|
195
|
+
color: #000000;
|
|
196
|
+
}
|
|
197
|
+
}
|
|
151
198
|
}
|
|
152
199
|
</style>
|
|
@@ -153,6 +153,14 @@ const clickSuggest = (type: 'method' | 'back' | 'item' | 'right', item?: { label
|
|
|
153
153
|
};
|
|
154
154
|
|
|
155
155
|
const clickInput = () => emits('click-stepper-input');
|
|
156
|
+
|
|
157
|
+
const viewClass = computed(() => {
|
|
158
|
+
const imgSize = utils.formatPx<'num'>(props.imageSize, 'num');
|
|
159
|
+
return {
|
|
160
|
+
'big-image': imgSize > 60,
|
|
161
|
+
'--image-size': `${imgSize}px`,
|
|
162
|
+
};
|
|
163
|
+
});
|
|
156
164
|
</script>
|
|
157
165
|
<template>
|
|
158
166
|
<view class="ste-goods-info-root" :style="[rootStyle]">
|
|
@@ -160,79 +168,83 @@ const clickInput = () => emits('click-stepper-input');
|
|
|
160
168
|
<view @click="clickChecked" class="ste-goods-info-checkbox left" v-if="checkbox === 'left'">
|
|
161
169
|
<setCheckbox :disabled="checkboxDisabled" iconSize="30" :model-value="_checked" />
|
|
162
170
|
</view>
|
|
163
|
-
<view class="ste-goods-info-view">
|
|
171
|
+
<view class="ste-goods-info-view" :class="viewClass">
|
|
164
172
|
<view class="ste-goods-info-image">
|
|
165
173
|
<setImage :radius="imageRadius" :src="data.image" :width="imageSize" :height="imageSize" @click="onClick('image')" />
|
|
166
174
|
</view>
|
|
167
175
|
<view class="ste-goods-info-content">
|
|
168
|
-
<view class="
|
|
169
|
-
<view class="ste-goods-info-
|
|
170
|
-
<view class="ste-goods-info-
|
|
171
|
-
<view class="ste-goods-info-tag"
|
|
176
|
+
<view class="content-header">
|
|
177
|
+
<view class="ste-goods-info-header">
|
|
178
|
+
<view class="ste-goods-info-title" :style="[titleStyle]" @click="onClick('title')">
|
|
179
|
+
<view class="ste-goods-info-tag-box" v-if="data.tag">
|
|
180
|
+
<view class="ste-goods-info-tag" :style="{ background: _tagBg }">{{ data.tag }}</view>
|
|
181
|
+
</view>
|
|
182
|
+
{{ data.title }}
|
|
183
|
+
</view>
|
|
184
|
+
<view @click="clickChecked" class="ste-goods-info-checkbox right" v-if="checkbox === 'right'">
|
|
185
|
+
<setCheckbox :disabled="checkboxDisabled" iconSize="30" :model-value="_checked" />
|
|
172
186
|
</view>
|
|
173
|
-
{{ data.title }}
|
|
174
187
|
</view>
|
|
175
|
-
<view
|
|
176
|
-
|
|
188
|
+
<view class="ste-goods-info-codes" @click="onClick('code')">
|
|
189
|
+
{{ data.code }}
|
|
190
|
+
<span style="color: #e6e8ea">|</span>
|
|
191
|
+
{{ data.barCode }}
|
|
177
192
|
</view>
|
|
193
|
+
<slot>
|
|
194
|
+
<view class="ste-goods-info-slot"></view>
|
|
195
|
+
</slot>
|
|
178
196
|
</view>
|
|
179
|
-
<view class="
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
:value="data.originalPrice"
|
|
194
|
-
isSuggestPrice
|
|
195
|
-
line-price-color="#666666"
|
|
196
|
-
marginLeft="16"
|
|
197
|
-
fontSize="20"
|
|
198
|
-
@click="onClick('originalPrice')"
|
|
199
|
-
:showUnit="false"
|
|
200
|
-
/>
|
|
201
|
-
</view>
|
|
202
|
-
<view class="ste-goods-info-price-right" v-if="stepper" @click="onClick('stepper')">
|
|
203
|
-
<view :class="{ readonly: readonlyStepper }" @click.stop="true">
|
|
204
|
-
<steStepper
|
|
205
|
-
v-model="_number"
|
|
206
|
-
:precision="precision"
|
|
207
|
-
:step="step"
|
|
208
|
-
theme="line"
|
|
209
|
-
:min="min"
|
|
210
|
-
:max="max"
|
|
211
|
-
btnSize="40"
|
|
212
|
-
:disabled="disabledStepper"
|
|
213
|
-
:disableInput="disableInput"
|
|
214
|
-
:disablePlus="disablePlus"
|
|
215
|
-
:disableMinus="disableMinus"
|
|
216
|
-
:readonlyInput="readonlyStepperInput"
|
|
217
|
-
@change="numberChange"
|
|
218
|
-
@plus="plus"
|
|
219
|
-
@minus="minus"
|
|
220
|
-
@click-input="clickInput"
|
|
197
|
+
<view class="content-footer">
|
|
198
|
+
<view class="ste-goods-info-price" v-if="showPriceRow">
|
|
199
|
+
<view class="ste-goods-info-price-left" v-if="!hidePrice">
|
|
200
|
+
<setPrice :value="data.price" :digits="2" bold :styleType="3" :line-price-color="priceColor" :fontSize="priceSize" @click="onClick('price')" />
|
|
201
|
+
<setPrice
|
|
202
|
+
v-if="data.originalPrice"
|
|
203
|
+
:digits="2"
|
|
204
|
+
:value="data.originalPrice"
|
|
205
|
+
isSuggestPrice
|
|
206
|
+
line-price-color="#666666"
|
|
207
|
+
marginLeft="16"
|
|
208
|
+
fontSize="20"
|
|
209
|
+
@click="onClick('originalPrice')"
|
|
210
|
+
:showUnit="false"
|
|
221
211
|
/>
|
|
222
212
|
</view>
|
|
213
|
+
<view class="ste-goods-info-price-right" v-if="stepper" @click="onClick('stepper')">
|
|
214
|
+
<view :class="{ readonly: readonlyStepper }" @click.stop="true">
|
|
215
|
+
<steStepper
|
|
216
|
+
v-model="_number"
|
|
217
|
+
:precision="precision"
|
|
218
|
+
:step="step"
|
|
219
|
+
theme="line"
|
|
220
|
+
:min="min"
|
|
221
|
+
:max="max"
|
|
222
|
+
btnSize="40"
|
|
223
|
+
:disabled="disabledStepper"
|
|
224
|
+
:disableInput="disableInput"
|
|
225
|
+
:disablePlus="disablePlus"
|
|
226
|
+
:disableMinus="disableMinus"
|
|
227
|
+
:readonlyInput="readonlyStepperInput"
|
|
228
|
+
@change="numberChange"
|
|
229
|
+
@plus="plus"
|
|
230
|
+
@minus="minus"
|
|
231
|
+
@click-input="clickInput"
|
|
232
|
+
/>
|
|
233
|
+
</view>
|
|
234
|
+
</view>
|
|
223
235
|
</view>
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
+
<view class="ste-goods-info-suggest" v-if="showSuggest">
|
|
237
|
+
<view class="ste-goods-info-suggest-method">
|
|
238
|
+
<view class="ste-goods-info-suggest-method-title" @click="clickSuggest('method')">{{ suggesData.title }}</view>
|
|
239
|
+
<view class="ste-goods-info-suggest-method-number">{{ suggesData.number }}</view>
|
|
240
|
+
</view>
|
|
241
|
+
<view class="ste-goods-info-apply-for" v-if="suggesData.applyForText">
|
|
242
|
+
<view class="ste-goods-info-apply-for-text">{{ suggesData.applyForText }}：</view>
|
|
243
|
+
<view class="ste-goods-info-apply-for-number">
|
|
244
|
+
<input class="ste-goods-info-apply-for-input" v-model="suggesData.applyForNumber" />
|
|
245
|
+
<view class="ste-goods-info-apply-for-back" @click="clickSuggest('back')">
|
|
246
|
+
<ste-icon />
|
|
247
|
+
</view>
|
|
236
248
|
</view>
|
|
237
249
|
</view>
|
|
238
250
|
</view>
|
|
@@ -278,12 +290,20 @@ const clickInput = () => emits('click-stepper-input');
|
|
|
278
290
|
display: flex;
|
|
279
291
|
flex-direction: row;
|
|
280
292
|
justify-content: space-between;
|
|
293
|
+
&.big-image {
|
|
294
|
+
.ste-goods-info-content {
|
|
295
|
+
width: calc(100% - var(--image-size) - 16rpx);
|
|
296
|
+
}
|
|
297
|
+
}
|
|
281
298
|
.ste-goods-info-image {
|
|
282
299
|
width: var(--image-size);
|
|
283
300
|
height: var(--image-size);
|
|
284
301
|
}
|
|
285
302
|
.ste-goods-info-content {
|
|
286
303
|
width: calc(100% - var(--image-size) - 8rpx);
|
|
304
|
+
display: flex;
|
|
305
|
+
flex-direction: column;
|
|
306
|
+
justify-content: space-between;
|
|
287
307
|
.ste-goods-info-header {
|
|
288
308
|
width: 100%;
|
|
289
309
|
display: flex;
|
|
@@ -323,23 +343,21 @@ const clickInput = () => emits('click-stepper-input');
|
|
|
323
343
|
margin-top: 8rpx;
|
|
324
344
|
}
|
|
325
345
|
|
|
326
|
-
.ste-goods-info-slot + .ste-goods-info-price {
|
|
327
|
-
margin-top: 16rpx;
|
|
328
|
-
}
|
|
329
|
-
|
|
330
346
|
.ste-goods-info-price {
|
|
331
|
-
margin-top: 24rpx;
|
|
332
347
|
width: 100%;
|
|
333
348
|
height: 34rpx;
|
|
334
349
|
display: flex;
|
|
335
350
|
justify-content: space-between;
|
|
351
|
+
align-items: anchor-center;
|
|
336
352
|
.ste-goods-info-price-right .readonly {
|
|
337
353
|
pointer-events: none;
|
|
338
354
|
}
|
|
355
|
+
& + .ste-goods-info-suggest {
|
|
356
|
+
margin-top: 16rpx;
|
|
357
|
+
}
|
|
339
358
|
}
|
|
340
359
|
|
|
341
360
|
.ste-goods-info-suggest {
|
|
342
|
-
margin-top: 16rpx;
|
|
343
361
|
line-height: 34rpx;
|
|
344
362
|
display: flex;
|
|
345
363
|
align-items: center;
|
|
@@ -0,0 +1,77 @@
|
|
|
1
|
+
# Calendar 日历
|
|
2
|
+
|
|
3
|
+
此组件用于单个选择日期，范围选择日期等
|
|
4
|
+
|
|
5
|
+
---$
|
|
6
|
+
|
|
7
|
+
### 基础用法(一条数据)
|
|
8
|
+
|
|
9
|
+
- 属性`title`用于设置组件标题
|
|
10
|
+
- 属性`subhead`用于设置组件副标题
|
|
11
|
+
- 属性`data`用于设置组件数据
|
|
12
|
+
- 属性`buttonText`用于设置数据项按钮文字缺省值
|
|
13
|
+
- 属性`buttonIcon`用于设置数据项按钮图标缺省值
|
|
14
|
+
|
|
15
|
+
```html
|
|
16
|
+
<script setup lang="ts">
|
|
17
|
+
import type { FunctionListItem } from 'stellar-ui-plus/components/ste-function-list/props';
|
|
18
|
+
import { ref } from 'vue';
|
|
19
|
+
|
|
20
|
+
const data = ref<FunctionListItem[]>([
|
|
21
|
+
{ title: '早餐 梅姨家常菜', subhead: '红烧牛肉面、海盐芝士燕麦奶、黑胡椒香煎鸡蛋', statusText: '当前不可取消', image: 'https://image.whzb.com/chain/StellarUI/bg1.jpg' },
|
|
22
|
+
]);
|
|
23
|
+
</script>
|
|
24
|
+
<template>
|
|
25
|
+
<ste-function-list title="今日餐食" subhead="食刻准备 到点开吃" :data="data" buttonText="核销" buttonIcon="" />
|
|
26
|
+
</template>
|
|
27
|
+
```
|
|
28
|
+
|
|
29
|
+
### 基础用法(空数据)
|
|
30
|
+
|
|
31
|
+
- 属性`empty-button-text`用于设置空数据按钮的文字
|
|
32
|
+
- 属性`empty-image`用于设置空数据展示图片
|
|
33
|
+
- 属性`empty-text`用于设置空数据展示文字
|
|
34
|
+
|
|
35
|
+
```html
|
|
36
|
+
<template>
|
|
37
|
+
<ste-function-list title="今日餐食" subhead="食刻准备 到点开吃" empty-button-text="去订餐" empty-image="https://image.whzb.com/chain/StellarUI/bg1.jpg" empty-text="暂未订餐，先去看看吧~" />
|
|
38
|
+
</template>
|
|
39
|
+
```
|
|
40
|
+
|
|
41
|
+
### 数据按钮自定义
|
|
42
|
+
|
|
43
|
+
- 属性`empty-button-text`用于设置空数据按钮的文字
|
|
44
|
+
- 属性`empty-image`用于设置空数据展示图片
|
|
45
|
+
- 属性`empty-text`用于设置空数据展示文字
|
|
46
|
+
|
|
47
|
+
```html
|
|
48
|
+
<script setup lang="ts">
|
|
49
|
+
import type { FunctionListItem } from 'stellar-ui-plus/components/ste-function-list/props';
|
|
50
|
+
import { ref } from 'vue';
|
|
51
|
+
|
|
52
|
+
const data = ref<FunctionListItem[]>([
|
|
53
|
+
{
|
|
54
|
+
title: '早餐 梅姨家常菜',
|
|
55
|
+
subhead: '红烧牛肉面、海盐芝士燕麦奶、黑胡椒香煎鸡蛋',
|
|
56
|
+
statusText: '当前不可取消',
|
|
57
|
+
image: 'https://image.whzb.com/chain/StellarUI/bg1.jpg',
|
|
58
|
+
buttonText: '自定义',
|
|
59
|
+
},
|
|
60
|
+
{ title: '早餐 梅姨家常菜', subhead: '红烧牛肉面、海盐芝士燕麦奶、黑胡椒香煎鸡蛋', statusText: '当前不可取消', image: 'https://image.whzb.com/chain/StellarUI/bg1.jpg' },
|
|
61
|
+
{ title: '早餐 梅姨家常菜', subhead: '红烧牛肉面、海盐芝士燕麦奶、黑胡椒香煎鸡蛋', statusText: '当前不可取消', image: 'https://image.whzb.com/chain/StellarUI/bg1.jpg' },
|
|
62
|
+
{ title: '早餐 梅姨家常菜', subhead: '红烧牛肉面、海盐芝士燕麦奶、黑胡椒香煎鸡蛋', statusText: '当前不可取消', image: 'https://image.whzb.com/chain/StellarUI/bg1.jpg' },
|
|
63
|
+
]);
|
|
64
|
+
</script>
|
|
65
|
+
<template>
|
|
66
|
+
<ste-function-list title="今日餐食" subhead="食刻准备 到点开吃" :data="data" buttonText="核销" buttonIcon="" />
|
|
67
|
+
</template>
|
|
68
|
+
```
|
|
69
|
+
|
|
70
|
+
---$
|
|
71
|
+
|
|
72
|
+
### API
|
|
73
|
+
|
|
74
|
+
<!-- props -->
|
|
75
|
+
|
|
76
|
+
---$
|
|
77
|
+
{{xuyajun}}
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "ste-function-list",
|
|
3
|
+
"description": "功能列表",
|
|
4
|
+
"example": "<ste-function-list></ste-function-list>",
|
|
5
|
+
"tutorial": "https://stellar-ui.intecloud.com.cn/plus/#/?active=function-list",
|
|
6
|
+
"attributes": [
|
|
7
|
+
{
|
|
8
|
+
"name": "background",
|
|
9
|
+
"description": "组件背景色",
|
|
10
|
+
"type": "string",
|
|
11
|
+
"default": "#fff"
|
|
12
|
+
},
|
|
13
|
+
{
|
|
14
|
+
"name": "[event]click-header",
|
|
15
|
+
"description": "点击列表头部触发",
|
|
16
|
+
"type": "(type: 'title' | 'subhead' | 'more') => void",
|
|
17
|
+
"params": [
|
|
18
|
+
{
|
|
19
|
+
"name": "type",
|
|
20
|
+
"description": "点击的区域类型（可选值：`title`, `subhead`,`more`）"
|
|
21
|
+
}
|
|
22
|
+
]
|
|
23
|
+
}
|
|
24
|
+
]
|
|
25
|
+
}
|
|
@@ -0,0 +1,199 @@
|
|
|
1
|
+
<script setup lang="ts">
|
|
2
|
+
import { computed } from 'vue';
|
|
3
|
+
import propData, { type FunctionListItem } from './props';
|
|
4
|
+
|
|
5
|
+
const props = defineProps(propData);
|
|
6
|
+
|
|
7
|
+
const rootStyle = computed(() => {
|
|
8
|
+
return {
|
|
9
|
+
background: props.background,
|
|
10
|
+
'--ste-function-list-content-bg': props.contentBg,
|
|
11
|
+
};
|
|
12
|
+
});
|
|
13
|
+
|
|
14
|
+
const emits = defineEmits<{
|
|
15
|
+
(e: 'click-header', type: 'title' | 'subhead' | 'more'): void;
|
|
16
|
+
(e: 'click-item', type: 'image' | 'title' | 'subhead' | 'status' | 'button', item: FunctionListItem): void;
|
|
17
|
+
(e: 'click-empty', type: 'image' | 'text' | 'button'): void;
|
|
18
|
+
}>();
|
|
19
|
+
|
|
20
|
+
const onClickHeader = (type: 'title' | 'subhead' | 'more') => emits('click-header', type);
|
|
21
|
+
|
|
22
|
+
const onClickItem = (type: 'image' | 'title' | 'subhead' | 'status' | 'button', item: FunctionListItem) => emits('click-item', type, item);
|
|
23
|
+
|
|
24
|
+
const onClickEmpty = (type: 'image' | 'text' | 'button') => emits('click-empty', type);
|
|
25
|
+
</script>
|
|
26
|
+
<template>
|
|
27
|
+
<view class="ste-function-list-root" :style="[rootStyle]">
|
|
28
|
+
<view class="ste-function-list-header">
|
|
29
|
+
<view class="ste-function-list-header-l">
|
|
30
|
+
<view class="ste-function-list-title" @click="onClickHeader('title')">{{ title }}</view>
|
|
31
|
+
<view class="ste-function-list-subhead" @click="onClickHeader('subhead')">
|
|
32
|
+
<slot name="subhead">
|
|
33
|
+
{{ subhead }}
|
|
34
|
+
</slot>
|
|
35
|
+
</view>
|
|
36
|
+
</view>
|
|
37
|
+
<view class="ste-function-list-header-r">
|
|
38
|
+
<slot name="header-right">
|
|
39
|
+
<view class="ste-function-list-more" @click="onClickHeader('more')">
|
|
40
|
+
更多
|
|
41
|
+
<ste-icon code="" color="#353535"></ste-icon>
|
|
42
|
+
</view>
|
|
43
|
+
</slot>
|
|
44
|
+
</view>
|
|
45
|
+
</view>
|
|
46
|
+
<view class="ste-function-list-content" v-if="data?.length">
|
|
47
|
+
<scroll-view scroll-x class="content-list" :class="{ multiple: data?.length > 1 }">
|
|
48
|
+
<view class="content-list-item" v-for="(item, index) in data" :key="index">
|
|
49
|
+
<view class="content-list-item-image" @click="onClickItem('image', item)">
|
|
50
|
+
<ste-image :src="item.image" mode="aspectFill"></ste-image>
|
|
51
|
+
</view>
|
|
52
|
+
<view class="content-list-item-info">
|
|
53
|
+
<view class="content-list-item-info-title" @click="onClickItem('title', item)">{{ item.title }}</view>
|
|
54
|
+
<view class="content-list-item-info-subhead" v-if="item.subhead" @click="onClickItem('subhead', item)">{{ item.subhead }}</view>
|
|
55
|
+
<view class="content-list-item-info-footer">
|
|
56
|
+
<view class="content-list-item-info-status" @click="onClickItem('status', item)">{{ item.statusText }}</view>
|
|
57
|
+
<view class="content-list-item-info-button" v-if="item.buttonText || buttonText || item.buttonIcon || buttonIcon">
|
|
58
|
+
<ste-button
|
|
59
|
+
:mode="100"
|
|
60
|
+
:rootStyle="{ height: '56rpx' }"
|
|
61
|
+
type="primary"
|
|
62
|
+
@click="onClickItem('button', item)"
|
|
63
|
+
:background="item.buttonBg || buttonBg"
|
|
64
|
+
:color="item.buttonColor || buttonColor"
|
|
65
|
+
>
|
|
66
|
+
<ste-icon :code="item.buttonIcon || buttonIcon" :color="item.buttonColor || buttonColor" />
|
|
67
|
+
{{ item.buttonText || buttonText }}
|
|
68
|
+
</ste-button>
|
|
69
|
+
</view>
|
|
70
|
+
</view>
|
|
71
|
+
</view>
|
|
72
|
+
</view>
|
|
73
|
+
</scroll-view>
|
|
74
|
+
</view>
|
|
75
|
+
<view class="ste-function-list-empty" v-else>
|
|
76
|
+
<ste-image :src="emptyImage" width="96" height="96" @clicl="onClickEmpty('image')" />
|
|
77
|
+
<view class="empty-message" @click="onClickEmpty('text')">{{ emptyText }}</view>
|
|
78
|
+
<ste-button :mode="100" :rootStyle="{ height: '56rpx' }" type="primary" :background="buttonBg" :color="buttonColor" @click="onClickEmpty('button')">
|
|
79
|
+
{{ emptyButtonText }}
|
|
80
|
+
</ste-button>
|
|
81
|
+
</view>
|
|
82
|
+
</view>
|
|
83
|
+
</template>
|
|
84
|
+
|
|
85
|
+
<style lang="scss" scoped>
|
|
86
|
+
.ste-function-list-root {
|
|
87
|
+
padding: 24rpx 24rpx 20rpx 24rpx;
|
|
88
|
+
border-radius: 12rpx;
|
|
89
|
+
.ste-function-list-header {
|
|
90
|
+
display: flex;
|
|
91
|
+
align-items: center;
|
|
92
|
+
justify-content: space-between;
|
|
93
|
+
.ste-function-list-header-l {
|
|
94
|
+
display: flex;
|
|
95
|
+
align-items: center;
|
|
96
|
+
.ste-function-list-title {
|
|
97
|
+
font-weight: bold;
|
|
98
|
+
font-size: 32rpx;
|
|
99
|
+
color: #000000;
|
|
100
|
+
}
|
|
101
|
+
.ste-function-list-subhead {
|
|
102
|
+
font-size: 24rpx;
|
|
103
|
+
color: #ac7900;
|
|
104
|
+
line-height: 44rpx;
|
|
105
|
+
height: 44rpx;
|
|
106
|
+
background: rgba(252, 222, 151, 0.23);
|
|
107
|
+
border-radius: 22rpx;
|
|
108
|
+
padding: 0 12rpx;
|
|
109
|
+
margin-left: 18rpx;
|
|
110
|
+
}
|
|
111
|
+
}
|
|
112
|
+
.ste-function-list-header-r {
|
|
113
|
+
font-size: 24rpx;
|
|
114
|
+
color: #353535;
|
|
115
|
+
}
|
|
116
|
+
}
|
|
117
|
+
.ste-function-list-content {
|
|
118
|
+
width: 100%;
|
|
119
|
+
margin-top: 24rpx;
|
|
120
|
+
.content-list {
|
|
121
|
+
width: 100%;
|
|
122
|
+
white-space: nowrap;
|
|
123
|
+
.content-list-item {
|
|
124
|
+
width: 100%;
|
|
125
|
+
display: inline-flex;
|
|
126
|
+
border-radius: 12rpx;
|
|
127
|
+
padding: 24rpx 20rpx 20rpx 20rpx;
|
|
128
|
+
background-color: var(--ste-function-list-content-bg);
|
|
129
|
+
justify-content: space-between;
|
|
130
|
+
& + .content-list-item {
|
|
131
|
+
margin-left: 20rpx;
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
.content-list-item-image {
|
|
135
|
+
width: 140rpx;
|
|
136
|
+
overflow: hidden;
|
|
137
|
+
background: #dddddd;
|
|
138
|
+
border-radius: 12rpx;
|
|
139
|
+
}
|
|
140
|
+
.content-list-item-info {
|
|
141
|
+
width: calc(100% - 160rpx);
|
|
142
|
+
white-space: normal;
|
|
143
|
+
.content-list-item-info-title {
|
|
144
|
+
font-weight: bold;
|
|
145
|
+
font-size: 28rpx;
|
|
146
|
+
color: #000000;
|
|
147
|
+
line-height: 40rpx;
|
|
148
|
+
}
|
|
149
|
+
.content-list-item-info-subhead {
|
|
150
|
+
font-size: 24rpx;
|
|
151
|
+
color: #757575;
|
|
152
|
+
line-height: 34rpx;
|
|
153
|
+
margin-top: 12rpx;
|
|
154
|
+
}
|
|
155
|
+
.content-list-item-info-footer {
|
|
156
|
+
font-size: 24rpx;
|
|
157
|
+
color: #757575;
|
|
158
|
+
height: 56rpx;
|
|
159
|
+
display: flex;
|
|
160
|
+
align-items: center;
|
|
161
|
+
justify-content: space-between;
|
|
162
|
+
margin-top: 10rpx;
|
|
163
|
+
.content-list-item-info-status {
|
|
164
|
+
flex: 1;
|
|
165
|
+
padding-right: 20rpx;
|
|
166
|
+
}
|
|
167
|
+
}
|
|
168
|
+
}
|
|
169
|
+
}
|
|
170
|
+
|
|
171
|
+
&.multiple {
|
|
172
|
+
.content-list-item {
|
|
173
|
+
width: calc(100% - 90rpx);
|
|
174
|
+
}
|
|
175
|
+
}
|
|
176
|
+
}
|
|
177
|
+
}
|
|
178
|
+
.ste-function-list-empty {
|
|
179
|
+
width: 100%;
|
|
180
|
+
height: 120rpx;
|
|
181
|
+
display: flex;
|
|
182
|
+
align-items: center;
|
|
183
|
+
justify-content: space-between;
|
|
184
|
+
border-radius: 12rpx;
|
|
185
|
+
background-color: var(--ste-function-list-content-bg);
|
|
186
|
+
padding: 0 20rpx;
|
|
187
|
+
margin-top: 24rpx;
|
|
188
|
+
.empty-message {
|
|
189
|
+
flex: 1;
|
|
190
|
+
padding: 0 20rpx;
|
|
191
|
+
white-space: nowrap;
|
|
192
|
+
overflow: hidden;
|
|
193
|
+
text-overflow: ellipsis;
|
|
194
|
+
font-size: 28rpx;
|
|
195
|
+
color: #000000;
|
|
196
|
+
}
|
|
197
|
+
}
|
|
198
|
+
}
|
|
199
|
+
</style>
|
package/package.json
CHANGED