Skip to content

phsl / client

Go to a project
Commit 96b0e396 by renyizhao
Options

算力资源改造完成

parent 21fe1bfc
Showing with 185 additions and 29 deletions
src/api/computility/order.js
...@@ -54,12 +54,30 @@ export function delOrder (id) { ...@@ -54,12 +54,30 @@ export function delOrder (id) {
} }
// 取消订单-订单管理 // 取消订单-订单管理
export function cancelOrder (data) { // 阶段 F：旧的 /api/v1/orderCancel 端点（ApiControllerUnuse）整段被注释，调它会 404
return request({ // 改为调新的 /compute/order/cancel（AppResourceOrderController 已实现）
url: '/api/v1/orderCancel', export function cancelOrder (data){
method: 'post', return request({
data: data url: '/compute/order/cancel',
}) method: 'put',
params: data
})
}
/**
* 阶段 F：获取订单发货信息（IP / 用户名 / 密码）
* 独立的接口，避免在主订单接口下发敏感字段。
* 后端：AppResourceOrderController.getUserResourceOrderDeliveryInfo
* 响应：AppResourceOrderDeliveryInfoRespVO
* - 非 DELIVERED 状态：发货字段为 null
* - 订单必须属于当前用户
*/
export function getOrderDeliveryInfo (orderId) {
return request({
url: '/compute/order/get-delivery-info',
method: 'get',
params: { id: orderId }
})
} }
......
src/utils/dict.js
...@@ -3,7 +3,10 @@ import { getDicts } from '@/api/system/dict/data' ...@@ -3,7 +3,10 @@ import { getDicts } from '@/api/system/dict/data'
import request from "@/utils/request.js"; import request from "@/utils/request.js";
export const DICT_TYPE = { export const DICT_TYPE = {
TRADE_INVOICE_STATUS: 'trade_invoice_status' TRADE_INVOICE_STATUS: 'trade_invoice_status',
// ========== 阶段 F 客户端字典 ==========
COMPUTE_RESOURCE_ORDER_STATUS: 'compute_resource_order_status',
COMPUTE_RESOURCE_REFUND_STATUS: 'compute_resource_refund_status'
} }
/** /**
......
src/views/computingResource/orderResult.vue
<template> <template>
<div class="app-container order-result"> <div class="app-container order-result">
<img src="@/assets/images/order-success.png" alt=""> <img src="@/assets/images/order-success.png" alt="">
<div class="text">申请成功</div> <!-- 阶段 F：支付成功 → 商家备货中（不再"立即生效"，因为阶段 A 后发货才计费） -->
<div class="sub-text">如有需要可返回产品页继续选购</div> <div class="text">申请成功，商家备货中</div>
<div class="sub-text">支付完成后商家将为您准备资源，预计 24 小时内完成发货并通过短信通知您</div>
<!-- 规格展示（仅当路由 state 传入 specMap 时显示） --> <!-- 规格展示（仅当路由 state 传入 specMap 时显示） -->
<div v-if="specEntries.length > 0" class="spec-block"> <div v-if="specEntries.length > 0" class="spec-block">
...@@ -14,7 +15,7 @@ ...@@ -14,7 +15,7 @@
</div> </div>
<div> <div>
<el-button type="primary" @click="$router.replace('/computingResource/resourceList')">继续选购</el-button> <el-button type="primary" @click="$router.replace('/console/myOrder')">查看我的订单</el-button>
</div> </div>
<div> <div>
<el-button type="default" @click="$router.replace('/')">返回首页</el-button> <el-button type="default" @click="$router.replace('/')">返回首页</el-button>
......
src/views/console/naturalResources.vue
...@@ -18,11 +18,20 @@ ...@@ -18,11 +18,20 @@
<span>{{ scope.row.skuName }}</span> <span>{{ scope.row.skuName }}</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="订单状态" align="center" prop="status"> <el-table-column label="订单状态" align="center" prop="status" width="100">
<template #default="scope"> <template #default="scope">
<dict-tag :options="compute_resource_order_status" :value="scope.row.status" /> <dict-tag :options="compute_resource_order_status" :value="scope.row.status" />
</template> </template>
</el-table-column> </el-table-column>
<!-- 阶段 F：倒计时（仅 DELIVERED 显示），剩余 ≤3 天橙色警示 -->
<el-table-column label="剩余时间" align="center" width="140">
<template #default="scope">
<span v-if="scope.row.status === 6" :class="{ 'warn-text': remainingDays(scope.row) <= 3 && remainingDays(scope.row) >= 0 }">
剩余 {{ formatRemaining(scope.row.rentEndTime) }}
</span>
<span v-else>-</span>
</template>
</el-table-column>
<el-table-column label="申请时间" align="center" prop="createTime" width="180"> <el-table-column label="申请时间" align="center" prop="createTime" width="180">
<template #default="scope"> <template #default="scope">
<span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span> <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
...@@ -35,7 +44,7 @@ ...@@ -35,7 +44,7 @@
</el-table-column> </el-table-column>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width"> <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template #default="scope"> <template #default="scope">
<el-button link type="primary" @click="handleUpdate(scope.row,scope.$index)">详情</el-button> <el-button link type="primary" @click="handleUpdate(scope.row)">详情</el-button>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
...@@ -50,8 +59,45 @@ ...@@ -50,8 +59,45 @@
<!-- 添加或修改订单管理-用户资源管理对话框 --> <!-- 添加或修改订单管理-用户资源管理对话框 -->
<el-dialog :title="title" v-model="open" width="800px" append-to-body> <el-dialog :title="title" v-model="open" width="800px" append-to-body>
<div> <div v-loading="detailLoading">
<div class="info-block"> <!-- 阶段 F：状态顶部 el-alert 提示（按 status 分支） -->
<el-alert
v-if="form.status === 6"
type="success"
:closable="false"
show-icon
:title="`资源使用中，租赁结束时间：${parseTime(form.rentEndTime, '{y}-{m}-{d}')}`"
/>
<el-alert
v-else-if="form.status === 4"
type="info"
:closable="false"
show-icon
title="已退款完成"
/>
<el-alert
v-else-if="form.status === 2"
type="info"
:closable="false"
show-icon
title="订单已结束"
/>
<el-alert
v-else-if="form.status === 5"
type="warning"
:closable="false"
show-icon
title="商家备货中，预计 24 小时内发货"
/>
<el-alert
v-else-if="form.status === 7"
type="warning"
:closable="false"
show-icon
title="订单已取消，正在等待客服处理退款"
/>
<div class="info-block" style="margin-top: 12px;">
<div class="info-item flex-align-center flex-space-between"> <div class="info-item flex-align-center flex-space-between">
<div class="label">订单编号</div> <div class="label">订单编号</div>
<div class="value">{{ form.orderNo }}</div> <div class="value">{{ form.orderNo }}</div>
...@@ -71,22 +117,46 @@ ...@@ -71,22 +117,46 @@
<div class="value">-</div> <div class="value">-</div>
</div> </div>
<div class="info-item flex-align-center flex-space-between"> <div class="info-item flex-align-center flex-space-between">
<div class="label">服务器IP</div>
<div class="value">{{ form.ip || '-' }}</div>
</div>
<div class="info-item flex-align-center flex-space-between">
<div class="label">服务器所在地</div> <div class="label">服务器所在地</div>
<div class="value">{{ form.location || '-' }}</div> <div class="value">{{ form.location || '-' }}</div>
</div> </div>
</div>
<!-- 阶段 F：发货信息区（仅 DELIVERED 状态显示），字段从 getDeliveryInfo 拿 -->
<div v-if="form.status === 6" class="info-block">
<div class="info-block-title">发货信息</div>
<div class="info-item flex-align-center flex-space-between">
<div class="label">服务器 IP</div>
<div class="value">{{ form.deliveryIp || '-' }}</div>
</div>
<div class="info-item flex-align-center flex-space-between"> <div class="info-item flex-align-center flex-space-between">
<div class="label">服务器用户名</div> <div class="label">服务器用户名</div>
<div class="value">{{ form.initUsername || '-' }}</div> <div class="value">{{ form.deliveryUsername || '-' }}</div>
</div> </div>
<div class="info-item flex-align-center flex-space-between"> <div class="info-item flex-align-center flex-space-between">
<div class="label">服务器密码</div> <div class="label">服务器密码</div>
<div class="value">{{ form.initPassword || '-' }}</div> <div class="value">
<span v-if="showPassword">{{ form.deliveryPassword || '-' }}</span>
<el-button v-else link type="primary" @click="showPassword = true">显示密码</el-button>
</div>
</div> </div>
<div class="info-item flex-align-center flex-space-between"> <div class="info-item flex-align-center flex-space-between">
<div class="label">发货时间</div>
<div class="value">{{ parseTime(form.deliveredTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</div>
</div>
</div>
<!-- 阶段 F：退款信息（仅 PENDING_REFUND=7 或 REFUNDED=4） -->
<div v-if="form.status === 7 || form.status === 4" class="info-block">
<div class="info-block-title">退款信息</div>
<div class="info-item flex-align-center flex-space-between">
<div class="label">退款时间</div>
<div class="value">{{ parseTime(form.refundTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</div>
</div>
</div>
<div class="info-block">
<div class="info-item flex-align-center flex-space-between">
<div class="label">租期</div> <div class="label">租期</div>
<div class="value">{{ form.skuName }}</div> <div class="value">{{ form.skuName }}</div>
</div> </div>
...@@ -122,6 +192,7 @@ ...@@ -122,6 +192,7 @@
<script setup name="NaturalResources"> <script setup name="NaturalResources">
import {listResources, getResources} from '@/api/computility/resources' import {listResources, getResources} from '@/api/computility/resources'
import {getOrderDeliveryInfo} from '@/api/computility/order'
import {parseTime} from "../../utils/ruoyi.js"; import {parseTime} from "../../utils/ruoyi.js";
const {proxy} = getCurrentInstance() const {proxy} = getCurrentInstance()
...@@ -130,9 +201,11 @@ const {compute_resource_order_status} = proxy.useDict('compute_resource_order_st ...@@ -130,9 +201,11 @@ const {compute_resource_order_status} = proxy.useDict('compute_resource_order_st
const resourcesList = ref([]) const resourcesList = ref([])
const open = ref(false) const open = ref(false)
const loading = ref(true) const loading = ref(true)
const detailLoading = ref(false)
const ids = ref([]) const ids = ref([])
const total = ref(0) const total = ref(0)
const title = ref('') const title = ref('')
const showPassword = ref(false) // 阶段 F：密码默认隐藏
const data = reactive({ const data = reactive({
form: {}, form: {},
...@@ -159,14 +232,62 @@ function cancel() { ...@@ -159,14 +232,62 @@ function cancel() {
open.value = false open.value = false
} }
/** 修改按钮操作 */ /**
function handleUpdate(row) { * 阶段 F：计算剩余天数（仅 DELIVERED 用到）
const _id = row.id || ids.value * @returns 剩余天数（已过期返回负数；无 rentEndTime 返回 NaN）
getResources({id: _id}).then(response => { */
form.value = response.data function remainingDays(row) {
open.value = true if (!row || !row.rentEndTime) return NaN
title.value = '查看详情' const end = new Date(row.rentEndTime).getTime()
}) if (isNaN(end)) return NaN
const now = Date.now()
return Math.floor((end - now) / (1000 * 60 * 60 * 24))
}
/**
* 阶段 F：格式化剩余时间为 "X 天 Y 小时"
*/
function formatRemaining(endTime) {
if (!endTime) return '-'
const end = new Date(endTime).getTime()
if (isNaN(end)) return '-'
const diffMs = end - Date.now()
if (diffMs <= 0) return '已到期'
const totalHours = Math.floor(diffMs / (1000 * 60 * 60))
const days = Math.floor(totalHours / 24)
const hours = totalHours % 24
if (days > 0) return `${days} 天 ${hours} 小时`
return `${hours} 小时`
}
/**
* 阶段 F：实装详情弹窗
* 1. 调 /compute/order/get 拿主订单数据
* 2. 调 /compute/order/get-delivery-info 拿发货字段（仅 DELIVERED 状态有值）
*/
async function handleUpdate(row) {
open.value = true
title.value = '查看详情'
showPassword.value = false
detailLoading.value = true
try {
const mainRes = await getResources({ id: row.id })
form.value = mainRes.data || {}
// 阶段 F：独立拿发货信息（IP/用户名/密码）
try {
const delRes = await getOrderDeliveryInfo(row.id)
const info = delRes.data || {}
form.value.deliveryIp = info.deliveryIp
form.value.deliveryUsername = info.deliveryUsername
form.value.deliveryPassword = info.deliveryPassword
form.value.deliveredTime = info.deliveredTime
form.value.deliverOperatorName = info.deliverOperatorName
} catch (e) {
console.warn('[getDeliveryInfo] failed', e)
}
} finally {
detailLoading.value = false
}
} }
getList() getList()
...@@ -191,7 +312,14 @@ getList() ...@@ -191,7 +312,14 @@ getList()
.info-block { .info-block {
background-color: #ffffff; background-color: #ffffff;
padding: 4px 0; padding: 4px 0;
//margin-bottom: 14px; }
.info-block-title {
padding: 8px 20px 4px;
font-weight: 600;
font-size: 14px;
color: #303233;
background-color: #F7F8F9;
} }
.info-item { .info-item {
...@@ -225,4 +353,10 @@ getList() ...@@ -225,4 +353,10 @@ getList()
color: #303233; color: #303233;
font-weight: 500; font-weight: 500;
} }
/* 阶段 F：剩余时间 ≤ 3 天橙色警示 */
.warn-text {
color: #E6A23C;
font-weight: 600;
}
</style> </style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment