531 lines
11 KiB
Vue
531 lines
11 KiB
Vue
<template>
|
||
<div class="checkout-page">
|
||
|
||
<div class="summary-panel">
|
||
<div class="summary-content">
|
||
<div class="back-button-placeholder">
|
||
<button class="back-btn" @click="goBack">
|
||
<svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||
<polyline points="15 18 9 12 15 6"></polyline>
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
|
||
<h1 class="panel-title">订阅 金银湖大模型 Pro</h1>
|
||
<div class="trial-info">
|
||
<span class="trial-days">US$60.00</span>
|
||
<p class="trial-note">每个月</p>
|
||
</div>
|
||
|
||
<div class="plan-card">
|
||
<div class="card-details">
|
||
<div class="card-header">
|
||
<span class="card-title">金银湖大模型 Pro</span>
|
||
<span class="card-tag">7 天免费</span>
|
||
</div>
|
||
<div class="card-features">
|
||
金银湖大模型 Pro unlocks unlimited tab completion, extended agent limits, and access to most features.
|
||
</div>
|
||
<div class="card-price">US$20.00 / 月度</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="toggle-row">
|
||
<span class="toggle-label">采用年费计划</span>
|
||
<div class="toggle-switch">
|
||
<input type="checkbox" id="annual" v-model="isAnnual">
|
||
<label for="annual"></label>
|
||
</div>
|
||
<span class="toggle-discount">节省 US$4.00</span>
|
||
</div>
|
||
|
||
<div class="spacer"></div>
|
||
|
||
<div class="price-detail">
|
||
<div class="detail-row">
|
||
<span>小计</span>
|
||
<span>US$20.00</span>
|
||
</div>
|
||
<div class="detail-row">
|
||
<span>税 <i class="icon-info"></i></span>
|
||
<span>US$0.00</span>
|
||
</div>
|
||
<div class="detail-row total-row">
|
||
<span>试用后总额</span>
|
||
<span>US$20.00</span>
|
||
</div>
|
||
<div class="detail-row today-total">
|
||
<span>今日合计</span>
|
||
<span>US$0.00</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-panel">
|
||
<h2 class="form-title">输入付款详情</h2>
|
||
|
||
<div class="form-group email-group">
|
||
<label>邮箱</label>
|
||
<d-input
|
||
size="lg"
|
||
placeholder="fukang10032@gmail.com"
|
||
v-model="formData.email"
|
||
class="email-input-custom"
|
||
></d-input>
|
||
</div>
|
||
|
||
<div class="form-group payment-group">
|
||
<label>支付方式</label>
|
||
|
||
<div class="payment-option">
|
||
<d-radio name="payment" value="card" v-model="formData.paymentMethod">
|
||
<img class="wechart-icon" src="@/assets/v3/card-ce24697297bd3c6a00fdd2fb6f760f0d.svg">
|
||
<span class="radio-label">银行卡</span>
|
||
</d-radio>
|
||
<!-- <div v-if="formData.paymentMethod === 'card'" class="card-input-placeholder">-->
|
||
<!-- [Card Element Input Placeholder]-->
|
||
<!-- </div>-->
|
||
</div>
|
||
|
||
<div class="payment-option">
|
||
<d-radio name="payment" value="wechat" v-model="formData.paymentMethod">
|
||
<img class="wechart-icon" src="@/assets/v3/NTI4MWU5.ico">
|
||
<span class="radio-label">微信支付</span>
|
||
</d-radio>
|
||
</div>
|
||
|
||
<div class="payment-option">
|
||
<d-radio name="payment" value="alipay" v-model="formData.paymentMethod">
|
||
<img class="alipay-icon" src="@/assets/v3/alipay-22c167d415e209c71b2ac68b7fbc9f43.svg">
|
||
<span class="radio-label">支付宝</span>
|
||
</d-radio>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="save-info-text">
|
||
保存您的信息，以便更快地在 金银湖大模型 和支持 Stripe 的地方安全地支付。
|
||
</div>
|
||
|
||
<d-button class="start-trial-btn" @click="startTrial">订阅</d-button>
|
||
|
||
<p class="terms-text">
|
||
订阅即表示您同意 金银湖大模型 服务条款，并且理解您的订阅将自动续订，直到您在 Stripe 客户门户上取消。
|
||
</p>
|
||
<div class="powered-by">
|
||
Powered by <span class="stripe-link">stripe</span> | 条款 | 隐私
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref } from 'vue';
|
||
import {useRouter} from "vue-router";
|
||
const router = useRouter();
|
||
const formData = ref({
|
||
email: 'fukang10032@gmail.com',
|
||
paymentMethod: 'card', // 默认选中银行卡
|
||
});
|
||
|
||
const isAnnual = ref(false); // 控制年费月费切换
|
||
|
||
const startTrial = () => {
|
||
alert('订阅按钮被点击！');
|
||
};
|
||
|
||
const goBack = () => {
|
||
router.go(-1);
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.checkout-page {
|
||
display: flex;
|
||
min-height: 100vh;
|
||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.summary-panel {
|
||
flex: 1.1;
|
||
background-color: #000;
|
||
color: #fff;
|
||
padding: 0 40px;
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
}
|
||
|
||
.summary-content {
|
||
width: 100%;
|
||
max-width: 600px;
|
||
padding: 60px 0;
|
||
}
|
||
|
||
.form-panel {
|
||
flex: 1;
|
||
background-color: #fff;
|
||
color: #333;
|
||
padding: 60px 40px;
|
||
}
|
||
|
||
/* ------------------- 左侧摘要样式 ------------------- */
|
||
/* 优化点 3: 返回按钮样式 */
|
||
.back-button-placeholder {
|
||
margin-bottom: 50px;
|
||
}
|
||
.back-btn {
|
||
background: none;
|
||
border: none;
|
||
cursor: pointer;
|
||
padding: 0;
|
||
color: #fff;
|
||
opacity: 0.7;
|
||
transition: opacity 0.2s;
|
||
}
|
||
.back-btn:hover {
|
||
opacity: 1;
|
||
}
|
||
|
||
|
||
.panel-title {
|
||
font-size: 28px;
|
||
font-weight: 600;
|
||
margin-bottom: 5px;
|
||
}
|
||
|
||
.trial-info {
|
||
margin-bottom: 50px;
|
||
}
|
||
|
||
.trial-days {
|
||
font-size: 44px;
|
||
font-weight: 700;
|
||
display: block;
|
||
}
|
||
|
||
.trial-note {
|
||
font-size: 14px;
|
||
color: #777;
|
||
margin-top: 5px;
|
||
}
|
||
|
||
/* 计划卡片 */
|
||
.plan-card {
|
||
background-color: #1e1e1e;
|
||
border-radius: 8px;
|
||
padding: 16px;
|
||
display: flex;
|
||
position: relative;
|
||
margin-bottom: 30px;
|
||
border: 1px solid #333;
|
||
}
|
||
|
||
.card-details {
|
||
flex-grow: 1;
|
||
padding: 4px 0;
|
||
}
|
||
|
||
.card-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 4px;
|
||
}
|
||
|
||
.card-title {
|
||
font-weight: 600;
|
||
font-size: 16px;
|
||
color: #fff;
|
||
}
|
||
|
||
.card-features {
|
||
font-size: 12px;
|
||
color: #888;
|
||
line-height: 1.5;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.card-price {
|
||
font-size: 12px;
|
||
color: #aaa;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.card-tag {
|
||
background-color: transparent;
|
||
color: #4CAF50;
|
||
font-size: 11px;
|
||
font-weight: 500;
|
||
padding: 2px 0;
|
||
}
|
||
|
||
/* 年月切换 */
|
||
.toggle-row {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 30px;
|
||
background-color: #111;
|
||
border-radius: 4px;
|
||
padding: 8px 12px;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.toggle-label {
|
||
font-size: 14px;
|
||
color: #ccc;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.toggle-discount {
|
||
font-size: 12px;
|
||
color: #4CAF50;
|
||
font-weight: 500;
|
||
}
|
||
|
||
/* 简化开关样式 (Toggle Switch) */
|
||
.toggle-switch {
|
||
margin: 0 15px;
|
||
flex-grow: 1;
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
}
|
||
.toggle-switch input[type="checkbox"] {
|
||
display: none;
|
||
}
|
||
.toggle-switch label {
|
||
cursor: pointer;
|
||
width: 40px;
|
||
height: 20px;
|
||
background-color: #444;
|
||
border-radius: 10px;
|
||
position: relative;
|
||
display: block;
|
||
transition: background-color 0.3s;
|
||
}
|
||
.toggle-switch label:after {
|
||
content: '';
|
||
position: absolute;
|
||
top: 2px;
|
||
left: 2px;
|
||
width: 16px;
|
||
height: 16px;
|
||
background-color: #ccc;
|
||
border-radius: 50%;
|
||
transition: 0.3s;
|
||
}
|
||
.toggle-switch input:checked + label {
|
||
background-color: #58a6ff;
|
||
}
|
||
.toggle-switch input:checked + label:after {
|
||
left: calc(100% - 18px);
|
||
background-color: white;
|
||
}
|
||
|
||
.spacer {
|
||
border-top: 1px solid #333;
|
||
margin: 20px 0;
|
||
}
|
||
|
||
/* 价格明细 */
|
||
.price-detail {
|
||
font-size: 14px;
|
||
}
|
||
|
||
.detail-row {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin-bottom: 15px;
|
||
color: #aaa;
|
||
}
|
||
|
||
.detail-row span:last-child {
|
||
font-weight: 500;
|
||
color: #fff;
|
||
}
|
||
|
||
.detail-row.total-row {
|
||
border-top: 1px solid #333;
|
||
padding-top: 20px;
|
||
margin-top: 15px;
|
||
color: #fff;
|
||
}
|
||
|
||
.detail-row.today-total {
|
||
font-size: 16px;
|
||
font-weight: 700;
|
||
color: #4CAF50;
|
||
}
|
||
.detail-row.today-total span:last-child {
|
||
color: #4CAF50;
|
||
}
|
||
|
||
|
||
/* ------------------- 右侧表单样式 ------------------- */
|
||
.form-title {
|
||
font-size: 28px;
|
||
font-weight: 600;
|
||
margin-bottom: 40px;
|
||
color: #333;
|
||
}
|
||
|
||
.form-group {
|
||
margin-bottom: 30px;
|
||
}
|
||
|
||
.form-group label {
|
||
display: block;
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
color: #333;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
/* 优化点 1: 邮箱输入框美化 (参考 image_15239f.png) */
|
||
.email-input-custom :deep(.devui-input-wrapper) {
|
||
border: 1px solid #ddd;
|
||
border-radius: 4px; /* 略微减少圆角，更符合 image_15239f.png */
|
||
transition: border-color 0.2s, box-shadow 0.2s;
|
||
}
|
||
|
||
.email-input-custom :deep(.devui-input-wrapper.focus) {
|
||
border-color: #58a6ff;
|
||
box-shadow: 0 0 0 1px #58a6ff; /* 增加细微的聚焦阴影 */
|
||
}
|
||
|
||
.email-input-custom :deep(.devui-input) {
|
||
padding: 10px 12px;
|
||
font-size: 14px;
|
||
height: auto;
|
||
}
|
||
|
||
/* 支付方式 */
|
||
.payment-group {
|
||
margin-bottom: 40px;
|
||
}
|
||
.payment-group label {
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
/* 支付选项容器 */
|
||
.payment-option {
|
||
margin-bottom: 15px;
|
||
border: 1px solid #ddd;
|
||
border-radius: 6px;
|
||
padding: 10px 15px;
|
||
/* 确保 Radio 按钮在未选中的 payment-option 中也能看到 */
|
||
}
|
||
.payment-option:hover {
|
||
border-color: #ccc;
|
||
}
|
||
|
||
/* DevUI Radio 样式定制 */
|
||
.payment-option :deep(.devui-radio-list) {
|
||
display: block;
|
||
}
|
||
.payment-option :deep(.devui-radio) {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
.payment-option :deep(.devui-radio-input) {
|
||
width: 16px;
|
||
height: 16px;
|
||
border: 1px solid #999;
|
||
}
|
||
.payment-option :deep(.devui-radio-input.checked) {
|
||
background-color: #000;
|
||
border-color: #000;
|
||
}
|
||
|
||
.payment-option :deep(.devui-radio-label) {
|
||
flex-grow: 1;
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
padding-left: 10px;
|
||
}
|
||
|
||
/* 银行卡图标组 */
|
||
.card-icons {
|
||
display: flex;
|
||
gap: 4px;
|
||
align-items: center;
|
||
}
|
||
|
||
/* 银行卡具体颜色 */
|
||
.visa-icon { background-color: #1a1f71; content: "V"; }
|
||
.master-icon { background-color: #ff5f00; content: "M"; }
|
||
.amex-icon { background-color: #007bc1; content: "A"; }
|
||
|
||
.card-input-placeholder {
|
||
height: 44px;
|
||
background-color: #f7f7f7;
|
||
border: 1px solid #eee;
|
||
border-radius: 4px;
|
||
margin: 15px 0 0 0;
|
||
display: flex;
|
||
align-items: center;
|
||
padding-left: 15px;
|
||
font-size: 14px;
|
||
color: #999;
|
||
}
|
||
|
||
/* 底部文本和按钮 */
|
||
.save-info-text {
|
||
font-size: 12px;
|
||
color: #666;
|
||
margin-bottom: 25px;
|
||
}
|
||
|
||
.start-trial-btn {
|
||
width: 100%;
|
||
height: 48px;
|
||
background-color: #000 !important;
|
||
color: #fff !important;
|
||
border-radius: 6px;
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
margin-bottom: 20px;
|
||
border: none !important;
|
||
}
|
||
|
||
.terms-text {
|
||
font-size: 10px;
|
||
color: #888;
|
||
text-align: center;
|
||
line-height: 1.4;
|
||
max-width: 400px;
|
||
margin: 0 auto 15px;
|
||
}
|
||
|
||
.powered-by {
|
||
font-size: 10px;
|
||
color: #aaa;
|
||
text-align: center;
|
||
}
|
||
|
||
.stripe-link {
|
||
font-weight: bold;
|
||
color: #666;
|
||
}
|
||
|
||
::v-deep(.devui-radio__label) {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-left: 16px;
|
||
img {
|
||
height: 16px;
|
||
text-align: center;
|
||
width: 24px;
|
||
margin-inline-end:8px;
|
||
border-radius: 2px;
|
||
max-width: 24px;
|
||
}
|
||
.wechart-icon {
|
||
width: 16px;
|
||
margin-right: 12px;
|
||
}
|
||
}
|
||
</style>
|