fix: 前端联系我们、购买等优化
This commit is contained in:
Gsh
583
Yi.Ai.Vue3/src/components/ContactUs/index.vue
Normal file
583
Yi.Ai.Vue3/src/components/ContactUs/index.vue
Normal file
@@ -0,0 +1,583 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, onBeforeUnmount, onMounted, ref } from 'vue';
|
||||
import { ElMessage, ElImageViewer } from 'element-plus';
|
||||
import { contactConfig } from '@/config/constants';
|
||||
|
||||
export interface ContactType {
|
||||
customerService?: boolean; // 客服微信和二维码
|
||||
communityGroup?: boolean; // 交流群二维码
|
||||
afterSalesGroup?: boolean; // 售后群二维码
|
||||
other?: boolean; // 其他
|
||||
}
|
||||
|
||||
export type ContactScenario = 'regular' | 'afterSales' | 'all' | 'custom';
|
||||
|
||||
interface Props {
|
||||
scenario?: ContactScenario; // 场景类型
|
||||
customTypes?: ContactType; // 自定义展示类型
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
scenario: 'regular',
|
||||
});
|
||||
|
||||
const emit = defineEmits(['close']);
|
||||
|
||||
const visible = ref(true);
|
||||
const showImageViewer = ref(false);
|
||||
const currentImageUrl = ref('');
|
||||
const isMobile = ref(false);
|
||||
|
||||
// 检测移动端
|
||||
function checkMobile() {
|
||||
isMobile.value = window.innerWidth < 768;
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
checkMobile();
|
||||
window.addEventListener('resize', checkMobile);
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
window.removeEventListener('resize', checkMobile);
|
||||
});
|
||||
|
||||
// 根据场景计算需要展示的联系方式
|
||||
const contactTypes = computed<ContactType>(() => {
|
||||
if (props.scenario === 'custom' && props.customTypes) {
|
||||
return props.customTypes;
|
||||
}
|
||||
|
||||
switch (props.scenario) {
|
||||
case 'regular':
|
||||
return {
|
||||
customerService: true,
|
||||
communityGroup: true,
|
||||
afterSalesGroup: false,
|
||||
other: false,
|
||||
};
|
||||
case 'afterSales':
|
||||
return {
|
||||
customerService: true,
|
||||
communityGroup: false,
|
||||
afterSalesGroup: true,
|
||||
other: false,
|
||||
};
|
||||
case 'all':
|
||||
return {
|
||||
customerService: true,
|
||||
communityGroup: true,
|
||||
afterSalesGroup: true,
|
||||
other: true,
|
||||
};
|
||||
default:
|
||||
return {
|
||||
customerService: true,
|
||||
communityGroup: true,
|
||||
afterSalesGroup: false,
|
||||
other: false,
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
function close() {
|
||||
visible.value = false;
|
||||
emit('close');
|
||||
}
|
||||
|
||||
function onClose() {
|
||||
emit('close');
|
||||
}
|
||||
|
||||
// 复制微信号
|
||||
function copyWechatId() {
|
||||
navigator.clipboard.writeText(contactConfig.wechatId).then(() => {
|
||||
ElMessage.success('微信号已复制');
|
||||
}).catch(() => {
|
||||
ElMessage.error('复制失败，请手动复制');
|
||||
});
|
||||
}
|
||||
|
||||
// 查看大图
|
||||
function viewImage(imageUrl: string) {
|
||||
currentImageUrl.value = imageUrl;
|
||||
showImageViewer.value = true;
|
||||
}
|
||||
|
||||
// 关闭图片查看器
|
||||
function closeImageViewer() {
|
||||
showImageViewer.value = false;
|
||||
currentImageUrl.value = '';
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-dialog
|
||||
v-model="visible"
|
||||
title="联系我们"
|
||||
:width="isMobile ? '95%' : '600px'"
|
||||
:fullscreen="isMobile"
|
||||
:show-close="true"
|
||||
destroy-on-close
|
||||
class="contact-us-dialog"
|
||||
@close="onClose"
|
||||
>
|
||||
<div class="contact-us-content">
|
||||
<!-- 客服微信 -->
|
||||
<div v-if="contactTypes.customerService" class="contact-section">
|
||||
<div class="section-header">
|
||||
<el-icon class="section-icon">
|
||||
<i-ep-user />
|
||||
</el-icon>
|
||||
<h3 class="section-title">
|
||||
客服微信
|
||||
</h3>
|
||||
</div>
|
||||
<div class="section-content">
|
||||
<div class="info-text">
|
||||
<p class="info-label">
|
||||
微信号
|
||||
</p>
|
||||
<p class="info-value">
|
||||
{{ contactConfig.wechatId }}
|
||||
</p>
|
||||
<el-button size="small" type="primary" @click="copyWechatId">
|
||||
复制微信号
|
||||
</el-button>
|
||||
</div>
|
||||
<div v-if="contactConfig.images.customerService" class="qr-code">
|
||||
<img
|
||||
:src="contactConfig.images.customerService"
|
||||
alt="客服微信二维码"
|
||||
class="qr-image"
|
||||
@click="viewImage(contactConfig.images.customerService)"
|
||||
>
|
||||
<p class="qr-label">
|
||||
扫码添加客服（点击放大）
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 交流群 -->
|
||||
<div v-if="contactTypes.communityGroup" class="contact-section">
|
||||
<div class="section-header">
|
||||
<el-icon class="section-icon">
|
||||
<i-ep-chat-dot-round />
|
||||
</el-icon>
|
||||
<h3 class="section-title">
|
||||
交流群
|
||||
</h3>
|
||||
</div>
|
||||
<div class="section-content">
|
||||
<div class="info-text">
|
||||
<p class="info-desc">
|
||||
加入我们的交流群，与其他用户一起探讨AI应用，获取最新产品动态
|
||||
</p>
|
||||
</div>
|
||||
<div v-if="contactConfig.images.communityGroup" class="qr-code">
|
||||
<img
|
||||
:src="contactConfig.images.communityGroup"
|
||||
alt="交流群二维码"
|
||||
class="qr-image"
|
||||
@click="viewImage(contactConfig.images.communityGroup)"
|
||||
>
|
||||
<p class="qr-label">
|
||||
扫码加入交流群（点击放大）
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 售后群 -->
|
||||
<div v-if="contactTypes.afterSalesGroup" class="contact-section">
|
||||
<div class="section-header">
|
||||
<el-icon class="section-icon">
|
||||
<i-ep-service />
|
||||
</el-icon>
|
||||
<h3 class="section-title">
|
||||
VIP售后服务群
|
||||
</h3>
|
||||
</div>
|
||||
<div class="section-content">
|
||||
<div class="info-text">
|
||||
<p class="info-desc">
|
||||
<el-tag type="warning" size="small">
|
||||
VIP专享
|
||||
</el-tag>
|
||||
充值后，加客服微信回复账号名，可专享VIP售后服务
|
||||
</p>
|
||||
</div>
|
||||
<div v-if="contactConfig.images.afterSalesGroup" class="qr-code">
|
||||
<img
|
||||
:src="contactConfig.images.afterSalesGroup"
|
||||
alt="售后群二维码"
|
||||
class="qr-image"
|
||||
@click="viewImage(contactConfig.images.afterSalesGroup)"
|
||||
>
|
||||
<p class="qr-label">
|
||||
扫码加入售后群（点击放大）
|
||||
</p>
|
||||
</div>
|
||||
<div v-else class="qr-code-empty">
|
||||
<el-alert
|
||||
type="info"
|
||||
:closable="false"
|
||||
show-icon
|
||||
>
|
||||
<template #title>
|
||||
<p>请联系客服微信 <strong>{{ contactConfig.wechatId }}</strong> 加入售后群</p>
|
||||
</template>
|
||||
</el-alert>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 温馨提示 -->
|
||||
<el-alert
|
||||
class="tips-alert"
|
||||
type="info"
|
||||
:closable="false"
|
||||
show-icon
|
||||
>
|
||||
<template #title>
|
||||
<div class="tips-content">
|
||||
<p>温馨提示：</p>
|
||||
<ul>
|
||||
<li>添加客服时请备注您的账号名称，以便更好地为您服务</li>
|
||||
<li>工作时间：9:00-22:00，我们会尽快回复您的消息</li>
|
||||
<li>VIP用户可享受专属售后服务，响应更快</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
</el-alert>
|
||||
</div>
|
||||
|
||||
<!-- 图片查看器 -->
|
||||
<el-image-viewer
|
||||
v-if="showImageViewer"
|
||||
:url-list="[currentImageUrl]"
|
||||
:hide-on-click-modal="true"
|
||||
@close="closeImageViewer"
|
||||
/>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.contact-us-dialog {
|
||||
:deep(.el-dialog__header) {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
padding: 20px;
|
||||
border-radius: 8px 8px 0 0;
|
||||
|
||||
.el-dialog__title {
|
||||
color: white;
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.el-dialog__headerbtn .el-dialog__close {
|
||||
color: white;
|
||||
font-size: 20px;
|
||||
|
||||
&:hover {
|
||||
color: #f0f0f0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.el-dialog__body) {
|
||||
padding: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
.contact-us-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.contact-section {
|
||||
background: #fafbfc;
|
||||
border-radius: 12px;
|
||||
padding: 20px;
|
||||
border: 1px solid #e8ecf0;
|
||||
transition: all 0.3s;
|
||||
|
||||
&:hover {
|
||||
border-color: #667eea;
|
||||
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
.section-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
margin-bottom: 16px;
|
||||
padding-bottom: 12px;
|
||||
border-bottom: 2px solid #e8ecf0;
|
||||
}
|
||||
|
||||
.section-icon {
|
||||
font-size: 24px;
|
||||
color: #667eea;
|
||||
background: rgba(102, 126, 234, 0.1);
|
||||
padding: 8px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
margin: 0;
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
color: #1a1a1a;
|
||||
}
|
||||
|
||||
.section-content {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.info-text {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.info-label {
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
color: #909399;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.info-value {
|
||||
margin: 0;
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
color: #667eea;
|
||||
font-family: 'Courier New', monospace;
|
||||
}
|
||||
|
||||
.info-desc {
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
color: #606266;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.qr-code {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
|
||||
.qr-image {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
border-radius: 8px;
|
||||
border: 2px solid #e8ecf0;
|
||||
padding: 4px;
|
||||
background: white;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
|
||||
&:hover {
|
||||
transform: scale(1.05);
|
||||
border-color: #667eea;
|
||||
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.qr-label {
|
||||
margin: 0;
|
||||
font-size: 12px;
|
||||
color: #909399;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.tips-alert {
|
||||
border-radius: 8px;
|
||||
background: #f0f9ff;
|
||||
border-color: #bae6fd;
|
||||
|
||||
.tips-content p {
|
||||
margin: 0 0 8px 0;
|
||||
font-weight: 600;
|
||||
color: #0369a1;
|
||||
}
|
||||
|
||||
.tips-content ul {
|
||||
margin: 0;
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
.tips-content li {
|
||||
margin: 4px 0;
|
||||
font-size: 13px;
|
||||
color: #0c4a6e;
|
||||
}
|
||||
}
|
||||
|
||||
/* 响应式布局 */
|
||||
@media (max-width: 768px) {
|
||||
.contact-us-dialog {
|
||||
:deep(.el-dialog) {
|
||||
width: 100% !important;
|
||||
margin: 0 !important;
|
||||
height: 100vh;
|
||||
max-height: 100vh;
|
||||
border-radius: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
:deep(.el-dialog__header) {
|
||||
padding: 16px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
:deep(.el-dialog__body) {
|
||||
padding: 12px;
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
}
|
||||
|
||||
.contact-us-content {
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.contact-section {
|
||||
padding: 14px;
|
||||
}
|
||||
|
||||
.section-header {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
margin-bottom: 12px;
|
||||
padding-bottom: 10px;
|
||||
|
||||
.section-icon {
|
||||
font-size: 20px;
|
||||
padding: 6px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.section-content {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.info-text {
|
||||
width: 100%;
|
||||
gap: 8px;
|
||||
|
||||
.info-label {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.info-value {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.info-desc {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.el-button {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.qr-code {
|
||||
align-self: center;
|
||||
width: 100%;
|
||||
padding: 12px;
|
||||
background: #f9fafb;
|
||||
border-radius: 8px;
|
||||
|
||||
.qr-image {
|
||||
width: 140px;
|
||||
height: 140px;
|
||||
}
|
||||
|
||||
.qr-label {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.qr-code-empty {
|
||||
width: 100%;
|
||||
|
||||
.el-alert {
|
||||
:deep(.el-alert__content) {
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tips-alert {
|
||||
:deep(.el-alert__content) {
|
||||
.tips-content {
|
||||
p {
|
||||
font-size: 13px;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
ul {
|
||||
padding-left: 16px;
|
||||
}
|
||||
|
||||
li {
|
||||
font-size: 12px;
|
||||
margin: 3px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 小屏手机适配 */
|
||||
@media (max-width: 480px) {
|
||||
.contact-us-dialog {
|
||||
:deep(.el-dialog__header) {
|
||||
padding: 14px;
|
||||
|
||||
.el-dialog__title {
|
||||
font-size: 17px;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.el-dialog__body) {
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.contact-section {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.qr-code .qr-image {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -12,7 +12,7 @@ import { isUserVip } from '@/utils/user';
|
||||
const modelStore = useModelStore();
|
||||
// 检查模型是否可用
|
||||
function isModelAvailable(item: GetSessionListVO) {
|
||||
return isUserVip() || item.modelId?.includes('DeepSeek-R1-0528');
|
||||
return isUserVip() || item.isFree;
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
@@ -116,8 +116,8 @@ function getModelStyleClass(mode: any) {
|
||||
`;
|
||||
}
|
||||
|
||||
// 规则2：普通灰
|
||||
if (name.includes('deepseek-r1')) {
|
||||
// 规则2：普通灰（免费模型）
|
||||
if (mode.isFree) {
|
||||
return 'text-gray-700';
|
||||
}
|
||||
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -1,6 +1,4 @@
|
||||
<script setup lang="ts">
|
||||
import SupportModelList from '@/components/userPersonalCenter/components/SupportModelList.vue';
|
||||
|
||||
const models = [
|
||||
{ name: 'DeepSeek-R1', price: '2', desc: '国产开源，深度思索模式，不过幻读问题比较大，同时具备思考响应链，在开源模型中永远的神!' },
|
||||
{ name: 'DeepSeek-chat', price: '1', desc: '国产开源，简单聊天模式，对于中文文章语义体验较好，但响应速度一般' },
|
||||
@@ -27,6 +25,10 @@ const models = [
|
||||
|
||||
{ name: '更多模型请订阅查看....', price: '....', desc: '带深度思考的模型，响应速度可能会降低，请根据使用场景进行选择' },
|
||||
];
|
||||
|
||||
function goToModelLibrary() {
|
||||
window.location.href = '/model-library';
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -39,8 +41,36 @@ const models = [
|
||||
</p>
|
||||
|
||||
<!-- 网格布局，默认2列 -->
|
||||
<SupportModelList layout="grid" />
|
||||
|
||||
<!-- <SupportModelList layout="grid" /> -->
|
||||
<!-- 查看模型库按钮 -->
|
||||
<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>
|
||||
<h2 v-if="false" class="text-2xl font-semibold mb-4 text-center">
|
||||
热门大模型价格排行榜
|
||||
</h2>
|
||||
@@ -80,7 +110,7 @@ const models = [
|
||||
热门大模型价格实时排行榜
|
||||
</h2>
|
||||
<div class="rounded-2xl shadow-lg overflow-hidden border border-gray-200 flex justify-center items-center p-4">
|
||||
<a href="https://openrouter.ai/models">https://openrouter.ai/models</a>
|
||||
<a href="https://openrouter.ai/models">https://openrouter.ai/models</a>
|
||||
</div>
|
||||
<p class="text-sm text-center text-gray-500 mt-2">
|
||||
来源：openrouter 模型榜
|
||||
@@ -101,4 +131,64 @@ const models = [
|
||||
th, td {
|
||||
border-bottom: 1px solid #e5e7eb;
|
||||
}
|
||||
/* 模型库卡片样式 - 桌面端 */
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -4,6 +4,7 @@ import { ElMessage } from 'element-plus';
|
||||
import { computed, onMounted, onUnmounted, ref } from 'vue';
|
||||
import { getRechargeLog } from '@/api/model/index.ts';
|
||||
import { isUserVip } from '@/utils/user.ts';
|
||||
import { showContactUs } from '@/utils/contact-us.ts';
|
||||
|
||||
interface RechargeLog {
|
||||
id: string;
|
||||
@@ -17,14 +18,11 @@ interface RechargeLog {
|
||||
}
|
||||
|
||||
const loading = ref(false);
|
||||
const innerVisibleContact = ref(false);
|
||||
const logData = ref<RechargeLog[]>([]);
|
||||
const searchText = ref('');
|
||||
const currentSort = ref({ prop: '', order: '' });
|
||||
const currentPage = ref(1);
|
||||
const pageSize = ref(10);
|
||||
const showWechatFullscreen = ref(false);
|
||||
const showWxGroupFullscreen = ref(false);
|
||||
|
||||
// 移动端检测
|
||||
const isMobile = ref(false);
|
||||
@@ -33,40 +31,6 @@ function checkMobile() {
|
||||
isMobile.value = window.innerWidth < 768;
|
||||
}
|
||||
|
||||
const wxSrc = computed(
|
||||
() => `/src/assets/images/wx.png`,
|
||||
);
|
||||
const wxGroupQD = computed(
|
||||
() => `/src/assets/images/wx.png`,
|
||||
);
|
||||
|
||||
// 复制微信号
|
||||
function copyWechatId() {
|
||||
navigator.clipboard.writeText('chengzilaoge520').then(() => {
|
||||
ElMessage({
|
||||
message: '微信号已复制到剪贴板',
|
||||
type: 'success',
|
||||
duration: 2000,
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// 显示微信二维码全屏
|
||||
function showWechatFullscreenImage() {
|
||||
showWechatFullscreen.value = true;
|
||||
}
|
||||
|
||||
// 显示微信群二维码全屏
|
||||
function showWxGroupFullscreenImage() {
|
||||
showWxGroupFullscreen.value = true;
|
||||
}
|
||||
|
||||
// 关闭全屏图片
|
||||
function closeFullscreenImage() {
|
||||
showWechatFullscreen.value = false;
|
||||
showWxGroupFullscreen.value = false;
|
||||
}
|
||||
|
||||
// 模拟数据获取
|
||||
async function fetchRechargeLog() {
|
||||
try {
|
||||
@@ -108,7 +72,13 @@ function refreshLog() {
|
||||
|
||||
// 联系售后弹窗
|
||||
function contactCustomerService() {
|
||||
innerVisibleContact.value = !innerVisibleContact.value;
|
||||
// 如果用户有购买记录，则显示售后群
|
||||
if (logData.value.length > 0) {
|
||||
showContactUs({ scenario: 'afterSales' });
|
||||
}
|
||||
else {
|
||||
showContactUs({ scenario: 'regular' });
|
||||
}
|
||||
}
|
||||
|
||||
// 暴露方法给父组件使用
|
||||
@@ -166,74 +136,6 @@ onUnmounted(() => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-dialog
|
||||
v-model="innerVisibleContact"
|
||||
width="500"
|
||||
title="售后支持"
|
||||
append-to-body
|
||||
>
|
||||
<h3 class="text-lg font-bold mb-3">
|
||||
请扫码加入微信交流群<br>
|
||||
备注“AI”获取专属客服支持
|
||||
</h3>
|
||||
<div class="mb-4 flex items-center justify-center space-x-2">
|
||||
<span class="font-semibold">站长微信账号：</span>
|
||||
<span id="wechat-id" class="text-blue-600 font-mono select-text">chengzilaoge520</span>
|
||||
<span
|
||||
class="cursor-pointer"
|
||||
title="点击复制"
|
||||
@click="copyWechatId"
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 opacity-70 hover:opacity-100" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v16h14c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 18H8V7h11v16z" />
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex justify-center mb-4">
|
||||
<div class="px-4">
|
||||
<h4>站长微信(备注“AI”以便通过)</h4>
|
||||
|
||||
<img
|
||||
:src="wxSrc"
|
||||
class="w-50 py-5 h-70 border border-gray-200 rounded-lg shadow-md cursor-pointer hover:shadow-lg transition-transform hover:scale-105"
|
||||
alt="微信二维码"
|
||||
@click="showWechatFullscreenImage"
|
||||
>
|
||||
</div>
|
||||
<!-- <div class="px-4"> -->
|
||||
<!-- <h4>微信交流群</h4> -->
|
||||
<!-- <img -->
|
||||
<!-- :src="wxGroupQD" -->
|
||||
<!-- class="w-50 py-5 h-70 border border-gray-200 rounded-lg shadow-md cursor-pointer hover:shadow-lg transition-transform hover:scale-105" -->
|
||||
<!-- alt="微信二维码" -->
|
||||
<!-- @click="showWxGroupFullscreenImage" -->
|
||||
<!-- > -->
|
||||
<!-- </div> -->
|
||||
</div>
|
||||
|
||||
<!-- 全屏放大二维码 -->
|
||||
<div
|
||||
v-if="showWechatFullscreen"
|
||||
class="fullscreen-image-overlay"
|
||||
@click="closeFullscreenImage"
|
||||
>
|
||||
<img
|
||||
:src="wxSrc"
|
||||
class="fullscreen-image"
|
||||
>
|
||||
</div>
|
||||
<div
|
||||
v-if="showWxGroupFullscreen"
|
||||
class="fullscreen-image-overlay"
|
||||
@click="closeFullscreenImage"
|
||||
>
|
||||
<img
|
||||
:src="wxGroupQD"
|
||||
class="fullscreen-image"
|
||||
>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
<div class="recharge-log-container">
|
||||
<div class="log-header">
|
||||
<h2 class="log-title">
|
||||
|
||||
@@ -43,9 +43,9 @@ const gridTemplateColumns = computed(() => {
|
||||
<template v-if="model.modelPrice === 0">
|
||||
<span
|
||||
class="free-tag"
|
||||
:class="model.modelId === 'DeepSeek-R1-0528' ? 'free' : 'vip'"
|
||||
:class="model.isFree ? 'free' : 'vip'"
|
||||
>
|
||||
{{ model.modelId === 'DeepSeek-R1-0528' ? '免费' : 'Vip专享' }}
|
||||
{{ model.isFree ? '免费' : 'Vip专享' }}
|
||||
</span>
|
||||
</template>
|
||||
<template v-else>
|
||||
|
||||
Reference in New Issue
Block a user