@didaoktv/didaoui-uniapp 1.0.1 → 1.2.1

package/README.md

@@ -6,7 +6,7 @@
 
 - **帝王级配色** — 帝王金 `#F5A623` + 皇家蓝 `#2D4BA0` 双主色，暗色主题默认
 - **玻璃拟态设计** — 多层级玻璃拟态效果，打造高端夜店沉浸感
-- **61 个精心打磨的组件** — 覆盖表单、导航、布局、数据展示、浮层反馈、交互六大类
+- **67 个精心打磨的组件** — 覆盖表单、导航、布局卡片、数据展示、浮层反馈、交互六大类，含 KTV 业务组件（房态卡、账单明细、工单卡、日历、二维码）
 - **Vue3 + TypeScript** — 完整类型定义，Composition API
 - **多端兼容** — H5 / 微信小程序 / 抖音小程序 / Android / iOS
 
@@ -50,12 +50,12 @@ import { DdButton, DdInput } from '@didaoktv/didaoui-uniapp'
 
 | 分类    | 数量 | 组件                                                                                                                                            |
 | ----- | -- | --------------------------------------------------------------------------------------------------------------------------------------------- |
-| 表单输入  | 13 | Button, Input, Field, Switch, Checkbox, Radio, Stepper, SearchBar, Slider, DatePicker, Picker, Rate, Upload                                   |
+| 表单输入  | 17 | Button, Input, Form, Field, Switch, Checkbox, CheckboxGroup, Radio, RadioGroup, Stepper, SearchBar, Slider, DatePicker, Picker, Rate, Upload, Icon                             |
 | 导航    | 12 | Navigation, TopNavbar, SwipeableTab, SegmentedTab, Drawer, Tabbar, TabbarItem, Backtop, Collapse, CollapseItem, DropdownMenu, DropdownItem    |
-| 布局    | 4  | Card, RoomCard, FeatureGrid, Sticky                                                                                                           |
+| 布局/卡片 | 8  | Card, RoomCard, FeatureGrid, Sticky, BillDetail, WorkorderCard, Calendar, Qrcode                                                              |
 | 数据展示  | 16 | Tag, StatCard, ChampionCard, Avatar, Badge, ListCell, Cell, CellGroup, CountDown, Divider, Image, Progress, Skeleton, EmptyState, Step, Steps |
-| 浮层反馈  | 11 | Modal, ActionSheet, Toast, Alert, Loading, Dialog, Overlay, Popup, Popover, PopoverItem, SwipeAction                                          |
-| 交互    | 3  | Swipe, SwipeItem, PullRefresh                                                                                                                 |
+| 浮层反馈  | 10 | Modal, ActionSheet, Toast, Alert, Loading, Dialog, Overlay, Popup, Popover, PopoverItem                                                       |
+| 交互    | 5  | SwipeAction, Swipe, SwipeItem, PullRefresh, Loadmore                                                                                         |
 | 小程序专属 | 2  | CapsuleButton, MiniProgramNavbar                                                                                                              |
 
 ## 设计规范
@@ -82,6 +82,17 @@ import { DdButton, DdInput } from '@didaoktv/didaoui-uniapp'
 
 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 px (8pt 基础网格)
 
+## 新增业务组件（2026-08-22 纳入设计系统）
+
+> 新组件统一以主流组件库（Vant 等）同名/同类组件为 API 设计基准，符合 uni-app 多端规范，只消费上层 `scss/_variables.scss` 既有 token。
+
+| 组件 | 用途 | 参考基准 |
+|------|------|---------|
+| `dd-bill-detail` | 账单明细（商品项/小计/合计/支付状态/操作按钮 slot） | Vant `Card` + GoodsAction 聚合 |
+| `dd-workorder-card` | 工单条目卡片（类型/状态/进度/布置 checklist/完成确认） | Vant `Card` + `Tag` + Checklist |
+| `dd-calendar` | 月历 + 时段（日期多选区间/禁选/时段格） | Vant `Calendar` + 主流日历组件 |
+| `dd-qrcode` | 二维码渲染（canvas，内容/尺寸/前景色/背景色/logo） | 主流二维码组件 API |
+
 ## License
 
 [MIT](./LICENSE) © 帝到KTV

package/components/dd-action-sheet/dd-action-sheet.vue

@@ -130,10 +130,10 @@ function onClose() {
 
   &__handle {
     width: 72rpx;
-    height: 8rpx;
+    height: $dd-space-1;
     border-radius: $dd-radius-full;
     background: rgba(255, 255, 255, 0.3);
-    margin: 8rpx auto 16rpx;
+    margin: $dd-space-1 auto $dd-space-2;
     opacity: 0.6;
   }
 
@@ -178,7 +178,7 @@ function onClose() {
   }
 
   &__name {
-    margin-top: 8rpx;
+    margin-top: $dd-space-1;
     font-size: $dd-font-size-caption;
     color: $dd-text-secondary;
     max-width: 128rpx;

package/components/dd-album/album.js

@@ -0,0 +1,19 @@
+export default {
+    // album 组件
+    album: {
+        urls: [],
+        keyName: '',
+        singleSize: 180,
+        multipleSize: 70,
+        space: 6,
+        singleMode: 'scaleToFill',
+        multipleMode: 'aspectFill',
+        maxCount: 9,
+        previewFullImage: true,
+        rowCount: 3,
+        showMore: true,
+        autoWrap: false,
+        unit: 'px',
+        stop: true,
+    }
+}

package/components/dd-album/dd-album.vue

@@ -0,0 +1,345 @@
+<template>
+    <view class="dd-album">
+        <!-- 相册行容器，每行显示 rowCount 个图片 -->
+        <view
+            class="dd-album__row"
+            ref="dd-album__row"
+            v-for="(arr, index) in showUrls"
+            :forComputedUse="albumWidth"
+            :key="index"
+            :style="{flexWrap: autoWrap ? 'wrap' : 'nowrap'}"
+        >
+            <!-- 图片包装容器 -->
+            <view
+                class="dd-album__row__wrapper"
+                v-for="(item, index1) in arr"
+                :key="index1"
+                :style="[imageStyle(index + 1, index1 + 1)]"
+                @tap="onPreviewTap($event, getSrc(item))"
+            >
+                <!-- 图片显示 -->
+                <image
+                    :src="getSrc(item)"
+                    :mode="
+                        urls.length === 1
+                            ? imageHeight > 0
+                                ? singleMode
+                                : 'widthFix'
+                            : multipleMode
+                    "
+                    :style="[
+                        {
+                            width: imageWidth,
+                            height: imageHeight,
+                            borderRadius: shape == 'circle' ? '10000px' : addUnit(radius)
+                        }
+                    ]"
+                ></image>
+                <!-- 超出最大显示数量时的更多提示 -->
+                <view
+                    v-if="
+                        showMore &&
+                        urls.length > rowCount * showUrls.length &&
+                        index === showUrls.length - 1 &&
+                        index1 === showUrls[showUrls.length - 1].length - 1
+                    "
+                    class="dd-album__row__wrapper__text"
+                    :style="{
+					    borderRadius: shape == 'circle' ? '50%' : addUnit(radius),
+				    }"
+                >
+                    <dd-text
+                        :text="`+${urls.length - maxCount}`"
+                        color="#fff"
+                        :size="multipleSize * 0.3"
+                        align="center"
+                        customStyle="justify-content: center"
+                    ></dd-text>
+                </view>
+            </view>
+        </view>
+    </view>
+</template>
+
+<script>
+import { props } from './props';
+import { mpMixin } from '../../libs/mixin/mpMixin';
+import { mixin } from '../../libs/mixin/mixin';
+import { addUnit, sleep } from '../../libs/function/index';
+import test from '../../libs/function/test';
+// #ifdef APP-NVUE
+// 不支持百分比单位，这里需要通过dom查询组件的宽度
+const dom = uni.requireNativePlugin('dom')
+// #endif
+
+/**
+ * Album 相册
+ * @description 本组件提供一个类似相册的功能，让开发者开发起来更加得心应手。减少重复的模板代码
+ *
+ * @property {Array}           urls             图片地址列表 Array<String>|Array<Object>形式
+ * @property {String}          keyName          指定从数组的对象元素中读取哪个属性作为图片地址
+ * @property {String | Number} singleSize       单图时，图片长边的长度  （默认 180 ）
+ * @property {String | Number} multipleSize     多图时，图片边长 （默认 70 ）
+ * @property {String | Number} space            多图时，图片水平和垂直之间的间隔 （默认 6 ）
+ * @property {String}          singleMode       单图时，图片缩放裁剪的模式 （默认 'scaleToFill' ）
+ * @property {String}          multipleMode     多图时，图片缩放裁剪的模式 （默认 'aspectFill' ）
+ * @property {String | Number} maxCount         取消按钮的提示文字 （默认 9 ）
+ * @property {Boolean}         previewFullImage 是否可以预览图片 （默认 true ）
+ * @property {String | Number} rowCount         每行展示图片数量，如设置，singleSize和multipleSize将会无效	（默认 3 ）
+ * @property {Boolean}         showMore         超出maxCount时是否显示查看更多的提示 （默认 true ）
+ * @property {String}          shape            图片形状，circle-圆形，square-方形 （默认 'square' ）
+ * @property {String | Number} radius           圆角值，单位任意，如果为数值，则为px单位 （默认 0 ）
+ * @property {Boolean}         autoWrap         自适应换行模式，不受rowCount限制，图片会自动换行 （默认 false ）
+ * @property {String}          unit             图片单位 （默认 px ）
+ * @event    {Function}        albumWidth       某些特殊的情况下，需要让文字与相册的宽度相等，这里事件的形式对外发送  （回调参数 width ）
+ * @example <dd-album :urls="urls2" @albumWidth="width => albumWidth = width" multipleSize="68" ></dd-album>
+ */
+export default {
+    name: 'dd-album',
+    mixins: [mpMixin, mixin, props],
+    data() {
+        return {
+            // 单图的宽度
+            singleWidth: 0,
+            // 单图的高度
+            singleHeight: 0,
+            // 单图时，如果无法获取图片的尺寸信息，让图片宽度默认为容器的一定百分比
+            singlePercent: 0.6
+        }
+    },
+    watch: {
+        urls: {
+            immediate: true,
+            handler(newVal) {
+                // 当只有一张图片时，获取图片尺寸信息
+                if (newVal.length === 1) {
+                    this.getImageRect()
+                }
+            }
+        }
+    },
+    computed: {
+        /**
+         * 计算图片样式
+         * @param {Number} index1 - 行索引
+         * @param {Number} index2 - 列索引
+         * @returns {Object} 图片样式对象
+         */
+        imageStyle() {
+            return (index1, index2) => {
+                const { space, rowCount, multipleSize, urls } = this,
+                    rowLen = this.showUrls.length,
+                    allLen = this.urls.length
+                const style = {
+                    marginRight: addUnit(space),
+                    marginBottom: addUnit(space)
+                }
+                // 如果为最后一行，则每个图片都无需下边框
+                if (index1 === rowLen && !this.autoWrap) style.marginBottom = 0
+                // 每行的最右边一张和总长度的最后一张无需右边框
+                if (!this.autoWrap) {
+                    if (
+                        index2 === rowCount ||
+                        (index1 === rowLen &&
+                            index2 === this.showUrls[index1 - 1].length)
+                    )
+                        style.marginRight = 0
+                }
+                return style
+            }
+        },
+        /**
+         * 将图片地址数组划分为二维数组，用于按行显示
+         * @returns {Array} 二维数组，每个子数组代表一行图片
+         */
+        showUrls() {
+            if (this.autoWrap) {
+                // 自动换行模式下，所有图片放在一行中显示
+                return [ this.urls.slice(0, this.maxCount) ];
+            } else {
+                // 固定行数模式下，按 rowCount 分割图片
+                const arr = []
+                this.urls.map((item, index) => {
+                    // 限制最大展示数量
+                    if (index + 1 <= this.maxCount) {
+                        // 计算该元素为第几个素组内
+                        const itemIndex = Math.floor(index / this.rowCount)
+                        // 判断对应的索引是否存在
+                        if (!arr[itemIndex]) {
+                            arr[itemIndex] = []
+                        }
+                        arr[itemIndex].push(item)
+                    }
+                })
+                return arr
+            }
+        },
+        /**
+         * 计算图片宽度
+         * @returns {String} 图片宽度样式值
+         */
+        imageWidth() {
+            return addUnit(
+                this.urls.length === 1 ? this.singleWidth : this.multipleSize, this.unit
+            )
+        },
+        /**
+         * 计算图片高度
+         * @returns {String} 图片高度样式值
+         */
+        imageHeight() {
+            return addUnit(
+                this.urls.length === 1 ? this.singleHeight : this.multipleSize, this.unit
+            )
+        },
+        /**
+         * 计算相册总宽度，用于外部组件对齐
+         * 此变量无实际用途，仅仅是为了利用computed特性，让其在urls长度等变化时，重新计算图片的宽度
+         * @returns {Number} 相册宽度
+         */
+        albumWidth() {
+            let width = 0
+            if (this.urls.length === 1) {
+                width = this.singleWidth
+            } else {
+                width =
+                    this.showUrls[0].length * this.multipleSize +
+                    this.space * (this.showUrls[0].length - 1)
+            }
+            this.$emit('albumWidth', width)
+            return width
+        }
+    },
+    emits: ['preview', 'albumWidth'],
+    methods: {
+        addUnit,
+        /**
+         * 点击图片预览
+         * @param {Event} e - 点击事件对象
+         * @param {String} url - 当前点击图片的地址
+         */
+        onPreviewTap(e, url) {
+            // 获取所有图片地址
+            const urls = this.urls.map((item) => {
+                return this.getSrc(item)
+            })
+            if (this.previewFullImage) {
+                // 使用系统默认预览图片功能
+                uni.previewImage({
+                    current: url,
+                    urls
+                })
+                // 是否阻止事件传播
+                this.stop && this.preventEvent(e)
+            } else {
+                // 发送自定义预览事件
+                this.$emit('preview', {
+                    urls,
+                    currentIndex: urls.indexOf(url)
+                })
+            }
+        },
+        /**
+         * 获取图片地址
+         * @param {String|Object} item - 图片项，可以是字符串或对象
+         * @returns {String} 图片地址
+         */
+        getSrc(item) {
+            return test.object(item)
+                ? (this.keyName && item[this.keyName]) || item.src
+                : item
+        },
+        /**
+         * 单图时，获取图片的尺寸
+         * 在小程序中，需要将网络图片的的域名添加到小程序的download域名才可能获取尺寸
+         * 在没有添加的情况下，让单图宽度默认为盒子的一定宽度(singlePercent)
+         */
+        getImageRect() {
+            const src = this.getSrc(this.urls[0])
+            uni.getImageInfo({
+                src,
+                success: (res) => {
+                    let singleSize = this.singleSize;
+                    // 单位
+                    let unit = '';
+                    if (Number.isNaN(Number(this.singleSize))) {
+                        // 大小中有字符 则记录字符
+                        unit = this.singleSize.replace(/\d+/g, ''); // 单位
+                        singleSize = Number(this.singleSize.replace(/\D+/g, ''), 10); // 具体值
+                    }
+
+                    // 判断图片横向还是竖向展示方式
+                    const isHorizotal = res.width >= res.height
+                    this.singleWidth = isHorizotal
+                        ? singleSize
+                        : (res.width / res.height) * singleSize
+                    this.singleHeight = !isHorizotal
+                        ? singleSize
+                        : (res.height / res.width) * this.singleWidth
+
+                    // 如果有单位统一设置单位
+                    if(unit != null && unit !== ''){
+                        this.singleWidth = this.singleWidth + unit
+                        this.singleHeight = this.singleHeight + unit
+                    }
+                },
+                fail: () => {
+                    // 获取图片信息失败时，通过组件宽度计算
+                    this.getComponentWidth()
+                }
+            })
+        },
+        /**
+         * 获取组件的宽度，用于计算单图显示尺寸
+         */
+        async getComponentWidth() {
+            // 延时一定时间，以获取dom尺寸
+            await sleep(30)
+            // #ifndef APP-NVUE
+            // H5、小程序等平台通过 getRect 获取组件宽度
+            this.getRect('.dd-album__row').then((size) => {
+                this.singleWidth = size.width * this.singlePercent
+            })
+            // #endif
+
+            // #ifdef APP-NVUE
+            // NVUE 平台通过 dom 插件获取组件宽度
+            // 这里ref="dd-album__row"所在的标签为通过for循环出来，导致this.$refs['dd-album__row']是一个数组
+            const ref = this.$refs['dd-album__row'][0]
+            ref &&
+                dom.getComponentRect(ref, (res) => {
+                    this.singleWidth = res.size.width * this.singlePercent
+                })
+            // #endif
+        }
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+@import '../../scss/variables';
+@import '../../scss/dd-shared';
+.dd-album {
+    @include flex(column);
+
+    &__row {
+        @include flex(row);
+
+        &__wrapper {
+            position: relative;
+
+            &__text {
+                position: absolute;
+                top: 0;
+                left: 0;
+                right: 0;
+                bottom: 0;
+                background-color: rgba(0, 0, 0, 0.3);
+                @include flex(row);
+                justify-content: center;
+                align-items: center;
+            }
+        }
+    }
+}
+</style>

package/components/dd-album/props.js

@@ -0,0 +1,89 @@
+import { defineMixin } from '../../libs/vue'
+import AlbumDefaultProps from './album'
+import { registerComponentProps } from '../../libs/config/props.js'
+
+const defProps = registerComponentProps(AlbumDefaultProps)
+export const props = defineMixin({
+    props: {
+        // 图片地址，Array<String>|Array<Object>形式
+        urls: {
+            type: Array,
+            default: () => defProps.album.urls
+        },
+        // 指定从数组的对象元素中读取哪个属性作为图片地址
+        keyName: {
+            type: String,
+            default: () => defProps.album.keyName
+        },
+        // 单图时，图片长边的长度
+        singleSize: {
+            type: [String, Number],
+            default: () => defProps.album.singleSize
+        },
+        // 多图时，图片边长
+        multipleSize: {
+            type: [String, Number],
+            default: () => defProps.album.multipleSize
+        },
+        // 多图时，图片水平和垂直之间的间隔
+        space: {
+            type: [String, Number],
+            default: () => defProps.album.space
+        },
+        // 单图时，图片缩放裁剪的模式
+        singleMode: {
+            type: String,
+            default: () => defProps.album.singleMode
+        },
+        // 多图时，图片缩放裁剪的模式
+        multipleMode: {
+            type: String,
+            default: () => defProps.album.multipleMode
+        },
+        // 最多展示的图片数量，超出时最后一个位置将会显示剩余图片数量
+        maxCount: {
+            type: [String, Number],
+            default: () => defProps.album.maxCount
+        },
+        // 是否可以预览图片
+        previewFullImage: {
+            type: Boolean,
+            default: () => defProps.album.previewFullImage
+        },
+        // 每行展示图片数量，如设置，singleSize和multipleSize将会无效
+        rowCount: {
+            type: [String, Number],
+            default: () => defProps.album.rowCount
+        },
+        // 超出maxCount时是否显示查看更多的提示
+        showMore: {
+            type: Boolean,
+            default: () => defProps.album.showMore
+        },
+        // 图片形状，circle-圆形，square-方形
+        shape: {
+            type: String,
+            default: () => defProps.image.shape
+        },
+        // 圆角，单位任意
+        radius: {
+            type: [String, Number],
+            default: () => defProps.image.radius
+        },
+        // 自适应换行
+        autoWrap: {
+            type: Boolean,
+            default: () => defProps.album.autoWrap
+        },
+        // 单位
+        unit: {
+            type: [String],
+            default: () => defProps.album.unit
+        },
+        // 阻止点击冒泡
+        stop: {
+            type: Boolean,
+            default: () => defProps.album.stop
+        }
+    }
+})

package/components/dd-avatar/avatar.js

@@ -0,0 +1,19 @@
+export default {
+    // avatar 组件
+    avatar: {
+        src: '',
+        shape: 'circle',
+        size: 40,
+        mode: 'scaleToFill',
+        text: '',
+        bgColor: '#c0c4cc',
+        color: '#ffffff',
+        fontSize: 18,
+        icon: '',
+        mpAvatar: false,
+        randomBgColor: false,
+        defaultUrl: '',
+        colorIndex: '',
+        name: ''
+    }
+}