104 lines
8.7 KiB
HTML
104 lines
8.7 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>{{.metaTitle}}</title>
|
||
{{template "seoCommon" .}}
|
||
<link rel="stylesheet" href="/static/css/base.css">
|
||
<link rel="stylesheet" href="/static/css/recharge.css?v=3">
|
||
<link rel="stylesheet" href="/static/css/recharge-mobile.css?v=2">
|
||
</head>
|
||
<body class="recharge-page">
|
||
{{template "header" .}}
|
||
{{template "subpageHeader" .}}
|
||
<main class="recharge-main" data-recharge>
|
||
<nav class="recharge-breadcrumb" aria-label="面包屑"><a href="/profile">个人中心</a><span aria-hidden="true">›</span><span>金币充值</span></nav>
|
||
<div class="recharge-intro">
|
||
<span class="recharge-intro__eyebrow">钱包</span>
|
||
<h1>金币充值</h1>
|
||
<p>金币按集解锁付费剧集，解锁后永久有效</p>
|
||
</div>
|
||
|
||
<section class="recharge-balance" aria-label="金币余额">
|
||
<div class="recharge-balance__main">
|
||
<img decoding="async" loading="lazy" class="recharge-balance__coin" src="/static/images/placeholder.png?v=2" data-src="/static/images/recharge/coin3d.png" alt="金币余额" aria-hidden="true">
|
||
<div class="recharge-balance__copy">
|
||
<span class="recharge-balance__label">当前余额</span>
|
||
<strong><span data-recharge-balance>{{if .balanceText}}{{.balanceText}}{{else if .balance}}{{.balance}}{{else}}0{{end}}</span> <small>金币</small></strong>
|
||
<p><span class="recharge-balance__note-full">按剧集原定价按集解锁 解锁后永久有效</span><span class="recharge-balance__note-short">按集解锁，解锁后永久有效</span></p>
|
||
</div>
|
||
</div>
|
||
<div class="recharge-balance__guide">
|
||
<h2>金币怎么用</h2>
|
||
<div class="recharge-balance__tip"><img decoding="async" loading="lazy" src="/static/images/placeholder.png?v=2" data-src="/static/images/recharge/lock.svg" alt="按集解锁"><div><strong>解锁单集内容</strong><span>按剧集标定价消耗金币</span></div></div>
|
||
<div class="recharge-balance__tip"><img decoding="async" loading="lazy" src="/static/images/placeholder.png?v=2" data-src="/static/images/recharge/zap.svg" alt="快速到账"><div><strong>奖励金币优先使用</strong><span>解锁剧集先自动优先扣除任务获得的奖励金币</span></div></div>
|
||
<div class="recharge-balance__tip"><img decoding="async" loading="lazy" src="/static/images/placeholder.png?v=2" data-src="/static/images/recharge/award.svg" alt="永久有效"><div><strong>已解锁剧集不再扣费</strong><span>已解锁的剧集可随时回看，不会重复消耗金币</span></div></div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="recharge-packages" aria-labelledby="recharge-packages-title">
|
||
<div class="recharge-section-heading"><h2 id="recharge-packages-title">选择套餐</h2><span>按集解锁，自由使用</span></div>
|
||
<div class="recharge-packages__grid" role="radiogroup" aria-label="充值套餐">
|
||
{{range .packages}}
|
||
<button class="recharge-package{{if .Active}} is-selected{{end}}" type="button" role="radio" aria-checked="{{if .Active}}true{{else}}false{{end}}" data-recharge-package data-package-id="{{.ID}}" data-coins="{{.TotalCoinText}}" data-price="{{.PriceText}}" data-pay-methods="{{.PayMethodsJSON}}">
|
||
<span class="recharge-package__title"><img decoding="async" loading="lazy" src="/static/images/placeholder.png?v=2" data-src="/static/images/coin.png" alt="金币">{{if .TotalCoinText}}{{.TotalCoinText}} 金币{{else}}{{.Name}}{{end}}</span>
|
||
{{if .Hint}}<span class="recharge-package__hint">{{.Hint}}</span>{{end}}
|
||
<strong class="recharge-package__price">¥{{.PriceText}}</strong>
|
||
<img decoding="async" loading="lazy" class="recharge-package__selected" src="/static/images/placeholder.png?v=2" data-src="/static/images/recharge/check-circle.svg" alt="已选择">
|
||
</button>
|
||
{{end}}
|
||
</div>
|
||
{{if not .packages}}<p class="recharge-data-empty">{{if .packageUnavailable}}套餐加载失败，请稍后重试{{else}}暂无可购买的金币套餐{{end}}</p>{{end}}
|
||
<div class="recharge-packages__note"><p>支付方式和到账金币以套餐接口信息为准</p></div>
|
||
</section>
|
||
|
||
<section class="recharge-payment" aria-labelledby="recharge-payment-title">
|
||
<h2 id="recharge-payment-title">支付方式</h2>
|
||
<div class="recharge-payment__grid" role="radiogroup" aria-label="支付方式" data-recharge-methods>
|
||
{{range .paymentMethods}}
|
||
<button class="recharge-method{{if .Active}} is-selected{{end}}" type="button" role="radio" aria-checked="{{if .Active}}true{{else}}false{{end}}" data-recharge-method="{{.Type}}"><span class="recharge-method__radio"><img decoding="async" loading="lazy" src="/static/images/placeholder.png?v=2" data-src="/static/images/recharge/check.svg" alt="安全支付"></span><span><strong>{{.TypeName}}</strong><small>支付成功后到账</small></span></button>
|
||
{{end}}
|
||
</div>
|
||
<p class="recharge-data-empty" data-recharge-method-empty{{if .paymentMethods}} hidden{{end}}>当前套餐暂无可用支付方式</p>
|
||
<div class="recharge-payment__checkout"><button type="button" data-recharge-pay>立即支付 ¥<span data-recharge-price>—</span></button><p>已选 <span data-recharge-coins>—</span> 金币 支付即表示同意《充值协议》</p></div>
|
||
<p class="recharge-payment__status" data-recharge-status role="status" hidden></p>
|
||
</section>
|
||
|
||
<section class="recharge-history" id="recharge-history" aria-labelledby="recharge-history-title">
|
||
<div class="recharge-history__head"><h2 id="recharge-history-title">交易明细</h2>
|
||
<div class="recharge-history__filters" role="group" aria-label="交易明细筛选">
|
||
<button class="is-active" type="button" data-recharge-filter="0" aria-pressed="true">全部</button>
|
||
<button type="button" data-recharge-filter="1" aria-pressed="false">充值</button>
|
||
<button type="button" data-recharge-filter="2" aria-pressed="false">消费</button>
|
||
<button type="button" data-recharge-filter="3" aria-pressed="false">奖励</button>
|
||
</div>
|
||
<button class="recharge-history__export" type="button" data-recharge-export>导出 <img decoding="async" loading="lazy" src="/static/images/placeholder.png?v=2" data-src="/static/images/recharge/download.svg" alt="下载 App"></button>
|
||
<button class="recharge-history__more" type="button" data-recharge-more>全部 <img decoding="async" loading="lazy" src="/static/images/placeholder.png?v=2" data-src="/static/images/chevron-right.svg" alt="前往下一项"></button>
|
||
</div>
|
||
<div class="recharge-history__table">
|
||
<div class="recharge-history__columns" aria-hidden="true"><span>类型</span><span>说明</span><span>时间</span><span>金币变动</span></div>
|
||
<div class="recharge-history__rows" data-recharge-rows>
|
||
{{range $index, $tx := .transactions}}
|
||
<div class="recharge-history__row" data-recharge-row data-category="{{$tx.Category}}">
|
||
<span class="recharge-history__kind">{{$tx.Kind}}</span>
|
||
<span class="recharge-history__detail-line"><span class="recharge-history__description">{{$tx.Description}}</span><time class="recharge-history__time"><span class="only-desktop">{{$tx.TimeText}}</span><span class="only-mobile">{{$tx.MobileTime}}</span></time></span>
|
||
<strong class="recharge-history__amount{{if $tx.Credit}} is-credit{{end}}">{{$tx.AmountText}}</strong>
|
||
</div>
|
||
{{end}}
|
||
</div>
|
||
<p class="recharge-history__empty" data-recharge-history-empty{{if .transactions}} hidden{{end}}>{{if .transactionsUnavailable}}交易明细加载失败{{else}}暂无记录{{end}}</p>
|
||
</div>
|
||
<nav class="recharge-pagination" aria-label="交易明细分页" data-recharge-pagination data-page="{{.transactionPage.PageNum}}" data-page-size="{{.transactionPage.PageSize}}" data-total="{{.transactionPage.TotalCount}}">
|
||
<button type="button" data-recharge-prev aria-label="上一页" disabled><img decoding="async" loading="lazy" src="/static/images/placeholder.png?v=2" data-src="/static/images/chevron-right.svg" alt="前往下一项"></button>
|
||
<span data-recharge-pages></span>
|
||
<button type="button" data-recharge-next aria-label="下一页"><img decoding="async" loading="lazy" src="/static/images/placeholder.png?v=2" data-src="/static/images/chevron-right.svg" alt="前往下一项"></button>
|
||
<span class="recharge-pagination__total" data-recharge-total>共 {{.transactionPage.TotalCount}} 条</span>
|
||
</nav>
|
||
</section>
|
||
</main>
|
||
{{template "footer" .}}
|
||
<script src="/static/js/recharge.js?v=8" defer></script>
|
||
</body>
|
||
</html>
|