Lwei
383 lines
20 KiB
HTML
383 lines
20 KiB
HTML
{extend name="PatientAPP/layout" /}
|
|
|
|
{block name="css"}
|
|
<link rel="stylesheet" href="/PatientAPP/Order/order.css" />
|
|
{/block}
|
|
|
|
{block name="app"}
|
|
<div id="app" v-cloak>
|
|
<!-- 头部区域 -->
|
|
<div class="header-section">
|
|
<div class="header-top">
|
|
<div class="page-title">我的订单</div>
|
|
<div class="header-actions">
|
|
<div class="icon-btn" @click="onSearch">
|
|
<van-icon name="search" size="17" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tab标签栏 -->
|
|
<van-tabs v-model:active="activeTab" swipeable sticky :offset-top="0" color="#fff" line-width="20" line-height="3">
|
|
<van-tab title="全部" name="all"></van-tab>
|
|
<van-tab title="待接单" name="pending"></van-tab>
|
|
<van-tab title="进行中" name="ongoing"></van-tab>
|
|
<van-tab title="已完成" name="completed"></van-tab>
|
|
<van-tab title="已取消" name="cancelled"></van-tab>
|
|
</van-tabs>
|
|
</div>
|
|
|
|
<!-- 订单列表 -->
|
|
<div class="order-list-wrapper">
|
|
<van-pull-refresh v-model="refreshing" @refresh="onRefresh">
|
|
<van-list
|
|
v-model:loading="loading"
|
|
:finished="finished"
|
|
finished-text="没有更多了"
|
|
@load="onLoad"
|
|
>
|
|
<div class="order-card" v-for="(order, index) in filteredOrders" :key="order.id" @click="viewOrder(order)">
|
|
<!-- 卡片头部：状态 + 订单号 + 时间 -->
|
|
<div class="oc-top">
|
|
<div class="oc-top-left">
|
|
<span class="oc-status-dot" :class="'dot-' + order.status"></span>
|
|
<span class="oc-status-text" :class="'text-' + order.status">{{ order.statusText }}</span>
|
|
<span class="oc-no">{{ order.orderNo }}</span>
|
|
</div>
|
|
<span class="oc-time">{{ order.createTime }}</span>
|
|
</div>
|
|
|
|
<!-- 核心信息区 -->
|
|
<div class="oc-main">
|
|
<!-- 左侧服务类型图标 -->
|
|
<div class="oc-service-icon" :class="'icon-' + order.status">
|
|
<van-icon :name="serviceIcon(order.serviceType)" size="24" />
|
|
</div>
|
|
<!-- 右侧详情 -->
|
|
<div class="oc-detail">
|
|
<div class="oc-title-row">
|
|
<span class="oc-service-type">{{ order.serviceType }}</span>
|
|
<van-tag v-if="order.status === 'ongoing'" type="primary" size="medium" round>服务中</van-tag>
|
|
<van-tag v-if="order.status === 'pending'" color="#fef4ec" text-color="#e08c28" size="medium" round>等待接单</van-tag>
|
|
</div>
|
|
<div class="oc-meta-row">
|
|
<div class="oc-meta-item">
|
|
<van-icon name="clock-o" size="14" />
|
|
<span>{{ order.serviceTime }}</span>
|
|
</div>
|
|
</div>
|
|
<div class="oc-meta-row">
|
|
|
|
</div>
|
|
<div class="oc-meta-row">
|
|
<div class="oc-meta-item">
|
|
<van-icon name="location-o" size="14" />
|
|
<span class="oc-location">{{ order.location }}</span>
|
|
</div>
|
|
</div>
|
|
<!-- 护工信息条 -->
|
|
<div class="oc-nurse-bar" v-if="order.nurseName" @click.stop="togglePhone(order)">
|
|
<div class="nurse-avatar-sm">
|
|
<van-icon name="contact" size="14" />
|
|
</div>
|
|
<span class="nurse-name-sm">{{ order.nurseName }}</span>
|
|
<span class="nurse-exp-sm">· {{ order.nurseExp }}年经验</span>
|
|
<span class="nurse-phone-sm">
|
|
{{ order.showPhone ? order.nursePhone : order.nursePhoneHidden }}
|
|
<van-icon :name="order.showPhone ? 'eye-o' : 'closed-eye'" size="12" style="margin-left:4px;vertical-align:middle;" />
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 备注预览 -->
|
|
<div class="oc-remark" v-if="order.remark">
|
|
<!-- <van-icon name="chat-o" size="13" /> -->
|
|
<span style="color: #cc6600;font-weight: 600;">订单备注：</span>
|
|
<span>{{ order.remark }}</span>
|
|
</div>
|
|
|
|
<!-- 底部操作栏 -->
|
|
<div class="oc-bottom">
|
|
<div class="oc-price-block">
|
|
<span class="oc-price-label">实付金额</span>
|
|
<div class="oc-price-value">
|
|
<span class="oc-yen">¥</span>
|
|
<span class="oc-amount">{{ order.totalAmount }}</span>
|
|
</div>
|
|
</div>
|
|
<div class="oc-actions">
|
|
<van-button
|
|
v-if="order.status === 'pending'"
|
|
size="small"
|
|
round
|
|
plain
|
|
hairline
|
|
@click.stop="cancelOrder(order)"
|
|
>取消订单</van-button>
|
|
<template v-if="order.status === 'ongoing'">
|
|
<van-button
|
|
size="small"
|
|
round
|
|
plain
|
|
hairline
|
|
type="primary"
|
|
@click.stop="extendOrder(order)"
|
|
>延长服务</van-button>
|
|
<van-button
|
|
size="small"
|
|
round
|
|
type="primary"
|
|
@click.stop="contactNurse(order)"
|
|
>联系护工</van-button>
|
|
</template>
|
|
<template v-if="order.status === 'completed' && !order.reviewed">
|
|
<van-button
|
|
size="small"
|
|
round
|
|
plain
|
|
hairline
|
|
@click.stop="viewOrder(order)"
|
|
>查看详情</van-button>
|
|
<van-button
|
|
size="small"
|
|
round
|
|
type="success"
|
|
@click.stop="reviewOrder(order)"
|
|
>去评价</van-button>
|
|
</template>
|
|
<template v-if="order.status === 'completed' && order.reviewed">
|
|
<van-button
|
|
size="small"
|
|
round
|
|
plain
|
|
hairline
|
|
@click.stop="viewReview(order)"
|
|
>查看评价</van-button>
|
|
</template>
|
|
<template v-if="order.status === 'cancelled'">
|
|
<van-button
|
|
size="small"
|
|
round
|
|
plain
|
|
hairline
|
|
@click.stop="reorder(order)"
|
|
>再次下单</van-button>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 空状态 -->
|
|
<van-empty
|
|
v-if="!loading && filteredOrders.length === 0"
|
|
description="暂无订单记录"
|
|
image="search"
|
|
>
|
|
<van-button round type="primary" size="small" class="empty-btn" @click="goPublish">立即下单</van-button>
|
|
</van-empty>
|
|
</van-list>
|
|
</van-pull-refresh>
|
|
</div>
|
|
|
|
<!-- 搜索弹窗 -->
|
|
<van-popup v-model:show="showSearch" position="top" :style="{ height: 'auto' }">
|
|
<van-search
|
|
v-model="searchKeyword"
|
|
placeholder="搜索订单号/服务类型/地点"
|
|
shape="round"
|
|
show-action
|
|
@search="doSearch"
|
|
@cancel="showSearch = false"
|
|
>
|
|
<template #action>
|
|
<div @click="doSearch">搜索</div>
|
|
</template>
|
|
</van-search>
|
|
</van-popup>
|
|
|
|
<!-- 底部栏 -->
|
|
{include file="PatientAPP/Component/van-tabbar" /}
|
|
</div>
|
|
{/block}
|
|
|
|
{block name="js"}
|
|
<script>
|
|
const app = Vue.createApp({
|
|
data() {
|
|
return {
|
|
activeTab: 'all',
|
|
showSearch: false,
|
|
searchKeyword: '',
|
|
refreshing: false,
|
|
loading: false,
|
|
finished: true,
|
|
stats: { pending: 2, ongoing: 1, completed: 8 },
|
|
orderList: [
|
|
{
|
|
id: 1, orderNo: 'MC20260509001', status: 'ongoing', statusText: '进行中',
|
|
createTime: '2026-05-08 14:30', serviceType: '住院陪护',
|
|
serviceTime: '2026-05-08 15:00 ~ 2026-05-11 15:00 (3天)',
|
|
location: '北京协和医院 住院部12楼1205病房',
|
|
nurseName: '张秀芳', nurseExp: 8, nurseRating: 4.9,
|
|
nursePhone: '13812345678', nursePhoneHidden: '138****5678', showPhone: false,
|
|
remark: '术后护理，需要协助翻身、拍背，注意引流管',
|
|
totalAmount: 2448, reviewed: false,
|
|
},
|
|
{
|
|
id: 2, orderNo: 'MC20260508002', status: 'pending', statusText: '待接单',
|
|
createTime: '2026-05-09 10:00', serviceType: '门诊陪护',
|
|
serviceTime: '2026-05-10 08:30 ~ 12:30 (半天)',
|
|
location: '北京大学第一医院 门诊楼3层',
|
|
nurseName: '', nurseExp: '', nurseRating: '',
|
|
remark: '陪同就诊，协助挂号、缴费、取药',
|
|
totalAmount: 196, reviewed: false,
|
|
},
|
|
{
|
|
id: 3, orderNo: 'MC20260507003', status: 'pending', statusText: '待接单',
|
|
createTime: '2026-05-07 16:20', serviceType: '居家陪护',
|
|
serviceTime: '2026-05-10 09:00 ~ 17:00 (1天)',
|
|
location: '北京市朝阳区建国路88号院3号楼2单元501',
|
|
nurseName: '', nurseExp: '', nurseRating: '',
|
|
remark: '老人日常照料，做饭、打扫卫生、陪同散步',
|
|
totalAmount: 520, reviewed: false,
|
|
},
|
|
{
|
|
id: 4, orderNo: 'MC20260505004', status: 'completed', statusText: '已完成',
|
|
createTime: '2026-05-03 09:15', serviceType: '住院陪护',
|
|
serviceTime: '2026-05-03 10:00 ~ 2026-05-06 10:00 (3天)',
|
|
location: '中日友好医院 住院部8楼802病房',
|
|
nurseName: '李国华', nurseExp: 10, nurseRating: 4.8,
|
|
nursePhone: '13987654321', nursePhoneHidden: '139****4321', showPhone: false,
|
|
remark: '重症监护后转普通病房的康复期护理',
|
|
totalAmount: 2700, reviewed: true,
|
|
},
|
|
{
|
|
id: 5, orderNo: 'MC20260430005', status: 'completed', statusText: '已完成',
|
|
createTime: '2026-04-28 11:40', serviceType: '母婴护理',
|
|
serviceTime: '2026-04-29 08:00 ~ 2026-05-13 08:00 (14天)',
|
|
location: '北京妇产医院 家庭住所（朝阳区望京）',
|
|
nurseName: '王美玲', nurseExp: 5, nurseRating: 4.9,
|
|
nursePhone: '13666668888', nursePhoneHidden: '3666668888', showPhone: false,
|
|
remark: '月子期间母婴护理，新生儿照料和产妇恢复',
|
|
totalAmount: 11200, reviewed: true,
|
|
},
|
|
{
|
|
id: 6, orderNo: 'MC20260425006', status: 'completed', statusText: '已完成',
|
|
createTime: '2026-04-23 15:00', serviceType: '门诊陪护',
|
|
serviceTime: '2026-04-25 07:30 ~ 13:00 (半天)',
|
|
location: '首都医科大学附属北京天坛医院',
|
|
nurseName: '陈建国', nurseExp: 6, nurseRating: 4.7,
|
|
nursePhone: '15811112222', nursePhoneHidden: '158****2222', showPhone: false,
|
|
remark: '陪同做核磁共振检查，老人行动不便需轮椅辅助',
|
|
totalAmount: 232, reviewed: false,
|
|
},
|
|
{
|
|
id: 7, orderNo: 'MC20260420007', status: 'cancelled', statusText: '已取消',
|
|
createTime: '2026-04-18 09:30', serviceType: '居家陪护',
|
|
serviceTime: '2026-04-20 14:00 ~ 18:00 (4小时)',
|
|
location: '北京市海淀区中关村大街1号',
|
|
nurseName: '', nurseExp: '', nurseRating: '',
|
|
remark: '临时有事取消了',
|
|
totalAmount: 240, reviewed: false,
|
|
},
|
|
{
|
|
id: 8, orderNo: 'MC20260415008', status: 'completed', statusText: '已完成',
|
|
createTime: '2026-04-13 10:20', serviceType: '住院陪护',
|
|
serviceTime: '2026-04-15 08:00 ~ 2026-04-18 08:00 (3天)',
|
|
location: '中国人民解放军总医院(301医院) 住院部东楼608',
|
|
nurseName: '赵文斌', nurseExp: 12, nurseRating: 4.8,
|
|
nursePhone: '17799887766', nursePhoneHidden: '177****7766', showPhone: false,
|
|
remark: '心脏手术后康复护理，监测生命体征',
|
|
totalAmount: 2880, reviewed: true,
|
|
},
|
|
{
|
|
id: 9, orderNo: 'MC20260410009', status: 'completed', statusText: '已完成',
|
|
createTime: '2026-04-08 14:00', serviceType: '门诊陪护',
|
|
serviceTime: '2026-04-10 09:00 ~ 11:30 (2.5小时)',
|
|
location: '北京安贞医院 心脏中心',
|
|
nurseName: '刘晓红', nurseExp: 3, nurseRating: 4.6,
|
|
remark: '陪同复查心电图和超声心动图',
|
|
totalAmount: 138, reviewed: true,
|
|
},
|
|
{
|
|
id: 10, orderNo: 'MC20260405010', status: 'completed', statusText: '已完成',
|
|
createTime: '2026-04-02 16:45', serviceType: '居家陪护',
|
|
serviceTime: '2026-04-05 09:00 ~ 18:00 (连续5天)',
|
|
location: '北京市丰台区方庄南路18号院',
|
|
nurseName: '周明辉', nurseExp: 7, nurseRating: 4.7,
|
|
remark: '脑梗塞后遗症患者居家康复训练和生活照料',
|
|
totalAmount: 2250, reviewed: false,
|
|
},
|
|
],
|
|
};
|
|
},
|
|
computed: {
|
|
filteredOrders() {
|
|
let list = this.orderList;
|
|
if (this.activeTab !== 'all') {
|
|
list = list.filter(o => o.status === this.activeTab);
|
|
}
|
|
if (this.searchKeyword) {
|
|
const kw = this.searchKeyword.toLowerCase();
|
|
list = list.filter(o =>
|
|
o.orderNo.toLowerCase().includes(kw) ||
|
|
o.serviceType.includes(kw) ||
|
|
o.location.includes(kw) ||
|
|
(o.nurseName && o.nurseName.includes(kw))
|
|
);
|
|
}
|
|
return list;
|
|
},
|
|
},
|
|
methods: {
|
|
onSearch() { this.showSearch = true; },
|
|
doSearch() { this.showSearch = false; vant.showToast({ message: `搜索: ${this.searchKeyword}`, position: 'top' }); },
|
|
switchTab(tab) { this.activeTab = tab; },
|
|
onRefresh() { setTimeout(() => { this.refreshing = false; vant.showToast('刷新成功'); }, 1000); },
|
|
onLoad() { this.loading = false; this.finished = true; },
|
|
togglePhone(order) { order.showPhone = !order.showPhone; },
|
|
viewOrder(order) { vant.showDialog({ title: '订单详情', message: `订单号: ${order.orderNo}\n服务: ${order.serviceType}\n时间: ${order.serviceTime}\n金额: ¥${order.totalAmount}\n状态: ${order.statusText}` }); },
|
|
cancelOrder(order) {
|
|
vant.showConfirmDialog({ title: '确认取消', message: '确定要取消该订单吗？取消后需重新下单。' }).then(() => {
|
|
order.status = 'cancelled';
|
|
order.statusText = '已取消';
|
|
this.stats.pending--;
|
|
vant.showToast({ message: '订单已取消', icon: 'success' });
|
|
}).catch(() => {});
|
|
},
|
|
contactNurse(order) {
|
|
vant.showDialog({ title: '联系护工', message: `正在呼叫 ${order.nurseName}...\n电话: 138****8888` });
|
|
},
|
|
extendOrder(order) {
|
|
vant.showConfirmDialog({ title: '延长服务', message: '确定要延长当前服务时长吗？护工将收到延长时间通知。' }).then(() => {
|
|
vant.showToast({ message: '已发送延长请求', icon: 'success' });
|
|
}).catch(() => {});
|
|
},
|
|
reviewOrder(order) {
|
|
vant.showDialog({ title: '服务评价', message: '评价功能开发中...' });
|
|
},
|
|
viewReview(order) {
|
|
vant.showToast('查看评价详情');
|
|
},
|
|
reorder(order) {
|
|
vant.showToast({ message: '正在跳转到下单页面...', icon: 'success' });
|
|
},
|
|
goPublish() {
|
|
vant.showToast('跳转到发布订单页');
|
|
},
|
|
serviceIcon(type) {
|
|
const map = { '住院陪护': 'hotel-o', '门诊陪护': 'guide-o', '居家陪护': 'home-o', '母婴护理': 'like-o' };
|
|
return map[type] || 'service-o';
|
|
},
|
|
},
|
|
watch: {
|
|
activeTab(val) { if (val !== 'orders') { onTabBarChange(val); } },
|
|
},
|
|
});
|
|
app.use(vant);
|
|
app.use(vant.Lazyload);
|
|
app.mount('#app');
|
|
</script>
|
|
{/block}
|