ts-glitter 13.6.8 → 13.7.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lowcode/Entry.js +1 -1
- package/lowcode/Entry.ts +1 -1
- package/lowcode/jspage/function-page/tool-setting.js +62 -56
- package/lowcode/jspage/function-page/tool-setting.ts +63 -57
- package/lowcode/official_view_component/official/component.js +4 -0
- package/lowcode/official_view_component/official/component.ts +2 -0
- package/lowcode/public-components/headers/sy-02.js +326 -0
- package/lowcode/public-components/headers/sy-02.ts +324 -0
- package/lowcode/public-components/headers/sy-03.js +308 -0
- package/lowcode/public-components/headers/sy-03.ts +307 -0
- package/lowcode/public-components/headers/sy-04.js +3 -3
- package/lowcode/public-components/headers/sy-04.ts +3 -3
- package/package.json +1 -1
|
@@ -0,0 +1,326 @@
|
|
|
1
|
+
import { ApiUser } from "../../glitter-base/route/user.js";
|
|
2
|
+
import { getCheckoutCount } from "../../official_event/e-commerce/get-count.js";
|
|
3
|
+
import { GlobalUser } from "../../glitter-base/global/global-user.js";
|
|
4
|
+
const html = String.raw;
|
|
5
|
+
export class Sy02 {
|
|
6
|
+
static main(gvc, widget, subData) {
|
|
7
|
+
var _a, _b, _c, _d, _e;
|
|
8
|
+
let changePage = (index, type, subData) => { };
|
|
9
|
+
gvc.glitter.getModule(new URL('./official_event/page/change-page.js', gvc.glitter.root_path).href, (cl) => {
|
|
10
|
+
changePage = cl.changePage;
|
|
11
|
+
});
|
|
12
|
+
return html `
|
|
13
|
+
<div style="height: 76px;"></div>
|
|
14
|
+
<nav class="navbar navbar-expand-lg vw-100 header header-place shadow position-fixed top-0 left-0 py-0"
|
|
15
|
+
style="background: ${(_a = widget.formData.theme_color['background']) !== null && _a !== void 0 ? _a : '#000'} !important;height: 76px;z-index:9999;">
|
|
16
|
+
<div class="container header-place h-100">
|
|
17
|
+
|
|
18
|
+
<!--LOGO顯示區塊-->
|
|
19
|
+
<div class="d-flex align-items-center justify-content-center h-100"
|
|
20
|
+
style="gap: 8px;cursor: pointer;">
|
|
21
|
+
<!--手機版選單-->
|
|
22
|
+
<div class="d-flex align-items-center justify-content-center"
|
|
23
|
+
style="width:40px !important;height:40px !important;" onclick="${gvc.event(() => {
|
|
24
|
+
gvc.glitter.setDrawer(gvc.bindView(() => {
|
|
25
|
+
var _a;
|
|
26
|
+
const id = gvc.glitter.getUUID();
|
|
27
|
+
return {
|
|
28
|
+
bind: id,
|
|
29
|
+
view: () => {
|
|
30
|
+
var _a;
|
|
31
|
+
return html `
|
|
32
|
+
<div class="div d-flex align-items-center flex-column w-100 p-3"
|
|
33
|
+
style="border-bottom:1px solid ${widget.formData.theme_color['title']};">
|
|
34
|
+
<div class="d-flex align-items-center ">
|
|
35
|
+
<div>
|
|
36
|
+
<div class="h-100" onclick="${gvc.event(() => {
|
|
37
|
+
changePage('index', 'home', {});
|
|
38
|
+
})}"> ${(widget.formData.logo.type === 'text') ? html `
|
|
39
|
+
<div class=" fw-bold d-flex align-items-center justify-content-center"
|
|
40
|
+
style="width: 150px; margin-bottom: 20px;font-size: 36px;color: ${(_a = widget.formData.theme_color['title']) !== null && _a !== void 0 ? _a : '#000'};">
|
|
41
|
+
${widget.formData.logo.value}
|
|
42
|
+
</div>
|
|
43
|
+
` : html `<img style="width: 150px;
|
|
44
|
+
background-position: center;
|
|
45
|
+
background-size: cover;
|
|
46
|
+
background-repeat: no-repeat;
|
|
47
|
+
border-radius: 10px;
|
|
48
|
+
margin-bottom: 20px;"
|
|
49
|
+
src="${widget.formData.logo.value}">
|
|
50
|
+
`}
|
|
51
|
+
</div>
|
|
52
|
+
|
|
53
|
+
</div>
|
|
54
|
+
</div>
|
|
55
|
+
<div class="position-relative"><input
|
|
56
|
+
class="form-control fw-500 "
|
|
57
|
+
placeholder="找商品"
|
|
58
|
+
autocomplete="off" value=""
|
|
59
|
+
onchange="${gvc.event((e, event) => {
|
|
60
|
+
gvc.glitter.href = `/all-product?search=${e.value}`;
|
|
61
|
+
})}">
|
|
62
|
+
|
|
63
|
+
<div style=" position: absolute;
|
|
64
|
+
right: 10px;
|
|
65
|
+
top: 50%;
|
|
66
|
+
transform: translateY(-50%);
|
|
67
|
+
color: rgb(107, 114, 128);"><i
|
|
68
|
+
class="fa-solid fa-magnifying-glass"></i></div>
|
|
69
|
+
</div>
|
|
70
|
+
</div>
|
|
71
|
+
|
|
72
|
+
<div class="offcanvas-body p-0 "
|
|
73
|
+
>
|
|
74
|
+
${gvc.bindView(() => {
|
|
75
|
+
const id = gvc.glitter.getUUID();
|
|
76
|
+
const vm = {
|
|
77
|
+
data: []
|
|
78
|
+
};
|
|
79
|
+
ApiUser.getPublicConfig('menu-setting', 'manager', window.appName).then((res) => {
|
|
80
|
+
vm.data = res.response.value;
|
|
81
|
+
gvc.notifyDataChange(id);
|
|
82
|
+
});
|
|
83
|
+
return {
|
|
84
|
+
bind: id,
|
|
85
|
+
view: () => {
|
|
86
|
+
function resetToggle() {
|
|
87
|
+
function loop(data) {
|
|
88
|
+
data.map((dd) => {
|
|
89
|
+
var _a;
|
|
90
|
+
dd.open = false;
|
|
91
|
+
loop((_a = dd.items) !== null && _a !== void 0 ? _a : []);
|
|
92
|
+
});
|
|
93
|
+
}
|
|
94
|
+
loop(vm.data);
|
|
95
|
+
}
|
|
96
|
+
function loopItems(data, show_border) {
|
|
97
|
+
return data.map((dd) => {
|
|
98
|
+
var _a, _b, _c, _d, _e;
|
|
99
|
+
return html `
|
|
100
|
+
<li style="${(show_border) ? `border-bottom: 1px solid ${(_a = widget.formData.theme_color['title']) !== null && _a !== void 0 ? _a : '#000'} !important;` : ``}">
|
|
101
|
+
<div class="nav-link d-flex justify-content-between"
|
|
102
|
+
style="padding: 16px;"
|
|
103
|
+
onclick="${gvc.event(() => {
|
|
104
|
+
var _a;
|
|
105
|
+
if (((_a = dd.items) !== null && _a !== void 0 ? _a : []).length === 0) {
|
|
106
|
+
if (dd.link) {
|
|
107
|
+
gvc.glitter.href = dd.link;
|
|
108
|
+
gvc.glitter.closeDrawer();
|
|
109
|
+
}
|
|
110
|
+
}
|
|
111
|
+
else {
|
|
112
|
+
let og = dd.open;
|
|
113
|
+
resetToggle();
|
|
114
|
+
if (!og) {
|
|
115
|
+
dd.open = true;
|
|
116
|
+
}
|
|
117
|
+
gvc.notifyDataChange(id);
|
|
118
|
+
}
|
|
119
|
+
})}">
|
|
120
|
+
<div style="color: ${(_b = widget.formData.theme_color['title']) !== null && _b !== void 0 ? _b : '#000'} !important;"
|
|
121
|
+
onclick="${gvc.event((e, event) => {
|
|
122
|
+
if (dd.link) {
|
|
123
|
+
gvc.glitter.href = dd.link;
|
|
124
|
+
gvc.glitter.closeDrawer();
|
|
125
|
+
}
|
|
126
|
+
event.stopPropagation();
|
|
127
|
+
event.preventDefault();
|
|
128
|
+
})}">${dd.title}
|
|
129
|
+
</div>
|
|
130
|
+
${((_c = dd.items) !== null && _c !== void 0 ? _c : []).length ? `<i class="fa-solid ${dd.open ? `fa-angle-up` : `fa-angle-down`}"
|
|
131
|
+
style="color: ${(_d = widget.formData.theme_color['title']) !== null && _d !== void 0 ? _d : '#000'} !important;"></i>` : ``}
|
|
132
|
+
</div>
|
|
133
|
+
${dd.open ? `<ul class="ps-3 pb-2">${loopItems((_e = dd.items) !== null && _e !== void 0 ? _e : [], false)}</ul>` : ``}
|
|
134
|
+
</li>
|
|
135
|
+
`;
|
|
136
|
+
}).join('');
|
|
137
|
+
}
|
|
138
|
+
return loopItems(vm.data, true);
|
|
139
|
+
},
|
|
140
|
+
divCreate: {
|
|
141
|
+
class: `navbar-nav me-auto mb-2 mb-lg-0`,
|
|
142
|
+
style: ``,
|
|
143
|
+
elem: `ul`
|
|
144
|
+
}
|
|
145
|
+
};
|
|
146
|
+
})}
|
|
147
|
+
</div>`;
|
|
148
|
+
},
|
|
149
|
+
divCreate: {
|
|
150
|
+
class: `w-100 h-100`, style: `z-index: 9999;overflow-y:auto;
|
|
151
|
+
background: ${(_a = widget.formData.theme_color['background']) !== null && _a !== void 0 ? _a : '#000'};overflow-x: hidden;`
|
|
152
|
+
}
|
|
153
|
+
};
|
|
154
|
+
}), () => {
|
|
155
|
+
gvc.glitter.openDrawer(280);
|
|
156
|
+
});
|
|
157
|
+
})}">
|
|
158
|
+
<i class="fa-solid fa-bars fa-fw d-sm-none " style="font-size: 20px;
|
|
159
|
+
color: ${(_b = widget.formData.theme_color['title']) !== null && _b !== void 0 ? _b : '#000'};"></i>
|
|
160
|
+
</div>
|
|
161
|
+
<div class="${(widget.formData.logo.type === 'text') ? `` : `h-100`}"
|
|
162
|
+
onclick="${gvc.event(() => {
|
|
163
|
+
changePage('index', 'home', {});
|
|
164
|
+
})}"> ${(widget.formData.logo.type === 'text') ? html `
|
|
165
|
+
<div class=" fw-bold d-flex align-items-center h-100 mb-1 mb-sm-auto"
|
|
166
|
+
style="font-size: 28px;line-height: 28px;color: ${(_c = widget.formData.theme_color['title']) !== null && _c !== void 0 ? _c : '#000'};">
|
|
167
|
+
${widget.formData.logo.value}
|
|
168
|
+
</div>
|
|
169
|
+
` : html `
|
|
170
|
+
<img src="${widget.formData.logo.value}" style="height: 100%;">
|
|
171
|
+
`}
|
|
172
|
+
</div>
|
|
173
|
+
</div>
|
|
174
|
+
<!--選單列表顯示區塊-->
|
|
175
|
+
<ul class="navbar-nav d-none d-sm-block flex-fill ps-2"
|
|
176
|
+
style="">
|
|
177
|
+
${gvc.bindView(() => {
|
|
178
|
+
const id = gvc.glitter.getUUID();
|
|
179
|
+
const vm = {
|
|
180
|
+
data: []
|
|
181
|
+
};
|
|
182
|
+
ApiUser.getPublicConfig('menu-setting', 'manager', window.appName).then((res) => {
|
|
183
|
+
vm.data = res.response.value;
|
|
184
|
+
gvc.notifyDataChange(id);
|
|
185
|
+
});
|
|
186
|
+
return {
|
|
187
|
+
bind: id,
|
|
188
|
+
view: () => {
|
|
189
|
+
function loopItems(data) {
|
|
190
|
+
return data.map((dd) => {
|
|
191
|
+
var _a, _b;
|
|
192
|
+
return html `
|
|
193
|
+
<li class="nav-item dropdown">
|
|
194
|
+
<a class="nav-link header-link "
|
|
195
|
+
style="color: ${(_a = widget.formData.theme_color['title']) !== null && _a !== void 0 ? _a : '#000'} !important;cursor: pointer;"
|
|
196
|
+
onclick="${gvc.event(() => {
|
|
197
|
+
if (dd.link) {
|
|
198
|
+
gvc.glitter.href = dd.link;
|
|
199
|
+
}
|
|
200
|
+
})}"
|
|
201
|
+
>${dd.title}
|
|
202
|
+
${dd.items.length > 0 ? `<i class="fa-solid fa-angle-down ms-2"></i>` : ``}</a>
|
|
203
|
+
${dd.items.length > 0 ? `<ul class="dropdown-menu" style="background:${(_b = widget.formData.theme_color['background']) !== null && _b !== void 0 ? _b : '#000'} !important;
|
|
204
|
+
cursor: pointer;
|
|
205
|
+
z-index: 99999;">${loopItems(dd.items)}</ul>` : ``}
|
|
206
|
+
</li>`;
|
|
207
|
+
}).join('');
|
|
208
|
+
}
|
|
209
|
+
return loopItems(vm.data);
|
|
210
|
+
},
|
|
211
|
+
divCreate: {
|
|
212
|
+
class: `navbar-nav ms-3 me-auto`, style: ``, elem: `ul`
|
|
213
|
+
}
|
|
214
|
+
};
|
|
215
|
+
})}
|
|
216
|
+
</ul>
|
|
217
|
+
<div class="d-flex align-items-center">
|
|
218
|
+
<!--固定按鈕顯示區塊-->
|
|
219
|
+
<ul class="navbar-nav flex-row ms-auto">
|
|
220
|
+
<li class="nav-item d-none d-sm-flex align-items-center justify-content-center"
|
|
221
|
+
style="">
|
|
222
|
+
${gvc.bindView(() => {
|
|
223
|
+
const vm = {
|
|
224
|
+
id: gvc.glitter.getUUID(),
|
|
225
|
+
toggle: false
|
|
226
|
+
};
|
|
227
|
+
return {
|
|
228
|
+
bind: vm.id,
|
|
229
|
+
view: () => {
|
|
230
|
+
var _a, _b;
|
|
231
|
+
if (!vm.toggle) {
|
|
232
|
+
return html `<i class="fa-regular fa-magnifying-glass"
|
|
233
|
+
style="color: ${(_a = widget.formData.theme_color['title']) !== null && _a !== void 0 ? _a : '#000'};cursor: pointer;font-size:20px;"
|
|
234
|
+
onclick="${gvc.event(() => {
|
|
235
|
+
vm.toggle = !vm.toggle;
|
|
236
|
+
gvc.notifyDataChange(vm.id);
|
|
237
|
+
})}"></i>`;
|
|
238
|
+
}
|
|
239
|
+
else {
|
|
240
|
+
return html `<a
|
|
241
|
+
class="nav-link search-container d-flex align-items-center"
|
|
242
|
+
><i
|
|
243
|
+
class="fa-regular fa-circle-xmark"
|
|
244
|
+
style="color: ${(_b = widget.formData.theme_color['title']) !== null && _b !== void 0 ? _b : '#000'};cursor: pointer;font-size:20px;"
|
|
245
|
+
onclick="${gvc.event(() => {
|
|
246
|
+
vm.toggle = !vm.toggle;
|
|
247
|
+
gvc.notifyDataChange(vm.id);
|
|
248
|
+
})}"
|
|
249
|
+
></i><input
|
|
250
|
+
class="ms-3 form-control" style="height:40px;"
|
|
251
|
+
placeholder="輸入商品關鍵字。" autocomplete="off"
|
|
252
|
+
onchange="${gvc.event((e, event) => {
|
|
253
|
+
gvc.glitter.href = `/all-product?search=${e.value}`;
|
|
254
|
+
vm.toggle = !vm.toggle;
|
|
255
|
+
gvc.notifyDataChange(vm.id);
|
|
256
|
+
})}">
|
|
257
|
+
</a>`;
|
|
258
|
+
}
|
|
259
|
+
},
|
|
260
|
+
divCreate: {
|
|
261
|
+
class: `nav-link search-container`, elem: `a`
|
|
262
|
+
}
|
|
263
|
+
};
|
|
264
|
+
})}
|
|
265
|
+
</li>
|
|
266
|
+
<li class="nav-item d-flex align-items-center justify-content-center"
|
|
267
|
+
style="width:40px !important;">
|
|
268
|
+
${gvc.bindView(() => {
|
|
269
|
+
const vm = {
|
|
270
|
+
id: gvc.glitter.getUUID(),
|
|
271
|
+
count: 0
|
|
272
|
+
};
|
|
273
|
+
getCheckoutCount((count) => {
|
|
274
|
+
vm.count = count;
|
|
275
|
+
gvc.notifyDataChange(vm.id);
|
|
276
|
+
});
|
|
277
|
+
return {
|
|
278
|
+
bind: vm.id,
|
|
279
|
+
view: () => {
|
|
280
|
+
var _a;
|
|
281
|
+
return html `<span class="position-relative">
|
|
282
|
+
<i class="fa-duotone fa-cart-shopping"
|
|
283
|
+
style="color: ${(_a = widget.formData.theme_color['title']) !== null && _a !== void 0 ? _a : '#000'} !important;cursor: pointer;font-size:20px;"></i>
|
|
284
|
+
${(vm.count) ? `<div class="position-absolute"
|
|
285
|
+
style="font-size: 10px;right: -10px;top: -6px;">
|
|
286
|
+
<div class="rounded-circle bg-danger text-white align-items-center justify-content-center fw-500 d-flex"
|
|
287
|
+
style="width:18px;height: 18px;color: white !important;background:#fe5541;">${vm.count}
|
|
288
|
+
</div>
|
|
289
|
+
</div>` : ``}
|
|
290
|
+
</span>`;
|
|
291
|
+
},
|
|
292
|
+
divCreate: {
|
|
293
|
+
class: `nav-link js-cart-count `
|
|
294
|
+
}
|
|
295
|
+
};
|
|
296
|
+
})}
|
|
297
|
+
</li>
|
|
298
|
+
<li class="nav-item d-flex align-items-center justify-content-center ms-3 ms-sm-4"
|
|
299
|
+
style="">
|
|
300
|
+
<div class=""
|
|
301
|
+
style="background: ${(_d = widget.formData.theme_color['solid-button-bg']) !== null && _d !== void 0 ? _d : '#000'};
|
|
302
|
+
color: ${(_e = widget.formData.theme_color['solid-button-text']) !== null && _e !== void 0 ? _e : '#000'}; cursor: pointer;
|
|
303
|
+
display: flex;
|
|
304
|
+
width: 100px;
|
|
305
|
+
padding: 7px;
|
|
306
|
+
justify-content: center;
|
|
307
|
+
align-items: center;
|
|
308
|
+
gap: 10px;
|
|
309
|
+
border-radius: 5px;"
|
|
310
|
+
onclick="${gvc.event(() => {
|
|
311
|
+
if (GlobalUser.token) {
|
|
312
|
+
changePage('account_userinfo', 'page', {});
|
|
313
|
+
}
|
|
314
|
+
else {
|
|
315
|
+
changePage('login', 'page', {});
|
|
316
|
+
}
|
|
317
|
+
})}">${(GlobalUser.token) ? `會員管理` : `會員登入`}</div>
|
|
318
|
+
</li>
|
|
319
|
+
</ul>
|
|
320
|
+
</div>
|
|
321
|
+
</div>
|
|
322
|
+
|
|
323
|
+
</nav>`;
|
|
324
|
+
}
|
|
325
|
+
}
|
|
326
|
+
window.glitter.setModule(import.meta.url, Sy02);
|
|
@@ -0,0 +1,324 @@
|
|
|
1
|
+
import {GVC} from "../../glitterBundle/GVController.js";
|
|
2
|
+
import {ApiUser} from "../../glitter-base/route/user.js";
|
|
3
|
+
import {getCheckoutCount} from "../../official_event/e-commerce/get-count.js";
|
|
4
|
+
import {GlobalUser} from "../../glitter-base/global/global-user.js";
|
|
5
|
+
|
|
6
|
+
|
|
7
|
+
const html = String.raw
|
|
8
|
+
|
|
9
|
+
export class Sy02 {
|
|
10
|
+
public static main(gvc: GVC, widget: any, subData: any) {
|
|
11
|
+
let changePage = (index: string, type: 'page' | 'home', subData: any) => {}
|
|
12
|
+
gvc.glitter.getModule(new URL('./official_event/page/change-page.js', gvc.glitter.root_path).href, (cl) => {
|
|
13
|
+
changePage = cl.changePage
|
|
14
|
+
})
|
|
15
|
+
return html`
|
|
16
|
+
<div style="height: 76px;"></div>
|
|
17
|
+
<nav class="navbar navbar-expand-lg vw-100 header header-place shadow position-fixed top-0 left-0 py-0"
|
|
18
|
+
style="background: ${widget.formData.theme_color['background'] ?? '#000'} !important;height: 76px;z-index:9999;">
|
|
19
|
+
<div class="container header-place h-100">
|
|
20
|
+
|
|
21
|
+
<!--LOGO顯示區塊-->
|
|
22
|
+
<div class="d-flex align-items-center justify-content-center h-100"
|
|
23
|
+
style="gap: 8px;cursor: pointer;">
|
|
24
|
+
<!--手機版選單-->
|
|
25
|
+
<div class="d-flex align-items-center justify-content-center"
|
|
26
|
+
style="width:40px !important;height:40px !important;" onclick="${gvc.event(() => {
|
|
27
|
+
gvc.glitter.setDrawer(gvc.bindView(() => {
|
|
28
|
+
const id = gvc.glitter.getUUID()
|
|
29
|
+
return {
|
|
30
|
+
bind: id,
|
|
31
|
+
view: () => {
|
|
32
|
+
return html`
|
|
33
|
+
<div class="div d-flex align-items-center flex-column w-100 p-3"
|
|
34
|
+
style="border-bottom:1px solid ${widget.formData.theme_color['title']};">
|
|
35
|
+
<div class="d-flex align-items-center ">
|
|
36
|
+
<div>
|
|
37
|
+
<div class="h-100" onclick="${gvc.event(() => {
|
|
38
|
+
changePage('index', 'home', {})
|
|
39
|
+
})}"> ${(widget.formData.logo.type === 'text') ? html`
|
|
40
|
+
<div class=" fw-bold d-flex align-items-center justify-content-center"
|
|
41
|
+
style="width: 150px; margin-bottom: 20px;font-size: 36px;color: ${widget.formData.theme_color['title'] ?? '#000'};">
|
|
42
|
+
${widget.formData.logo.value}
|
|
43
|
+
</div>
|
|
44
|
+
` : html`<img style="width: 150px;
|
|
45
|
+
background-position: center;
|
|
46
|
+
background-size: cover;
|
|
47
|
+
background-repeat: no-repeat;
|
|
48
|
+
border-radius: 10px;
|
|
49
|
+
margin-bottom: 20px;"
|
|
50
|
+
src="${widget.formData.logo.value}">
|
|
51
|
+
`}
|
|
52
|
+
</div>
|
|
53
|
+
|
|
54
|
+
</div>
|
|
55
|
+
</div>
|
|
56
|
+
<div class="position-relative"><input
|
|
57
|
+
class="form-control fw-500 "
|
|
58
|
+
placeholder="找商品"
|
|
59
|
+
autocomplete="off" value=""
|
|
60
|
+
onchange="${gvc.event((e, event) => {
|
|
61
|
+
gvc.glitter.href = `/all-product?search=${e.value}`
|
|
62
|
+
})}">
|
|
63
|
+
|
|
64
|
+
<div style=" position: absolute;
|
|
65
|
+
right: 10px;
|
|
66
|
+
top: 50%;
|
|
67
|
+
transform: translateY(-50%);
|
|
68
|
+
color: rgb(107, 114, 128);"><i
|
|
69
|
+
class="fa-solid fa-magnifying-glass"></i></div>
|
|
70
|
+
</div>
|
|
71
|
+
</div>
|
|
72
|
+
|
|
73
|
+
<div class="offcanvas-body p-0 "
|
|
74
|
+
>
|
|
75
|
+
${gvc.bindView(() => {
|
|
76
|
+
const id = gvc.glitter.getUUID()
|
|
77
|
+
const vm = {
|
|
78
|
+
data: []
|
|
79
|
+
}
|
|
80
|
+
ApiUser.getPublicConfig('menu-setting', 'manager', (window as any).appName).then((res) => {
|
|
81
|
+
vm.data = res.response.value
|
|
82
|
+
gvc.notifyDataChange(id)
|
|
83
|
+
})
|
|
84
|
+
return {
|
|
85
|
+
bind: id,
|
|
86
|
+
view: () => {
|
|
87
|
+
function resetToggle() {
|
|
88
|
+
function loop(data: any) {
|
|
89
|
+
data.map((dd: any) => {
|
|
90
|
+
(dd as any).open = false
|
|
91
|
+
loop((dd as any).items ?? [])
|
|
92
|
+
})
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
loop(vm.data)
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
function loopItems(data: any,show_border:boolean) {
|
|
99
|
+
return data.map((dd: any) => {
|
|
100
|
+
return html`
|
|
101
|
+
<li style="${(show_border) ? `border-bottom: 1px solid ${widget.formData.theme_color['title'] ?? '#000'} !important;`:``}">
|
|
102
|
+
<div class="nav-link d-flex justify-content-between"
|
|
103
|
+
style="padding: 16px;"
|
|
104
|
+
onclick="${gvc.event(() => {
|
|
105
|
+
if (((dd as any).items ?? []).length === 0) {
|
|
106
|
+
if (dd.link) {
|
|
107
|
+
gvc.glitter.href = dd.link
|
|
108
|
+
gvc.glitter.closeDrawer()
|
|
109
|
+
}
|
|
110
|
+
} else {
|
|
111
|
+
let og = dd.open
|
|
112
|
+
resetToggle()
|
|
113
|
+
if (!og) {
|
|
114
|
+
dd.open = true
|
|
115
|
+
}
|
|
116
|
+
gvc.notifyDataChange(id)
|
|
117
|
+
}
|
|
118
|
+
})}">
|
|
119
|
+
<div style="color: ${widget.formData.theme_color['title'] ?? '#000'} !important;"
|
|
120
|
+
onclick="${gvc.event((e, event) => {
|
|
121
|
+
if (dd.link) {
|
|
122
|
+
gvc.glitter.href = dd.link
|
|
123
|
+
gvc.glitter.closeDrawer()
|
|
124
|
+
}
|
|
125
|
+
event.stopPropagation()
|
|
126
|
+
event.preventDefault()
|
|
127
|
+
})}">${dd.title}
|
|
128
|
+
</div>
|
|
129
|
+
${(dd.items ?? []).length ? `<i class="fa-solid ${dd.open ? `fa-angle-up` : `fa-angle-down`}"
|
|
130
|
+
style="color: ${widget.formData.theme_color['title'] ?? '#000'} !important;"></i>` : ``}
|
|
131
|
+
</div>
|
|
132
|
+
${dd.open ? `<ul class="ps-3 pb-2">${loopItems(dd.items ?? [],false)}</ul>`:``}
|
|
133
|
+
</li>
|
|
134
|
+
`
|
|
135
|
+
}).join('')
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
return loopItems(vm.data,true)
|
|
139
|
+
},
|
|
140
|
+
divCreate: {
|
|
141
|
+
class: `navbar-nav me-auto mb-2 mb-lg-0`,
|
|
142
|
+
style: ``,
|
|
143
|
+
elem: `ul`
|
|
144
|
+
}
|
|
145
|
+
}
|
|
146
|
+
})}
|
|
147
|
+
</div>`
|
|
148
|
+
},
|
|
149
|
+
divCreate: {
|
|
150
|
+
class: `w-100 h-100`, style: `z-index: 9999;overflow-y:auto;
|
|
151
|
+
background: ${widget.formData.theme_color['background'] ?? '#000'};overflow-x: hidden;`
|
|
152
|
+
}
|
|
153
|
+
}
|
|
154
|
+
}), () => {
|
|
155
|
+
gvc.glitter.openDrawer(280)
|
|
156
|
+
})
|
|
157
|
+
})}">
|
|
158
|
+
<i class="fa-solid fa-bars fa-fw d-sm-none " style="font-size: 20px;
|
|
159
|
+
color: ${widget.formData.theme_color['title'] ?? '#000'};"></i>
|
|
160
|
+
</div>
|
|
161
|
+
<div class="${(widget.formData.logo.type === 'text') ? `` : `h-100`}"
|
|
162
|
+
onclick="${gvc.event(() => {
|
|
163
|
+
changePage('index', 'home', {})
|
|
164
|
+
})}"> ${(widget.formData.logo.type === 'text') ? html`
|
|
165
|
+
<div class=" fw-bold d-flex align-items-center h-100 mb-1 mb-sm-auto"
|
|
166
|
+
style="font-size: 28px;line-height: 28px;color: ${widget.formData.theme_color['title'] ?? '#000'};">
|
|
167
|
+
${widget.formData.logo.value}
|
|
168
|
+
</div>
|
|
169
|
+
` : html`
|
|
170
|
+
<img src="${widget.formData.logo.value}" style="height: 100%;">
|
|
171
|
+
`}
|
|
172
|
+
</div>
|
|
173
|
+
</div>
|
|
174
|
+
<!--選單列表顯示區塊-->
|
|
175
|
+
<ul class="navbar-nav d-none d-sm-block flex-fill ps-2"
|
|
176
|
+
style="">
|
|
177
|
+
${gvc.bindView(() => {
|
|
178
|
+
const id = gvc.glitter.getUUID()
|
|
179
|
+
const vm = {
|
|
180
|
+
data: []
|
|
181
|
+
}
|
|
182
|
+
ApiUser.getPublicConfig('menu-setting', 'manager', (window as any).appName).then((res) => {
|
|
183
|
+
vm.data = res.response.value
|
|
184
|
+
gvc.notifyDataChange(id)
|
|
185
|
+
})
|
|
186
|
+
return {
|
|
187
|
+
bind: id,
|
|
188
|
+
view: () => {
|
|
189
|
+
function loopItems(data: any) {
|
|
190
|
+
return data.map((dd: any) => {
|
|
191
|
+
return html`
|
|
192
|
+
<li class="nav-item dropdown">
|
|
193
|
+
<a class="nav-link header-link "
|
|
194
|
+
style="color: ${widget.formData.theme_color['title'] ?? '#000'} !important;cursor: pointer;"
|
|
195
|
+
onclick="${gvc.event(() => {
|
|
196
|
+
if (dd.link) {
|
|
197
|
+
gvc.glitter.href = dd.link
|
|
198
|
+
}
|
|
199
|
+
})}"
|
|
200
|
+
>${dd.title}
|
|
201
|
+
${dd.items.length > 0 ? `<i class="fa-solid fa-angle-down ms-2"></i>` : ``}</a>
|
|
202
|
+
${dd.items.length > 0 ? `<ul class="dropdown-menu" style="background:${widget.formData.theme_color['background'] ?? '#000'} !important;
|
|
203
|
+
cursor: pointer;
|
|
204
|
+
z-index: 99999;">${loopItems(dd.items)}</ul>` : ``}
|
|
205
|
+
</li>`
|
|
206
|
+
}).join('')
|
|
207
|
+
}
|
|
208
|
+
|
|
209
|
+
return loopItems(vm.data)
|
|
210
|
+
},
|
|
211
|
+
divCreate: {
|
|
212
|
+
class: `navbar-nav ms-3 me-auto`, style: ``, elem: `ul`
|
|
213
|
+
}
|
|
214
|
+
}
|
|
215
|
+
})}
|
|
216
|
+
</ul>
|
|
217
|
+
<div class="d-flex align-items-center">
|
|
218
|
+
<!--固定按鈕顯示區塊-->
|
|
219
|
+
<ul class="navbar-nav flex-row ms-auto">
|
|
220
|
+
<li class="nav-item d-none d-sm-flex align-items-center justify-content-center"
|
|
221
|
+
style="">
|
|
222
|
+
${gvc.bindView(() => {
|
|
223
|
+
const vm = {
|
|
224
|
+
id: gvc.glitter.getUUID(),
|
|
225
|
+
toggle: false
|
|
226
|
+
}
|
|
227
|
+
return {
|
|
228
|
+
bind: vm.id,
|
|
229
|
+
view: () => {
|
|
230
|
+
if (!vm.toggle) {
|
|
231
|
+
return html`<i class="fa-regular fa-magnifying-glass"
|
|
232
|
+
style="color: ${widget.formData.theme_color['title'] ?? '#000'};cursor: pointer;font-size:20px;"
|
|
233
|
+
onclick="${gvc.event(() => {
|
|
234
|
+
vm.toggle = !vm.toggle
|
|
235
|
+
gvc.notifyDataChange(vm.id)
|
|
236
|
+
})}"></i>`
|
|
237
|
+
} else {
|
|
238
|
+
return html`<a
|
|
239
|
+
class="nav-link search-container d-flex align-items-center"
|
|
240
|
+
><i
|
|
241
|
+
class="fa-regular fa-circle-xmark"
|
|
242
|
+
style="color: ${widget.formData.theme_color['title'] ?? '#000'};cursor: pointer;font-size:20px;"
|
|
243
|
+
onclick="${gvc.event(() => {
|
|
244
|
+
vm.toggle = !vm.toggle
|
|
245
|
+
gvc.notifyDataChange(vm.id)
|
|
246
|
+
})}"
|
|
247
|
+
></i><input
|
|
248
|
+
class="ms-3 form-control" style="height:40px;"
|
|
249
|
+
placeholder="輸入商品關鍵字。" autocomplete="off"
|
|
250
|
+
onchange="${gvc.event((e, event) => {
|
|
251
|
+
gvc.glitter.href = `/all-product?search=${e.value}`
|
|
252
|
+
vm.toggle = !vm.toggle
|
|
253
|
+
gvc.notifyDataChange(vm.id)
|
|
254
|
+
})}">
|
|
255
|
+
</a>`
|
|
256
|
+
}
|
|
257
|
+
},
|
|
258
|
+
divCreate: {
|
|
259
|
+
class: `nav-link search-container`, elem: `a`
|
|
260
|
+
}
|
|
261
|
+
}
|
|
262
|
+
})}
|
|
263
|
+
</li>
|
|
264
|
+
<li class="nav-item d-flex align-items-center justify-content-center"
|
|
265
|
+
style="width:40px !important;">
|
|
266
|
+
${gvc.bindView(() => {
|
|
267
|
+
const vm = {
|
|
268
|
+
id: gvc.glitter.getUUID(),
|
|
269
|
+
count: 0
|
|
270
|
+
}
|
|
271
|
+
getCheckoutCount((count) => {
|
|
272
|
+
vm.count = count
|
|
273
|
+
gvc.notifyDataChange(vm.id)
|
|
274
|
+
})
|
|
275
|
+
return {
|
|
276
|
+
bind: vm.id,
|
|
277
|
+
view: () => {
|
|
278
|
+
return html`<span class="position-relative">
|
|
279
|
+
<i class="fa-duotone fa-cart-shopping"
|
|
280
|
+
style="color: ${widget.formData.theme_color['title'] ?? '#000'} !important;cursor: pointer;font-size:20px;"></i>
|
|
281
|
+
${(vm.count) ? `<div class="position-absolute"
|
|
282
|
+
style="font-size: 10px;right: -10px;top: -6px;">
|
|
283
|
+
<div class="rounded-circle bg-danger text-white align-items-center justify-content-center fw-500 d-flex"
|
|
284
|
+
style="width:18px;height: 18px;color: white !important;background:#fe5541;">${vm.count}
|
|
285
|
+
</div>
|
|
286
|
+
</div>` : ``}
|
|
287
|
+
</span>`
|
|
288
|
+
},
|
|
289
|
+
divCreate: {
|
|
290
|
+
class: `nav-link js-cart-count `
|
|
291
|
+
}
|
|
292
|
+
}
|
|
293
|
+
})}
|
|
294
|
+
</li>
|
|
295
|
+
<li class="nav-item d-flex align-items-center justify-content-center ms-3 ms-sm-4"
|
|
296
|
+
style="">
|
|
297
|
+
<div class=""
|
|
298
|
+
style="background: ${widget.formData.theme_color['solid-button-bg'] ?? '#000'};
|
|
299
|
+
color: ${widget.formData.theme_color['solid-button-text'] ?? '#000'}; cursor: pointer;
|
|
300
|
+
display: flex;
|
|
301
|
+
width: 100px;
|
|
302
|
+
padding: 7px;
|
|
303
|
+
justify-content: center;
|
|
304
|
+
align-items: center;
|
|
305
|
+
gap: 10px;
|
|
306
|
+
border-radius: 5px;"
|
|
307
|
+
onclick="${gvc.event(() => {
|
|
308
|
+
if (GlobalUser.token) {
|
|
309
|
+
changePage('account_userinfo', 'page', {})
|
|
310
|
+
} else {
|
|
311
|
+
changePage('login', 'page', {})
|
|
312
|
+
}
|
|
313
|
+
})}">${(GlobalUser.token) ? `會員管理`:`會員登入`}</div>
|
|
314
|
+
</li>
|
|
315
|
+
</ul>
|
|
316
|
+
</div>
|
|
317
|
+
</div>
|
|
318
|
+
|
|
319
|
+
</nav>`
|
|
320
|
+
}
|
|
321
|
+
|
|
322
|
+
}
|
|
323
|
+
|
|
324
|
+
(window as any).glitter.setModule(import.meta.url, Sy02);
|