Upload 4 files

QR.py

@@ -1,7 +1,7 @@
 import cv2
 import numpy as np
 from pyzbar.pyzbar import decode
-from PIL import Image
+from PIL import Image, ImageDraw
 import requests
 from io import BytesIO
 import os
@@ -9,13 +9,81 @@ import sys
 
 # 设置默认编码为UTF-8
 if sys.platform.startswith('win'):
-    # Windows系统下处理中文路径
     import locale
     locale.setlocale(locale.LC_ALL, 'zh_CN.UTF-8')
 
-def parse_qr_code_from_file(file_path):
+def detect_and_extract_circular_qr(image):
     """
-    从本地文件解析二维码
+    检测并提取圆形二维码区域
+    
+    参数:
+        image: numpy数组格式的图像
+    
+    返回:
+        处理后的图像列表
+    """
+    processed_images = []
+    
+    # 转换为灰度图
+    if len(image.shape) == 3:
+        gray = cv2.cvtColor(image, cv2.COLOR_BGR2GRAY)
+    else:
+        gray = image.copy()
+    
+    # 使用霍夫圆检测
+    circles = cv2.HoughCircles(
+        gray,
+        cv2.HOUGH_GRADIENT,
+        dp=1,
+        minDist=50,
+        param1=50,
+        param2=30,
+        minRadius=50,
+        maxRadius=500
+    )
+    
+    if circles is not None:
+        circles = np.uint16(np.around(circles))
+        
+        for circle in circles[0, :]:
+            x, y, r = circle
+            
+            # 创建掩码
+            mask = np.zeros(gray.shape, np.uint8)
+            cv2.circle(mask, (x, y), r, 255, -1)
+            
+            # 提取圆形区域
+            circular_region = cv2.bitwise_and(image, image, mask=mask)
+            
+            # 裁剪到包含圆形的最小矩形
+            x_min = max(0, x - r)
+            x_max = min(image.shape[1], x + r)
+            y_min = max(0, y - r)
+            y_max = min(image.shape[0], y + r)
+            
+            cropped = circular_region[y_min:y_max, x_min:x_max]
+            processed_images.append(cropped)
+            
+            # 同时添加将圆形区域转换为方形的版本
+            square_size = 2 * r
+            square_region = np.zeros((square_size, square_size, 3), dtype=np.uint8)
+            square_region[:] = 255  # 白色背景
+            
+            # 将圆形内容复制到方形图像中心
+            if cropped.shape[0] > 0 and cropped.shape[1] > 0:
+                y_offset = (square_size - cropped.shape[0]) // 2
+                x_offset = (square_size - cropped.shape[1]) // 2
+                
+                if y_offset >= 0 and x_offset >= 0:
+                    square_region[y_offset:y_offset+cropped.shape[0], 
+                                x_offset:x_offset+cropped.shape[1]] = cropped
+                    processed_images.append(square_region)
+    
+    return processed_images
+
+def parse_qr_code_advanced(file_path):
+    """
+    高级二维码解析函数，支持各种形状的二维码
     
     参数:
         file_path: 二维码图片的本地路径
@@ -28,122 +96,122 @@ def parse_qr_code_from_file(file_path):
         if not os.path.exists(file_path):
             print(f"错误：文件不存在 - {file_path}")
             return None
-            
-        # 使用PIL读取图片以更好地处理中文路径
+        
+        # 使用PIL读取图片
         pil_image = Image.open(file_path)
         
-        # 转换为RGB格式（如果需要）
+        # 转换为RGB格式
         if pil_image.mode != 'RGB':
             pil_image = pil_image.convert('RGB')
         
         # 转换为numpy数组
         image_array = np.array(pil_image)
         
-        # 如果是RGB，转换为BGR（OpenCV格式）
-        if len(image_array.shape) == 3:
-            image_array = cv2.cvtColor(image_array, cv2.COLOR_RGB2BGR)
+        # 准备多个版本的图像进行尝试
+        images_to_try = [image_array]
         
-        # 解码二维码
-        decoded_objects = decode(image_array)
+        # 检测并提取圆形二维码
+        circular_extracts = detect_and_extract_circular_qr(image_array)
+        images_to_try.extend(circular_extracts)
         
-        if decoded_objects:
-            # 返回第一个解析到的内容
-            result = decoded_objects[0].data.decode('utf-8')
-            return result
-        else:
-            print("未能识别二维码，尝试图像预处理...")
+        # 尝试各种预处理方法
+        for idx, img in enumerate(images_to_try):
+            print(f"尝试方法 {idx + 1}/{len(images_to_try)}...")
             
-            # 转换为灰度图
-            if len(image_array.shape) == 3:
-                gray = cv2.cvtColor(image_array, cv2.COLOR_BGR2GRAY)
+            # 直接尝试解码
+            decoded_objects = decode(img)
+            if decoded_objects:
+                print(f"✓ 方法 {idx + 1} 成功解析！")
+                return decoded_objects[0].data.decode('utf-8')
+            
+            # 转换为灰度图并尝试多种预处理
+            if len(img.shape) == 3:
+                gray = cv2.cvtColor(img, cv2.COLOR_BGR2GRAY)
             else:
-                gray = image_array
+                gray = img
             
-            # 尝试不同的预处理方法
+            # 预处理方法列表
             preprocessing_methods = [
-                # 方法1：简单二值化
-                lambda img: cv2.threshold(img, 127, 255, cv2.THRESH_BINARY)[1],
-                # 方法2：自适应阈值
-                lambda img: cv2.adaptiveThreshold(img, 255, cv2.ADAPTIVE_THRESH_GAUSSIAN_C, cv2.THRESH_BINARY, 11, 2),
-                # 方法3：OTSU阈值
-                lambda img: cv2.threshold(img, 0, 255, cv2.THRESH_BINARY + cv2.THRESH_OTSU)[1],
-                # 方法4：反转图像
-                lambda img: cv2.bitwise_not(img)
-            ]
-            
-            for i, preprocess in enumerate(preprocessing_methods):
-                processed = preprocess(gray)
-                decoded_objects = decode(processed)
-                if decoded_objects:
-                    print(f"使用预处理方法{i+1}成功解析")
-                    return decoded_objects[0].data.decode('utf-8')
-            
-            # 如果所有方法都失败，尝试使用PIL直接解码
-            try:
-                from PIL import ImageEnhance
-                
+                # 简单二值化
+                lambda g: cv2.threshold(g, 127, 255, cv2.THRESH_BINARY)[1],
+                # OTSU阈值
+                lambda g: cv2.threshold(g, 0, 255, cv2.THRESH_BINARY + cv2.THRESH_OTSU)[1],
+                # 自适应阈值
+                lambda g: cv2.adaptiveThreshold(g, 255, cv2.ADAPTIVE_THRESH_GAUSSIAN_C, 
+                                              cv2.THRESH_BINARY, 11, 2),
+                # 反转颜色
+                lambda g: cv2.bitwise_not(g),
                 # 增强对比度
-                enhancer = ImageEnhance.Contrast(pil_image)
-                enhanced = enhancer.enhance(2.0)
-                
-                # 再次尝试解码
-                decoded_objects = decode(np.array(enhanced))
-                if decoded_objects:
-                    print("使用PIL增强后成功解析")
-                    return decoded_objects[0].data.decode('utf-8')
-            except:
-                pass
-            
-            return None
+                lambda g: cv2.convertScaleAbs(g, alpha=2.0, beta=0),
+                # 形态学操作 - 闭运算
+                lambda g: cv2.morphologyEx(
+                    cv2.threshold(g, 127, 255, cv2.THRESH_BINARY)[1],
+                    cv2.MORPH_CLOSE,
+                    cv2.getStructuringElement(cv2.MORPH_RECT, (3, 3))
+                ),
+                # 高斯模糊后二值化
+                lambda g: cv2.threshold(
+                    cv2.GaussianBlur(g, (5, 5), 0),
+                    127, 255, cv2.THRESH_BINARY
+                )[1]
+            ]
             
+            for j, preprocess in enumerate(preprocessing_methods):
+                try:
+                    processed = preprocess(gray)
+                    decoded_objects = decode(processed)
+                    if decoded_objects:
+                        print(f"✓ 方法 {idx + 1} 的预处理 {j + 1} 成功解析！")
+                        return decoded_objects[0].data.decode('utf-8')
+                except:
+                    continue
+        
+        # 如果所有方法都失败，尝试更激进的方法
+        print("尝试更多高级处理方法...")
+        
+        # 尝试旋转图像
+        for angle in [90, 180, 270]:
+            rotated = cv2.rotate(image_array, angle // 90 - 1)
+            decoded_objects = decode(rotated)
+            if decoded_objects:
+                print(f"✓ 旋转 {angle}° 后成功解析！")
+                return decoded_objects[0].data.decode('utf-8')
+        
+        # 尝试缩放图像
+        for scale in [0.5, 0.75, 1.5, 2.0]:
+            new_size = (int(image_array.shape[1] * scale), int(image_array.shape[0] * scale))
+            resized = cv2.resize(image_array, new_size, interpolation=cv2.INTER_CUBIC)
+            decoded_objects = decode(resized)
+            if decoded_objects:
+                print(f"✓ 缩放 {scale}x 后成功解析！")
+                return decoded_objects[0].data.decode('utf-8')
+        
+        print("✗ 所有方法都无法解析此二维码")
+        return None
+        
     except Exception as e:
         print(f"解析二维码时出错: {e}")
         import traceback
         traceback.print_exc()
         return None
 
-def parse_qr_code_from_url(url):
+def batch_process_directory(directory_path=None):
     """
