完善页面
This commit is contained in:
@ -11,6 +11,41 @@
|
|||||||
|
|
||||||
<template>
|
<template>
|
||||||
<view class="order-page pb-100rpx">
|
<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]">
|
<view class="order-header bg-[#F6F7F8]">
|
||||||
<wd-navbar safe-area-inset-top custom-class="!bg-[#F6F7F8]" :bordered="false" placeholder>
|
<wd-navbar safe-area-inset-top custom-class="!bg-[#F6F7F8]" :bordered="false" placeholder>
|
||||||
@ -22,12 +57,12 @@
|
|||||||
</template>
|
</template>
|
||||||
</wd-navbar>
|
</wd-navbar>
|
||||||
<view class="tabs">
|
<view class="tabs">
|
||||||
<wd-tabs v-model="activeTab" swipeable @change="handleTabChange">
|
<wd-tabs v-model="activeTab" slidable="always" swipeable @change="handleTabChange">
|
||||||
<wd-tab title="全部" name="all" />
|
<wd-tab title="全部" :name="TeaSpecialistManageOrderStatusText.All" />
|
||||||
<wd-tab title="待接单" name="pending" />
|
<wd-tab title="待接单" :name="TeaSpecialistManageOrderStatusText.PendingOrder" />
|
||||||
<wd-tab title="待服务" name="waiting" />
|
<wd-tab title="待服务" :name="TeaSpecialistManageOrderStatusText.PendingService" />
|
||||||
<wd-tab title="服务中" name="serving" />
|
<wd-tab title="服务中" :name="TeaSpecialistManageOrderStatusText.Service" />
|
||||||
<wd-tab title="已完成" name="completed" />
|
<wd-tab title="已完成" :name="TeaSpecialistManageOrderStatusText.Finished" />
|
||||||
</wd-tabs>
|
</wd-tabs>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
@ -35,7 +70,6 @@
|
|||||||
<!-- 订单列表 -->
|
<!-- 订单列表 -->
|
||||||
<!-- <scroll-view class="order-list" scroll-y> -->
|
<!-- <scroll-view class="order-list" scroll-y> -->
|
||||||
<mescroll-body ref="mescrollItem0" @init="mescrollInit" @down="downCallback" @up="Order.upCallback" :down="downOption" :up="upOption">
|
<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 v-for="(order, index) in filteredOrders" :key="order.id || index" class="order-item mx-30rpx">
|
||||||
<!-- 订单内容区域(可点击跳转) -->
|
<!-- 订单内容区域(可点击跳转) -->
|
||||||
<view class="order-content" @click="handleOrderClick(order)">
|
<view class="order-content" @click="handleOrderClick(order)">
|
||||||
@ -95,47 +129,6 @@
|
|||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</mescroll-body>
|
</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>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@ -145,6 +138,7 @@
|
|||||||
import { router } from '@/utils/tools'
|
import { router } from '@/utils/tools'
|
||||||
import { onPageScroll, onReachBottom } from '@dcloudio/uni-app'
|
import { onPageScroll, onReachBottom } from '@dcloudio/uni-app'
|
||||||
import useMescroll from "@/uni_modules/mescroll-uni/hooks/useMescroll.js"
|
import useMescroll from "@/uni_modules/mescroll-uni/hooks/useMescroll.js"
|
||||||
|
import { TeaSpecialistManageOrderStatusText } from '@/utils/order'
|
||||||
|
|
||||||
const OSS = inject('OSS')
|
const OSS = inject('OSS')
|
||||||
|
|
||||||
@ -399,16 +393,16 @@
|
|||||||
|
|
||||||
// 点击订单跳转到详情页
|
// 点击订单跳转到详情页
|
||||||
function handleOrderClick(order: any) {
|
function handleOrderClick(order: any) {
|
||||||
console.log('点击订单', order)
|
router.navigateTo(`/pages/order/detail?orderId=${order.id}`)
|
||||||
if (order.status === 'pending') {
|
// if (order.status === 'pending') {
|
||||||
router.navigateTo(`/pages/order/pending-order-detail?id=${order.id}`)
|
// router.navigateTo(`/pages/order/pending-order-detail?id=${order.id}`)
|
||||||
}
|
// }
|
||||||
else if (order.status === 'waiting' || order.status === 'waiting_arrived') {
|
// else if (order.status === 'waiting' || order.status === 'waiting_arrived') {
|
||||||
router.navigateTo(`/pages/order/waiting-service-detail?id=${order.id}`)
|
// router.navigateTo(`/pages/order/waiting-service-detail?id=${order.id}`)
|
||||||
}
|
// }
|
||||||
else if (order.status === 'cancelled') {
|
// else if (order.status === 'cancelled') {
|
||||||
router.navigateTo(`/pages/order/cancelled-order-detail?id=${order.id}`)
|
// router.navigateTo(`/pages/order/cancelled-order-detail?id=${order.id}`)
|
||||||
}
|
// }
|
||||||
}
|
}
|
||||||
|
|
||||||
// 选择地图应用
|
// 选择地图应用
|
||||||
|
|||||||
@ -8,31 +8,124 @@
|
|||||||
|
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<view class="pending-order-detail-page" :class="{ 'popup-open': showCostDetailPopup }">
|
<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="text-36rpx text-[#121212] leading-50rpx text-center pt-50rpx pb-40rpx">订单备注</view>
|
||||||
|
<view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</wd-popup>
|
||||||
|
|
||||||
|
|
||||||
|
<!-- 费用明细弹窗 -->
|
||||||
|
<wd-popup v-model="showCostDetailPopup" lock-scroll custom-style="border-radius: 32rpx 32rpx 0rpx 0rpx;"
|
||||||
|
position="bottom" :z-index="200" :close-on-click-overlay="true">
|
||||||
|
<view class="cost-detail-popup">
|
||||||
|
<!-- 关闭按钮 -->
|
||||||
|
<view class="close-btn" @click="showCostDetailPopup = false">
|
||||||
|
<wd-icon name="close" size="40rpx" color="#303133" />
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 标题 -->
|
||||||
|
<view class="popup-title">
|
||||||
|
费用明细
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<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>
|
||||||
|
<text class="cost-value">¥ {{ costDetail.serviceFee.toFixed(2) }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="cost-sub-item">
|
||||||
|
<text class="cost-sub-label">服务费 (¥ {{ costDetail.serviceFeePerHour }}元/小时)</text>
|
||||||
|
<text class="cost-sub-value">x{{ costDetail.serviceHours }}</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 车马费 -->
|
||||||
|
<view class="cost-item">
|
||||||
|
<text class="cost-label">车马费</text>
|
||||||
|
<text class="cost-value">¥ {{ costDetail.travelFee.toFixed(2) }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="cost-sub-item">
|
||||||
|
<text class="cost-sub-label">车马费 (¥ {{ costDetail.travelFeePerKm }}元/公里)</text>
|
||||||
|
<text class="cost-sub-value">{{ costDetail.distance }}公里</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 茶艺服务 -->
|
||||||
|
<view class="cost-item">
|
||||||
|
<text class="cost-label">茶艺服务</text>
|
||||||
|
<text class="cost-value">¥ {{ costDetail.teaServiceFee.toFixed(2) }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="cost-sub-item">
|
||||||
|
<text class="cost-sub-label">{{ costDetail.teaName }}</text>
|
||||||
|
<text class="cost-sub-value">¥ {{ costDetail.teaPrice }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="cost-sub-item">
|
||||||
|
<text class="cost-sub-label">茶具使用</text>
|
||||||
|
<text class="cost-sub-value">¥ {{ costDetail.teawarePrice }}</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 优惠 -->
|
||||||
|
<view class="cost-item">
|
||||||
|
<text class="cost-label">优惠</text>
|
||||||
|
<text class="cost-value discount">- ¥ {{ costDetail.discount.toFixed(2) }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="cost-sub-item">
|
||||||
|
<text class="cost-sub-label">优惠券</text>
|
||||||
|
<text class="cost-sub-value discount">- ¥ {{ costDetail.couponDiscount }}</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 分隔线 -->
|
||||||
|
<view class="cost-divider" />
|
||||||
|
|
||||||
|
<!-- 扣除费用区域 -->
|
||||||
|
<view class="deduct-section rounded-16rpx">
|
||||||
|
<view class="cost-item">
|
||||||
|
<text class="cost-label">扣除费用</text>
|
||||||
|
<text class="cost-value">¥ {{ costDetail.deductFee.toFixed(2) }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="cost-sub-item">
|
||||||
|
<text class="cost-sub-label">平台服务费</text>
|
||||||
|
<text class="cost-sub-value">¥ {{ costDetail.platformFee.toFixed(2) }}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 实际收入 -->
|
||||||
|
<view class="actual-income">
|
||||||
|
<text class="actual-income-label">实际收入</text>
|
||||||
|
<text class="actual-income-value">¥ {{ costDetail.actualIncome.toFixed(2) }}</text>
|
||||||
|
</view>
|
||||||
|
</scroll-view>
|
||||||
|
</view>
|
||||||
|
</wd-popup>
|
||||||
|
|
||||||
|
|
||||||
<!-- 消息提示框 -->
|
<!-- 消息提示框 -->
|
||||||
<wd-message-box selector="wd-message-box-slot" />
|
<wd-message-box selector="wd-message-box-slot" />
|
||||||
|
|
||||||
<!-- 导航栏 -->
|
<!-- 导航栏 -->
|
||||||
<navbar title="待接单" custom-class="!bg-[#F6F7F8]">
|
<navbar title="待接单" custom-class="!bg-[#F6F7F8]"></navbar>
|
||||||
<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="mx-30rpx">
|
||||||
<view class="coupon-bg h-400rpx">
|
<view class="h-374rpx bg-white rounded-16rpx">
|
||||||
<!-- 订单卡片 -->
|
<!-- 订单卡片 -->
|
||||||
<view class="order-card" style="position: relative;">
|
<view class="order-card relative">
|
||||||
<view class="price-btn" @click.stop="handlePriceClick">
|
<view class="price-btn" @click.stop="handlePriceClick">
|
||||||
<price-format color="#FFFFFF" :first-size="32" :second-size="32" :subscript-size="24"
|
<price-format color="#FFFFFF" :first-size="32" :second-size="32" :subscript-size="24"
|
||||||
:price="orderData.price" />
|
:price="orderData.price" />
|
||||||
@ -50,8 +143,10 @@
|
|||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
|
<view class="border-2rpx border-dashed border-[#E5E5E5]"></view>
|
||||||
|
|
||||||
<!-- 预约信息 -->
|
<!-- 预约信息 -->
|
||||||
<view class="px-30rpx pt-50rpx pb-40rpx">
|
<view class="px-30rpx pt-20rpx pb-40rpx">
|
||||||
<view class="info-card-title">
|
<view class="info-card-title">
|
||||||
预约信息
|
预约信息
|
||||||
</view>
|
</view>
|
||||||
@ -85,15 +180,15 @@
|
|||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<!-- 订单备注 -->
|
<!-- TODO 订单备注有内容在显示 -->
|
||||||
<view v-if="orderData.notes" class="info-card">
|
<view class="bg-[#FFFDF7] px-30rpx py-20rpx rounded-16rpx mt-20rpx" @click="showOrderMarksPopup = true">
|
||||||
<view class="info-card-title">
|
<view class="info-card-title">
|
||||||
<wd-icon name="chat" size="32rpx" color="#303133" class="mr-8rpx" />
|
<wd-img :src="`${OSS}icon/icon_tips2.png`" width="40rpx" height="40rpx"></wd-img>
|
||||||
订单备注
|
<view class="ml-12rpx">订单备注</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="info-item">
|
<view class="flex items-start">
|
||||||
<text class="info-label">备注信息</text>
|
<text class="text-28rpx leading-40rpx text-[#606266]">备注信息</text>
|
||||||
<text class="info-value">{{ orderData.notes }}</text>
|
<text class="text-28rpx text-[#303133] ml-50rpx line-2 w-450rpx">12311231231231231221231123123123123122123112312312312312212311231231231231221231123123123123122123112312312312312212311231231231231221231123123123123122123112312312312312212311231231231231221231123123123123122</text>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
@ -102,16 +197,15 @@
|
|||||||
<view class="info-card-title">
|
<view class="info-card-title">
|
||||||
服务方式
|
服务方式
|
||||||
</view>
|
</view>
|
||||||
<view class="info-item">
|
<view class="info-item flex items-center">
|
||||||
<text class="info-label">服务方式</text>
|
<view class="info-label">服务方式</view>
|
||||||
<text class="info-value">{{ orderData.serviceType }}</text>
|
<view class="info-value">{{ orderData.serviceType }}</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="info-item">
|
<view class="info-item flex items-center">
|
||||||
<text class="info-label">服务地址</text>
|
<view class="info-label mt-12rpx">服务地址</view>
|
||||||
<view class="address-wrapper">
|
<view class="address-wrapper flex items-center">
|
||||||
<text class="info-value">{{ orderData.address }}</text>
|
<view class="info-value w-200rpx line-1">{{ orderData.address }}</view>
|
||||||
<wd-icon name="location" size="32rpx" color="#4C9F44" class="ml-16rpx"
|
<wd-img :src="`${OSS}icon/icon_nav.png`" width="64rpx" height="64rpx" @click.stop="handleNavigate"></wd-img>
|
||||||
@click.stop="handleNavigate" />
|
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
@ -121,24 +215,24 @@
|
|||||||
<view class="info-card-title">
|
<view class="info-card-title">
|
||||||
订单信息
|
订单信息
|
||||||
</view>
|
</view>
|
||||||
<view class="info-item">
|
<view class="info-item flex justify-between items-center">
|
||||||
<text class="info-label">订单编号</text>
|
<text class="info-label">订单编号</text>
|
||||||
<view class="order-sn-wrapper">
|
<view class="order-sn-wrapper">
|
||||||
<text class="info-value">{{ orderData.orderSn }}</text>
|
<text class="info-value">{{ orderData.orderSn }}</text>
|
||||||
<text class="copy-text" @click.stop="handleCopyOrderSn">|复制</text>
|
<text class="copy-text" @click.stop="handleCopyOrderSn">|复制</text>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="info-item">
|
<view class="info-item flex items-center justify-between">
|
||||||
<text class="info-label">交易方式</text>
|
<view class="info-label">交易方式</view>
|
||||||
<text class="info-value">{{ orderData.paymentMethod }}</text>
|
<view class="info-value text-right">{{ orderData.paymentMethod }}</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="info-item">
|
<view class="info-item flex items-center justify-between">
|
||||||
<text class="info-label">创建时间</text>
|
<view class="info-label">创建时间</view>
|
||||||
<text class="info-value">{{ orderData.createTime }}</text>
|
<view class="info-value text-right">{{ orderData.createTime }}</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="info-item">
|
<view class="info-item flex items-center justify-between">
|
||||||
<text class="info-label">付款时间</text>
|
<view class="info-label">付款时间</view>
|
||||||
<text class="info-value">{{ orderData.payTime }}</text>
|
<view class="info-value text-right">{{ orderData.payTime }}</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
@ -146,97 +240,12 @@
|
|||||||
<view class="bottom-placeholder" />
|
<view class="bottom-placeholder" />
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<!-- 费用明细弹窗 -->
|
<view class="w-full fixed bottom-0 left-0 right-0 bg-white h-152rpx flex justify-between items-center px-58rpx">
|
||||||
<wd-popup v-model="showCostDetailPopup" lock-scroll custom-style="border-radius: 32rpx 32rpx 0rpx 0rpx;"
|
<view class="w-112rpx h-90rpx text-[#606266] text-28rpx leading-90rpx">放弃接单</view>
|
||||||
position="bottom" :z-index="200" :close-on-click-overlay="true">
|
<view class="w-360rpx h-90rpx bg-[#4C9F44] rounded-8rpx text-[#fff] text-center leading-90rpx">立即接单</view>
|
||||||
<view class="cost-detail-popup">
|
</view>
|
||||||
<!-- 关闭按钮 -->
|
|
||||||
<view class="close-btn" @click="showCostDetailPopup = false">
|
|
||||||
<wd-icon name="close" size="40rpx" color="#303133" />
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<!-- 标题 -->
|
|
||||||
<view class="popup-title">
|
|
||||||
费用明细
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<scroll-view class="cost-content" scroll-y>
|
|
||||||
<!-- 订单总额 -->
|
|
||||||
<view class="cost-item">
|
|
||||||
<text class="cost-label">订单总额</text>
|
|
||||||
<text class="cost-value">¥ {{ costDetail.orderTotal.toFixed(2) }}</text>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<!-- 服务费 -->
|
|
||||||
<view class="cost-item">
|
|
||||||
<text class="cost-label">服务费</text>
|
|
||||||
<text class="cost-value">¥ {{ costDetail.serviceFee.toFixed(2) }}</text>
|
|
||||||
</view>
|
|
||||||
<view class="cost-sub-item">
|
|
||||||
<text class="cost-sub-label">服务费 (¥ {{ costDetail.serviceFeePerHour }}元/小时)</text>
|
|
||||||
<text class="cost-sub-value">x{{ costDetail.serviceHours }}</text>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<!-- 车马费 -->
|
|
||||||
<view class="cost-item">
|
|
||||||
<text class="cost-label">车马费</text>
|
|
||||||
<text class="cost-value">¥ {{ costDetail.travelFee.toFixed(2) }}</text>
|
|
||||||
</view>
|
|
||||||
<view class="cost-sub-item">
|
|
||||||
<text class="cost-sub-label">车马费 (¥ {{ costDetail.travelFeePerKm }}元/公里)</text>
|
|
||||||
<text class="cost-sub-value">{{ costDetail.distance }}公里</text>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<!-- 茶艺服务 -->
|
|
||||||
<view class="cost-item">
|
|
||||||
<text class="cost-label">茶艺服务</text>
|
|
||||||
<text class="cost-value">¥ {{ costDetail.teaServiceFee.toFixed(2) }}</text>
|
|
||||||
</view>
|
|
||||||
<view class="cost-sub-item">
|
|
||||||
<text class="cost-sub-label">{{ costDetail.teaName }}</text>
|
|
||||||
<text class="cost-sub-value">¥ {{ costDetail.teaPrice }}</text>
|
|
||||||
</view>
|
|
||||||
<view class="cost-sub-item">
|
|
||||||
<text class="cost-sub-label">茶具使用</text>
|
|
||||||
<text class="cost-sub-value">¥ {{ costDetail.teawarePrice }}</text>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<!-- 优惠 -->
|
|
||||||
<view class="cost-item">
|
|
||||||
<text class="cost-label">优惠</text>
|
|
||||||
<text class="cost-value discount">- ¥ {{ costDetail.discount.toFixed(2) }}</text>
|
|
||||||
</view>
|
|
||||||
<view class="cost-sub-item">
|
|
||||||
<text class="cost-sub-label">优惠券</text>
|
|
||||||
<text class="cost-sub-value discount">- ¥ {{ costDetail.couponDiscount }}</text>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<!-- 分隔线 -->
|
|
||||||
<view class="cost-divider" />
|
|
||||||
|
|
||||||
<!-- 扣除费用区域 -->
|
|
||||||
<view class="deduct-section">
|
|
||||||
<view class="cost-item">
|
|
||||||
<text class="cost-label">扣除费用</text>
|
|
||||||
<text class="cost-value">¥ {{ costDetail.deductFee.toFixed(2) }}</text>
|
|
||||||
</view>
|
|
||||||
<view class="cost-sub-item">
|
|
||||||
<text class="cost-sub-label">平台服务费</text>
|
|
||||||
<text class="cost-sub-value">¥ {{ costDetail.platformFee.toFixed(2) }}</text>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<!-- 实际收入 -->
|
|
||||||
<view class="actual-income">
|
|
||||||
<text class="actual-income-label">实际收入</text>
|
|
||||||
<text class="actual-income-value">¥ {{ costDetail.actualIncome.toFixed(2) }}</text>
|
|
||||||
</view>
|
|
||||||
</scroll-view>
|
|
||||||
</view>
|
|
||||||
</wd-popup>
|
|
||||||
|
|
||||||
<!-- 底部操作按钮 -->
|
<!-- 底部操作按钮 -->
|
||||||
<view class="bottom-actions" @click.stop>
|
<!-- <view class="bottom-actions" @click.stop>
|
||||||
<wd-button type="default" plain
|
<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"
|
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">
|
@click.stop="handleDecline">
|
||||||
@ -247,7 +256,7 @@
|
|||||||
@click.stop="handleAccept">
|
@click.stop="handleAccept">
|
||||||
立即接单
|
立即接单
|
||||||
</wd-button>
|
</wd-button>
|
||||||
</view>
|
</view> -->
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@ -259,6 +268,9 @@ import { copy } from '@/utils/tools'
|
|||||||
|
|
||||||
const OSS = inject('OSS')
|
const OSS = inject('OSS')
|
||||||
|
|
||||||
|
// 订单备注
|
||||||
|
const showOrderMarksPopup = ref<boolean>(false)
|
||||||
|
|
||||||
// 消息提示框
|
// 消息提示框
|
||||||
const message = useMessage('wd-message-box-slot')
|
const message = useMessage('wd-message-box-slot')
|
||||||
|
|
||||||
@ -427,20 +439,10 @@ onUnload(() => {
|
|||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
page {
|
page {
|
||||||
background-color: #f5f5f5;
|
background-color: $cz-page-background;
|
||||||
height: 100%;
|
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 {
|
.navbar-right-icons {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
@ -742,4 +744,12 @@ page {
|
|||||||
color: #303133;
|
color: #303133;
|
||||||
line-height: 42rpx;
|
line-height: 42rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.line-2 {
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-line-clamp: 2;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
overflow: hidden;
|
||||||
|
word-break: break-all;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -381,3 +381,44 @@ export const AdminOrderStatusValue: Record<AdminOrderStatusText, string | number
|
|||||||
[AdminOrderStatusText.Finished]: 3,
|
[AdminOrderStatusText.Finished]: 3,
|
||||||
[AdminOrderStatusText.Cancelled]: 4,
|
[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: '订单取消'
|
||||||
|
},
|
||||||
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user