milky/asd-backend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 网页续费页UI大改-横向卡片布局+续费文案+响应式优化

Browse Source
This commit is contained in:
milky0217
2026-06-02 13:19:22 +08:00
parent f7f8a1e03f
commit 12437975f3
1 changed files with 94 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files

175
src/handlers/payment.rs
View File

@@ -309,8 +309,7 @@ pub async fn payment_index() -> Result<HttpResponse, AppError> {
/* ===== 登录区域 ===== */
.login-section { max-width: 400px; margin: 0 auto; padding: 0 24px; }
.login-card { background: #fff; border-radius: 20px; padding: 48px 32px; text-align: center; box-shadow: 0 4px 24px rgba(0,0,0,0.06); }
.login-icon { width: 80px; height: 80px; margin: 0 auto 24px; background: #07c160; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.login-icon svg { width: 48px; height: 48px; }
.login-icon { width: 64px; height: 64px; margin: 0 auto 20px; background: #07c160; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 32px; }
.login-title { font-size: 20px; font-weight: 600; color: #333; margin-bottom: 8px; }
.login-desc { font-size: 14px; color: #999; margin-bottom: 32px; line-height: 1.6; }
@@ -332,52 +331,57 @@ pub async fn payment_index() -> Result<HttpResponse, AppError> {
/* ===== 会员区域 ===== */
.paid-section { display: none; }
.paid-banner { background: linear-gradient(135deg, #07c160, #06ad56); color: #fff; padding: 32px 20px 28px; text-align: center; }
.paid-banner h2 { font-size: 20px; margin-bottom: 4px; }
.paid-banner p { font-size: 13px; opacity: 0.85; }
.paid-info { background: #fff; margin: -16px 12px 0; border-radius: 14px; padding: 20px; box-shadow: 0 2px 12px rgba(0,0,0,0.06); position: relative; z-index: 1; }
.paid-status { background: linear-gradient(135deg, #07c160, #06ad56); color: #fff; padding: 36px 20px; text-align: center; }
.paid-status .check { width: 56px; height: 56px; margin: 0 auto 12px; background: rgba(255,255,255,0.2); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 28px; }
.paid-status h2 { font-size: 18px; font-weight: 600; margin-bottom: 4px; }
.paid-status p { font-size: 13px; opacity: 0.85; }
.paid-info { background: #fff; border-radius: 14px; padding: 16px 20px; box-shadow: 0 2px 12px rgba(0,0,0,0.06); }
.paid-info-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid #f5f5f5; font-size: 14px; }
.paid-info-row:last-child { border-bottom: none; }
.paid-info-label { color: #999; }
.paid-info-value { color: #333; font-weight: 500; }
.paid-badge { display: inline-block; background: #07c160; color: #fff; font-size: 12px; padding: 2px 8px; border-radius: 4px; }
.paid-badge { display: inline-block; background: #07c160; color: #fff; font-size: 12px; padding: 2px 10px; border-radius: 10px; }
.paid-section .wrapper { max-width: 480px; margin: -20px auto 0; padding: 0 12px; position: relative; z-index: 1; }
/* ===== 套餐区域 ===== */
.packages { display: none; max-width: 480px; margin: 0 auto; padding: 0 12px 60px; }
.packages-title { text-align: center; padding: 28px 0 20px; font-size: 18px; color: #333; }
.pkg-card { background: #fff; border-radius: 16px; padding: 24px; margin-bottom: 16px; cursor: pointer; transition: all 0.2s; border: 2px solid transparent; position: relative; }
.pkg-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.08); }
.pkg-card.selected { border-color: #07c160; background: #f0f7ff; }
.pkg-tag { position: absolute; top: -1px; right: 16px; background: #07c160; color: #fff; font-size: 12px; padding: 4px 10px; border-radius: 0 0 8px 8px; }
.pkg-name { font-size: 18px; font-weight: 600; color: #333; margin-bottom: 8px; }
.pkg-price { font-size: 32px; font-weight: 700; color: #07c160; margin-bottom: 4px; }
.pkg-price .unit { font-size: 14px; font-weight: 400; }
.pkg-desc { font-size: 13px; color: #999; }
.pkg-original { font-size: 14px; color: #bbb; text-decoration: line-through; margin-right: 4px; }
.pkg-features { margin-top: 12px; padding-top: 12px; border-top: 1px solid #f0f0f0; }
.pkg-feature { font-size: 13px; color: #666; margin-bottom: 6px; }
.btn-pay { display: block; width: 100%; max-width: 480px; margin: 0 auto 16px; background: #07c160; color: #fff; border: none; border-radius: 12px; padding: 16px; font-size: 17px; font-weight: 600; cursor: pointer; transition: background 0.2s; }
.pkgs-title { text-align: center; padding: 24px 0 16px; font-size: 17px; color: #333; font-weight: 600; }
.pkgs-sub { text-align: center; font-size: 13px; color: #999; margin-bottom: 16px; }
.pkg-card { background: #fff; border-radius: 14px; padding: 20px; margin-bottom: 12px; cursor: pointer; transition: all 0.2s; border: 2px solid #f0f0f0; position: relative; display: flex; align-items: center; gap: 16px; }
.pkg-card:hover { border-color: #d9d9d9; box-shadow: 0 2px 8px rgba(0,0,0,0.04); }
.pkg-card.selected { border-color: #07c160; background: #f6fff9; }
.pkg-tag { position: absolute; top: -1px; right: 12px; background: #ff6b35; color: #fff; font-size: 11px; padding: 3px 8px; border-radius: 0 0 6px 6px; }
.pkg-left { flex: 1; }
.pkg-name { font-size: 16px; font-weight: 600; color: #333; }
.pkg-desc { font-size: 12px; color: #999; margin-top: 2px; }
.pkg-right { text-align: right; }
.pkg-price { font-size: 24px; font-weight: 700; color: #07c160; line-height: 1; }
.pkg-price .unit { font-size: 13px; font-weight: 400; }
.pkg-original { font-size: 13px; color: #bbb; text-decoration: line-through; }
.pkg-perday { font-size: 11px; color: #999; margin-top: 2px; }
.btn-pay { display: block; width: 100%; max-width: 480px; margin: 8px auto 12px; background: #07c160; color: #fff; border: none; border-radius: 12px; padding: 16px; font-size: 17px; font-weight: 600; cursor: pointer; transition: background 0.2s, transform 0.1s; }
.btn-pay:active { transform: scale(0.98); }
.btn-pay:hover { background: #06ad56; }
.btn-pay:disabled { background: #d9d9d9; cursor: not-allowed; }
.notice { text-align: center; font-size: 12px; color: #bbb; }
.btn-logout { display: block; width: 100%; max-width: 480px; margin: 0 auto; background: #fff; color: #999; border: 1px solid #d9d9d9; border-radius: 12px; padding: 12px; font-size: 14px; cursor: pointer; }
.btn-logout:hover { color: #666; border-color: #999; }
.btn-pay:disabled { background: #d9d9d9; cursor: not-allowed; transform: none; }
.notice { text-align: center; font-size: 12px; color: #bbb; margin-top: 4px; }
.footer-links { text-align: center; margin-top: 24px; }
.btn-logout { display: inline-block; background: none; color: #bbb; border: none; font-size: 13px; cursor: pointer; padding: 8px 16px; }
.btn-logout:hover { color: #999; }
/* 错误提示 */
.error-msg { background: #fff2f0; color: #cf1322; border: 1px solid #ffccc7; border-radius: 8px; padding: 12px; margin-bottom: 16px; font-size: 14px; display: none; }
@media (max-width: 480px) {
.paid-banner { padding: 24px 16px 20px; }
.paid-banner h2 { font-size: 18px; }
.paid-info { margin: -14px 8px 0; padding: 16px; border-radius: 12px; }
.paid-status { padding: 28px 16px; }
.paid-status .check { width: 48px; height: 48px; font-size: 24px; }
.paid-status h2 { font-size: 16px; }
.paid-info { padding: 14px 16px; }
.paid-info-row { font-size: 13px; padding: 8px 0; }
.packages-title { font-size: 16px; padding: 20px 0 16px; }
.pkg-card { padding: 16px; margin-bottom: 12px; }
.pkg-name { font-size: 16px; }
.pkg-price { font-size: 26px; }
.pkg-desc { font-size: 12px; }
.pkg-original { font-size: 13px; }
.pkg-feature { font-size: 12px; }
.pkgs-title { font-size: 16px; }
.pkg-card { padding: 14px; gap: 12px; }
.pkg-name { font-size: 15px; }
.pkg-price { font-size: 20px; }
.pkg-desc { font-size: 11px; }
.btn-pay { padding: 14px; font-size: 16px; }
}
</style>
@@ -387,13 +391,7 @@ pub async fn payment_index() -> Result<HttpResponse, AppError> {
<!-- 登录区（等待授权） -->
<div class="login-section" id="loginSection">
<div class="login-card">
<div class="login-icon">
<svg viewBox="0 0 24 24" fill="#fff">
<path d="M8.68 10.74a.5.5 0 01-.01.85l-3.6 2.88a.5.5 0 01-.74-.38V7.13a.5.5 0 01.74-.38l3.6 2.88a.5.5 0 01.01.85l-1.6 1.28 1.6 1.28z"/>
<path d="M12.02 5.5a6.5 6.5 0 100 13 6.5 6.5 0 000-13zm0 10.5a4 4 0 110-8 4 4 0 010 8z"/>
<path d="M15.32 8.68a.5.5 0 01.01.85l-1.6 1.28 1.6 1.28a.5.5 0 01-.74.38l-3.6-2.88a.5.5 0 01.01-.85l3.6-2.88a.5.5 0 01.72.38v3.22z"/>
</svg>
</div>
<div class="login-icon">🔒</div>
<div class="login-title">等待授权</div>
<div class="login-desc" id="loginDesc">请在微信小程序中<br>点击「去授权」完成登录</div>
@@ -412,74 +410,84 @@ pub async fn payment_index() -> Result<HttpResponse, AppError> {
<!-- 会员信息区（已登录） -->
<div class="paid-section" id="paidSection">
<div class="paid-banner">
<div class="paid-status">
<div class="check">✓</div>
<h2 id="paidTitle">会员专享福利</h2>
<p id="paidSubtitle">无限存储空间</p>
</div>
<div class="paid-info">
<div class="paid-info-row">
<span class="paid-info-label">会员状态</span>
<span class="paid-info-value"><span class="paid-badge" id="paidBadge">付费会员</span></span>
</div>
<div class="paid-info-row" id="expiresRow">
<span class="paid-info-label">到期时间</span>
<span class="paid-info-value" id="paidExpires">--</span>
</div>
<div class="paid-info-row">
<span class="paid-info-label">存储空间</span>
<span class="paid-info-value">无限制</span>
<div class="wrapper">
<div class="paid-info">
<div class="paid-info-row">
<span class="paid-info-label">会员状态</span>
<span class="paid-info-value"><span class="paid-badge" id="paidBadge">付费会员</span></span>
</div>
<div class="paid-info-row" id="expiresRow">
<span class="paid-info-label">到期时间</span>
<span class="paid-info-value" id="paidExpires">--</span>
</div>
<div class="paid-info-row">
<span class="paid-info-label">存储空间</span>
<span class="paid-info-value">无限制</span>
</div>
</div>
</div>
</div>
<!-- 套餐区（登录后显示） -->
<div class="packages" id="packages">
<div class="packages-title">选择会员套餐</div>
<div class="pkgs-title" id="pkgsTitle">选择会员套餐</div>
<div class="pkgs-sub" id="pkgsSub">开通后享无限存储，随时可续费</div>
<div class="pkg-card" data-package="monthly" onclick="selectPackage('monthly')">
<div class="pkg-name">包月会员</div>
<div class="pkg-price"><span class="pkg-original">¥9.9</span> ¥5.9<span class="unit">/月</span></div>
<div class="pkg-desc">适合短期使用需求</div>
<div class="pkg-features">
<div class="pkg-feature">每月 500 条存储记录</div>
<div class="pkg-feature">查看完整历史记录</div>
<div class="pkg-left">
<div class="pkg-name">包月会员</div>
<div class="pkg-desc">适合短期使用</div>
</div>
<div class="pkg-right">
<div class="pkg-price"><span class="pkg-original">¥9.9</span> ¥5.9<span class="unit">/月</span></div>
<div class="pkg-perday">约 ¥0.20/天</div>
</div>
</div>
<div class="pkg-card" data-package="quarterly" onclick="selectPackage('quarterly')">
<div class="pkg-name">季卡会员</div>
<div class="pkg-price"><span class="pkg-original">¥29</span> ¥16.8<span class="unit">/季</span></div>
<div class="pkg-desc">适合中期使用</div>
<div class="pkg-features">
<div class="pkg-feature">每季 500 条存储记录</div>
<div class="pkg-feature">查看完整历史记录</div>
<div class="pkg-left">
<div class="pkg-name">季卡会员</div>
<div class="pkg-desc">适合中期使用</div>
</div>
<div class="pkg-right">
<div class="pkg-price"><span class="pkg-original">¥29</span> ¥16.8<span class="unit">/季</span></div>
<div class="pkg-perday">约 ¥0.19/天</div>
</div>
</div>
<div class="pkg-card" data-package="half_year" onclick="selectPackage('half_year')">
<div class="pkg-name">半年会员</div>
<div class="pkg-price"><span class="pkg-original">¥49</span> ¥31.9<span class="unit">/半年</span></div>
<div class="pkg-desc">性价比之选</div>
<div class="pkg-features">
<div class="pkg-feature">半年 500 条存储记录</div>
<div class="pkg-feature">查看完整历史记录</div>
<div class="pkg-left">
<div class="pkg-name">半年会员</div>
<div class="pkg-desc">性价比之选</div>
</div>
<div class="pkg-right">
<div class="pkg-price"><span class="pkg-original">¥49</span> ¥31.9<span class="unit">/半年</span></div>
<div class="pkg-perday">约 ¥0.18/天</div>
</div>
</div>
<div class="pkg-card" data-package="yearly" onclick="selectPackage('yearly')">
<div class="pkg-tag">推荐</div>
<div class="pkg-name">包年会员</div>
<div class="pkg-price"><span class="pkg-original">¥99</span> ¥60.2<span class="unit">/年</span></div>
<div class="pkg-desc">相当于每月 ¥5.0，性价比最高</div>
<div class="pkg-features">
<div class="pkg-feature">每年 5000 条存储记录</div>
<div class="pkg-feature">查看完整历史记录</div>
<div class="pkg-left">
<div class="pkg-name">包年会员</div>
<div class="pkg-desc">相当于每月仅 ¥5.0</div>
</div>
<div class="pkg-right">
<div class="pkg-price"><span class="pkg-original">¥99</span> ¥60.2<span class="unit">/年</span></div>
<div class="pkg-perday">约 ¥0.16/天</div>
</div>
</div>
<button class="btn-pay" id="payBtn" onclick="goPay()" disabled>请先选择套餐</button>
<button class="btn-logout" onclick="logout()">退出登录</button>
<div class="notice" style="margin-top:16px">支付成功后额度将自动到账</div>
<div class="notice">支付成功后额度将自动到账</div>
<div class="footer-links">
<button class="btn-logout" onclick="logout()">退出登录</button>
</div>
</div>
<script>
@@ -562,6 +570,8 @@ pub async fn payment_index() -> Result<HttpResponse, AppError> {
// 已付费用户，显示会员信息 + 续费套餐
document.getElementById('paidSection').style.display = 'block';
document.getElementById('paidBadge').textContent = '付费会员';
document.getElementById('pkgsTitle').textContent = '续费套餐';
document.getElementById('pkgsSub').textContent = '选择套餐延长会员有效期，现有权益不受影响';
if (paidExpiresAt) {
document.getElementById('paidExpires').textContent = new Date(paidExpiresAt).toLocaleString('zh-CN');
document.getElementById('expiresRow').style.display = 'flex';
@@ -571,6 +581,9 @@ pub async fn payment_index() -> Result<HttpResponse, AppError> {
document.getElementById('packages').style.display = 'none';
return;
}
} else {
document.getElementById('pkgsTitle').textContent = '选择会员套餐';
document.getElementById('pkgsSub').textContent = '开通后享无限存储，随时可续费';
}
// 显示套餐（未付费用户购买 / 已付费用户续费）
document.getElementById('paidSection').style.display = 'block';