web_huangguo_web/app/templates/page/deposit.html

<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    {{template "seoCommon" .}}
    <title>{{if .title}}{{.title}} - 黄果短剧{{else}}金币充值 - 黄果短剧{{end}}</title>
    <meta name="description" content="黄果短剧金币充值，购买金币并查看金币交易明细 - 黄果短剧" />
    <meta name="keywords" content="金币充值,短剧金币,黄果短剧" />
    <link rel="stylesheet" href="/static/css/deposit.css?v=9" />
    <link rel="stylesheet" href="/static/css/accountShared.css?v=11" />
  </head>
  <body class="site-shell deposit-layout is-deposit-page">
    {{template "header" .}}
    <main class="deposit-page">
      <div class="deposit-pc">
        <nav class="deposit-breadcrumb" aria-label="面包屑">
          <a class="deposit-breadcrumb-link" href="/user-center/">个人中心</a>
          <span class="deposit-breadcrumb-sep">/</span>
          <span class="deposit-breadcrumb-current">金币充值</span>
        </nav>

        <div class="deposit-head">
          <div class="deposit-eyebrow">WALLET</div>
          <h1 class="deposit-title">金币充值</h1>
          <div class="deposit-subtitle">当前余额 <span data-deposit-recharge>{{if .rechargeText}}{{.rechargeText}}{{else}}0{{end}}</span> 金币</div>
        </div>

        <section class="deposit-hero">
          <div class="deposit-hero-badge">钱包充值</div>
          <h2 class="deposit-hero-title">选支付 · 立即到账</h2>
          <div class="deposit-hero-desc">支持多种支付方式，支付成功后即时到账。</div>
        </section>

        <h2 class="deposit-section-title deposit-purchase-title" id="depositPurchaseTitle">购买套餐</h2>
        <section class="deposit-package-panel" aria-labelledby="depositPurchaseTitle">
          <div class="deposit-package-heading"><strong>金币充值</strong><span>按集解锁，自由使用</span></div>
          <div class="deposit-package-grid" data-deposit-coin-pc>
            {{range .coinList}}
            <button class="deposit-package{{if .Active}} deposit-package--active{{end}}" type="button"
              data-package-id="{{.ID}}" data-price="{{.PriceText}}" data-package-kind="coin" data-package-name="{{.Name}}"
              data-pay-methods="{{.PayMethodsJSON}}">
              <span class="deposit-package-price">¥{{.PriceText}}</span>
              <span class="deposit-package-name">{{.Name}}</span>
              {{if .Hint}}<span class="deposit-package-hint">{{.Hint}}</span>{{end}}
              <span class="deposit-package-check" aria-hidden="true">✓</span>
            </button>
            {{else}}<div class="deposit-package-empty">暂无金币套餐</div>{{end}}
          </div>
        </section>

        <button class="deposit-pc-submit" type="button" data-deposit-submit{{if not .payMethods}} disabled{{end}}>
          {{if .payMethods}}立即支付{{else}}暂无支付方式{{end}}
        </button>
        <p class="deposit-selected-note" data-deposit-selected-note>请选择金币套餐</p>

        <section class="deposit-transactions">
          <h2 class="deposit-section-title">交易明细</h2>
          <div class="deposit-tx-list" data-deposit-tx-list>
            {{range .txList}}
            <div class="deposit-tx-item">
              <div class="deposit-tx-info">
                <div class="deposit-tx-name">{{if .Title}}{{.Title}}{{else if .TranTypeName}}{{.TranTypeName}}{{else if .Remark}}{{.Remark}}{{else}}金币变动{{end}}</div>
                {{if .CreatedAt}}<div class="deposit-tx-time">{{formatShortDateTime .CreatedAt}}</div>{{end}}
              </div>
              <div class="deposit-tx-amount {{if eq .FlowDir 1}}deposit-tx-amount--plus{{else}}deposit-tx-amount--minus{{end}}">
                {{if eq .ChangeAmount 0}}{{if eq .FlowDir 1}}+{{else}}-{{end}}{{absInt64 .Amount}}{{else}}{{if eq .FlowDir 1}}+{{else}}-{{end}}{{absInt64 .ChangeAmount}}{{end}}
              </div>
            </div>
            {{else}}<div class="deposit-package-empty">暂无交易记录</div>{{end}}
          </div>
        </section>
      </div>

      <div class="deposit-main">
        <nav class="account-mobile-breadcrumb" aria-label="面包屑">
          <a href="/user-center/">个人中心</a><span>/</span><strong>金币充值</strong>
        </nav>

        <section class="deposit-mobile-balance" aria-label="金币余额">
          <div class="deposit-mobile-balance-label">金币余额 <small>(金币)</small></div>
          <div class="deposit-mobile-balance-value" data-deposit-recharge>{{if .rechargeText}}{{.rechargeText}}{{else}}000.00{{end}}</div>
        </section>

        <section class="deposit-mobile-packages" aria-label="选择充值金额">
          <div class="deposit-mobile-package-head"><strong>请选择充值金额</strong><span>首次充值赠送10%</span></div>
          <div class="deposit-mobile-package-grid" data-deposit-coin-mobile>
            {{range .coinList}}
            <button class="deposit-mobile-pkg{{if .Active}} deposit-mobile-pkg--active{{end}}" type="button"
              data-package-id="{{.ID}}" data-price="{{.PriceText}}" data-package-kind="coin" data-package-name="{{.Name}}"
              data-pay-methods="{{.PayMethodsJSON}}">
              <img src="/static/images/figma-account/package-coin.svg" alt="" />
              <span class="deposit-mobile-pkg-name">{{.Name}}</span>
              <span class="deposit-mobile-pkg-hint">{{if .Hint}}{{.Hint}}{{else}}赠送 999金币{{end}}</span>
              <span class="deposit-mobile-pkg-price"><small>¥</small>{{.PriceText}}</span>
              <span class="deposit-mobile-pkg-check" aria-hidden="true">✓</span>
            </button>
            {{else}}<div class="deposit-package-empty">暂无金币套餐</div>{{end}}
          </div>
        </section>

        <section class="deposit-usage">
          <h2>金币怎么用?</h2>
          <div class="deposit-usage-card">
            <div class="deposit-usage-item"><img src="/static/images/figma-account/usage-unlock.svg" alt="" /><span><strong>解锁单集内容</strong><small>按剧集实际定价消耗金币</small></span></div>
            <div class="deposit-usage-item"><img src="/static/images/figma-account/usage-reward.svg" alt="" /><span><strong>奖励金币优先使用</strong><small>解锁时系统自动优先扣除任务/签到获得的奖励金币</small></span></div>
            <div class="deposit-usage-item"><img src="/static/images/figma-account/usage-member.svg" alt="" /><span><strong>金币畅看范围内不消耗金币</strong><small>会员权益仍优先于金币,避免重复付费</small></span></div>
          </div>
        </section>
      </div>

      <div class="deposit-mobile-buy">
        <button type="button" data-deposit-submit{{if not .payMethods}} disabled{{end}}>{{if .payMethods}}支付 ¥0 充值金币{{else}}暂无支付方式{{end}}</button>
        <p>如遇充值问题请咨询 <a href="/feedback/">在线客服</a></p>
      </div>

      <div class="deposit-payment-data" aria-hidden="true">
        <div data-deposit-pay-pc>{{range .payMethods}}<button class="deposit-pay-btn{{if .Active}} deposit-pay-btn--active{{end}}" type="button" data-pay-type="{{.Type}}">{{.TypeName}}</button>{{end}}</div>
        <div data-deposit-pay-mobile>{{range .payMethods}}<button class="deposit-mobile-pay{{if .Active}} deposit-mobile-pay--active{{end}}" type="button" data-pay-type="{{.Type}}">{{.TypeName}}</button>{{end}}</div>
      </div>
    </main>
    <div class="deposit-confirm-mask" data-deposit-confirm aria-hidden="true">
      <div class="deposit-confirm-stack">
        <section class="deposit-confirm-card" role="dialog" aria-modal="true" aria-labelledby="depositConfirmTitle">
          <div class="deposit-confirm-head">
            <h2 id="depositConfirmTitle">确认支付</h2>
            <span>金币充值</span>
          </div>
          <div class="deposit-confirm-order">
            <div class="deposit-confirm-order-copy">
              <strong data-deposit-confirm-name>300 金币</strong>
              <span>支付成功后即时到账</span>
            </div>
            <strong class="deposit-confirm-price">¥<span data-deposit-confirm-price>30</span></strong>
          </div>
          <h3 class="deposit-confirm-method-title">选择支付方式</h3>
          <div class="deposit-confirm-methods" data-deposit-confirm-methods></div>
          <button class="deposit-confirm-submit" type="button" data-deposit-confirm-submit>去支付</button>
          <p class="deposit-confirm-note">点击支付即表示已确认订单金额与支付方式</p>
        </section>
        <button class="deposit-confirm-close" type="button" aria-label="关闭" data-deposit-confirm-close>
          <img src="/static/images/figma-dialogs/dialog-close.svg" alt="" />
        </button>
      </div>
    </div>
    {{template "footer" .}}
    <script src="/static/js/pages/deposit.js?v=8"></script>
  </body>
</html>