web_huangguo_web/app/templates/page/userCenter.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>个人中心 - 黄果短剧</title>
    <meta
      name="description"
      content="黄果短剧个人中心：查看账号信息、会员状态、收藏与观看记录入口 - 黄果短剧"
    />
    <meta name="keywords" content="个人中心,我的账号,黄果短剧" />
    <meta property="og:type" content="website" />
    <meta property="og:title" content="个人中心 - 黄果短剧" />
    <meta
      property="og:description"
      content="黄果短剧个人中心：查看账号信息、会员状态、收藏与观看记录入口。"
    />
    <link rel="stylesheet" href="/static/css/userCenter.css?v=10" />
    <link rel="stylesheet" href="/static/css/accountShared.css?v=12" />
  </head>
  <body class="site-shell user-center-layout is-user-center-page">
    {{template "header" .}}
    <main class="user-center-page">
      <div class="user-center-pc">
        <div class="user-center-head">
          <div class="user-center-eyebrow">ACCOUNT</div>
          <div class="user-center-head-row">
            <div class="user-center-head-title-wrap">
              <h1
                class="user-center-title{{if .isLoggedIn}} user-center-title--logged{{end}}"
              >
                个人中心
              </h1>
              {{if and .isLoggedIn (not .isRegistered)}}
              <a class="user-center-guest-register-btn" href="/register/"
                >游客注册</a
              >
              {{end}}
            </div>
            <div class="user-center-state-switch" aria-label="登录状态预览">
              <a
                class="user-center-state-btn{{if not .isLoggedIn}} user-center-state-btn--active{{end}}"
                href="/user-center/"
                >未登录</a
              >
              <a
                class="user-center-state-btn{{if .isLoggedIn}} user-center-state-btn--active{{end}}"
                href="/user-center/"
                >已登录</a
              >
            </div>
          </div>
          {{if .isLoggedIn}}
          <div class="user-center-desc">欢迎回来，继续你的追剧旅程</div>
          {{else}}
          <div class="user-center-desc">管理观看数据、收藏和金币余额</div>
          {{end}}
        </div>

        {{template "squarePromo" dict "Ads" .appConfig.DetailTopList "SlotKey" "user_center_detail_top" "SlotName" "个人中心方块广告" "Label" "推广应用"}}

        {{if .isLoggedIn}}
        <div class="user-center-profile">
          {{if .avatar}}
          <img
            class="user-center-avatar lazy"
            src="/static/images/placeholder.png?v=2"
            data-src="{{.avatar}}"
            alt="{{if .userName}}{{.userName}}{{else}}用户{{end}}的头像"
          />
          {{else}}
          <img
            class="user-center-avatar"
            src="/static/images/avatar.png"
            alt="{{if .userName}}{{.userName}}{{else}}用户{{end}}的默认头像"
          />
          {{end}}
          <div class="user-center-profile-info">
            <div class="user-center-profile-name">
              {{if .userName}}{{.userName}}{{else}}用户{{end}}
            </div>
            <div class="user-center-profile-id" data-user-center-id data-id-layout="pc">
              ID：{{if .userId}}{{.userId}}{{else}}--{{end}}
            </div>
            {{if .email}}
            <div class="user-center-profile-email">{{.email}}</div>
            {{end}}
          </div>
          <div class="user-center-profile-spacer"></div>
          <a class="user-center-coin-card" href="/deposit/">
            <div class="user-center-coin-copy">
              <div class="user-center-coin-label">金币余额 <small>(金币)</small></div>
              <div class="user-center-coin-value" data-user-center-recharge>
                {{if .rechargeText}}{{.rechargeText}}{{else}}000.00{{end}}
              </div>
            </div>
            <img class="user-center-coin-action" src="/static/images/jbcz.png" alt="金币充值" width="72" height="30" />
          </a>
        </div>
        {{else}}
        <div class="user-center-login-banner">
          <div class="user-center-login-title">登录后同步观看数据</div>
          <div class="user-center-login-desc">
            登录后同步收藏、追剧、观看历史和金币余额。
          </div>
          <a class="user-center-login-btn" href="#login" data-login-dialog-open>
            <span class="user-center-login-arrow">→</span>
            <span>登录账号</span>
          </a>
        </div>
        {{end}}

        <div class="user-center-features">
          <a class="user-center-feature" href="/collect/">
            <div class="user-center-feature-icon" aria-hidden="true">
                <img src="/static/images/figma-account/feature-follow.svg" alt="" />
            </div>
            <div class="user-center-feature-title">追剧与收藏</div>
            <div class="user-center-feature-desc">继续关注喜欢的内容</div>
          </a>
          <a class="user-center-feature" href="/deposit/">
            <div class="user-center-feature-icon" aria-hidden="true">
                <img src="/static/images/figma-account/feature-wallet.svg" alt="" />
            </div>
            <div class="user-center-feature-title">金币充值</div>
            <div class="user-center-feature-desc">查看余额和充值记录</div>
          </a>
          <a class="user-center-feature" href="/history/">
            <div class="user-center-feature-icon" aria-hidden="true">
                <img src="/static/images/figma-account/feature-history.svg" alt="" />
            </div>
            <div class="user-center-feature-title">观看历史</div>
            <div class="user-center-feature-desc">找回最近观看的剧集</div>
          </a>
          <a class="user-center-feature" href="/setting/">
            <div class="user-center-feature-icon" aria-hidden="true">
                <img src="/static/images/figma-account/feature-setting.svg" alt="" />
            </div>
            <div class="user-center-feature-title">账号设置</div>
            <div class="user-center-feature-desc">资料与安全设置</div>
          </a>
        </div>
      </div>

      <div class="user-center-main">
        {{if .isLoggedIn}}
        <div class="user-center-mobile-profile">
          {{if .avatar}}
          <img
            class="user-center-mobile-avatar lazy"
            src="/static/images/placeholder.png?v=2"
            data-src="{{.avatar}}"
            alt="{{if .userName}}{{.userName}}{{else}}用户{{end}}的头像"
          />
          {{else}}
          <img
            class="user-center-mobile-avatar"
            src="/static/images/avatar.png"
            alt="{{if .userName}}{{.userName}}{{else}}用户{{end}}的默认头像"
          />
          {{end}}
          <div class="user-center-mobile-profile-info">
            <div class="user-center-mobile-name">
              {{if .userName}}{{.userName}}{{else}}用户{{end}}
            </div>
            <div class="user-center-mobile-meta" data-user-center-id data-id-layout="mobile">
              {{if .userId}}ID {{.userId}}{{else}}ID --{{end}}
            </div>
          </div>
          {{if not .isRegistered}}
          <a class="user-center-mobile-guest-register-btn" href="/register/"
            >游客注册</a
          >
          {{end}}
        </div>

        <div class="user-center-mobile-body">
          <a class="user-center-mobile-balance" href="/deposit/">
            <div class="user-center-mobile-balance-copy">
              <div class="user-center-mobile-balance-label">金币余额 <small>(金币)</small></div>
              <div class="user-center-mobile-balance-value" data-user-center-recharge>{{if .rechargeText}}{{.rechargeText}}{{else}}000.00{{end}}</div>
            </div>
            <span class="user-center-mobile-balance-action">金币充值</span>
          </a>

          {{template "squarePromo" dict "Ads" .appConfig.DetailTopList "SlotKey" "user_center_detail_top" "SlotName" "个人中心方块广告" "Label" "推广应用"}}

          <div class="user-center-mobile-menu">
            <a class="user-center-mobile-menu-item" href="/collect/">
              <span class="user-center-mobile-menu-label">我的追剧</span>
              <span class="user-center-mobile-menu-right">
                <span class="user-center-mobile-menu-hint"
                  >{{if
                  .collectCountText}}{{.collectCountText}}{{else}}0部{{end}}</span
                >
                <img
                  class="user-center-mobile-menu-arrow"
                  src="/static/images/arrow_right2.svg"
                  alt="查看我的追剧"
                />
              </span>
            </a>
            <a class="user-center-mobile-menu-item" href="/history/">
              <span class="user-center-mobile-menu-label">观看历史</span>
              <span class="user-center-mobile-menu-right">
                <span class="user-center-mobile-menu-hint">继续观看</span>
                <img
                  class="user-center-mobile-menu-arrow"
                  src="/static/images/arrow_right2.svg"
                  alt="查看观看历史"
                />
              </span>
            </a>
            <a class="user-center-mobile-menu-item" href="/setting/">
              <span class="user-center-mobile-menu-label">账号设置</span>
              <span class="user-center-mobile-menu-right">
                <img
                  class="user-center-mobile-menu-arrow"
                  src="/static/images/arrow_right2.svg"
                  alt="进入账号设置"
                />
              </span>
            </a>
            <a class="user-center-mobile-menu-item" href="/feedback/">
              <span class="user-center-mobile-menu-label">意见反馈</span>
              <span class="user-center-mobile-menu-right">
                <img
                  class="user-center-mobile-menu-arrow"
                  src="/static/images/arrow_right2.svg"
                  alt="进入问题反馈"
                />
              </span>
            </a>
          </div>
        </div>
        {{else}}
        <div
          class="user-center-mobile-profile user-center-mobile-profile--guest"
        >
          <img
            class="user-center-mobile-avatar"
            src="/static/images/avatar.png"
            alt="未登录用户头像"
          />
          <div class="user-center-mobile-profile-info">
            <div class="user-center-mobile-name">未登录</div>
            <div class="user-center-mobile-meta">登录后同步收藏与观看历史</div>
          </div>
          <a
            class="user-center-mobile-login-btn"
            href="#login"
            data-login-dialog-open
            >登录</a
          >
        </div>

        <div class="user-center-mobile-body">
          <a class="user-center-mobile-balance" href="/deposit/">
            <div class="user-center-mobile-balance-copy">
              <div class="user-center-mobile-balance-label">金币余额 <small>(金币)</small></div>
              <div class="user-center-mobile-balance-value">000.00</div>
            </div>
            <span class="user-center-mobile-balance-action">金币充值</span>
          </a>

          {{template "squarePromo" dict "Ads" .appConfig.DetailTopList "SlotKey" "user_center_detail_top" "SlotName" "个人中心方块广告" "Label" "推广应用"}}

          <div class="user-center-mobile-menu">
            <a class="user-center-mobile-menu-item" href="/collect/">
              <span class="user-center-mobile-menu-label">我的追剧</span>
              <span class="user-center-mobile-menu-right">
                <img
                  class="user-center-mobile-menu-arrow"
                  src="/static/images/arrow_right2.svg"
                  alt="查看我的追剧"
                />
              </span>
            </a>
            <a class="user-center-mobile-menu-item" href="/history/">
              <span class="user-center-mobile-menu-label">观看历史</span>
              <span class="user-center-mobile-menu-right">
                <img
                  class="user-center-mobile-menu-arrow"
                  src="/static/images/arrow_right2.svg"
                  alt="查看观看历史"
                />
              </span>
            </a>
            <a class="user-center-mobile-menu-item" href="/setting/">
              <span class="user-center-mobile-menu-label">账号设置</span>
              <span class="user-center-mobile-menu-right">
                <img
                  class="user-center-mobile-menu-arrow"
                  src="/static/images/arrow_right2.svg"
                  alt="进入账号设置"
                />
              </span>
            </a>
            <a class="user-center-mobile-menu-item" href="/feedback/">
              <span class="user-center-mobile-menu-label">意见反馈</span>
              <span class="user-center-mobile-menu-right">
                <img
                  class="user-center-mobile-menu-arrow"
                  src="/static/images/arrow_right2.svg"
                  alt="进入问题反馈"
                />
              </span>
            </a>
          </div>
        </div>
        {{end}}
      </div>
    </main>
    {{template "footer" .}}
    <script src="/static/js/pages/userCenter.js?v=2"></script>
  </body>
</html>