xwl2023/Yi.Framework
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 产品弹窗优化

Browse Source
This commit is contained in:
Gsh
2026-01-09 17:06:18 +08:00
parent 1027006e63
commit 551122de10
6 changed files with 1875 additions and 564 deletions
Download Patch File Download Diff File Expand all files Collapse all files

105
Yi.Ai.Vue3/src/components/ProductPackage/ActivationGuide.vue Normal file
View File

@@ -0,0 +1,105 @@
<script setup lang="ts">
const emit = defineEmits(['close']);
function goToActivation() {
emit('close');
window.location.href = '/console/activation';
}
</script>
<template>
<div class="activation-guide-container">
<div class="activation-content">
<div class="guide-icon">
🎁
</div>
<h3 class="guide-title">
激活码兑换
</h3>
<p class="guide-desc">
如果您持有意心AI的会员激活码或Token兑换码，<br>请点击下方按钮前往控制台进行兑换。
</p>
<el-button
type="primary"
size="large"
class="redeem-jump-btn"
round
@click="goToActivation"
>
前往兑换中心
</el-button>
<div class="guide-tips">
<p>💡 兑换成功后权益将立即生效</p>
</div>
</div>
</div>
</template>
<style scoped lang="scss">
.activation-guide-container {
padding: 40px 20px;
display: flex;
justify-content: center;
align-items: center;
min-height: 400px;
background: linear-gradient(to bottom, #fff, #fdfdfd);
border-radius: 8px;
.activation-content {
text-align: center;
max-width: 400px;
.guide-icon {
font-size: 64px;
margin-bottom: 24px;
animation: float-icon 3s ease-in-out infinite;
}
.guide-title {
font-size: 24px;
font-weight: 800;
color: #2c3e50;
margin-bottom: 16px;
}
.guide-desc {
color: #606266;
line-height: 1.6;
margin-bottom: 32px;
font-size: 15px;
}
.redeem-jump-btn {
width: 200px;
height: 48px;
font-size: 16px;
font-weight: bold;
letter-spacing: 1px;
background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);
border: none;
box-shadow: 0 4px 12px rgba(255, 117, 140, 0.3);
transition: all 0.3s;
&:hover {
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(255, 117, 140, 0.4);
}
}
.guide-tips {
margin-top: 24px;
font-size: 13px;
color: #909399;
display: flex;
justify-content: center;
gap: 8px;
}
}
}
@keyframes float-icon {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}
</style>

357
Yi.Ai.Vue3/src/components/ProductPackage/NewbieGuide.vue Normal file
View File

