会员计划与购买

<div style="display:grid;gap:12px;max-width:380px">
  <div class="xxd-group__body"><div class="xxd-account"><span class="xxd-avatar" data-member style="--avatar-size:36px">东</span><div class="xxd-account__main"><div class="xxd-account__name">小小东</div><div class="xxd-plan-line" data-tone="member" id="plan-line">完整体验 · 还剩 6 天</div></div><button class="xxd-btn" data-size="sm" data-variant="primary" id="buy">开通会员</button></div></div>
  <div class="xxd-plans" role="radiogroup" aria-label="计划">
    <label class="xxd-plan"><input type="radio" class="xxd-radio" name="plan" checked><span class="xxd-plan__name">月度会员<small>每月自动提醒续费</small></span><span class="xxd-plan__price">¥29</span></label>
    <label class="xxd-plan"><input type="radio" class="xxd-radio" name="plan"><span class="xxd-plan__name">年度会员<small>相当于每月 ¥19</small></span><span class="xxd-plan__price">¥228</span></label>
  </div>
  <p class="xxd-help">体验剩下的天数会保留；续费从当前到期日往后算。</p>
  <div class="xxd-segmented" data-xxd-segmented data-block aria-label="支付方式"><button role="radio" aria-checked="true">微信</button><button role="radio">支付宝</button><button role="radio">银行卡</button></div>
  <div class="xxd-qr"><svg class="xxd-qr__code" viewBox="0 0 21 21" aria-label="付款二维码"><path fill="#111" d="M0 0h7v7H0zM14 0h7v7h-7zM0 14h7v7H0zM2 2v3h3V2zM16 2v3h3V2zM2 16v3h3v-3zM9 1h2v2H9zm0 4h3v2H9zm-1 4h2v2H8zm4 0h3v3h-3zm-4 4h3v2H8zm6 2h2v2h-2zm2-4h2v2h-2zm-4 6h2v2h-2zm6-2h3v3h-3z"/></svg>微信扫码支付 · 二维码 2 小时内有效<button class="xxd-link" type="button" id="paid">我已支付，立即查询</button></div>
</div>
<script>
  document.getElementById("paid").addEventListener("click", (e) => Xxd.runBusy(e.target, () => new Promise((r) => setTimeout(r, 900))).then(() => { Xxd.rollText(document.getElementById("plan-line"), "会员 · 到 2027年11月8日"); Xxd.celebrate(document.getElementById("buy")); Xxd.toast("会员已开通", { tone: "success" }); }));
</script>