<!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">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <title>扫描结果</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            -webkit-tap-highlight-color: transparent;
        }
        
        body {
            font-family: "Microsoft YaHei", sans-serif;
            background-color: #f5f7f6;
            color: #333;
            line-height: 1.2;
            min-height: 100vh;
        }
        
        .container {
            max-width: 600px;
            margin: 0 auto;
            padding: 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
            min-height: 100vh;
        }
        
        .title {
            font-size: 24px;
            font-weight: bold;
            margin: 30px 0;
            text-align: center;
        }
        
        .smiley {
            width: 100px;
            height: 100px;
            margin: 20px 0 30px;
        }
        
        .product-info {
            width: 100%;
            text-align: center;
            padding: 0 20px;
            margin-bottom: 20px;
        }
        
        .product-name {
            font-size: 18px;
            font-weight: bold;
            line-height: 1.8;
            margin-bottom: 10px;
        }
        
        .product-code {
            color: #666;
            font-size: 16px;
            margin: 10px 0 20px;
        }
        
        .origin-info {
            color: #e50216;
            font-size: 18px;
            font-weight: bold;
            margin: 15px 0;
            text-align: center;
        }
        
        .provider {
            background-color: #dddfde;
            padding: 15px;
            border-radius: 15px;
            margin: 10px 0;
            text-align: center;
            width: 100%;
            font-size: 13px;
            color: #666;
        }
        
        .verify-message {
            color: #666;
            text-align: center;
            margin: 20px 0;
            font-size: 16px;
        }
        
        .divider {
            width: 100%;
            height: 1px;
            background: #eee;
            margin: 20px 0;
            position: relative;
        }
        
        .divider::before {
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            top: 50%;
            border-top: 1px dashed #ddd;
        }
        
        .remind {
            color: #666;
            text-align: center;
            margin: 20px 0;
            font-size: 16px;
        }
        
        .back-btn {
            display: block;
            width: 60%;           
            max-width: 300px;
            margin: 30px auto;
            padding: 12px 0;
            background: linear-gradient(to right, #ffa366, #ff5252);
            color: #fff;
            text-align: center;
            text-decoration: none;
            border-radius: 10px;
            font-size: 16px;
            border: none;
            cursor: pointer;
            box-shadow: 0 2px 8px rgba(255, 82, 82, 0.2);
            transition: all 0.3s ease;
        }
        
        .back-btn:hover {
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(255, 82, 82, 0.3);
        }
        
        @media screen and (max-width: 480px) {
            .container {
                padding: 15px;
            }
            
            .title {
                font-size: 22px;
                margin: 20px 0;
            }
            
            .product-name {
                font-size: 16px;
            }
            
            .back-btn {
                width: 90%;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <h1 class="title">扫描结果</h1>
        
        <img src="image/xl.jpg" alt="笑脸" class="smiley">
        
        <div class="product-info">
            <div class="product-name" id="productName">正在加载...</div>
            <div class="product-code" id="productCode"></div>
        </div>
        
        <div class="origin-info">您购买的是中国重汽原厂配件</div>
        
        <div class="provider">配件来自经销商：重汽（济南）后市场智慧服务有限公司</div>
        
        <div class="verify-message">请确认购买商品与产品名称是否一致</div>
        
        <div class="divider"></div>
        
        <div class="remind">请您放心使用!</div>
        
        <a href="index.html" class="back-btn">返回首页</a>
    </div>

    <script>
        $(document).ready(function() {
            // 获取URL参数中的xlh
            function getQueryParam(param) {
                var search = window.location.search.substring(1);
                var params = new URLSearchParams(search);
                return params.get(param);
            }
    
            // 获取xlh参数
            var xlh = getQueryParam('xlh');
            
            if(xlh) {
                // 调用接口获取数据
                $.ajax({
                    url: '/api/index/find_zq',
                    type: 'GET',
                    data: {
                        xlh: xlh
                    },
                    success: function(response) {
                        if(response.code === 1) {
                            // 更新页面内容
                            $('#productName').text(response.data.name || '未知产品');
                            $('#productCode').text(response.data.cpno || '');
                        } else {
                            // 显示错误信息
                            $('#productName').text('未找到产品信息');
                            $('#productCode').text('');
                        }
                    },
                    error: function() {
                        // 处理错误情况
                        $('#productName').text('获取产品信息失败');
                        $('#productCode').text('');
                    }
                });
            } else {
                // 没有xlh参数的情况
                $('#productName').text('未提供产品序列号');
                $('#productCode').text('');
            }
        });
    </script>
</body>
</html>