新页面的添加
This commit is contained in:
not-like-juvenile
35
pages.json
35
pages.json
@@ -63,6 +63,41 @@
|
|||||||
"navigationStyle": "custom"
|
"navigationStyle": "custom"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
"path": "pages/mall/delivery/order-detail",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "订单详情页",
|
||||||
|
"navigationStyle": "custom"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "pages/mall/delivery/profile",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "配送个人中心",
|
||||||
|
"navigationStyle": "custom"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "pages/mall/delivery/order-history",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "历史记录",
|
||||||
|
"navigationStyle": "custom"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "pages/mall/delivery/earnings",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "历史记录",
|
||||||
|
"navigationStyle": "custom"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "pages/mall/delivery/settings",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "设置",
|
||||||
|
"navigationStyle": "custom"
|
||||||
|
}
|
||||||
|
},
|
||||||
{
|
{
|
||||||
"path": "pages/mall/admin/index",
|
"path": "pages/mall/admin/index",
|
||||||
"style": {
|
"style": {
|
||||||
|
|||||||
544
pages/mall/delivery/earnings.uvue
Normal file
544
pages/mall/delivery/earnings.uvue
Normal file
@@ -0,0 +1,544 @@
|
|||||||
|
<template>
|
||||||
|
<view class="earnings-container">
|
||||||
|
<!-- 顶部导航栏 -->
|
||||||
|
<view class="page-header">
|
||||||
|
<!-- 左上角：返回主页按钮（箭头+文字 垂直排列） -->
|
||||||
|
<view class="nav-left" @click="goBackToHome">
|
||||||
|
<text class="nav-icon">←</text>
|
||||||
|
<text class="nav-title">返回主页</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 页面标题居中 -->
|
||||||
|
<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>
|
||||||
|
|
||||||
|
<!-- 订单基础信息 -->
|
||||||
|
<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>
|
||||||
|
</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>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="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,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
onLoad() {
|
||||||
|
this.loadAllEarnings()
|
||||||
|
},
|
||||||
|
|
||||||
|
computed: {
|
||||||
|
hasMore(): boolean {
|
||||||
|
return this.allOrderEarnings.length > this.orderEarningsList.length
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
// 加载所有收入明细并按订单聚合
|
||||||
|
loadAllEarnings() {
|
||||||
|
const rawEarnings = [
|
||||||
|
// 配送费
|
||||||
|
{
|
||||||
|
id: '1',
|
||||||
|
date: '2025-01-08T14:30:00Z',
|
||||||
|
amount: 8.5,
|
||||||
|
source: 'delivery_fee',
|
||||||
|
order_no: 'D202501081234',
|
||||||
|
distance: 12.5
|
||||||
|
},
|
||||||
|
{
|
||||||
|
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'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
// 按订单号聚合数据
|
||||||
|
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()
|
||||||
|
},
|
||||||
|
|
||||||
|
// 计算总统计数据
|
||||||
|
calculateTotalStats() {
|
||||||
|
let totalEarnings = 0
|
||||||
|
let totalUserTips = 0
|
||||||
|
let totalMerchantTips = 0
|
||||||
|
|
||||||
|
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
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
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)}小时前`
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
// 返回主页
|
||||||
|
goBackToHome() {
|
||||||
|
uni.reLaunch({
|
||||||
|
url: '/pages/mall/delivery/index'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 定义聚合后的订单收入类型
|
||||||
|
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 {
|
||||||
|
background-color: #f5f5f5;
|
||||||
|
min-height: 100vh;
|
||||||
|
padding: 20rpx 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-header {
|
||||||
|
background-color: #fff;
|
||||||
|
padding: 20rpx 30rpx;
|
||||||
|
border-bottom: 1rpx solid #e9ecef;
|
||||||
|
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
|
||||||
|
position: relative;
|
||||||
|
min-height: 80rpx; /* 确保有足够空间放垂直排列的按钮和标题 */
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-left {
|
||||||
|
position: absolute;
|
||||||
|
top: 20rpx;
|
||||||
|
left: 30rpx;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-icon {
|
||||||
|
font-size: 36rpx;
|
||||||
|
margin-right: 10rpx;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-title {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #000000; /* 红色 */
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-title {
|
||||||
|
font-size: 32rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #333; /* 黑色 */
|
||||||
|
text-align: center;
|
||||||
|
margin-top: 20rpx; /* 与 nav-left 保持一定距离 */
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-right {
|
||||||
|
/* 为了保持左右对齐，右侧需要一个占位元素 */
|
||||||
|
width: 1rpx;
|
||||||
|
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 {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.order-earnings-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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.order-total {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 15rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.order-total-label {
|
||||||
|
font-size: 28rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.order-total-amount {
|
||||||
|
font-size: 32rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #4CAF50;
|
||||||
|
}
|
||||||
|
|
||||||
|
.order-info {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 10rpx;
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #666;
|
||||||
|
margin-bottom: 15rpx;
|
||||||
|
padding-bottom: 10rpx;
|
||||||
|
border-bottom: 1rpx solid #f0f0f0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-item {
|
||||||
|
flex: 1 1 45%;
|
||||||
|
min-width: 120rpx;
|
||||||
|
word-break: break-all;
|
||||||
|
}
|
||||||
|
|
||||||
|
.earning-details {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.detail-item {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
padding: 8rpx 12rpx;
|
||||||
|
border-radius: 8rpx;
|
||||||
|
background-color: #f8f9fa;
|
||||||
|
}
|
||||||
|
|
||||||
|
.detail-type {
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #555;
|
||||||
|
}
|
||||||
|
|
||||||
|
.detail-amount {
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #4CAF50;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.load-more {
|
||||||
|
text-align: center;
|
||||||
|
margin-top: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.load-more-btn {
|
||||||
|
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; /* 按钮点击效果 */
|
||||||
|
}
|
||||||
|
|
||||||
|
.no-data {
|
||||||
|
text-align: center;
|
||||||
|
padding: 80rpx 30rpx;
|
||||||
|
border-radius: 16rpx;
|
||||||
|
background-color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.no-data-text {
|
||||||
|
font-size: 32rpx;
|
||||||
|
color: #999;
|
||||||
|
margin-bottom: 15rpx;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -531,393 +531,481 @@
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.delivery-container {
|
.delivery-container {
|
||||||
background-color: #f5f5f5;
|
background-color: #f8f9fa;
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
padding-bottom: 40rpx;
|
padding-bottom: 40rpx;
|
||||||
}
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
.header {
|
.header {
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
padding: 30rpx;
|
padding: 20rpx 30rpx;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
border-bottom: 1rpx solid #e5e5e5;
|
border-bottom: 1rpx solid #e9ecef;
|
||||||
}
|
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
|
||||||
|
}
|
||||||
|
|
||||||
.driver-info {
|
.driver-info {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.avatar {
|
.avatar {
|
||||||
width: 80rpx;
|
width: 80rpx;
|
||||||
height: 80rpx;
|
height: 80rpx;
|
||||||
border-radius: 40rpx;
|
border-radius: 40rpx;
|
||||||
margin-right: 20rpx;
|
margin-right: 20rpx;
|
||||||
}
|
border: 2rpx solid #dee2e6;
|
||||||
|
}
|
||||||
|
|
||||||
.driver-details {
|
.driver-details {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
}
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
.driver-name {
|
.driver-name {
|
||||||
font-size: 32rpx;
|
font-size: 32rpx;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
color: #333;
|
color: #333;
|
||||||
margin-bottom: 8rpx;
|
margin-bottom: 8rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
.work-status {
|
.work-status {
|
||||||
font-size: 24rpx;
|
font-size: 24rpx;
|
||||||
padding: 6rpx 12rpx;
|
padding: 6rpx 12rpx;
|
||||||
border-radius: 12rpx;
|
border-radius: 12rpx;
|
||||||
}
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
.status-online {
|
.status-online {
|
||||||
background-color: #E8F5E8;
|
background-color: #E8F5E8;
|
||||||
color: #4CAF50;
|
color: #4CAF50;
|
||||||
}
|
}
|
||||||
|
|
||||||
.status-offline {
|
.status-offline {
|
||||||
background-color: #FFF3E0;
|
background-color: #FFF3E0;
|
||||||
color: #FF9800;
|
color: #FF9800;
|
||||||
}
|
}
|
||||||
|
|
||||||
.status-switch {
|
.status-switch {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
align-items: center;
|
||||||
align-items: center;
|
gap: 10rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
.switch-label {
|
.switch-label {
|
||||||
font-size: 22rpx;
|
font-size: 22rpx;
|
||||||
color: #666;
|
color: #666;
|
||||||
margin-top: 8rpx;
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.stats-section {
|
/* 今日统计 */
|
||||||
background-color: #fff;
|
.stats-section {
|
||||||
margin: 20rpx;
|
background-color: #fff;
|
||||||
padding: 30rpx;
|
margin: 20rpx;
|
||||||
border-radius: 16rpx;
|
padding: 20rpx 30rpx;
|
||||||
}
|
border-radius: 16rpx;
|
||||||
|
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
|
||||||
|
}
|
||||||
|
|
||||||
.section-title {
|
.section-title {
|
||||||
font-size: 32rpx;
|
font-size: 32rpx;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
color: #333;
|
color: #333;
|
||||||
margin-bottom: 30rpx;
|
margin-bottom: 20rpx;
|
||||||
}
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
.stats-grid {
|
.stats-grid {
|
||||||
display: flex;
|
display: grid;
|
||||||
justify-content: space-between;
|
grid-template-columns: repeat(2, 1fr);
|
||||||
}
|
gap: 15rpx;
|
||||||
|
justify-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
.stat-item {
|
.stat-item {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
flex: 1;
|
padding: 15rpx;
|
||||||
}
|
background-color: #f8f9fa;
|
||||||
|
border-radius: 12rpx;
|
||||||
|
min-width: 120rpx;
|
||||||
|
}
|
||||||
|
|
||||||
.stat-value {
|
.stat-value {
|
||||||
font-size: 36rpx;
|
font-size: 36rpx;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
color: #4CAF50;
|
color: #4CAF50;
|
||||||
margin-bottom: 10rpx;
|
margin-bottom: 10rpx;
|
||||||
}
|
line-height: 1.2;
|
||||||
|
}
|
||||||
|
|
||||||
.stat-label {
|
.stat-label {
|
||||||
font-size: 24rpx;
|
font-size: 24rpx;
|
||||||
color: #666;
|
color: #666;
|
||||||
}
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
.current-task-section {
|
/* 当前任务 */
|
||||||
background-color: #fff;
|
.current-task-section {
|
||||||
margin: 20rpx;
|
background-color: #fff;
|
||||||
padding: 30rpx;
|
margin: 20rpx;
|
||||||
border-radius: 16rpx;
|
padding: 20rpx 30rpx;
|
||||||
}
|
border-radius: 16rpx;
|
||||||
|
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
|
||||||
|
}
|
||||||
|
|
||||||
.task-card {
|
.section-title {
|
||||||
border: 1rpx solid #e5e5e5;
|
font-size: 32rpx;
|
||||||
border-radius: 12rpx;
|
font-weight: bold;
|
||||||
padding: 20rpx;
|
color: #333;
|
||||||
}
|
margin-bottom: 20rpx;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
.task-header {
|
.task-card {
|
||||||
display: flex;
|
border: 1rpx solid #e9ecef;
|
||||||
justify-content: space-between;
|
border-radius: 12rpx;
|
||||||
align-items: center;
|
padding: 20rpx;
|
||||||
margin-bottom: 20rpx;
|
background-color: #ffffff;
|
||||||
padding-bottom: 15rpx;
|
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
|
||||||
border-bottom: 1rpx solid #f0f0f0;
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.task-id {
|
.task-header {
|
||||||
font-size: 28rpx;
|
display: flex;
|
||||||
font-weight: bold;
|
justify-content: space-between;
|
||||||
color: #333;
|
align-items: center;
|
||||||
}
|
margin-bottom: 15rpx;
|
||||||
|
padding-bottom: 15rpx;
|
||||||
|
border-bottom: 1rpx solid #f8f9fa;
|
||||||
|
}
|
||||||
|
|
||||||
.task-status {
|
.task-id {
|
||||||
font-size: 24rpx;
|
font-size: 28rpx;
|
||||||
padding: 8rpx 16rpx;
|
font-weight: bold;
|
||||||
border-radius: 20rpx;
|
color: #333;
|
||||||
}
|
}
|
||||||
|
|
||||||
.task-accepted {
|
.task-status {
|
||||||
background-color: #E3F2FD;
|
font-size: 24rpx;
|
||||||
color: #1976D2;
|
padding: 6rpx 12rpx;
|
||||||
}
|
border-radius: 12rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
.task-picking {
|
.task-accepted {
|
||||||
background-color: #FFF3E0;
|
background-color: #E3F2FD;
|
||||||
color: #F57C00;
|
color: #1976D2;
|
||||||
}
|
}
|
||||||
|
|
||||||
.task-delivering {
|
.task-picking {
|
||||||
background-color: #E8F5E8;
|
background-color: #FFF3E0;
|
||||||
color: #388E3C;
|
color: #F57C00;
|
||||||
}
|
}
|
||||||
|
|
||||||
.task-addresses {
|
.task-delivering {
|
||||||
margin-bottom: 20rpx;
|
background-color: #E8F5E8;
|
||||||
}
|
color: #388E3C;
|
||||||
|
}
|
||||||
|
|
||||||
.address-item {
|
.task-addresses {
|
||||||
display: flex;
|
margin-bottom: 20rpx;
|
||||||
align-items: flex-start;
|
}
|
||||||
margin-bottom: 15rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.address-icon {
|
.address-item {
|
||||||
font-size: 28rpx;
|
display: flex;
|
||||||
margin-right: 15rpx;
|
align-items: flex-start;
|
||||||
margin-top: 5rpx;
|
margin-bottom: 15rpx;
|
||||||
}
|
padding: 10rpx 0;
|
||||||
|
border-bottom: 1rpx dashed #e9ecef;
|
||||||
|
}
|
||||||
|
|
||||||
.address-info {
|
.address-icon {
|
||||||
display: flex;
|
font-size: 28rpx;
|
||||||
flex-direction: column;
|
margin-right: 15rpx;
|
||||||
flex: 1;
|
margin-top: 5rpx;
|
||||||
}
|
color: #666;
|
||||||
|
}
|
||||||
|
|
||||||
.address-label {
|
.address-info {
|
||||||
font-size: 24rpx;
|
display: flex;
|
||||||
color: #666;
|
flex-direction: column;
|
||||||
margin-bottom: 8rpx;
|
flex: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.address-text {
|
.address-label {
|
||||||
font-size: 28rpx;
|
font-size: 24rpx;
|
||||||
color: #333;
|
color: #666;
|
||||||
margin-bottom: 8rpx;
|
margin-bottom: 8rpx;
|
||||||
}
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
.contact-info {
|
.address-text {
|
||||||
font-size: 24rpx;
|
font-size: 28rpx;
|
||||||
color: #666;
|
color: #333;
|
||||||
}
|
margin-bottom: 8rpx;
|
||||||
|
word-break: break-all;
|
||||||
|
}
|
||||||
|
|
||||||
.address-line {
|
.contact-info {
|
||||||
width: 2rpx;
|
font-size: 24rpx;
|
||||||
height: 30rpx;
|
color: #666;
|
||||||
background-color: #ddd;
|
font-weight: 500;
|
||||||
margin: 10rpx 0 10rpx 14rpx;
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.task-details {
|
.address-line {
|
||||||
display: flex;
|
width: 2rpx;
|
||||||
justify-content: space-between;
|
height: 30rpx;
|
||||||
margin-bottom: 20rpx;
|
background-color: #ddd;
|
||||||
padding: 15rpx;
|
margin: 10rpx 0 10rpx 14rpx;
|
||||||
background-color: #f8f9fa;
|
}
|
||||||
border-radius: 8rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.task-info {
|
.task-details {
|
||||||
font-size: 24rpx;
|
display: flex;
|
||||||
color: #666;
|
justify-content: space-between;
|
||||||
}
|
margin-bottom: 20rpx;
|
||||||
|
padding: 15rpx;
|
||||||
|
background-color: #f8f9fa;
|
||||||
|
border-radius: 8rpx;
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
|
||||||
.task-actions {
|
.task-info {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-direction: column;
|
||||||
gap: 15rpx;
|
align-items: center;
|
||||||
}
|
text-align: center;
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #666;
|
||||||
|
margin: 0 5rpx;
|
||||||
|
}
|
||||||
|
|
||||||
.action-btn {
|
.task-actions {
|
||||||
flex: 1;
|
display: flex;
|
||||||
height: 80rpx;
|
flex-wrap: wrap;
|
||||||
border-radius: 8rpx;
|
gap: 10rpx;
|
||||||
font-size: 28rpx;
|
margin-top: 10rpx;
|
||||||
border: none;
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.primary {
|
.action-btn {
|
||||||
background-color: #4CAF50;
|
flex: 1;
|
||||||
color: #fff;
|
height: 80rpx;
|
||||||
}
|
border-radius: 8rpx;
|
||||||
|
font-size: 28rpx;
|
||||||
|
border: none;
|
||||||
|
font-weight: 500;
|
||||||
|
padding: 0 10rpx;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
.secondary {
|
.primary {
|
||||||
background-color: #f0f0f0;
|
background-color: #4CAF50;
|
||||||
color: #333;
|
color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.available-orders-section {
|
.secondary {
|
||||||
margin: 20rpx;
|
background-color: #f0f0f0;
|
||||||
}
|
color: #333;
|
||||||
|
border: 1rpx solid #ddd;
|
||||||
|
}
|
||||||
|
|
||||||
.section-header {
|
/* 可接取订单 */
|
||||||
display: flex;
|
.available-orders-section {
|
||||||
justify-content: space-between;
|
margin: 20rpx;
|
||||||
align-items: center;
|
}
|
||||||
margin-bottom: 20rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.refresh-btn {
|
.section-header {
|
||||||
font-size: 26rpx;
|
display: flex;
|
||||||
color: #4CAF50;
|
justify-content: space-between;
|
||||||
}
|
align-items: center;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
.empty-orders {
|
.refresh-btn {
|
||||||
background-color: #fff;
|
font-size: 26rpx;
|
||||||
padding: 80rpx 30rpx;
|
color: #4CAF50;
|
||||||
border-radius: 16rpx;
|
padding: 8rpx 16rpx;
|
||||||
text-align: center;
|
background-color: #e8f5e8;
|
||||||
}
|
border-radius: 12rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
.empty-text {
|
.empty-orders {
|
||||||
font-size: 32rpx;
|
background-color: #fff;
|
||||||
color: #999;
|
padding: 40rpx 30rpx;
|
||||||
margin-bottom: 15rpx;
|
border-radius: 16rpx;
|
||||||
}
|
text-align: center;
|
||||||
|
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
|
||||||
|
}
|
||||||
|
|
||||||
.empty-subtitle {
|
.empty-text {
|
||||||
font-size: 24rpx;
|
font-size: 32rpx;
|
||||||
color: #ccc;
|
color: #999;
|
||||||
}
|
margin-bottom: 15rpx;
|
||||||
|
}
|
||||||
|
|
||||||
.order-card {
|
.empty-subtitle {
|
||||||
background-color: #fff;
|
font-size: 24rpx;
|
||||||
border-radius: 12rpx;
|
color: #ccc;
|
||||||
padding: 20rpx;
|
}
|
||||||
margin-bottom: 15rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.order-header {
|
.order-card {
|
||||||
display: flex;
|
background-color: #fff;
|
||||||
justify-content: space-between;
|
border-radius: 12rpx;
|
||||||
align-items: center;
|
padding: 20rpx;
|
||||||
margin-bottom: 15rpx;
|
margin-bottom: 15rpx;
|
||||||
}
|
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
|
||||||
|
border: 1rpx solid #e9ecef;
|
||||||
|
}
|
||||||
|
|
||||||
.order-id {
|
.order-header {
|
||||||
font-size: 28rpx;
|
display: flex;
|
||||||
color: #333;
|
justify-content: space-between;
|
||||||
font-weight: bold;
|
align-items: center;
|
||||||
}
|
margin-bottom: 15rpx;
|
||||||
|
padding-bottom: 15rpx;
|
||||||
|
border-bottom: 1rpx solid #f8f9fa;
|
||||||
|
}
|
||||||
|
|
||||||
.order-fee {
|
.order-id {
|
||||||
font-size: 32rpx;
|
font-size: 28rpx;
|
||||||
color: #4CAF50;
|
color: #333;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
.order-route {
|
.order-fee {
|
||||||
display: flex;
|
font-size: 32rpx;
|
||||||
align-items: center;
|
color: #4CAF50;
|
||||||
margin-bottom: 15rpx;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
.route-item {
|
.order-route {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
flex: 1;
|
margin-bottom: 15rpx;
|
||||||
}
|
padding: 10rpx 0;
|
||||||
|
border-bottom: 1rpx solid #f8f9fa;
|
||||||
|
}
|
||||||
|
|
||||||
.route-icon {
|
.route-item {
|
||||||
font-size: 24rpx;
|
display: flex;
|
||||||
margin-right: 8rpx;
|
align-items: center;
|
||||||
}
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
.route-text {
|
.route-icon {
|
||||||
font-size: 26rpx;
|
font-size: 24rpx;
|
||||||
color: #333;
|
margin-right: 8rpx;
|
||||||
}
|
color: #666;
|
||||||
|
}
|
||||||
|
|
||||||
.route-arrow {
|
.route-text {
|
||||||
font-size: 24rpx;
|
font-size: 26rpx;
|
||||||
color: #999;
|
color: #333;
|
||||||
margin: 0 15rpx;
|
word-break: break-all;
|
||||||
}
|
}
|
||||||
|
|
||||||
.order-info {
|
.route-arrow {
|
||||||
display: flex;
|
font-size: 24rpx;
|
||||||
justify-content: space-between;
|
color: #999;
|
||||||
margin-bottom: 15rpx;
|
margin: 0 15rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
.info-item {
|
.order-info {
|
||||||
font-size: 22rpx;
|
display: flex;
|
||||||
color: #666;
|
justify-content: space-between;
|
||||||
}
|
margin-bottom: 15rpx;
|
||||||
|
padding: 10rpx 0;
|
||||||
|
border-bottom: 1rpx solid #f8f9fa;
|
||||||
|
font-size: 22rpx;
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
|
||||||
.order-actions {
|
.info-item {
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 15rpx;
|
flex-direction: column;
|
||||||
}
|
align-items: center;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 22rpx;
|
||||||
|
color: #666;
|
||||||
|
margin: 0 5rpx;
|
||||||
|
}
|
||||||
|
|
||||||
.order-btn {
|
.order-actions {
|
||||||
flex: 1;
|
display: flex;
|
||||||
height: 70rpx;
|
gap: 10rpx;
|
||||||
border-radius: 8rpx;
|
margin-top: 10rpx;
|
||||||
font-size: 26rpx;
|
}
|
||||||
border: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.accept {
|
.order-btn {
|
||||||
background-color: #4CAF50;
|
flex: 1;
|
||||||
color: #fff;
|
height: 70rpx;
|
||||||
}
|
border-radius: 8rpx;
|
||||||
|
font-size: 26rpx;
|
||||||
|
border: none;
|
||||||
|
font-weight: 500;
|
||||||
|
padding: 0 10rpx;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
.detail {
|
.accept {
|
||||||
background-color: #f0f0f0;
|
background-color: #4CAF50;
|
||||||
color: #333;
|
color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.quick-actions-section {
|
.detail {
|
||||||
background-color: #fff;
|
background-color: #f0f0f0;
|
||||||
margin: 20rpx;
|
color: #333;
|
||||||
padding: 30rpx;
|
border: 1rpx solid #ddd;
|
||||||
border-radius: 16rpx;
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.actions-grid {
|
/* 历史记录快捷入口 */
|
||||||
display: flex;
|
.quick-actions-section {
|
||||||
justify-content: space-between;
|
background-color: #fff;
|
||||||
}
|
margin: 20rpx;
|
||||||
|
padding: 20rpx 30rpx;
|
||||||
|
border-radius: 16rpx;
|
||||||
|
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
|
||||||
|
}
|
||||||
|
|
||||||
.action-item {
|
.actions-grid {
|
||||||
display: flex;
|
display: grid;
|
||||||
flex-direction: column;
|
grid-template-columns: repeat(2, 1fr);
|
||||||
align-items: center;
|
gap: 20rpx;
|
||||||
flex: 1;
|
justify-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.action-icon {
|
.action-item {
|
||||||
font-size: 48rpx;
|
display: flex;
|
||||||
margin-bottom: 15rpx;
|
flex-direction: column;
|
||||||
}
|
align-items: center;
|
||||||
|
padding: 20rpx;
|
||||||
|
background-color: #f8f9fa;
|
||||||
|
border-radius: 12rpx;
|
||||||
|
min-width: 120rpx;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: background-color 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
.action-text {
|
.action-item:hover {
|
||||||
font-size: 24rpx;
|
background-color: #e8f5e8;
|
||||||
color: #333;
|
}
|
||||||
text-align: center;
|
|
||||||
}
|
.action-icon {
|
||||||
|
font-size: 48rpx;
|
||||||
|
margin-bottom: 15rpx;
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
|
||||||
|
.action-text {
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #333;
|
||||||
|
text-align: center;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
544
pages/mall/delivery/order-history.uvue
Normal file
544
pages/mall/delivery/order-history.uvue
Normal file
@@ -0,0 +1,544 @@
|
|||||||
|
<template>
|
||||||
|
<view class="earnings-container">
|
||||||
|
<!-- 顶部导航栏 -->
|
||||||
|
<view class="page-header">
|
||||||
|
<!-- 左上角：返回主页按钮（箭头+文字 垂直排列） -->
|
||||||
|
<view class="nav-left" @click="goBackToHome">
|
||||||
|
<text class="nav-icon">←</text>
|
||||||
|
<text class="nav-title">返回主页</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 页面标题居中 -->
|
||||||
|
<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>
|
||||||
|
|
||||||
|
<!-- 订单基础信息 -->
|
||||||
|
<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>
|
||||||
|
</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>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="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,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
onLoad() {
|
||||||
|
this.loadAllEarnings()
|
||||||
|
},
|
||||||
|
|
||||||
|
computed: {
|
||||||
|
hasMore(): boolean {
|
||||||
|
return this.allOrderEarnings.length > this.orderEarningsList.length
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
// 加载所有收入明细并按订单聚合
|
||||||
|
loadAllEarnings() {
|
||||||
|
const rawEarnings = [
|
||||||
|
// 配送费
|
||||||
|
{
|
||||||
|
id: '1',
|
||||||
|
date: '2025-01-08T14:30:00Z',
|
||||||
|
amount: 8.5,
|
||||||
|
source: 'delivery_fee',
|
||||||
|
order_no: 'D202501081234',
|
||||||
|
distance: 12.5
|
||||||
|
},
|
||||||
|
{
|
||||||
|
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'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
// 按订单号聚合数据
|
||||||
|
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()
|
||||||
|
},
|
||||||
|
|
||||||
|
// 计算总统计数据
|
||||||
|
calculateTotalStats() {
|
||||||
|
let totalEarnings = 0
|
||||||
|
let totalUserTips = 0
|
||||||
|
let totalMerchantTips = 0
|
||||||
|
|
||||||
|
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
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
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)}小时前`
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
// 返回主页
|
||||||
|
goBackToHome() {
|
||||||
|
uni.reLaunch({
|
||||||
|
url: '/pages/mall/delivery/index'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 定义聚合后的订单收入类型
|
||||||
|
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 {
|
||||||
|
background-color: #f5f5f5;
|
||||||
|
min-height: 100vh;
|
||||||
|
padding: 20rpx 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-header {
|
||||||
|
background-color: #fff;
|
||||||
|
padding: 20rpx 30rpx;
|
||||||
|
border-bottom: 1rpx solid #e9ecef;
|
||||||
|
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
|
||||||
|
position: relative;
|
||||||
|
min-height: 80rpx; /* 确保有足够空间放垂直排列的按钮和标题 */
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-left {
|
||||||
|
position: absolute;
|
||||||
|
top: 20rpx;
|
||||||
|
left: 30rpx;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-icon {
|
||||||
|
font-size: 36rpx;
|
||||||
|
margin-right: 10rpx;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-title {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #000000; /* 红色 */
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-title {
|
||||||
|
font-size: 32rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #333; /* 黑色 */
|
||||||
|
text-align: center;
|
||||||
|
margin-top: 20rpx; /* 与 nav-left 保持一定距离 */
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-right {
|
||||||
|
/* 为了保持左右对齐，右侧需要一个占位元素 */
|
||||||
|
width: 1rpx;
|
||||||
|
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 {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.order-earnings-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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.order-total {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 15rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.order-total-label {
|
||||||
|
font-size: 28rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.order-total-amount {
|
||||||
|
font-size: 32rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #4CAF50;
|
||||||
|
}
|
||||||
|
|
||||||
|
.order-info {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 10rpx;
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #666;
|
||||||
|
margin-bottom: 15rpx;
|
||||||
|
padding-bottom: 10rpx;
|
||||||
|
border-bottom: 1rpx solid #f0f0f0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-item {
|
||||||
|
flex: 1 1 45%;
|
||||||
|
min-width: 120rpx;
|
||||||
|
word-break: break-all;
|
||||||
|
}
|
||||||
|
|
||||||
|
.earning-details {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.detail-item {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
padding: 8rpx 12rpx;
|
||||||
|
border-radius: 8rpx;
|
||||||
|
background-color: #f8f9fa;
|
||||||
|
}
|
||||||
|
|
||||||
|
.detail-type {
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #555;
|
||||||
|
}
|
||||||
|
|
||||||
|
.detail-amount {
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #4CAF50;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.load-more {
|
||||||
|
text-align: center;
|
||||||
|
margin-top: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.load-more-btn {
|
||||||
|
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; /* 按钮点击效果 */
|
||||||
|
}
|
||||||
|
|
||||||
|
.no-data {
|
||||||
|
text-align: center;
|
||||||
|
padding: 80rpx 30rpx;
|
||||||
|
border-radius: 16rpx;
|
||||||
|
background-color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.no-data-text {
|
||||||
|
font-size: 32rpx;
|
||||||
|
color: #999;
|
||||||
|
margin-bottom: 15rpx;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
494
pages/mall/delivery/settings.uvue
Normal file
494
pages/mall/delivery/settings.uvue
Normal file
@@ -0,0 +1,494 @@
|
|||||||
|
<template>
|
||||||
|
<view class="settings-container">
|
||||||
|
<!-- 顶部导航栏 -->
|
||||||
|
<view class="header-bar">
|
||||||
|
<view class="nav-left" @click="goBack">
|
||||||
|
<text class="nav-icon">←</text>
|
||||||
|
<text class="nav-title">设置</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 设置列表 -->
|
||||||
|
<scroll-view class="settings-list" scroll-y="true">
|
||||||
|
<!-- 基础设置 -->
|
||||||
|
<view class="setting-section">
|
||||||
|
<text class="section-title">基础设置</text>
|
||||||
|
|
||||||
|
<view class="setting-item" @click="toggleDarkMode">
|
||||||
|
<text class="item-label">深色模式</text>
|
||||||
|
<switch :checked="darkModeEnabled" color="#4CAF50" />
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="setting-item" @click="toggleAutoUpdate">
|
||||||
|
<text class="item-label">自动更新</text>
|
||||||
|
<switch :checked="autoUpdateEnabled" color="#4CAF50" />
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="setting-item" @click="openLanguagePicker">
|
||||||
|
<text class="item-label">语言</text>
|
||||||
|
<text class="item-value">{{ selectedLanguage }}</text>
|
||||||
|
<text class="item-arrow">›</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 通知设置 -->
|
||||||
|
<view class="setting-section">
|
||||||
|
<text class="section-title">通知设置</text>
|
||||||
|
|
||||||
|
<view class="setting-item" @click="toggleOrderNotifications">
|
||||||
|
<text class="item-label">订单通知</text>
|
||||||
|
<switch :checked="orderNotificationsEnabled" color="#4CAF50" />
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="setting-item" @click="toggleSystemNotifications">
|
||||||
|
<text class="item-label">系统通知</text>
|
||||||
|
<switch :checked="systemNotificationsEnabled" color="#4CAF50" />
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="setting-item" @click="openNotificationTimeRange">
|
||||||
|
<text class="item-label">通知时段</text>
|
||||||
|
<text class="item-value">{{ notificationTimeRange }}</text>
|
||||||
|
<text class="item-arrow">›</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 隐私与安全 -->
|
||||||
|
<view class="setting-section">
|
||||||
|
<text class="section-title">隐私与安全</text>
|
||||||
|
|
||||||
|
<view class="setting-item" @click="openPasswordChange">
|
||||||
|
<text class="item-label">修改密码</text>
|
||||||
|
<text class="item-arrow">›</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="setting-item" @click="toggleLocationSharing">
|
||||||
|
<text class="item-label">位置共享</text>
|
||||||
|
<switch :checked="locationSharingEnabled" color="#4CAF50" />
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="setting-item" @click="clearCache">
|
||||||
|
<text class="item-label">清除缓存</text>
|
||||||
|
<text class="item-value">{{ cacheSize }}</text>
|
||||||
|
<text class="item-arrow">›</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 关于与帮助 -->
|
||||||
|
<view class="setting-section">
|
||||||
|
<text class="section-title">关于与帮助</text>
|
||||||
|
|
||||||
|
<view class="setting-item" @click="openAboutPage">
|
||||||
|
<text class="item-label">关于我们</text>
|
||||||
|
<text class="item-value">{{ appVersion }}</text>
|
||||||
|
<text class="item-arrow">›</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="setting-item" @click="openHelpCenter">
|
||||||
|
<text class="item-label">帮助中心</text>
|
||||||
|
<text class="item-arrow">›</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="setting-item" @click="openFeedback">
|
||||||
|
<text class="item-label">意见反馈</text>
|
||||||
|
<text class="item-arrow">›</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 登出按钮 -->
|
||||||
|
<view class="logout-section">
|
||||||
|
<button class="logout-btn" @click="logout">退出登录</button>
|
||||||
|
</view>
|
||||||
|
</scroll-view>
|
||||||
|
|
||||||
|
<!-- 语言选择弹窗 -->
|
||||||
|
<view v-if="showLanguagePicker" class="picker-overlay" @click="closeLanguagePicker">
|
||||||
|
<view class="picker-panel" @click.stop="noop">
|
||||||
|
<text class="picker-title">选择语言</text>
|
||||||
|
<scroll-view scroll-y="true" class="picker-options">
|
||||||
|
<view v-for="(lang, index) in languageOptions" :key="index"
|
||||||
|
class="picker-option"
|
||||||
|
:class="{ 'picker-option-selected': selectedLanguage === lang.label }"
|
||||||
|
@click="selectLanguage(lang)">
|
||||||
|
<text>{{ lang.label }}</text>
|
||||||
|
</view>
|
||||||
|
</scroll-view>
|
||||||
|
<view class="picker-actions">
|
||||||
|
<button size="mini" @click="closeLanguagePicker">取消</button>
|
||||||
|
<button size="mini" type="primary" @click="confirmLanguageSelection">确定</button>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 通知时段选择弹窗 -->
|
||||||
|
<view v-if="showTimeRangePicker" class="picker-overlay" @click="closeTimeRangePicker">
|
||||||
|
<view class="picker-panel" @click.stop="noop">
|
||||||
|
<text class="picker-title">选择通知时段</text>
|
||||||
|
<view class="time-range-picker">
|
||||||
|
<text class="range-label">从</text>
|
||||||
|
<picker mode="time" :value="startTime" @change="onStartTimeChange">
|
||||||
|
<view class="time-input">{{ startTime }}</view>
|
||||||
|
</picker>
|
||||||
|
<text class="range-label">到</text>
|
||||||
|
<picker mode="time" :value="endTime" @change="onEndTimeChange">
|
||||||
|
<view class="time-input">{{ endTime }}</view>
|
||||||
|
</picker>
|
||||||
|
</view>
|
||||||
|
<view class="picker-actions">
|
||||||
|
<button size="mini" @click="closeTimeRangePicker">取消</button>
|
||||||
|
<button size="mini" type="primary" @click="confirmTimeRange">确定</button>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="uts">
|
||||||
|
type LanguageOption = {
|
||||||
|
value: string
|
||||||
|
label: string
|
||||||
|
}
|
||||||
|
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
darkModeEnabled: false,
|
||||||
|
autoUpdateEnabled: true,
|
||||||
|
orderNotificationsEnabled: true,
|
||||||
|
systemNotificationsEnabled: true,
|
||||||
|
locationSharingEnabled: true,
|
||||||
|
|
||||||
|
selectedLanguage: '简体中文',
|
||||||
|
languageOptions: [
|
||||||
|
{ value: 'zh-CN', label: '简体中文' },
|
||||||
|
{ value: 'en-US', label: 'English' },
|
||||||
|
{ value: 'ja-JP', label: '日本語' },
|
||||||
|
{ value: 'ko-KR', label: '한국어' }
|
||||||
|
] as Array<LanguageOption>,
|
||||||
|
showLanguagePicker: false,
|
||||||
|
|
||||||
|
notificationTimeRange: '全天接收',
|
||||||
|
startTime: '08:00',
|
||||||
|
endTime: '22:00',
|
||||||
|
showTimeRangePicker: false,
|
||||||
|
|
||||||
|
cacheSize: '15.2 MB',
|
||||||
|
appVersion: 'v1.2.3'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
goBack() {
|
||||||
|
uni.navigateBack()
|
||||||
|
},
|
||||||
|
|
||||||
|
toggleDarkMode() {
|
||||||
|
this.darkModeEnabled = !this.darkModeEnabled
|
||||||
|
// TODO: 保存设置到本地存储或同步到服务器
|
||||||
|
console.log('Dark mode toggled:', this.darkModeEnabled)
|
||||||
|
},
|
||||||
|
|
||||||
|
toggleAutoUpdate() {
|
||||||
|
this.autoUpdateEnabled = !this.autoUpdateEnabled
|
||||||
|
console.log('Auto update toggled:', this.autoUpdateEnabled)
|
||||||
|
},
|
||||||
|
|
||||||
|
toggleOrderNotifications() {
|
||||||
|
this.orderNotificationsEnabled = !this.orderNotificationsEnabled
|
||||||
|
console.log('Order notifications toggled:', this.orderNotificationsEnabled)
|
||||||
|
},
|
||||||
|
|
||||||
|
toggleSystemNotifications() {
|
||||||
|
this.systemNotificationsEnabled = !this.systemNotificationsEnabled
|
||||||
|
console.log('System notifications toggled:', this.systemNotificationsEnabled)
|
||||||
|
},
|
||||||
|
|
||||||
|
toggleLocationSharing() {
|
||||||
|
this.locationSharingEnabled = !this.locationSharingEnabled
|
||||||
|
console.log('Location sharing toggled:', this.locationSharingEnabled)
|
||||||
|
},
|
||||||
|
|
||||||
|
openLanguagePicker() {
|
||||||
|
this.showLanguagePicker = true
|
||||||
|
},
|
||||||
|
|
||||||
|
closeLanguagePicker() {
|
||||||
|
this.showLanguagePicker = false
|
||||||
|
},
|
||||||
|
|
||||||
|
selectLanguage(lang: LanguageOption) {
|
||||||
|
// 可以在这里高亮选中项，但确认还需点击确定
|
||||||
|
this.selectedLanguage = lang.label
|
||||||
|
},
|
||||||
|
|
||||||
|
confirmLanguageSelection() {
|
||||||
|
// 实际应用中，这里会保存选中的语言设置
|
||||||
|
console.log('Language confirmed:', this.selectedLanguage)
|
||||||
|
this.closeLanguagePicker()
|
||||||
|
// TODO: 调用API或本地存储更新语言设置
|
||||||
|
},
|
||||||
|
|
||||||
|
openNotificationTimeRange() {
|
||||||
|
this.showTimeRangePicker = true
|
||||||
|
},
|
||||||
|
|
||||||
|
closeTimeRangePicker() {
|
||||||
|
this.showTimeRangePicker = false
|
||||||
|
},
|
||||||
|
|
||||||
|
onStartTimeChange(e: UniEvent<HTMLInputElement>) {
|
||||||
|
this.startTime = e.detail.value
|
||||||
|
},
|
||||||
|
|
||||||
|
onEndTimeChange(e: UniEvent<HTMLInputElement>) {
|
||||||
|
this.endTime = e.detail.value
|
||||||
|
},
|
||||||
|
|
||||||
|
confirmTimeRange() {
|
||||||
|
this.notificationTimeRange = `${this.startTime} - ${this.endTime}`
|
||||||
|
console.log('Time range confirmed:', this.notificationTimeRange)
|
||||||
|
this.closeTimeRangePicker()
|
||||||
|
},
|
||||||
|
|
||||||
|
openPasswordChange() {
|
||||||
|
uni.navigateTo({
|
||||||
|
url: '/pages/mall/delivery/change-password'
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
clearCache() {
|
||||||
|
// TODO: 调用API或本地方法清除缓存
|
||||||
|
uni.showModal({
|
||||||
|
title: '清除缓存',
|
||||||
|
content: `确定要清除 ${this.cacheSize} 的缓存吗？`,
|
||||||
|
success: (res) => {
|
||||||
|
if (res.confirm) {
|
||||||
|
console.log('Cache cleared')
|
||||||
|
this.cacheSize = '0.0 MB'
|
||||||
|
uni.showToast({ title: '缓存已清除', icon: 'success' })
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
openAboutPage() {
|
||||||
|
uni.navigateTo({
|
||||||
|
url: '/pages/mall/delivery/about'
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
openHelpCenter() {
|
||||||
|
uni.navigateTo({
|
||||||
|
url: '/pages/mall/delivery/help-center'
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
openFeedback() {
|
||||||
|
uni.navigateTo({
|
||||||
|
url: '/pages/mall/delivery/feedback'
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
logout() {
|
||||||
|
uni.showModal({
|
||||||
|
title: '退出登录',
|
||||||
|
content: '确定要退出当前账号吗？',
|
||||||
|
success: (res) => {
|
||||||
|
if (res.confirm) {
|
||||||
|
// TODO: 调用登出API
|
||||||
|
console.log('Logging out...')
|
||||||
|
uni.reLaunch({
|
||||||
|
url: '/pages/user/login'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
noop() {
|
||||||
|
// 阻止事件冒泡的空函数
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.settings-container {
|
||||||
|
background-color: #f8f9fa;
|
||||||
|
min-height: 100vh;
|
||||||
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-bar {
|
||||||
|
background-color: #fff;
|
||||||
|
padding: 20rpx 30rpx;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
border-bottom: 1rpx solid #e9ecef;
|
||||||
|
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-left {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-icon {
|
||||||
|
font-size: 36rpx;
|
||||||
|
margin-right: 10rpx;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-title {
|
||||||
|
font-size: 32rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.settings-list {
|
||||||
|
flex: 1;
|
||||||
|
padding: 20rpx 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.setting-section {
|
||||||
|
background-color: #fff;
|
||||||
|
margin: 20rpx;
|
||||||
|
padding: 0 30rpx;
|
||||||
|
border-radius: 16rpx;
|
||||||
|
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-title {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #999;
|
||||||
|
padding: 20rpx 0 10rpx 0;
|
||||||
|
border-bottom: 1rpx solid #f0f0f0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.setting-item {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
padding: 20rpx 0;
|
||||||
|
border-bottom: 1rpx solid #f8f9fa;
|
||||||
|
}
|
||||||
|
|
||||||
|
.setting-item:last-child {
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item-label {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #333;
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item-value {
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #999;
|
||||||
|
margin-right: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item-arrow {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #ccc;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logout-section {
|
||||||
|
margin: 40rpx 20rpx 20rpx 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logout-btn {
|
||||||
|
width: 100%;
|
||||||
|
height: 80rpx;
|
||||||
|
background-color: #f44336;
|
||||||
|
color: #fff;
|
||||||
|
border-radius: 12rpx;
|
||||||
|
font-size: 32rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 弹窗遮罩 */
|
||||||
|
.picker-overlay {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background-color: rgba(0, 0, 0, 0.5);
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
z-index: 1000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.picker-panel {
|
||||||
|
background-color: #fff;
|
||||||
|
width: 80%;
|
||||||
|
max-width: 600rpx;
|
||||||
|
border-radius: 16rpx;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.picker-title {
|
||||||
|
display: block;
|
||||||
|
text-align: center;
|
||||||
|
padding: 20rpx;
|
||||||
|
font-size: 32rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #333;
|
||||||
|
border-bottom: 1rpx solid #eee;
|
||||||
|
}
|
||||||
|
|
||||||
|
.picker-options {
|
||||||
|
max-height: 400rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.picker-option {
|
||||||
|
padding: 20rpx 30rpx;
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #333;
|
||||||
|
border-bottom: 1rpx solid #f8f9fa;
|
||||||
|
}
|
||||||
|
|
||||||
|
.picker-option:last-child {
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.picker-option-selected {
|
||||||
|
background-color: #E8F5E8;
|
||||||
|
color: #4CAF50;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.time-range-picker {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-around;
|
||||||
|
padding: 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.range-label {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
|
||||||
|
.time-input {
|
||||||
|
font-size: 28rpx;
|
||||||
|
padding: 10rpx 20rpx;
|
||||||
|
border: 1rpx solid #ddd;
|
||||||
|
border-radius: 8rpx;
|
||||||
|
background-color: #f9f9f9;
|
||||||
|
margin: 0 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.picker-actions {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
padding: 20rpx;
|
||||||
|
border-top: 1rpx solid #eee;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
Reference in New Issue
Block a user