22k4已购游戏搜索

已购买游戏详情页添加搜索功能
Wrap lines
// ==UserScript==
// @name         22k4已购游戏搜索
// @namespace    http://tampermonkey.net/
// @version      2024-10-07
// @description   已购买游戏详情页添加搜索功能
// @author       口吃者
// @match        https://22k4.com/member/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=22k4.com
// @grant        none
// @license MIT
// ==/UserScript==
/* 
    1. 多次快速点击分页按钮造成卡死
    2. 可以增加保存配置功能，在没有购买新游戏时，可以保存配置，下次直接加载
*/
class ProductCatalog {
    constructor() {
        this.pages = []; // 存储每页的商品列表
        this.productByName = new Map(); // 存储商品名称到商品对象的映射
    }
 
    // 添加商品到指定页
    addProductToPage(pageIndex, product) {
        if (!this.pages[pageIndex]) {
        this.pages[pageIndex] = [];
        }
 
        // 检查商品名称是否已存在
        const existingProduct = this.productByName.get(product.name.toLowerCase());
        if (existingProduct) {
        console.log(`Product with name "${product.name}" already exists.`);
        return; // 商品名称已存在，不添加
        }
 
        // 添加商品到对应页，并更新映射
        this.pages[pageIndex].push(product);
        this.productByName.set(product.name.toLowerCase(), product);
    }
 
    // 根据商品名称查询商品
    findProductByName(name) {
        const lowerCaseName = name.toLowerCase();
        return this.productByName.get(lowerCaseName);
    }
    // 模糊查询商品
    searchProductsByPartialName(query) {
        const results = [];
 
        // 遍历所有商品
        this.productByName.forEach((product, name) => {
        if (name.includes(query.toLowerCase())) {
            results.push(product);
        }
        });
 
        return results;
    }
 
    // 获取所有商品
    getAllProducts() {
        return this.productByName.values();
    }
 
