79 lines
3.4 KiB
Vue
79 lines
3.4 KiB
Vue
<template>
|
||
<div class="grid gap-6">
|
||
<section class="panel p-5">
|
||
<div class="grid gap-5 lg:grid-cols-[1fr_auto]">
|
||
<div>
|
||
<p class="text-sm font-semibold text-brand-700">开放 API</p>
|
||
<h2 class="mt-2 text-xl font-bold text-slate-950">将代理能力接入你的系统</h2>
|
||
<p class="mt-2 text-sm leading-7 text-slate-500">
|
||
通过开放接口查询套餐、预览订单、创建订单、查询余额和接收回调。需要先提交申请，后台审核通过后发放凭证。
|
||
</p>
|
||
</div>
|
||
<button class="btn-primary" @click="submitApply">提交申请</button>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="grid gap-6 lg:grid-cols-2">
|
||
<div class="panel p-5">
|
||
<h3 class="font-bold text-slate-950">申请状态</h3>
|
||
<pre class="mt-4 whitespace-pre-wrap break-words rounded-md bg-slate-50 p-4 text-xs leading-6 text-slate-600">{{ currentText }}</pre>
|
||
</div>
|
||
<div class="panel p-5">
|
||
<h3 class="font-bold text-slate-950">应用凭证</h3>
|
||
<pre class="mt-4 whitespace-pre-wrap break-words rounded-md bg-slate-950 p-4 text-xs leading-6 text-brand-50">{{ credentialText }}</pre>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="panel p-5">
|
||
<h3 class="font-bold text-slate-950">接口入口</h3>
|
||
<div class="mt-4 grid gap-3 text-sm">
|
||
<code class="rounded-md bg-slate-50 p-3 text-slate-700">POST /api/v1/open/auth/token</code>
|
||
<code class="rounded-md bg-slate-50 p-3 text-slate-700">GET /api/v1/open/package-center/catalog</code>
|
||
<code class="rounded-md bg-slate-50 p-3 text-slate-700">GET /api/v1/open/package-center/static-inventory?productId=1&qiyunPid=项目ID&qiyunAreaId=省份ID</code>
|
||
<code class="rounded-md bg-slate-50 p-3 text-slate-700">POST /api/v1/open/package-center/static-orders/preview</code>
|
||
<code class="rounded-md bg-slate-50 p-3 text-slate-700">POST /api/v1/open/package-center/dynamic-orders</code>
|
||
</div>
|
||
<pre class="mt-4 overflow-x-auto rounded-md bg-slate-950 p-4 text-xs leading-6 text-brand-50">{{ staticOrderExample }}</pre>
|
||
</section>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { computed, onMounted, ref } from "vue";
|
||
import { MemberAPI } from "@/api/member";
|
||
|
||
const current = ref<unknown>(null);
|
||
const credential = ref<unknown>(null);
|
||
|
||
const currentText = computed(() => current.value ? JSON.stringify(current.value, null, 2) : "暂无申请记录");
|
||
const credentialText = computed(() => credential.value ? JSON.stringify(credential.value, null, 2) : "审核通过后显示应用凭证");
|
||
const staticOrderExample = `{
|
||
"productId": 1,
|
||
"durationDays": 30,
|
||
"qiyunPid": "项目ID，独享custom可不传",
|
||
"qiyunProjectName": "项目名称",
|
||
"qiyunAreaId": "省份ID，可选",
|
||
"qiyunAreaName": "省份名称，可选",
|
||
"qiyunNodeId": "节点ID",
|
||
"qiyunNodeName": "节点名称",
|
||
"quantity": 1
|
||
}`;
|
||
|
||
onMounted(load);
|
||
|
||
async function load() {
|
||
const [currentRes, credentialRes] = await Promise.allSettled([
|
||
MemberAPI.openApiCurrent(),
|
||
MemberAPI.openApiCredential(),
|
||
]);
|
||
if (currentRes.status === "fulfilled") current.value = currentRes.value;
|
||
if (credentialRes.status === "fulfilled") credential.value = credentialRes.value;
|
||
}
|
||
|
||
async function submitApply() {
|
||
current.value = await MemberAPI.submitOpenApiApply({
|
||
applyReason: "希望通过开放 API 接入代理套餐、订单和回调能力。",
|
||
});
|
||
}
|
||
</script>
|