feat: 购买流程重做（新页选套餐→选支付方式）+ 支付后后台自动激活 v1.8.0
- 修复「点击购买授权没反应」：支付方式选择行被 .pay-select-row 的 display:flex 压过 hidden 属性常驻显示；新增全局 [hidden]{display:none!important}
- 点「购买授权」改为打开新页面 buy.html：①展示本项目全部在售套餐 ②选套餐后才显示支付方式 ③下单支付
- 自动激活改为后台 chrome.alarms 每分钟轮询（关掉侧边栏/支付页也能激活），侧边栏轮询保留为快速通道
- authCreateOrder 支持传入所选套餐 cardTypeId；新增 getCardTypes 消息
This commit is contained in:
personal82555 committed
1 parent
540f506c78
commit
9348d52a98
10 files changed
+522
-92
No files matched your search
@@ -0,0 +1,256 @@
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
|
||||
background: #f6f7f9;
|
||||
color: #222;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.page {
|
||||
max-width: 720px;
|
||||
margin: 0 auto;
|
||||
padding: 28px 18px 40px;
|
||||
}
|
||||
|
||||
.head {
|
||||
text-align: center;
|
||||
margin-bottom: 26px;
|
||||
}
|
||||
|
||||
.logo {
|
||||
display: inline-block;
|
||||
font-size: 12px;
|
||||
color: #fff;
|
||||
background: #ff2442;
|
||||
border-radius: 20px;
|
||||
padding: 4px 14px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.head h1 {
|
||||
font-size: 26px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.flow {
|
||||
font-size: 13px;
|
||||
color: #888;
|
||||
}
|
||||
|
||||
section {
|
||||
background: #fff;
|
||||
border-radius: 12px;
|
||||
padding: 20px;
|
||||
margin-bottom: 16px;
|
||||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 17px;
|
||||
margin-bottom: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.num {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 50%;
|
||||
background: #ff2442;
|
||||
color: #fff;
|
||||
font-size: 13px;
|
||||
flex: none;
|
||||
}
|
||||
|
||||
.package-list {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.package {
|
||||
border: 2px solid #eee;
|
||||
border-radius: 10px;
|
||||
padding: 16px 14px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
transition: all 0.18s ease;
|
||||
}
|
||||
|
||||
.package:hover {
|
||||
border-color: #ffb3bf;
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.package.active {
|
||||
border-color: #ff2442;
|
||||
background: #fff6f7;
|
||||
}
|
||||
|
||||
.pkg-name {
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.pkg-price {
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
color: #ff2442;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.pkg-dur {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.pkg-btn {
|
||||
width: 100%;
|
||||
padding: 8px 0;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
background: #ff2442;
|
||||
color: #fff;
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
transition: background 0.18s ease;
|
||||
}
|
||||
|
||||
.pkg-btn:hover {
|
||||
background: #e01030;
|
||||
}
|
||||
|
||||
.package.active .pkg-btn {
|
||||
background: #e01030;
|
||||
}
|
||||
|
||||
.loading,
|
||||
.empty {
|
||||
grid-column: 1 / -1;
|
||||
text-align: center;
|
||||
color: #999;
|
||||
font-size: 13px;
|
||||
padding: 24px 0;
|
||||
}
|
||||
|
||||
.chosen {
|
||||
font-size: 13px;
|
||||
color: #666;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.chosen b {
|
||||
color: #ff2442;
|
||||
}
|
||||
|
||||
.pay-methods {
|
||||
display: flex;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.pay-btn {
|
||||
flex: 1;
|
||||
padding: 14px 0;
|
||||
border: 2px solid #eee;
|
||||
border-radius: 10px;
|
||||
background: #fff;
|
||||
font-size: 15px;
|
||||
cursor: pointer;
|
||||
transition: all 0.18s ease;
|
||||
}
|
||||
|
||||
.pay-btn.alipay {
|
||||
color: #1677ff;
|
||||
border-color: #bcd6ff;
|
||||
}
|
||||
|
||||
.pay-btn.wxpay {
|
||||
color: #09bb07;
|
||||
border-color: #b6e6b8;
|
||||
}
|
||||
|
||||
.pay-btn:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
.pay-btn.alipay:hover {
|
||||
border-color: #1677ff;
|
||||
}
|
||||
|
||||
.pay-btn.wxpay:hover {
|
||||
border-color: #09bb07;
|
||||
}
|
||||
|
||||
.tip {
|
||||
margin-top: 12px;
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.order-status {
|
||||
font-size: 14px;
|
||||
line-height: 1.8;
|
||||
padding: 14px;
|
||||
border-radius: 8px;
|
||||
background: #f6f7f9;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.order-status.pending {
|
||||
color: #b26a00;
|
||||
background: #fff8e6;
|
||||
}
|
||||
|
||||
.order-status.error {
|
||||
color: #c62828;
|
||||
background: #fdecea;
|
||||
}
|
||||
|
||||
.order-status.success {
|
||||
color: #1b5e20;
|
||||
background: #eef7ee;
|
||||
}
|
||||
|
||||
.ok-title {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.ok-line {
|
||||
font-size: 13px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.ok-line b {
|
||||
color: #1b5e20;
|
||||
}
|
||||
|
||||
.muted {
|
||||
color: #999;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.foot {
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
line-height: 1.9;
|
||||
}
|
||||
|
||||
.foot a {
|
||||
color: #ff2442;
|
||||
text-decoration: none;
|
||||
}
|
||||
Reference in new issue
Block a user