    // 获取某一页的所有商品
    getProductsOnPage(pageIndex) {
        return this.pages[pageIndex] || [];
    }
}
const catalog = new ProductCatalog();
var requestsCompleted = false;
var pickUpGameHref = '#';
var searchGameHref = '#';
(function() {
    'use strict';
    addPanel();
    // Your code here...
})();
window.onload = function() {
    // 示例：检查请求是否全部完成
    let btnSwitch = document.querySelector('#btnSwitch');
    checkTimer = setTimeout(() => {
        btnSwitch.textContent = "正在获取游戏中..."
    }, 1000); // 这只是一个示例，实际应用中应该根据实际场景决定何时检查
 
    //获取总页数
    let pageCount = document.querySelector("#PageCount").value;
    let pageSize = document.querySelector("#PageSize").value;
    let totalPages = getTotalPages(pageCount, pageSize);
    console.log(totalPages);
    const urls = Array.from({ length: totalPages }, (_, i) =>
                            `https://22k4.com/member/product.php?page=${i + 1}`
                           );
 
    // 创建一个 Promise 数组
    const fetchPromises = urls.map(url =>
                                   fetch(url, {
        method: 'GET',
        credentials: 'include', // 使得请求会发送 Cookie
        headers: {
            'Content-Type': 'text/html;charset=utf-8',
        }
    }).then(response => {
        if (!response.ok) {
            throw new Error("HTTP error " + response.status);
        }
        return response.text(); // 读取为文本
    })
                                  );
 
    // 使用 Promise.all 来等待所有请求完成
    Promise.all(fetchPromises)
        .then(htmlTexts => {
        // 处理每个 HTML 文档
        htmlTexts.forEach((htmlText, index) => {
            // 创建一个范围较小的虚拟文档环境
            const parser = new DOMParser();
            const doc = parser.parseFromString(htmlText, "text/html");
            getAllItemDetails(doc, index + 1);
            requestsCompleted = true;
            clearTimeout(checkTimer);
            btnSwitch.textContent = "面板"
        });
    })
        .catch(error => {
        console.error('There was a problem with one of the fetch operations:', error);
    });
 
    //输入框
    document.getElementById('iptName').addEventListener('input', function(event) {
        let input = event.target.value;
        // 显示建议列表
        displaySuggestions(input, 1);
    })
    // 初始化分页图标
    updatePaginationIcons(1, 1); // 假设初始页码为1，总页数为1（待更新）
    var cssText = `
        #input_suggestion li {
            color: aliceblue;
            cursor: pointer;
        }
        #input_suggestion li:hover {
            color: cadetblue;
            background-color: #f0f0f0;
        }
        #pagination span { 
            display: inline-block; 
            width: 25px;
            height: 25px; 
            line-height: 25px; 
            text-align: center; 
            border: 1px solid #ccc; 
            cursor: pointer;
            background: azure;
            margin-inline-end: 5px;
            margin-inline-start: 5px;
        }
    `
    GMaddStyle(cssText);
 
}
function addPanel(){
    function genDiv(cls, id){
        let d = document.createElement('div');
        d.style.cssText = 'vertical-align:middle;';
        if(cls){ d.className = cls };
        if(id){ d.id = id };
        return d;
    }
    //创建一个可以自由弹出的面板
    function genPanel(name, visiable){
        let panel = genDiv(name, name);
        panel.style.cssText = 'background: rgba(58, 58, 58, 0.8);position: fixed;top: 50%;right: 0px;';
        panel.style.cssText += 'text-align: center;transform: translate(0px, -50%);z-index: 100;';
        panel.style.cssText += 'border: 1px solid rgb(83, 83, 83);padding: 5px;border-radius: 10px 0 0 10px;';
        panel.style.cssText += 'transition:right 0.8s;right:-300px;'
        return panel;
    }
    function genButton(test, foo, id, fooParams = {}){
        let b = document.createElement('button');
        b.textContent = test;
        b.style.verticalAlign = 'inherit';
        // 使用箭头函数创建闭包来保存 fooParams 并传递给 foo
        b.addEventListener('click', () => {
            foo.call(b, ...Object.values(fooParams)); // 使用 call 方法确保 this 指向按钮对象
        });
        if(id){ b.id = id };
        return b;
    }
    function genInput(id, value, tips, number) {
        let i = document.createElement('input');
        i.id = id;
        i.style.cssText = 'border:none;border-radius:0;margin:0px 5px;width:60%;text-align:center;';
        i.style.cssText += 'color:#000;background:#fff;vertical-align:inherit;';
        if (value) { i.value = value; }
        if (tips) { i.placeholder = tips; }
        if (number) {
            i.type = 'number';
            i.step = 0.01;
            i.min = 0;
        }
        return i;
    }
    function genUl(items, id) {
        // 创建一个新的<ul>元素
        let ul = document.createElement('ul');
        
        // 如果提供了类名，添加到<ul>元素上
        if (id) {
            ul.id = id;
        }
        
        // // 遍历items数组，为每个项目创建一个<li>元素并添加到<ul>中
        // items.forEach(function(item) {
        //     let li = document.createElement('li');
            
        //     // 这里简单地将item的值设置为<li>的文本内容
        //     // 根据实际需求，这里可以进一步定制化，比如添加事件监听器等
        //     li.textContent = item;
            
        //     // 将<li>添加到<ul>中
        //     ul.appendChild(li);
        // });
        
        return ul;
    }
    function genSpan(id, textContentSpan) {
        let s = document.createElement('span');
        s.id = id;
        s.textContent = textContentSpan;
        return s;
    }
    //展开指定面板
    function showPanel(panelId){
        let panel = document.getElementById(panelId);
        if (panel.style.right == '-300px') {
            panel.style.right = '0';
        } else {
            panel.style.right = '-300px';
        }
    }
    let btnSwitch = genButton('面板', showPanel, 'btnSwitch', {param1: 'autoSell'});
    let panelFunc = genPanel('autoSell', false);    //初始隐藏
    //加入位置
    let lBtnArea = document.querySelector('body > div.page > div.container.m_top_30 > div');
    lBtnArea.insertBefore(btnSwitch, lBtnArea.children[0]);
    lBtnArea.insertBefore(panelFunc, lBtnArea.children[0]);
    //自动出售(加入到面板中) 搜索
    let divName = genDiv();
    let divPagination = genDiv(null, 'pagination');
    let button01 = genButton('搜索', searchGame, 'searchGame');
    let button02 = genButton('提货', pickUpGame, 'pickUpGame');
    let iptName = genInput('iptName', '', ' 游戏名称', false);
    let inputSuggestion = genUl(['无'], 'input_suggestion');
    let prePageSpan = genSpan('prePageSpan', '<');
    let nextPageSpan = genSpan('nextPageSpan', '>');
 
    divName.appendChild(button01);
    divName.appendChild(button02);
    divName.appendChild(iptName);
    divName.appendChild(inputSuggestion);
 
    divPagination.append(prePageSpan);
    divPagination.append(nextPageSpan);
 
    panelFunc.appendChild(divName);
    panelFunc.appendChild(divPagination);
    //todo 可优化成bilibili增强的样式表写法
    let h5Element = document.querySelector("body > div.page > div.container.m_top_30 > div > h5");
    btnSwitch.style.cssText += 'display: inline-block; margin-right: 10px;'
    btnSwitch.style.cssText += 'font-weight: bold;font-size: 16px;'
    h5Element.style.cssText += 'display: inline-block; margin-right: 10px;'
}
function searchGame(){
    // 使用 window.open 方法打开链接
    var url = this.getAttribute('data-url');// 链接动态变化，添加格外属性，每次点击重新获取
    window.open(url, '_blank'); // '_blank' 表示在一个新的浏览器标签页中打开
}
function pickUpGame(event){
    // 使用 window.open 方法打开链接
    var url = this.getAttribute('data-url');// 链接动态变化，添加格外属性，每次点击重新获取
    window.open(url, '_blank'); // '_blank' 表示在一个新的浏览器标签页中打开
}
function getTotalPages(input, eachPage) {
    // 将字符串转换为整数，如果是数字类型则直接使用
    let num = typeof input === 'string' ? parseInt(input, 10) : input;
    let eachPage01 = typeof eachPage === 'string' ? parseInt(eachPage, 10) : eachPage;
 
    // 检查转换后的值是否为 NaN 或者小于等于 0
    if (isNaN(num) || num <= 0 || isNaN(eachPage01) || eachPage01 <= 0) {
      throw new Error('getTotalPages error:Invalid input: input must be a positive integer.');
    }
 
    // 计算总页数
    // Math.ceil() 用于向上取整
    const totalPages = Math.ceil(num / eachPage01);
 
    return totalPages;
}
function getAllItemDetails(pageDocument, page){
    let itemList = pageDocument.querySelectorAll('tbody > tr');
    itemList.forEach(item => {
        let itemId = item.id;
        let itemImg = item.querySelector('img').src;
        let itemName = item.querySelector('a').textContent;
        let itemPrice = item.querySelector('span').textContent;
        let itemOrderNo = item.querySelector('td:nth-child(3) > p:nth-child(1)').textContent;
        let itemOrderTime = item.querySelector('td:nth-child(3) > p:nth-child(2)').textContent;
        let itemPickup = item.querySelector('td:nth-child(4) > p > a').href;
        let itemSearch = item.querySelector('td:nth-child(2) > p:nth-child(1) > b > a').href;
        // 创建一个新的 product 对象
        const product = {
            id: itemId, // 假设这是一个生成唯一 ID 的方法
            name: itemName,
            imageUrl: itemImg,
            price: itemPrice,
            orderNo: itemOrderNo,
            orderTime: itemOrderTime,
            pickUp: itemPickup,
            searchGame: itemSearch
        };
        catalog.addProductToPage(page - 1, product);
    })
}
function displaySuggestions(input, page) {
    const suggestions = catalog.searchProductsByPartialName(input).map(product => product.name);
 
    let suggestionsList = document.getElementById('input_suggestion');
    suggestionsList.innerHTML = ''; // 清空现有建议
 
    // 根据输入过滤建议
    let filteredSuggestions = suggestions;
 
    const itemsPerPage = 7; // 每页显示的建议数
    var totalPages = Math.ceil(filteredSuggestions.length / itemsPerPage);
    const start = (page - 1) * itemsPerPage;
    const end = Math.min(start + itemsPerPage, filteredSuggestions.length);
 
    // 显示过滤后的建议
    if (filteredSuggestions.length > 0 && filteredSuggestions.length >= start) {
        suggestionsList.style.display = 'block';
        // 获取输入框元素
        const iptName = document.getElementById('iptName');
        
        // 显示当前页的建议
        for (let i = start; i < end; i++) {
            let item = document.createElement('li');
            item.textContent = filteredSuggestions[i];
 
            if(item._clickHandler){
                item.removeEventListener('click', handler);
                delete item._clickHandler; // 清理保存的引用
            }
            // 创建一个通用的事件处理函数，并保存其引用
            const handler = () => handleSuggestionClick(item);
            item._clickHandler = handler; // 保存函数引用
            item.addEventListener('click', handler);
            suggestionsList.appendChild(item);
        }
    } else {
        suggestionsList.style.display = 'none'; // 如果没有建议则隐藏列表
    }
 
    // 更新分页图标的状态
    updatePaginationIcons(page, totalPages);
}
 