-    从URL解析二维码
+    批量处理目录下的所有图片文件
     
     参数:
-        url: 二维码图片的URL
-    
-    返回:
-        解析出的链接或文本
-    """
-    try:
-        # 下载图片
-        response = requests.get(url)
-        image = Image.open(BytesIO(response.content))
-        
-        # 转换为numpy数组
-        image_array = np.array(image)
-        
-        # 解码二维码
-        decoded_objects = decode(image_array)
-        
-        if decoded_objects:
-            return decoded_objects[0].data.decode('utf-8')
-        else:
-            return None
-            
-    except Exception as e:
-        print(f"解析二维码时出错: {e}")
-        return None
-
-def test_with_multiple_files():
-    """
-    测试函数，尝试解析当前目录下的所有图片文件
+        directory_path: 目录路径，默认为当前目录
     """
-    image_extensions = ['.jpg', '.jpeg', '.png', '.bmp', '.gif']
-    current_dir = os.getcwd()
+    if directory_path is None:
+        directory_path = os.getcwd()
     
-    print(f"当前目录: {current_dir}")
-    print("正在查找图片文件...\n")
+    image_extensions = ['.jpg', '.jpeg', '.png', '.bmp', '.gif', '.webp']
+    
+    print(f"扫描目录: {directory_path}")
+    print("=" * 60)
     
     found_images = []
-    for file in os.listdir(current_dir):
+    for file in os.listdir(directory_path):
         if any(file.lower().endswith(ext) for ext in image_extensions):
             found_images.append(file)
     
@@ -151,47 +219,42 @@ def test_with_multiple_files():
         print("未找到图片文件")
         return
     
-    print(f"找到 {len(found_images)} 个图片文件:")
-    for i, img in enumerate(found_images):
-        print(f"{i+1}. {img}")
-    
-    print("\n开始解析...\n")
+    print(f"找到 {len(found_images)} 个图片文件\n")
     
-    for img_file in found_images:
-        print(f"正在解析: {img_file}")
-        full_path = os.path.join(current_dir, img_file)
-        result = parse_qr_code_from_file(full_path)
+    success_count = 0
+    for i, img_file in enumerate(found_images, 1):
+        print(f"\n[{i}/{len(found_images)}] 正在处理: {img_file}")
+        print("-" * 40)
+        
+        full_path = os.path.join(directory_path, img_file)
+        result = parse_qr_code_advanced(full_path)
         
         if result:
-            print(f"✓ 解析成功！")
-            print(f"  内容: {result}")
+            success_count += 1
+            print(f"\n✅ 成功解析！")
+            print(f"内容: {result}")
+            
+            # 如果是微信支付链接，特别标注
+            if result.startswith('wxp://'):
+                print("类型: 微信支付二维码")
+            elif 'weixin://' in result or 'wx.tenpay.com' in result:
+                print("类型: 微信相关链接")
         else:
-            print(f"✗ 无法解析此文件")
-        print("-" * 50)
+            print(f"\n❌ 无法解析此文件")
+        
+        print("=" * 60)
+    
+    print(f"\n\n总结: 成功解析 {success_count}/{len(found_images)} 个文件")
 
 # 使用示例
 if __name__ == "__main__":
-    # 方式1：自动查找并解析当前目录下的所有图片
-    print("=== 自动扫描模式 ===")
-    test_with_multiple_files()
-    
-    print("\n=== 手动指定文件模式 ===")
-    # 方式2：手动指定文件名（请根据实际情况修改）
-    # 注意：使用原始字符串(r"")或正斜杠(/)来避免路径问题
-    
-    # 示例路径（请替换为您的实际文件名）
-    test_files = [
-        "微信图片_20250609201923.jpg",  # 直接使用文件名
-        r"E:\收款web\微信图片_20250609201923.jpg",  # 完整路径示例
-    ]
-    
-    for file_path in test_files:
-        if os.path.exists(file_path):
-            print(f"\n尝试解析: {file_path}")
-            result = parse_qr_code_from_file(file_path)
-            if result:
-                print(f"解析成功！内容: {result}")
-            else:
-                print("无法解析此二维码")
-        else:
-            print(f"\n文件不存在: {file_path}")
+    print("=== 增强版二维码解析工具 ===")
+    print("支持圆形、方形等各种形状的二维码\n")
+    
+    # 批量处理当前目录
+    batch_process_directory()
+    
+    # 或者处理单个文件
+    # result = parse_qr_code_advanced("your_circular_qr_code.jpg")
+    # if result:
+    #     print(f"解析结果: {result}")

index.html

@@ -3,9 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
-    <title>收款</title>
-    <!-- 引入二维码解析库 -->
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/jsQR/1.4.0/jsQR.js"></script>
+    <title>💖 收款 💖</title>
     <style>
         * {
             margin: 0;
@@ -15,50 +13,58 @@
         
         body {
             font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
-            background-color: #f7f7f7;
-            color: #333;
+            background: linear-gradient(135deg, #ffeef8 0%, #ffe0f0 35%, #fbd3e9 100%);
+            min-height: 100vh;
+            color: #5a4a5a;
         }
         
-        .header {
-            background-color: #fff;
-            padding: 15px 20px;
+        .container {
+            max-width: 480px;
+            margin: 0 auto;
+            padding: 15px;
+            min-height: 100vh;
             display: flex;
-            align-items: center;
-            justify-content: space-between;
-            box-shadow: 0 1px 1px rgba(0,0,0,0.05);
+            flex-direction: column;
         }
         
-        .header h1 {
-            font-size: 18px;
-            font-weight: normal;
-            flex: 1;
+        .header {
             text-align: center;
+            margin-bottom: 20px;
+            padding-top: 10px;
         }
         
-        .header .back, .header .more {
-            width: 24px;
-            height: 24px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            cursor: pointer;
+        .header h1 {
+            font-size: 24px;
+            color: #ff6b9d;
+            font-weight: 600;
+            text-shadow: 2px 2px 4px rgba(255, 182, 193, 0.3);
         }
         
-        .profile {
-            background-color: #fff;
+        .profile-card {
+            background: rgba(255, 255, 255, 0.9);
+            border-radius: 20px;
             padding: 20px;
+            box-shadow: 0 8px 32px rgba(255, 182, 193, 0.2);
+            backdrop-filter: blur(10px);
+            margin-bottom: 20px;
+            text-align: center;
             display: flex;
             align-items: center;
-            margin-top: 1px;
+            gap: 15px;
+        }
+        
+        .avatar-wrapper {
+            position: relative;
+            flex-shrink: 0;
         }
         
         .avatar {
-            width: 50px;
-            height: 50px;
+            width: 60px;
+            height: 60px;
             border-radius: 50%;
-            margin-right: 15px;
-            background-color: #e8e8e8;
             overflow: hidden;
+            box-shadow: 0 4px 15px rgba(255, 182, 193, 0.4);
+            background: #ffe0f0;
         }
         
         .avatar img {
@@ -67,34 +73,67 @@
             object-fit: cover;
         }
         
-        .info h2 {
+        .sparkle {
+            position: absolute;
+            color: #ffb6c1;
             font-size: 16px;
-            font-weight: normal;
-            margin-bottom: 5px;
+            animation: sparkle 2s ease-in-out infinite;
+        }
+        
+        .sparkle:nth-child(2) { top: -8px; right: -8px; animation-delay: 0.3s; }
+        .sparkle:nth-child(3) { bottom: -8px; left: -8px; animation-delay: 0.6s; }
+        
+        @keyframes sparkle {
+            0%, 100% { opacity: 0; transform: scale(0.8); }
+            50% { opacity: 1; transform: scale(1.2); }
         }
         
-        .info p {
+        .profile-info {
+            text-align: left;
+            flex: 1;
+        }
+        
+        .profile-info h2 {
+            font-size: 18px;
+            color: #ff6b9d;
+            margin-bottom: 3px;
+        }
+        
+        .profile-info p {
+            color: #a8a8a8;
             font-size: 14px;
-            color: #888;
         }
         
         .amount-section {
-            background-color: #fff;
-            padding: 30px 20px;
-            margin-top: 10px;
+            background: rgba(255, 255, 255, 0.95);
+            border-radius: 20px;
+            padding: 20px 15px;
+            box-shadow: 0 8px 32px rgba(255, 182, 193, 0.2);
+            backdrop-filter: blur(10px);
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+        }
+        
+        .amount-display {
             text-align: center;
+            margin-bottom: 20px;
         }
         
         .amount-label {
-            font-size: 14px;
-            color: #333;
-            margin-bottom: 10px;
+            font-size: 13px;
+            color: #ff9a9e;
+            margin-bottom: 8px;
+            font-weight: 500;
         }
         
-        .amount {
-            font-size: 48px;
-            font-weight: 500;
-            margin-bottom: 30px;
+        .amount-value {
+            font-size: 36px;
+            font-weight: 700;
+            background: linear-gradient(135deg, #ff6b9d 0%, #ff9a9e 100%);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
         }
         
         .payment-items {
@@ -102,291 +141,408 @@
             grid-template-columns: repeat(2, 1fr);
             gap: 10px;
             margin-bottom: 20px;
+            flex: 1;
+            align-content: start;
         }
         
         .payment-item {
-            background-color: #f7f7f7;
-            padding: 15px;
-            border-radius: 8px;
+            background: rgba(255, 245, 251, 0.8);
+            padding: 12px;
+            border-radius: 12px;
             text-align: center;
             cursor: pointer;
-            transition: all 0.3s ease;
+            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
             border: 2px solid transparent;
+            position: relative;
+            overflow: hidden;
+        }
+        
+        .payment-item:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 4px 12px rgba(255, 182, 193, 0.25);
         }
         
         .payment-item.active {
-            background-color: #e7f7e7;
-            border-color: #4CAF50;
+            border-color: #ff9a9e;
+            box-shadow: 0 0 0 3px rgba(255, 154, 158, 0.15);
         }
         
         .payment-item .emoji {
-            font-size: 24px;
-            margin-bottom: 5px;
+            font-size: 20px;
+            margin-bottom: 6px;
+            display: block;
+            filter: drop-shadow(2px 2px 4px rgba(255, 182, 193, 0.3));
+            transition: transform 0.3s ease;
+        }
+        
+        .payment-item:hover .emoji {
+            transform: scale(1.1);
         }
         
         .payment-item .price {
-            font-size: 18px;
-            font-weight: 500;
-            color: #333;
+            font-size: 15px;
+            font-weight: 600;
+            color: #ff6b9d;
         }
         
         .payment-item .quantity {
             display: inline-block;
-            background-color: #4CAF50;
+            background: #ff9a9e;
             color: white;
-            padding: 2px 8px;
-            border-radius: 12px;
-            font-size: 12px;
-            margin-left: 5px;
+            padding: 1px 6px;
+            border-radius: 8px;
+            font-size: 11px;
+            margin-left: 4px;
+            font-weight: 600;
         }
         
-        .note {
-            text-align: left;
-            padding: 0 20px;
-            margin-bottom: 20px;
+        .note-section {
+            margin-bottom: 15px;
         }
         
         .note-label {
-            font-size: 14px;
-            color: #888;
-            margin-bottom: 10px;
+            font-size: 13px;
+            color: #ff9a9e;
+            margin-bottom: 6px;
+            font-weight: 500;
         }
         
         .note-input {
             width: 100%;
-            padding: 10px;
-            border: 1px solid #e0e0e0;
-            border-radius: 4px;
+            padding: 10px 12px;
+            border: 2px solid #ffe0f0;
+            border-radius: 10px;
             font-size: 14px;
-            background-color: #f7f7f7;
+            background: rgba(255, 255, 255, 0.8);
+            transition: all 0.3s ease;
+            color: #5a4a5a;
+        }
+        
+        .note-input:focus {
+            outline: none;
+            border-color: #ffb6c1;
+            background: white;
+            box-shadow: 0 0 0 3px rgba(255, 182, 193, 0.2);
+        }
+        
+        .note-input::placeholder {
+            color: #d4a5a5;
         }
         
         .pay-button {
-            background-color: #4CAF50;
+            background: linear-gradient(135deg, #ff6b9d 0%, #ff9a9e 100%);
             color: white;
             border: none;
-            padding: 15px 40px;
-            font-size: 18px;
+            padding: 14px 30px;
+            font-size: 16px;
+            font-weight: 600;
             border-radius: 25px;
             cursor: pointer;
-            width: calc(100% - 40px);
-            margin: 20px;
-            transition: background-color 0.3s ease;
+            width: 100%;
+            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+            box-shadow: 0 4px 15px rgba(255, 107, 157, 0.4);
+            position: relative;
+            overflow: hidden;
+        }
+        
+        .pay-button::before {
+            content: '';
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            width: 0;
+            height: 0;
+            background: rgba(255, 255, 255, 0.3);
+            border-radius: 50%;
+            transform: translate(-50%, -50%);
+            transition: width 0.6s, height 0.6s;
+        }
+        
+        .pay-button:hover::before {
+            width: 300px;
+            height: 300px;
         }
         
         .pay-button:hover {
-            background-color: #45a049;
+            transform: translateY(-2px);
+            box-shadow: 0 6px 20px rgba(255, 107, 157, 0.5);
         }
         
         .pay-button:active {
-            transform: scale(0.98);
+            transform: translateY(0);
         }
         
-        /* 支付处理覆盖层 */
-        .payment-overlay {
+        /* 模态框样式 */
+        .modal {
             display: none;
             position: fixed;
             top: 0;
             left: 0;
             width: 100%;
             height: 100%;
-            background-color: rgba(0,0,0,0.7);
+            background: rgba(255, 182, 193, 0.95);
+            backdrop-filter: blur(10px);
             z-index: 1000;
             align-items: center;
             justify-content: center;
         }
         
-        .payment-processing {
-            background-color: white;
-            padding: 40px;
-            border-radius: 10px;
+        .modal-content {
+            background: white;
+            padding: 30px 25px;
+            border-radius: 25px;
             text-align: center;
-            max-width: 350px;
+            max-width: 320px;
             width: 90%;
+            box-shadow: 0 20px 60px rgba(255, 107, 157, 0.3);
+            position: relative;
+            animation: modalFadeIn 0.4s ease-out;
         }
         
-        .loading-spinner {
-            width: 50px;
-            height: 50px;
-            margin: 20px auto;
-            border: 3px solid #f3f3f3;
-            border-top: 3px solid #4CAF50;
-            border-radius: 50%;
-            animation: spin 1s linear infinite;
+        @keyframes modalFadeIn {
+            from {
+                opacity: 0;
+                transform: scale(0.9) translateY(20px);
+            }
+            to {
+                opacity: 1;
+                transform: scale(1) translateY(0);
+            }
         }
         
-        @keyframes spin {
-            0% { transform: rotate(0deg); }
-            100% { transform: rotate(360deg); }
+        .modal-title {
+            font-size: 18px;
+            color: #ff6b9d;
+            margin-bottom: 15px;
+            font-weight: 600;
         }
         
-        .payment-message {
-            font-size: 16px;
-            color: #333;
-            margin: 20px 0;
+        .qr-wrapper {
+            position: relative;
+            display: inline-block;
+            padding: 12px;
+            background: linear-gradient(135deg, #fff5fb 0%, #ffe0f0 100%);
+            border-radius: 18px;
+            margin-bottom: 15px;
         }
         
-        .payment-submessage {
-            font-size: 14px;
-            color: #666;
-            margin-top: 10px;
+        .qr-code-image {
+            width: 180px;
+            height: 180px;
+            border-radius: 12px;
+            overflow: hidden;
+            box-shadow: 0 4px 15px rgba(255, 182, 193, 0.3);
         }
         
-        .payment-actions {
-            margin-top: 30px;
+        .qr-code-image img {
+            width: 100%;
+            height: 100%;
+            display: block;
         }
         
-        .action-button {
-            padding: 10px 20px;
-            margin: 5px;
-            border: none;
-            border-radius: 5px;
-            cursor: pointer;
-            font-size: 14px;
-            transition: all 0.3s ease;
+        .payment-tips {
+            font-size: 13px;
+            color: #a8a8a8;
+            line-height: 1.5;
+            margin-bottom: 15px;
         }
         
-        .action-button.primary {
-            background-color: #4CAF50;
-            color: white;
+        .payment-amount-display {
+            font-size: 22px;
+            color: #ff6b9d;
+            font-weight: 600;
+            margin: 10px 0;
         }
         
-        .action-button.secondary {
-            background-color: #f0f0f0;
-            color: #333;
+        .close-button {
+            position: absolute;
+            top: 12px;
+            right: 12px;
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            background: #ffe0f0;
+            border: none;
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 18px;
+            color: #ff9a9e;
+            transition: all 0.3s ease;
         }
         
-        .action-button:hover {
-            opacity: 0.9;
-            transform: translateY(-1px);
+        .close-button:hover {
+            background: #ffb6c1;
+            color: white;
+            transform: rotate(90deg);
         }
         
-        /* 隐藏的canvas用于二维码解析 */
-        #qrCanvas {
-            display: none;
+        /* 装饰元素 */
+        .decoration {
+            position: fixed;
+            pointer-events: none;
+            opacity: 0.5;
+            animation: float 6s ease-in-out infinite;
+            font-size: 20px;
         }
         
-        /* 错误提示样式 */
-        .error-state {
-            display: none;
-            padding: 20px;
-            text-align: center;
-        }
+        .decoration:nth-child(1) { top: 10%; left: 5%; animation-delay: 0s; }
+        .decoration:nth-child(2) { top: 20%; right: 5%; animation-delay: 1s; }
+        .decoration:nth-child(3) { bottom: 20%; left: 10%; animation-delay: 2s; }
+        .decoration:nth-child(4) { bottom: 10%; right: 10%; animation-delay: 3s; }
         
-        .error-icon {
-            font-size: 48px;
-            color: #f44336;
-            margin-bottom: 20px;
+        @keyframes float {
+            0%, 100% { transform: translateY(0) rotate(0deg); }
+            50% { transform: translateY(-15px) rotate(10deg); }
         }
         
         /* 响应式优化 */
-        @media (max-width: 480px) {
+        @media (max-height: 700px) {
+            .container {
+                padding: 10px;
+            }
+            .header {
+                margin-bottom: 15px;
+                padding-top: 5px;
+            }
+            .header h1 {
+                font-size: 22px;
+            }
+            .profile-card {
+                padding: 15px;
+                margin-bottom: 15px;
+            }
+            .avatar {
+                width: 50px;
+                height: 50px;
+            }
+            .amount-section {
+                padding: 15px 12px;
+            }
+            .amount-value {
+                font-size: 32px;
+            }
             .payment-items {
-                grid-template-columns: repeat(2, 1fr);
                 gap: 8px;
             }
-            
             .payment-item {
-                padding: 12px;
+                padding: 10px;
             }
-            
-            .amount {
-                font-size: 36px;
+        }
+        
+        @media (max-height: 600px) {
+            .amount-display {
+                margin-bottom: 15px;
+            }
+            .payment-items {
+                margin-bottom: 15px;
+            }
+            .note-section {
+                margin-bottom: 12px;
+            }
+            .pay-button {
+                padding: 12px 25px;
+                font-size: 15px;
             }
         }
     </style>
 </head>
 <body>
-    <div class="header">
-        <div class="back" onclick="goBack()">←</div>
-        <h1>收款</h1>
-        <div class="more">⋯</div>
-    </div>
+    <!-- 装饰元素 -->
+    <div class="decoration">💕</div>
+    <div class="decoration">✨</div>
+    <div class="decoration">🌸</div>
+    <div class="decoration">💖</div>
     
-    <div class="profile">
-        <div class="avatar">
-            <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Crect width='100' height='100' fill='%23e8e8e8'/%3E%3Ctext x='50' y='50' text-anchor='middle' dy='.3em' font-size='40' fill='%23999'%3E👤%3C/text%3E%3C/svg%3E" alt="头像">
-        </div>
-        <div class="info">
-            <h2>收款给 个人</h2>
-            <p>SUNRISE(*晓)</p>
+    <div class="container">
+        <div class="header">
+            <h1>ଘ(੭ˊ꒳ˋ)੭ 收款页面</h1>
         </div>
-    </div>
-    
-    <div class="amount-section">
-        <div class="amount-label">付款金额</div>
-        <div class="amount">¥<span id="totalAmount">1.00</span></div>
-        
-        <div class="payment-items">
-            <div class="payment-item active" data-amount="1.00" onclick="selectItem(this)">
-                <div class="emoji">=>v0=</div>
-                <div class="price">¥1.00</div>
-                <span class="quantity" id="qty-1">×1</span>
-            </div>
-            <div class="payment-item" data-amount="5.20" onclick="selectItem(this)">
-                <div class="emoji">≦∴v <∸ ᴖ</div>
-                <div class="price">¥5.20</div>
+        
+        <div class="profile-card">
+            <div class="avatar-wrapper">
+                <div class="avatar">
+                    <!-- 自定义头像图片 -->
+                    <img src="avatar.jpg" alt="头像" onerror="this.style.display='none'; this.parentElement.innerHTML='👧';">
+                </div>
+                <span class="sparkle">✨</span>
+                <span class="sparkle">✨</span>
             </div>
-            <div class="payment-item" data-amount="5.20" onclick="selectItem(this)">
-                <div class="emoji">᷈>ಞ<᷈</div>
-                <div class="price">¥5.20</div>
+            <div class="profile-info">
+                <h2>给小可爱的打赏</h2>
+                <p>鱼习习(**怡)</p>
             </div>
-            <div class="payment-item" data-amount="5.20" onclick="selectItem(this)">
-                <div class="emoji">☆ฺᵒᵍ☆ฺ</div>
-                <div class="price">¥5.20</div>
+        </div>
+        
+        <div class="amount-section">
+            <div class="amount-display">
+                <div class="amount-label">打赏金额</div>
+                <div class="amount-value">¥<span id="totalAmount">1.00</span></div>
             </div>
-            <div class="payment-item" data-amount="5.20" onclick="selectItem(this)">
-                <div class="emoji">=>ヽ<≈⊙</div>
-                <div class="price">¥5.20</div>
+            
+            <div class="payment-items">
+                <div class="payment-item active" data-amount="1.00" onclick="selectItem(this)">
+                    <span class="emoji">⊂(˃̶͈̀ε ˂̶͈́ ⊂ )</span>
+                    <div class="price">¥1.00</div>
+                    <span class="quantity">×1</span>
+                </div>
+                <div class="payment-item" data-amount="5.20" onclick="selectItem(this)">
+                    <span class="emoji">ฅ՞•ﻌ•՞ฅ</span>
+                    <div class="price">¥5.20</div>
+                </div>
+                <div class="payment-item" data-amount="6.66" onclick="selectItem(this)">
+                    <span class="emoji">૮₍ ˃ ⤙ ˂ ₎ა</span>
+                    <div class="price">¥6.66</div>
+                </div>
+                <div class="payment-item" data-amount="8.88" onclick="selectItem(this)">
+                    <span class="emoji">(´・(oo)・｀)</span>
+                    <div class="price">¥8.88</div>
+                </div>
+                <div class="payment-item" data-amount="13.14" onclick="selectItem(this)">
+                    <span class="emoji">((づ￣ ³￣)づ</span>
+                    <div class="price">¥13.14</div>
+                </div>
+                <div class="payment-item" data-amount="52.00" onclick="selectItem(this)">
+                    <span class="emoji">(｡･ω･｡)ﾉ♡</span>
+                    <div class="price">¥52.00</div>
+                </div>
             </div>
-            <div class="payment-item" data-amount="5.20" onclick="selectItem(this)">
-                <div class="emoji">ଳ∪ᴖ⊙</div>
-                <div class="price">¥5.20</div>
+            
+            <div class="note-section">
+                <div class="note-label">💌 留言</div>
+                <input type="text" class="note-input" placeholder="写点什么暖心的话吧~ ♡">
             </div>
-        </div>
-        
-        <div class="note">
-            <div class="note-label">添加备注</div>
-            <input type="text" class="note-input" placeholder="请输入备注信息">
+            
+            <button class="pay-button" onclick="showPayment()">
+                💖 确认打赏 💖
+            </button>
         </div>
     </div>
     
-    <button class="pay-button" onclick="processPayment()">付款</button>
-    
-    <!-- 支付处理覆盖层 -->
-    <div class="payment-overlay" id="paymentOverlay">
-        <div class="payment-processing">
-            <!-- 加载状态 -->
-            <div id="loadingState">
-                <div class="loading-spinner"></div>
-                <div class="payment-message">正在处理支付请求...</div>
-                <div class="payment-submessage">系统正在识别支付方式</div>
-            </div>
-            
-            <!-- 错误状态 -->
-            <div id="errorState" class="error-state">
-                <div class="error-icon">⚠️</div>
-                <div class="payment-message">无法完成支付</div>
-                <div class="payment-submessage">请确保您已安装微信并重试</div>
-                <div class="payment-actions">
-                    <button class="action-button secondary" onclick="retryPayment()">重试</button>
-                    <button class="action-button secondary" onclick="cancelPayment()">取消</button>
+    <!-- 支付模态框 -->
+    <div class="modal" id="paymentModal">
+        <div class="modal-content">
+            <button class="close-button" onclick="closeModal()">×</button>
+            <h3 class="modal-title">扫码支付 (｡･ω･｡)ﾉ♡</h3>
+            <div class="qr-wrapper">
+                <div class="qr-code-image">
+                    <!-- 微信赞赏码 -->
+                    <img src="wechat_pay.jpg" alt="赞赏码" onerror="this.src='data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' width=\'180\' height=\'180\' viewBox=\'0 0 180 180\'%3E%3Crect width=\'180\' height=\'180\' fill=\'%23ffe0f0\'/%3E%3Ctext x=\'90\' y=\'90\' text-anchor=\'middle\' dy=\'.3em\' font-size=\'13\' fill=\'%23ff9a9e\'%3E请添加赞赏码%3C/text%3E%3C/svg%3E'">
                 </div>
             </div>
+            <div class="payment-amount-display">
+                ¥<span id="modalAmount">0.00</span>
+            </div>
+            <p class="payment-tips">
+                请使用微信扫描上方二维码<br>
+                完成支付 ~ 感谢您的支持<br>
+                ଘ(੭ˊ꒳ˋ)੭
+            </p>
         </div>
     </div>
     
-    <!-- 隐藏的元素用于二维码处理 -->
-    <canvas id="qrCanvas"></canvas>
-    <img id="hiddenQRImage" style="display: none;">
-    
     <script>
-        // 配置项
-        const CONFIG = {
-            // 二维码图片文件名（与HTML同目录）
-            qrCodeImagePath: '微信图片_20250609201923.jpg'
-        };
-        
         let selectedItems = new Set();
         let itemQuantities = {};
         
@@ -398,7 +554,7 @@
             const amount = element.dataset.amount;
             
             if (selectedItems.has(amount)) {
-                // 如果已选中，增加数量
+                // 增加数量
                 itemQuantities[amount] = (itemQuantities[amount] || 1) + 1;
                 
                 // 更新数量显示
@@ -432,110 +588,40 @@
                 total += parseFloat(amount) * (itemQuantities[amount] || 1);
             });
             document.getElementById('totalAmount').textContent = total.toFixed(2);
+            document.getElementById('modalAmount').textContent = total.toFixed(2);
         }
         
-        // 解析二维码图片
-        function decodeQRCode(imagePath) {
-            return new Promise((resolve, reject) => {
-                const img = document.getElementById('hiddenQRImage');
-                const canvas = document.getElementById('qrCanvas');
-                const ctx = canvas.getContext('2d');
-                
-                img.onload = function() {
-                    // 设置canvas尺寸
-                    canvas.width = img.width;
-                    canvas.height = img.height;
-                    
-                    // 绘制图片到canvas
-                    ctx.drawImage(img, 0, 0);
-                    
-                    // 获取图像数据
-                    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
-                    
-                    // 使用jsQR解析
-                    const code = jsQR(imageData.data, imageData.width, imageData.height);
-                    
-                    if (code) {
-                        resolve(code.data);
-                    } else {
-                        reject(new Error('无法识别二维码'));
-                    }
-                };
-                
-                img.onerror = function() {
-                    reject(new Error('无法加载二维码图片'));
-                };
-                
-                // 设置图片源
-                img.src = imagePath;
-            });
-        }
-        
-        // 处理支付
-        async function processPayment() {
-            const overlay = document.getElementById('paymentOverlay');
-            const loadingState = document.getElementById('loadingState');
-            const errorState = document.getElementById('errorState');
-            
-            // 显示加载状态
-            overlay.style.display = 'flex';
-            loadingState.style.display = 'block';
-            errorState.style.display = 'none';
-            
-            try {
-                // 解析二维码
-                const qrData = await decodeQRCode(CONFIG.qrCodeImagePath);
-                console.log('二维码解析结果:', qrData);
-                
-                // 检查是否为微信支付链接
-                if (qrData.startsWith('wxp://')) {
-                    // 尝试跳转到微信支付
-                    setTimeout(() => {
-                        window.location.href = qrData;
-                        
-                        // 设置超时检查
-                        setTimeout(() => {
-                            // 如果3秒后页面还在，说明跳转失败
-                            loadingState.style.display = 'none';
-                            errorState.style.display = 'block';
-                        }, 3000);
-                    }, 1000);
-                } else if (qrData.includes('weixin://') || qrData.includes('https://wx.tenpay.com')) {
-                    // 其他微信相关链接
-                    window.location.href = qrData;
-                } else {
-                    // 不是微信支付链接
-                    throw new Error('非微信支付二维码');
-                }
-            } catch (error) {
-                console.error('处理支付时出错:', error);
-                // 显示错误状态
-                loadingState.style.display = 'none';
-                errorState.style.display = 'block';
-            }
+        function showPayment() {
+            document.getElementById('paymentModal').style.display = 'flex';
+            setTimeout(() => {
+                document.querySelector('.modal-content').style.animation = 'modalFadeIn 0.4s ease-out';
+            }, 10);
         }
         
-        // 重试支付
-        function retryPayment() {
-            processPayment();
-        }
-        
-        // 取消支付
-        function cancelPayment() {
-            const overlay = document.getElementById('paymentOverlay');
-            overlay.style.display = 'none';
-            
-            // 重置显示状态
-            document.getElementById('loadingState').style.display = 'block';
-            document.getElementById('errorState').style.display = 'none';
+        function closeModal() {
+            const modal = document.getElementById('paymentModal');
+            modal.style.display = 'none';
         }
         
-        function goBack() {
-            window.history.back();
-        }
+        // 点击模态框背景关闭
+        document.getElementById('paymentModal').addEventListener('click', function(e) {
+            if (e.target === this) {
+                closeModal();
+            }
+        });
         
-        // 初始化页面
+        // 初始化总金额
         updateTotalAmount();
+        
+        // 添加交互效果
+        document.querySelectorAll('.payment-item').forEach(item => {
+            item.addEventListener('mouseenter', function() {
+                this.querySelector('.emoji').style.transform = 'scale(1.1)';
+            });
+            item.addEventListener('mouseleave', function() {
+                this.querySelector('.emoji').style.transform = 'scale(1)';
+            });
+        });
     </script>
 </body>
 </html>