576 lines
12 KiB
Vue
576 lines
12 KiB
Vue
<template>
|
|
<view class="my-orders-page">
|
|
<!-- 状态筛选标签 -->
|
|
<scroll-view class="tab-bar" scroll-x>
|
|
<view
|
|
class="tab-item"
|
|
v-for="tab in statusTabs"
|
|
:key="tab.value"
|
|
:class="{ active: currentStatus === tab.value }"
|
|
@click="switchStatus(tab.value)"
|
|
>{{ tab.label }}</view>
|
|
</scroll-view>
|
|
|
|
<!-- 类型筛选标签 -->
|
|
<scroll-view class="type-bar" scroll-x>
|
|
<view
|
|
class="type-item"
|
|
v-for="tab in typeTabs"
|
|
:key="tab.value"
|
|
:class="{ active: currentType === tab.value }"
|
|
@click="switchType(tab.value)"
|
|
>{{ tab.label }}</view>
|
|
</scroll-view>
|
|
|
|
<!-- 订单列表 -->
|
|
<scroll-view class="order-list" scroll-y>
|
|
<view v-if="loading" class="loading-tip">加载中...</view>
|
|
<view v-else-if="filteredOrders.length === 0" class="empty-tip">暂无订单</view>
|
|
|
|
<view
|
|
v-for="order in filteredOrders"
|
|
:key="order.id"
|
|
class="order-card"
|
|
>
|
|
<view class="card-header">
|
|
<text class="order-type-tag">{{ getTypeLabel(order.orderType) }}</text>
|
|
<text class="order-status" :class="getStatusClass(order.status)">{{ getStatusLabel(order.status) }}</text>
|
|
</view>
|
|
|
|
<view class="card-body">
|
|
<view class="info-row">
|
|
<text class="info-label">订单编号</text>
|
|
<text class="info-value">{{ order.orderNo }}</text>
|
|
</view>
|
|
<view class="info-row" v-if="order.itemName">
|
|
<text class="info-label">物品</text>
|
|
<text class="info-value">{{ order.itemName }}</text>
|
|
</view>
|
|
<view class="info-row" v-if="order.deliveryLocation">
|
|
<text class="info-label">送达地点</text>
|
|
<text class="info-value">{{ order.deliveryLocation }}</text>
|
|
</view>
|
|
<view class="info-row">
|
|
<text class="info-label">跑腿佣金</text>
|
|
<text class="info-value price">¥{{ order.commission }}</text>
|
|
</view>
|
|
<view class="info-row">
|
|
<text class="info-label">下单时间</text>
|
|
<text class="info-value">{{ formatTime(order.createdAt) }}</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 操作按钮区域 -->
|
|
<view class="card-footer">
|
|
<!-- 待接单：取消订单 + 查看详情 -->
|
|
<template v-if="order.status === 'Pending'">
|
|
<view class="btn btn-cancel" @click="onCancelOrder(order)">
|
|
<text>取消订单</text>
|
|
</view>
|
|
<view class="btn btn-detail" @click="goDetail(order)">
|
|
<text>查看详情</text>
|
|
</view>
|
|
</template>
|
|
|
|
<!-- 进行中：联系跑腿 + 查看详情 -->
|
|
<template v-else-if="order.status === 'InProgress'">
|
|
<view class="btn btn-contact" @click="goChat(order)">
|
|
<text>联系跑腿</text>
|
|
</view>
|
|
<view class="btn btn-detail" @click="goDetail(order)">
|
|
<text>查看详情</text>
|
|
</view>
|
|
</template>
|
|
|
|
<!-- 待确认：确认处理 -->
|
|
<template v-else-if="order.status === 'WaitConfirm'">
|
|
<view class="btn btn-primary" @click="goConfirm(order)">
|
|
<text>确认处理</text>
|
|
</view>
|
|
<view class="btn btn-detail" @click="goDetail(order)">
|
|
<text>查看详情</text>
|
|
</view>
|
|
</template>
|
|
|
|
<!-- 已完成：评价跑腿 + 查看详情 + 联系跑腿 -->
|
|
<template v-else-if="order.status === 'Completed'">
|
|
<view v-if="!order.isReviewed" class="btn btn-primary" @click="openReview(order)">
|
|
<text>评价跑腿</text>
|
|
</view>
|
|
<view class="btn btn-contact" @click="goChat(order)">
|
|
<text>联系跑腿</text>
|
|
</view>
|
|
<view class="btn btn-detail" @click="goDetail(order)">
|
|
<text>查看详情</text>
|
|
</view>
|
|
</template>
|
|
|
|
<!-- 已取消/申诉中：查看详情 -->
|
|
<template v-else>
|
|
<view class="btn btn-detail" @click="goDetail(order)">
|
|
<text>查看详情</text>
|
|
</view>
|
|
</template>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
|
|
<!-- 评价弹窗 -->
|
|
<view class="modal-mask" v-if="showReviewModal" @click="showReviewModal = false">
|
|
<view class="modal-content" @click.stop>
|
|
<text class="modal-title">评价跑腿</text>
|
|
|
|
<!-- 星级选择 -->
|
|
<view class="star-row">
|
|
<text
|
|
v-for="star in 5"
|
|
:key="star"
|
|
class="star"
|
|
:class="{ active: reviewForm.rating >= star }"
|
|
@click="reviewForm.rating = star"
|
|
>★</text>
|
|
</view>
|
|
|
|
<!-- 评价内容（非必填） -->
|
|
<textarea
|
|
class="review-input"
|
|
v-model="reviewForm.content"
|
|
placeholder="请输入评价内容（选填）"
|
|
maxlength="200"
|
|
></textarea>
|
|
|
|
<view class="modal-actions">
|
|
<button class="modal-btn cancel" @click="showReviewModal = false">取消</button>
|
|
<button class="modal-btn confirm" @click="submitReviewAction" :loading="reviewSubmitting">提交</button>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { getMyOrders, cancelOrder, submitReview } from '../../utils/api'
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
statusTabs: [
|
|
{ label: '全部', value: '' },
|
|
{ label: '待接单', value: 'Pending' },
|
|
{ label: '进行中', value: 'InProgress' },
|
|
{ label: '待确认', value: 'WaitConfirm' },
|
|
{ label: '已完成', value: 'Completed' },
|
|
{ label: '已取消', value: 'Cancelled' },
|
|
{ label: '申诉中', value: 'Appealing' }
|
|
],
|
|
typeTabs: [
|
|
{ label: '全部', value: '' },
|
|
{ label: '代取', value: 'Pickup' },
|
|
{ label: '代送', value: 'Delivery' },
|
|
{ label: '万能帮', value: 'Help' },
|
|
{ label: '代购', value: 'Purchase' },
|
|
{ label: '美食街', value: 'Food' }
|
|
],
|
|
currentStatus: '',
|
|
currentType: '',
|
|
orders: [],
|
|
loading: false,
|
|
// 评价弹窗
|
|
showReviewModal: false,
|
|
reviewingOrder: null,
|
|
reviewForm: { rating: 5, content: '' },
|
|
reviewSubmitting: false
|
|
}
|
|
},
|
|
computed: {
|
|
/** 按状态和类型过滤订单 */
|
|
filteredOrders() {
|
|
return this.orders.filter(o => {
|
|
if (this.currentStatus && o.status !== this.currentStatus) return false
|
|
if (this.currentType && o.orderType !== this.currentType) return false
|
|
return true
|
|
})
|
|
}
|
|
},
|
|
onShow() {
|
|
this.loadOrders()
|
|
},
|
|
methods: {
|
|
/** 加载我的订单 */
|
|
async loadOrders() {
|
|
this.loading = true
|
|
try {
|
|
const res = await getMyOrders({})
|
|
this.orders = res?.items || res || []
|
|
} catch (e) {
|
|
this.orders = []
|
|
} finally {
|
|
this.loading = false
|
|
}
|
|
},
|
|
|
|
switchStatus(value) {
|
|
this.currentStatus = value
|
|
},
|
|
|
|
switchType(value) {
|
|
this.currentType = value
|
|
},
|
|
|
|
getTypeLabel(type) {
|
|
const map = { Pickup: '代取', Delivery: '代送', Help: '万能帮', Purchase: '代购', Food: '美食街' }
|
|
return map[type] || type
|
|
},
|
|
|
|
getStatusLabel(status) {
|
|
const map = {
|
|
Pending: '待接单', InProgress: '进行中', WaitConfirm: '待确认',
|
|
Completed: '已完成', Cancelled: '已取消', Appealing: '申诉中'
|
|
}
|
|
return map[status] || status
|
|
},
|
|
|
|
getStatusClass(status) {
|
|
const map = {
|
|
Pending: 'status-pending', InProgress: 'status-progress',
|
|
WaitConfirm: 'status-confirm', Completed: 'status-done',
|
|
Cancelled: 'status-cancel', Appealing: 'status-appeal'
|
|
}
|
|
return map[status] || ''
|
|
},
|
|
|
|
formatTime(dateStr) {
|
|
if (!dateStr) return '-'
|
|
const d = new Date(dateStr)
|
|
const pad = (n) => String(n).padStart(2, '0')
|
|
return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}`
|
|
},
|
|
|
|
/** 取消订单 */
|
|
onCancelOrder(order) {
|
|
uni.showModal({
|
|
title: '取消订单',
|
|
content: '确定取消该订单？',
|
|
success: async (res) => {
|
|
if (!res.confirm) return
|
|
try {
|
|
await cancelOrder(order.id)
|
|
uni.showToast({ title: '订单已取消', icon: 'success' })
|
|
this.loadOrders()
|
|
} catch (e) {
|
|
// 错误已在 request 中处理
|
|
}
|
|
}
|
|
})
|
|
},
|
|
|
|
/** 跳转订单详情 */
|
|
goDetail(order) {
|
|
uni.navigateTo({ url: `/pages/order/order-detail?id=${order.id}` })
|
|
},
|
|
|
|
/** 跳转聊天页 */
|
|
goChat(order) {
|
|
uni.navigateTo({ url: `/pages/message/chat?orderId=${order.id}` })
|
|
},
|
|
|
|
/** 跳转确认处理页 */
|
|
goConfirm(order) {
|
|
uni.navigateTo({ url: `/pages/order/complete-order?id=${order.id}&mode=confirm` })
|
|
},
|
|
|
|
/** 打开评价弹窗 */
|
|
openReview(order) {
|
|
this.reviewingOrder = order
|
|
this.reviewForm = { rating: 5, content: '' }
|
|
this.showReviewModal = true
|
|
},
|
|
|
|
/** 提交评价 */
|
|
async submitReviewAction() {
|
|
if (!this.reviewingOrder) return
|
|
if (this.reviewForm.rating < 1) {
|
|
uni.showToast({ title: '请选择评分', icon: 'none' })
|
|
return
|
|
}
|
|
this.reviewSubmitting = true
|
|
try {
|
|
await submitReview(this.reviewingOrder.id, {
|
|
rating: this.reviewForm.rating,
|
|
content: this.reviewForm.content
|
|
})
|
|
uni.showToast({ title: '评价成功', icon: 'success' })
|
|
this.showReviewModal = false
|
|
// 刷新列表，隐藏评价按钮
|
|
this.loadOrders()
|
|
} catch (e) {
|
|
// 错误已在 request 中处理
|
|
} finally {
|
|
this.reviewSubmitting = false
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.my-orders-page {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100vh;
|
|
background-color: #f5f5f5;
|
|
}
|
|
|
|
/* 状态筛选栏 */
|
|
.tab-bar {
|
|
white-space: nowrap;
|
|
background-color: #ffffff;
|
|
padding: 16rpx 24rpx;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.tab-item {
|
|
display: inline-block;
|
|
padding: 10rpx 24rpx;
|
|
margin-right: 12rpx;
|
|
font-size: 26rpx;
|
|
color: #666666;
|
|
border-radius: 28rpx;
|
|
background-color: #f5f5f5;
|
|
}
|
|
|
|
.tab-item.active {
|
|
background-color: #007AFF;
|
|
color: #ffffff;
|
|
}
|
|
|
|
/* 类型筛选栏 */
|
|
.type-bar {
|
|
white-space: nowrap;
|
|
background-color: #ffffff;
|
|
padding: 12rpx 24rpx;
|
|
border-top: 1rpx solid #f0f0f0;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.type-item {
|
|
display: inline-block;
|
|
padding: 8rpx 20rpx;
|
|
margin-right: 12rpx;
|
|
font-size: 24rpx;
|
|
color: #999999;
|
|
border-radius: 24rpx;
|
|
border: 1rpx solid #e0e0e0;
|
|
}
|
|
|
|
.type-item.active {
|
|
color: #007AFF;
|
|
border-color: #007AFF;
|
|
}
|
|
|
|
/* 订单列表 */
|
|
.order-list {
|
|
flex: 1;
|
|
padding: 16rpx 24rpx;
|
|
}
|
|
|
|
.loading-tip, .empty-tip {
|
|
text-align: center;
|
|
color: #999999;
|
|
font-size: 28rpx;
|
|
padding: 80rpx 0;
|
|
}
|
|
|
|
/* 订单卡片 */
|
|
.order-card {
|
|
background-color: #ffffff;
|
|
border-radius: 16rpx;
|
|
padding: 24rpx;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
|
|
.card-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 16rpx;
|
|
}
|
|
|
|
.order-type-tag {
|
|
font-size: 24rpx;
|
|
color: #ffffff;
|
|
background-color: #007AFF;
|
|
padding: 4rpx 16rpx;
|
|
border-radius: 8rpx;
|
|
}
|
|
|
|
.order-status {
|
|
font-size: 24rpx;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.status-pending { color: #faad14; }
|
|
.status-progress { color: #007AFF; }
|
|
.status-confirm { color: #ff9900; }
|
|
.status-done { color: #52c41a; }
|
|
.status-cancel { color: #999999; }
|
|
.status-appeal { color: #e64340; }
|
|
|
|
.card-body {
|
|
margin-bottom: 16rpx;
|
|
}
|
|
|
|
.info-row {
|
|
display: flex;
|
|
padding: 6rpx 0;
|
|
}
|
|
|
|
.info-label {
|
|
font-size: 26rpx;
|
|
color: #999999;
|
|
width: 140rpx;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.info-value {
|
|
font-size: 26rpx;
|
|
color: #333333;
|
|
flex: 1;
|
|
}
|
|
|
|
.info-value.price {
|
|
color: #e64340;
|
|
font-weight: bold;
|
|
}
|
|
|
|
/* 操作按钮 */
|
|
.card-footer {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
gap: 16rpx;
|
|
padding-top: 16rpx;
|
|
border-top: 1rpx solid #f0f0f0;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.btn {
|
|
padding: 12rpx 28rpx;
|
|
border-radius: 32rpx;
|
|
font-size: 26rpx;
|
|
}
|
|
|
|
.btn text {
|
|
font-size: 26rpx;
|
|
}
|
|
|
|
.btn-primary {
|
|
background-color: #007AFF;
|
|
}
|
|
|
|
.btn-primary text {
|
|
color: #ffffff;
|
|
}
|
|
|
|
.btn-detail {
|
|
border: 1rpx solid #007AFF;
|
|
}
|
|
|
|
.btn-detail text {
|
|
color: #007AFF;
|
|
}
|
|
|
|
.btn-cancel {
|
|
border: 1rpx solid #e64340;
|
|
}
|
|
|
|
.btn-cancel text {
|
|
color: #e64340;
|
|
}
|
|
|
|
.btn-contact {
|
|
border: 1rpx solid #52c41a;
|
|
}
|
|
|
|
.btn-contact text {
|
|
color: #52c41a;
|
|
}
|
|
|
|
/* 评价弹窗 */
|
|
.modal-mask {
|
|
position: fixed;
|
|
top: 0; left: 0; right: 0; bottom: 0;
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
z-index: 999;
|
|
}
|
|
|
|
.modal-content {
|
|
width: 600rpx;
|
|
background-color: #ffffff;
|
|
border-radius: 20rpx;
|
|
padding: 40rpx;
|
|
}
|
|
|
|
.modal-title {
|
|
font-size: 34rpx;
|
|
font-weight: bold;
|
|
color: #333333;
|
|
text-align: center;
|
|
display: block;
|
|
margin-bottom: 30rpx;
|
|
}
|
|
|
|
.star-row {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 16rpx;
|
|
margin-bottom: 30rpx;
|
|
}
|
|
|
|
.star {
|
|
font-size: 48rpx;
|
|
color: #dddddd;
|
|
}
|
|
|
|
.star.active {
|
|
color: #faad14;
|
|
}
|
|
|
|
.review-input {
|
|
width: 100%;
|
|
height: 160rpx;
|
|
border: 1rpx solid #e0e0e0;
|
|
border-radius: 12rpx;
|
|
padding: 16rpx;
|
|
font-size: 28rpx;
|
|
box-sizing: border-box;
|
|
margin-bottom: 30rpx;
|
|
}
|
|
|
|
.modal-actions {
|
|
display: flex;
|
|
gap: 20rpx;
|
|
}
|
|
|
|
.modal-btn {
|
|
flex: 1;
|
|
height: 80rpx;
|
|
line-height: 80rpx;
|
|
font-size: 30rpx;
|
|
border-radius: 40rpx;
|
|
border: none;
|
|
}
|
|
|
|
.modal-btn.cancel {
|
|
background-color: #f5f5f5;
|
|
color: #666666;
|
|
}
|
|
|
|
.modal-btn.confirm {
|
|
background-color: #007AFF;
|
|
color: #ffffff;
|
|
}
|
|
</style>
|