function updatePaginationIcons(currentPage, totalPages) {
    const prevPageIcon = document.getElementById('prePageSpan');
    const nextPageIcon = document.getElementById('nextPageSpan');
 
    if(currentPage === -1 && totalPages === -1){
        prevPageIcon.style.display = 'none';
        nextPageIcon.style.display = 'none';
        return;
    }
 
    prevPageIcon.style.display = currentPage === 1 ? 'none' : 'inline-block';
    nextPageIcon.style.display = currentPage === totalPages ? 'none' : 'inline-block';
    if(prevPageIcon._clickHandler){
        prevPageIcon.removeEventListener('click', prevPageIcon._clickHandler);
        delete prevPageIcon._clickHandler;
    }
    if(nextPageIcon._clickHandler){
        nextPageIcon.removeEventListener('click', nextPageIcon._clickHandler);
        delete nextPageIcon._clickHandler;
    }
    const preHandler = () => displaySuggestions(document.getElementById('iptName').value, currentPage - 1);
    const nextHandler = () => displaySuggestions(document.getElementById('iptName').value, currentPage + 1);
    prevPageIcon._clickHandler = preHandler;
    nextPageIcon._clickHandler = nextHandler;
    prevPageIcon.addEventListener('click', preHandler);
    nextPageIcon.addEventListener('click', nextHandler);
}
function GMaddStyle(css){
    var myStyle = document.createElement('style');
    myStyle.textContent = css;
    var doc = document.head || document.documentElement;
    doc.appendChild(myStyle);
}
function handleSuggestionClick(suggestion) {
    const iptName = document.getElementById('iptName');
    iptName.value = suggestion.textContent;
 
    pickUpGameHref = catalog.findProductByName(suggestion.textContent).pickUp;
    searchGameHref = catalog.findProductByName(suggestion.textContent).searchGame;
 
    document.querySelector('#pickUpGame').setAttribute('data-url', pickUpGameHref);
    document.querySelector('#searchGame').setAttribute('data-url', searchGameHref);
 
    // 防止点击建议后再点击分页卡死
    const prevPageIcon = document.getElementById('prePageSpan');
    const nextPageIcon = document.getElementById('nextPageSpan');
    prevPageIcon.style.display = 'none';
    nextPageIcon.style.display = 'none';
 
    const suggestionsList = document.getElementById('input_suggestion');
    suggestionsList.style.display = 'none'; // 关闭建议列表
}
欢迎访问Greasy Fork镜像
