pet-system-fulfiller-app/pages/mine/index.vue

<template>
    <view class="container">
        <!-- 顶部背景 -->
        <view class="nav-bg">
            <view class="bg-circle-1"></view>
            <view class="bg-circle-2"></view>
        </view>

        <!-- 头部用户信息 -->
        <view class="header-section">
            <view class="title-bar">个人中心</view>
            <view class="user-card" @click="navToProfile">
                <image class="avatar" src="/static/touxiang.png" mode="aspectFill"></image>
                <view class="info-content">
                    <view class="name-row">
                        <text class="name">张*哥</text>
                        <view class="tags">
                            <view class="tag green">接单中</view>
                            <view class="tag blue">全职</view>
                            <image class="bike-icon" src="/static/icons/motorbike.svg"></image>
                        </view>
                    </view>
                    <view class="detail-row">
                        <image class="small-icon" src="/static/icons/location.svg"></image>
                        <text>深圳市龙华区民治街道第一站</text>
                        <image class="arrow-icon-small" src="/static/icons/chevron_right_dark.svg"></image>
                    </view>
                    <view class="detail-row">
                        <image class="small-icon" src="/static/icons/calendar.svg"></image>
                        <text>已注册250天</text>
                    </view>
                </view>
                <image class="settings-icon" src="/static/icons/settings.svg" @click.stop="navToSettings"></image>
            </view>

            <!-- 黑金权益卡 -->
            <view class="vip-card">
                <view class="vip-left">
                    <image class="vip-icon" src="/static/icons/crown.svg"></image>
                    <view class="vip-text">
                        <text class="vip-title">L3 黄金履约者</text>
                        <text class="vip-desc">再完成 298 单可升级为 L4 钻石履约者</text>
                    </view>
                </view>
                <view class="vip-btn" @click="navToLevel">
                    <text>查看权益</text>
                    <image class="arrow-icon-small" src="/static/icons/chevron_right_gold.svg"></image>
                </view>
            </view>
        </view>

        <!-- 统计面板 -->
        <view class="stats-panel">
            <view class="stat-item" @click="navToWallet">
                <view class="stat-header">
                    <view class="red-bar"></view>
                    <text class="label">我的钱包</text>
                    <image class="arrow-icon" src="/static/icons/chevron_right.svg"></image>
                </view>
                <view class="stat-value">
                    <text class="num">2,575</text>
                    <text class="unit">元</text>
                </view>
                <text class="sub-text">本月预计收入</text>
            </view>
            <view class="divider"></view> 
            <view class="stat-item" @click="navToOrderStats">
                <view class="stat-header">
                    <view class="green-bar"></view>
                    <text class="label">订单统计</text>
                    <image class="arrow-icon" src="/static/icons/chevron_right.svg"></image>
                </view>
                <view class="stat-value">
                    <text class="num">702</text>
                    <text class="unit">单</text>
                </view>
                <text class="sub-text">本月完成单量</text>
            </view>
            <view class="divider"></view>
            <view class="stat-item" @click="navToPoints">
                <view class="stat-header">
                    <view class="orange-bar"></view>
                    <text class="label">我的积分</text>
                    <image class="arrow-icon" src="/static/icons/chevron_right.svg"></image>
                </view>
                <view class="stat-value">
                    <text class="num">1200</text>
                    <text class="unit">分</text>
                </view>
                <text class="sub-text">可兑换权益</text>
            </view>
        </view>

        <!-- 菜单列表 -->
        <view class="menu-list">
            <view class="menu-item" @click="navToNotification">
                <image class="menu-icon" src="/static/icons/bell_linear.svg"></image>
                <text class="menu-text">消息中心</text>
                <view class="menu-right">
                    <view class="red-dot"></view>
                    <image class="arrow-icon" src="/static/icons/chevron_right.svg"></image>
                </view>
            </view>
            <view class="menu-item" @click="navToRewards">
                <image class="menu-icon" src="/static/icons/money_linear.svg"></image>
                <text class="menu-text">我的奖惩</text>
                <image class="arrow-icon" src="/static/icons/chevron_right.svg"></image>
            </view>
            <view class="menu-item" @click="openServicePopup">
                <image class="menu-icon" src="/static/icons/headset_linear.svg"></image>
                <text class="menu-text">联系客服</text>
                <image class="arrow-icon" src="/static/icons/chevron_right.svg"></image>
            </view>
        </view>

        <!-- 退出登录 -->
        <!-- 退出登录 -->
        <view class="logout-btn" @click="logout">退出登录</view>

        <!-- 联系客服弹窗 -->
        <view class="service-popup-mask" v-if="showServicePopup" @click="closeServicePopup">
            <view class="service-popup" @click.stop>
                <view class="service-header">
                    <text class="service-title">联系客服</text>
                    <image class="close-icon" src="/static/icons/close_gray.svg" @click="closeServicePopup"></image>
                </view>

                <view class="qr-section">
                    <text class="qr-title">客服二维码</text>
                    <image class="qr-img" src="/static/logo.png" @click="previewQRCode"></image>
                    <text class="qr-desc">点击查看大图</text>
                </view>

                <view class="service-list">
                    <view class="service-row" @click="openOnlineService">
                        <image class="service-row-icon" src="/static/icons/headset_green.svg"></image>
                        <view class="service-info">
                            <text class="service-name">在线客服</text>
                            <text class="service-desc">企业微信专属客服在线解答</text>
                        </view>
                        <image class="arrow-icon-small" src="/static/icons/chevron_right.svg"></image>
                    </view>

                    <view class="service-row">
                        <image class="service-row-icon" src="/static/icons/phone_orange.svg"></image>
                        <view class="service-info">
                            <text class="service-name">客服电话</text>
                            <text class="service-desc">400-123-4567</text>
                        </view>
                        <view class="call-btn" @click="callServicePhone">
                            <image class="phone-icon-small" src="/static/icons/phone_green.svg"></image>
                            <text>拨打</text>
                        </view>
                    </view>
                </view>
            </view>
        </view>


        <!-- 退出登录弹窗 -->
        <view class="logout-popup-mask" :class="{ 'show': showLogoutPopup }" @click="cancelLogout" @touchmove.stop.prevent>
            <view class="popup-modal" @click.stop>

                <text class="popup-title">退出登录</text>
                <text class="popup-desc">确定要退出当前账号吗？\n退出后需要重新登录才能使用完整功能。</text>
                <view class="popup-actions">
                    <view class="popup-btn cancel" @click="cancelLogout">取消</view>
                    <view class="popup-btn confirm" @click="confirmLogout">确定</view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import logic from './logic.js';
export default {
    ...logic
}
</script>

<style>
@import './style.css';
</style>