wangxiaowei/chazhi_teaspecialist_manage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

完善页面

Browse Source
This commit is contained in:
wangxiaowei
2025-12-29 00:12:44 +08:00
parent 720d532258
commit 1e6a4c46ab
3 changed files with 250 additions and 205 deletions
Download Patch File Download Diff File Expand all files Collapse all files

110
src/pages/order/order.vue
View File

@ -11,6 +11,41 @@
<template>
<view class="order-page pb-100rpx">
<!-- 消息提示框 -->
<wd-message-box selector="wd-message-box-slot" />
<!-- 地图选择弹窗 -->
<wd-popup v-model="showMapSelectPopup" lock-scroll custom-style="border-radius: 32rpx 32rpx 0rpx 0rpx;"
position="bottom" :z-index="200" :close-on-click-overlay="true">
<view class="map-select-popup">
<!-- 拖拽指示条 -->
<view class="popup-handle" />
<!-- 地图选项列表 -->
<view class="map-options">
<view class="map-option-item" @click="handleSelectMap('gaode')">
<text class="map-option-text">高德地图</text>
</view>
<view class="map-divider" />
<view class="map-option-item" @click="handleSelectMap('tencent')">
<text class="map-option-text">腾讯地图</text>
</view>
<view class="map-divider" />
<view class="map-option-item" @click="handleSelectMap('apple')">
<text class="map-option-text">苹果地图</text>
</view>
</view>
<!-- 取消按钮 -->
<view class="map-cancel-wrapper">
<view class="map-cancel-divider" />
<view class="map-option-item map-cancel-item" @click="showMapSelectPopup = false">
<text class="map-option-text map-cancel-text">取消</text>
</view>
</view>
</view>
</wd-popup>
<!-- 顶部搜索和标签栏 -->
<view class="order-header bg-[#F6F7F8]">
<wd-navbar safe-area-inset-top custom-class="!bg-[#F6F7F8]" :bordered="false" placeholder>
@ -22,12 +57,12 @@
</template>
</wd-navbar>
<view class="tabs">
<wd-tabs v-model="activeTab" swipeable @change="handleTabChange">
<wd-tab title="全部" name="all" />
<wd-tab title="待接单" name="pending" />
<wd-tab title="待服务" name="waiting" />
<wd-tab title="服务中" name="serving" />
<wd-tab title="已完成" name="completed" />
<wd-tabs v-model="activeTab" slidable="always" swipeable @change="handleTabChange">
<wd-tab title="全部" :name="TeaSpecialistManageOrderStatusText.All" />
<wd-tab title="待接单" :name="TeaSpecialistManageOrderStatusText.PendingOrder" />
<wd-tab title="待服务" :name="TeaSpecialistManageOrderStatusText.PendingService" />
<wd-tab title="服务中" :name="TeaSpecialistManageOrderStatusText.Service" />
<wd-tab title="已完成" :name="TeaSpecialistManageOrderStatusText.Finished" />
</wd-tabs>
</view>
</view>
@ -35,7 +70,6 @@
<!-- 订单列表 -->
<!-- <scroll-view class="order-list" scroll-y> -->
<mescroll-body ref="mescrollItem0" @init="mescrollInit" @down="downCallback" @up="Order.upCallback" :down="downOption" :up="upOption">
<view v-for="(order, index) in filteredOrders" :key="order.id || index" class="order-item mx-30rpx">
<!-- 订单内容区域（可点击跳转） -->
<view class="order-content" @click="handleOrderClick(order)">
@ -95,47 +129,6 @@
</view>
</view>
</mescroll-body>
<!-- 空状态 -->
<!-- <view v-if="filteredOrders.length === 0" class="empty-state">
<text class="empty-text">暂无订单</text>
</view>
</scroll-view> -->
<!-- 消息提示框 -->
<wd-message-box selector="wd-message-box-slot" />
<!-- 地图选择弹窗 -->
<wd-popup v-model="showMapSelectPopup" lock-scroll custom-style="border-radius: 32rpx 32rpx 0rpx 0rpx;"
position="bottom" :z-index="200" :close-on-click-overlay="true">
<view class="map-select-popup">
<!-- 拖拽指示条 -->
<view class="popup-handle" />
<!-- 地图选项列表 -->
<view class="map-options">
<view class="map-option-item" @click="handleSelectMap('gaode')">
<text class="map-option-text">高德地图</text>
</view>
<view class="map-divider" />
<view class="map-option-item" @click="handleSelectMap('tencent')">
<text class="map-option-text">腾讯地图</text>
</view>
<view class="map-divider" />
<view class="map-option-item" @click="handleSelectMap('apple')">
<text class="map-option-text">苹果地图</text>
</view>
</view>
<!-- 取消按钮 -->
<view class="map-cancel-wrapper">
<view class="map-cancel-divider" />
<view class="map-option-item map-cancel-item" @click="showMapSelectPopup = false">
<text class="map-option-text map-cancel-text">取消</text>
</view>
</view>
</view>
</wd-popup>
</view>
</template>
@ -145,6 +138,7 @@
import { router } from '@/utils/tools'
import { onPageScroll, onReachBottom } from '@dcloudio/uni-app'
import useMescroll from "@/uni_modules/mescroll-uni/hooks/useMescroll.js"
import { TeaSpecialistManageOrderStatusText } from '@/utils/order'
const OSS = inject('OSS')
@ -399,16 +393,16 @@
// 点击订单跳转到详情页
function handleOrderClick(order: any) {
console.log('点击订单', order)
if (order.status === 'pending') {
router.navigateTo(`/pages/order/pending-order-detail?id=${order.id}`)
}
else if (order.status === 'waiting' || order.status === 'waiting_arrived') {
router.navigateTo(`/pages/order/waiting-service-detail?id=${order.id}`)
}
else if (order.status === 'cancelled') {
router.navigateTo(`/pages/order/cancelled-order-detail?id=${order.id}`)
}
router.navigateTo(`/pages/order/detail?orderId=${order.id}`)
// if (order.status === 'pending') {
// router.navigateTo(`/pages/order/pending-order-detail?id=${order.id}`)
// }
// else if (order.status === 'waiting' || order.status === 'waiting_arrived') {
// router.navigateTo(`/pages/order/waiting-service-detail?id=${order.id}`)
// }
// else if (order.status === 'cancelled') {
// router.navigateTo(`/pages/order/cancelled-order-detail?id=${order.id}`)
// }
}
// 选择地图应用

