zhusenlin/Yi.Admin
1
0
Fork 0
mirror of https://gitee.com/ccnetcore/Yi synced 2026-04-13 20:56:36 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: 前端联系我们、购买等优化

Browse Source
This commit is contained in:
Gsh
2026-01-08 23:55:39 +08:00
parent 2544c01e9d
commit 1027006e63
38 changed files with 1578 additions and 2528 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -5,9 +5,10 @@ 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 SupportModelList from '@/components/userPersonalCenter/components/SupportModelList.vue';
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';
const emit = defineEmits(['close']);
@@ -37,6 +38,31 @@ 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);
@@ -141,6 +167,7 @@ function cleanupPayment() {
const tabs = [
{ key: 'member', label: '会员套餐' },
{ key: 'token', label: '尊享Token包' },
{ key: 'newbie', label: '新人特惠' },
{ key: 'activation', label: '激活码' },
];
@@ -381,18 +408,72 @@ function goToActivation() {
</el-button>
</div>
<!-- Tab 切换（无修改） -->
<div class="flex border-b mb-6 overflow-x-auto">
<!-- Tab 切换 -->
<div class="tabs-container">
<div
v-for="tab in tabs" :key="tab.key"
class="cursor-pointer px-5 py-2 -mb-px border-b-2 transition whitespace-nowrap"
:class="activeTab === tab.key ? 'border-orange-500 text-orange-500 font-semibold' : 'border-transparent text-gray-500 hover:text-orange-500'"
class="tab-item"
:class="{ 'tab-active': activeTab === tab.key }"
@click="activeTab = tab.key"
>
{{ tab.label }}
</div>
</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>
<!-- 激活码引导页 -->
<div v-if="activeTab === 'activation'" class="activation-guide-container">
<div class="activation-content">
@@ -543,19 +624,23 @@ function goToActivation() {
</div>
</div>
<div style="display: flex;justify-content: space-between;margin-top: 15px;">
<div>
<p style="color: #f97316;font-weight: 800">
全站任意充值，每累计充值10元永久优惠尊享包10元，最高可优惠50元
<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-top: 10px;">
充值后，加客服微信回复账号名，可专享vip售后服务
</p>
<p style="margin-top: 10px;">
客服微信号：chengzilaoge520 或扫描右侧二维码
<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><img style="height: 80px;width: 80px;" src="/src/assets/images/wx.png" alt=""></div>
</div>
<!-- 权益预览（无修改） -->
@@ -572,11 +657,31 @@ function goToActivation() {
</span>
</li>
</ul>
<SupportModelList />
<!-- 查看模型库按钮 -->
<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 class="payment-area">
<div v-if="activeTab !== 'newbie' && activeTab !== 'activation'" class="payment-area">
<div v-if="false" class="agreement-text">
登录和注册都代表同意YiXinAI的会员协议
</div>
@@ -622,7 +727,7 @@ function goToActivation() {
<!-- 左栏 套餐卡片 + 支付（核心修改：Token套餐价格展示） -->
<div v-else class="w-[60%] flex flex-col justify-between">
<div class="flex flex-wrap gap-4">
<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)"
@@ -730,20 +835,22 @@ function goToActivation() {
</div>
</div>
<div style="display: flex;justify-content: space-between;margin-top: 15px;">
<div>
<p style="color: #f97316;font-weight: 800">
全站任意充值，每累计充值10元永久优惠尊享包10元，最高可优惠50元
</p>
<p style="margin-top: 10px;">
充值后，加客服微信回复账号名，可专享vip售后服务
</p>
<p style="margin-top: 10px;">
客服微信号：chengzilaoge520 或扫描右侧二维码
</p>
</div>
<div><img style="height: 80px;width: 80px;" src="/src/assets/images/wx.png" alt=""></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>
<!-- 支付按钮（无修改） -->
@@ -827,8 +934,27 @@ function goToActivation() {
</li>
</ul>
</div>
<div v-if="activeTab === 'member'" class="extra-description ">
<SupportModelList />
<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" />
@@ -842,6 +968,45 @@ function goToActivation() {
.product-package-dialog {
.el-dialog__header { display: none; }
/* Tab 切换样式 */
.tabs-container {
display: flex;
border-bottom: 2px solid #e5e7eb;
margin-bottom: 24px;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
scrollbar-width: none; /* Firefox */
&::-webkit-scrollbar {
display: none; /* Chrome, Safari */
}
.tab-item {
flex-shrink: 0;
padding: 12px 20px;
cursor: pointer;
font-size: 15px;
font-weight: 500;
color: #6b7280;
border-bottom: 3px solid transparent;
margin-bottom: -2px;
transition: all 0.3s;
white-space: nowrap;
user-select: none;
&:hover {
color: #f97316;
}
&.tab-active {
color: #f97316;
font-weight: 600;
border-bottom-color: #f97316;
}
}
}
/* 详情页样式（无修改） */
.details-view {
height: 600px; overflow-y: auto; padding-right: 8px;
@@ -859,6 +1024,297 @@ function goToActivation() {
}
}
/* 新人特惠页面样式 - 紧凑版（匹配激活码页面风格） */
.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) {
/* Tab 移动端优化 */
.tabs-container {
margin-bottom: 16px;
padding-bottom: 2px;
gap: 4px;
justify-content: flex-start;
.tab-item {
padding: 10px 12px;
font-size: 13px;
min-width: fit-content;
}
}
/* 新人特惠移动端优化 */
.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) {
.tabs-container {
gap: 2px;
.tab-item {
padding: 8px 10px;
font-size: 12px;
min-width: fit-content;
}
}
.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;
}
}
}
}
}
/* 激活码引导页样式 */
.activation-guide-container {
padding: 40px 20px;
@@ -1296,6 +1752,67 @@ function goToActivation() {
font-weight: 500;
}
}
}
/* 模型库卡片样式 - 桌面端 */
.model-library-section {
margin-top: 16px;
.model-library-card {
display: flex;
align-items: center;
gap: 16px;
padding: 16px;
background: linear-gradient(135deg, #f0f4ff 0%, #e8f0fe 100%);
border-radius: 12px;
border: 2px solid #bae6fd;
transition: all 0.3s;
&:hover {
border-color: #667eea;
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15);
transform: translateY(-2px);
}
.card-icon {
display: flex;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
background: white;
border-radius: 12px;
color: #667eea;
flex-shrink: 0;
}
.card-content {
flex: 1;
.card-title {
margin: 0 0 4px 0;
font-size: 16px;
font-weight: 700;
color: #1a1a1a;
}
.card-desc {
margin: 0;
font-size: 13px;
color: #606266;
line-height: 1.5;
}
}
.goto-btn {
flex-shrink: 0;
font-weight: 600;
.ml-1 {
margin-left: 4px;
}
}
}
}
.view-details-btn {
@@ -1336,6 +1853,33 @@ function goToActivation() {
/* 桌面端样式 */
.desktop-layout {
/* 套餐卡片容器样式 - 限制高度并添加滚动 */
.package-cards-container {
max-height: 500px;
overflow-y: auto;
overflow-x: hidden;
padding-right: 8px;
/* 滚动条样式 */
&::-webkit-scrollbar {
width: 6px;
}
&::-webkit-scrollbar-track {
background: #f5f5f5;
border-radius: 3px;
}
&::-webkit-scrollbar-thumb {
background: #d0d7de;
border-radius: 3px;
&:hover {
background: #a8b3c1;
}
}
}
.package-card {
cursor: pointer; position: relative; width: calc(50% - 0.5rem);
border: 1px solid #e5e7eb; border-radius: 8px; padding: 16px;
@@ -1612,6 +2156,55 @@ function goToActivation() {
}
}
/* 模型库卡片样式 - 移动端 */
.model-library-section-mobile {
margin-top: 16px;
.model-library-card-mobile {
padding: 16px;
background: linear-gradient(135deg, #f0f4ff 0%, #e8f0fe 100%);
border-radius: 12px;
border: 2px solid #bae6fd;
transition: all 0.3s;
.card-header-mobile {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 12px;
.el-icon {
color: #667eea;
background: white;
padding: 8px;
border-radius: 8px;
}
.card-title-mobile {
margin: 0;
font-size: 16px;
font-weight: 700;
color: #1a1a1a;
}
}
.card-desc-mobile {
margin: 0 0 12px 0;
font-size: 13px;
color: #606266;
line-height: 1.5;
}
.goto-btn-mobile {
font-weight: 600;
.ml-1 {
margin-left: 4px;
}
}
}
}
// 累计充值优惠提示卡片样式 - 桌面端
.recharge-tip-card {
display: flex; align-items: center; gap: 12px; padding: 12px 16px;