Files
Sansheng-Intelligence/public/assets/js/render-intelligence-platforms.js
T

85 lines
5.9 KiB
JavaScript
Raw Normal View History

import { state } from "./render-intelligence-state.js?v=20260814e";
import { create, normalized, matchesFilters, makeBadge, makeExternalLink, makePlatformActionGroup, appendTags, compactList } from "./render-intelligence-core.js?v=20260817a";
function makePlatformCard(item) {
const card = create("article", "platform-card");
const header = create("div", "platform-card-header");
const logoBox = create("div", "platform-logo-box");
const logo = create("img", "platform-logo");
logo.src = `./assets/platform-logos/${item.logo}.svg`;
logo.alt = `${item.name} 标志`;
logo.width = 112;
logo.height = 48;
logoBox.appendChild(logo);
const title = create("div", "platform-title");
title.append(create("span", "", `${item.region} · ${item.type}`), create("h3", "", item.name));
header.append(logoBox, title, makeBadge(`${item.access_level} ${item.access_label}`, `platform-access is-${String(item.access_level).toLowerCase()}`));
const markets = create("div", "platform-markets");
appendTags(markets, item.markets || []);
const fit = create("div", "platform-fit");
fit.append(create("strong", "", "适合谁"), create("p", "", compactList(item.fit_sellers || [])));
const category = create("div", "platform-category");
category.append(create("strong", "", "家纺经营重点"), create("p", "", item.textile_category || "打开平台类目核对。"));
const access = create("div", "platform-access-note");
access.append(create("strong", "", "入驻判断"), create("p", "", item.cross_border || "以平台当前规则为准。"));
const actions = create("div", "platform-actions");
if (item.homepage_url && item.homepage_url !== item.seller_url) actions.appendChild(makePlatformActionGroup("打开平台官网", item.homepage_url, item, "homepage"));
actions.appendChild(makePlatformActionGroup("去官方入驻", item.seller_url, item, "seller", "platform-action primary"));
if (item.language_url) actions.appendChild(makeExternalLink("官网学习中心(可选中文)", item.language_url, "platform-action language"));
const proof = create("p", "platform-proof", `${item.confidence} · ${item.link_status || "待人工复核"} · 核验 ${String(item.checked_at || "").slice(0, 10)}`);
card.append(header, markets, category, access, fit, actions, proof);
return card;
}
export function renderPlatforms(data, container) {
const all = (data.platforms || []).filter(matchesFilters);
const toolbar = create("section", "platform-filter-toolbar");
const makeField = (label, control, extraClass = "") => {
const field = create("label", `platform-filter-field ${extraClass}`.trim());
field.append(create("span", "", label), control);
return field;
};
const makeSelect = (placeholder, values, current) => {
const select = create("select", "platform-filter-control");
select.appendChild(Object.assign(create("option", "", placeholder), { value: "" }));
values.forEach((value) => select.appendChild(Object.assign(create("option", "", value), { value })));
select.value = current;
return select;
};
const markets = [...new Set(all.flatMap((item) => item.markets || []))].sort((a, b) => a.localeCompare(b, "zh-CN"));
const types = [...new Set(all.map((item) => item.type).filter(Boolean))].sort((a, b) => a.localeCompare(b, "zh-CN"));
const marketSelect = makeSelect("全部市场", markets, state.platformMarket);
const typeSelect = makeSelect("全部类型", types, state.platformType);
const accessSelect = makeSelect("全部开放等级", ["A", "B", "C"].filter((level) => all.some((item) => item.access_level === level)), state.platformAccess);
const search = create("input", "platform-filter-control");
search.type = "search";
search.name = "platform-channel-search";
search.autocomplete = "off";
search.placeholder = "搜索平台名称、国家或家纺类目…";
search.value = state.platformSearch;
toolbar.append(makeField("目标市场", marketSelect), makeField("渠道类型", typeSelect), makeField("开放等级", accessSelect), makeField("平台检索", search, "platform-filter-search"));
const header = create("section", "scene-summary platform-summary");
const grid = create("div", "platform-grid");
const apply = () => {
const keyword = normalized(state.platformSearch);
const selected = all.filter((item) => {
if (state.platformMarket && !(item.markets || []).includes(state.platformMarket)) return false;
if (state.platformType && item.type !== state.platformType) return false;
if (state.platformAccess && item.access_level !== state.platformAccess) return false;
if (!keyword) return true;
return normalized([item.name, item.region, item.type, item.textile_category, item.cross_border, ...(item.markets || []), ...(item.fit_sellers || [])].join(" ")).includes(keyword);
}).sort((a, b) => (Number(b.home_textile_sales_score || 0) + Number(b.emergence_score || 0)) - (Number(a.home_textile_sales_score || 0) + Number(a.emergence_score || 0)) || String(a.access_level).localeCompare(String(b.access_level)) || a.name.localeCompare(b.name, "zh-CN"));
header.innerHTML = "";
header.append(create("strong", "", `${selected.length}/${all.length} 个家纺销售渠道`), create("span", "", "准入条件以平台卖家中心为准"));
grid.innerHTML = "";
selected.forEach((item) => grid.appendChild(makePlatformCard(item)));
if (!selected.length) grid.appendChild(create("div", "intelligence-empty", "当前筛选条件下没有已核验平台,请调整市场或开放等级。"));
};
marketSelect.addEventListener("change", () => { state.platformMarket = marketSelect.value; apply(); });
typeSelect.addEventListener("change", () => { state.platformType = typeSelect.value; apply(); });
accessSelect.addEventListener("change", () => { state.platformAccess = accessSelect.value; apply(); });
search.addEventListener("input", () => { state.platformSearch = search.value; apply(); });
container.append(toolbar, header, grid);
apply();
}