645 lines
26 KiB
Vue
645 lines
26 KiB
Vue
<script>
|
|
// 续费弹窗以实例和优惠码快照绑定报价，避免使用已过期的周期价格提交。
|
|
import "~/assets/styles/InstanceRenewDialog.BHDAL6d3.css";
|
|
import { toDisplayString } from "vue";
|
|
import { useId } from "vue";
|
|
import { onBeforeUnmount } from "vue";
|
|
import { mergeModels } from "vue";
|
|
import { useModel } 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 { withKeys } 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 inputtext from "primevue/inputtext";
|
|
import select from "primevue/select";
|
|
import OperationNotice from "~/components/OperationNotice.vue";
|
|
import OperatePasswordGate from "~/components/OperatePasswordGate.vue";
|
|
import password from "~/components/PasswordField.vue";
|
|
import skeleton from "primevue/skeleton";
|
|
import { n as renewal_quote_n } from "~/lib/renewal-quote.js";
|
|
import { r as renewal_quote_r } from "~/lib/renewal-quote.js";
|
|
import { t as renewal_quote_t } from "~/lib/renewal-quote.js";
|
|
var ue = {
|
|
key: 0,
|
|
class: `rd`,
|
|
},
|
|
de = {
|
|
key: 1,
|
|
class: `rd`,
|
|
},
|
|
fe = {
|
|
class: `rd-row`,
|
|
},
|
|
pe = [`id`],
|
|
me = {
|
|
key: 0,
|
|
class: `rd-hint`,
|
|
},
|
|
he = {
|
|
class: `rd-row`,
|
|
},
|
|
ge = [`id`],
|
|
_e = [`for`],
|
|
ve = [`aria-labelledby`],
|
|
ye = {
|
|
class: `rd-code`,
|
|
},
|
|
T = {
|
|
key: 3,
|
|
class: `rd-promo rd-grow`,
|
|
},
|
|
E = {
|
|
class: `rd-row`,
|
|
},
|
|
D = [`for`],
|
|
O = {
|
|
class: `rd-quote`,
|
|
},
|
|
k = {
|
|
key: 0,
|
|
class: `rd-quote-row`,
|
|
},
|
|
A = {
|
|
class: `rd-discount`,
|
|
},
|
|
j = {
|
|
class: `rd-quote-row`,
|
|
},
|
|
M = {
|
|
class: `rd-price`,
|
|
},
|
|
N = Object.assign(
|
|
_plugin_vue_export_helper_t(
|
|
defineComponent({
|
|
__name: `InstanceRenewDialog`,
|
|
props: mergeModels(
|
|
{
|
|
hostId: {},
|
|
},
|
|
{
|
|
modelValue: {
|
|
type: Boolean,
|
|
default: !1,
|
|
},
|
|
modelModifiers: {},
|
|
},
|
|
),
|
|
emits: mergeModels([`paid`], [`update:modelValue`]),
|
|
setup(r, { emit: _ }) {
|
|
let x = useModel(r, `modelValue`),
|
|
N = r,
|
|
P = _,
|
|
F = useApi(),
|
|
I = ref(``),
|
|
L = useId(),
|
|
R = ref(!1),
|
|
z = ref(!1),
|
|
B = ref([]),
|
|
V = ref(``),
|
|
H = ref(``),
|
|
U = ref([]),
|
|
W = ref(``),
|
|
G = ref(``),
|
|
K = 0,
|
|
q = ref(``),
|
|
J = computed(
|
|
() => B.value.find((e) => e.billing_cycle === V.value) ?? null,
|
|
),
|
|
Y = () => JSON.stringify([N.hostId, U.value]),
|
|
X = computed(
|
|
() =>
|
|
x.value &&
|
|
!R.value &&
|
|
!z.value &&
|
|
!!V.value &&
|
|
!!J.value &&
|
|
q.value === Y(),
|
|
),
|
|
be = computed(() => J.value?.price ?? ``),
|
|
Z = computed(() => Number(J.value?.client_level_discount ?? 0));
|
|
// 获取并规范化周期报价；弹窗关闭、实例变化或优惠码变化后丢弃旧结果。
|
|
async function Q() {
|
|
let e = ++K,
|
|
t = N.hostId,
|
|
n = Y(),
|
|
r = () => e === K && x.value && t === N.hostId && n === Y();
|
|
((R.value = !0), (H.value = ``), (q.value = ``), (B.value = []));
|
|
try {
|
|
let e = {};
|
|
U.value.length && (e[`customfield[promo_code]`] = U.value);
|
|
let i = await renewal_quote_t(
|
|
() => F.get(`/host/${t}/renew`, e),
|
|
r,
|
|
);
|
|
return r()
|
|
? ((B.value = renewal_quote_r(i.host)),
|
|
B.value.some((e) => e.billing_cycle === V.value) ||
|
|
(V.value =
|
|
B.value.find((e) => e.is_current_cycle === 1)
|
|
?.billing_cycle ??
|
|
B.value[0]?.billing_cycle ??
|
|
``),
|
|
(q.value = n),
|
|
!0)
|
|
: !1;
|
|
} catch (e) {
|
|
return (r() && (H.value = renewal_quote_n(e)), !1);
|
|
} finally {
|
|
e === K && (R.value = !1);
|
|
}
|
|
}
|
|
(watch(
|
|
x,
|
|
(e) => {
|
|
if (!e) {
|
|
(K++, (R.value = !1), (q.value = ``));
|
|
return;
|
|
}
|
|
((V.value = ``),
|
|
(U.value = []),
|
|
(W.value = ``),
|
|
(G.value = ``),
|
|
Q());
|
|
},
|
|
{
|
|
immediate: !0,
|
|
},
|
|
),
|
|
watch(
|
|
() => N.hostId,
|
|
() => {
|
|
x.value &&
|
|
((V.value = ``), (U.value = []), (W.value = ``), Q());
|
|
},
|
|
),
|
|
onBeforeUnmount(() => {
|
|
(K++, (R.value = !1));
|
|
}));
|
|
// 优惠码只有报价成功且后台确认可用才生效，否则恢复原优惠码重新报价。
|
|
async function $() {
|
|
let e = W.value.trim();
|
|
if (!e || R.value || z.value) return;
|
|
let t = U.value.slice();
|
|
if (((U.value = [e]), !(await Q()))) {
|
|
let n = H.value;
|
|
U.value.length === 1 &&
|
|
U.value[0] === e &&
|
|
((U.value = t),
|
|
await Q(),
|
|
n && (H.value = `优惠码报价失败，已恢复原报价：${n}`));
|
|
return;
|
|
}
|
|
if (Number(J.value?.manual_promo_code_success ?? 0) !== 1) {
|
|
((U.value = t), await Q(), (H.value = `该优惠码不可用`));
|
|
return;
|
|
}
|
|
W.value = ``;
|
|
}
|
|
async function xe() {
|
|
R.value || z.value || ((U.value = []), await Q());
|
|
}
|
|
// 仅提交当前有效报价对应的周期和优惠码；接口成功后通知父级刷新支付流程。
|
|
async function Se() {
|
|
if (X.value) {
|
|
((z.value = !0), (H.value = ``), (I.value = ``));
|
|
try {
|
|
let e = {
|
|
billing_cycle: V.value,
|
|
};
|
|
(U.value.length &&
|
|
(e.customfield = {
|
|
promo_code: U.value,
|
|
}),
|
|
G.value && (e.client_operate_password = G.value),
|
|
await F.post(`/host/${N.hostId}/renew`, e),
|
|
(x.value = !1),
|
|
P(`paid`));
|
|
} catch (e) {
|
|
I.value = e instanceof Error ? e.message : `续费失败`;
|
|
} finally {
|
|
z.value = !1;
|
|
}
|
|
}
|
|
}
|
|
return (t, n) => {
|
|
let r = OperationNotice,
|
|
i = skeleton,
|
|
a = select,
|
|
s = button,
|
|
u = inputtext,
|
|
_ = password,
|
|
b = OperatePasswordGate,
|
|
C = message,
|
|
w = dialog;
|
|
return (
|
|
openBlock(),
|
|
createElementBlock(
|
|
Fragment,
|
|
null,
|
|
[
|
|
createVNode(
|
|
r,
|
|
{
|
|
message: unref(I),
|
|
severity: `error`,
|
|
},
|
|
null,
|
|
8,
|
|
[`message`],
|
|
),
|
|
createVNode(
|
|
w,
|
|
{
|
|
visible: x.value,
|
|
"onUpdate:visible": (n[4] ||= (e) => (x.value = e)),
|
|
header: `续费`,
|
|
modal: ``,
|
|
draggable: !1,
|
|
style: {
|
|
width: `460px`,
|
|
maxWidth: `calc(100vw - 32px)`,
|
|
},
|
|
},
|
|
{
|
|
footer: withCtx(() => [
|
|
createVNode(s, {
|
|
label: `取消`,
|
|
severity: `secondary`,
|
|
text: ``,
|
|
onClick: (n[3] ||= (e) => (x.value = !1)),
|
|
}),
|
|
createVNode(
|
|
s,
|
|
{
|
|
label: `提交续费`,
|
|
loading: unref(z),
|
|
disabled: !unref(X),
|
|
onClick: Se,
|
|
},
|
|
null,
|
|
8,
|
|
[`loading`, `disabled`],
|
|
),
|
|
]),
|
|
default: withCtx(() => [
|
|
unref(R)
|
|
? (openBlock(),
|
|
createElementBlock(`div`, ue, [
|
|
createVNode(i, {
|
|
height: `120px`,
|
|
}),
|
|
]))
|
|
: unref(B).length
|
|
? (openBlock(),
|
|
createElementBlock(`div`, de, [
|
|
createElementVNode(`div`, fe, [
|
|
createElementVNode(
|
|
`span`,
|
|
{
|
|
id: `${unref(L)}-cycle-label`,
|
|
class: `rd-label`,
|
|
},
|
|
`续费周期`,
|
|
8,
|
|
pe,
|
|
),
|
|
createVNode(
|
|
a,
|
|
{
|
|
"input-id": `${unref(L)}-cycle`,
|
|
"aria-labelledby": `${unref(L)}-cycle-label`,
|
|
modelValue: unref(V),
|
|
"onUpdate:modelValue": (n[0] ||= (e) =>
|
|
isRef(V) ? (V.value = e) : null),
|
|
options: unref(B),
|
|
optionLabel: `name_show`,
|
|
optionValue: `billing_cycle`,
|
|
placeholder: `选择续费周期`,
|
|
class: `rd-grow`,
|
|
disabled: unref(R) || unref(z),
|
|
},
|
|
null,
|
|
8,
|
|
[
|
|
`input-id`,
|
|
`aria-labelledby`,
|
|
`modelValue`,
|
|
`options`,
|
|
`disabled`,
|
|
],
|
|
),
|
|
]),
|
|
unref(B).length === 1
|
|
? (openBlock(),
|
|
createElementBlock(
|
|
`p`,
|
|
me,
|
|
`该产品当前仅支持此续费周期。`,
|
|
))
|
|
: createCommentVNode(``, !0),
|
|
createElementVNode(`div`, he, [
|
|
unref(U).length
|
|
? (openBlock(),
|
|
createElementBlock(
|
|
`span`,
|
|
{
|
|
key: 0,
|
|
id: `${unref(L)}-promo-label`,
|
|
class: `rd-label`,
|
|
},
|
|
`优惠码`,
|
|
8,
|
|
ge,
|
|
))
|
|
: (openBlock(),
|
|
createElementBlock(
|
|
`label`,
|
|
{
|
|
key: 1,
|
|
for: `${unref(L)}-promo`,
|
|
},
|
|
`优惠码`,
|
|
8,
|
|
_e,
|
|
)),
|
|
unref(U).length
|
|
? (openBlock(),
|
|
createElementBlock(
|
|
`div`,
|
|
{
|
|
key: 2,
|
|
class: `rd-promo rd-grow`,
|
|
role: `group`,
|
|
"aria-labelledby": `${unref(L)}-promo-label`,
|
|
},
|
|
[
|
|
createElementVNode(
|
|
`span`,
|
|
ye,
|
|
toDisplayString(unref(U)[0]),
|
|
1,
|
|
),
|
|
createVNode(
|
|
s,
|
|
{
|
|
label: `取消`,
|
|
size: `small`,
|
|
severity: `secondary`,
|
|
text: ``,
|
|
disabled: unref(R) || unref(z),
|
|
onClick: xe,
|
|
},
|
|
null,
|
|
8,
|
|
[`disabled`],
|
|
),
|
|
],
|
|
8,
|
|
ve,
|
|
))
|
|
: (openBlock(),
|
|
createElementBlock(`div`, T, [
|
|
createVNode(
|
|
u,
|
|
{
|
|
id: `${unref(L)}-promo`,
|
|
modelValue: unref(W),
|
|
"onUpdate:modelValue": (n[1] ||= (
|
|
e,
|
|
) =>
|
|
isRef(W) ? (W.value = e) : null),
|
|
placeholder: `选填`,
|
|
class: `rd-grow`,
|
|
disabled: unref(R) || unref(z),
|
|
onKeyup: withKeys($, [`enter`]),
|
|
},
|
|
null,
|
|
8,
|
|
[`id`, `modelValue`, `disabled`],
|
|
),
|
|
createVNode(
|
|
s,
|
|
{
|
|
label: `使用`,
|
|
size: `small`,
|
|
severity: `secondary`,
|
|
outlined: ``,
|
|
disabled:
|
|
!unref(W).trim() ||
|
|
unref(R) ||
|
|
unref(z),
|
|
onClick: $,
|
|
},
|
|
null,
|
|
8,
|
|
[`disabled`],
|
|
),
|
|
])),
|
|
]),
|
|
createVNode(b, null, {
|
|
default: withCtx(() => [
|
|
createElementVNode(`div`, E, [
|
|
createElementVNode(
|
|
`label`,
|
|
{
|
|
for: `${unref(L)}-operate-password`,
|
|
},
|
|
`操作密码`,
|
|
8,
|
|
D,
|
|
),
|
|
createVNode(
|
|
_,
|
|
{
|
|
modelValue: unref(G),
|
|
"onUpdate:modelValue": (n[2] ||= (
|
|
e,
|
|
) =>
|
|
isRef(G) ? (G.value = e) : null),
|
|
"input-id": `${unref(L)}-operate-password`,
|
|
feedback: !1,
|
|
"toggle-mask": ``,
|
|
class: `rd-grow`,
|
|
placeholder: `账户已设置时填写`,
|
|
disabled: unref(z),
|
|
},
|
|
null,
|
|
8,
|
|
[`modelValue`, `input-id`, `disabled`],
|
|
),
|
|
]),
|
|
]),
|
|
_: 1,
|
|
}),
|
|
createElementVNode(`div`, O, [
|
|
unref(Z) > 0
|
|
? (openBlock(),
|
|
createElementBlock(`div`, k, [
|
|
(n[5] ||= createElementVNode(
|
|
`span`,
|
|
null,
|
|
`会员折扣`,
|
|
-1,
|
|
)),
|
|
createElementVNode(
|
|
`span`,
|
|
A,
|
|
`-¥` +
|
|
toDisplayString(
|
|
unref(Z).toFixed(2),
|
|
),
|
|
1,
|
|
),
|
|
]))
|
|
: createCommentVNode(``, !0),
|
|
createElementVNode(`div`, j, [
|
|
(n[6] ||= createElementVNode(
|
|
`span`,
|
|
null,
|
|
`应付金额`,
|
|
-1,
|
|
)),
|
|
createElementVNode(
|
|
`span`,
|
|
M,
|
|
`¥` + toDisplayString(unref(be)),
|
|
1,
|
|
),
|
|
]),
|
|
]),
|
|
unref(H)
|
|
? (openBlock(),
|
|
createBlock(
|
|
C,
|
|
{
|
|
key: 1,
|
|
severity: `error`,
|
|
closable: !1,
|
|
},
|
|
{
|
|
default: withCtx(() => [
|
|
createTextVNode(
|
|
toDisplayString(unref(H)),
|
|
1,
|
|
),
|
|
createVNode(
|
|
s,
|
|
{
|
|
label: `重新获取价格`,
|
|
size: `small`,
|
|
severity: `secondary`,
|
|
text: ``,
|
|
disabled: unref(z),
|
|
onClick: Q,
|
|
},
|
|
null,
|
|
8,
|
|
[`disabled`],
|
|
),
|
|
]),
|
|
_: 1,
|
|
},
|
|
))
|
|
: createCommentVNode(``, !0),
|
|
(n[7] ||= createElementVNode(
|
|
`p`,
|
|
{
|
|
class: `rd-hint`,
|
|
},
|
|
`续费订单创建后需前往订单页完成支付。`,
|
|
-1,
|
|
)),
|
|
]))
|
|
: unref(H)
|
|
? (openBlock(),
|
|
createBlock(
|
|
C,
|
|
{
|
|
key: 3,
|
|
severity: `error`,
|
|
closable: !1,
|
|
},
|
|
{
|
|
default: withCtx(() => [
|
|
createTextVNode(
|
|
toDisplayString(unref(H)),
|
|
1,
|
|
),
|
|
createVNode(
|
|
s,
|
|
{
|
|
label: `重新获取价格`,
|
|
size: `small`,
|
|
severity: `secondary`,
|
|
text: ``,
|
|
disabled: unref(z),
|
|
onClick: Q,
|
|
},
|
|
null,
|
|
8,
|
|
[`disabled`],
|
|
),
|
|
]),
|
|
_: 1,
|
|
},
|
|
))
|
|
: (openBlock(),
|
|
createBlock(
|
|
C,
|
|
{
|
|
key: 2,
|
|
severity: `info`,
|
|
closable: !1,
|
|
},
|
|
{
|
|
default: withCtx(() => [
|
|
...(n[8] ||= [
|
|
createTextVNode(
|
|
`当前产品暂不可续费。`,
|
|
-1,
|
|
),
|
|
]),
|
|
]),
|
|
_: 1,
|
|
},
|
|
)),
|
|
]),
|
|
_: 1,
|
|
},
|
|
8,
|
|
[`visible`],
|
|
),
|
|
],
|
|
64,
|
|
)
|
|
);
|
|
};
|
|
},
|
|
}),
|
|
[[`__scopeId`, `data-v-01429388`]],
|
|
),
|
|
{
|
|
__name: `InstanceRenewDialog`,
|
|
},
|
|
);
|
|
export {};
|
|
export default N;
|
|
</script>
|