@didaoktv/didaoui-uniapp 1.4.2 → 1.4.3
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/README.md +2 -2
- package/components/dd-goods-card/dd-goods-card.vue +260 -0
- package/index.ts +4 -3
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
|
|
7
7
|
- **帝王级配色** — 帝王金 `#F5A623` + 皇家蓝 `#2D4BA0` 双主色，暗色主题默认
|
|
8
8
|
- **玻璃拟态设计** — 多层级玻璃拟态效果，打造高端夜店沉浸感
|
|
9
|
-
- **
|
|
9
|
+
- **96 个精心打磨的组件** — 覆盖表单、导航、布局卡片、数据展示、浮层反馈、交互、画布七大类，含 KTV 业务组件（房态卡、账单明细、工单卡、日历、二维码）
|
|
10
10
|
- **Vue3 + TypeScript** — 完整类型定义，Composition API
|
|
11
11
|
- **多端兼容** — H5 / 微信小程序 / 抖音小程序 / Android / iOS
|
|
12
12
|
|
|
@@ -52,7 +52,7 @@ import { DdButton, DdInput } from '@didaoktv/didaoui-uniapp'
|
|
|
52
52
|
| ----- | -- | --------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
53
53
|
| 表单输入 | 24 | Button, CodeButton, Input, Form, Field, Switch, Checkbox, CheckboxGroup, Radio, RadioGroup, Stepper, SearchBar, Slider, DatePicker, Picker, Rate, Upload, Icon, Keyboard, NumberKeyboard, CarKeyboard, Cascader, GoodsSku, TreeSelect |
|
|
54
54
|
| 导航 | 14 | Navigation, TopNavbar, SegmentedTab, SwipeableTab, Drawer, Tabbar, TabbarItem, Backtop, Collapse, CollapseItem, DropdownMenu, DropdownItem, Sidebar, SidebarItem | |
|
|
55
|
-
| 布局/卡片 |
|
|
55
|
+
| 布局/卡片 | 10 | Card, RoomCard, GoodsCard, FeatureGrid, Sticky, BillDetail, WorkorderCard, Calendar, Qrcode, SubmitBar |
|
|
56
56
|
| 数据展示 | 25 | Tag, StatCard, ChampionCard, Avatar, AvatarGroup, Badge, ListCell, Cell, CellGroup, CountDown, Divider, Image, Progress, Skeleton, EmptyState, Step, Steps, Text, Link, Copy, Album, Coupon, Parse, Markdown, Price |
|
|
57
57
|
| 浮层反馈 | 11 | Modal, ActionSheet, Toast, Alert, Loading, Dialog, Overlay, Popup, Popover, PopoverItem, Portal |
|
|
58
58
|
| 交互 | 5 | SwipeAction, Swipe, SwipeItem, PullRefresh, Loadmore |
|
|
@@ -0,0 +1,260 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<view
|
|
3
|
+
class="dd-goods-card"
|
|
4
|
+
:class="[
|
|
5
|
+
`dd-goods-card--${layout}`,
|
|
6
|
+
{ 'dd-goods-card--disabled': disabled },
|
|
7
|
+
]"
|
|
8
|
+
:style="customStyle"
|
|
9
|
+
:hover-class="hoverable ? 'dd-goods-card--hover' : ''"
|
|
10
|
+
:hover-stay-time="120"
|
|
11
|
+
@click="onClick"
|
|
12
|
+
>
|
|
13
|
+
<!-- 缩略图 + 金色角标 -->
|
|
14
|
+
<view class="dd-goods-card__thumb">
|
|
15
|
+
<slot name="thumb">
|
|
16
|
+
<image
|
|
17
|
+
class="dd-goods-card__thumb-img"
|
|
18
|
+
:src="thumb"
|
|
19
|
+
:mode="thumbMode"
|
|
20
|
+
></image>
|
|
21
|
+
</slot>
|
|
22
|
+
<text v-if="tag" class="dd-goods-card__tag">{{ tag }}</text>
|
|
23
|
+
</view>
|
|
24
|
+
|
|
25
|
+
<!-- 信息区 -->
|
|
26
|
+
<view class="dd-goods-card__body">
|
|
27
|
+
<slot name="default">
|
|
28
|
+
<text v-if="title" class="dd-goods-card__title">{{ title }}</text>
|
|
29
|
+
<text v-if="desc" class="dd-goods-card__desc">{{ desc }}</text>
|
|
30
|
+
|
|
31
|
+
<view class="dd-goods-card__price-row">
|
|
32
|
+
<view class="dd-goods-card__price">
|
|
33
|
+
<dd-price
|
|
34
|
+
v-if="price !== undefined && price !== null && price !== ''"
|
|
35
|
+
:rate="price"
|
|
36
|
+
:currency="currency"
|
|
37
|
+
:decimal-length="decimalLength"
|
|
38
|
+
></dd-price>
|
|
39
|
+
<text v-if="originPrice" class="dd-goods-card__price-origin">
|
|
40
|
+
{{ currency }}{{ originPrice }}
|
|
41
|
+
</text>
|
|
42
|
+
</view>
|
|
43
|
+
<text v-if="num" class="dd-goods-card__num">×{{ num }}</text>
|
|
44
|
+
</view>
|
|
45
|
+
|
|
46
|
+
<view v-if="$slots.bottom" class="dd-goods-card__bottom">
|
|
47
|
+
<slot name="bottom"></slot>
|
|
48
|
+
</view>
|
|
49
|
+
</slot>
|
|
50
|
+
</view>
|
|
51
|
+
</view>
|
|
52
|
+
</template>
|
|
53
|
+
|
|
54
|
+
<script setup lang="ts">
|
|
55
|
+
import DdPrice from '../dd-price/dd-price.vue'
|
|
56
|
+
|
|
57
|
+
interface Props {
|
|
58
|
+
/** 商品图片地址 */
|
|
59
|
+
thumb?: string
|
|
60
|
+
/** 商品名称 */
|
|
61
|
+
title?: string
|
|
62
|
+
/** 商品描述/规格说明 */
|
|
63
|
+
desc?: string
|
|
64
|
+
/** 单价（元，直接展示）；不传不渲染 */
|
|
65
|
+
price?: string | number
|
|
66
|
+
/** 划线原价（元，直接展示） */
|
|
67
|
+
originPrice?: string | number
|
|
68
|
+
/** 货币符号 */
|
|
69
|
+
currency?: string
|
|
70
|
+
/** 价格小数位数 */
|
|
71
|
+
decimalLength?: string | number
|
|
72
|
+
/** 角标文案（如「热卖」「售罄」） */
|
|
73
|
+
tag?: string
|
|
74
|
+
/** 布局：horizontal 横向（左图右文）/ vertical 竖向（上图下文） */
|
|
75
|
+
layout?: 'horizontal' | 'vertical'
|
|
76
|
+
/** 已选数量（右下角，不传不渲染） */
|
|
77
|
+
num?: string | number
|
|
78
|
+
/** 置灰（售罄等不可点场景） */
|
|
79
|
+
disabled?: boolean
|
|
80
|
+
/** 图片裁剪模式，透传 image mode */
|
|
81
|
+
thumbMode?: string
|
|
82
|
+
/** 是否启用按压反馈 */
|
|
83
|
+
hoverable?: boolean
|
|
84
|
+
/** 自定义根节点样式 */
|
|
85
|
+
customStyle?: string
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
const props = withDefaults(defineProps<Props>(), {
|
|
89
|
+
thumb: '',
|
|
90
|
+
title: '',
|
|
91
|
+
desc: '',
|
|
92
|
+
price: undefined,
|
|
93
|
+
originPrice: '',
|
|
94
|
+
currency: '¥',
|
|
95
|
+
decimalLength: 2,
|
|
96
|
+
tag: '',
|
|
97
|
+
layout: 'horizontal',
|
|
98
|
+
num: '',
|
|
99
|
+
disabled: false,
|
|
100
|
+
thumbMode: 'aspectFill',
|
|
101
|
+
hoverable: true,
|
|
102
|
+
customStyle: '',
|
|
103
|
+
})
|
|
104
|
+
|
|
105
|
+
const emit = defineEmits<{ (e: 'click', val: Event): void }>()
|
|
106
|
+
|
|
107
|
+
function onClick(e: Event) {
|
|
108
|
+
if (props.disabled) return
|
|
109
|
+
emit('click', e)
|
|
110
|
+
}
|
|
111
|
+
</script>
|
|
112
|
+
|
|
113
|
+
<style lang="scss" scoped>
|
|
114
|
+
@import '../../scss/variables';
|
|
115
|
+
@import '../../scss/mixins';
|
|
116
|
+
|
|
117
|
+
.dd-goods-card {
|
|
118
|
+
display: flex;
|
|
119
|
+
box-sizing: border-box;
|
|
120
|
+
background: var(--dd-bg-elevated, #{$dd-bg-elevated});
|
|
121
|
+
// radius 非可换肤 token，走 SCSS 值（与 dd-card 同口径）
|
|
122
|
+
border-radius: $dd-radius-lg;
|
|
123
|
+
box-shadow: var(--dd-shadow-1, #{$dd-shadow-1});
|
|
124
|
+
overflow: hidden;
|
|
125
|
+
@include dd-transition(all 0.3s ease);
|
|
126
|
+
|
|
127
|
+
&--hover {
|
|
128
|
+
transform: translateY(-4rpx);
|
|
129
|
+
box-shadow: var(--dd-shadow-2, #{$dd-shadow-2});
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
// ponytail: 置灰用整卡降透明度，配合角标「售罄」示意；如需保留文字可读性再改 per-part 置灰
|
|
133
|
+
&--disabled {
|
|
134
|
+
opacity: 0.55;
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
&__thumb {
|
|
138
|
+
position: relative;
|
|
139
|
+
flex-shrink: 0;
|
|
140
|
+
overflow: hidden;
|
|
141
|
+
|
|
142
|
+
&-img {
|
|
143
|
+
display: block;
|
|
144
|
+
width: 100%;
|
|
145
|
+
height: 100%;
|
|
146
|
+
}
|
|
147
|
+
}
|
|
148
|
+
|
|
149
|
+
&__tag {
|
|
150
|
+
position: absolute;
|
|
151
|
+
top: $dd-space-1;
|
|
152
|
+
left: $dd-space-1;
|
|
153
|
+
padding: 2rpx $dd-space-2;
|
|
154
|
+
border-radius: $dd-radius-sm;
|
|
155
|
+
background: linear-gradient(
|
|
156
|
+
135deg,
|
|
157
|
+
$dd-primary-600,
|
|
158
|
+
var(--dd-primary, #{$dd-primary})
|
|
159
|
+
);
|
|
160
|
+
color: var(--dd-primary-contrast, #{$dd-primary-contrast});
|
|
161
|
+
font-size: 20rpx;
|
|
162
|
+
line-height: 1.4;
|
|
163
|
+
z-index: 1;
|
|
164
|
+
}
|
|
165
|
+
|
|
166
|
+
&__body {
|
|
167
|
+
flex: 1;
|
|
168
|
+
min-width: 0;
|
|
169
|
+
display: flex;
|
|
170
|
+
flex-direction: column;
|
|
171
|
+
}
|
|
172
|
+
|
|
173
|
+
&__title {
|
|
174
|
+
color: var(--dd-text-primary, #{$dd-text-primary});
|
|
175
|
+
font-size: 28rpx;
|
|
176
|
+
font-weight: 600;
|
|
177
|
+
line-height: 1.4;
|
|
178
|
+
@include dd-ellipsis;
|
|
179
|
+
}
|
|
180
|
+
|
|
181
|
+
&__desc {
|
|
182
|
+
margin-top: $dd-space-1;
|
|
183
|
+
color: var(--dd-text-secondary, #{$dd-text-secondary});
|
|
184
|
+
font-size: 24rpx;
|
|
185
|
+
line-height: 1.4;
|
|
186
|
+
// 两行省略
|
|
187
|
+
display: -webkit-box;
|
|
188
|
+
-webkit-box-orient: vertical;
|
|
189
|
+
-webkit-line-clamp: 2;
|
|
190
|
+
overflow: hidden;
|
|
191
|
+
}
|
|
192
|
+
|
|
193
|
+
&__price-row {
|
|
194
|
+
display: flex;
|
|
195
|
+
align-items: center;
|
|
196
|
+
justify-content: space-between;
|
|
197
|
+
margin-top: auto;
|
|
198
|
+
}
|
|
199
|
+
|
|
200
|
+
&__price {
|
|
201
|
+
display: inline-flex;
|
|
202
|
+
align-items: baseline;
|
|
203
|
+
color: var(--dd-error-400, #{$dd-error-400});
|
|
204
|
+
font-weight: 600;
|
|
205
|
+
}
|
|
206
|
+
|
|
207
|
+
&__price-origin {
|
|
208
|
+
margin-left: $dd-space-2;
|
|
209
|
+
color: var(--dd-text-tertiary, #{$dd-text-tertiary});
|
|
210
|
+
font-size: 22rpx;
|
|
211
|
+
font-weight: 400;
|
|
212
|
+
text-decoration: line-through;
|
|
213
|
+
}
|
|
214
|
+
|
|
215
|
+
&__num {
|
|
216
|
+
margin-left: $dd-space-2;
|
|
217
|
+
color: var(--dd-text-tertiary, #{$dd-text-tertiary});
|
|
218
|
+
font-size: 24rpx;
|
|
219
|
+
}
|
|
220
|
+
|
|
221
|
+
&__bottom {
|
|
222
|
+
margin-top: $dd-space-2;
|
|
223
|
+
width: 100%;
|
|
224
|
+
}
|
|
225
|
+
}
|
|
226
|
+
|
|
227
|
+
// 横向：左图右文，图 140rpx 见方
|
|
228
|
+
.dd-goods-card--horizontal {
|
|
229
|
+
padding: $dd-space-3;
|
|
230
|
+
|
|
231
|
+
.dd-goods-card__thumb {
|
|
232
|
+
width: 140rpx;
|
|
233
|
+
height: 140rpx;
|
|
234
|
+
border-radius: $dd-radius-md;
|
|
235
|
+
}
|
|
236
|
+
|
|
237
|
+
.dd-goods-card__body {
|
|
238
|
+
padding-left: $dd-space-3;
|
|
239
|
+
}
|
|
240
|
+
|
|
241
|
+
.dd-goods-card__title {
|
|
242
|
+
@include dd-ellipsis;
|
|
243
|
+
}
|
|
244
|
+
}
|
|
245
|
+
|
|
246
|
+
// 竖向：上图下文，图占满整宽
|
|
247
|
+
.dd-goods-card--vertical {
|
|
248
|
+
flex-direction: column;
|
|
249
|
+
padding: 0;
|
|
250
|
+
|
|
251
|
+
.dd-goods-card__thumb {
|
|
252
|
+
width: 100%;
|
|
253
|
+
aspect-ratio: 1;
|
|
254
|
+
}
|
|
255
|
+
|
|
256
|
+
.dd-goods-card__body {
|
|
257
|
+
padding: $dd-space-3;
|
|
258
|
+
}
|
|
259
|
+
}
|
|
260
|
+
</style>
|
package/index.ts
CHANGED
|
@@ -42,9 +42,10 @@ import DdDropdownItem from './components/dd-dropdown-item/dd-dropdown-item.vue'
|
|
|
42
42
|
import DdSidebar from './components/dd-sidebar/dd-sidebar.vue'
|
|
43
43
|
import DdSidebarItem from './components/dd-sidebar-item/dd-sidebar-item.vue'
|
|
44
44
|
|
|
45
|
-
// === Layout (
|
|
45
|
+
// === Layout (10) ===
|
|
46
46
|
import DdCard from './components/dd-card/dd-card.vue'
|
|
47
47
|
import DdRoomCard from './components/dd-room-card/dd-room-card.vue'
|
|
48
|
+
import DdGoodsCard from './components/dd-goods-card/dd-goods-card.vue'
|
|
48
49
|
import DdFeatureGrid from './components/dd-feature-grid/dd-feature-grid.vue'
|
|
49
50
|
import DdSticky from './components/dd-sticky/dd-sticky.vue'
|
|
50
51
|
import DdBillDetail from './components/dd-bill-detail/dd-bill-detail.vue'
|
|
@@ -120,7 +121,7 @@ const components = {
|
|
|
120
121
|
DdDrawer, DdTabbar, DdTabbarItem, DdBacktop,
|
|
121
122
|
DdCollapse, DdCollapseItem, DdDropdownMenu, DdDropdownItem,
|
|
122
123
|
DdSidebar, DdSidebarItem,
|
|
123
|
-
DdCard, DdRoomCard, DdFeatureGrid, DdSticky, DdBillDetail, DdWorkorderCard, DdCalendar, DdQrcode,
|
|
124
|
+
DdCard, DdRoomCard, DdGoodsCard, DdFeatureGrid, DdSticky, DdBillDetail, DdWorkorderCard, DdCalendar, DdQrcode,
|
|
124
125
|
DdSubmitBar,
|
|
125
126
|
DdTag, DdStatCard, DdChampionCard, DdAvatar, DdAvatarGroup, DdBadge,
|
|
126
127
|
DdListCell, DdCell, DdCellGroup, DdCountDown, DdDivider,
|
|
@@ -152,7 +153,7 @@ export {
|
|
|
152
153
|
DdDrawer, DdTabbar, DdTabbarItem, DdBacktop,
|
|
153
154
|
DdCollapse, DdCollapseItem, DdDropdownMenu, DdDropdownItem,
|
|
154
155
|
DdSidebar, DdSidebarItem,
|
|
155
|
-
DdCard, DdRoomCard, DdFeatureGrid, DdSticky, DdBillDetail, DdWorkorderCard, DdCalendar, DdQrcode,
|
|
156
|
+
DdCard, DdRoomCard, DdGoodsCard, DdFeatureGrid, DdSticky, DdBillDetail, DdWorkorderCard, DdCalendar, DdQrcode,
|
|
156
157
|
DdSubmitBar,
|
|
157
158
|
DdTag, DdStatCard, DdChampionCard, DdAvatar, DdAvatarGroup, DdBadge,
|
|
158
159
|
DdListCell, DdCell, DdCellGroup, DdCountDown, DdDivider,
|