diff --git a/src/pages-order/order/components/CustomEmpty/images/empty.png b/src/components/CustomEmpty/images/empty.png similarity index 100% rename from src/pages-order/order/components/CustomEmpty/images/empty.png rename to src/components/CustomEmpty/images/empty.png diff --git a/src/pages-order/order/components/CustomEmpty/index.vue b/src/components/CustomEmpty/index.vue similarity index 100% rename from src/pages-order/order/components/CustomEmpty/index.vue rename to src/components/CustomEmpty/index.vue diff --git a/src/pages-order/order/components/CustomEmpty/styles/index.scss b/src/components/CustomEmpty/styles/index.scss similarity index 100% rename from src/pages-order/order/components/CustomEmpty/styles/index.scss rename to src/components/CustomEmpty/styles/index.scss diff --git a/src/components/Empty/index.vue b/src/components/Empty/index.vue deleted file mode 100644 index e69de29..0000000 diff --git a/src/components/Empty/styles/index.scss b/src/components/Empty/styles/index.scss deleted file mode 100644 index e69de29..0000000 diff --git a/src/pages-order/order/list.vue b/src/pages-order/order/list.vue index 0ea9420..f732e29 100644 --- a/src/pages-order/order/list.vue +++ b/src/pages-order/order/list.vue @@ -29,8 +29,8 @@ + + diff --git a/src/pages-service/order/components/OrderCard/OrderCardContent.vue b/src/pages-service/order/components/OrderCard/OrderCardContent.vue new file mode 100644 index 0000000..52c7df6 --- /dev/null +++ b/src/pages-service/order/components/OrderCard/OrderCardContent.vue @@ -0,0 +1,127 @@ + + + + + diff --git a/src/pages-service/order/components/OrderCard/constants/order.js b/src/pages-service/order/components/OrderCard/constants/order.js new file mode 100644 index 0000000..fc349fd --- /dev/null +++ b/src/pages-service/order/components/OrderCard/constants/order.js @@ -0,0 +1,59 @@ +// 订单类型 +export const ORDER_TYPE_MAP = { + 0: [ + { + label: '订单编号', + key: 'orderId' + }, + { + label: '入住时间', + key: 'checkInData' + }, + { + label: '游客姓名', + key: 'visitorName' + }, + { + label: '联系电话', + key: 'contactPhone' + } + ], + 1: [ + { + label: '订单编号', + key: 'orderId' + }, + { + label: '份数', + key: 'commodityAmount' + } + ], + 2: [ + { + label: '订单编号', + key: 'orderId' + }, + { + label: '份数', + key: 'commodityAmount' + } + ], +} + +// 工单类型 +export const SERVICE_TYPE_MAP = { + 0: [ + { + label: '创建时间', + key: 'createTime' + }, + { + label: '联系房客', + key: 'userName' + }, + { + label: '联系电话', + key: 'userPhone' + } + ], +} diff --git a/src/pages-service/order/components/OrderCard/index.vue b/src/pages-service/order/components/OrderCard/index.vue new file mode 100644 index 0000000..7f49e21 --- /dev/null +++ b/src/pages-service/order/components/OrderCard/index.vue @@ -0,0 +1,119 @@ + + + + + diff --git a/src/pages-service/order/components/OrderCard/styles/index.scss b/src/pages-service/order/components/OrderCard/styles/index.scss new file mode 100644 index 0000000..0ef603d --- /dev/null +++ b/src/pages-service/order/components/OrderCard/styles/index.scss @@ -0,0 +1,43 @@ +.order-card { + transition: all 0.3s ease; + + &:active { + transform: scale(0.98); + box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1); + } +} + +.status-icon { + width: 20px; + height: 20px; +} + +.status-tag { + &.tag-0 { + color: #ff3d60; + } + + &.tag-1 { + color: #f00044; + } + + &.tag-2 { + color: #40ae36; + } + + &.tag-3 { + color: #808389; + } + + &.tag-4 { + color: #2d91ff; + } + + &.tag-5 { + color: #808389; + } + + &.tag-6 { + color: #fd8702; + } +} diff --git a/src/pages-service/order/components/OrderInfo/index.vue b/src/pages-service/order/components/OrderInfo/index.vue new file mode 100644 index 0000000..26160a5 --- /dev/null +++ b/src/pages-service/order/components/OrderInfo/index.vue @@ -0,0 +1,208 @@ + + + + + diff --git a/src/pages-service/order/components/OrderInfo/styles/index.scss b/src/pages-service/order/components/OrderInfo/styles/index.scss new file mode 100644 index 0000000..a9b9f70 --- /dev/null +++ b/src/pages-service/order/components/OrderInfo/styles/index.scss @@ -0,0 +1,156 @@ +// 颜色系统 +$order-bg-color: #fff; +$text-color-primary: #333; +$text-color-secondary: #666; +$text-color-accent: #ff5722; +$button-color: #00a6ff; +$button-disabled-color: #ccc; +$border-color: #ececec; +$shadow-color: rgba(0, 0, 0, 0.08); + +// 尺寸和间距 +$order-border-radius: 10px; +$order-padding: 16px 18px; +$spacing-small: 8px; +$spacing-medium: 10px; +$spacing-large: 20px; +$button-height: 42px; + +// 字体系统 +$font-size-small: 12px; +$font-size-medium: 14px; +$font-size-large: 18px; +$font-weight-normal: 400; +$font-weight-medium: 500; +$font-weight-semibold: 600; + +// 过渡动画 +$transition-fast: 0.2s ease; +$transition-normal: 0.3s ease; + +.order-info { + background-color: $order-bg-color; + border-radius: $order-border-radius; + padding: $order-padding; + box-shadow: 0 2px 8px $shadow-color; + transition: box-shadow $transition-normal; + + &:hover { + box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); + } + + // 订单项样式,优化布局和视觉层次 + .order-item { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: $spacing-small; + padding: 4px 0; + transition: background-color $transition-fast; + + .label { + font-size: $font-size-small; + color: $text-color-secondary; + font-weight: $font-weight-normal; + flex-shrink: 0; + line-height: 1.4; + } + + .value { + font-size: $font-size-small; + color: $text-color-primary; + font-weight: $font-weight-normal; + text-align: right; + word-break: break-word; + overflow-wrap: break-word; + line-height: 1.4; + max-width: 60%; + } + + // 金额特殊样式,增强视觉重点 + &.amount { + .label { + color: $text-color-primary; + font-weight: $font-weight-medium; + font-size: $font-size-medium; + } + + .value { + color: $text-color-accent; + font-size: $font-size-large; + font-weight: $font-weight-semibold; + max-width: none; + + // 货币符号样式 + &::before { + content: "¥"; + margin-right: 2px; + font-size: 11px; + } + } + } + } + + .line { + border-bottom: 1px solid $border-color; + margin: $spacing-medium 0; + height: 0; + opacity: 0.6; + transition: opacity $transition-fast; + + &:hover { + opacity: 1; + } + } + + .reserve-button { + width: 100%; + background: linear-gradient(179deg, #00a6ff 0%, #0256ff 100%); + color: #fff; + border: none; + padding: 0; + display: flex; + align-items: center; + justify-content: center; + border-radius: $uni-border-radius-50px; + height: $button-height; + font-size: $font-size-medium; + font-weight: $font-weight-medium; + margin-top: $spacing-large; + position: relative; + overflow: hidden; + letter-spacing: 0.5px; + + &:disabled { + background: $button-disabled-color; + cursor: not-allowed; + transform: none; + box-shadow: none; + + &::before { + display: none; + } + } + + // 加载状态样式 + &.loading { + background: $button-disabled-color; + cursor: not-allowed; + transform: none; + box-shadow: none; + position: relative; + + &::before { + display: none; + } + } + } + + .feedback { + text-align: center; + font-size: $font-size-medium; + color: $text-color-primary; + font-weight: $font-weight-normal; + margin-top: $spacing-medium; + } +} diff --git a/src/pages-service/order/list.vue b/src/pages-service/order/list.vue new file mode 100644 index 0000000..614c21a --- /dev/null +++ b/src/pages-service/order/list.vue @@ -0,0 +1,60 @@ + + + + + diff --git a/src/pages.json b/src/pages.json index bcba4c6..6873c2e 100644 --- a/src/pages.json +++ b/src/pages.json @@ -36,6 +36,17 @@ } } ] + }, + { + "root": "pages-service", + "pages": [ + { + "path": "order/list", + "style": { + "navigationStyle": "custom" + } + } + ] } ], "globalStyle": { diff --git a/src/pages/index/components/module/MoreService/index.vue b/src/pages/index/components/module/MoreService/index.vue index ae24fc9..ad76fae 100644 --- a/src/pages/index/components/module/MoreService/index.vue +++ b/src/pages/index/components/module/MoreService/index.vue @@ -76,7 +76,7 @@ const list = ref([ content: "查看服务工单、进度与处理情况", btnText: "去查看", type: Command.myWorkOrder, - path: "/pages/myWorkOrder/index", + path: "/pages-service/order/list", }, { icon: "https://oss.nianxx.cn/mp/static/version_101/home/fkyj.png",