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-07-29 14:47:41 +08:00
parent 8f2ce34669
commit 49fa3e5034
9 changed files with 55 additions and 147 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
pages/order/components/CustomNoMore/images/no_more.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 78 KiB

14
pages/order/components/CustomNoMore/index.vue
View File

@@ -1,14 +0,0 @@
<template>
<view class="nomore">
<image
class="nomore-image"
mode="aspectFit"
src="./images/no_more.png"
></image>
<text class="nomore-text">已经到达宇宙尽头啦~</text>
</view>
</template>
<style scoped>
@import "./styles/index.scss";
</style>

17
pages/order/components/CustomNoMore/styles/index.scss
View File

@@ -1,17 +0,0 @@
.nomore {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: column;
align-items: center;
padding: 10px 0;
}
.nomore-image {
width: 100px;
height: 65px;
}
.nomore-text {
margin-top: 5px;
font-size: 12px;
color: #222963;
}

BIN
pages/order/components/CustomRefresher/images/refresher_loading.gif
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 97 KiB

39
pages/order/components/CustomRefresher/index.vue
View File

@@ -1,39 +0,0 @@
<!-- z-paging自定义的下拉刷新view -->
<template>
<view class="refresher-container">
<image
class="refresher-image"
mode="aspectFit"
src="./images/refresher_loading.gif"
></image>
<text class="refresher-text">{{ statusText }}</text>
</view>
</template>
<script setup>
import { computed } from "vue";
const props = defineProps({
status: {
type: String,
default: "",
},
});
const statusText = computed(() => {
// 这里可以做i18n国际化相关操作，可以通过uni.getLocale()获取当前语言(具体操作见i18n-demo.vue);
// 获取到当前语言之后，就可以自定义不同语言下的展示内容了
const statusTextMap = {
default: "哎呀，用点力继续下拉！",
"release-to-refresh": "拉疼我啦，松手刷新~~",
loading: "正在努力刷新中...",
complete: "刷新成功啦~",
};
return statusTextMap[this.status];
});
</script>
<style scoped lang="scss">
@import "./styles/index.scss";
</style>

21
pages/order/components/CustomRefresher/styles/index.scss
View File

@@ -1,21 +0,0 @@
.refresher-container {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
height: 150rpx;
flex-direction: column;
align-items: center;
justify-content: center;
}
.refresher-image {
margin-top: 10rpx;
height: 45px;
width: 45px;
}
.refresher-text {
margin-top: 10rpx;
font-size: 24rpx;
color: #666666;
}

21
pages/order/components/OrderCard/index.vue
View File

@@ -4,13 +4,13 @@
<view class="card-header">
<view class="status-info">
<image class="status-icon" src="./images/service.png"></image>
<view class="order-title">{{ orderData.title }}</view>
<view class="order-title">{{ orderData.visitorName }}</view>
</view>
<view
v-if="orderData.status !== 'pending'"
:class="['status-tag', `tag-${orderData.status}`]"
:class="['status-tag', `tag-${orderData.orderStatus}`]"
>
{{ getStatusText(orderData.status) }}
{{ getStatusText(orderData.orderStatus) }}
</view>
</view>
@@ -25,7 +25,7 @@
</view>
<view class="info-row">
<text class="label">联系房客：</text>
<text class="value">{{ orderData.contactName }}</text>
<text class="value">{{ orderData.visitorName }}</text>
</view>
<view class="info-row">
<text class="label">联系电话：</text>
@@ -55,7 +55,7 @@ const props = defineProps({
createTime: "",
contactName: "",
contactPhone: "",
status: "pending", // pending-待处理, completed-已完成, cancelled-已取消
orderStatus: "pending", // pending-待处理, completed-已完成, cancelled-已取消
}),
},
});
@@ -66,10 +66,13 @@ const emit = defineEmits(["click", "call", "complete"]);
// 获取状态文本
const getStatusText = (status) => {
const statusMap = {
pending: "待处理",
completed: "已完成",
cancelled: "已取消",
processing: "处理中",
0: "待支付",
1: "待确认",
2: "待使用",
3: "已取消",
4: "退款中",
5: "已关闭",
6: "已完成",
};
return statusMap[status] || "未知状态";
};

