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