single_uniapp22miao/static/html/pc.html

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1">
        <title>积分商城</title>
        <meta name="Copyright" content="helang">
        <meta name="keywords" content="积分商城">
        <meta name="description" content="积分商城">
        <style type="text/css">
            body {
                margin: 0;
                background-color: #f5f5f5;
            }
            iframe {
                width: 375px;
                height: 667px;
                background-color: #fff;
                box-sizing: border-box;
                border: none;
            }
            @media screen and (min-width: 450px) {
                iframe {
                    position: fixed;
                    top: 0;
                    right: 0;
                    bottom: 0;
                    left: 0;
                    margin: auto;
                    border: 1px solid #f5f5f5;
                    border-radius: 4px;
                }
            }
        </style>
    </head>
    <body>
        <iframe src="/" id="iframe"></iframe>
        
        <script type="text/javascript">
            window.isPC = true;
            
            (function() {
                var iframe = document.getElementById('iframe');
                
                function safeDecode(value) {
                    try {
                        return decodeURIComponent((value || '').replace(/\+/g, ' '));
                    } catch (e) {
                        return value || '';
                    }
                }

                function buildQuery(params) {
                    var pairs = [];
                    for (var key in params) {
                        if (!Object.prototype.hasOwnProperty.call(params, key)) {
                            continue;
                        }
                        if (params[key] === undefined || params[key] === null || params[key] === '') {
                            continue;
                        }
                        pairs.push(encodeURIComponent(key) + '=' + encodeURIComponent(params[key]));
                    }
                    return pairs.join('&');
                }

                function parseQuery(query, ignoredKey) {
                    var result = {
                        params: {},
                        ignoredValue: ''
                    };
                    if (!query) {
                        return result;
                    }
                    var pairs = query.split('&');
                    for (var i = 0; i < pairs.length; i++) {
                        if (!pairs[i]) {
                            continue;
                        }
                        var pair = pairs[i].split('=');
                        var key = safeDecode(pair[0]);
                        var value = pair.length > 1 ? safeDecode(pair.slice(1).join('=')) : '';
                        if (!key) {
                            continue;
                        }
                        if (key === ignoredKey) {
                            result.ignoredValue = result.ignoredValue || value;
                            continue;
                        }
                        result.params[key] = value;
                    }
                    return result;
                }

                // 获取URL参数
                function getUrlParams() {
                    var params = {};
                    var search = window.location.search.substring(1);
                    if (search) {
                        var pairs = search.split('&');
                        for (var i = 0; i < pairs.length; i++) {
                            var pair = pairs[i].split('=');
                            var key = safeDecode(pair[0]);
                            if (!key) {
                                continue;
                            }
                            params[key] = pair.length > 1 ? safeDecode(pair.slice(1).join('=')) : '';
                        }
                    }
                    return params;
                }

                function normalizeHash(rawHash, username) {
                    var hash = rawHash || '';
                    if (hash.charAt(0) === '#') {
                        hash = hash.substring(1);
                    }
                    if (!hash && !username) {
                        return '';
                    }

                    var questionIndex = hash.indexOf('?');
                    var path = questionIndex >= 0 ? hash.substring(0, questionIndex) : hash;
                    var query = questionIndex >= 0 ? hash.substring(questionIndex + 1) : '';
                    var parsed = parseQuery(query, 'username');
                    var finalUsername = username || parsed.ignoredValue;

                    if (!path) {
                        path = '/pages/integral/index';
                    }
                    if (finalUsername) {
                        parsed.params.username = finalUsername;
                    }

                    var queryString = buildQuery(parsed.params);
                    return '#' + path + (queryString ? '?' + queryString : '');
                }

                function removeHashParam(rawHash, key) {
                    var hash = rawHash || '';
                    if (hash.charAt(0) === '#') {
                        hash = hash.substring(1);
                    }
                    if (!hash) {
                        return '';
                    }

                    var questionIndex = hash.indexOf('?');
                    var path = questionIndex >= 0 ? hash.substring(0, questionIndex) : hash;
                    var query = questionIndex >= 0 ? hash.substring(questionIndex + 1) : '';
                    var parsed = parseQuery(query, key);
                    var queryString = buildQuery(parsed.params);
                    return '#' + path + (queryString ? '?' + queryString : '');
                }

                function getParentHashFromIframe(iframeHash) {
                    var params = getUrlParams();
                    if (params.username) {
                        return removeHashParam(iframeHash, 'username');
                    }
                    return normalizeHash(iframeHash, '');
                }

                function updateParentUrl(iframeHash) {
                    var parentHash = getParentHashFromIframe(iframeHash);
                    if (parentHash && window.location.hash !== parentHash) {
                        history.replaceState(null, '', window.location.search + parentHash);
                    }
                }
                
                // 初始化：根据父页面URL设置iframe的src
                function initIframeSrc() {
                    var params = getUrlParams();
                    var iframeHash = normalizeHash(window.location.hash, params.username);
                    iframe.src = iframeHash ? '/' + iframeHash : '/';
                }
                
                // 监听iframe内部路由变化，同步到父页面URL
                function syncIframeUrlToParent() {
                    try {
                        var iframeWindow = iframe.contentWindow;
                        
                        // 监听iframe的hashchange事件
                        iframeWindow.addEventListener('hashchange', function() {
                            var iframeHash = iframeWindow.location.hash;
                            updateParentUrl(iframeHash);
                        });
                        
                        // 初始同步
                        var iframeHash = iframeWindow.location.hash;
                        updateParentUrl(iframeHash);
                    } catch (e) {
                        console.log('无法访问iframe内容（可能跨域）:', e);
                    }
                }
                
                // 监听父页面hash变化，同步到iframe
                window.addEventListener('hashchange', function() {
                    try {
                        var params = getUrlParams();
                        var parentHash = normalizeHash(window.location.hash, params.username);
                        var iframeHash = iframe.contentWindow.location.hash;
                        
                        if (parentHash !== iframeHash) {
                            iframe.contentWindow.location.hash = parentHash || '#/pages/integral/index';
                        }
                    } catch (e) {
                        console.log('无法同步hash到iframe:', e);
                    }
                });
                
                // iframe加载完成后设置监听
                iframe.onload = function() {
                    syncIframeUrlToParent();
                    
                    // 定期检查同步（作为备份）
                    setInterval(function() {
                        try {
                            var iframeHash = iframe.contentWindow.location.hash;
                            updateParentUrl(iframeHash);
                        } catch (e) {}
                    }, 500);
                };
                
                // 窗口尺寸检测
                window.onload = function() {
                    if (window.innerWidth <= 420) {
                        // 小屏幕直接跳转到应用
                        var params = getUrlParams();
                        var targetHash = normalizeHash(window.location.hash, params.username);
                        var targetUrl = targetHash ? '/' + targetHash : '/';
                        window.location.href = targetUrl;
                    }
                };
                
                // 初始化
                initIframeSrc();
            })();
        </script>
    </body>
</html>