vant+vue3实现完整可交互的废品回收app的ui交互效果代码-html代码-BFW代码库

代码语言：html

代码描述：vant+vue3实现完整可交互的废品回收app的ui交互效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>废品上门回收平台 (Mock演示版)</title>
    <!-- 引入 Vant 样式 -->
  <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/vant.4.index.css">
    <style>
        :root {
            --van-primary-color: #07c160;
            --primary-gradient: linear-gradient(135deg, #07c160 0%, #05a050 100%);
            --card-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
            --bg-color: #f7f8fa;
        }

        body {
            background: var(--bg-color);
            font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Segoe UI, Arial, Roboto, 'PingFang SC', sans-serif;
            -webkit-font-smoothing: antialiased;
            margin: 0;
            color: #333;
        }

        .page {
            padding-bottom: 60px;
            min-height: 100vh;
            box-sizing: border-box;
        }

        /* Glassmorphism & Cards */
        .glass-header {
            background: rgba(255, 255, 255, 0.95) !important;
            backdrop-filter: blur(10px);
            position: sticky;
            top: 0;
            z-index: 99;
        }

        .card-box {
            background: #fff;
            border-radius: 16px;
            box-shadow: var(--card-shadow);
            margin: 12px;
            overflow: hidden;
            transition: transform 0.2s;
        }

        .card-box:active {
            transform: scale(0.99);
        }

        /* Custom Components */
        .cert-card {
            background: linear-gradient(135deg, #81C784, #2E7D32);
            color: #fff;
            border-radius: 16px;
            padding: 24px;
            margin: 16px;
            text-align: center;
            box-shadow: 0 10px 20px rgba(46, 125, 50, 0.3);
            position: relative;
            overflow: hidden;
        }

        .cert-card::after {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 0%, transparent 60%);
            transform: rotate(30deg);
        }

        .stat-card {
            background: #fff;
            margin: 12px;
            padding: 20px;
            border-radius: 16px;
            display: flex;
            justify-content: space-around;
            text-align: center;
            box-shadow: var(--card-shadow);
        }

        /* Utility */
        .text-primary { color: var(--van-primary-color); }
        .text-bold { font-weight: 600; }
        .mb-10 { margin-bottom: 10px; }
        .p-15 { padding: 15px; }

        /* Vant Overrides */
        .van-nav-bar { background: transparent; }
        .van-nav-bar__title { font-weight: 600; }
        .van-button--primary {
            background: var(--primary-gradient);
            border: none;
            box-shadow: 0 4px 12px rgba(7, 193, 96, 0.3);
        }
    </style>
</head>

<body>
    <div id="app">
        <router-view v-slot="{ Component }">
            <component :is="Component" class="page" />
        </router-view>

        <van-tabbar route v-if="showNav" active-color="#07c160" inactive-color="#999" :border="false" fixed placeholder safe-area-inset-bottom>
            <van-tabbar-item replace to="/" icon="home-o">首页</van-tabbar-item>
            <van-tabbar-item replace to="/orders" icon="orders-o">订单</van-tabbar-item>
            <van-tabbar-item replace to="/mine" icon="user-o">我的</van-tabbar-item>
        </van-tabbar>
    </div>

    <!-- Libraries -->
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vue.global.3.5.18.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vue-router.global.4.0.3.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vant.4.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/axios.1.6.7.js"></script>

    <script>
        const { createApp, ref, reactive, onMounted, computed } = Vue;
        const { showToast, showDialog, showImagePreview, showLoadingToast, closeToast } = vant;

        // ==========================================
        // Mock Data & Server Simulation
        // ==========================================
        
        // 模拟数据库
        const DB = {
            user: {
                id: 1, phone: '13800138000', balance: 128.50, points: 520, carbon_credit: 45.2, 
                role: 'user', // 'user' or 'recycler'
                is_verified: true,
                token: 'mock-token-123456'
            },
            orders: [
                { id: 101, order_sn: 'R20231027001', status: 3, type: 1, address: '幸福小区 3号楼 201', est_weight: 5, reserve_time: '2023-10-25 14:00', final_amount: 15.5, qr_code: 'mock_qr' },
                { id: 102, order_sn: 'R20231028005', status: 1, type: 1, address: '阳光花园 5号楼 606', est_weight: 12, reserve_time: '2023-10-28 09:00', final_amount: 0, distance: 1.2 },
                { id: 103, order_sn: 'C20231029002', status: 0, type: 2, address: '科技园A座 物业中心', est_weight: 50, reserve_time: '2023-10-29 10:00', final_am.........完整代码请登录后点击上方下载按钮下载查看