ts-glitter 22.4.7 → 22.5.0

package/lowcode/cms-plugin/shopping-information.js

@@ -15,6 +15,7 @@ import { LanguageBackend } from './language-backend.js';
 import { GlobalUser } from '../glitter-base/global/global-user.js';
 import { InformationModule } from './information/information-module.js';
 const html = String.raw;
+const css = String.raw;
 export class ShoppingInformation {
     static main(gvc) {
         const glitter = gvc.glitter;
@@ -23,6 +24,9 @@ export class ShoppingInformation {
             id: glitter.getUUID(),
             tableId: glitter.getUUID(),
             filterId: glitter.getUUID(),
+            webTypeId: glitter.getUUID(),
+            reverseId: glitter.getUUID(),
+            reverseEditId: glitter.getUUID(),
             type: 'basic',
             data: {
                 ubn: '',
@@ -126,6 +130,11 @@ export class ShoppingInformation {
             bind: vm.id,
             dataList: [{ obj: vm, key: 'type' }],
             view: () => {
+                gvc.glitter.addMtScript([
+                    {
+                        src: `https://raw.githack.com/SortableJS/Sortable/master/Sortable.js`,
+                    },
+                ], () => { }, () => { });
                 if (vm.mainLoading) {
                     ApiUser.getPublicConfig('store-information', 'manager').then((response) => {
                         const data = response.response.value;
@@ -137,7 +146,9 @@ export class ShoppingInformation {
                 const infoModule = new InformationModule(gvc, vm, ShoppingInformation);
                 function createSection(title, description) {
                     return html `
-            <div class="d-flex" style="font-weight: 700;color: #393939; font-size: 16px;line-height: 1.4;gap: 6px;">${title}</div>
+            <div class="d-flex" style="font-weight: 700;color: #393939; font-size: 16px;line-height: 1.4;gap: 6px;">
+              ${title}
+            </div>
             ${description
                         ? html ` <div style="color: #8D8D8D; font-size: 14px; padding-right: 10px;">${description}</div>`
                         : ''}
@@ -145,14 +156,15 @@ export class ShoppingInformation {
                 }
                 function createToggle(title, description, key) {
                     const toggleHtml = html ` <div class="cursor_pointer form-check form-switch m-0 p-0" style="min-width: 50px;">
-              <input
-                class="form-check-input m-0"
-                type="checkbox"
-                onchange="${gvc.event(() => (vm.data[key] = !vm.data[key]))}"
-                ${vm.data[key] ? 'checked' : ''}
-              />
-            </div>`;
-                    return createRow(html `<div>${title}</div>${toggleHtml}`, description, '');
+            <input
+              class="form-check-input m-0"
+              type="checkbox"
+              onchange="${gvc.event(() => (vm.data[key] = !vm.data[key]))}"
+              ${vm.data[key] ? 'checked' : ''}
+            />
+          </div>`;
+                    return createRow(html ` <div>${title}</div>
+              ${toggleHtml}`, description, '');
                 }
                 function createSelect(title, description, key) {
                     return createRow(title, description, html ` <div class="d-flex align-items-center justify-content-center" style="min-width: 150px;">
@@ -198,6 +210,345 @@ export class ShoppingInformation {
                         event: infoModule.invoiceMode(title),
                     }));
                 }
+                function drawReserveSection() {
+                    return gvc.bindView({
+                        bind: vm.reverseId,
+                        view: () => {
+                            var _a;
+                            function drawQuest() {
+                                return BgWidget.questionButton(gvc.event(() => {
+                                    BgWidget.quesDialog({
+                                        gvc: gvc,
+                                        style: '',
+                                        innerHTML(gvc) {
+                                            const hint = '若是商店的每日營業時間為 上午09:00~上午12:00 且星期一固定公休' +
+                                                '作法：新增規則「幾點到幾點」指定時間、再設置「特定星期」指定星期一' +
+                                                '切記公休的規則要再下方，才能覆蓋掉上面的規則';
+                                            return html `
+                          <div class="d-flex flex-column text-white">
+                            <div>若是商店的每日營業時間為 上午09:00~上午12:00 且星期一固定公休，</div>
+                            <div>作法：新增規則「幾點到幾點」指定時間、再設置「特定星期」指定星期一</div>
+                            <div>切記公休的規則要再下方，才能覆蓋掉上面的規則</div>
+                            <img src="${img}" alt="hintImg" style="margin-top:8px;" />
+                          </div>
+                        `;
+                                        },
+                                    });
+                                }));
+                            }
+                            function drawEdition() {
+                                return gvc.bindView({
+                                    bind: vm.reverseEditId,
+                                    view: () => {
+                                        gvc.addStyle(css `
+                      .range-input {
+                        padding: 0 18px;
+                        border-radius: 10px;
+                        border: 1px solid #ddd;
+                        background: #fff;
+                        height: 40px;
+                        gap: 10px;
+                      }
+
+                      .range-input-raw {
+                        display: flex;
+                        gap: 18px;
+                      }
+                    `);
+                                        try {
+                                            const toggleHtml = (ruleIndex) => {
+                                                let toggle = ruleData[ruleIndex].enabled;
+                                                return html `
+                          ${toggle ? "開啟" : "關閉"}
+                        <div
+                          class="cursor_pointer form-check form-switch m-0 p-0"
+                          style="min-width: 50px;"
+                        >
+                          <input
+                            class="form-check-input m-0"
+                            type="checkbox"
+                            onchange="${gvc.event(e => {
+                                                    ruleData[ruleIndex].enabled = !toggle;
+                                                    gvc.notifyDataChange(vm.reverseEditId);
+                                                })}"
+                            ${toggle ? 'checked' : ''}
+                          />
+                        </div>`;
+                                            };
+                                            const rangeView = {
+                                                date: (ruleIndex) => {
+                                                    const dateInput = (dateString, index) => {
+                                                        const date = dateString.split(',');
+                                                        return html `
+                              <div class="d-flex range-input flex-fill">
+                                <input
+                                  class="border-0 w-100"
+                                  value="${date[index]}"
+                                  type="time"
+                                  onchange="${gvc.event(e => {
+                                                            function isValidTimeRange(timeRange) {
+                                                                const [start, end] = timeRange.split(',');
+                                                                const startTime = new Date(`2023-01-01T${start}:00`);
+                                                                const endTime = new Date(`2023-01-01T${end}:00`);
+                                                                return endTime > startTime;
+                                                            }
+                                                            date[index] = e.value;
+                                                            ruleData[ruleIndex].range = isValidTimeRange(`${date[0]},${date[1]}`) ? `${date[0]},${date[1]}` : `${date[1]},${date[0]}`;
+                                                            gvc.notifyDataChange(vm.reverseEditId);
+                                                        })}"
+                                />
+                              </div>
+                            `;
+                                                    };
+                                                    return html `
+                            <div class="h-100  d-flex range-input-raw">
+                              ${dateInput(ruleData[ruleIndex].range, 0)} ${dateInput(ruleData[ruleIndex].range, 1)}
+                            </div>
+                          `;
+                                                },
+                                                week: (ruleIndex) => {
+                                                    return BgWidget.select({
+                                                        callback(value) {
+                                                            ruleData[ruleIndex].range = value;
+                                                            console.log(vm.data);
+                                                        },
+                                                        default: ruleData[ruleIndex].range,
+                                                        gvc: gvc,
+                                                        options: [
+                                                            { key: "1", value: "禮拜一" },
+                                                            { key: "2", value: "禮拜二" },
+                                                            { key: "3", value: "禮拜三" },
+                                                            { key: "4", value: "禮拜四" },
+                                                            { key: "5", value: "禮拜五" },
+                                                            { key: "6", value: "禮拜六" },
+                                                            { key: "7", value: "禮拜日" }
+                                                        ]
+                                                    });
+                                                },
+                                                month: (ruleIndex) => {
+                                                    const monthInput = (monthString, index) => {
+                                                        const month = monthString.split(',');
+                                                        return html `
+                              <div class="d-flex range-input flex-fill">
+                                <input
+                                  class="border-0 w-100"
+                                  value="${month[index]}"
+                                  type="number"
+                                  onchange="${gvc.event(e => {
+                                                            const numberValue = Number(e.value);
+                                                            if (numberValue > 12 || numberValue < 1) {
+                                                                dialog.infoMessage({
+                                                                    text: '請輸入正確的月份數字',
+                                                                    callback: () => {
+                                                                        e.value = month[index];
+                                                                    },
+                                                                });
+                                                            }
+                                                            else {
+                                                                month[index] = e.value;
+                                                                ruleData[ruleIndex].range = `${month[0]},${month[1]}`;
+                                                            }
+                                                        })}"
+                                />
+                                <div class="tx_gray_16 d-flex align-items-center">月</div>
+                              </div>
+                            `;
+                                                    };
+                                                    return html `
+                            <div class="h-100  d-flex range-input-raw">
+                              ${monthInput(ruleData[ruleIndex].range, 0)} ${monthInput(ruleData[ruleIndex].range, 1)}
+                            </div>
+                          `;
+                                                },
+                                            };
+                                            return ruleData
+                                                .map((rule, index) => {
+                                                var _a, _b;
+                                                return html ` <li
+                            class="w-100 mb-2 d-flex align-items-center "
+                            style="overflow: hidden;padding-bottom: 18px;height:58px;"
+                          >
+                            <div class="d-flex align-items-center pe-5 flex-shrink-0" style="width:33%">
+                              <i class="fa-sharp fa-solid fa-grip-dots-vertical me-3 dragItem cursor_move"></i>
+                              ${BgWidget.select({
+                                                    gvc: gvc,
+                                                    callback(value) {
+                                                        rule.rule = value;
+                                                        const initData = {
+                                                            month: () => {
+                                                                return "1,12";
+                                                            },
+                                                            date: () => {
+                                                                return `00:00,23:59`;
+                                                            },
+                                                            week: () => {
+                                                                return "1";
+                                                            }
+                                                        };
+                                                        rule.range = initData[rule.rule]();
+                                                        gvc.notifyDataChange(vm.reverseEditId);
+                                                    },
+                                                    style: 'color:#393939',
+                                                    default: (_a = rule.rule) !== null && _a !== void 0 ? _a : 'month',
+                                                    options: [
+                                                        { key: 'month', value: '月份區間' },
+                                                        { key: 'week', value: '特定星期' },
+                                                        { key: 'date', value: '日期區間' },
+                                                    ],
+                                                })}
+                            </div>
+                            <div class="h-100 pe-5" style="width:52%" >${rangeView[(_b = rule.rule) !== null && _b !== void 0 ? _b : 'month'](index)}</div>
+                            <div class="d-flex flex-shrink-0 position-relative" style="width:15%;gap:6px;">${toggleHtml(index)}
+                              <i class="ms-auto fa-solid fa-xmark-large cursor_pointer" style="color:#B0B0B0" onclick="${gvc.event(() => {
+                                                    ruleData.splice(index, 1);
+                                                    gvc.notifyDataChange(vm.reverseEditId);
+                                                })}"></i>
+                            </div>
+                            
+                          </li>`;
+                                            })
+                                                .join('');
+                                        }
+                                        catch (e) {
+                                            console.log(e);
+                                            return e;
+                                        }
+                                    },
+                                    divCreate: {
+                                        elem: 'ul',
+                                        option: [{ key: 'id', value: vm.reverseEditId }],
+                                        class: 'd-flex flex-column m-0',
+                                        style: 'padding-top:24px;',
+                                    },
+                                    onCreate: () => {
+                                        let n = 0;
+                                        const interval = setInterval(() => {
+                                            n++;
+                                            if (gvc.glitter.window.Sortable) {
+                                                try {
+                                                    function swapArr(arr, index1, index2) {
+                                                        const data = arr[index1];
+                                                        arr.splice(index1, 1);
+                                                        arr.splice(index2, 0, data);
+                                                    }
+                                                    let startIndex = 0;
+                                                    gvc.glitter.window.Sortable.create(gvc.glitter.document.getElementById(vm.reverseEditId), {
+                                                        group: gvc.glitter.getUUID(),
+                                                        animation: 100,
+                                                        handle: '.dragItem',
+                                                        onChange: function (evt) { },
+                                                        onStart: function (evt) {
+                                                            startIndex = evt.oldIndex;
+                                                        },
+                                                        onEnd: (evt) => {
+                                                            swapArr(ruleData, startIndex, evt.newIndex);
+                                                        },
+                                                    });
+                                                }
+                                                catch (e) { }
+                                                clearInterval(interval);
+                                            }
+                                            if (n > 100) {
+                                                clearInterval(interval);
+                                            }
+                                        }, 100);
+                                    },
+                                });
+                            }
+                            gvc.addStyle(css `
+                .quest-Dialog {
+                  padding: 10px;
+                  border-radius: 10px;
+                }
+              `);
+                            let ruleData = (_a = vm.data.ruleData) !== null && _a !== void 0 ? _a : [];
+                            const emptyData = {
+                                enabled: false,
+                                range: '1,12',
+                                rule: 'month',
+                            };
+                            const img = 'https://d3jnmi1tfjgtti.cloudfront.net/file/122538856/sizeoriginal_s*px$_sasas8s7sfscs5s0_messageImage_1748238444050.jpg';
+                            const sectionText = {
+                                first: {
+                                    title: '營業/預約時段管理',
+                                    subTitle: '管理商店的營業時段與公休日，活動預約時間將依此設定自動生成',
+                                    quest: drawQuest(),
+                                },
+                                section: {
+                                    rawTitle: [
+                                        { key: 'rule', text: '規則', width: 'width:33%' },
+                                        {
+                                            key: 'range',
+                                            text: '區間',
+                                            width: 'flex-grow:1',
+                                        },
+                                        { key: 'enabled', text: '預約功能', width: 'width:15%' },
+                                    ],
+                                    data: ruleData,
+                                },
+                                third: {
+                                    text: '※ 下方的規則優先覆蓋上方的規則',
+                                    btn: BgWidget.save(gvc.event(() => {
+                                        ruleData.push(structuredClone(emptyData));
+                                        vm.data.ruleData = ruleData;
+                                        gvc.notifyDataChange(vm.reverseEditId);
+                                    }), '新增規則'),
+                                },
+                            };
+                            return BgWidget.mainCard(html `
+                <div class="d-flex flex-column" style="gap: 24px;">
+                  <!--                reverse first section-->
+                  <div class="d-flex flex-column">
+                    <div class="tx_700">${sectionText.first.title} ${sectionText.first.quest}</div>
+                    <div class="tx_gray_14">${sectionText.first.subTitle}</div>
+                  </div>
+                  <!--                reverse second section-->
+                  <div class="d-flex flex-column">
+                    <div class="d-flex">
+                      ${sectionText.section.rawTitle
+                                .map(rawTitle => {
+                                return html ` <div class="d-flex tx_700" style="${rawTitle.width}">${rawTitle.text}</div> `;
+                            })
+                                .join('')}
+                    </div>
+                    <div class="d-flex flex-column" style="gap:33px;">${drawEdition()}</div>
+                  </div>
+                  <!--                reverse third section-->
+                  <div class="d-flex" style="padding: 12px 20px;background: #F7F7F7;">
+                    <div class="tx_700 d-flex align-items-center">${sectionText.third.text}</div>
+                    <div class="ms-auto">${sectionText.third.btn}</div>
+                  </div>
+                </div>
+              `);
+                        },
+                        divCreate: {},
+                    });
+                }
+                function drawWebTypeSection() {
+                    return gvc.bindView({
+                        bind: vm.webTypeId,
+                        view: () => {
+                            const webTypeSection = {
+                                reserve: drawReserveSection(),
+                            };
+                            return html `
+                <div class="d-flex flex-column">
+                  ${vm.data.web_type
+                                .map((web_type) => {
+                                if (webTypeSection[web_type]) {
+                                    return webTypeSection[web_type];
+                                }
+                                return ``;
+                            })
+                                .filter((item) => item !== '')
+                                .join(BgWidget.mbContainer(24))}
+                  ${BgWidget.mbContainer(24)}
+                </div>
+              `;
+                        },
+                        divCreate: {},
+                    });
+                }
                 const typeMap = {
                     basic: () => {
                         return html `
