huangzhenbao/medical-mall
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

添加新页面

Browse Source
This commit is contained in:
not-like-juvenile
2026-01-23 17:13:39 +08:00
parent d5a3a4e8f0
commit b1c845d571
9 changed files with 2229 additions and 557 deletions
Download Patch File Download Diff File Expand all files Collapse all files

637
pages/mall/delivery/order-history.uvue
View File

@@ -1,311 +1,172 @@
<template>
<view class="earnings-container">
<view class="order-history-container">
<!-- 顶部导航栏 -->
<view class="page-header">
<!-- 左上角：返回主页按钮（箭头+文字 垂直排列） -->
<view class="nav-left" @click="goBackToHome">
<text class="nav-icon">←</text>
<text class="nav-title">返回主页</text>
</view>
<view class="nav-left" @click="goBackToHome">
<text class="nav-icon">←</text>
<text class="nav-title">返回主页</text>
</view>
<!-- 页面标题居中 -->
<text class="page-title">收入明细</text>
<text class="page-title">历史订单</text>
<!-- 右上角留空 -->
<view class="nav-right"></view>
</view>
<!-- 顶部统计卡片 -->
<view class="stats-section">
<view class="stat-card">
<text class="stat-value">¥{{ totalEarnings }}</text>
<text class="stat-label">总收入</text>
</view>
<view class="stat-card">
<text class="stat-value">¥{{ totalUserTips }}</text>
<text class="stat-label">用户打赏</text>
</view>
<view class="stat-card">
<text class="stat-value">¥{{ totalMerchantTips }}</text>
<text class="stat-label">商家打赏</text>
</view>
<view class="stat-card">
<text class="stat-value">{{ totalOrders }}</text>
<text class="stat-label">总订单数</text>
</view>
</view>
<!-- 主要内容区域 -->
<view class="content-wrapper">
<!-- 订单收入列表 -->
<view v-if="orderEarningsList.length > 0" class="order-earnings-list">
<view v-for="order in orderEarningsList" :key="order.order_no" class="order-earnings-item">
<!-- 订单总收入 -->
<view class="order-total">
<text class="order-total-label">订单收入：</text>
<text class="order-total-amount">¥{{ order.totalAmount.toFixed(2) }}</text>
<!-- 订单列表 -->
<view v-if="orderList.length > 0" class="order-list">
<view v-for="order in orderList" :key="order.id" class="order-item">
<view class="order-header">
<text class="order-id">订单号: {{ order.order_no }}</text>
<text class="order-status" :class="getOrderStatusClass(order.status)">{{ getOrderStatusText(order.status) }}</text>
</view>
<!-- 订单基础信息 -->
<view class="order-info">
<text class="info-item">订单号: {{ order.order_no }}</text>
<text class="info-item">时间: {{ formatTime(order.date) }}</text>
<text class="info-item" v-if="order.distance !== undefined">距离: {{ order.distance }}km</text>
</view>
<!-- 收入明细 -->
<view class="earning-details">
<view v-for="detail in order.details" :key="detail.id" class="detail-item">
<text class="detail-type">{{ getSourceText(detail.source) }}</text>
<text class="detail-amount">+¥{{ detail.amount.toFixed(2) }}</text>
<view class="order-addresses">
<view class="address-item">
<text class="address-icon">📍</text>
<view class="address-info">
<text class="address-label">取货地址</text>
<text class="address-text">{{ order.pickup_address.detail }}</text>
<text class="contact-info">联系人: {{ order.pickup_contact.name }} {{ order.pickup_contact.phone }}</text>
</view>
</view>
<view class="address-line"></view>
<view class="address-item">
<text class="address-icon">🏠</text>
<view class="address-info">
<text class="address-label">收货地址</text>
<text class="address-text">{{ order.delivery_address.detail }}</text>
<text class="contact-info">联系人: {{ order.delivery_contact.name }} {{ order.delivery_contact.phone }}</text>
</view>
</view>
</view>
<view class="order-details">
<text class="order-info">配送费: ¥{{ order.delivery_fee }}</text>
<text class="order-info">预计距离: {{ order.distance }}km</text>
<text class="order-info">预计时间: {{ order.estimated_time }}分钟</text>
</view>
<view class="order-actions">
<button class="action-btn primary" @click="viewOrderDetail(order.id)">查看详情</button>
</view>
</view>
</view>
<!-- 无数据时显示 -->
<view v-else class="no-data">
<text class="no-data-text">暂无收入记录</text>
</view>
<!-- 加载更多按钮 -->
<view v-if="hasMore" class="load-more">
<button @click="loadMoreEarnings" class="load-more-btn">加载更多</button>
<text class="no-data-text">暂无历史订单</text>
</view>
</view>
</view>
</template>
<script lang="uts">
import type { DeliveryTaskType } from '@/types/mall-types.uts'
export default {
data() {
return {
// 统计数据
totalEarnings: '266.10',
totalUserTips: '12.00',
totalMerchantTips: '8.50',
totalOrders: 8,
// 按订单聚合后的收入数据
orderEarningsList: [] as Array<OrderEarningType>,
allOrderEarnings: [] as Array<OrderEarningType>,
pageSize: 10,
currentPage: 1,
// 模拟历史订单数据
orderList: [] as Array<DeliveryTaskType>
}
},
onLoad() {
this.loadAllEarnings()
this.loadOrderHistory()
},
computed: {
hasMore(): boolean {
return this.allOrderEarnings.length > this.orderEarningsList.length
}
onShow() {
// 页面每次显示时都检查是否有新的已完成订单
this.checkForNewCompletedOrder()
},
methods: {
// 加载所有收入明细并按订单聚合
loadAllEarnings() {
const rawEarnings = [
// 配送费
{
id: '1',
date: '2025-01-08T14:30:00Z',
amount: 8.5,
source: 'delivery_fee',
order_no: 'D202501081234',
distance: 12.5
},
// 检查是否有新的已完成订单
checkForNewCompletedOrder() {
const completedOrderFromStorage = uni.getStorageSync('completed_order_for_history')
if (completedOrderFromStorage) {
// 如果有，将其添加到订单列表的开头
// 检查是否已经存在于列表中，避免重复添加
const exists = this.orderList.some(order => order.id === completedOrderFromStorage.id)
if (!exists) {
this.orderList.unshift(completedOrderFromStorage)
}
// 清除本地存储，防止下次进入页面时重复添加
uni.removeStorageSync('completed_order_for_history')
}
},
// 加载历史订单
loadOrderHistory() {
// TODO: 调用API获取历史订单列表
this.orderList = [
{
id: '2',
date: '2025-01-08T15:00:00Z',
amount: 12.0,
source: 'delivery_fee',
order_no: 'D202501081235',
distance: 8.2
},
// 用户打赏
{
id: '3',
date: '2025-01-08T15:30:00Z',
amount: 5.0,
source: 'user_tip',
order_no: 'D202501081236'
},
{
id: '4',
date: '2025-01-08T16:00:00Z',
amount: 7.0,
source: 'user_tip',
order_no: 'D202501081237'
},
// 商家打赏
{
id: '5',
date: '2025-01-08T16:30:00Z',
amount: 3.5,
source: 'merchant_tip',
order_no: 'D202501081238'
},
{
id: '6',
date: '2025-01-08T17:00:00Z',
amount: 5.0,
source: 'merchant_tip',
order_no: 'D202501081239'
},
{
id: '7',
date: '2025-01-08T17:30:00Z',
amount: 6.0,
source: 'delivery_fee',
order_no: 'D202501081240',
distance: 3.5
},
{
id: '8',
date: '2025-01-08T18:00:00Z',
amount: 10.0,
source: 'user_tip',
order_no: 'D202501081241'
},
{
id: '9',
date: '2025-01-08T18:30:00Z',
amount: 8.5,
source: 'merchant_tip',
order_no: 'D202501081242'
},
{
id: '10',
date: '2025-01-08T19:00:00Z',
amount: 12.0,
source: 'delivery_fee',
order_no: 'D202501081243',
distance: 5.0
},
{
id: '11',
date: '2025-01-08T19:30:00Z',
amount: 5.0,
source: 'user_tip',
order_no: 'D202501081244'
},
{
id: '12',
date: '2025-01-08T20:00:00Z',
amount: 3.5,
source: 'merchant_tip',
order_no: 'D202501081245'
status: 5, // 已完成
pickup_address: {
detail: '福田区购物公园',
area: '购物公园'
},
delivery_address: {
detail: '南山区海岸城',
area: '海岸城'
},
pickup_contact: {
name: '商家联系人',
phone: '138****5678'
},
delivery_contact: {
name: '张先生',
phone: '139****1234'
},
delivery_fee: 12.0,
distance: 8.2,
estimated_time: 25,
created_at: '2025-01-08T15:00:00Z'
}
]
// 按订单号聚合数据
const orderMap = new Map<string, OrderEarningType>()
rawEarnings.forEach(item => {
if (!orderMap.has(item.order_no)) {
orderMap.set(item.order_no, {
order_no: item.order_no,
date: item.date,
distance: item.distance,
totalAmount: 0,
details: []
})
}
const order = orderMap.get(item.order_no)!
order.totalAmount += item.amount
order.details.push(item)
})
/* ---------- 新增：把「配送费」「商家打赏」「用户打赏」三种类型全部补齐 ---------- */
const allTypes: Array<'delivery_fee' | 'merchant_tip' | 'user_tip'> = ['delivery_fee', 'merchant_tip', 'user_tip']
orderMap.forEach(order => {
// 看当前订单已存在的类型
const existSet = new Set(order.details.map(d => d.source))
// 缺哪种就补 0 的占位，保证顺序：配送费 / 商家打赏 / 用户打赏
allTypes.forEach(type => {
if (!existSet.has(type)) {
order.details.push({
id: `${order.order_no}_${type}`, // 唯一 key
date: order.date,
amount: 0,
source: type,
order_no: order.order_no,
distance: order.distance
})
}
})
// 按固定顺序排个序（可选）
order.details.sort((a, b) =>
allTypes.indexOf(a.source as any) - allTypes.indexOf(b.source as any)
)
})
this.allOrderEarnings = Array.from(orderMap.values())
this.calculateTotalStats()
this.loadPage()
// 检查是否有新完成的订单（在加载初始数据后）
this.checkForNewCompletedOrder()
},
// 计算总统计数据
calculateTotalStats() {
let totalEarnings = 0
let totalUserTips = 0
let totalMerchantTips = 0
// 获取订单状态样式
getOrderStatusClass(status: number): string {
switch (status) {
case 1: return 'status-pending'
case 2: return 'status-accepted'
case 3: return 'status-picking'
case 4: return 'status-picked'
case 5: return 'status-delivering' // 这里我们用 '已完成' 的样式
default: return 'status-default'
}
},
this.allOrderEarnings.forEach(order => {
order.details.forEach(detail => {
totalEarnings += detail.amount || 0
if (detail.source === 'user_tip') {
totalUserTips += detail.amount || 0
} else if (detail.source === 'merchant_tip') {
totalMerchantTips += detail.amount || 0
}
})
// 获取订单状态文本
getOrderStatusText(status: number): string {
switch (status) {
case 1: return '待接取'
case 2: return '已接取'
case 3: return '取货中'
case 4: return '已取货'
case 5: return '已完成'
default: return '未知状态'
}
},
// 查看订单详情
viewOrderDetail(orderId: string) {
uni.navigateTo({
url: `/pages/mall/delivery/order-detail?id=${orderId}`
})
this.totalEarnings = totalEarnings.toFixed(2)
this.totalUserTips = totalUserTips.toFixed(2)
this.totalMerchantTips = totalMerchantTips.toFixed(2)
this.totalOrders = this.allOrderEarnings.length
},
// 加载当前页数据
loadPage() {
const start = (this.currentPage - 1) * this.pageSize
const end = start + this.pageSize
const newOrders = this.allOrderEarnings.slice(start, end)
this.orderEarningsList.push(...newOrders)
},
// 加载更多
loadMoreEarnings() {
this.currentPage++
this.loadPage()
},
// 获取收入来源文本
getSourceText(source: string): string {
switch (source) {
case 'delivery_fee': return '配送费'
case 'user_tip': return '用户打赏'
case 'merchant_tip': return '商家打赏'
default: return '其他'
}
},
// 格式化时间
formatTime(timeStr: string): string {
const date = new Date(timeStr)
const now = new Date()
const diff = now.getTime() - date.getTime()
const minutes = Math.floor(diff / (1000 * 60))
if (minutes < 60) {
return `${minutes}分钟前`
} else {
return `${Math.floor(minutes / 60)}小时前`
}
},
// 返回主页
@@ -316,29 +177,10 @@ export default {
}
}
}
// 定义聚合后的订单收入类型
type OrderEarningType = {
order_no: string
date: string
distance?: number
totalAmount: number
details: Array<EarningType>
}
type EarningType = {
id: string
date: string
amount?: number
source: 'delivery_fee' | 'user_tip' | 'merchant_tip' | string
order_no?: string
distance?: number
}
</script>
<style>
/* 全局样式 */
.earnings-container {
<style scoped>
.order-history-container {
background-color: #f5f5f5;
min-height: 100vh;
padding: 20rpx 30rpx;
@@ -361,24 +203,36 @@ type EarningType = {
flex-direction: column;
align-items: center;
cursor: pointer;
padding: 10rpx;
border-radius: 8rpx;
transition: background-color 0.2s ease;
}
.nav-left:hover {
background-color: #f0f0f0; /* 悬停效果 */
}
.nav-left:active {
background-color: #e0e0e0; /* 点击效果 */
}
.nav-icon {
font-size: 36rpx;
margin-right: 10rpx;
color: #333;
margin-bottom: 5rpx;
}
.nav-title {
font-size: 28rpx;
color: #000000; /* 红色 */
color: #333;
font-weight: 500;
text-align: center;
}
.page-title {
font-size: 32rpx;
font-weight: bold;
color: #333; /* 黑色 */
color: #333;
text-align: center;
margin-top: 20rpx; /* 与 nav-left 保持一定距离 */
}
@@ -389,144 +243,169 @@ type EarningType = {
height: 1rpx;
}
.stats-section {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20rpx;
margin: 20rpx;
padding: 20rpx;
background-color: #fff;
border-radius: 16rpx;
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
}
.stat-card {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 20rpx;
background-color: #f8f9fa;
border-radius: 12rpx;
}
.stat-value {
font-size: 36rpx;
font-weight: bold;
color: #4CAF50;
margin-bottom: 10rpx;
}
.stat-label {
font-size: 24rpx;
color: #666;
text-align: center;
}
.content-wrapper {
margin-top: 20rpx;
}
.order-earnings-list {
.order-list {
display: flex;
flex-direction: column;
gap: 20rpx;
}
.order-earnings-item {
.order-item {
background-color: #fff;
border-radius: 16rpx;
padding: 20rpx;
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
border-left: 6rpx solid #4CAF50;
border-left: 6rpx solid #74b9ff;
}
.order-total {
.order-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 15rpx;
margin-bottom: 20rpx;
padding-bottom: 15rpx;
border-bottom: 1rpx solid #f8f9fa;
}
.order-total-label {
.order-id {
font-size: 28rpx;
font-weight: 500;
font-weight: bold;
color: #333;
}
.order-total-amount {
font-size: 32rpx;
font-weight: bold;
color: #4CAF50;
.order-status {
font-size: 24rpx;
padding: 6rpx 12rpx;
border-radius: 20rpx;
font-weight: 500;
}
.status-pending {
background-color: #E3F2FD;
color: #1976D2;
}
.status-accepted {
background-color: #FFF3E0;
color: #F57C00;
}
.status-picking {
background-color: #FFF3E0;
color: #F57C00;
}
.status-picked {
background-color: #E8F5E8;
color: #388E3C;
}
.status-delivering {
background-color: #E8F5E8;
color: #388E3C;
}
.status-default {
background-color: #F8F8F8;
color: #666;
}
.order-addresses {
margin-bottom: 20rpx;
}
.address-item {
display: flex;
align-items: flex-start;
margin-bottom: 15rpx;
}
.address-icon {
font-size: 28rpx;
margin-right: 15rpx;
margin-top: 5rpx;
}
.address-info {
display: flex;
flex-direction: column;
flex: 1;
}
.address-label {
font-size: 24rpx;
color: #666;
margin-bottom: 8rpx;
}
.address-text {
font-size: 28rpx;
color: #333;
margin-bottom: 8rpx;
}
.contact-info {
font-size: 24rpx;
color: #666;
}
.address-line {
width: 2rpx;
height: 30rpx;
background-color: #ddd;
margin: 10rpx 0 10rpx 14rpx;
}
.order-details {
display: flex;
justify-content: space-between;
margin-bottom: 20rpx;
padding: 15rpx;
background-color: #f8f9fa;
border-radius: 8rpx;
font-size: 24rpx;
color: #666;
}
.order-info {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: 10rpx;
flex-direction: column;
align-items: center;
text-align: center;
font-size: 24rpx;
color: #666;
margin-bottom: 15rpx;
padding-bottom: 10rpx;
border-bottom: 1rpx solid #f0f0f0;
margin: 0 5rpx;
}
.info-item {
flex: 1 1 45%;
min-width: 120rpx;
word-break: break-all;
}
.earning-details {
.order-actions {
display: flex;
flex-direction: column;
flex-wrap: wrap;
gap: 10rpx;
}
.detail-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8rpx 12rpx;
.action-btn {
flex: 1;
height: 80rpx;
border-radius: 8rpx;
background-color: #f8f9fa;
}
.detail-type {
font-size: 24rpx;
color: #555;
}
.detail-amount {
font-size: 24rpx;
color: #4CAF50;
font-size: 28rpx;
border: none;
font-weight: 500;
padding: 0 10rpx;
box-sizing: border-box;
}
.load-more {
text-align: center;
margin-top: 20rpx;
}
.load-more-btn {
.primary {
background-color: #4CAF50;
color: #fff;
border: none;
border-radius: 8rpx;
padding: 20rpx 40rpx;
font-size: 28rpx;
font-weight: bold;
cursor: pointer;
transition: background-color 0.2s ease;
}
.load-more-btn:hover {
background-color: #45a049; /* 按钮悬停效果 */
}
.load-more-btn:active {
background-color: #3d8b40; /* 按钮点击效果 */
.secondary {
background-color: #f0f0f0;
color: #333;
border: 1rpx solid #ddd;
}
.no-data {