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;
}
}

43
src/pages-order/order/list.vue
View File

@@ -1,5 +1,6 @@
<template>
<z-paging
bg-color="linear-gradient(180deg, #D9EEFF 0%, #F5F7FA 100%) 0 86px / 100% 100px no-repeat"
ref="paging"
v-model="dataList"
use-virtual-list
@@ -9,15 +10,7 @@
@query="queryList"
>
<template #top>
<TopNavBar titleAlign="left">
<template #title>
<Tabs
:tabs="tabList"
:defaultActive="currentTabIndex"
@change="handleTabChange"
/>
</template>
</TopNavBar>
<TopNavBar title="全部订单" />
</template>
<template #empty>
@@ -36,35 +29,16 @@
<script setup>
import { ref } from "vue";
import TopNavBar from "@/components/TopNavBar/index.vue";
import Tabs from "./components/Tabs/index.vue";
import OrderCard from "./components/OrderCard/index.vue";
import CustomEmpty from "./components/CustomEmpty/index.vue";
import { userOrderList, userWorkOrderList } from "@/request/api/OrderApi";
import { userOrderList } from "@/request/api/OrderApi";
// Tab配置
const tabList = ref([
{ label: "全部订单", value: "all" },
{ label: "服务工单", value: "service" },
]);
// 当前状态
const currentTabIndex = ref(0);
const dataList = ref([]);
const paging = ref(null);
const queryList = async (pageNum, pageSize) => {
try {
let apiCall;
// 根据当前Tab选择不同的API
if (currentTabIndex.value === 0) {
// 全部订单
apiCall = userOrderList({ pageNum, pageSize });
} else {
// 服务工单
apiCall = userWorkOrderList({ pageNum, pageSize });
}
const res = await apiCall;
const res = await userOrderList({ pageNum, pageSize });
console.log("API响应:", res);
if (res && res.data && res.data.records) {
@@ -83,15 +57,6 @@ const queryList = async (pageNum, pageSize) => {
}
};
// Tab切换处理
const handleTabChange = ({ index }) => {
console.log("Tab切换到:", index);
currentTabIndex.value = index;
// 清空当前数据并重新加载
dataList.value = [];
paging.value.reload();
};
// 处理订单点击
const handleOrderClick = ({ orderId }) => {
// 这里可以添加订单详情跳转逻辑