@@ -314,9 +665,11 @@ export class ShoppingInformation {
                               .shopnex.tw
                             </div>
                           </div>
-                          ${domainType === 'custom' ? (() => {
-                                    return ``;
-                                })() : ``}
+                          ${domainType === 'custom'
+                                    ? (() => {
+                                        return ``;
+                                    })()
+                                    : ``}
                           <div class="d-flex justify-content-end">${BgWidget.save(gvc.event(applyDomain), '申請')}</div>
                         </div>
                       `, 'guide6-5'),
@@ -504,14 +857,15 @@ export class ShoppingInformation {
                             ],
                             callback: (array) => {
                                 vm.data.web_type = array;
+                                gvc.notifyDataChange('web_type');
                             },
                             type: 'multiple',
                         })}
             `);
-                        return BgWidget.mainCard(html `
-              <div class="tx_700">商店類型</div>
-              <div class="tx_gray_14">系統將根據您勾選的項目，開放相對應的功能</div>
-              ${BgWidget.inlineCheckBox({
+                        return (BgWidget.mainCard(html `
+                <div class="tx_700">商店類型</div>
+                <div class="tx_gray_14">系統將根據您勾選的項目，開放相對應的功能</div>
+                ${BgWidget.inlineCheckBox({
                             title: '',
                             gvc,
                             def: vm.data.web_type,
@@ -527,28 +881,28 @@ export class ShoppingInformation {
                             },
                             type: 'multiple',
                         })}
-            `) +
-                            BgWidget.mbContainer(24)
-                            +
-                                BgWidget.mainCard(html `
-              <div class="d-flex flex-column " style="gap:18px;">
-                <div class="tx_700">商店功能</div>
-                ${createToggle('啟用 AI 選品', '透過 AI 選品功能，用戶可以使用自然語言描述找到所需商品', 'ai_search')}
-                ${GlobalUser.getPlan().id > 0
-                                    ? createToggle('啟用聊聊功能', '啟用聊聊功能，方便客戶直接於官網前台與您聯繫，並詢問商品詳細內容', 'chat_toggle')
-                                    : ''}
-                ${createToggle('啟用心願單功能', '方便客戶收藏並管理喜愛的商品清單，隨時查看心儀商品，提升購物體驗與轉換率', 'wishlist')}
-                ${createToggle('啟用顧客評論功能', '顧客可以對您的商品進行評論', 'customer_comment')}
-                ${createToggle('啟用 Cookie 聲明', '如需使用廣告追蹤行為，必須啟用 Cookie 聲明，才可發送廣告', 'cookie_check')}
-                ${createToggle('顯示商品剩餘庫存', '啟用此功能，顧客會在商品頁面看到此商品剩餘的庫存數', 'stock_view')}
-                ${createToggle('線上商店開放預購商品', '啟用此功能，顧客可以在線上商店的商品無庫存時，進行預購', 'pre_order_status')}
-                ${createToggle('商品卡片顯示區間價格', '啟用後，若商品有多個規格、不同價位，前台商品卡片將會使用價格區間來顯示，關閉則顯示該商品規格中最低價者', 'interval_price_card')}
-                ${createToggle('單獨顯示商品特價', '啟用此功能，會將含有特價的商品價格或區間，單獨使用紅字顯示，關閉則採用刪改線的方式呈現特價', 'independent_special_price')}
-                ${createPickUpModeDialog('取貨號碼', '針對特店取貨功能，開啟取貨號碼功能消費者需告知商家取貨號碼並前往特店取貨')}
-                ${createCheckoutModeDialog('訂單結算模式', '設定訂單結算模式，可調整顧客累積消費金額、會員等級、數據分析的統計機制')}
-                ${createInvoiceModeDialog('發票開立時機', '設定發票開立的時機，可在商家想要的時間點，開立並發送訂單發票')}
-              </div>
-            `);
+              `) +
+                            BgWidget.mbContainer(24) +
+                            drawWebTypeSection() +
+                            BgWidget.mainCard(html `
+                <div class="d-flex flex-column " style="gap:18px;">
+                  <div class="tx_700">商店功能</div>
+                  ${createToggle('啟用 AI 選品', '透過 AI 選品功能，用戶可以使用自然語言描述找到所需商品', 'ai_search')}
+                  ${GlobalUser.getPlan().id > 0
+                                ? createToggle('啟用聊聊功能', '啟用聊聊功能，方便客戶直接於官網前台與您聯繫，並詢問商品詳細內容', 'chat_toggle')
+                                : ''}
+                  ${createToggle('啟用心願單功能', '方便客戶收藏並管理喜愛的商品清單，隨時查看心儀商品，提升購物體驗與轉換率', 'wishlist')}
+                  ${createToggle('啟用顧客評論功能', '顧客可以對您的商品進行評論', 'customer_comment')}
+                  ${createToggle('啟用 Cookie 聲明', '如需使用廣告追蹤行為，必須啟用 Cookie 聲明，才可發送廣告', 'cookie_check')}
+                  ${createToggle('顯示商品剩餘庫存', '啟用此功能，顧客會在商品頁面看到此商品剩餘的庫存數', 'stock_view')}
+                  ${createToggle('線上商店開放預購商品', '啟用此功能，顧客可以在線上商店的商品無庫存時，進行預購', 'pre_order_status')}
+                  ${createToggle('商品卡片顯示區間價格', '啟用後，若商品有多個規格、不同價位，前台商品卡片將會使用價格區間來顯示，關閉則顯示該商品規格中最低價者', 'interval_price_card')}
+                  ${createToggle('單獨顯示商品特價', '啟用此功能，會將含有特價的商品價格或區間，單獨使用紅字顯示，關閉則採用刪改線的方式呈現特價', 'independent_special_price')}
+                  ${createPickUpModeDialog('取貨號碼', '針對特店取貨功能，開啟取貨號碼功能消費者需告知商家取貨號碼並前往特店取貨')}
+                  ${createCheckoutModeDialog('訂單結算模式', '設定訂單結算模式，可調整顧客累積消費金額、會員等級、數據分析的統計機制')}
+                  ${createInvoiceModeDialog('發票開立時機', '設定發票開立的時機，可在商家想要的時間點，開立並發送訂單發票')}
+                </div>
+              `));
                     },
                     global: () => {
                         return BgWidget.mainCard(html `