MediCompanions/app/view/PatientAPP/Index/index.html

{extend name="PatientAPP/layout" /}
{block name="css"}
<link rel="stylesheet" href="/PatientAPP/Index/index.css" />
{/block}
{block name="app"}
<div id="app" v-cloak>
    <!-- 头部区域 -->
    <div class="header-section">
        <div class="header-top">
            <div class="user-info">
                <div class="user-avatar">
                    <van-icon name="user-o" size="24" />
                </div>
                <div>
                    <div class="user-name">您好，患者用户</div>
                    <div class="user-desc">祝您早日康复</div>
                </div>
            </div>
            <div class="header-actions">
                <div class="icon-btn" @click="onNotice">
                    <van-icon name="bell" size="17" />
                </div>
                <div class="icon-btn" @click="onSetting">
                    <van-icon name="setting-o" size="17" />
                </div>
            </div>
        </div>

        <!-- 搜索栏 -->
        <div class="search-wrapper">
            <van-search placeholder="搜索护工姓名/技能" shape="round" background="transparent" @search="onSearch" />
        </div>
    </div>
    <!-- 快捷功能区（专业版） -->
    <div class="quick-actions">
        <div class="qa-header">
            <div class="qa-title"><span class="qa-title-dot"></span> 服务导航</div>
            <div class="qa-more">更多服务 <van-icon name="arrow" size="11" /></div>
        </div>
        <div class="qa-body">
            <div class="qa-grid">
                <div class="qa-item" @click="goPublish('hospital')">
                    <div class="qa-icon-wrap primary">
                        <van-icon class="qa-icon-primary" name="edit" size="23" />
                    </div>
                    <span class="qa-label">发布订单</span>
                </div>
                <div class="qa-item" @click="goNurses()">
                    <div class="qa-icon-wrap info">
                        <van-icon class="qa-icon-info" name="friends-o" size="23" />
                    </div>
                    <span class="qa-label">选择护工</span>
                </div>
                <div class="qa-item" @click="goOrders()">
                    <div class="qa-icon-wrap cyan">
                        <van-icon class="qa-icon-cyan" name="notes-o" size="23" />
                    </div>
                    <span class="qa-label">我的订单</span>
                </div>
                <div class="qa-item" @click="goService()">
                    <div class="qa-icon-wrap warning">
                        <van-icon class="qa-icon-warning" name="service-o" size="23" />
                    </div>
                    <span class="qa-label">在线客服</span>
                </div>
                <div class="qa-item" @click="goPublish('home')">
                    <div class="qa-icon-wrap success">
                        <van-icon name="hotel-o" size="23" color="#1a7a32" />
                    </div>
                    <span class="qa-label">住院陪护</span>
                </div>
                <div class="qa-item" @click="goPublish('accompany')">
                    <div class="qa-icon-wrap purple">
                        <van-icon class="qa-icon-purple" name="guide-o" size="23" />
                    </div>
                    <span class="qa-label">门诊陪护</span>
                </div>
                <div class="qa-item" @click="goService()">
                    <div class="qa-icon-wrap gold">
                        <van-icon class="qa-icon-gold" name="certificate" size="23" />
                    </div>
                    <span class="qa-label">资质认证</span>
                </div>
                <div class="qa-item" @click="onNotice()">
                    <div class="qa-icon-wrap danger">
                        <van-icon class="qa-icon-danger" name="info-o" size="23" />
                    </div>
                    <span class="qa-label">帮助中心</span>
                </div>
            </div>
        </div>
        <!-- 数据统计条 -->
        <div class="qa-stats">
            <div class="qa-stat">
                <div class="qa-stat-num">1,280+</div>
                <div class="qa-stat-lbl">专业护工</div>
            </div>
            <div class="qa-stat">
                <div class="qa-stat-num">98.6%</div>
                <div class="qa-stat-lbl">好评率</div>
            </div>
            <div class="qa-stat">
                <div class="qa-stat-num">52,000+</div>
                <div class="qa-stat-lbl">服务次数</div>
            </div>
            <div class="qa-stat">
                <div class="qa-stat-num">24h</div>
                <div class="qa-stat-lbl">快速响应</div>
            </div>
        </div>
    </div>
    <!-- 公告栏 -->
    <div class="notice-section">
        <van-notice-bar left-icon="volume-o" :scrollable="true" text="系统公告：智能陪护系统已全新升级，提供更优质的陪护服务体验！" />
    </div>
    <!-- 快速下单入口 -->
    <div class="order-entry">
        <div class="order-entry-header">
            <div class="order-entry-left">
                <div class="order-entry-title">需要专业陪护服务？</div>
                <div class="order-entry-desc">一键发布需求，专业持证护工快速响应</div>
                <div class="order-entry-btns">
                    <van-button type="primary" round size="small" @click="goPublish('hospital')">就诊陪护</van-button>
                    <van-button type="primary" round plain size="small" @click="goPublish('home')">住院陪护</van-button>
                    <van-button type="primary" round plain size="small"
                        @click="goPublish('accompany')">居家陪护</van-button>
                </div>
            </div>
            <div class="order-entry-right">
                <van-icon name="medal-o" size="30" color="rgba(255,255,255,0.85)" />
            </div>
        </div>
    </div>
    <!-- 推荐护工 -->
    <div class="nurse-section">
        <div class="section-header">
            <div class="section-title">
                <van-icon name="medal-o" color="#018fa5" size="18" /> <span style="font-weight:600">&nbsp;推荐护工</span>
            </div>
            <div class="section-more" @click="goNurses">
                查看更多 <van-icon name="arrow" />
            </div>
        </div>
        <div class="nurse-list">
            <div class="nurse-card" v-for="(nurse, index) in nurseList" :key="index" @click="viewNurse(nurse)">
                <div class="nurse-avatar">
                    <van-icon name="contact" />
                </div>
                <div class="nurse-info">
                    <div class="nurse-name-row">
                        <span class="nurse-name">{{ nurse.name }}</span>
                        <span class="nurse-rating">
                            <van-icon name="star" /> {{ nurse.rating }}
                        </span>
                    </div>
                    <div class="nurse-tags">
                        <span class="nurse-tag green" v-for="(tag, i) in nurse.certs.slice(0, 2)" :key="'c'+i">{{ tag
                            }}</span>
                        <span class="nurse-tag orange" v-if="nurse.isHot">热门</span>
                    </div>
                    <div class="nurse-tags">
                        <span class="nurse-tag teal" v-for="(skill, i) in nurse.skills.slice(0, 3)" :key="'s'+i">{{
                            skill }}</span>
                    </div>
                    <div class="nurse-bottom">
                        <span class="nurse-price"><span>&yen;</span>{{ nurse.price }}<span>/小时</span></span>
                        <span class="nurse-exp">{{ nurse.exp }}年经验 | {{ nurse.orders }}次服务</span>
                    </div>
                </div>
            </div>
        </div>
        <!-- 底部栏 -->
        {include file="PatientAPP/Component/van-tabbar" /}
    </div>
    {/block}
    {block name="js"}
    <script>
        const app = Vue.createApp({
            data() {
                return {
                    activeTab: 'home',
                    nurseList: [
                        { id: 1, name: '张秀芳', rating: 4.9, price: 68, exp: 8, orders: 320, isHot: true, certs: ['护理证', '健康证'], skills: ['术后护理', '老年照护', '康复训练'] },
                        { id: 2, name: '李国华', rating: 4.8, price: 75, exp: 10, orders: 456, isHot: true, certs: ['护士资格证', '急救证'], skills: ['重症监护', '输液换药', '心理疏导'] },
                        { id: 3, name: '王美玲', rating: 4.9, price: 62, exp: 5, orders: 218, isHot: false, certs: ['护理证', '育婴师'], skills: ['母婴护理', '月子照护', '营养配餐'] },
                        { id: 4, name: '陈建国', rating: 4.7, price: 58, exp: 6, orders: 167, isHot: false, certs: ['护理证', '康复师'], skills: ['行动辅助', '日常起居', '陪同就医'] },
                    ],
                };
            },
            methods: {
                onSearch(val) { console.log('搜索:', val); },
                onNotice() { vant.showToast({ message: '暂无新消息', position: 'top' }); },
                onSetting() { vant.showToast('设置'); },
                goPublish(type) {
                    vant.dialog.alert({
                        title: '发布陪护订单',
                        message: type ? `正在进入${type === 'hospital' ? '院内' : type === 'home' ? '居家' : '陪同'}陪护订单发布页面...` : '正在进入订单发布页面...',
                    });
                },
                goNurses() { vant.showToast('跳转到护工列表'); },
                goOrders() { vant.showToast('跳转到我的订单'); },
                goService() { vant.showToast('联系在线客服'); },
                viewNurse(nurse) {
                    vant.showDialog({ title: nurse.name, message: `评分: ${nurse.rating}分\n价格: ¥${nurse.price}/小时\n经验: ${nurse.exp}年\n服务: ${nurse.orders}次` });
                    //vant.dialog.alert({ title: nurse.name, message: `评分: ${nurse.rating}分\n价格: ¥${nurse.price}/小时\n经验: ${nurse.exp}年\n服务: ${nurse.orders}次` });
                },
            },
            watch: {
                activeTab(val) { if (val !== 'home') { 
                    onTabBarChange(val);
                }},
            },
        });
        app.use(vant);
        app.use(vant.Lazyload);
        app.mount('#app');
    </script>
    {/block}