desty Shopee Collection Plugin

Only applicable for collecting similar data https://shopee.co.id/product/shop_id/item_id The address
目前為 2025-01-14 提交的版本，檢視最新版本。
安裝腳本 ?
換行
// ==UserScript==
// @name         desty Shopee Collection Plugin
// @namespace    http://tampermonkey.net/
// @version      1.0.2
// @license      MIT
// @description  Only applicable for collecting similar data https://shopee.co.id/product/shop_id/item_id The address
// @author       Gao yongshun
// @match        *://shopee.co.id/*
// @icon         https://deo.shopeemobile.com/shopee/shopee-pcmall-live-sg/assets/icon_favicon_1_32.0Wecxv.png
// @grant        none
// @require      http://code.jquery.com/jquery-3.6.0.min.js
// @require      https://cdnjs.cloudflare.com/ajax/libs/axios/0.21.1/axios.min.js
// @run-at       document-body
// ==/UserScript==

(function() {
    'use strict';

    // 代码1 - 创建弹窗的 HTML 结构
    const modalHTML = `
        <div id="customModal" style="display: none; position: fixed; z-index: 10000; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0, 0, 0, 0.4);">
            <div style="background-color: #fefefe; margin: 20px auto 0; padding: 20px; border: 1px solid #888; width: 300px; border-radius: 10px;">
                <div style=" display: flex; align-items: center; justify-content: space-between;">
                     <span class="msg" style="font-weight: bold;">Custom Content</span>
                     <span class="close" style="color: rgba(249, 78, 47); float: right; font-size: 28px; font-weight: bold; cursor: pointer;">&times;</span>
                </div>
                <div class="product-info">
                     <p class="title"></p>
                     <p class="price"></p>
                     <p class="item_id"></p>
                     <p class="currency"></p>
                     <div class="imgs"></div>
                </div>
            </div>
        </div>
    `;

    // 将弹窗 HTML 结构插入到页面中
    document.body.insertAdjacentHTML('beforeend', modalHTML);

    // 获取弹窗元素
    const modal = $('#customModal');
    const msgDom = $('#customModal .msg');
    const closeBtn = $('#customModal .close');
    const infoDom = $('#customModal .product-info')
    const titleDom = $('#customModal .title')
    const priceDom =  $('#customModal .price')
    const itemIdDom = $('#customModal .item_id')
    const currencyDom = $('#customModal .currency')
    const imgsDom = $('#customModal .imgs')

    // 显示弹窗
    function showModal(msg, form = null) {
        msgDom.text(msg)
        if(form) {
            titleDom.text("title: " + form.title)
            priceDom.text("price: " + form.price)
            itemIdDom.text("item_id: " + form.item_id)
            currencyDom.text("currency: " + form.currency)
            imgsDom.html("<p>images: </p>" + form.imgs.map(img => "<p>" + img + "</p>").join(""))
            infoDom.show()
        }else {
            infoDom.hide()
        }

        modal.show();
        // 设置定时器，3秒后自动关闭弹窗title
         //setTimeout(() => {
            //modal.hide();
        //}, 3000);
    }

    // 绑定关闭按钮的点击事件
    closeBtn.on('click', () => {
        modal.hide();
    });

    // 代码2 - 创建功能区域的 dom 元素
    // 后续增加功能按钮请在此处维护
    const buttons = [
        { id: 'colectButton', content: 'collect'}
    ];

    const floatingButtonsContainer = document.createElement('div');
    floatingButtonsContainer.id = 'floating-buttons-container';
    document.body.appendChild(floatingButtonsContainer);

    buttons.forEach(button => {
        const buttonElement = document.createElement('a');
        buttonElement.id = button.id;
        buttonElement.className = 'floating-button';
        buttonElement.innerHTML = button.content;
        floatingButtonsContainer.appendChild(buttonElement);
    });

    const customStyle = document.createElement('style');
    customStyle.innerHTML = `
        #floating-buttons-container {
            display: flex;
            flex-direction: column;
            position: fixed;
            top: 50%;
            right: 5px;
            transform: translateY(-50%);
            z-index: 9999;
        }

        .floating-button {
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: rgba(249, 78, 47);
            color: #ffffff;
            width: 50px;
            height: 50px;
            border-radius: 5px;
            font-weight: bold;
            font-size: 14px;
            margin-top: 10px;
            text-align: center;
        }
    `;
    document.head.appendChild(customStyle);

    // 代码3 - 功能按钮绑定事件
    const requestPath = '/api/v4/pdp/get_pc'
    const filePath = 'https://down-id.img.susercontent.com/file/'
    // 绑定采集事件
    $('#colectButton').on('click', function(e) {
        e.preventDefault()
        const origin = window.location.origin
        const pathArr = window.location.pathname.split('/')
        axios.get(requestPath,{
            baseURL: origin,
            params: {
                shop_id: pathArr[2],
                item_id: pathArr[3],
                tz_offset_minutes: 480,
                detail_level: 0,

            }
        }).then((res) => {
            if(res.data.error) {
                showModal('Collection failed')
                return
            }
            const data = res.data.data
            // 存储采集信息
            const form = {}
            form.title = data.item.title
            form.item_id = data.item.item_id
            form.price = data.item.price
            form.currency = data.item.currency
            form.imgs = data.product_images.images.map(img => filePath + img )
            showModal('Collection successful', form)
            console.log('Collected data',form)
            // 将数据上传到后台
            // ......
        })
    })
})();