git init
This commit is contained in:
Lwei
@@ -0,0 +1,332 @@
|
||||
{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}
|
||||
Reference in New Issue
Block a user