304
src/pages/order/pending-order-detail.vue
View File

@ -8,143 +8,20 @@
<template>
<view class="pending-order-detail-page" :class="{ 'popup-open': showCostDetailPopup }">
<!-- 消息提示框 -->
<wd-message-box selector="wd-message-box-slot" />
<!-- 导航栏 -->
<navbar title="待接单" custom-class="!bg-[#F6F7F8]">
<template #right>
<view class="navbar-right-icons">
<wd-icon name="more" size="40rpx" color="#303133" class="mr-24rpx" />
<wd-icon name="eye" size="40rpx" color="#303133" />
</view>
</template>
</navbar>
<!-- 倒计时提示 -->
<!-- <view class="countdown-tip">
<text class="countdown-text">还剩</text>
<text class="countdown-time">{{ countdownTime }}</text>
<text class="countdown-text">订单自动取消</text>
</view> -->
<view class="mx-30rpx">
<view class="coupon-bg h-400rpx">
<!-- 订单卡片 -->
<view class="order-card" style="position: relative;">
<view class="price-btn" @click.stop="handlePriceClick">
<price-format color="#FFFFFF" :first-size="32" :second-size="32" :subscript-size="24"
:price="orderData.price" />
<wd-icon name="arrow-right" size="24rpx" color="#FFFFFF" class="ml-8rpx" />
</view>
<view class="order-card-header">
<view class="order-icon-wrapper ">
<wd-img width="40rpx" height="40rpx" :src="`${OSS}images/chayishi/order-icon.png`"
mode="aspectFill" />
</view>
<text class="order-card-title ml-10rpx">订单</text>
</view>
<view class="order-card-content ml-50rpx">
<text class="service-name">{{ orderData.serviceName }}</text>
</view>
<view class="pb-100rpx">
<!-- 用户订单备注内容 -->
<wd-popup v-model="showOrderMarksPopup" lock-scroll custom-style="border-radius: 32rpx 32rpx 0rpx 0rpx;" position="bottom">
<view class="relative pb-26rpx">
<view class="absolute top-18rpx right-30rpx" @click="showOrderMarksPopup = false">
<wd-img width="60rpx" height='60rpx' :src="`${OSS}icon/icon_close.png`"></wd-img>
</view>
<!-- 预约信息 -->
<view class="px-30rpx pt-50rpx pb-40rpx">
<view class="info-card-title">
预约信息
</view>
<view class="info-item">
<text class="info-label">预约时间:</text>
<text class="info-value">{{ orderData.appointmentTimeFull }}</text>
</view>
<view class="info-item">
<text class="info-label">预约时长:</text>
<text class="info-value">{{ orderData.duration }}</text>
</view>
<view class="text-36rpx text-[#121212] leading-50rpx text-center pt-50rpx pb-40rpx">订单备注</view>
<view>
</view>
</view>
</wd-popup>
<!-- 茶艺服务 -->
<view class="info-card">
<view class="info-card-title">
茶艺服务
</view>
<view class="info-item">
<text class="info-label">服务人数</text>
<text class="info-value">{{ orderData.servicePeople }}人</text>
</view>
<view class="info-item">
<text class="info-label">预定茶叶</text>
<text class="info-value">{{ orderData.teaName }}</text>
</view>
<view class="info-item">
<text class="info-label">茶具使用</text>
<text class="info-value">{{ orderData.teawareUsage }}</text>
</view>
</view>
<!-- 订单备注 -->
<view v-if="orderData.notes" class="info-card">
<view class="info-card-title">
<wd-icon name="chat" size="32rpx" color="#303133" class="mr-8rpx" />
订单备注
</view>
<view class="info-item">
<text class="info-label">备注信息</text>
<text class="info-value">{{ orderData.notes }}</text>
</view>
</view>
<!-- 服务方式 -->
<view class="info-card">
<view class="info-card-title">
服务方式
</view>
<view class="info-item">
<text class="info-label">服务方式</text>
<text class="info-value">{{ orderData.serviceType }}</text>
</view>
<view class="info-item">
<text class="info-label">服务地址</text>
<view class="address-wrapper">
<text class="info-value">{{ orderData.address }}</text>
<wd-icon name="location" size="32rpx" color="#4C9F44" class="ml-16rpx"
@click.stop="handleNavigate" />
</view>
</view>
</view>
<!-- 订单信息 -->
<view class="info-card">
<view class="info-card-title">
订单信息
</view>
<view class="info-item">
<text class="info-label">订单编号</text>
<view class="order-sn-wrapper">
<text class="info-value">{{ orderData.orderSn }}</text>
<text class="copy-text" @click.stop="handleCopyOrderSn">|复制</text>
</view>
</view>
<view class="info-item">
<text class="info-label">交易方式</text>
<text class="info-value">{{ orderData.paymentMethod }}</text>
</view>
<view class="info-item">
<text class="info-label">创建时间</text>
<text class="info-value">{{ orderData.createTime }}</text>
</view>
<view class="info-item">
<text class="info-label">付款时间</text>
<text class="info-value">{{ orderData.payTime }}</text>
</view>
</view>
<!-- 底部占位，避免内容被按钮遮挡 -->
<view class="bottom-placeholder" />
</view>
<!-- 费用明细弹窗 -->
<wd-popup v-model="showCostDetailPopup" lock-scroll custom-style="border-radius: 32rpx 32rpx 0rpx 0rpx;"
@ -160,13 +37,14 @@
费用明细
</view>
<scroll-view class="cost-content" scroll-y>
<scroll-view class="cost-content !pb-40rpx" scroll-y :show-scrollbar="false" :enhanced="true">
<!-- 订单总额 -->
<view class="cost-item">
<text class="cost-label">订单总额</text>
<text class="cost-value">¥ {{ costDetail.orderTotal.toFixed(2) }}</text>
</view>
<view class="bg-[#FBFBFB] py-24rpx px-30rpx rounded-16rpx">
<!-- 服务费 -->
<view class="cost-item">
<text class="cost-label">服务费</text>
@ -211,11 +89,13 @@
<text class="cost-sub-value discount">- ¥ {{ costDetail.couponDiscount }}</text>
</view>
</view>
<!-- 分隔线 -->
<view class="cost-divider" />
<!-- 扣除费用区域 -->
<view class="deduct-section">
<view class="deduct-section rounded-16rpx">
<view class="cost-item">
<text class="cost-label">扣除费用</text>
<text class="cost-value">¥ {{ costDetail.deductFee.toFixed(2) }}</text>
@ -235,8 +115,137 @@
</view>
</wd-popup>
<!-- 消息提示框 -->
<wd-message-box selector="wd-message-box-slot" />
<!-- 导航栏 -->
<navbar title="待接单" custom-class="!bg-[#F6F7F8]"></navbar>
<view class="mx-30rpx">
<view class="h-374rpx bg-white rounded-16rpx">
<!-- 订单卡片 -->
<view class="order-card relative">
<view class="price-btn" @click.stop="handlePriceClick">
<price-format color="#FFFFFF" :first-size="32" :second-size="32" :subscript-size="24"
:price="orderData.price" />
<wd-icon name="arrow-right" size="24rpx" color="#FFFFFF" class="ml-8rpx" />
</view>
<view class="order-card-header">
<view class="order-icon-wrapper ">
<wd-img width="40rpx" height="40rpx" :src="`${OSS}images/chayishi/order-icon.png`"
mode="aspectFill" />
</view>
<text class="order-card-title ml-10rpx">订单</text>
</view>
<view class="order-card-content ml-50rpx">
<text class="service-name">{{ orderData.serviceName }}</text>
</view>
</view>
<view class="border-2rpx border-dashed border-[#E5E5E5]"></view>
<!-- 预约信息 -->
<view class="px-30rpx pt-20rpx pb-40rpx">
<view class="info-card-title">
预约信息
</view>
<view class="info-item">
<text class="info-label">预约时间:</text>
<text class="info-value">{{ orderData.appointmentTimeFull }}</text>
</view>
<view class="info-item">
<text class="info-label">预约时长:</text>
<text class="info-value">{{ orderData.duration }}</text>
</view>
</view>
</view>
<!-- 茶艺服务 -->
<view class="info-card">
<view class="info-card-title">
茶艺服务
</view>
<view class="info-item">
<text class="info-label">服务人数</text>
<text class="info-value">{{ orderData.servicePeople }}人</text>
</view>
<view class="info-item">
<text class="info-label">预定茶叶</text>
<text class="info-value">{{ orderData.teaName }}</text>
</view>
<view class="info-item">
<text class="info-label">茶具使用</text>
<text class="info-value">{{ orderData.teawareUsage }}</text>
</view>
</view>
<!-- TODO 订单备注有内容在显示 -->
<view class="bg-[#FFFDF7] px-30rpx py-20rpx rounded-16rpx mt-20rpx" @click="showOrderMarksPopup = true">
<view class="info-card-title">
<wd-img :src="`${OSS}icon/icon_tips2.png`" width="40rpx" height="40rpx"></wd-img>
<view class="ml-12rpx">订单备注</view>
</view>
<view class="flex items-start">
<text class="text-28rpx leading-40rpx text-[#606266]">备注信息</text>
<text class="text-28rpx text-[#303133] ml-50rpx line-2 w-450rpx">12311231231231231221231123123123123122123112312312312312212311231231231231221231123123123123122123112312312312312212311231231231231221231123123123123122123112312312312312212311231231231231221231123123123123122</text>
</view>
</view>
<!-- 服务方式 -->
<view class="info-card">
<view class="info-card-title">
服务方式
</view>
<view class="info-item flex items-center">
<view class="info-label">服务方式</view>
<view class="info-value">{{ orderData.serviceType }}</view>
</view>
<view class="info-item flex items-center">
<view class="info-label mt-12rpx">服务地址</view>
<view class="address-wrapper flex items-center">
<view class="info-value w-200rpx line-1">{{ orderData.address }}</view>
<wd-img :src="`${OSS}icon/icon_nav.png`" width="64rpx" height="64rpx" @click.stop="handleNavigate"></wd-img>
</view>
</view>
</view>
<!-- 订单信息 -->
<view class="info-card">
<view class="info-card-title">
订单信息
</view>
<view class="info-item flex justify-between items-center">
<text class="info-label">订单编号</text>
<view class="order-sn-wrapper">
<text class="info-value">{{ orderData.orderSn }}</text>
<text class="copy-text" @click.stop="handleCopyOrderSn">|复制</text>
</view>
</view>
<view class="info-item flex items-center justify-between">
<view class="info-label">交易方式</view>
<view class="info-value text-right">{{ orderData.paymentMethod }}</view>
</view>
<view class="info-item flex items-center justify-between">
<view class="info-label">创建时间</view>
<view class="info-value text-right">{{ orderData.createTime }}</view>
</view>
<view class="info-item flex items-center justify-between">
<view class="info-label">付款时间</view>
<view class="info-value text-right">{{ orderData.payTime }}</view>
</view>
</view>
<!-- 底部占位，避免内容被按钮遮挡 -->
<view class="bottom-placeholder" />
</view>
<view class="w-full fixed bottom-0 left-0 right-0 bg-white h-152rpx flex justify-between items-center px-58rpx">
<view class="w-112rpx h-90rpx text-[#606266] text-28rpx leading-90rpx">放弃接单</view>
<view class="w-360rpx h-90rpx bg-[#4C9F44] rounded-8rpx text-[#fff] text-center leading-90rpx">立即接单</view>
</view>
<!-- 底部操作按钮 -->
<view class="bottom-actions" @click.stop>
<!-- <view class="bottom-actions" @click.stop>
<wd-button type="default" plain
custom-class="!border-[#dcdfe6] !text-[#909399] !bg-[#F6F7F8] !border-2rpx !text-32rpx !px-32rpx !h-88rpx !leading-88rpx !rounded-8rpx !flex-1"
@click.stop="handleDecline">
@ -247,7 +256,7 @@
@click.stop="handleAccept">
立即接单
</wd-button>
</view>
</view> -->
</view>
</template>
@ -259,6 +268,9 @@ import { copy } from '@/utils/tools'
const OSS = inject('OSS')
// 订单备注
const showOrderMarksPopup = ref<boolean>(false)
// 消息提示框
const message = useMessage('wd-message-box-slot')
@ -427,20 +439,10 @@ onUnload(() => {
<style lang="scss">
page {
background-color: #f5f5f5;
background-color: $cz-page-background;
height: 100%;
}
.coupon-bg {
background-image: url(#{$OSS}images/order/order_image2.png);
background-repeat: no-repeat;
background-size: 100% 100%;
}
.pending-order-detail-page {
background-color: #f5f5f5;
}
.navbar-right-icons {
display: flex;
align-items: center;
@ -742,4 +744,12 @@ page {
color: #303133;
line-height: 42rpx;
}
.line-2 {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
word-break: break-all;
}
</style>

41
src/utils/order.ts
View File

@ -381,3 +381,44 @@ export const AdminOrderStatusValue: Record<AdminOrderStatusText, string | number
[AdminOrderStatusText.Finished]: 3,
[AdminOrderStatusText.Cancelled]: 4,
}
/* 上面的代码可能用不到了，以后优化的时候需要删除 */
// 茶艺师-订单管理状态
export enum TeaSpecialistManageOrderStatus {
PendingOrder = 0, // 待接单
PendingService = 1, // 待服务
Service = 2, // 服务中
Finished = 3, // 已完成（已完结）
Cancelled = 4, // 取消订单（已取消）
}
// 茶艺师-订单状态文本
export enum TeaSpecialistManageOrderStatusText {
All = 'all', // 全部
PendingOrder = 'pendingOrder', // 待接单
PendingService = 'pendingService', // 待服务
Service = 'service',// 服务中
Finished = 'finished', // 已完成（已完结）
Cancelled = 'cancelled', // 取消订单（已取消）
}
// 茶艺师-状态内容映射
export const TeaSpecialistManageStatusTextValue: Record<TeaSpecialistManageOrderStatus, any> = {
[TeaSpecialistManageOrderStatus.PendingOrder]: {
title: '待接单'
},
[TeaSpecialistManageOrderStatus.PendingService]: {
title: ' 待服务'
},
[TeaSpecialistManageOrderStatus.Service]: {
title: '服务中'
},
[TeaSpecialistManageOrderStatus.Finished]: {
title: '服务完成'
},
[TeaSpecialistManageOrderStatus.Cancelled]: {
title: '订单取消'
},
}