Lwei
333 lines
13 KiB
HTML
333 lines
13 KiB
HTML
{extend name="PatientAPP/layout" /}
|
|
{block name="css"}
|
|
<style>
|
|
.mine-container { background: #f5f6fa; min-height: 100vh; padding-bottom: 70px; }
|
|
.mine-header {
|
|
background: linear-gradient(135deg, #018fa5 0%, #027a8c 50%, #016577 100%);
|
|
padding: 40px 20px 30px;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
.mine-header::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: -50%;
|
|
right: -20%;
|
|
width: 200px;
|
|
height: 200px;
|
|
background: rgba(255,255,255,0.08);
|
|
border-radius: 50%;
|
|
}
|
|
.mine-header::after {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: -30%;
|
|
left: -10%;
|
|
width: 150px;
|
|
height: 150px;
|
|
background: rgba(255,255,255,0.05);
|
|
border-radius: 50%;
|
|
}
|
|
.user-profile { display: flex; align-items: center; position: relative; z-index: 1; }
|
|
.user-avatar-box {
|
|
width: 65px; height: 65px;
|
|
border-radius: 50%;
|
|
background: rgba(255,255,255,0.2);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-right: 15px;
|
|
border: 2px solid rgba(255,255,255,0.35);
|
|
}
|
|
.user-avatar-box .van-icon { color: #fff; font-size: 32px; }
|
|
.user-text { color: #fff; flex: 1; }
|
|
.user-nickname { font-size: 19px; font-weight: 600; margin-bottom: 4px; }
|
|
.user-phone { font-size: 13px; opacity: 0.8; }
|
|
.user-arrow { color: rgba(255,255,255,0.7); }
|
|
|
|
/* 统计卡片 */
|
|
.stats-card {
|
|
margin: -18px 15px 12px;
|
|
background: #fff;
|
|
border-radius: 14px;
|
|
padding: 18px 10px;
|
|
box-shadow: 0 3px 12px rgba(1,143,165,0.1);
|
|
position: relative;
|
|
z-index: 2;
|
|
display: flex;
|
|
}
|
|
.stat-item { flex: 1; text-align: center; cursor: pointer; }
|
|
.stat-num { font-size: 21px; font-weight: 700; color: #333; }
|
|
.stat-label { font-size: 12px; color: #999; margin-top: 4px; }
|
|
.stat-item:nth-child(1) .stat-num { color: #018fa5; }
|
|
.stat-item:nth-child(2) .stat-num { color: #e6a23c; }
|
|
.stat-item:nth-child(3) .stat-num { color: #67c23a; }
|
|
|
|
/* 订单快捷入口 */
|
|
.order-section {
|
|
margin: 0 15px 12px;
|
|
background: #fff;
|
|
border-radius: 14px;
|
|
padding: 16px 0;
|
|
box-shadow: 0 2px 8px rgba(0,0,0,0.04);
|
|
}
|
|
.section-header-bar {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 0 16px 14px;
|
|
}
|
|
.section-title-text { font-size: 15px; font-weight: 600; color: #333; }
|
|
.section-more-link { font-size: 12px; color: #999; display: flex; align-items: center; }
|
|
.order-grid { display: flex; padding: 0 10px; }
|
|
.order-item { flex: 1; text-align: center; cursor: pointer; padding: 8px 0; }
|
|
.order-icon-wrap {
|
|
width: 44px; height: 44px;
|
|
border-radius: 12px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin: 0 auto 8px;
|
|
position: relative;
|
|
}
|
|
.order-icon-wrap .van-badge { position: absolute; top: -2px; right: -2px; }
|
|
.order-label { font-size: 12px; color: #666; }
|
|
|
|
/* 功能菜单 */
|
|
.menu-section {
|
|
margin: 0 15px 12px;
|
|
background: #fff;
|
|
border-radius: 14px;
|
|
overflow: hidden;
|
|
box-shadow: 0 2px 8px rgba(0,0,0,0.04);
|
|
}
|
|
.menu-section .van-cell { padding: 14px 16px; }
|
|
.menu-section .van-cell__left-icon { color: #018fa5; margin-right: 10px; font-size: 20px; }
|
|
.menu-icon-wrap {
|
|
width: 28px; height: 28px;
|
|
border-radius: 7px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-right: 12px;
|
|
flex-shrink: 0;
|
|
}
|
|
.menu-icon-wrap .van-icon { font-size: 16px; color: #fff; }
|
|
</style>
|
|
{/block}
|
|
|
|
{block name="app"}
|
|
<div id="app" v-cloak>
|
|
<div class="mine-container">
|
|
<!-- 头部用户信息 -->
|
|
<div class="mine-header">
|
|
<div class="user-profile">
|
|
<div class="user-avatar-box">
|
|
<van-icon name="user-o" />
|
|
</div>
|
|
<div class="user-text">
|
|
<div class="user-nickname">{{ userInfo.nickname }}</div>
|
|
<div class="user-phone">{{ userInfo.phone }}</div>
|
|
</div>
|
|
<van-icon name="arrow" class="user-arrow" size="16" />
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 订单统计 -->
|
|
<div class="stats-card">
|
|
<div class="stat-item" @click="goOrderList('all')">
|
|
<div class="stat-num">{{ stats.totalOrders }}</div>
|
|
<div class="stat-label">全部订单</div>
|
|
</div>
|
|
<div class="stat-item" @click="goOrderList('pending')">
|
|
<div class="stat-num">{{ stats.pending }}</div>
|
|
<div class="stat-label">待服务</div>
|
|
</div>
|
|
<div class="stat-item" @click="goOrderList('completed')">
|
|
<div class="stat-num">{{ stats.completed }}</div>
|
|
<div class="stat-label">已完成</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 我的订单 -->
|
|
<div class="order-section">
|
|
<div class="section-header-bar">
|
|
<span class="section-title-text">我的订单</span>
|
|
<div class="section-more-link" @click="goOrderList('all')">
|
|
全部订单 <van-icon name="arrow" size="11" />
|
|
</div>
|
|
</div>
|
|
<div class="order-grid">
|
|
<div class="order-item" @click="goOrderList('pending_payment')">
|
|
<div class="order-icon-wrap" style="background:#fff4e5;">
|
|
<van-icon name="clock-o" color="#e6a23c" size="20" />
|
|
<van-badge :content="orderBadge.pendingPayment" v-if="orderBadge.pendingPayment > 0" />
|
|
</div>
|
|
<span class="order-label">待付款</span>
|
|
</div>
|
|
<div class="order-item" @click="goOrderList('pending_service')">
|
|
<div class="order-icon-wrap" style="background:#e8f4fd;">
|
|
<van-icon name="todo-list-o" color="#1989fa" size="20" />
|
|
<van-badge :content="orderBadge.pendingService" v-if="orderBadge.pendingService > 0" />
|
|
</div>
|
|
<span class="order-label">待服务</span>
|
|
</div>
|
|
<div class="order-item" @click="goOrderList('in_progress')">
|
|
<div class="order-icon-wrap" style="background:#eaf9f1;">
|
|
<van-icon name="guide-o" color="#07c160" size="20" />
|
|
<van-badge :content="orderBadge.inProgress" v-if="orderBadge.inProgress > 0" />
|
|
</div>
|
|
<span class="order-label">进行中</span>
|
|
</div>
|
|
<div class="order-item" @click="goOrderList('completed')">
|
|
<div class="order-icon-wrap" style="background:#f0f2f5;">
|
|
<van-icon name="certificate" color="#969799" size="20" />
|
|
</div>
|
|
<span class="order-label">已完成</span>
|
|
</div>
|
|
<div class="order-item" @click="goOrderList('review')">
|
|
<div class="order-icon-wrap" style="background:#fef0f0;">
|
|
<van-icon name="star-o" color="#ee0a24" size="20" />
|
|
<van-badge :content="orderBadge.review" v-if="orderBadge.review > 0" />
|
|
</div>
|
|
<span class="order-label">待评价</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 工具服务 -->
|
|
<div class="menu-section">
|
|
<van-cell title="我的收藏" is-link @click="onMenuClick('collect')">
|
|
<template #icon>
|
|
<div class="menu-icon-wrap" style="background:linear-gradient(135deg,#ff6b6b,#ff8e53);">
|
|
<van-icon name="like-o" />
|
|
</div>
|
|
</template>
|
|
</van-cell>
|
|
<van-cell title="常用护工" is-link @click="onMenuClick('favorite_nurse')">
|
|
<template #icon>
|
|
<div class="menu-icon-wrap" style="background:linear-gradient(135deg,#018fa5,#02b5d1);">
|
|
<van-icon name="contact" />
|
|
</div>
|
|
</template>
|
|
</van-cell>
|
|
<van-cell title="地址管理" is-link @click="onMenuClick('address')">
|
|
<template #icon>
|
|
<div class="menu-icon-wrap" style="background:linear-gradient(135deg,#67c23a,#85ce61);">
|
|
<van-icon name="location-o" />
|
|
</div>
|
|
</template>
|
|
</van-cell>
|
|
<van-cell title="在线客服" is-link @click="onMenuClick('service')">
|
|
<template #icon>
|
|
<div class="menu-icon-wrap" style="background:linear-gradient(135deg,#e6a23c,#f0c78a);">
|
|
<van-icon name="service-o" />
|
|
</div>
|
|
</template>
|
|
</van-cell>
|
|
</div>
|
|
|
|
<!-- 设置相关 -->
|
|
<div class="menu-section">
|
|
<van-cell title="账号设置" is-link @click="onMenuClick('setting')">
|
|
<template #icon>
|
|
<div class="menu-icon-wrap" style="background:linear-gradient(135deg,#909399,#b1b3b8);">
|
|
<van-icon name="setting-o" />
|
|
</div>
|
|
</template>
|
|
</van-cell>
|
|
<van-cell title="关于我们" is-link @click="onMenuClick('about')">
|
|
<template #icon>
|
|
<div class="menu-icon-wrap" style="background:linear-gradient(135deg,#7232dd,#9b69e6);">
|
|
<van-icon name="info-o" />
|
|
</div>
|
|
</template>
|
|
</van-cell>
|
|
</div>
|
|
|
|
<!-- 退出按钮 -->
|
|
<div style="padding: 20px 15px;">
|
|
<van-button type="danger" block round plain @click="onLogout">退出登录</van-button>
|
|
</div>
|
|
|
|
<!-- 底部栏 -->
|
|
{include file="PatientAPP/Component/van-tabbar" /}
|
|
</div>
|
|
</div>
|
|
{/block}
|
|
|
|
{block name="js"}
|
|
<script>
|
|
const app = Vue.createApp({
|
|
data() {
|
|
return {
|
|
activeTab: 'mine',
|
|
userInfo: {
|
|
nickname: '患者用户',
|
|
phone: '138****8888',
|
|
avatar: ''
|
|
},
|
|
stats: {
|
|
totalOrders: 12,
|
|
pending: 2,
|
|
completed: 10
|
|
},
|
|
orderBadge: {
|
|
pendingPayment: 0,
|
|
pendingService: 1,
|
|
inProgress: 1,
|
|
review: 0
|
|
},
|
|
menuList: [
|
|
{ icon: 'like-o', title: '我的收藏', color: '#ff6b6b', action: 'collect' },
|
|
{ icon: 'contact', title: '常用护工', color: '#018fa5', action: 'favorite_nurse' },
|
|
{ icon: 'location-o', title: '地址管理', color: '#67c23a', action: 'address' },
|
|
{ icon: 'service-o', title: '在线客服', color: '#e6a23c', action: 'service' },
|
|
]
|
|
};
|
|
},
|
|
methods: {
|
|
goOrderList(type) {
|
|
const map = {
|
|
all: '全部订单',
|
|
pending_payment: '待付款',
|
|
pending_service: '待服务',
|
|
pending: '待服务',
|
|
in_progress: '进行中',
|
|
completed: '已完成',
|
|
review: '待评价'
|
|
};
|
|
vant.showToast({ message: `查看${map[type] || '订单列表'}`, position: 'top' });
|
|
},
|
|
onMenuClick(action) {
|
|
const map = {
|
|
collect: '我的收藏',
|
|
favorite_nurse: '常用护工',
|
|
address: '地址管理',
|
|
service: '在线客服',
|
|
setting: '账号设置',
|
|
about: '关于我们'
|
|
};
|
|
vant.showToast({ message: map[action] || action, position: 'top' });
|
|
},
|
|
onLogout() {
|
|
vant.showDialog({
|
|
title: '提示',
|
|
message: '确定要退出登录吗？'
|
|
}).then(() => {
|
|
vant.showToast({ type: 'success', message: '已退出登录' });
|
|
}).catch(() => {});
|
|
}
|
|
},
|
|
watch: {
|
|
activeTab(val) {
|
|
if (val !== 'mine') onTabBarChange(val);
|
|
}
|
|
}
|
|
});
|
|
app.use(vant);
|
|
app.use(vant.Lazyload);
|
|
app.mount('#app');
|
|
</script>
|
|
{/block}
|