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:26:10 +08:00
parent 551122de10
commit 73f5d43ada
3 changed files with 242 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files

103
Yi.Ai.Vue3/src/components/ProductPackage/NewbieGuide.vue
View File

@@ -75,6 +75,26 @@ function goToTaobao() {
</div>
</div>
<!-- 或者分割线 -->
<div v-if="false" class="divider-section">
<span class="divider-line" />
<span class="divider-text">或者</span>
<span class="divider-line" />
</div>
<!-- 二维码区域 -->
<div v-if="false" class="qr-code-section">
<div class="qr-code-title">
扫码购买
</div>
<div class="qr-code-box">
<img :src="taobaoConfig.taobaoQr" alt="淘宝二维码" class="qr-code-image">
<p class="qr-code-tip">
打开手机淘宝扫一扫
</p>
</div>
</div>
<!-- 温馨提示 -->
<div class="tips-box">
<p class="tips-title">
@@ -137,6 +157,68 @@ function goToTaobao() {
flex-direction: column;
gap: 14px;
// 二维码区域
.qr-code-section {
display: flex;
flex-direction: column;
align-items: center;
padding: 20px;
background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
border-radius: 12px;
border: 2px solid #bae6fd;
.qr-code-title {
font-size: 16px;
font-weight: 700;
color: #0369a1;
margin-bottom: 16px;
}
.qr-code-box {
display: flex;
flex-direction: column;
align-items: center;
background: white;
padding: 16px;
border-radius: 10px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
.qr-code-image {
width: 180px;
height: 180px;
object-fit: contain;
border-radius: 8px;
}
.qr-code-tip {
margin: 12px 0 0 0;
font-size: 13px;
color: #0369a1;
font-weight: 600;
}
}
}
// 分割线
.divider-section {
display: flex;
align-items: center;
gap: 12px;
margin: 4px 0;
.divider-line {
flex: 1;
height: 1px;
background: linear-gradient(to right, transparent, #d1d5db, transparent);
}
.divider-text {
font-size: 13px;
color: #9ca3af;
font-weight: 500;
}
}
.purchase-card {
background: #f7f8fa;
border-radius: 10px;
@@ -257,6 +339,27 @@ function goToTaobao() {
.newbie-body {
gap: 12px;
.qr-code-section {
padding: 16px;
.qr-code-title {
font-size: 15px;
}
.qr-code-box {
padding: 12px;
.qr-code-image {
width: 160px;
height: 160px;
}
.qr-code-tip {
font-size: 12px;
}
}
}
.purchase-card {
padding: 14px;
border-radius: 8px;

216
Yi.Ai.Vue3/src/components/ProductPackage/PackageTab.vue
View File

@@ -1,9 +1,9 @@
<script setup lang="ts">
import { CircleCheck, Loading } from '@element-plus/icons-vue';
import { computed } from 'vue';
import { promotionConfig } from '@/config/constants.ts';
import { useUserStore } from '@/stores';
import { showContactUs } from '@/utils/contact-us.ts';
import { promotionConfig } from '@/config/constants.ts';
interface PackageItem {
id: number;
@@ -171,43 +171,45 @@ const selectedPackage = computed(() => {
</div>
</div>
<!-- Token包累计充值优惠提示 -->
<div v-if="packageType === '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 class="contact-service-card">
<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">
<!-- Token包累计充值优惠提示 -->
<div v-if="packageType === '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>
<br>
<!-- 联系客服卡片 -->
<div class="contact-service-card">
<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>
<br>
<div class="section-title">
专属权益
</div>
@@ -222,15 +224,21 @@ const selectedPackage = computed(() => {
</ul>
<!-- 会员套餐显示模型库入口 -->
<div v-if="packageType === 'member'" class="model-library-section">
<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>
<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>
<h4 class="card-title">
查看支持的模型
</h4>
<p class="card-desc">
查看意心AI支持的所有模型列表及详细信息
</p>
</div>
<el-button
type="primary"
@@ -238,7 +246,9 @@ const selectedPackage = computed(() => {
@click="goToModelLibrary"
>
前往模型库
<el-icon class="ml-1"><i-ep-arrow-right /></el-icon>
<el-icon class="ml-1">
<i-ep-arrow-right />
</el-icon>
</el-button>
</div>
</div>
@@ -479,10 +489,16 @@ const selectedPackage = computed(() => {
<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>
<el-icon :size="24">
<i-ep-box />
</el-icon>
<h4 class="card-title-mobile">
查看支持的模型
</h4>
</div>
<p class="card-desc-mobile">查看意心AI支持的所有模型列表及详细信息</p>
<p class="card-desc-mobile">
查看意心AI支持的所有模型列表及详细信息
</p>
<el-button
type="primary"
class="goto-btn-mobile"
@@ -490,7 +506,9 @@ const selectedPackage = computed(() => {
@click="goToModelLibrary"
>
前往模型库
<el-icon class="ml-1"><i-ep-arrow-right /></el-icon>
<el-icon class="ml-1">
<i-ep-arrow-right />
</el-icon>
</el-button>
</div>
</div>
@@ -537,8 +555,8 @@ const selectedPackage = computed(() => {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 15px;
padding: 16px;
margin-top: 0;
padding: 12px;
background: linear-gradient(135deg, #fef3c7 0%, #ffedd5 100%);
border-radius: 8px;
border: 1px solid #fbbf24;
@@ -548,19 +566,41 @@ const selectedPackage = computed(() => {
.mobile-layout {
display: flex;
flex-direction: column;
gap: 24px;
gap: 16px;
.package-list {
display: grid;
grid-template-columns: 1fr;
gap: 12px;
max-height: 400px;
overflow-y: auto;
padding-right: 4px;
/* 优化滚动条样式 */
&::-webkit-scrollbar {
width: 4px;
}
&::-webkit-scrollbar-track {
background: #f1f5f9;
border-radius: 2px;
}
&::-webkit-scrollbar-thumb {
background: #cbd5e1;
border-radius: 2px;
&:hover {
background: #94a3b8;
}
}
}
.package-card {
position: relative;
border: 1px solid #e5e7eb;
border-radius: 8px;
padding: 16px;
padding: 12px;
transition: all 0.3s;
cursor: pointer;
@@ -779,29 +819,29 @@ const selectedPackage = computed(() => {
.recharge-tip-card {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 16px;
gap: 10px;
padding: 10px 12px;
background: linear-gradient(135deg, #fef3c7 0%, #ffedd5 100%);
border-radius: 8px;
border: 1px solid #fbbf24;
margin-top: 16px;
margin-top: 0;
.tip-icon {
font-size: 24px;
font-size: 22px;
}
.tip-content {
flex: 1;
.tip-title {
font-size: 14px;
font-size: 13px;
font-weight: 700;
color: #78350f;
margin-bottom: 4px;
margin-bottom: 3px;
}
.tip-desc {
font-size: 12px;
font-size: 11px;
color: #92400e;
line-height: 1.4;
}
@@ -811,7 +851,28 @@ const selectedPackage = computed(() => {
.benefits-preview {
background-color: #f9fafb;
border-radius: 8px;
padding: 16px;
padding: 12px;
max-height: 320px;
overflow-y: auto;
/* 优化滚动条样式 */
&::-webkit-scrollbar {
width: 4px;
}
&::-webkit-scrollbar-track {
background: #f1f5f9;
border-radius: 2px;
}
&::-webkit-scrollbar-thumb {
background: #cbd5e1;
border-radius: 2px;
&:hover {
background: #94a3b8;
}
}
.section-title {
font-weight: 600;
@@ -826,14 +887,16 @@ const selectedPackage = computed(() => {
.benefit-item {
display: flex;
align-items: flex-start;
margin-bottom: 8px;
font-size: 14px;
margin-bottom: 6px;
font-size: 13px;
color: #4b5563;
white-space: normal;
line-height: 1.4;
.dot {
color: #f97316;
margin-right: 8px;
margin-right: 6px;
margin-top: 2px;
}
.benefit-name {
@@ -843,15 +906,16 @@ const selectedPackage = computed(() => {
}
.model-library-section {
margin-top: 16px;
margin-top: 12px;
.model-library-card {
display: flex;
align-items: center;
gap: 16px;
padding: 16px;
flex-direction: column;
align-items: stretch;
gap: 10px;
padding: 12px;
background: linear-gradient(135deg, #f0f4ff 0%, #e8f0fe 100%);
border-radius: 12px;
border-radius: 10px;
border: 2px solid #bae6fd;
transition: all 0.3s;
@@ -862,29 +926,22 @@ const selectedPackage = computed(() => {
}
.card-icon {
display: flex;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
background: white;
border-radius: 12px;
color: #667eea;
flex-shrink: 0;
display: none;
}
.card-content {
flex: 1;
text-align: center;
.card-title {
margin: 0 0 4px 0;
font-size: 16px;
margin: 0 0 8px 0;
font-size: 15px;
font-weight: 700;
color: #1a1a1a;
}
.card-desc {
margin: 0;
margin: 0 0 12px 0;
font-size: 13px;
color: #606266;
line-height: 1.5;
@@ -894,6 +951,7 @@ const selectedPackage = computed(() => {
.goto-btn {
flex-shrink: 0;
font-weight: 600;
width: 100%;
.ml-1 {
margin-left: 4px;
@@ -949,8 +1007,8 @@ const selectedPackage = computed(() => {
.desktop-layout {
.package-cards-container {
max-height: 500px;
overflow-y: auto;
overflow-x: hidden;
//overflow-y: auto;
//overflow-x: hidden;
padding-right: 8px;
&::-webkit-scrollbar {

3
Yi.Ai.Vue3/src/config/constants.ts
View File

@@ -10,7 +10,6 @@ export const contactConfig = {
customerService: '/src/assets/images/wx.png', // 客服微信二维码
communityGroup: '/src/assets/images/wx-group-qr.jpg', // 交流群二维码
afterSalesGroup: '', // 售后群二维码
taobaoQr: '/src/assets/images/taobao-qr.png', // 淘宝店铺二维码
},
};
@@ -24,6 +23,8 @@ export const taobaoConfig = {
// 淘口令
code: '【淘宝】https://e.tb.cn/h.7RqUAtwFh8V5ywg?tk=m7KGUc6DoNQ HU293 「ClaudeCode/Codex/Gemini Ai聚合API服务/会员Token包/人工售后」\n'
+ '点击链接直接打开 或者 淘宝搜索直接打开',
taobaoQr: '/src/assets/images/taobao-qr.png', // 淘宝店铺二维码
};
/**