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

2
src/App.vue
View File

@@ -23,7 +23,7 @@ page,
body,
#app {
font-family: PingFang SC, PingFang SC;
background-color: #e9f3f7;
background-color: #f5f7fa;
height: 100vh;
width: 100vw;
}

39
src/components/TopNavBar/index.vue
View File

@@ -7,18 +7,33 @@
></view>
<!-- 导航栏内容 -->
<view class="nav-bar-content" :style="{ height: navBarHeight + 'px' }">
<view
class="flex flex-items-center flex-justify-between border-box pl-8 pr-8"
:style="{ height: navBarHeight + 'px' }"
>
<!-- 左侧返回按钮 -->
<view class="nav-bar-left" @click="handleBack" v-if="showBack">
<view
class="nav-bar-left flex flex-items-center flex-justify-center"
v-if="showBack"
@click="handleBack"
>
<uni-icons type="left" size="20" :color="backIconColor" />
</view>
<!-- 中间标题区域 -->
<view :class="['nav-bar-center', `nav-bar-center--${titleAlign}`]">
<view
:class="[
'nav-bar-center flex flex-items-center flex-justify-center',
`nav-bar-center--${titleAlign}`,
]"
>
<slot name="title">
<text class="nav-bar-title" :style="{ color: titleColor }">{{
title
}}</text>
<text
class="font-size-17 font-500 color-000"
:style="{ color: titleColor }"
>
{{ title }}
</text>
</slot>
</view>
@@ -45,11 +60,6 @@ const props = defineProps({
type: Boolean,
default: false,
},
// 是否添加阴影
shadow: {
type: Boolean,
default: true,
},
// 是否显示返回按钮
showBack: {
type: Boolean,
@@ -58,17 +68,17 @@ const props = defineProps({
// 背景颜色
backgroundColor: {
type: String,
default: "#ffffff",
default: "#d9eeff",
},
// 标题颜色
titleColor: {
type: String,
default: "#333333",
default: "#000",
},
// 返回按钮图标颜色
backIconColor: {
type: String,
default: "#333333",
default: "#000",
},
// 是否隐藏状态栏占位
hideStatusBar: {
@@ -114,7 +124,6 @@ const navBarClass = computed(() => {
"top-nav-bar",
{
"top-nav-bar--fixed": props.fixed,
"has-shadow": props.shadow,
},
];
});

109
src/components/TopNavBar/styles/index.scss
View File

@@ -1,11 +1,7 @@
// TopNavBar 组件样式
.top-nav-bar {
width: 100%;
background-color: $uni-bg-color;
&.has-shadow {
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1);
}
background-color: #d9eeff;
&--fixed {
position: fixed;
@@ -14,86 +10,35 @@
right: 0;
z-index: 999;
}
}
.nav-bar-content {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 16px;
position: relative;
.nav-bar-left,
.nav-bar-right {
width: 30px;
height: 30px;
}
.nav-bar-left {
display: flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
position: absolute;
left: 8px;
top: 50%;
transform: translateY(-50%);
z-index: 2;
cursor: pointer;
transition: opacity 0.2s ease;
.nav-bar-center {
flex: 1;
height: 30px;
padding: 0 20px; // 为左右按钮留出空间
&:hover {
opacity: 0.7;
}
// 居中对齐（默认）
&--center {
justify-content: center;
&:active {
opacity: 0.5;
}
.nav-bar-title {
text-align: center;
}
}
.nav-bar-center {
flex: 1;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
padding: 0 20px; // 为左右按钮留出空间
// 左对齐
&--left {
justify-content: flex-start;
padding-left: 20px; // 为返回按钮留出更多空间
// 居中对齐（默认）
&--center {
justify-content: center;
.nav-bar-title {
text-align: center;
}
}
// 左对齐
&--left {
justify-content: flex-start;
padding-left: 20px; // 为返回按钮留出更多空间
.nav-bar-title {
text-align: left;
}
}
.nav-bar-title {
font-size: 18px;
font-weight: 500;
color: $uni-text-color;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
line-height: 1.4;
}
}
.nav-bar-right {
display: flex;
align-items: center;
justify-content: center;
min-width: 30px;
height: 30px;
position: absolute;
right: 8px;
top: 50%;
transform: translateY(-50%);
z-index: 2;
.nav-bar-title {
text-align: left;
}
}
}
@@ -102,11 +47,3 @@
.page-with-fixed-navbar {
padding-top: calc(var(--status-bar-height, 44px) + 44px);
}
// 安全区域适配
.top-nav-bar {
padding-left: constant(safe-area-inset-left);
padding-left: env(safe-area-inset-left);
padding-right: constant(safe-area-inset-right);
padding-right: env(safe-area-inset-right);
}

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 }) => {
// 这里可以添加订单详情跳转逻辑

16
src/pages/index/components/module/MoreService/index.vue
View File

@@ -5,7 +5,7 @@
<view class="title flex-full font-size-17 color-000 font-500"
>更多服务</view
>
<uni-icons type="close" size="20" color="#CACFD8" @click="close" />
<uni-icons type="close" size="24" color="#CACFD8" @click="close" />
</view>
<view class="list bg-white border-box pl-20 pr-20">
@@ -27,6 +27,7 @@
</view>
<view
class="right border-box font-size-12 color-white line-height-16"
@click="handleClick(item)"
>
{{ item.btnText }}
</view>
@@ -49,6 +50,7 @@ const list = ref([
content: "预定门票、房间、餐食",
btnText: "去预定",
type: "quickBooking",
path: "/pages/quickBooking/index",
},
{
icon: "https://oss.nianxx.cn/mp/static/version_101/home/tsfx.png",
@@ -56,6 +58,7 @@ const list = ref([
content: "发现景点、活动、特色内容",
btnText: "去探索",
type: "discovery",
path: "/pages/discovery/index",
},
{
icon: "https://oss.nianxx.cn/mp/static/version_101/home/mddd.png",
@@ -63,6 +66,7 @@ const list = ref([
content: "查看门票、住宿、餐饮等订单",
btnText: "去查看",
type: "myOrder",
path: "/pages-order/order/list",
},
{
icon: "https://oss.nianxx.cn/mp/static/version_101/home/wdgd.png",
@@ -70,6 +74,7 @@ const list = ref([
content: "查看服务工单、进度与处理情况",
btnText: "去查看",
type: "myWorkOrder",
path: "/pages/myWorkOrder/index",
},
{
icon: "https://oss.nianxx.cn/mp/static/version_101/home/fkyj.png",
@@ -77,6 +82,7 @@ const list = ref([
content: "提交使用问题、建议与需求",
btnText: "去反馈",
type: "feedback",
path: "/pages/feedback/index",
},
]);
@@ -88,6 +94,14 @@ const close = () => {
popup.value && popup.value.close();
};
const handleClick = (item) => {
if (item.path) {
uni.navigateTo({ url: item.path });
}
close();
};
// 接收更多服务
uni.$on("SHOW_MORE_POPUP", () => {
open();

20
src/static/scss/margin.scss
View File

@@ -3,6 +3,18 @@
margin: 4px;
}
.mr-4 {
margin-right: 4px;
}
.m-8 {
margin: 8px;
}
.mt-8 {
margin-top: 8px;
}
.mr-8 {
margin-right: 8px;
}
@@ -11,10 +23,18 @@
margin-bottom: 8px;
}
.mt-10 {
margin-top: 10px;
}
.mb-10 {
margin-bottom: 10px;
}
.m-12 {
margin: 12px;
}
.mb-12 {
margin-bottom: 12px;
}

8
src/static/scss/padding.scss
View File

@@ -7,6 +7,14 @@
padding-top: 8px;
}
.pl-8 {
padding-left: 8px;
}
.pr-8 {
padding-right: 8px;
}
.pb-8 {
padding-bottom: 8px;
}