152 lines
7.0 KiB
HTML
152 lines
7.0 KiB
HTML
{{define "pdd/list"}}
|
||
{{template "header" .}}
|
||
|
||
{{/* 三段式布局的第一段：顶部工具条。
|
||
和另外四个页面保持一致，见 docs/admin/05-ui-specification.md §2。 */}}
|
||
<div class="toolbar">
|
||
{{/* 文案写全「添加 PDD 商品」：这条工具条上还有「创建采集任务」，
|
||
两个都以「创建」开头的话，第一次用的人分不清哪个是加商品、哪个是发起采集。 */}}
|
||
<button type="button" data-modal-open="create-modal">添加 PDD 商品</button>
|
||
|
||
{{/* 「创建采集任务」和「删除」用的是**同一个表单**，靠按钮上的
|
||
formaction 决定提交到哪个地址。这样表格里的勾选框只需要挂一份，
|
||
不用为每个操作各复制一套（复制出来的两套迟早会不同步）。 */}}
|
||
<form id="pdd-form" method="post" action="/pdd/collect" hidden></form>
|
||
<input type="hidden" name="csrf_token" value="{{.CSRFToken}}" form="pdd-form">
|
||
{{/* 把当前筛选一起带过去，操作完还停在原来的筛选上 */}}
|
||
<input type="hidden" name="status" value="{{.StatusFilter}}" form="pdd-form">
|
||
<input type="hidden" name="q" value="{{.Keyword}}" form="pdd-form">
|
||
<input type="hidden" name="page" value="{{.CurrentPage}}" form="pdd-form">
|
||
|
||
{{/* 文案是「创建采集任务」不是「采集」：点完只是排了个队，
|
||
真正去手机上采要等客户端来领，可能几秒也可能几分钟 */}}
|
||
<button type="submit" form="pdd-form" formaction="/pdd/collect"
|
||
data-need-checked>创建采集任务</button>
|
||
|
||
<form class="inline grow" method="get" action="/pdd">
|
||
<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>
|
||
{{/* search-narrow 把这个框收到 30%，让「搜索」按钮能紧挨着它。
|
||
用类名而不是改 .toolbar input[type="text"]——那条规则被 5 个页面共用。 */}}
|
||
<input id="q" type="text" name="q" value="{{.Keyword}}"
|
||
class="search-narrow" placeholder="商品 ID 或链接的一部分">
|
||
<button type="submit">搜索</button>
|
||
</form>
|
||
|
||
<button type="submit" form="pdd-form" formaction="/pdd/delete" class="danger"
|
||
data-need-checked
|
||
data-confirm-delete="将删除 {n} 条记录。删除后重新创建同一链接可恢复，但采集结果会清空。"
|
||
>删除</button>
|
||
</div>
|
||
|
||
{{/* 第二段：表格。双击一行打开弹窗，见 static/js/app.js */}}
|
||
<div class="table-wrap" id="pddProductPage">
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th class="col-check"><input type="checkbox" data-check-all></th>
|
||
<th>商品 ID</th>
|
||
<th>标题</th>
|
||
<th>店铺</th>
|
||
<th>PDD 链接</th>
|
||
<th>采集状态</th>
|
||
{{/* 采到 1 个和采到 20 个差别很大：只采到 1 个通常是没点开规格面板，
|
||
说明这次采集有问题。这一列就是为了让它一眼能看出来 */}}
|
||
<th>规格数</th>
|
||
<th>采集时间</th>
|
||
<th>更新时间</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
{{range .Rows}}
|
||
<tr data-detail-id="{{.ID}}" {{if .IsFailed}}class="row-warn"{{end}}>
|
||
<td class="col-check">
|
||
{{/* 勾选框的值是 goods_id：删除和建采集任务都按它定位。
|
||
form 属性把它挂到工具条里那个表单上 */}}
|
||
<input type="checkbox" value="{{.GoodsID}}" name="ids" form="pdd-form"
|
||
aria-label="选择商品 {{.GoodsID}}">
|
||
</td>
|
||
<td>{{.GoodsID}}</td>
|
||
<td class="truncate" title="{{.Title}}">{{.Title}}</td>
|
||
<td class="truncate" title="{{.ShopName}}">{{.ShopName}}</td>
|
||
<td class="truncate">
|
||
<a href="{{.URL}}" target="_blank" rel="noopener noreferrer" title="{{.URL}}">{{.URL}}</a>
|
||
</td>
|
||
{{/* 状态是中文文字，不能只靠颜色区分 */}}
|
||
<td>{{.StatusText}}{{if .CollectMsg}}<br><small class="missing">{{.CollectMsg}}</small>{{end}}</td>
|
||
<td>{{.SkuCountText}}</td>
|
||
<td>{{.CollectedAt}}</td>
|
||
<td>{{.UpdatedAt}}</td>
|
||
</tr>
|
||
{{else}}
|
||
{{/* 空状态要分情况：从没建过 和 筛选没结果，下一步动作完全不同 */}}
|
||
<tr class="empty">
|
||
<td colspan="9">
|
||
{{if .IsFiltered}}
|
||
当前筛选条件下没有商品。<br>
|
||
<small>换个采集状态或清空搜索词再试。<a href="/pdd">查看全部</a></small>
|
||
{{else}}
|
||
还没有 PDD 商品。<br>
|
||
<small>点左上角「创建」，粘贴一个拼多多商品链接就行，其余信息采集后自动回填。</small>
|
||
{{end}}
|
||
</td>
|
||
</tr>
|
||
{{end}}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
<p class="hint">
|
||
双击任意一行可以查看和编辑这个商品，包括采回来的规格和价格。
|
||
</p>
|
||
|
||
{{/* ── 创建弹窗 ─────────────────────────────────
|
||
内容是固定的（只有一个输入框），所以直接写在页面里藏着，
|
||
不像编辑弹窗那样要去服务端取。 */}}
|
||
<div class="modal-backdrop" id="create-modal" hidden>
|
||
<div class="modal" role="dialog" aria-modal="true" aria-labelledby="create-modal-title">
|
||
<div class="modal-head">
|
||
<h2 id="create-modal-title">创建 PDD 商品</h2>
|
||
<button type="button" class="modal-x" data-modal-close aria-label="关闭">×</button>
|
||
</div>
|
||
<form method="post" action="/pdd/create">
|
||
<input type="hidden" name="csrf_token" value="{{.CSRFToken}}">
|
||
<input type="hidden" name="status" value="{{.StatusFilter}}">
|
||
<input type="hidden" name="q" value="{{.Keyword}}">
|
||
<input type="hidden" name="page" value="{{.CurrentPage}}">
|
||
<div class="modal-body">
|
||
<div class="field">
|
||
<label for="create-url">PDD 链接</label>
|
||
<input id="create-url" type="text" name="url" required autocomplete="off"
|
||
placeholder="https://mobile.yangkeduo.com/goods.html?goods_id=737116531267">
|
||
</div>
|
||
<p class="hint">
|
||
只需要链接，标题和规格由客户端采集后自动回填。<br>
|
||
链接里必须带 <code>goods_id=</code>，短链接不行——请在拼多多 App
|
||
的商品页点「分享」→「复制链接」。
|
||
</p>
|
||
</div>
|
||
<div class="modal-foot">
|
||
<button type="button" data-modal-close>取消</button>
|
||
<button type="submit" class="primary">保存</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
|
||
{{/* ── 编辑弹窗的壳子 ───────────────────────────
|
||
里面的内容双击行时由 /pdd/detail 返回，前端只负责放进来和显示。 */}}
|
||
<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}}
|