135 lines
5.2 KiB
HTML
135 lines
5.2 KiB
HTML
{{define "shopee/list"}}
|
|
{{template "header" .}}
|
|
|
|
{{/* ── 第一段：顶部工具条 ────────────────────────────── */}}
|
|
<div class="toolbar">
|
|
<form class="inline" method="post" action="/shopee/import" enctype="multipart/form-data">
|
|
<input type="hidden" name="csrf_token" value="{{.CSRFToken}}">
|
|
<input type="file" name="file" accept=".xlsx" required>
|
|
<button type="submit">导入 Excel</button>
|
|
</form>
|
|
|
|
<form class="inline grow" method="get" action="/shopee">
|
|
{{/* 状态筛选是刚需（找待补规格 / 找没填链接的），不是锦上添花，
|
|
见 docs/admin/05-ui-specification.md §4.1、工单 #43。
|
|
放在关键词前面：操作员大多是"看某一类"而不是"查某个 ID"。 */}}
|
|
<label for="status">状态</label>
|
|
<select id="status" name="status">
|
|
{{range .StatusOptions}}
|
|
<option value="{{.Value}}" {{if eq .Value $.StatusFilter}}selected{{end}}>{{.Text}}</option>
|
|
{{end}}
|
|
</select>
|
|
<label for="q">商品 ID</label>
|
|
<input id="q" type="text" name="goods_id" value="{{.Keyword}}" placeholder="商品 ID">
|
|
<button type="submit">搜索</button>
|
|
</form>
|
|
|
|
<form class="inline" method="post" action="/shopee/delete"
|
|
data-confirm-delete>
|
|
<input type="hidden" name="csrf_token" value="{{.CSRFToken}}">
|
|
<button type="submit" class="danger" data-need-checked>删除</button>
|
|
</form>
|
|
</div>
|
|
|
|
{{/* ── 第二段：带勾选的表格 ──────────────────────────── */}}
|
|
{{/* 一个商品一行（不是一个 SKU 一行），见工单 #41。
|
|
双击行打开详情弹窗，见 static/js/app.js。 */}}
|
|
<div class="table-wrap">
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th class="col-check"><input type="checkbox" data-check-all></th>
|
|
<th>商品 ID</th>
|
|
<th>商品名称</th>
|
|
<th>颜色</th>
|
|
<th>尺码</th>
|
|
{{/* SKU 数是这个商品报表里实际出现过的规格条数。
|
|
`[必须]` 必须单独显示——颜色数 × 尺码数经常大于它（蝦皮报表只含
|
|
有销售成绩的 SKU），只看前两列会让人误以为要匹配的规格更多，见 #41。 */}}
|
|
<th>SKU</th>
|
|
{{/* `[必须]` 待补 > 0 说明该商品有 SKU 解析失败，整行标黄（.row-warn）。
|
|
聚合成商品级之后，"部分失败"的行光看数字是正常的，
|
|
不加这一列坏数据就会被悄悄吃掉，见 #41。 */}}
|
|
<th>待补</th>
|
|
<th>PDD 链接</th>
|
|
<th>采集状态</th>
|
|
<th>更新时间</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{{range .Rows}}
|
|
<tr data-detail-id="{{.GoodsID}}"{{if gt .PendingCount 0}} class="row-warn"{{end}}>
|
|
<td class="col-check"><input type="checkbox" name="ids" value="{{.GoodsID}}"></td>
|
|
<td>{{.GoodsID}}</td>
|
|
{{/* 商品名称列收窄，用独立的 .col-title 类设 max-width（具体数值见 app.css），
|
|
不用 flex——表格单元格和工具条的 .search-narrow 那套不一样，见 #41。
|
|
title 属性让悬停能看完整标题，收窄之后必须留着。 */}}
|
|
<td class="truncate col-title" title="{{.Title}}">{{.Title}}</td>
|
|
<td>{{.ColorCount}}</td>
|
|
<td>{{.SizeCount}}</td>
|
|
<td>{{.SKUCount}}</td>
|
|
<td>{{.PendingCount}}</td>
|
|
<td{{if .PddMissing}} class="missing"{{end}}>{{.PddURL}}</td>
|
|
<td>{{.StatusText}}</td>
|
|
<td>{{.UpdatedAt}}</td>
|
|
</tr>
|
|
{{else}}
|
|
<tr class="empty">
|
|
<td colspan="10">
|
|
{{if .IsFiltered}}
|
|
没有匹配的数据，换个商品 ID 或商品名称试试。
|
|
{{else}}
|
|
还没有数据，点左上角「导入 Excel」开始。<br>
|
|
<small>样本文件不在仓库里，需向项目负责人索取，放到 raw_data/ 下。</small>
|
|
{{end}}
|
|
</td>
|
|
</tr>
|
|
{{end}}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<p class="hint">
|
|
双击任意一行可以查看这个商品的完整规格表。
|
|
</p>
|
|
|
|
{{/* ── 导入失败行：全部列出来，不折叠、不只显示条数 ──── */}}
|
|
{{if .Failures}}
|
|
<div class="table-wrap">
|
|
<p>本次导入有 {{len .Failures}} 行解析失败，规格原文已按原样保存，需人工补颜色/尺码/建议：</p>
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>行号</th>
|
|
<th>规格原文</th>
|
|
<th>原因</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{{range .Failures}}
|
|
<tr>
|
|
<td>{{.Row}}</td>
|
|
<td>{{.Raw}}</td>
|
|
<td>{{.Reason}}</td>
|
|
</tr>
|
|
{{end}}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
{{end}}
|
|
|
|
{{/* ── 详情弹窗的壳子 ───────────────────────────
|
|
里面的内容双击行时由 /shopee/detail 返回，前端只负责放进来和显示，
|
|
复用 #18 的机制（data-detail-url / data-detail-slot / data-detail-id），
|
|
app.js 不需要改，见工单 #41。
|
|
|
|
弹窗同时提供当前 PDD 关联和单商品采集入口。 */}}
|
|
<div class="modal-backdrop" id="detail-modal" data-detail-url="{{.DetailURL}}" hidden>
|
|
<div class="modal" role="dialog" aria-modal="true" data-detail-slot>
|
|
<div class="modal-body">正在加载…</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{template "footer" .}}
|
|
{{end}}
|