zoujing/YGChatCS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 我的订单样式调整

Browse Source
This commit is contained in:
duanshuwen
2025-10-16 20:29:34 +08:00
parent afb124ee19
commit 11aa958077
11 changed files with 143 additions and 246 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
src/pages-order/order/components/OrderCard/InfoRow.vue
View File

@@ -1,7 +1,7 @@
<template>
<view class="info-row">
<text class="label">{{ label }}：</text>
<text class="value">{{ value }}</text>
<view class="info-row flex items-center mt-8">
<text class="label font-size-12 color-99A0AE">{{ label }}：</text>
<text class="value flex-full font-size-12 color-99A0AE">{{ value }}</text>
</view>
</template>
@@ -23,23 +23,4 @@ const props = defineProps({
});
</script>
<style scoped lang="scss">
.info-row {
display: flex;
align-items: center;
margin-bottom: 10px;
}
.label {
font-size: $uni-font-size-sm;
color: #666666;
flex-shrink: 0;
margin-right: 8px;
}
.value {
font-size: $uni-font-size-base;
color: $uni-text-color;
flex: 1;
}
</style>
<style scoped lang="scss"></style>

23
src/pages-order/order/components/OrderCard/OrderCardContent.vue
View File

@@ -1,5 +1,15 @@
<template>
<view class="card-content">
<view class="card-content border-box pt-12">
<view class="flex items-center justify-between">
<view
class="left flex-full font-size-14 line-height-20 color-171717 mr-12"
>
{{ orderData.commodityName }}
</view>
<view class="right font-size-18 font-bold line-height-20 color-525866">
{{ orderData.orderAmt }}
</view>
</view>
<!-- 动态渲染信息行 -->
<InfoRow
v-for="item in displayItems"
@@ -23,7 +33,6 @@ const ORDER_TYPES = {
// 标签常量
const LABELS = {
ORDER_ID: "订单编号",
CHECK_IN_TIME: "入住时间",
VISITOR_NAME: "游客姓名",
CONTACT_PHONE: "联系电话",
@@ -74,7 +83,6 @@ const displayItems = computed(() => {
switch (orderType) {
case ORDER_TYPES.HOTEL:
return [
{ label: LABELS.ORDER_ID, value: orderData.orderId },
{
label: LABELS.CHECK_IN_TIME,
value:
@@ -95,7 +103,6 @@ const displayItems = computed(() => {
case ORDER_TYPES.TICKET:
case ORDER_TYPES.OTHER:
return [
{ label: LABELS.ORDER_ID, value: orderData.orderId },
{
label: LABELS.QUANTITY,
value: formatQuantity(orderData.commodityAmount),
@@ -110,7 +117,11 @@ const displayItems = computed(() => {
</script>
<style scoped lang="scss">
.card-content {
padding: 16px;
.right {
&::before {
content: "￥";
font-weight: 500;
font-size: 16px;
}
}
</style>

50
src/pages-order/order/components/OrderCard/index.vue
View File

@@ -1,25 +1,20 @@
<template>
<view class="order-card" @click="handleCardClick">
<view
class="order-card bg-white border-box p-12 rounded-12 m-12"
@click="handleCardClick"
>
<!-- 卡片头部 -->
<view class="card-header">
<view class="status-info">
<image class="status-icon" :src="getStatusIcon()"></image>
<view class="order-title">
{{ orderData.workOrderTypeName || orderData.commodityName }}
<view class="card-header flex items-center">
<view class="status-info flex items-center flex-full">
<image class="status-icon mr-4" :src="getStatusIcon()" />
<view class="order-title font-size-14 line-height-20 color-525866">
{{ getOrderTypeName() }}
</view>
<uni-icons
class="arrow-icon"
v-if="props.orderData.orderType !== undefined"
type="right"
color="#999"
size="16"
/>
</view>
<view
v-if="orderData.status !== 'pending'"
:class="[
'status-tag',
'status-tag font-size-12',
`tag-${orderData.orderStatus || orderData.workOrderStatus}`,
]"
>
@@ -27,9 +22,6 @@
</view>
</view>
<!-- 分割线 -->
<Divider />
<!-- 卡片内容 -->
<OrderCardContent :order-data="orderData" />
</view>
@@ -37,12 +29,8 @@
<script setup>
import { defineProps } from "vue";
import Divider from "@/components/Divider/index.vue";
import OrderCardContent from "./OrderCardContent.vue";
import serviceIcon from "./images/service.png";
import ticketIcon from "./images/ticket.png";
import hotelIcon from "./images/hotel.png";
import foodIcon from "./images/food.png";
// Props
const props = defineProps({
@@ -71,9 +59,16 @@ const emit = defineEmits(["click", "call"]);
// 图标映射
const ICON_MAP = {
0: hotelIcon, // 酒店订单
1: ticketIcon, // 门票订单
2: foodIcon, // 其他订单
0: "https://oss.nianxx.cn/mp/static/version_101/order/room.png", // 酒店订单
1: "https://oss.nianxx.cn/mp/static/version_101/order/ticket.png", // 门票订单
2: "https://oss.nianxx.cn/mp/static/version_101/order/food.png", // 餐饮
};
// 订单类型映射
const ORDER_NAME_MAP = {
0: "房间",
1: "门票",
2: "餐饮",
};
// 获取状态图标
@@ -86,6 +81,11 @@ const getStatusIcon = () => {
return ICON_MAP[props.orderData.orderType] || serviceIcon;
};
// 获取订单类型名称
const getOrderTypeName = () => {
return ORDER_NAME_MAP[props.orderData.orderType] || "其他订单";
};
// 获取状态文本
const getStatusText = (status) => {
// 工单情况：orderType 为 undefined

52
src/pages-order/order/components/OrderCard/styles/index.scss
View File

@@ -1,91 +1,43 @@
.order-card {
background-color: #fff;
border-radius: 6px 6px 12px 12px;
box-shadow: 0px 3px 8px 0 rgba(0, 0, 0, 0.12);
margin: 12px;
transition: all 0.3s ease;
mask: radial-gradient(circle at 0 54px, #0000 6px, red 0),
radial-gradient(circle at right 54px, #0000 6px, red 0);
mask-size: 50%;
mask-position: 0, 100%;
mask-repeat: no-repeat;
&:active {
transform: scale(0.98);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}
&.expired {
filter: grayscale(100%);
}
}
.card-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 14px 14px 12px 16px;
}
.status-info {
display: flex;
align-items: center;
flex: 1;
}
.status-icon {
width: 20px;
height: 20px;
margin-right: 8px;
flex-shrink: 0;
}
.order-title {
font-size: $uni-font-size-base;
font-weight: 500;
color: $uni-text-color;
line-height: 1.4;
}
.status-tag {
box-sizing: border-box;
padding: 6px 16px;
border-radius: 20px;
font-size: $uni-font-size-sm;
font-weight: 500;
&.tag-0 {
color: #00a6ff;
border: 1px solid #00a6ff;
color: #ff3d60;
}
&.tag-1 {
color: #f00044;
border: 1px solid #f00044;
}
&.tag-2 {
color: #40ae36;
border: 1px solid #40ae36;
}
&.tag-3 {
color: #808389;
border: 1px solid #808389;
}
&.tag-4 {
color: #0256ff;
border: 1px solid #0256ff;
color: #2d91ff;
}
&.tag-5 {
color: #808389;
border: 1px solid #808389;
}
&.tag-6 {
color: #fd8702;
border: 1px solid #fd8702;
}
}