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

main #2

Merged
jingrow merged 250 commits from main into v1 2026-01-13 22:45:50 +08:00
Conversation 0 Commits 250 Files Changed 419 +159 -142
1 changed files with 159 additions and 142 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit ea2bc6cecf - Show all commits

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

@ -1,14 +1,30 @@
<template>
<Dialog :options="{ title: '新建服务器', size: 'lg' }" v-model="show">
<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">
<!-- 第一步：选择服务器配置和支付方式 -->
<template v-if="!showPaymentProcessing" #body-content>
<div class="p-4 sm:p-6">
<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">
<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>
@ -24,7 +40,8 @@
已加载 {{ regions.length }} 个区域
</div>
</div>
<div class="mb-4">
<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>
@ -33,7 +50,8 @@
</option>
</select>
</div>
<div class="mb-4">
<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>
@ -42,7 +60,8 @@
</option>
</select>
</div>
<div class="mb-4">
<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>
@ -50,7 +69,7 @@
</div>
<!-- 价格信息显示 -->
<div v-if="selectedPlanId && selectedImageId" class="mb-6 border-t border-gray-200 pt-4">
<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">
@ -69,7 +88,7 @@
</div>
<!-- 支付方式选择 -->
<div class="mb-6 border-t border-gray-200 pt-4">
<div class="border-t border-gray-200 pt-4">
<label class="block text-sm font-medium text-gray-700 mb-3">
选择支付方式
</label>
@ -108,15 +127,26 @@
</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 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>
</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>
</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;
},