685 lines
28 KiB
Vue
685 lines
28 KiB
Vue
<script>
|
||
// 实例流量包面板：展示可购规格与已购包，在弹窗模式中按需加载购买列表。
|
||
import "~/assets/styles/FlowPacketPanel.-RJSx13z.css";
|
||
import { toDisplayString } from "vue";
|
||
import { renderList } from "vue";
|
||
import { onMounted } from "vue";
|
||
import { normalizeClass } from "vue";
|
||
import { onBeforeUnmount } from "vue";
|
||
import { watch } from "vue";
|
||
import { createBlock } from "vue";
|
||
import { ref } from "vue";
|
||
import { withCtx } from "vue";
|
||
import { createCommentVNode } from "vue";
|
||
import { computed } from "vue";
|
||
import { isRef } from "vue";
|
||
import { createElementBlock } from "vue";
|
||
import { Fragment } from "vue";
|
||
import { createElementVNode } from "vue";
|
||
import { createTextVNode } from "vue";
|
||
import { unref } from "vue";
|
||
import { defineComponent } from "vue";
|
||
import { createVNode } from "vue";
|
||
import { openBlock } from "vue";
|
||
import { useApi } from "~/lib/auth.js";
|
||
import dialog from "primevue/dialog";
|
||
import button from "primevue/button";
|
||
import { t as _plugin_vue_export_helper_t } from "~/lib/_plugin-vue_export-helper.js";
|
||
import message from "primevue/message";
|
||
import { r as dict_r } from "~/lib/dict.js";
|
||
import OperationNotice from "~/components/OperationNotice.vue";
|
||
import tag from "primevue/tag";
|
||
import { n as complete_list_n } from "~/lib/complete-list.js";
|
||
var oe = {
|
||
key: 1,
|
||
class: `block`,
|
||
},
|
||
se = {
|
||
class: `info-table`,
|
||
},
|
||
C = {
|
||
key: 0,
|
||
class: `kv`,
|
||
},
|
||
w = {
|
||
class: `kv`,
|
||
},
|
||
T = {
|
||
class: `action-cell`,
|
||
},
|
||
E = {
|
||
key: 0,
|
||
class: `pk-empty`,
|
||
role: `status`,
|
||
},
|
||
ce = {
|
||
key: 2,
|
||
class: `pk-empty`,
|
||
},
|
||
le = {
|
||
key: 1,
|
||
class: `kv`,
|
||
},
|
||
ue = {
|
||
class: `pk-list`,
|
||
},
|
||
de = {
|
||
class: `pk-name`,
|
||
},
|
||
fe = {
|
||
class: `col-mono`,
|
||
},
|
||
D = {
|
||
class: `pk-expire`,
|
||
},
|
||
O = {
|
||
key: 0,
|
||
class: `pk-empty`,
|
||
role: `status`,
|
||
},
|
||
k = {
|
||
key: 2,
|
||
class: `pk-empty`,
|
||
},
|
||
A = {
|
||
key: 3,
|
||
class: `pk-grid`,
|
||
},
|
||
j = {
|
||
class: `pk-card-name`,
|
||
},
|
||
M = {
|
||
class: `pk-card-cap`,
|
||
},
|
||
N = {
|
||
class: `pk-card-price`,
|
||
},
|
||
P = {
|
||
class: `pk-card-tags`,
|
||
},
|
||
F = {
|
||
key: 1,
|
||
class: `pk-card-note`,
|
||
},
|
||
I = Object.assign(
|
||
_plugin_vue_export_helper_t(
|
||
defineComponent({
|
||
__name: `FlowPacketPanel`,
|
||
props: {
|
||
hostId: {},
|
||
flow: {},
|
||
module: {
|
||
default: `mf_cloud`,
|
||
},
|
||
mode: {
|
||
default: `panel`,
|
||
},
|
||
},
|
||
emits: [`pay`],
|
||
setup(_, { emit: S }) {
|
||
let I = _,
|
||
L = S,
|
||
R = useApi(),
|
||
z = ref([]),
|
||
B = ref([]),
|
||
V = ref(!1),
|
||
H = ref(``),
|
||
U = ref(``),
|
||
W = computed(() => {
|
||
let e = I.flow?.flow_packet?.leave_size;
|
||
if (![`mf_cloud`, `remf_cloud`].includes(I.module) || e == null)
|
||
return null;
|
||
let t = Number(e);
|
||
return Number.isFinite(t) && t >= 0 ? t : null;
|
||
});
|
||
function G(e) {
|
||
let t = Number(e ?? 0);
|
||
return t
|
||
? t >= 1024
|
||
? `${(t / 1024).toFixed(2)} TB`
|
||
: `${t} GB`
|
||
: `0`;
|
||
}
|
||
let K = 0,
|
||
q = 0,
|
||
J = !1;
|
||
// 可购规格与云模块已购流量包并行读取，各自保留错误，避免一项失败遮蔽另一项。
|
||
async function Y() {
|
||
if (J || !I.hostId) return;
|
||
let e = ++K,
|
||
t = I.hostId,
|
||
n = I.module,
|
||
r = () => !J && e === K && t === I.hostId && n === I.module;
|
||
((V.value = !0),
|
||
(H.value = ``),
|
||
(U.value = ``),
|
||
(z.value = []),
|
||
(B.value = []));
|
||
try {
|
||
await Promise.all([
|
||
(async () => {
|
||
try {
|
||
let e = await R.get(`/host/${t}/flow_packet`, {
|
||
page: 1,
|
||
limit: 100,
|
||
});
|
||
r() && (z.value = e.list ?? []);
|
||
} catch (e) {
|
||
r() &&
|
||
(H.value =
|
||
e instanceof Error
|
||
? e.message
|
||
: `流量包加载失败，请重试`);
|
||
}
|
||
})(),
|
||
[`mf_cloud`, `remf_cloud`].includes(n) && I.mode === `panel`
|
||
? (async () => {
|
||
try {
|
||
let e = await complete_list_n(
|
||
(e, r) =>
|
||
R.get(`/${n}/${t}/traffic_package`, {
|
||
page: e,
|
||
limit: r,
|
||
}),
|
||
r,
|
||
);
|
||
r() && (B.value = e);
|
||
} catch (e) {
|
||
r() &&
|
||
(U.value =
|
||
e instanceof Error
|
||
? e.message
|
||
: `已购流量包加载失败，请重试`);
|
||
}
|
||
})()
|
||
: Promise.resolve(),
|
||
]);
|
||
} finally {
|
||
r() && (V.value = !1);
|
||
}
|
||
}
|
||
let X = ref(!1),
|
||
Z = ref(null),
|
||
Q = ref(``);
|
||
async function $() {
|
||
((Q.value = ``), (X.value = !0), await Y());
|
||
}
|
||
// 仅允许当前列表中未达月限购的单次规格下单，订单 ID 校验后交给父级支付。
|
||
async function pe(e) {
|
||
if (
|
||
J ||
|
||
Z.value !== null ||
|
||
V.value ||
|
||
H.value ||
|
||
!I.hostId ||
|
||
!z.value.some((t) => t.id === e.id) ||
|
||
e.billing_mode !== 0 ||
|
||
e.monthly_purchase_limit_reached === 1
|
||
)
|
||
return;
|
||
let t = ++q,
|
||
n = I.hostId,
|
||
r = I.module,
|
||
i = () => !J && t === q && n === I.hostId && r === I.module;
|
||
((Q.value = ``), (Z.value = e.id));
|
||
try {
|
||
let t = await R.post(`/host/${n}/flow_packet_order`, {
|
||
id: n,
|
||
flow_packet_id: e.id,
|
||
});
|
||
if (!i()) return;
|
||
if (!/^[1-9]\d*$/.test(String(t.id)))
|
||
throw Error(`流量包订单无效，请重试`);
|
||
((X.value = !1),
|
||
L(`pay`, {
|
||
order_id: t.id,
|
||
amount: e.price,
|
||
}));
|
||
} catch (e) {
|
||
i() &&
|
||
(Q.value =
|
||
e instanceof Error ? e.message : `下单失败，请稍后重试`);
|
||
} finally {
|
||
i() && (Z.value = null);
|
||
}
|
||
}
|
||
return (
|
||
onMounted(() => {
|
||
if (I.mode === `panel`) return Y();
|
||
}),
|
||
watch(
|
||
() => [I.hostId, I.module],
|
||
() => {
|
||
if (
|
||
(K++,
|
||
q++,
|
||
(z.value = []),
|
||
(B.value = []),
|
||
(H.value = ``),
|
||
(U.value = ``),
|
||
(Q.value = ``),
|
||
(V.value = !1),
|
||
(Z.value = null),
|
||
(X.value = !1),
|
||
I.mode === `panel`)
|
||
)
|
||
return Y();
|
||
},
|
||
),
|
||
onBeforeUnmount(() => {
|
||
((J = !0), K++, q++);
|
||
}),
|
||
(n, i) => {
|
||
let a = OperationNotice,
|
||
s = button,
|
||
u = message,
|
||
b = tag,
|
||
S = dialog;
|
||
return (
|
||
openBlock(),
|
||
createElementBlock(
|
||
Fragment,
|
||
null,
|
||
[
|
||
createVNode(
|
||
a,
|
||
{
|
||
message: unref(Q),
|
||
severity: `error`,
|
||
},
|
||
null,
|
||
8,
|
||
[`message`],
|
||
),
|
||
_.mode === `button`
|
||
? (openBlock(),
|
||
createBlock(s, {
|
||
key: 0,
|
||
label: `购买流量包`,
|
||
icon: `pi pi-plus`,
|
||
fluid: ``,
|
||
onClick: $,
|
||
}))
|
||
: (openBlock(),
|
||
createElementBlock(`section`, oe, [
|
||
(i[4] ||= createElementVNode(
|
||
`h4`,
|
||
{
|
||
class: `block-title`,
|
||
},
|
||
`流量包`,
|
||
-1,
|
||
)),
|
||
(i[5] ||= createElementVNode(
|
||
`p`,
|
||
{
|
||
class: `block-desc`,
|
||
},
|
||
` 购买流量包可补充当前实例的可用流量，容量和有效期以套餐为准。 `,
|
||
-1,
|
||
)),
|
||
createElementVNode(`div`, se, [
|
||
unref(W) === null
|
||
? createCommentVNode(``, !0)
|
||
: (openBlock(),
|
||
createElementBlock(`div`, C, [
|
||
(i[1] ||= createElementVNode(
|
||
`span`,
|
||
null,
|
||
`流量包剩余`,
|
||
-1,
|
||
)),
|
||
createElementVNode(
|
||
`b`,
|
||
null,
|
||
toDisplayString(G(unref(W))),
|
||
1,
|
||
),
|
||
])),
|
||
createElementVNode(`div`, w, [
|
||
(i[2] ||= createElementVNode(
|
||
`span`,
|
||
null,
|
||
`流量包购买`,
|
||
-1,
|
||
)),
|
||
createElementVNode(`div`, T, [
|
||
unref(V)
|
||
? (openBlock(),
|
||
createElementBlock(`p`, E, `流量包加载中…`))
|
||
: unref(H)
|
||
? (openBlock(),
|
||
createBlock(
|
||
u,
|
||
{
|
||
key: 1,
|
||
severity: `error`,
|
||
closable: !1,
|
||
},
|
||
{
|
||
default: withCtx(() => [
|
||
createTextVNode(
|
||
toDisplayString(unref(H)) + ` `,
|
||
1,
|
||
),
|
||
createVNode(s, {
|
||
label: `重试`,
|
||
size: `small`,
|
||
severity: `secondary`,
|
||
text: ``,
|
||
onClick: Y,
|
||
}),
|
||
]),
|
||
_: 1,
|
||
},
|
||
))
|
||
: unref(z).length
|
||
? createCommentVNode(``, !0)
|
||
: (openBlock(),
|
||
createElementBlock(
|
||
`p`,
|
||
ce,
|
||
`该实例暂无可购流量包`,
|
||
)),
|
||
unref(z).length
|
||
? (openBlock(),
|
||
createBlock(s, {
|
||
key: 3,
|
||
label: `购买流量包`,
|
||
icon: `pi pi-plus`,
|
||
size: `small`,
|
||
severity: `secondary`,
|
||
outlined: ``,
|
||
onClick: $,
|
||
}))
|
||
: createCommentVNode(``, !0),
|
||
]),
|
||
]),
|
||
unref(B).length || unref(U)
|
||
? (openBlock(),
|
||
createElementBlock(`div`, le, [
|
||
(i[3] ||= createElementVNode(
|
||
`span`,
|
||
null,
|
||
`已购流量包`,
|
||
-1,
|
||
)),
|
||
createElementVNode(`div`, ue, [
|
||
unref(U)
|
||
? (openBlock(),
|
||
createBlock(
|
||
u,
|
||
{
|
||
key: 0,
|
||
severity: `warn`,
|
||
closable: !1,
|
||
},
|
||
{
|
||
default: withCtx(() => [
|
||
createTextVNode(
|
||
toDisplayString(unref(U)) + ` `,
|
||
1,
|
||
),
|
||
createVNode(s, {
|
||
label: `重试`,
|
||
size: `small`,
|
||
severity: `secondary`,
|
||
text: ``,
|
||
onClick: Y,
|
||
}),
|
||
]),
|
||
_: 1,
|
||
},
|
||
))
|
||
: createCommentVNode(``, !0),
|
||
(openBlock(!0),
|
||
createElementBlock(
|
||
Fragment,
|
||
null,
|
||
renderList(
|
||
unref(B),
|
||
(t) => (
|
||
openBlock(),
|
||
createElementBlock(
|
||
`div`,
|
||
{
|
||
key: t.id,
|
||
class: `pk-row`,
|
||
},
|
||
[
|
||
createElementVNode(
|
||
`span`,
|
||
de,
|
||
toDisplayString(t.name),
|
||
1,
|
||
),
|
||
createElementVNode(`span`, fe, [
|
||
createTextVNode(
|
||
toDisplayString(G(t.size)),
|
||
1,
|
||
),
|
||
t.used
|
||
? (openBlock(),
|
||
createElementBlock(
|
||
Fragment,
|
||
{
|
||
key: 0,
|
||
},
|
||
[
|
||
createTextVNode(
|
||
`（已用 ` +
|
||
toDisplayString(
|
||
G(t.used),
|
||
) +
|
||
`）`,
|
||
1,
|
||
),
|
||
],
|
||
64,
|
||
))
|
||
: createCommentVNode(``, !0),
|
||
]),
|
||
createElementVNode(
|
||
`span`,
|
||
D,
|
||
toDisplayString(
|
||
t.expire_time
|
||
? `${(`formatTime` in n ? n.formatTime : unref(dict_r))(t.expire_time)} 到期`
|
||
: `不限时`,
|
||
),
|
||
1,
|
||
),
|
||
],
|
||
)
|
||
),
|
||
),
|
||
128,
|
||
)),
|
||
]),
|
||
]))
|
||
: createCommentVNode(``, !0),
|
||
]),
|
||
])),
|
||
createVNode(
|
||
S,
|
||
{
|
||
visible: unref(X),
|
||
"onUpdate:visible": (i[0] ||= (e) =>
|
||
isRef(X) ? (X.value = e) : null),
|
||
header: `购买流量包`,
|
||
modal: ``,
|
||
style: {
|
||
width: `600px`,
|
||
maxWidth: `calc(100vw - 32px)`,
|
||
},
|
||
closable: unref(Z) === null,
|
||
"close-on-escape": unref(Z) === null,
|
||
},
|
||
{
|
||
default: withCtx(() => [
|
||
unref(V)
|
||
? (openBlock(),
|
||
createElementBlock(`div`, O, `流量包加载中…`))
|
||
: unref(H)
|
||
? (openBlock(),
|
||
createBlock(
|
||
u,
|
||
{
|
||
key: 1,
|
||
severity: `error`,
|
||
closable: !1,
|
||
},
|
||
{
|
||
default: withCtx(() => [
|
||
createTextVNode(
|
||
toDisplayString(unref(H)) + ` `,
|
||
1,
|
||
),
|
||
createVNode(s, {
|
||
label: `重试`,
|
||
size: `small`,
|
||
severity: `secondary`,
|
||
text: ``,
|
||
onClick: Y,
|
||
}),
|
||
]),
|
||
_: 1,
|
||
},
|
||
))
|
||
: unref(z).length
|
||
? (openBlock(),
|
||
createElementBlock(`div`, A, [
|
||
(openBlock(!0),
|
||
createElementBlock(
|
||
Fragment,
|
||
null,
|
||
renderList(
|
||
unref(z),
|
||
(t) => (
|
||
openBlock(),
|
||
createElementBlock(
|
||
`div`,
|
||
{
|
||
key: t.id,
|
||
class: normalizeClass([
|
||
`pk-card`,
|
||
{
|
||
"pk-card-disabled":
|
||
t.billing_mode !== 0 ||
|
||
t.monthly_purchase_limit_reached ===
|
||
1,
|
||
},
|
||
]),
|
||
},
|
||
[
|
||
createElementVNode(
|
||
`div`,
|
||
j,
|
||
toDisplayString(t.name),
|
||
1,
|
||
),
|
||
createElementVNode(
|
||
`div`,
|
||
M,
|
||
toDisplayString(t.capacity) +
|
||
` GB`,
|
||
1,
|
||
),
|
||
createElementVNode(
|
||
`div`,
|
||
N,
|
||
`¥` + toDisplayString(t.price),
|
||
1,
|
||
),
|
||
createElementVNode(`div`, P, [
|
||
t.long_term_valid === 1
|
||
? (openBlock(),
|
||
createBlock(b, {
|
||
key: 0,
|
||
value: `长期有效`,
|
||
severity: `success`,
|
||
}))
|
||
: createCommentVNode(``, !0),
|
||
t.monthly_purchase_limit
|
||
? (openBlock(),
|
||
createBlock(
|
||
b,
|
||
{
|
||
key: 1,
|
||
value: `本月还可购 ${t.monthly_purchase_left ?? 0} 份`,
|
||
severity: `secondary`,
|
||
},
|
||
null,
|
||
8,
|
||
[`value`],
|
||
))
|
||
: createCommentVNode(``, !0),
|
||
]),
|
||
t.billing_mode === 0
|
||
? (openBlock(),
|
||
createBlock(
|
||
s,
|
||
{
|
||
key: 0,
|
||
label: `购买`,
|
||
size: `small`,
|
||
loading:
|
||
unref(Z) === t.id,
|
||
disabled:
|
||
unref(Z) !== null ||
|
||
t.monthly_purchase_limit_reached ===
|
||
1,
|
||
onClick: (e) => pe(t),
|
||
},
|
||
null,
|
||
8,
|
||
[
|
||
`loading`,
|
||
`disabled`,
|
||
`onClick`,
|
||
],
|
||
))
|
||
: (openBlock(),
|
||
createElementBlock(
|
||
`span`,
|
||
F,
|
||
`按 GB 计费，请联系客服购买`,
|
||
)),
|
||
],
|
||
2,
|
||
)
|
||
),
|
||
),
|
||
128,
|
||
)),
|
||
]))
|
||
: (openBlock(),
|
||
createElementBlock(
|
||
`div`,
|
||
k,
|
||
`该实例暂无可购流量包`,
|
||
)),
|
||
]),
|
||
_: 1,
|
||
},
|
||
8,
|
||
[`visible`, `closable`, `close-on-escape`],
|
||
),
|
||
],
|
||
64,
|
||
)
|
||
);
|
||
}
|
||
);
|
||
},
|
||
}),
|
||
[[`__scopeId`, `data-v-ca0029df`]],
|
||
),
|
||
{
|
||
__name: `FlowPacketPanel`,
|
||
},
|
||
);
|
||
export {};
|
||
export default I;
|
||
</script>
|