重构资产订阅功能,将弹窗模式改为外部页面跳转模式,移除AssetSubscribeDialog组件及其在App.vue中的引用,修改assetSubscribe工具类将showAssetSubscribeDialog方法替换为redirectToSubscribePage方法,当检测到402状态码时直接跳转到外部开通页面并携带资产ID和返回地址参数

src/App.vue

@@ -4,12 +4,6 @@
 		<LockScreen v-if="themeConfig.isLockScreen" />
 		<Setings ref="setingsRef" v-show="themeConfig.lockScreenTime > 1" />
 		<CloseFull v-if="!themeConfig.isLockScreen" />
-		<!-- 模块未开通弹窗 -->
-		<AssetSubscribeDialog
-			v-model="assetSubscribeState.visible"
-			:assetId="assetSubscribeState.assetId"
-			:serviceName="assetSubscribeState.serviceName"
-		/>
 	</el-config-provider>
 </template>
 
@@ -25,12 +19,10 @@ import setIntroduction from '/@/utils/setIconfont';
 import LockScreen from '/@/layout/lockScreen/index.vue';
 import Setings from '/@/layout/navBars/breadcrumb/setings.vue';
 import CloseFull from '/@/layout/navBars/breadcrumb/closeFull.vue';
-import AssetSubscribeDialog from '/@/components/assetSubscribe/index.vue';
-import { assetSubscribeState } from '/@/utils/assetSubscribe';
 
 export default defineComponent({
 	name: 'app',
-	components: { LockScreen, Setings, CloseFull, AssetSubscribeDialog },
+	components: { LockScreen, Setings, CloseFull },
 	setup() {
 		const { proxy } = <any>getCurrentInstance();
 		const setingsRef = ref();
@@ -97,7 +89,6 @@ export default defineComponent({
 			themeConfig,
 			setingsRef,
 			getGlobalComponentSize,
-			assetSubscribeState,
 			...toRefs(state),
 		};
 	},

src/components/assetSubscribe/index.vue

@@ -1,277 +0,0 @@
-<template>
-	<el-dialog
-		v-model="dialogVisible"
-		title="开通服务"
-		width="600px"
-		:close-on-click-modal="false"
-		@close="handleClose"
-	>
-		<div class="subscribe-container">
-			<div class="service-info">
-				<el-icon class="warning-icon"><WarningFilled /></el-icon>
-				<span class="service-name">{{ serviceName }}</span>
-				<span class="service-tip">服务未开通，请选择套餐进行开通</span>
-			</div>
-
-			<div v-if="loading" class="loading-container">
-				<el-skeleton :rows="3" animated />
-			</div>
-
-			<div v-else-if="skuList.length === 0" class="empty-container">
-				<el-empty description="暂无可用套餐" />
-			</div>
-
-			<div v-else class="sku-list">
-				<div
-					v-for="sku in skuList"
-					:key="sku.id"
-					class="sku-item"
-					:class="{ active: selectedSku?.id === sku.id }"
-					@click="selectSku(sku)"
-				>
-					<div class="sku-header">
-						<span class="sku-name">{{ sku.skuName }}</span>
-						<el-tag v-if="sku.unlimitedStock" type="success" size="small">不限库存</el-tag>
-					</div>
-					<div class="sku-body">
-						<div class="sku-specs">
-							<span class="specs-count">{{ sku.specsCount }}</span>
-							<span class="specs-unit">{{ sku.specsUnit?.value || '' }}</span>
-						</div>
-						<div class="sku-price">
-							<span class="price-symbol">¥</span>
-							<span class="price-value">{{ (sku.price / 100).toFixed(2) }}</span>
-						</div>
-					</div>
-				</div>
-			</div>
-		</div>
-
-		<template #footer>
-			<el-button @click="handleClose">取消</el-button>
-			<el-button type="primary" :disabled="!selectedSku" :loading="submitLoading" @click="handleSubscribe">
-				立即开通
-			</el-button>
-		</template>
-	</el-dialog>
-</template>
-
-<script setup lang="ts">
-import { ref, computed, watch } from 'vue';
-import { WarningFilled } from '@element-plus/icons-vue';
-import { ElMessage } from 'element-plus';
-import { getAssetAndSku, subscribeAsset } from '/@/api/assets/asset/index';
-
-interface SkuItem {
-	id: string;
-	assetId: string;
-	assetName: string;
-	skuName: string;
-	price: number;
-	specsCount: number;
-	specsUnit: { key: string; value: string } | null;
-	unlimitedStock: boolean;
-	stock: number;
-	status: number;
-}
-
-interface Props {
-	modelValue: boolean;
-	assetId: string;
-	serviceName: string;
-}
-
-const props = withDefaults(defineProps<Props>(), {
-	modelValue: false,
-	assetId: '',
-	serviceName: '',
-});
-
-const emit = defineEmits<{
-	(e: 'update:modelValue', value: boolean): void;
-	(e: 'success', sku: SkuItem): void;
-}>();
-
-const dialogVisible = computed({
-	get: () => props.modelValue,
-	set: (val) => emit('update:modelValue', val),
-});
-
-const loading = ref(false);
-const submitLoading = ref(false);
-const skuList = ref<SkuItem[]>([]);
-const selectedSku = ref<SkuItem | null>(null);
-
-// 监听弹窗打开，加载SKU列表
-watch(
-	() => props.modelValue,
-	(val) => {
-		if (val && props.assetId) {
-			loadSkuList();
-		}
-	}
-);
-
-// 加载SKU列表
-const loadSkuList = async () => {
-	loading.value = true;
-	selectedSku.value = null;
-	try {
-		const res = await getAssetAndSku({
-			assetId: props.assetId,
-		});
-		skuList.value = res.data?.skuList || res.data?.list || [];
-		// 默认选中第一个
-		if (skuList.value.length > 0) {
-			selectedSku.value = skuList.value[0];
-		}
-	} catch (error) {
-		console.error('加载套餐列表失败:', error);
-		skuList.value = [];
-	} finally {
-		loading.value = false;
-	}
-};
-
-// 选择SKU
-const selectSku = (sku: SkuItem) => {
-	selectedSku.value = sku;
-};
-
-// 开通服务
-const handleSubscribe = async () => {
-	if (!selectedSku.value) {
-		ElMessage.warning('请选择套餐');
-		return;
-	}
-	
-	submitLoading.value = true;
-	try {
-		await subscribeAsset({
-			skuId: selectedSku.value.id,
-			assetId: selectedSku.value.assetId,
-		});
-		
-		ElMessage.success('开通成功');
-		emit('success', selectedSku.value);
-		handleClose();
-		// 刷新页面以重新加载数据
-		window.location.reload();
-	} catch (error) {
-		console.error('开通失败:', error);
-	} finally {
-		submitLoading.value = false;
-	}
-};
-
-// 关闭弹窗
-const handleClose = () => {
-	dialogVisible.value = false;
-	selectedSku.value = null;
-	skuList.value = [];
-};
-</script>
-
-<style scoped lang="scss">
-.subscribe-container {
-	.service-info {
-		display: flex;
-		align-items: center;
-		gap: 8px;
-		padding: 16px;
-		background: #fff7e6;
-		border-radius: 8px;
-		margin-bottom: 20px;
-
-		.warning-icon {
-			font-size: 20px;
-			color: #fa8c16;
-		}
-
-		.service-name {
-			font-weight: 600;
-			color: #333;
-		}
-
-		.service-tip {
-			color: #666;
-			font-size: 14px;
-		}
-	}
-
-	.loading-container,
-	.empty-container {
-		padding: 40px 0;
-	}
-
-	.sku-list {
-		display: grid;
-		grid-template-columns: repeat(2, 1fr);
-		gap: 16px;
-
-		.sku-item {
-			border: 2px solid #e8e8e8;
-			border-radius: 12px;
-			padding: 16px;
-			cursor: pointer;
-			transition: all 0.3s;
-
-			&:hover {
-				border-color: #409eff;
-				box-shadow: 0 2px 12px rgba(64, 158, 255, 0.2);
-			}
-
-			&.active {
-				border-color: #409eff;
-				background: #ecf5ff;
-			}
-
-			.sku-header {
-				display: flex;
-				justify-content: space-between;
-				align-items: center;
-				margin-bottom: 12px;
-
-				.sku-name {
-					font-size: 16px;
-					font-weight: 600;
-					color: #333;
-				}
-			}
-
-			.sku-body {
-				display: flex;
-				justify-content: space-between;
-				align-items: flex-end;
-
-				.sku-specs {
-					.specs-count {
-						font-size: 24px;
-						font-weight: 700;
-						color: #409eff;
-					}
-
-					.specs-unit {
-						font-size: 14px;
-						color: #666;
-						margin-left: 4px;
-					}
-				}
-
-				.sku-price {
-					color: #f56c6c;
-
-					.price-symbol {
-						font-size: 14px;
-					}
-
-					.price-value {
-						font-size: 20px;
-						font-weight: 700;
-					}
-				}
-			}
-		}
-	}
-}
-</style>

src/utils/assetSubscribe.ts

@@ -1,4 +1,5 @@
-import { ref } from 'vue';
+// 开通页面地址（public/web/subscribe.html）
+const SUBSCRIBE_PAGE_URL = '/web/subscribe.html';
 
 // 路由路径与 assetId 的映射关系
 const ROUTE_ASSET_MAP: Record<string, { assetId: string; serviceName: string }> = {
@@ -10,21 +11,8 @@ const ROUTE_ASSET_MAP: Record<string, { assetId: string; serviceName: string }>
 	
 	// 聚合电商业务(资产管理)
 	'/assets': { assetId: '696b4acd1be1c8b76c4b4c15', serviceName: '资产管理' },
-	
-	// 订单
-	// '/order': { assetId: '696b4acd1be1c8b76c4b4c15', serviceName: '资产管理' },
-	
-	// AI数字人
-	// '/digitalHuman': { assetId: '696f421205e496ba4ccbe662', serviceName: 'AI客服' },
 };
 
-// 当前弹窗状态（响应式，供组件使用）
-export const assetSubscribeState = ref({
-	visible: false,
-	assetId: '',
-	serviceName: '',
-});
-
 /**
  * 根据路由路径获取对应的 assetId 和服务名称
  */
@@ -45,26 +33,20 @@ export function getAssetInfoByRoute(routePath: string): { assetId: string; servi
 }
 
 /**
- * 显示服务开通弹窗
+ * 跳转到外部开通页面
+ * @param assetId 资产ID
  */
-export function showAssetSubscribeDialog(assetId: string, serviceName: string) {
-	console.log('[showAssetSubscribeDialog] 显示弹窗:', { assetId, serviceName });
-	console.log('[showAssetSubscribeDialog] 修改前状态:', JSON.stringify(assetSubscribeState.value));
-	assetSubscribeState.value.visible = true;
-	assetSubscribeState.value.assetId = assetId;
-	assetSubscribeState.value.serviceName = serviceName;
-	console.log('[showAssetSubscribeDialog] 修改后状态:', JSON.stringify(assetSubscribeState.value));
+export function redirectToSubscribePage(assetId: string) {
+	// 当前页面地址作为返回地址
+	const returnUrl = encodeURIComponent(window.location.href);
+	// 构建跳转URL
+	const url = `${SUBSCRIBE_PAGE_URL}?assetId=${assetId}&returnUrl=${returnUrl}`;
+	console.log('[redirectToSubscribePage] 跳转到开通页面:', url);
+	window.location.href = url;
 }
 
 /**
- * 关闭服务开通弹窗
- */
-export function closeAssetSubscribeDialog() {
-	assetSubscribeState.value.visible = false;
-}
-
-/**
- * 处理 403 错误码（模块未开通）
+ * 处理 402 错误码（模块未开通）
  */
 export function handleModuleNotEnabled(routePath: string): boolean {
 	console.log('[模块未开通] 当前路由路径:', routePath);
@@ -72,12 +54,12 @@ export function handleModuleNotEnabled(routePath: string): boolean {
 	console.log('[模块未开通] 匹配到的资产信息:', assetInfo);
 	
 	if (assetInfo) {
-		showAssetSubscribeDialog(assetInfo.assetId, assetInfo.serviceName);
+		redirectToSubscribePage(assetInfo.assetId);
 		return true;
 	}
 	
 	// 如果没有匹配到路由，尝试使用默认的资产管理
 	console.warn('[模块未开通] 未匹配到路由，使用默认资产管理');
-	showAssetSubscribeDialog('696b4acd1be1c8b76c4b4c15', '资产管理');
+	redirectToSubscribePage('696b4acd1be1c8b76c4b4c15');
 	return true;
 }