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
2025-09-03 10:56:44 +08:00
parent 4f944a5466
commit a61286e534
4 changed files with 148 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
Yi.Ai.Vue3/.eslintrc-auto-import.json
View File

@@ -5,8 +5,6 @@
"ComputedRef": true,
"DirectiveBinding": true,
"EffectScope": true,
"ElMessage": true,
"ElMessageBox": true,
"ExtractDefaultPropTypes": true,
"ExtractPropTypes": true,
"ExtractPublicPropTypes": true,

15
Yi.Ai.Vue3/src/components/ModelSelect/index.vue
View File

@@ -8,6 +8,7 @@ import Popover from '@/components/Popover/index.vue';
import SvgIcon from '@/components/SvgIcon/index.vue';
import { useUserStore } from '@/stores';
import { useModelStore } from '@/stores/modules/model';
import { showProductPackage } from '@/utils/product-package.ts';
import { isUserVip } from '@/utils/user';
const router = useRouter();
@@ -72,13 +73,13 @@ function handleModelClick(item: GetSessionListVO) {
${
isUserVip()
? '<p class="text-sm text-gray-500">您可随时访问产品页面查看更多特权内容。</p>'
: '<p class="text-sm text-gray-500">点击下方按钮，立即升级为 VIP 会员！</p>'
: '<p class="text-sm text-gray-500">请点击右上角登录按钮，登录后进行购买！</p>'
}
</div>
`,
isUserVip() ? '会员状态' : '会员尊享',
{
confirmButtonText: '前往产品页面',
confirmButtonText: '产品查看',
cancelButtonText: '关闭',
dangerouslyUseHTMLString: true,
type: 'info',
@@ -87,10 +88,12 @@ function handleModelClick(item: GetSessionListVO) {
},
)
.then(() => {
router.push({
name: 'products', // 使用命名路由
query: { from: isUserVip() ? 'vip' : 'user' }, // 可选：添加来源标识
});
showProductPackage();
// router.push({
// name: 'products', // 使用命名路由
// query: { from: isUserVip() ? 'vip' : 'user' }, // 可选：添加来源标识
// });
})
.catch(() => {
// 点击右上角关闭或“关闭”按钮，不执行任何操作

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

@@ -4,8 +4,10 @@ import { ElMessage } from 'element-plus';
import { computed, onBeforeUnmount, onMounted, ref } from 'vue';
import { useRouter } from 'vue-router';
import { createOrder, getOrderStatus } from '@/api';
import LoginDialog from '@/components/LoginDialog/index.vue';
import SupportModelList from '@/components/userPersonalCenter/components/SupportModelList.vue';
import ProductPage from '@/pages/products/index.vue';
import { useUserStore } from '@/stores';
const emit = defineEmits(['close']);
@@ -24,6 +26,8 @@ const packagesData = {
{ id: 9, name: '联系站长', desc: '', price: 0, tag: '企业级需求', discount: '' },
],
};
const userStore = useUserStore();
const isLoginDialogVisible = computed(() => userStore.isLoginDialogVisible);
const visible = ref(true);
const activeTab = ref('member');
@@ -123,6 +127,10 @@ function selectPackage(pkg: any) {
selectPackageObject.value = pkg;
}
function handleClickLogin() {
userStore.openLoginDialog();
}
async function pay() {
if (!selectedId.value) {
ElMessage.warning('请选择一个套餐');
@@ -242,8 +250,13 @@ function onClose() {
</script>
<template>
<el-dialog v-model="visible" :width="isMobile ? '90%' : '980px'" :fullscreen="isMobile && showDetails"
:show-close="false" destroy-on-close class="product-package-dialog" @close="onClose">
<!-- 登录弹框 -->
<LoginDialog v-model:visible="isLoginDialogVisible" />
<el-dialog
v-model="visible" :width="isMobile ? '90%' : '980px'" :fullscreen="isMobile && showDetails"
:show-close="false" destroy-on-close class="product-package-dialog" @close="onClose"
>
<!-- 详情页 -->
<div v-if="showDetails" class="details-view">
<!-- 顶部标题和返回按钮 -->
@@ -302,10 +315,12 @@ function onClose() {
<!-- Tab 切换 -->
<div class="flex border-b mb-6 overflow-x-auto">
<div v-for="tab in tabs" :key="tab.key"
<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'" @click="activeTab = tab.key">
: 'border-transparent text-gray-500 hover:text-orange-500'" @click="activeTab = tab.key"
>
{{ tab.label }}
</div>
</div>
@@ -314,8 +329,10 @@ function onClose() {
<div v-if="isMobile" class="mobile-layout">
<!-- 套餐卡片列表 -->
<div 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-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 }}
@@ -346,12 +363,15 @@ function onClose() {
</div>
</div>
</div>
<div style="display: flex;justify-content: space-between;margin-top: 15px;">
<div>
<p>充值后，加客服微信回复账号名，可专享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 style="display: flex;justify-content: space-between;margin-top: 15px;">
<div>
<p>充值后，加客服微信回复账号名，可专享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>
<!-- 权益预览 -->
@@ -389,13 +409,14 @@ function onClose() {
<el-button text type="primary" class="view-details-btn" @click="toggleDetails">
了解更多
</el-button>
<el-button type="primary" :disabled="!selectedId || isLoading" :loading="isLoading" class="pay-button"
@click="pay">
<el-button
type="primary" :disabled="!selectedId || isLoading" :loading="isLoading" class="pay-button"
@click="pay"
>
立即支付
</el-button>
</div>
<div class="note-text">
可叠加购买次数，过期时间以最后订单为准。<br>
最终解释权归YiXinAI所有。
@@ -409,8 +430,10 @@ function onClose() {
<div class="w-[60%] flex flex-col justify-between">
<!-- 套餐卡片列表 -->
<div class="flex flex-wrap gap-4">
<div v-for="pkg in currentPackages" :key="pkg.id" class="package-card"
:class="{ selected: pkg.id === selectedId }" @click="selectPackage(pkg)">
<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 }}
@@ -444,62 +467,67 @@ function onClose() {
<div style="display: flex;justify-content: space-between;margin-top: 15px;">
<div>
<p>充值后，加客服微信回复账号名，可专享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>
<!-- 支付按钮 -->
<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>
<p style="margin-top: 10px;">
客服微信号：chengzilaoge520 或扫描右侧二维码
</p>
</div>
<div>
<el-button class="pay-button" text type="primary" @click="toggleDetails">
了解更多
</el-button>
<el-button type="primary" size="large" :disabled="!selectedId || isLoading" :loading="isLoading"
class="pay-button" @click="pay">
立即支付
</el-button>
<img style="height: 80px;width: 80px;" src="/src/assets/images/wx.png" alt="">
</div>
</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
type="primary" size="large" :disabled="!selectedId || isLoading" :loading="isLoading"
class="pay-button" @click="pay"
>
立即支付
</el-button>
</div>
</div>
<div class="note-text">
可叠加购买次数，过期时间以最后订单为准。<br>
最终解释权归YiXinAI所有。
<div class="note-text">
可叠加购买次数，过期时间以最后订单为准。<br>
最终解释权归YiXinAI所有。
</div>
</div>
</div>
</div>
<!-- 右栏 套餐权益 + 详情 -->
<div class="w-[40%] flex flex-col justify-between right-panel max-h-400px overflow-y-auto">
<div>
<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="w-[40%] flex flex-col justify-between right-panel max-h-400px overflow-y-auto">
<div>
<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 v-if="activeTab === 'member'" class="extra-description ">
<SupportModelList />
<!-- 额外描述 -->
<div v-if="activeTab === 'member'" class="extra-description ">
<SupportModelList />
<!-- <div class="description-card"> -->
<!-- <div class="title"> -->
@@ -524,18 +552,18 @@ function onClose() {
<!-- "AI+办公!"解锁300+工具箱会员权益 -->
<!-- </div> -->
<!-- </div> -->
</div>
</div>
</div>
<!-- 查看详情 -->
<div class="view-details">
<!-- 查看详情 -->
<div class="view-details">
<!-- <el-button text type="primary" @click="toggleDetails"> -->
<!-- 查看详情 -->
<!-- </el-button> -->
</div>
</div>
</div>
</div>
</div>
</el-dialog>
</template>

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

@@ -0,0 +1,43 @@
/* eslint-disable */
// @ts-nocheck
// Generated by unplugin-vue-components
// Read more: https://github.com/vuejs/core/pull/3399
// biome-ignore lint: disable
export {}
/* prettier-ignore */
declare module 'vue' {
export interface GlobalComponents {
AccountPassword: typeof import('./../src/components/LoginDialog/components/FormLogin/AccountPassword.vue')['default']
APIKeyManagement: typeof import('./../src/components/userPersonalCenter/components/APIKeyManagement.vue')['default']
DeepThinking: typeof import('./../src/components/DeepThinking/index.vue')['default']
ElAlert: typeof import('element-plus/es')['ElAlert']
ElButton: typeof import('element-plus/es')['ElButton']
ElCard: typeof import('element-plus/es')['ElCard']
ElCollapse: typeof import('element-plus/es')['ElCollapse']
ElCollapseItem: typeof import('element-plus/es')['ElCollapseItem']
ElDialog: typeof import('element-plus/es')['ElDialog']
ElDivider: typeof import('element-plus/es')['ElDivider']
ElImage: typeof import('element-plus/es')['ElImage']
FilesSelect: typeof import('./../src/components/FilesSelect/index.vue')['default']
IconSelect: typeof import('./../src/components/IconSelect/index.vue')['default']
Indexl: typeof import('./../src/components/SupportModelProducts/indexl.vue')['default']
LoginDialog: typeof import('./../src/components/LoginDialog/index.vue')['default']
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']
Popover: typeof import('./../src/components/Popover/index.vue')['default']
ProductPackage: typeof import('./../src/components/ProductPackage/index.vue')['default']
QrCodeLogin: typeof import('./../src/components/LoginDialog/components/QrCodeLogin/index.vue')['default']
RechargeLog: typeof import('./../src/components/userPersonalCenter/components/RechargeLog.vue')['default']
RegistrationForm: typeof import('./../src/components/LoginDialog/components/FormLogin/RegistrationForm.vue')['default']
RouterLink: typeof import('vue-router')['RouterLink']
RouterView: typeof import('vue-router')['RouterView']
SupportModelList: typeof import('./../src/components/userPersonalCenter/components/SupportModelList.vue')['default']
SvgIcon: typeof import('./../src/components/SvgIcon/index.vue')['default']
UsageStatistics: typeof import('./../src/components/userPersonalCenter/components/UsageStatistics.vue')['default']
UserManagement: typeof import('./../src/components/userPersonalCenter/components/UserManagement.vue')['default']
VerificationCode: typeof import('./../src/components/LoginDialog/components/FormLogin/VerificationCode.vue')['default']
WelecomeText: typeof import('./../src/components/WelecomeText/index.vue')['default']
}
}