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

改版服务器升级弹窗面板为下拉选择套餐计划

Browse Source
This commit is contained in:
jingrow 2025-07-31 04:52:50 +08:00
parent 9fa007e3f8
commit 563851ba9d
1 changed files with 64 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

140
dashboard/src2/components/JsiteServerUpgradeDialog.vue
View File

@ -9,35 +9,9 @@
</p>
</div>
<!-- 当前配置 -->
<div class="mb-6 border-t border-gray-200 pt-4">
<h3 class="text-lg font-medium text-gray-900 mb-4">当前配置</h3>
<div class="grid grid-cols-2 gap-4">
<div class="bg-gray-50 p-3 rounded-lg">
<div class="text-sm text-gray-600">CPU</div>
<div class="font-medium">{{ serverInfo?.cpu || '未知' }}核</div>
</div>
<div class="bg-gray-50 p-3 rounded-lg">
<div class="text-sm text-gray-600">内存</div>
<div class="font-medium">{{ serverInfo?.memory || '未知' }}GB</div>
</div>
<div class="bg-gray-50 p-3 rounded-lg">
<div class="text-sm text-gray-600">系统盘</div>
<div class="font-medium">{{ serverInfo?.disk_size || '未知' }}GB</div>
</div>
<div class="bg-gray-50 p-3 rounded-lg">
<div class="text-sm text-gray-600">带宽</div>
<div class="font-medium">{{ serverInfo?.bandwidth || '未知' }}Mbps</div>
</div>
</div>
<div class="mt-3 text-sm text-gray-600">
当前月费：¥{{ serverInfo?.plan_price || '0' }}
</div>
</div>
<!-- 可升级套餐列表 -->
<!-- 可升级套餐选择 -->
<div class="mb-6">
<h3 class="text-lg font-medium text-gray-900 mb-4">选择升级套餐</h3>
<label class="block text-sm font-medium text-gray-700 mb-2">选择升级套餐</label>
<div v-if="upgradePlansLoading" class="text-center py-8">
<div class="h-8 w-8 mx-auto animate-spin text-blue-600 mb-4 flex items-center justify-center">
<i class="fe fe-loader text-2xl"></i>
@ -47,43 +21,13 @@
<div v-else-if="upgradePlans.length === 0" class="text-center py-8">
<p class="text-gray-500">暂无可升级套餐</p>
</div>
<div v-else class="space-y-3">
<div
v-for="plan in upgradePlans"
:key="plan.plan_id"
@click="selectedPlan = plan"
:class="[
'p-4 border rounded-lg cursor-pointer transition-all',
selectedPlan?.plan_id === plan.plan_id
? 'border-blue-500 bg-blue-50'
: 'border-gray-200 hover:border-gray-300'
]"
>
<div class="flex justify-between items-start">
<div class="flex-1">
<div class="font-medium text-gray-900 mb-2">
{{ plan.core }}核 {{ plan.memory }}GB {{ plan.disk_size }}GB
</div>
<div class="grid grid-cols-2 gap-2 text-sm text-gray-600">
<div>CPU: {{ plan.core }}核</div>
<div>内存: {{ plan.memory }}GB</div>
<div>系统盘: {{ plan.disk_size }}GB</div>
<div>带宽: {{ plan.bandwidth }}Mbps</div>
</div>
</div>
<div class="text-right">
<div class="text-lg font-bold text-blue-600">
¥{{ plan.origin_price }}/月
</div>
<div v-if="getPriceDiff(plan) > 0" class="text-sm text-green-600">
+¥{{ getPriceDiff(plan) }}/月
</div>
<div v-else-if="getPriceDiff(plan) < 0" class="text-sm text-orange-600">
-¥{{ Math.abs(getPriceDiff(plan)) }}/月
</div>
</div>
</div>
</div>
<div v-else>
<select v-model="selectedPlanId" class="w-full border rounded px-3 py-2" required :disabled="upgradePlansLoading">
<option value="">请选择升级套餐</option>
<option v-for="plan in upgradePlans" :key="plan.plan_id" :value="plan.plan_id">
{{ getPlanDisplayName(plan) }}
</option>
</select>
</div>
</div>
@ -255,7 +199,7 @@
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="createUpgradeOrder"
:disabled="isLoading || !selectedPlan || !selectedPaymentMethod"
:disabled="isLoading || !selectedPlanId || !selectedPaymentMethod"
>
{{ isLoading ? '处理中...' : '确认升级' }}
</button>
@ -303,7 +247,7 @@ export default {
data() {
return {
show: true,
selectedPlan: null,
selectedPlanId: '',
selectedPaymentMethod: null,
order: null,
showPaymentProcessing: false,
@ -333,6 +277,10 @@ export default {
region: this.serverDoc.region
};
},
selectedPlan() {
if (!this.selectedPlanId || !this.upgradePlans.length) return null;
return this.upgradePlans.find(plan => plan.plan_id === this.selectedPlanId);
},
upgradePriceInfo() {
if (!this.selectedPlan || !this.serverInfo) return null;
@ -386,7 +334,7 @@ export default {
if (!this.server) {
throw new DashboardError('缺少服务器信息');
}
if (!this.selectedPlan) {
if (!this.selectedPlanId) {
throw new DashboardError('请选择升级套餐');
}
},
@ -533,12 +481,7 @@ export default {
this.upgradePlansLoading = false;
}
},
getPriceDiff(plan) {
if (!this.serverInfo) return 0;
const currentPrice = this.serverInfo.plan_price;
const newPrice = parseFloat(plan.origin_price);
return newPrice - currentPrice;
},
cancel() {
this.stopPaymentCheck();
this.show = false;
@ -552,7 +495,7 @@ export default {
this.error = null;
this.$resources.createUpgradeOrder.submit({
server: this.server,
new_plan_id: this.selectedPlan.plan_id
new_plan_id: this.selectedPlanId
});
},
processPayment() {
@ -598,7 +541,52 @@ export default {
clearInterval(this.checkInterval);
this.checkInterval = null;
}
}
},
getPlanDisplayName(plan) {
// 根据阿里云API返回的数据结构显示套餐信息
const cpu = plan.core || plan.cpu || '未知';
const memory = plan.memory || '未知';
const disk = plan.disk_size || plan.system_disk_size || '未知';
const bandwidth = plan.bandwidth || '未知';
const price = plan.origin_price || '未知';
const planType = plan.plan_type || '';
const publicIpNum = plan.public_ip_num || 0;
// 处理内存显示（如果是小数，转换为MB）
let memoryDisplay = memory;
if (typeof memory === 'number' && memory < 1) {
memoryDisplay = Math.round(memory * 1024) + 'MB';
} else if (typeof memory === 'number') {
memoryDisplay = memory + 'GB';
}
// 处理带宽显示
let bandwidthDisplay = bandwidth;
if (typeof bandwidth === 'number') {
bandwidthDisplay = bandwidth + 'Mbps';
}
// 根据plan_type添加类型前缀
let typePrefix = '';
switch (planType) {
case 'NORMAL':
typePrefix = '通用型 - ';
break;
case 'MULTI_IP':
typePrefix = '多公网IP型 - ';
break;
case 'INTERNATIONAL':
typePrefix = '国际型 - ';
break;
case 'CAPACITY':
typePrefix = '容量型 - ';
break;
default:
typePrefix = '';
}
return `${typePrefix}${cpu}核/${memoryDisplay}/${disk}GB/${bandwidthDisplay}/${publicIpNum}个公网IP - ¥${price}/月`;
}
},
beforeUnmount() {
this.stopPaymentCheck();