@@ -0,0 +1,357 @@
<script setup lang="ts">
import { ElMessage } from 'element-plus';
import { contactConfig, taobaoConfig } from '@/config/constants.ts';
// 复制淘口令
function copyTaobaoCode() {
navigator.clipboard.writeText(taobaoConfig.code).then(() => {
ElMessage.success('淘口令已复制,打开手机淘宝即可购买');
}).catch(() => {
ElMessage.error('复制失败，请手动复制');
});
}
// 跳转淘宝
function goToTaobao() {
window.open(taobaoConfig.link, '_blank');
}
</script>
<template>
<div class="newbie-guide-container">
<div class="newbie-content">
<div class="newbie-header">
<div class="header-icon">
🎉
</div>
<h3 class="header-title">
新人特惠组合包
</h3>
<p class="header-subtitle">
超值优惠，仅限首次购买用户
</p>
</div>
<div class="newbie-body">
<!-- 购买方式卡片 -->
<div class="purchase-card">
<div class="card-row">
<div class="card-col">
<div class="method-label">
方法一
</div>
<el-button
type="primary"
size="small"
@click="goToTaobao"
>
<el-icon><i-ep-link /></el-icon>
淘宝链接
</el-button>
</div>
<div class="card-col">
<div class="method-label">
方法二
</div>
<el-button
type="success"
size="small"
@click="copyTaobaoCode"
>
<el-icon><i-ep-document-copy /></el-icon>
复制淘口令
</el-button>
</div>
</div>
</div>
<!-- 淘口令展示 -->
<div class="taobao-code-box">
<div class="code-label">
淘口令
</div>
<div class="code-text">
{{ taobaoConfig.code }}
</div>
</div>
<!-- 温馨提示 -->
<div class="tips-box">
<p class="tips-title">
<el-icon><i-ep-info-filled /></el-icon> 温馨提示
</p>
<p class="tips-text">
新人特惠仅限首次购买 · 购买后联系客服激活
</p>
<p class="tips-text">
客服微信：{{ contactConfig.wechatId }}
</p>
</div>
</div>
</div>
</div>
</template>
<style scoped lang="scss">
.newbie-guide-container {
padding: 20px 16px;
display: flex;
justify-content: center;
align-items: center;
min-height: 300px;
background: linear-gradient(to bottom, #fff, #fdfdfd);
border-radius: 8px;
.newbie-content {
text-align: center;
//max-width: 450px;
width: 100%;
.newbie-header {
margin-bottom: 20px;
padding: 16px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-radius: 10px;
color: white;
.header-icon {
font-size: 32px;
margin-bottom: 6px;
}
.header-title {
font-size: 20px;
font-weight: 700;
margin: 0 0 6px 0;
}
.header-subtitle {
font-size: 13px;
margin: 0;
opacity: 0.95;
}
}
.newbie-body {
display: flex;
flex-direction: column;
gap: 14px;
.purchase-card {
background: #f7f8fa;
border-radius: 10px;
padding: 16px;
border: 2px solid #e8ecf0;
.card-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
.card-col {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
.method-label {
font-size: 13px;
font-weight: 600;
color: #606266;
}
.el-button {
width: 100%;
}
}
}
}
.taobao-code-box {
background: linear-gradient(135deg, #f0f4ff 0%, #e8f0fe 100%);
border-radius: 8px;
padding: 14px;
border: 2px dashed #bae6fd;
.code-label {
font-size: 12px;
color: #0369a1;
font-weight: 600;
margin-bottom: 8px;
}
.code-text {
font-size: 11px;
color: #667eea;
font-family: 'Courier New', monospace;
line-height: 1.5;
word-break: break-all;
background: white;
padding: 8px;
border-radius: 6px;
text-align: left;
}
}
.tips-box {
background: #f0f9ff;
border: 1px solid #bae6fd;
border-radius: 8px;
padding: 14px;
text-align: left;
.tips-title {
margin: 0 0 10px 0;
font-size: 13px;
font-weight: 600;
color: #0369a1;
display: flex;
align-items: center;
gap: 6px;
.el-icon {
font-size: 16px;
}
}
.tips-text {
margin: 4px 0;
font-size: 12px;
color: #0c4a6e;
line-height: 1.5;
}
}
}
}
}
/* 移动端优化 */
@media (max-width: 768px) {
.newbie-guide-container {
padding: 16px 12px;
min-height: auto;
.newbie-content {
max-width: 100%;
.newbie-header {
padding: 16px;
margin-bottom: 16px;
border-radius: 8px;
.header-icon {
font-size: 28px;
margin-bottom: 6px;
}
.header-title {
font-size: 18px;
margin-bottom: 6px;
}
.header-subtitle {
font-size: 13px;
}
}
.newbie-body {
gap: 12px;
.purchase-card {
padding: 14px;
border-radius: 8px;
.card-row {
grid-template-columns: 1fr;
gap: 10px;
.card-col {
.method-label {
font-size: 12px;
}
.el-button {
font-size: 13px;
}
}
}
}
.taobao-code-box {
padding: 12px;
.code-label {
font-size: 11px;
}
.code-text {
font-size: 10px;
padding: 6px;
line-height: 1.4;
}
}
.tips-box {
padding: 12px;
.tips-title {
font-size: 12px;
margin-bottom: 8px;
.el-icon {
font-size: 14px;
}
}
.tips-text {
font-size: 11px;
}
}
}
}
}
}
/* 小屏手机进一步优化 */
@media (max-width: 480px) {
.newbie-guide-container {
padding: 12px 8px;
.newbie-content {
.newbie-header {
padding: 12px;
.header-icon {
font-size: 24px;
}
.header-title {
font-size: 16px;
}
.header-subtitle {
font-size: 12px;
}
}
.newbie-body {
.purchase-card {
padding: 12px;
}
.taobao-code-box {
padding: 10px;
.code-text {
font-size: 9px;
}
}
.tips-box {
padding: 10px;
}
}
}
}
}
</style>

1387
Yi.Ai.Vue3/src/components/ProductPackage/PackageTab.vue Normal file
View File

File diff suppressed because it is too large Load Diff

586
Yi.Ai.Vue3/src/components/ProductPackage/index.vue
View File

@@ -1,14 +1,14 @@
<script setup lang="ts">
import type { GoodsItem } from '@/api/pay';
import { CircleCheck, Loading } from '@element-plus/icons-vue';
import { ElMessage } from 'element-plus';
import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue';
import { createOrder, getOrderStatus } from '@/api';
import { getGoodsList, GoodsCategoryType } from '@/api/pay';
import ProductPage from '@/pages/products/index.vue';
import { useUserStore } from '@/stores';
import { showContactUs } from '@/utils/contact-us.ts';
import { contactConfig, promotionConfig, taobaoConfig } from '@/config/constants.ts';
import NewbieGuide from './NewbieGuide.vue';
import ActivationGuide from './ActivationGuide.vue';
import PackageTab from './PackageTab.vue';
const emit = defineEmits(['close']);
@@ -38,31 +38,6 @@ const packagesData = ref<{
const userStore = useUserStore();
// 复制淘口令
function copyTaobaoCode() {
navigator.clipboard.writeText(taobaoConfig.code).then(() => {
ElMessage.success('淘口令已复制，打开手机淘宝即可购买');
}).catch(() => {
ElMessage.error('复制失败，请手动复制');
});
}
// 跳转淘宝
function goToTaobao() {
window.open(taobaoConfig.link, '_blank');
}
// 跳转模型库
function goToModelLibrary() {
close();
window.location.href = '/model-library';
}
// 联系客服
function contactService() {
showContactUs({ scenario: 'regular' });
}
const visible = ref(true);
const activeTab = ref('member');
const selectedId = ref<number | null>(null);
@@ -421,545 +396,28 @@ function goToActivation() {
</div>
<!-- 新人特惠页面 -->
<div v-if="activeTab === 'newbie'" class="newbie-guide-container">
<div class="newbie-content">
<div class="newbie-header">
<div class="header-icon">🎉</div>
<h3 class="header-title">新人特惠组合包</h3>
<p class="header-subtitle">超值优惠，仅限首次购买用户</p>
</div>
<div class="newbie-body">
<!-- 购买方式卡片 -->
<div class="purchase-card">
<div class="card-row">
<div class="card-col">
<div class="method-label">方法一</div>
<el-button
type="primary"
size="small"
@click="goToTaobao"
>
<el-icon><i-ep-link /></el-icon>
淘宝链接
</el-button>
</div>
<div class="card-col">
<div class="method-label">方法二</div>
<el-button
type="success"
size="small"
@click="copyTaobaoCode"
>
<el-icon><i-ep-document-copy /></el-icon>
复制淘口令
</el-button>
</div>
</div>
</div>
<!-- 淘口令展示 -->
<div class="taobao-code-box">
<div class="code-label">淘口令</div>
<div class="code-text">{{ taobaoConfig.code }}</div>
</div>
<!-- 温馨提示 -->
<div class="tips-box">
<p class="tips-title"><el-icon><i-ep-info-filled /></el-icon> 温馨提示</p>
<p class="tips-text">新人特惠仅限首次购买 · 购买后联系客服激活</p>
<p class="tips-text">客服微信：{{ contactConfig.wechatId }}</p>
</div>
</div>
</div>
</div>
<NewbieGuide v-if="activeTab === 'newbie'" />
<!-- 激活码引导页 -->
<div v-if="activeTab === 'activation'" class="activation-guide-container">
<div class="activation-content">
<div class="guide-icon">
🎁
</div>
<h3 class="guide-title">
激活码兑换
</h3>
<p class="guide-desc">
如果您持有意心AI的会员激活码或Token兑换码，<br>请点击下方按钮前往控制台进行兑换。
</p>
<el-button
type="primary"
size="large"
class="redeem-jump-btn"
round
@click="goToActivation"
>
前往兑换中心
</el-button>
<ActivationGuide v-else-if="activeTab === 'activation'" @close="close" />
<div class="guide-tips">
<p>💡 兑换成功后权益将立即生效</p>
</div>
</div>
</div>
<!-- 移动端布局 -->
<div v-else-if="isMobile" class="mobile-layout">
<!-- 商品加载状态（无修改） -->
<div v-if="isLoadingGoods" class="loading-container">
<el-icon class="is-loading" :size="40">
<Loading />
</el-icon>
<p>加载商品中...</p>
</div>
<!-- 套餐卡片列表（核心修改：Token套餐价格展示） -->
<div v-else-if="currentPackages.length > 0" class="package-list">
<div
v-for="pkg in currentPackages" :key="pkg.id" class="package-card"
:class="{ selected: pkg.id === selectedId }" @click="selectPackage(pkg)"
>
<!-- 标签（无修改） -->
<div v-if="pkg.discount" class="discount-tag">
{{ pkg.discount }}
</div>
<div v-if="pkg.tag" class="tag">
{{ pkg.tag }}
</div>
<!-- 套餐信息（无修改） -->
<div class="package-info">
<div class="package-name">
{{ pkg.name }}
</div>
<div class="package-desc">
{{ pkg.desc }}
</div>
</div>
<!-- 价格区域（核心调整：Token套餐突出平台优惠价） -->
<div class="package-price">
<!-- Token套餐：尊享包价格展示优化 -->
<template v-if="activeTab === 'token'">
<!-- 1. 官方参考价（弱化展示） -->
<div v-if="pkg.perMonth && pkg.perMonth > (pkg.originalPrice || pkg.price)" class="official-price-section">
<div class="price-label-row">
<span class="label-text">❌ 官方参考价</span>
</div>
<div class="official-price">
¥{{ pkg.perMonth.toFixed(2) }}
</div>
</div>
<!-- 2. 平台优惠价（主价格：放大字号+加重颜色） -->
<div v-if="pkg.originalPrice" class="platform-price-section">
<div class="price-label-row">
<span class="label-text main-label">⭐ 意心平台优惠价</span>
</div>
<div class="platform-price main-price">
¥{{ pkg.originalPrice.toFixed(2) }}
</div>
</div>
<!-- 3. 个人优惠券（辅助信息） -->
<div v-if="pkg.discountAmount && pkg.discountAmount > 0" class="coupon-card">
<div class="coupon-header">
<span class="coupon-icon">🎁</span>
<span class="coupon-title">您的个人尊享优惠券</span>
</div>
<div class="coupon-amount">
-¥{{ pkg.discountAmount.toFixed(2) }}
</div>
</div>
<!-- 4. 最终专属价格（弱化：缩小字号+浅色调，非核心视觉） -->
<div v-if="false" class="final-price-section">
<div class="price-label-row">
<span class="label-text light-label">👑 您的最终专属价（支付价）</span>
</div>
<div class="final-price-value light-price">
<span class="price-symbol">¥</span>
<span class="price-number">{{ pkg.price.toFixed(2) }}</span>
</div>
</div>
<!-- 5. 总优惠提示（无修改） -->
<div v-if="pkg.perMonth && pkg.perMonth > pkg.price" class="total-discount-bar">
<span class="bar-icon">🎉</span>
<span class="bar-text">相比官方价已为您节省 ¥{{ (pkg.perMonth - pkg.price).toFixed(2) }}</span>
</div>
</template>
<!-- 会员套餐：保持原有逻辑（无修改） -->
<template v-else>
<div class="current-price-section">
<span class="price-label">会员价</span>
<div class="price-row">
<span class="price">¥{{ pkg.price }}</span>
<span v-if="pkg.perMonth" class="per-month">仅¥{{ pkg.perMonth }}/月</span>
</div>
</div>
<div v-if="pkg.discount" class="discount-info">
<el-icon class="discount-icon">
<CircleCheck />
</el-icon>
<span class="discount-text">{{ pkg.discount }}</span>
</div>
</template>
</div>
</div>
</div>
<!-- 其他辅助信息（无修改） -->
<div v-if="activeTab === 'token'" class="recharge-tip-card">
<div class="tip-icon">
💝
</div>
<div class="tip-content">
<div class="tip-title">
累计充值优惠
</div>
<div class="tip-desc">
充值越多，优惠越多，长期使用更划算
</div>
</div>
</div>
<div style="display: flex;justify-content: space-between;align-items: center;margin-top: 15px;padding: 16px;background: linear-gradient(135deg, #fef3c7 0%, #ffedd5 100%);border-radius: 8px;border: 1px solid #fbbf24;">
<div style="flex: 1;">
<p style="color: #f97316;font-weight: 800;margin: 0 0 10px 0;">
{{ promotionConfig.rechargeDiscount }}
</p>
<p style="margin: 0 0 10px 0;color: #78350f;">
{{ promotionConfig.vipServiceTip }}
</p>
<el-button
type="success"
size="small"
@click="contactService"
>
<el-icon><i-ep-service /></el-icon>
联系客服
</el-button>
</div>
</div>
<!-- 权益预览（无修改） -->
<div class="benefits-preview max-h-200px overflow-y-auto">
<div class="section-title">
专属权益
</div>
<ul class="benefits-list">
<li v-for="(b, index) in currentBenefits" :key="index" class="benefit-item">
<span class="dot"><el-icon><CircleCheck /></el-icon></span>
<span>
<span class="benefit-name">{{ b.name }}</span>
<span v-if="b.value">：{{ b.value }}</span>
</span>
</li>
</ul>
<!-- 查看模型库按钮 -->
<div class="model-library-section">
<el-divider />
<div class="model-library-card">
<div class="card-icon">
<el-icon :size="32"><i-ep-box /></el-icon>
</div>
<div class="card-content">
<h4 class="card-title">查看支持的模型</h4>
<p class="card-desc">查看意心AI支持的所有模型列表及详细信息</p>
</div>
<el-button
type="primary"
class="goto-btn"
@click="goToModelLibrary"
>
前往模型库
<el-icon class="ml-1"><i-ep-arrow-right /></el-icon>
</el-button>
</div>
</div>
</div>
<!-- 支付区域（无修改） -->
<div v-if="activeTab !== 'newbie' && activeTab !== 'activation'" class="payment-area">
<div v-if="false" class="agreement-text">
登录和注册都代表同意YiXinAI的会员协议
</div>
<div class="payment-info">
<div class="actual-payment">
<span>实际支付：</span>
<span class="price">¥{{ selectedPrice || 0 }}</span>
</div>
<el-button text type="primary" class="view-details-btn" @click="toggleDetails">
了解更多
</el-button>
<el-button
v-if="userStore.userInfo"
type="primary" :disabled="!selectedId || isLoading" :loading="isLoading" class="pay-button"
@click="pay"
>
立即支付
</el-button>
<el-button
v-else
type="primary" class="pay-button"
@click="handleClickLogin"
>
立即登录/注册
</el-button>
</div>
<div class="note-text">
可叠加购买次数，过期时间以最后订单为准。<br>
最终解释权归YiXinAI所有。
</div>
</div>
</div>
<!-- 桌面端布局（与移动端逻辑一致，仅适配样式） -->
<div v-else class="flex gap-6 desktop-layout">
<!-- 商品加载状态（无修改） -->
<div v-if="isLoadingGoods" class="loading-container-desktop">
<el-icon class="is-loading" :size="50">
<Loading />
</el-icon>
<p>加载商品中...</p>
</div>
<!-- 左栏 套餐卡片 + 支付（核心修改：Token套餐价格展示） -->
<div v-else class="w-[60%] flex flex-col justify-between">
<div class="flex flex-wrap gap-4 package-cards-container">
<div
v-for="pkg in currentPackages" :key="pkg.id" class="package-card"
:class="{ selected: pkg.id === selectedId }" @click="selectPackage(pkg)"
>
<!-- 标签（无修改） -->
<div v-if="pkg.tag" class="tag">
{{ pkg.tag }}
</div>
<!-- 套餐信息（无修改） -->
<div class="package-info">
<div class="package-name">
{{ pkg.name }}
</div>
<div class="package-desc">
{{ pkg.desc }}
</div>
</div>
<!-- 价格区域（桌面端同移动端逻辑：突出平台优惠价） -->
<div class="package-price">
<template v-if="activeTab === 'token'">
<!-- 1. 官方参考价（弱化） -->
<div v-if="pkg.perMonth && pkg.perMonth > (pkg.originalPrice || pkg.price)" class="official-price-section">
<div class="price-label-row">
<span class="label-text">❌ 官方参考价：</span>
<span class="label-text-number">¥{{ pkg.perMonth.toFixed(2) }} </span>
</div>
<!-- <div class="official-price"> -->
<!-- ¥{{ pkg.perMonth.toFixed(2) }} -->
<!-- </div> -->
</div>
<!-- 2. 平台优惠价（主价格：放大+加重） -->
<div v-if="pkg.originalPrice" class="platform-price-section">
<div class="price-label-row">
<span class="label-text main-label">⭐ 意心平台优惠价</span>
</div>
<div class="platform-price main-price">
¥{{ pkg.originalPrice.toFixed(2) }}
</div>
</div>
<!-- 3. 个人优惠券（辅助） -->
<div v-if="pkg.discountAmount && pkg.discountAmount > 0" class="coupon-card">
<div class="coupon-header">
<span class="coupon-icon">🎁</span>
<span class="coupon-title">您的个人尊享优惠券</span>
</div>
<div class="coupon-amount">
-¥{{ pkg.discountAmount.toFixed(2) }}
</div>
</div>
<!-- 4. 最终专属价（弱化） -->
<div v-if="false" class="final-price-section">
<div class="price-label-row">
<span class="label-text light-label">👑 您的最终专属价（支付价）</span>
</div>
<div class="final-price-value light-price">
<span class="price-symbol">¥</span>
<span class="price-number">{{ pkg.price.toFixed(2) }}</span>
</div>
</div>
<!-- 5. 总优惠提示 -->
<!-- <div v-if="pkg.perMonth && pkg.perMonth > pkg.price" class="total-discount-bar"> -->
<!-- <span class="bar-icon">🎉</span> -->
<!-- <span class="bar-text">相比官方价已为您节省 ¥{{ (pkg.perMonth - pkg.price).toFixed(2) }}</span> -->
<!-- </div> -->
</template>
<!-- 会员套餐（无修改） -->
<template v-else>
<div class="current-price-section">
<span class="price-label">会员价</span>
<div class="price-row">
<span class="price">¥{{ pkg.price }}</span>
<span v-if="pkg.perMonth" class="per-month">仅¥{{ pkg.perMonth }}/月</span>
</div>
</div>
<div v-if="pkg.discount" class="discount-info">
<el-icon class="discount-icon">
<CircleCheck />
</el-icon>
<span class="discount-text">{{ pkg.discount }}</span>
</div>
</template>
</div>
</div>
</div>
<!-- 其他辅助信息（无修改） -->
<div v-if="activeTab === 'token'" class="recharge-tip-card">
<div class="tip-icon">
💝
</div>
<div class="tip-content">
<div class="tip-title">
累计充值优惠
</div>
<div class="tip-desc">
{{ selectPackageObject?.discount }}
</div>
</div>
</div>
<div style="margin-top: 15px;padding: 16px;background: linear-gradient(135deg, #fef3c7 0%, #ffedd5 100%);border-radius: 8px;border: 1px solid #fbbf24;">
<p style="color: #f97316;font-weight: 800;margin: 0 0 10px 0;">
{{ promotionConfig.rechargeDiscount }}
</p>
<p style="margin: 0 0 10px 0;color: #78350f;">
{{ promotionConfig.vipServiceTip }}
</p>
<el-button
type="success"
size="small"
block
@click="contactService"
>
<el-icon><i-ep-service /></el-icon>
联系客服
</el-button>
</div>
<!-- 支付按钮（无修改） -->
<div class="payment-section">
<div v-if="false" class="agreement-text">
登录和注册都代表同意YiXinAI的会员协议
</div>
<div class="payment-action">
<div class="actual-payment">
<span>实际支付：</span>
<span class="price">¥{{ selectedPrice || 0 }}</span>
</div>
<div>
<el-button class="pay-button" text type="primary" @click="toggleDetails">
了解更多
</el-button>
<el-button
v-if="userStore.userInfo"
type="primary" size="large" :disabled="!selectedId || isLoading" :loading="isLoading"
class="pay-button" @click="pay"
>
立即支付
</el-button>
<el-button
v-else
type="primary" size="large"
class="pay-button" @click="handleClickLogin"
>
立即登录/注册
</el-button>
</div>
</div>
<div class="note-text">
可叠加购买次数，过期时间以最后订单为准。<br>
最终解释权归YiXinAI所有。
</div>
</div>
</div>
<!-- 右栏 套餐权益（无修改） -->
<div class="w-[40%] flex flex-col justify-between right-panel max-h-400px overflow-y-auto">
<div>
<div v-if="activeTab === 'member'">
<div class="section-title">
会员权益
</div>
<ul class="benefits-list ">
<li v-for="(b, index) in currentBenefits" :key="index" class="benefit-item ">
<span class="dot"><el-icon><CircleCheck /></el-icon></span>
<span>
<span class="benefit-name">{{ b.name }}</span>
<span v-if="b.value">：{{ b.value }}</span>
</span>
</li>
</ul>
</div>
<div v-if="activeTab === 'token'">
<div class="section-title">
尊享Token包权益
</div>
<ul class="benefits-list ">
<li v-for="(b, index) in benefitsData2.qy" :key="index" class="benefit-item ">
<span class="dot"><el-icon><CircleCheck /></el-icon></span>
<span>
<span class="benefit-name">{{ b.name }}</span>
<span v-if="b.value">：{{ b.value }}</span>
</span>
</li>
</ul>
<br>
<div class="section-title">
尊享Token包用途
</div>
<ul class="benefits-list ">
<li v-for="(b, index) in benefitsData2.yt" :key="index" class="benefit-item ">
<span class="dot"><el-icon><CircleCheck /></el-icon></span>
<span>
<span class="benefit-name">{{ b.name }}</span>
<span v-if="b.value">：{{ b.value }}</span>
</span>
</li>
</ul>
</div>
<div v-if="activeTab === 'member'" class="extra-description">
<!-- 查看模型库按钮 -->
<div class="model-library-section-mobile">
<el-divider />
<div class="model-library-card-mobile">
<div class="card-header-mobile">
<el-icon :size="24"><i-ep-box /></el-icon>
<h4 class="card-title-mobile">查看支持的模型</h4>
</div>
<p class="card-desc-mobile">查看意心AI支持的所有模型列表及详细信息</p>
<el-button
type="primary"
class="goto-btn-mobile"
block
@click="goToModelLibrary"
>
前往模型库
<el-icon class="ml-1"><i-ep-arrow-right /></el-icon>
</el-button>
</div>
</div>
</div>
</div>
<div class="view-details" />
</div>
</div>
<!-- 会员套餐和Token包 -->
<PackageTab
v-else
:package-type="activeTab as 'member' | 'token'"
:packages="currentPackages"
:selected-id="selectedId"
:selected-price="selectedPrice"
:is-loading="isLoading"
:is-loading-goods="isLoadingGoods"
:benefits="activeTab === 'token' ? benefitsData2.qy : currentBenefits"
:benefits-extra="activeTab === 'token' ? benefitsData2.yt : undefined"
:is-mobile="isMobile"
@select-package="selectPackage"
@pay="pay"
@view-details="toggleDetails"
@login="handleClickLogin"
/>
</div>
</el-dialog>
</template>

3
Yi.Ai.Vue3/types/components.d.ts vendored
View File

@@ -10,6 +10,7 @@ declare module 'vue' {
export interface GlobalComponents {
AccountPassword: typeof import('./../src/components/LoginDialog/components/FormLogin/AccountPassword.vue')['default']
ActivationCode: typeof import('./../src/components/userPersonalCenter/components/ActivationCode.vue')['default']
ActivationGuide: typeof import('./../src/components/ProductPackage/ActivationGuide.vue')['default']
APIKeyManagement: typeof import('./../src/components/userPersonalCenter/components/APIKeyManagement.vue')['default']
CardFlipActivity: typeof import('./../src/components/userPersonalCenter/components/CardFlipActivity.vue')['default']
ContactUs: typeof import('./../src/components/ContactUs/index.vue')['default']
@@ -66,6 +67,8 @@ declare module 'vue' {
ModeList: typeof import('./../src/components/modeList/index.vue')['default']
ModelSelect: typeof import('./../src/components/ModelSelect/index.vue')['default']
NavDialog: typeof import('./../src/components/userPersonalCenter/NavDialog.vue')['default']
NewbieGuide: typeof import('./../src/components/ProductPackage/NewbieGuide.vue')['default']
PackageTab: typeof import('./../src/components/ProductPackage/PackageTab.vue')['default']
Popover: typeof import('./../src/components/Popover/index.vue')['default']
PremiumPackageInfo: typeof import('./../src/components/userPersonalCenter/components/PremiumPackageInfo.vue')['default']
PremiumService: typeof import('./../src/components/userPersonalCenter/components/PremiumService.vue')['default']

1
Yi.Ai.Vue3/types/import_meta.d.ts vendored
View File

@@ -7,6 +7,7 @@ interface ImportMetaEnv {
readonly VITE_WEB_BASE_API: string;
readonly VITE_API_URL: string;
readonly VITE_FILE_UPLOAD_API: string;
readonly VITE_BUILD_COMPRESS: string;
readonly VITE_SSO_SEVER_URL: string;
readonly VITE_APP_VERSION: string;
}