jingrow/jcloud
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

NewJsiteServer.vue由弹窗改为普通页面展示

Browse Source
This commit is contained in:
jingrow 2025-07-29 14:44:48 +08:00
parent 3f32f38963
commit ea2bc6cecf
1 changed files with 159 additions and 142 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

297
dashboard/src2/pages/NewJsiteServer.vue
View File

@ -1,122 +1,152 @@
<template>
<Dialog :options="{ title: '新建服务器', size: 'lg' }" v-model="show">
<!-- 第一步：选择服务器配置和支付方式 -->
<template v-if="!showPaymentProcessing" #body-content>
<div class="p-4 sm:p-6">
<div>
<!-- 页面头部 -->
<div class="sticky top-0 z-10 shrink-0">
<Header>
<Breadcrumbs
:items="[
{ label: '服务器', route: '/jsite-servers' },
{ label: '新建服务器', route: '/jsite-servers/new' }
]"
/>
</Header>
</div>
<!-- 主要内容区域 -->
<div class="mx-auto max-w-2xl px-5">
<!-- 第一步：选择服务器配置和支付方式 -->
<div v-if="!showPaymentProcessing" class="space-y-12 pb-[50vh] pt-12">
<div class="mb-6">
<p class="mt-1 text-sm text-gray-600">
<h1 class="text-2xl font-bold text-gray-900 mb-2">新建服务器</h1>
<p class="text-sm text-gray-600">
请选择服务器配置和支付方式，点击"创建"后将自动为您开通。
</p>
</div>
<div class="mb-4">
<label class="block text-sm font-medium text-gray-700 mb-2">区域选择</label>
<select v-model="selectedRegionId" class="w-full border rounded px-3 py-2" required @change="onRegionChange">
<option value="">请选择区域</option>
<option v-for="region in regions" :key="getRegionId(region)" :value="getRegionId(region)">
{{ getRegionName(region) }}
</option>
</select>
<!-- 调试信息 -->
<div v-if="regions.length === 0" class="mt-2 text-sm text-gray-500">
正在加载区域列表...
</div>
<div v-if="regions.length > 0" class="mt-2 text-sm text-gray-500">
已加载 {{ regions.length }} 个区域
</div>
</div>
<div class="mb-4">
<label class="block text-sm font-medium text-gray-700 mb-2">套餐选择</label>
<select v-model="selectedPlanId" class="w-full border rounded px-3 py-2" required>
<option value="">请选择套餐</option>
<option v-for="plan in plans" :key="plan.plan_id" :value="plan.plan_id">
{{ getPlanDisplayName(plan) }}
</option>
</select>
</div>
<div class="mb-4">
<label class="block text-sm font-medium text-gray-700 mb-2">镜像选择</label>
<select v-model="selectedImageId" class="w-full border rounded px-3 py-2" required>
<option value="">请选择镜像</option>
<option v-for="image in images" :key="getImageId(image)" :value="getImageId(image)">
{{ getImageDisplayName(image) }}
</option>
</select>
</div>
<div class="mb-4">
<label class="block text-sm font-medium text-gray-700 mb-2">购买时长</label>
<select v-model="period" class="w-full border rounded px-3 py-2">
<option v-for="p in periods" :key="p.value" :value="p.value">{{ p.label }}</option>
</select>
</div>
<!-- 价格信息显示 -->
<div v-if="selectedPlanId && selectedImageId" class="mb-6 border-t border-gray-200 pt-4">
<div class="flex justify-between items-center">
<div class="text-sm text-gray-600">月度费用</div>
<div class="font-medium">
¥ {{ getSelectedPlanPrice() }}
<span class="text-gray-500 text-sm">(月付)</span>
<div class="space-y-6">
<div>
<label class="block text-sm font-medium text-gray-700 mb-2">区域选择</label>
<select v-model="selectedRegionId" class="w-full border rounded px-3 py-2" required @change="onRegionChange">
<option value="">请选择区域</option>
<option v-for="region in regions" :key="getRegionId(region)" :value="getRegionId(region)">
{{ getRegionName(region) }}
</option>
</select>
<!-- 调试信息 -->
<div v-if="regions.length === 0" class="mt-2 text-sm text-gray-500">
正在加载区域列表...
</div>
<div v-if="regions.length > 0" class="mt-2 text-sm text-gray-500">
已加载 {{ regions.length }} 个区域
</div>
</div>
<div class="flex justify-between items-center mt-2">
<div class="text-sm text-gray-600">购买时长</div>
<div class="font-medium">{{ period }} 个月</div>
</div>
<div class="flex justify-between items-center mt-2 text-lg font-bold">
<div>总计</div>
<div>¥ {{ getTotalAmount() }}</div>
</div>
</div>
<!-- 支付方式选择 -->
<div class="mb-6 border-t border-gray-200 pt-4">
<label class="block text-sm font-medium text-gray-700 mb-3">
选择支付方式
</label>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 mt-2">
<button
class="p-4 border rounded-lg flex flex-col items-center justify-center hover:bg-gray-50 transition-all"
:class="{'border-blue-500 border-2 shadow-sm': selectedPaymentMethod === 'balance', 'border-gray-200': selectedPaymentMethod !== 'balance'}"
@click="selectedPaymentMethod = 'balance'"
>
<span class="text-gray-800 font-medium">余额支付</span>
</button>
<div>
<label class="block text-sm font-medium text-gray-700 mb-2">套餐选择</label>
<select v-model="selectedPlanId" class="w-full border rounded px-3 py-2" required>
<option value="">请选择套餐</option>
<option v-for="plan in plans" :key="plan.plan_id" :value="plan.plan_id">
{{ getPlanDisplayName(plan) }}
</option>
</select>
</div>
<button
class="p-4 border rounded-lg hover:bg-gray-50 transition-all"
:class="{'border-blue-500 border-2 shadow-sm': selectedPaymentMethod === 'alipay', 'border-gray-200': selectedPaymentMethod !== 'alipay'}"
@click="selectedPaymentMethod = 'alipay'"
>
<div class="flex flex-col items-center">
<div class="mb-2">
<AlipayLogo class="h-8" />
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-2">镜像选择</label>
<select v-model="selectedImageId" class="w-full border rounded px-3 py-2" required>
<option value="">请选择镜像</option>
<option v-for="image in images" :key="getImageId(image)" :value="getImageId(image)">
{{ getImageDisplayName(image) }}
</option>
</select>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-2">购买时长</label>
<select v-model="period" class="w-full border rounded px-3 py-2">
<option v-for="p in periods" :key="p.value" :value="p.value">{{ p.label }}</option>
</select>
</div>
<!-- 价格信息显示 -->
<div v-if="selectedPlanId && selectedImageId" class="border-t border-gray-200 pt-4">
<div class="flex justify-between items-center">
<div class="text-sm text-gray-600">月度费用</div>
<div class="font-medium">
¥ {{ getSelectedPlanPrice() }}
<span class="text-gray-500 text-sm">(月付)</span>
</div>
</button>
</div>
<div class="flex justify-between items-center mt-2">
<div class="text-sm text-gray-600">购买时长</div>
<div class="font-medium">{{ period }} 个月</div>
</div>
<div class="flex justify-between items-center mt-2 text-lg font-bold">
<div>总计</div>
<div>¥ {{ getTotalAmount() }}</div>
</div>
</div>
<button
class="p-4 border rounded-lg hover:bg-gray-50 transition-all"
:class="{'border-blue-500 border-2 shadow-sm': selectedPaymentMethod === 'wechatpay', 'border-gray-200': selectedPaymentMethod !== 'wechatpay'}"
@click="selectedPaymentMethod = 'wechatpay'"
>
<div class="flex flex-col items-center">
<div class="mb-2">
<WeChatPayLogo class="h-8" />
<!-- 支付方式选择 -->
<div class="border-t border-gray-200 pt-4">
<label class="block text-sm font-medium text-gray-700 mb-3">
选择支付方式
</label>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 mt-2">
<button
class="p-4 border rounded-lg flex flex-col items-center justify-center hover:bg-gray-50 transition-all"
:class="{'border-blue-500 border-2 shadow-sm': selectedPaymentMethod === 'balance', 'border-gray-200': selectedPaymentMethod !== 'balance'}"
@click="selectedPaymentMethod = 'balance'"
>
<span class="text-gray-800 font-medium">余额支付</span>
</button>
<button
class="p-4 border rounded-lg hover:bg-gray-50 transition-all"
:class="{'border-blue-500 border-2 shadow-sm': selectedPaymentMethod === 'alipay', 'border-gray-200': selectedPaymentMethod !== 'alipay'}"
@click="selectedPaymentMethod = 'alipay'"
>
<div class="flex flex-col items-center">
<div class="mb-2">
<AlipayLogo class="h-8" />
</div>
</div>
</div>
</button>
<button
class="p-4 border rounded-lg hover:bg-gray-50 transition-all"
:class="{'border-blue-500 border-2 shadow-sm': selectedPaymentMethod === 'wechatpay', 'border-gray-200': selectedPaymentMethod !== 'wechatpay'}"
@click="selectedPaymentMethod = 'wechatpay'"
>
<div class="flex flex-col items-center">
<div class="mb-2">
<WeChatPayLogo class="h-8" />
</div>
</div>
</button>
</div>
</div>
<div v-if="error" class="p-3 bg-red-50 text-red-700 rounded-md text-sm">
{{ error }}
</div>
<!-- 创建按钮 -->
<div class="pt-4">
<button
type="button"
class="w-full px-4 py-2 bg-[#1fc76f] border border-transparent rounded-md text-sm font-medium text-white hover:bg-[#19b862] focus:outline-none"
@click="createInstance"
:disabled="isLoading"
>
{{ isLoading ? '处理中...' : '创建' }}
</button>
</div>
</div>
<div v-if="error" class="mt-4 p-3 bg-red-50 text-red-700 rounded-md text-sm">
{{ error }}
</div>
</div>
</template>
<!-- 第二步：处理支付 -->
<template v-else #body-content>
<div class="p-4 sm:p-6">
<!-- 第二步：处理支付 -->
<div v-else class="space-y-12 pb-[50vh] pt-12">
<!-- 加载中状态 -->
<div v-if="isProcessingPayment" class="text-center py-8">
<div class="h-12 w-12 mx-auto animate-spin text-blue-600 mb-4 flex items-center justify-center">
@ -141,6 +171,15 @@
<p class="text-gray-500 text-sm">
您可以在服务器列表中查看服务器状态，创建完成后状态将更新为"Running"。
</p>
<div class="mt-6">
<button
type="button"
class="px-4 py-2 bg-[#1fc76f] border border-transparent rounded-md text-sm font-medium text-white hover:bg-[#19b862] focus:outline-none"
@click="goToServerList"
>
返回服务器列表
</button>
</div>
</div>
<!-- 微信支付状态 -->
@ -197,55 +236,29 @@
</div>
</div>
<div v-if="error" class="mt-4 p-3 bg-red-50 text-red-700 rounded-md text-sm">
<div v-if="error" class="p-3 bg-red-50 text-red-700 rounded-md text-sm">
{{ error }}
</div>
</div>
</template>
<template #actions>
<div class="w-full">
<button v-if="!showPaymentProcessing && !paymentSuccess"
type="button"
class="w-full px-4 py-2 bg-[#1fc76f] border border-transparent rounded-md text-sm font-medium text-white hover:bg-[#19b862] focus:outline-none"
@click="createInstance"
:disabled="isLoading"
>
{{ isLoading ? '处理中...' : '创建' }}
</button>
<div class="flex justify-between w-full" v-else>
<button
type="button"
class="px-4 py-2 bg-[#1fc76f] border border-transparent rounded-md text-sm font-medium text-white hover:bg-[#19b862] focus:outline-none ml-auto"
@click="close"
v-if="paymentSuccess"
>
关闭
</button>
</div>
</div>
</template>
</Dialog>
</div>
</div>
</template>
<script>
import { toast } from 'vue-sonner';
import { Dialog } from 'jingrow-ui';
import { DashboardError } from '../utils/error';
import AlipayLogo from '../logo/AlipayLogo.vue';
import WeChatPayLogo from '../logo/WeChatPayLogo.vue';
import router from '../router';
export default {
name: 'NewJsiteServer',
components: {
Dialog,
AlipayLogo,
WeChatPayLogo
},
data() {
return {
show: true,
selectedRegionId: '',
selectedPlanId: '',
selectedImageId: '',
@ -424,10 +437,13 @@ export default {
...this.server
};
this.$emit('success', { order: orderData, server: serverData });
this.isProcessingPayment = false;
this.paymentSuccess = true;
// 支付成功后跳转到服务器列表
setTimeout(() => {
this.$router.push('/jsite-servers');
}, 2000);
},
onError(error) {
this.error = error.message || '余额支付处理失败';
@ -505,9 +521,12 @@ export default {
...this.server
};
this.$emit('success', { order: orderData, server: serverData });
this.paymentSuccess = true;
// 支付成功后跳转到服务器列表
setTimeout(() => {
this.$router.push('/jsite-servers');
}, 2000);
}
}
};
@ -600,12 +619,10 @@ export default {
});
}
},
close() {
this.show = false;
this.$emit('success');
goToServerList() {
this.$router.push('/jsite-servers');
},
getRegionId(region) {
return region.region_id || region.RegionId || region.id;
},