53
pages/order/components/OrderCard/styles/index.scss
View File

@@ -1,7 +1,7 @@
.order-card {
background-color: #fff;
border-radius: 6px 6px 12px 12px;
box-shadow: 0px 3px 8px 0 rgba(0,0,0,0.12);
box-shadow: 0px 3px 8px 0 rgba(0, 0, 0, 0.12);
margin: 12px;
transition: all 0.3s ease;
@@ -46,37 +46,42 @@
.status-tag {
box-sizing: border-box;
padding: 6px 16px;
border-radius: 20px ;
border-radius: 20px;
font-size: 12px;
font-weight: 500;
&.tag-pending {
background-color: #FFF7E6;
color: #FF8C00;
border: 1px solid #FFD591;
&.tag-1 {
color: #f00044;
border: 1px solid #f00044;
}
&.tag-completed {
background-color: #F6FFED;
color: #52C41A;
border: 1px solid #B7EB8F;
&.tag-2 {
color: #ff8c00;
border: 1px solid #ffd591;
}
&.tag-cancelled {
background-color: #F5F5F5;
&.tag-3 {
color: #818181;
border: 1px solid #818181;
}
&.tag-4 {
color: #00a6ff;
border: 1px solid #00a6ff;
}
&.tag-6 {
color: #52c41a;
border: 1px solid #b7eb8f;
}
&.tag-5 {
background-color: #f5f5f5;
color: #999999;
border: 1px solid #D9D9D9;
}
&.tag-processing {
background-color: #E6F7FF;
color: #1890FF;
border: 1px solid #91D5FF;
border: 1px solid #d9d9d9;
}
}
.card-content {
padding: 16px;
}
@@ -112,16 +117,16 @@
width: 280px;
height: 42px;
border-radius: 50px;
border: 2px solid #FFCA70;
border: 2px solid #ffca70;
font-size: 14px;
font-weight: 500;
transition: all 0.3s ease;
background: linear-gradient( 179deg, #FFB100 0%, #FF7F19 100%);
background: linear-gradient(179deg, #ffb100 0%, #ff7f19 100%);
color: #ffffff;
margin: 0 auto;
&:hover {
background: linear-gradient(135deg, #FF7A00 0%, #FF6600 100%);
background: linear-gradient(135deg, #ff7a00 0%, #ff6600 100%);
}
&:active {

19
pages/order/list.vue
View File

@@ -2,6 +2,9 @@
<z-paging
ref="paging"
v-model="dataList"
use-virtual-list
:force-close-inner-list="true"
cell-height-mode="dynamic"
safe-area-inset-bottom
@query="queryList"
>
@@ -21,14 +24,6 @@
<CustomEmpty statusText="您暂无订单" />
</template>
<template #refresher="{ refresherStatus }">
<CustomRefresher :status="refresherStatus" />
</template>
<template #loadingMoreNoMore>
<CustomNoMore />
</template>
<OrderCard
v-for="(item, index) in dataList"
:key="item.id || index"
@@ -46,8 +41,6 @@ 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 CustomRefresher from "./components/CustomRefresher/index.vue";
import CustomNoMore from "./components/CustomNoMore/index.vue";
import { userOrderList, userWorkOrderList } from "@/request/api/OrderApi";
// Tab配置
@@ -78,14 +71,12 @@ const queryList = async (pageNum, pageSize) => {
if (res && res.data && res.data.records) {
const records = res.data.records;
const hasMore = pageNum < res.data.pages; // 判断是否还有更多数据
// 完成数据加载，第二个参数表示是否还有更多数据
paging.value.complete(records, !hasMore);
console.log("数据加载完成", records.length, "条记录，hasMore:", hasMore);
paging.value.complete(records);
} else {
// 没有数据
paging.value.complete([], true);
paging.value.complete([]);
}
} catch (error) {
console.error("查询列表失败:", error);