454 lines
19 KiB
Vue
454 lines
19 KiB
Vue
<script>
|
|
/**
|
|
* 云商品分组与分页选择器：groups/products/库存文案由父级提供，不直接请求接口。
|
|
* 分组、商品、重试和分页分别发出意图事件；disabled 将购买提交期间的选择锁定。
|
|
*/
|
|
import "~/assets/styles/ProductGroupLabel.B1kWpFA-.css";
|
|
import "~/assets/styles/CloudProductPicker.CAm9rmUl.css";
|
|
import { toDisplayString } from "vue";
|
|
import { renderList } from "vue";
|
|
import { useId } from "vue";
|
|
import { normalizeClass } from "vue";
|
|
import { createBlock } from "vue";
|
|
import { withCtx } from "vue";
|
|
import { createCommentVNode } 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 { NuxtLink } from "#components";
|
|
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 { n as product_name_n } from "~/lib/product-name.js";
|
|
import paginator from "primevue/paginator";
|
|
import skeleton from "primevue/skeleton";
|
|
import ProductGroupLabel from "~/components/ProductGroupLabel.vue";
|
|
var C = {
|
|
class: `cloud-product-picker`,
|
|
},
|
|
w = [`aria-labelledby`],
|
|
T = [`id`],
|
|
E = {
|
|
class: `zone-options`,
|
|
role: `group`,
|
|
"aria-label": `产品专区`,
|
|
},
|
|
D = [`aria-pressed`, `disabled`, `onClick`],
|
|
O = {
|
|
key: 2,
|
|
class: `catalog-empty`,
|
|
},
|
|
k = [`aria-labelledby`],
|
|
A = [`id`],
|
|
j = {
|
|
key: 2,
|
|
class: `catalog-empty`,
|
|
},
|
|
M = {
|
|
key: 3,
|
|
class: `product-options`,
|
|
role: `group`,
|
|
"aria-label": `选择云服务器产品`,
|
|
},
|
|
N = [`aria-pressed`, `disabled`, `onClick`],
|
|
P = {
|
|
key: 0,
|
|
},
|
|
F = {
|
|
key: 1,
|
|
},
|
|
I = Object.assign(
|
|
_plugin_vue_export_helper_t(
|
|
defineComponent({
|
|
__name: `CloudProductPicker`,
|
|
props: {
|
|
groups: {},
|
|
activeGroup: {},
|
|
products: {},
|
|
selectedId: {},
|
|
loading: {
|
|
type: Boolean,
|
|
},
|
|
productLoading: {
|
|
type: Boolean,
|
|
},
|
|
error: {},
|
|
errorSource: {},
|
|
total: {},
|
|
page: {},
|
|
disabled: {
|
|
type: Boolean,
|
|
},
|
|
soldOut: {
|
|
type: Function,
|
|
},
|
|
stockLabel: {
|
|
type: Function,
|
|
},
|
|
},
|
|
emits: [
|
|
`choose-group`,
|
|
`choose-product`,
|
|
`retry-groups`,
|
|
`retry-products`,
|
|
`paginate`,
|
|
],
|
|
setup(f, { emit: _ }) {
|
|
let I = _,
|
|
L = useId();
|
|
return (n, _) => {
|
|
let R = skeleton,
|
|
z = button,
|
|
B = message,
|
|
V = ProductGroupLabel,
|
|
H = NuxtLink,
|
|
U = paginator;
|
|
return (
|
|
openBlock(),
|
|
createElementBlock(`div`, C, [
|
|
createElementVNode(
|
|
`section`,
|
|
{
|
|
class: `selection-section`,
|
|
"aria-labelledby": `${unref(L)}-lines-title`,
|
|
},
|
|
[
|
|
createElementVNode(
|
|
`h3`,
|
|
{
|
|
id: `${unref(L)}-lines-title`,
|
|
},
|
|
`选择线路`,
|
|
8,
|
|
T,
|
|
),
|
|
f.loading
|
|
? (openBlock(),
|
|
createBlock(R, {
|
|
key: 0,
|
|
height: `110px`,
|
|
}))
|
|
: (openBlock(),
|
|
createElementBlock(
|
|
Fragment,
|
|
{
|
|
key: 1,
|
|
},
|
|
[
|
|
f.error && f.errorSource === `groups`
|
|
? (openBlock(),
|
|
createBlock(
|
|
B,
|
|
{
|
|
key: 0,
|
|
severity: `error`,
|
|
closable: !1,
|
|
},
|
|
{
|
|
default: withCtx(() => [
|
|
createTextVNode(
|
|
toDisplayString(f.error),
|
|
1,
|
|
),
|
|
createVNode(
|
|
z,
|
|
{
|
|
label: `重新加载线路`,
|
|
severity: `secondary`,
|
|
text: ``,
|
|
disabled: f.disabled,
|
|
onClick: (_[0] ||= (e) =>
|
|
I(`retry-groups`)),
|
|
},
|
|
null,
|
|
8,
|
|
[`disabled`],
|
|
),
|
|
]),
|
|
_: 1,
|
|
},
|
|
))
|
|
: f.groups.length
|
|
? (openBlock(),
|
|
createElementBlock(
|
|
Fragment,
|
|
{
|
|
key: 1,
|
|
},
|
|
[
|
|
(_[3] ||= createElementVNode(
|
|
`div`,
|
|
{
|
|
class: `selection-label`,
|
|
},
|
|
`产品专区`,
|
|
-1,
|
|
)),
|
|
createElementVNode(`div`, E, [
|
|
(openBlock(!0),
|
|
createElementBlock(
|
|
Fragment,
|
|
null,
|
|
renderList(
|
|
f.groups,
|
|
(e) => (
|
|
openBlock(),
|
|
createElementBlock(
|
|
`button`,
|
|
{
|
|
key: e.id,
|
|
type: `button`,
|
|
class: normalizeClass([
|
|
`zone-option`,
|
|
{
|
|
active:
|
|
f.activeGroup === e.id,
|
|
},
|
|
]),
|
|
"aria-pressed":
|
|
f.activeGroup === e.id,
|
|
disabled: f.disabled,
|
|
onClick: (t) =>
|
|
I(`choose-group`, e.id),
|
|
},
|
|
[
|
|
createVNode(
|
|
V,
|
|
{
|
|
name: e.name,
|
|
},
|
|
null,
|
|
8,
|
|
[`name`],
|
|
),
|
|
],
|
|
10,
|
|
D,
|
|
)
|
|
),
|
|
),
|
|
128,
|
|
)),
|
|
]),
|
|
],
|
|
64,
|
|
))
|
|
: (openBlock(),
|
|
createElementBlock(`div`, O, [
|
|
(_[5] ||= createElementVNode(
|
|
`i`,
|
|
{
|
|
class: `pi pi-box`,
|
|
"aria-hidden": `true`,
|
|
},
|
|
null,
|
|
-1,
|
|
)),
|
|
(_[6] ||= createElementVNode(
|
|
`p`,
|
|
null,
|
|
`暂未提供可选的云服务器线路`,
|
|
-1,
|
|
)),
|
|
createVNode(
|
|
H,
|
|
{
|
|
to: `/products`,
|
|
},
|
|
{
|
|
default: withCtx(() => [
|
|
...(_[4] ||= [
|
|
createTextVNode(`浏览产品`, -1),
|
|
]),
|
|
]),
|
|
_: 1,
|
|
},
|
|
),
|
|
])),
|
|
],
|
|
64,
|
|
)),
|
|
],
|
|
8,
|
|
w,
|
|
),
|
|
f.groups.length
|
|
? (openBlock(),
|
|
createElementBlock(
|
|
`section`,
|
|
{
|
|
key: 0,
|
|
class: `selection-section`,
|
|
"aria-labelledby": `${unref(L)}-products-title`,
|
|
},
|
|
[
|
|
createElementVNode(
|
|
`h3`,
|
|
{
|
|
id: `${unref(L)}-products-title`,
|
|
class: `products-title`,
|
|
},
|
|
`产品`,
|
|
8,
|
|
A,
|
|
),
|
|
f.productLoading && !f.products.length
|
|
? (openBlock(),
|
|
createBlock(R, {
|
|
key: 0,
|
|
height: `110px`,
|
|
}))
|
|
: f.error && f.errorSource === `products`
|
|
? (openBlock(),
|
|
createBlock(
|
|
B,
|
|
{
|
|
key: 1,
|
|
severity: `error`,
|
|
closable: !1,
|
|
},
|
|
{
|
|
default: withCtx(() => [
|
|
createTextVNode(
|
|
toDisplayString(f.error),
|
|
1,
|
|
),
|
|
createVNode(
|
|
z,
|
|
{
|
|
label: `重新加载商品`,
|
|
severity: `secondary`,
|
|
text: ``,
|
|
disabled: f.disabled,
|
|
onClick: (_[1] ||= (e) =>
|
|
I(`retry-products`)),
|
|
},
|
|
null,
|
|
8,
|
|
[`disabled`],
|
|
),
|
|
]),
|
|
_: 1,
|
|
},
|
|
))
|
|
: !f.products.length && !f.error
|
|
? (openBlock(),
|
|
createElementBlock(`div`, j, [
|
|
...(_[7] ||= [
|
|
createElementVNode(
|
|
`p`,
|
|
null,
|
|
`该专区暂无可售产品`,
|
|
-1,
|
|
),
|
|
]),
|
|
]))
|
|
: (openBlock(),
|
|
createElementBlock(`div`, M, [
|
|
(openBlock(!0),
|
|
createElementBlock(
|
|
Fragment,
|
|
null,
|
|
renderList(
|
|
f.products,
|
|
(t) => (
|
|
openBlock(),
|
|
createElementBlock(
|
|
`button`,
|
|
{
|
|
key: t.id,
|
|
type: `button`,
|
|
class: normalizeClass([
|
|
`product-option`,
|
|
{
|
|
active: f.selectedId === t.id,
|
|
},
|
|
]),
|
|
"aria-pressed":
|
|
f.selectedId === t.id,
|
|
disabled:
|
|
f.disabled || f.soldOut(t),
|
|
onClick: (e) =>
|
|
I(`choose-product`, t.id),
|
|
},
|
|
[
|
|
createElementVNode(
|
|
`strong`,
|
|
null,
|
|
toDisplayString(
|
|
unref(product_name_n)(t.name),
|
|
),
|
|
1,
|
|
),
|
|
f.soldOut(t)
|
|
? (openBlock(),
|
|
createElementBlock(
|
|
`span`,
|
|
P,
|
|
toDisplayString(
|
|
f.stockLabel(t),
|
|
),
|
|
1,
|
|
))
|
|
: (openBlock(),
|
|
createElementBlock(
|
|
`span`,
|
|
F,
|
|
toDisplayString(
|
|
f.selectedId === t.id
|
|
? `当前配置`
|
|
: `查看可选配置`,
|
|
),
|
|
1,
|
|
)),
|
|
],
|
|
10,
|
|
N,
|
|
)
|
|
),
|
|
),
|
|
128,
|
|
)),
|
|
])),
|
|
f.total > 24
|
|
? (openBlock(),
|
|
createBlock(
|
|
U,
|
|
{
|
|
key: 4,
|
|
first: (f.page - 1) * 24,
|
|
rows: 24,
|
|
totalRecords: f.total,
|
|
disabled: f.disabled,
|
|
onPage: (_[2] ||= (e) => I(`paginate`, e)),
|
|
},
|
|
null,
|
|
8,
|
|
[`first`, `totalRecords`, `disabled`],
|
|
))
|
|
: createCommentVNode(``, !0),
|
|
],
|
|
8,
|
|
k,
|
|
))
|
|
: createCommentVNode(``, !0),
|
|
])
|
|
);
|
|
};
|
|
},
|
|
}),
|
|
[[`__scopeId`, `data-v-a438862d`]],
|
|
),
|
|
{
|
|
__name: `CloudProductPicker`,
|
|
},
|
|
);
|
|
export {};
|
|
export default I;
|
|
</script>
|