Skip to content

phsl / client

Go to a project
Commit 150d72d2 by lijinqi
Options

管理端-Api订单管理已完成（搜索未完成） 

管理端-用户Api管理已完成
客户端-api订单已完成
客户端-api资源已完成
parent 205fec1b
Showing with 153 additions and 69 deletions
src/api/computility/resources.js
...@@ -9,6 +9,16 @@ export function listResources(query) { ...@@ -9,6 +9,16 @@ export function listResources(query) {
}) })
} }
// 查询-api资源管理列表
export function listApiResources(query) {
return request({
url: '/apihub/user-api-usage/page',
method: 'get',
params: query
})
}
// 查询订单管理-用户资源管理详细 // 查询订单管理-用户资源管理详细
export function getResources(query) { export function getResources(query) {
return request({ return request({
......
src/views/console/apiOrder.vue
...@@ -106,10 +106,14 @@ ...@@ -106,10 +106,14 @@
<el-table-column label="api名称" align="center" prop="apiName"/> <el-table-column label="api名称" align="center" prop="apiName"/>
<el-table-column label="资源包" align="center" prop="packageName"/> <el-table-column label="资源包" align="center" prop="packageName"/>
<el-table-column label="使用次数" align="center" prop="packageTimes"/> <el-table-column label="使用次数" align="center" prop="packageTimes"/>
<el-table-column label=有效期 align="center" prop="packageValidDays"/> <el-table-column label=有效期 align="center" prop="packageValidDays">
<template #default="scope">
{{ (scope.row.packageValidDays) }}天
</template>
</el-table-column>
<el-table-column label="实付金额" align="center" prop="costPrice"> <el-table-column label="实付金额" align="center" prop="costPrice">
<template #default="scope"> <template #default="scope">
{{ scope.row.costPrice / 100 }} {{ (scope.row.costPrice / 100).toFixed(2) }}元
</template> </template>
</el-table-column> </el-table-column>
<!-- <el-table-column label="商品类别" align="center" prop="category">--> <!-- <el-table-column label="商品类别" align="center" prop="category">-->
......
src/views/console/apiResources.vue
<template> <template>
<div class="app-container"> <div class="app-container">
<el-table v-loading="loading" :data="resourcesList" :max-height="620"> <el-table v-loading="loading" :data="resourcesList" :max-height="620">
<el-table-column label="订单编号" align="center" prop="tradeOrderNo"/> <el-table-column label="api名称" align="center" prop="apiName" width="150px" />
<el-table-column label="商品类别" align="center" prop="categoryName"/> <el-table-column label="套餐名称" align="center" prop="packageName" width="150px" />
<el-table-column <el-table-column label="套餐总量" align="center" prop="packageTimes" />
v-for="(item, index) in resourcesList[0]?.properties.length!==0?resourcesList[0]?.properties.slice(0,4):resourcesList[0]?.properties" <el-table-column label="有效时长" align="center" prop="packageValidDays">
:key="index"
:label="item.propertyName"
>
<template #default="{ row }">
{{ row.properties[index].valueName }}
</template>
</el-table-column>
<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> {{ scope.row.packageValidDays }} 天
</template>
</el-table-column>
<el-table-column label="有效期限" align="center" prop="expTime" width="180">
<template #default="scope">
<span>{{ parseTime(scope.row.expTime, '{y}-{m}-{d}') }}</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="已使用次数" align="center" prop="usedTimes" width="150px" />
<el-table-column
label="过期时间"
align="center"
prop="expireTime"
:formatter="dateFormatter"
width="180px"
/>
<el-table-column
label="购买时间"
align="center"
prop="createTime"
:formatter="dateFormatter"
width="180px"
/>
<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,scope.$index)">详情</el-button>
...@@ -38,56 +39,13 @@ ...@@ -38,56 +39,13 @@
@pagination="getList" @pagination="getList"
/> />
<!-- 添加或修改订单管理-用户资源管理对话框 -->
<el-dialog :title="title" v-model="open" width="800px" append-to-body>
<div>
<div class="info-block">
<div class="info-item flex-align-center flex-space-between">
<div class="label">订单编号</div>
<div class="value">{{ form.tradeOrderNo }}</div>
</div>
<div class="info-item flex-align-center flex-space-between">
<div class="label">商品类别</div>
<div class="value">{{ form.categoryName }}</div>
</div>
</div>
<div class="info-block">
<div class="info-item flex-align-center flex-space-between" v-for="(i,index) in form.properties"
:key="i.index">
<div class="label">{{ i.propertyName }}</div>
<div class="value">{{ i.valueName }}</div>
</div>
</div>
<div class="info-item flex-align-center flex-space-between">
<div class="label">申请时间</div>
<div class="value">{{ parseTime(form.createTime, '{y}-{m}-{d}') }}</div>
</div>
<div class="info-item flex-align-center flex-space-between">
<div class="label">有效期限</div>
<div class="value">{{ parseTime(form.expTime, '{y}-{m}-{d}') }}</div>
</div>
<div class="info-item flex-align-center flex-space-between">
<div class="label">鉴权信息</div>
<div class="value">{{ form.auth}}</div>
</div>
</div>
<template #footer>
<div class="dialog-footer">
<el-button @click="cancel">关闭</el-button>
</div>
</template>
</el-dialog>
</div> </div>
</template> </template>
<script setup name="NaturalResources"> <script setup name="NaturalResources">
import {listResources, getResources} from '@/api/computility/resources' import {listResources, getResources, listApiResources} from '@/api/computility/resources'
import {parseTime} from "../../utils/ruoyi.js"; import dayjs from 'dayjs'
const resourcesList = ref([]) const resourcesList = ref([])
const open = ref(false) const open = ref(false)
...@@ -109,7 +67,7 @@ const {queryParams, form} = toRefs(data) ...@@ -109,7 +67,7 @@ const {queryParams, form} = toRefs(data)
/** 查询订单管理-用户资源管理列表 */ /** 查询订单管理-用户资源管理列表 */
function getList() { function getList() {
loading.value = true loading.value = true
listResources(queryParams.value).then(response => { listApiResources(queryParams.value).then(response => {
resourcesList.value = response.data.list resourcesList.value = response.data.list
total.value = response.data.total total.value = response.data.total
loading.value = false loading.value = false
...@@ -131,6 +89,11 @@ function handleUpdate(row) { ...@@ -131,6 +89,11 @@ function handleUpdate(row) {
}) })
} }
const dateFormatter = (row, column, cellValue) => {
if (!cellValue) return ''
return dayjs(cellValue).format('YYYY-MM-DD HH:mm:ss')
}
getList() getList()
</script> </script>
......
src/views/marketplace/AIMarketplaceDetail.vue
...@@ -104,12 +104,53 @@ ...@@ -104,12 +104,53 @@
<el-tab-pane label="应用说明" name="detail"></el-tab-pane> <el-tab-pane label="应用说明" name="detail"></el-tab-pane>
<el-tab-pane label="接口文档" name="doc"></el-tab-pane> <el-tab-pane label="接口文档" name="doc"></el-tab-pane>
</el-tabs> </el-tabs>
<div class="tab-content-area"> <div class="tab-content-area">
<div class="main-content" v-html="currentHtml"></div> <!-- 应用说明 tab -->
<div v-if="mainTab === 'detail'" class="main-content" v-html="currentHtml"></div>
<!-- 接口文档 tab -->
<div v-else-if="mainTab === 'doc'" class="main-content">
<!-- 接口 + 行业应用卡片 -->
<div class="api-endpoints">
<h2 class="section-title">接口列表</h2>
<div
v-for="endpoint in productData.apiEndPoints"
:key="endpoint.id"
class="endpoint-card"
>
<div class="endpoint-header">
<span class="endpoint-name">{{ endpoint.name }}</span>
<el-tag size="small" type="info">{{ endpoint.method }}</el-tag>
<span class="endpoint-path">{{ endpoint.path }}</span>
</div>
<!-- 行业应用 -->
<div v-if="endpoint.industryApplications?.length" class="applications">
<span class="label">行业应用：</span>
<el-tag
v-for="app in endpoint.industryApplications"
:key="app.id"
size="small"
type="success"
effect="light"
class="application-item"
@click="goToIndustryApplication(app.id)"
>
{{ app.title }}
</el-tag>
</div>
</div>
</div>
<!-- 接口文档 HTML -->
<div class="doc-content" v-html="productData.doc"></div>
</div> </div>
</div> </div>
</div> </div>
</div>
<el-drawer v-model="showDrawer" class="drawer" direction="rtl" :size="694" title="订单详情"> <el-drawer v-model="showDrawer" class="drawer" direction="rtl" :size="694" title="订单详情">
<template #default> <template #default>
...@@ -556,6 +597,11 @@ const clearProtocol = () => { ...@@ -556,6 +597,11 @@ const clearProtocol = () => {
} }
function handleSolution(id) {
router.push(`/industryApplications/detail?id=${id}`)
}
// 暴露 goOrderConfirm 到模板 // 暴露 goOrderConfirm 到模板
defineExpose({ goOrderConfirm }); defineExpose({ goOrderConfirm });
</script> </script>
...@@ -977,5 +1023,66 @@ defineExpose({ goOrderConfirm }); ...@@ -977,5 +1023,66 @@ defineExpose({ goOrderConfirm });
} }
.api-endpoints {
margin-bottom: 20px;
.section-title {
font-size: 18px;
font-weight: bold;
margin-bottom: 12px;
color: #333;
}
.endpoint-card {
border: 1px solid #e4e7ed;
border-radius: 8px;
padding: 16px;
margin-bottom: 16px;
background: #fafafa;
.endpoint-header {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 10px;
.endpoint-name {
font-weight: bold;
font-size: 15px;
color: #333;
}
.endpoint-path {
color: #666;
font-size: 14px;
}
}
.applications {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 8px;
}
.application-item {
cursor: pointer; /* 鼠标变成手型 */
transition: all 0.3s; /* 平滑过渡 */
}
/* 鼠标悬停变色 */
.application-item:hover {
background-color: #67c23a !important; /* 可以自定义颜色 */
color: white !important;
border-color: #67c23a !important;
}
}
}
.doc-content {
margin-top: 20px;
}
</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