From 029074ae978e6bf91cfe6dd278233dea379e2f5b Mon Sep 17 00:00:00 2001 From: jqtmviyu Date: Fri, 9 May 2025 11:58:24 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20:sparkles:=20=E8=AE=A2=E5=8D=95?= =?UTF-8?q?=E8=AF=A6=E6=83=85=E9=A1=B5=E9=9D=99=E6=80=81=E7=BB=93=E6=9E=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages.json | 7 + src/pagesOrder/detail/detail.vue | 711 +++++++++++++++++++++++++++++++ src/types/animation.d.ts | 104 +++++ src/types/order.d.ts | 2 +- 4 files changed, 823 insertions(+), 1 deletion(-) create mode 100644 src/pagesOrder/detail/detail.vue create mode 100644 src/types/animation.d.ts diff --git a/src/pages.json b/src/pages.json index bd9744d..e8cffb3 100644 --- a/src/pages.json +++ b/src/pages.json @@ -152,6 +152,13 @@ "style": { "navigationBarTitleText": "新建订单" } + }, + { + "path": "detail/detail", + "style": { + "navigationBarTitleText": "订单详情", + "navigationStyle": "custom" + } } ] } diff --git a/src/pagesOrder/detail/detail.vue b/src/pagesOrder/detail/detail.vue new file mode 100644 index 0000000..28e403b --- /dev/null +++ b/src/pagesOrder/detail/detail.vue @@ -0,0 +1,711 @@ + + + + + diff --git a/src/types/animation.d.ts b/src/types/animation.d.ts new file mode 100644 index 0000000..e473b22 --- /dev/null +++ b/src/types/animation.d.ts @@ -0,0 +1,104 @@ +// 关键帧对象类型 +export interface Keyframe { + offset?: number // 关键帧的偏移，范围[0-1] + ease?: string // 动画缓动函数 + transformOrigin?: string // 基点位置 + backgroundColor?: string // 背景颜色 + opacity?: number // 不透明度 + width?: string // 宽度 + height?: string // 高度 + left?: string // 左边位置 + top?: string // 顶边位置 + right?: string // 右边位置 + bottom?: string // 底边位置 + matrix?: number[] // 变换矩阵 + matrix3d?: number[] // 三维变换矩阵 + rotate?: number // 旋转 + rotate3d?: number[] // 三维旋转 + rotateX?: number // X 方向旋转 + rotateY?: number // Y 方向旋转 + rotateZ?: number // Z 方向旋转 + scale?: number[] // 缩放 + scale3d?: number[] // 三维缩放 + scaleX?: number // X 方向缩放 + scaleY?: number // Y 方向缩放 + scaleZ?: number // Z 方向缩放 + skew?: number[] // 倾斜 + skewX?: number // X 方向倾斜 + skewY?: number // Y 方向倾斜 + translate?: number[] // 位移 + translate3d?: number[] // 三维位移 + translateX?: number // X 方向位移 + translateY?: number // Y 方向位移 + translateZ?: number // Z 方向位移 + color?: string // 文字颜色 + [key: string]: any // 其他可能的CSS属性 +} + +// 滚动时间线参数 +export interface ScrollTimeline { + scrollSource: string // 滚动元素的选择器 + orientation?: 'horizontal' | 'vertical' // 滚动方向 + startScrollOffset: number // 开始驱动动画的滚动偏移量 + endScrollOffset: number // 停止驱动动画的滚动偏移量 + timeRange: number // 滚动范围映射的时间长度 +} + +// 清除动画选项 +export interface ClearAnimationOptions { + opacity?: boolean + backgroundColor?: boolean + width?: boolean + height?: boolean + left?: boolean + right?: boolean + top?: boolean + bottom?: boolean + rotate?: boolean + rotateX?: boolean + rotateY?: boolean + rotateZ?: boolean + scale?: boolean + scaleX?: boolean + scaleY?: boolean + scaleZ?: boolean + translate?: boolean + translateX?: boolean + translateY?: boolean + translateZ?: boolean + [key: string]: boolean | undefined +} + +// 动画方法类型 +export interface AnimationMethods { + /** + * 关键帧动画 + * @param selector 选择器 + * @param keyframes 关键帧信息 + * @param duration 动画持续时长（毫秒） + * @param callback 动画完成后的回调函数 + */ + animate(selector: string, keyframes: Keyframe[], duration: number, callback?: () => void): void + + /** + * 滚动驱动的动画 + * @param selector 选择器 + * @param keyframes 关键帧信息 + * @param duration 动画持续时长（毫秒） + * @param scrollTimeline 滚动时间线参数 + */ + animate( + selector: string, + keyframes: Keyframe[], + duration: number, + scrollTimeline: ScrollTimeline, + ): void + + /** + * 清除动画 + * @param selector 选择器 + * @param options 需要清除的属性，不填写则全部清除 + * @param callback 清除完成后的回调函数 + */ + clearAnimation(selector: string, options?: ClearAnimationOptions, callback?: () => void): void +} diff --git a/src/types/order.d.ts b/src/types/order.d.ts index 153ffe5..df424b9 100644 --- a/src/types/order.d.ts +++ b/src/types/order.d.ts @@ -48,7 +48,7 @@ export type OrderCreateParams = { /** 所选地址Id */ addressId: string /** 配送时间类型，1为不限，2为工作日，3为双休或假日 */ - deliveryTimeType: number + deliveryTimeType: 1 | 2 | 3 /** 订单备注 */ buyerMessage: string /** 商品集合[ 商品信息 ] */