Xurh
/
ss_dc_wechat_mini_program_h5


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435
							<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>Test2 - 第三层页面</title>
    <!-- 微信 JS-SDK -->
    <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
    <!-- Vue 3 CDN -->
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <!-- H5工具函数库 -->
    <script src="../js/utils/h5-bridge.js"></script>
</head>
<body>
    <div id="app">
        <div class="container">
            <h1>📋 Test2 页面</h1>
            <p>这是第三层页面，最深层级的业务页面</p>

            <div class="nav-info">
                <div class="breadcrumb">
                    <span>Home</span> → <span>Test1</span> → <span class="current">Test2</span>
                </div>
                <div class="level-info">
                    当前层级：第3层 | 这里模拟表单提交等业务操作
                </div>
            </div>

            <div class="business-section">
                <h3>🏢 业务操作区</h3>
                <div class="form-group">
                    <label>模拟表单数据：</label>
                    <input v-model="formData.title" @input="saveFormData" placeholder="请输入标题" class="form-input">
                    <textarea v-model="formData.content" @input="saveFormData" placeholder="请输入内容" class="form-textarea"></textarea>

                    <!-- 显示已选择的图片 -->
                    <div v-if="formData.images.length > 0" class="images-section">
                        <label>已选择的图片 ({{ formData.images.length }}张)：</label>
                        <div class="images-list">
                            <div v-for="(image, index) in formData.images" :key="index" class="image-item">
                                <span class="image-index">{{ index + 1 }}.</span>
                                <span class="image-path">{{ image.path }}</span>
                                <button @click="removeImage(index)" class="remove-btn">❌</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="button-group">
                <button class="btn success" @click="submitForm">
                    ✅ 提交表单
                </button>
                <button class="btn warning" @click="chooseImage">
                    🖼️ 选择图片 ({{ formData.images.length }})
                </button>
                <button class="btn info" @click="scanCode">
                    📷 扫码
                </button>
                <button class="btn light" @click="clearFormData">
                    🗑️ 清除表单
                </button>
                <button class="btn secondary" @click="goBackToTest1">
                    ⬅️ 返回Test1
                </button>
                <button class="btn danger" @click="goBackToMiniProgram">
                    🔙 返回小程序
                </button>
            </div>

           
        </div>
    </div>

    <script>
        const { createApp } = Vue

        createApp({
            data() {
                return {
                    logs: [],
                    formData: {
                        title: '',
                        content: '',
                        images: [] // 存储选择的图片
                    }
                }
            },

            mounted() {
                // 初始化页面
                initPage('test2', this.handleResult)

                // 恢复表单数据（简化版）
                this.loadFormData()
            },

            methods: {
                

                // 处理操作结果
                handleResult(data) {
                    const { action, success, result, error, count, paths } = data

                    if (success) {
                        switch (action) {
                            case 'scanCode':
                                console.log(`📷 扫码成功: ${result}`)
                                // 将扫码结果填入表单
                                if (result) {
                                    this.formData.content += `\n扫码结果: ${result}`
                                    this.saveFormData() // 保存表单数据
                                }
                                break
                            case 'chooseImage':
                                console.log(`🖼️ 选择图片成功: ${count}张`)
                                if (paths && paths.length > 0) {
                                    alert(JSON.stringify(paths))
                                    // 添加图片到数组中
                                    this.formData.images.push({
                                        path: paths[0],
                                        timestamp: Date.now()
                                    })
                                    console.log(`📁 已添加图片 ${this.formData.images.length}: ${paths[0]}`)
                                    this.saveFormData() // 保存表单数据
                                }
                                break
                            default:
                                console.log(`✅ ${action} 操作成功`)
                        }
                    } else {
                        console.error(`❌ ${action} 操作失败: ${error}`)
                    }
                },

                // 提交表单
                submitForm() {
                    if (!this.formData.title.trim()) {
                       
                        return
                    }

                   
                    // 模拟提交成功后清除数据并返回小程序
                    setTimeout(() => {
                        this.clearFormData() // 提交成功后清除保存的数据
                        goBack('表单提交完成')
                    }, 1000)
                },

                // 移除图片
                removeImage(index) {
                    this.formData.images.splice(index, 1)
                    this.saveFormData()
                },

                // 选择图片
                chooseImage() {
                    chooseImage('从Test2页面选择图片')
                },

                // 扫码
                scanCode() {
                    scanCode('从Test2页面扫码')
                },

                // 返回Test1页面
                goBackToTest1() {
                    window.location.href = './test1.html?from=test2'
                },

                // 返回Home页面
                goBackToHome() {
                    window.location.href = './home.html?from=test2'
                },

                // 返回小程序
                goBackToMiniProgram() {
                    goBack('从Test2页面返回')
                },


                // 保存表单数据到localStorage
                saveFormData() {
                    try {
                        localStorage.setItem('test2_form_data', JSON.stringify(this.formData))
                        console.log('💾 表单数据已保存')
                    } catch (error) {
                        console.error('保存表单数据失败:', error)
                    }
                },

                // 从localStorage恢复表单数据
                loadFormData() {
                    try {
                        const savedData = localStorage.getItem('test2_form_data')
                        if (savedData) {
                            this.formData = { ...this.formData, ...JSON.parse(savedData) }
                            this.addLog(`📥 恢复表单数据: ${this.formData.images.length}张图片`)
                        }
                    } catch (error) {
                        console.error('恢复表单数据失败:', error)
                    }
                },

                // 清除保存的表单数据
                clearFormData() {
                    try {
                        localStorage.removeItem('test2_form_data')
                        this.formData = {
                            title: '',
                            content: '',
                            images: []
                        }
                    } catch (error) {
                        console.error('清除表单数据失败:', error)
                    }
                },

              
            }
        }).mount('#app')
    </script>

    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 50%, #fecfef 100%);
            min-height: 100vh;
            padding: 20px;
        }

        .container {
            max-width: 600px;
            margin: 0 auto;
            background: white;
            border-radius: 12px;
            padding: 24px;
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
        }

        h1 {
            text-align: center;
            color: #333;
            margin-bottom: 8px;
        }

        p {
            text-align: center;
            color: #666;
            margin-bottom: 24px;
        }

        .nav-info {
            background: #f8f9fa;
            border-radius: 8px;
            padding: 16px;
            margin-bottom: 24px;
        }

        .breadcrumb {
            font-size: 14px;
            color: #666;
            margin-bottom: 8px;
        }

        .breadcrumb .current {
            color: #e91e63;
            font-weight: 500;
        }

        .level-info {
            font-size: 12px;
            color: #999;
        }

        .business-section {
            background: #fff3cd;
            border-radius: 8px;
            padding: 16px;
            margin-bottom: 24px;
        }

        .business-section h3 {
            color: #856404;
            margin-bottom: 16px;
        }

        .form-group {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .form-group label {
            font-weight: 500;
            color: #333;
        }

        .form-input, .form-textarea {
            padding: 12px;
            border: 1px solid #ddd;
            border-radius: 6px;
            font-size: 14px;
        }

        .form-textarea {
            min-height: 80px;
            resize: vertical;
        }

        .images-section {
            margin-top: 16px;
            padding: 12px;
            background: #f0f8ff;
            border-radius: 6px;
        }

        .images-list {
            margin-top: 8px;
        }

        .image-item {
            display: flex;
            align-items: center;
            padding: 8px;
            background: white;
            border-radius: 4px;
            margin-bottom: 8px;
            border: 1px solid #e0e0e0;
        }

        .image-index {
            font-weight: 500;
            color: #666;
            margin-right: 8px;
            min-width: 20px;
        }

        .image-path {
            flex: 1;
            font-size: 12px;
            color: #333;
            word-break: break-all;
        }

        .remove-btn {
            background: none;
            border: none;
            cursor: pointer;
            font-size: 12px;
            padding: 4px;
            margin-left: 8px;
        }

        .button-group {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 12px;
            margin-bottom: 32px;
        }

        .btn {
            padding: 12px 16px;
            border: none;
            border-radius: 8px;
            font-size: 14px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s;
        }

        .btn.primary { background: #007AFF; color: white; }
        .btn.secondary { background: #6c757d; color: white; }
        .btn.success { background: #28a745; color: white; }
        .btn.warning { background: #ffc107; color: #212529; }
        .btn.info { background: #17a2b8; color: white; }
        .btn.danger { background: #dc3545; color: white; }
        .btn.light { background: #f8f9fa; color: #333; border: 1px solid #ddd; }

        .btn:hover {
            transform: translateY(-1px);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }

        .log-section {
            border-top: 1px solid #eee;
            padding-top: 24px;
        }

        .log-section h3 {
            color: #333;
            margin-bottom: 16px;
        }

        .log-container {
            background: #f8f9fa;
            border-radius: 8px;
            padding: 16px;
            max-height: 250px;
            overflow-y: auto;
        }

        .log-item {
            display: flex;
            margin-bottom: 8px;
            font-size: 12px;
        }

        .log-time {
            color: #999;
            margin-right: 12px;
            min-width: 80px;
        }

        .log-message {
            color: #333;
        }

        @media (max-width: 480px) {
            .button-group {
                grid-template-columns: 1fr;
            }
        }
    </style>
</body>
</html>