ts-glitter 22.5.7 → 22.5.8

package/lowcode/cms-plugin/pos-config-setting.ts

@@ -21,7 +21,7 @@ export class PosConfigSetting {
       id: string;
       tableId: string;
       filterId: string;
-      type: 'basic' | 'function' | 'global';
+      type: 'basic' | 'function' | 'global' | 'finance';
       data: any;
       SEOData: any;
       domain: any;
@@ -91,7 +91,6 @@ export class PosConfigSetting {
           ApiUser.getPublicConfig('store-information', 'manager').then((response: any) => {
             const data = response.response.value;
 
-            // 初始化 vm.data
             vm.data = {
               ubn: '',
               email: '',
@@ -285,23 +284,25 @@ ${BgWidget.customButton({
               button: { color: 'snow', size: 'md' },
               text: { name: '編輯' },
               event: gvc.event(() => {
-                vm.data.prdouct_card_layout=vm.data.prdouct_card_layout??'16:9'
+                vm.data.prdouct_card_layout = vm.data.prdouct_card_layout ?? '16:9';
                 BgWidget.settingDialog({
                   gvc,
                   title,
                   width: 600,
                   innerHTML: gvc => {
-                    return  BgWidget.editeInput({
+                    return BgWidget.editeInput({
                       gvc: gvc,
 
                       title: '卡片比例',
                       default: vm.data.prdouct_card_layout,
                       placeHolder: '請輸入卡片比例，範例: 16:9',
-                      callback: (text) => {
-                        if(text.split(':').map((dd)=>{
-                          return Number.isFinite(Number(dd))
-                        }).length===2){
-                          vm.data.prdouct_card_layout=text
+                      callback: text => {
+                        if (
+                          text.split(':').map(dd => {
+                            return Number.isFinite(Number(dd));
+                          }).length === 2
+                        ) {
+                          vm.data.prdouct_card_layout = text;
                         }
                       },
                     });
@@ -451,11 +452,10 @@ ${BgWidget.customButton({
           },
         };
 
-        return BgWidget.container(html`
-          <div class="title-container">${BgWidget.title('全站設定')}</div>
-          ${BgWidget.tab(
+        return [
+          html`<div class="title-container">${BgWidget.title('全站設定')}</div>`,
+          BgWidget.tab(
             [
-              // { title: '商店訊息', key: 'basic' },
               { title: '功能管理', key: 'function' },
               { title: '金流設定', key: 'finance' },
             ],
@@ -463,25 +463,28 @@ ${BgWidget.customButton({
             vm.type,
             text => {
               vm.type = text as any;
-            }
-          )}
-          ${typeMap[vm.type] ? typeMap[vm.type]() : ''}
-          <div style="margin-top: 300px;"></div>
-          <div class="update-bar-container">
-            ${BgWidget.save(
-              gvc.event(async () => {
-                dialog.dataLoading({ visible: true });
-                await vm.save_info();
-                await Promise.all(PosConfigSetting.saveArray.map(dd => dd()));
-                PosConfigSetting.saveArray = [];
-                dialog.dataLoading({ visible: false });
-                dialog.successMessage({ text: '儲存成功' });
-              }),
-              '儲存',
-              'guide3-5'
-            )}
-          </div>
-        `);
+            },
+            vm.type === 'finance' ? 'margin-bottom: 0 !important;' : ''
+          ),
+          typeMap[vm.type] ? typeMap[vm.type]() : '',
+          BgWidget.mbContainer(300),
+          vm.type === 'finance'
+            ? ''
+            : html`<div class="update-bar-container">
+                ${BgWidget.save(
+                  gvc.event(async () => {
+                    dialog.dataLoading({ visible: true });
+                    await vm.save_info();
+                    await Promise.all(PosConfigSetting.saveArray.map(dd => dd()));
+                    PosConfigSetting.saveArray = [];
+                    dialog.dataLoading({ visible: false });
+                    dialog.successMessage({ text: '儲存成功' });
+                  }),
+                  '儲存',
+                  'guide3-5'
+                )}
+              </div>`,
+        ].join('');
       },
       divCreate: {
         style: 'color: #393939; font-size: 14px;',

package/lowcode/cms-plugin/pos-pages/payment-function.js

@@ -15,83 +15,91 @@ const html = String.raw;
 export class PaymentFunction {
     static cashFinish(gvc, total, callback) {
         gvc.addStyle(`
-            .dialog-box {
-                width: 100vw;
-                height: 100vh;
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                background-color: rgba(0, 0, 0, 0.5);
-                z-index: 10000;
-            }
+      .dialog-box {
+        width: 100vw;
+        height: 100vh;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background-color: rgba(0, 0, 0, 0.5);
+        z-index: 10000;
+      }
 
-            .dialog-absolute {
-                width: 100%;
-                border-top: 1px solid #e2e5f1;
-                position: absolute;
-                left: 0px;
-                bottom: 0px;
-                height: 40px;
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                cursor: pointer;
-            }
+      .dialog-absolute {
+        width: 100%;
+        border-top: 1px solid #e2e5f1;
+        position: absolute;
+        left: 0px;
+        bottom: 0px;
+        height: 40px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+      }
 
-            .hover-cancel {
-                background-color: #fff;
-                border-radius: 0 0 0 0.5rem;
-            }
+      .hover-cancel {
+        background-color: #fff;
+        border-radius: 0 0 0 0.5rem;
+      }
 
-            .hover-cancel:hover {
-                background-color: #e6e6e6;
-            }
+      .hover-cancel:hover {
+        background-color: #e6e6e6;
+      }
 
-            .hover-save {
-                background-color: #393939;
-                border-radius: 0 0 0.5rem;
-            }
+      .hover-save {
+        background-color: #393939;
+        border-radius: 0 0 0.5rem;
+      }
 
-            .hover-save:hover {
-                background-color: #646464;
-            }
-        `);
+      .hover-save:hover {
+        background-color: #646464;
+      }
+    `);
         const dialog = new ShareDialog(gvc.glitter);
         gvc.glitter.innerDialog((gvc) => {
             return html `
-                    <div class="dialog-box">
-                        <div class="dialog-content position-relative pb-5" style="width: 452px;max-width: calc(100% - 20px);">
-                            <div
-                                class="my-3 fs-6 fw-500 text-center"
-                                style="white-space: normal; overflow-wrap: anywhere;font-size: 28px;font-style: normal;font-weight: 700;line-height: normal;letter-spacing: 2.8px;"
-                            >
-                                請先收取現金後進行結帳
-                            </div>
-                            <div style="font-size: 18px;font-style: normal;font-weight: 400;line-height: 160%;letter-spacing: 0.72px;">
-                                本次結帳金額為 <span style="font-size: 28px;font-style: normal;font-weight: 700;line-height: 160%;">$${total.toLocaleString()}</span>
-                            </div>
-                            <div class="d-flex align-items-center justify-content-center" style="margin-top: 24px;font-size: 16px;font-weight: 700;letter-spacing: 0.64px;">
-                                <div
-                                    style="border-radius: 10px;border: 1px solid #DDD;background: #FFF;padding: 12px 24px;color: #393939;width:120px;text-align:center;"
-                                    onclick="${gvc.event(() => {
+          <div class="dialog-box">
+            <div class="dialog-content position-relative pb-5" style="width: 452px;max-width: calc(100% - 20px);">
+              <div
+                class="my-3 fs-6 fw-500 text-center"
+                style="white-space: normal; overflow-wrap: anywhere;font-size: 28px;font-style: normal;font-weight: 700;line-height: normal;letter-spacing: 2.8px;"
+              >
+                請先收取現金後進行結帳
+              </div>
+              <div
+                style="font-size: 18px;font-style: normal;font-weight: 400;line-height: 160%;letter-spacing: 0.72px;"
+              >
+                本次結帳金額為
+                <span style="font-size: 28px;font-style: normal;font-weight: 700;line-height: 160%;"
+                  >$${total.toLocaleString()}</span
+                >
+              </div>
+              <div
+                class="d-flex align-items-center justify-content-center"
+                style="margin-top: 24px;font-size: 16px;font-weight: 700;letter-spacing: 0.64px;"
+              >
+                <div
+                  style="border-radius: 10px;border: 1px solid #DDD;background: #FFF;padding: 12px 24px;color: #393939;width:120px;text-align:center;"
+                  onclick="${gvc.event(() => {
                 gvc.glitter.closeDiaLog();
             })}"
-                                >
-                                    取消
-                                </div>
-                                <div
-                                    style="border-radius: 10px;background: #393939;padding: 12px 24px;color: #FFF;margin-left: 24px;width:120px;text-align:center;"
-                                    onclick="${gvc.event(() => {
+                >
+                  取消
+                </div>
+                <div
+                  style="border-radius: 10px;background: #393939;padding: 12px 24px;color: #FFF;margin-left: 24px;width:120px;text-align:center;"
+                  onclick="${gvc.event(() => {
                 gvc.closeDialog();
                 callback(true);
             })}"
-                                >
-                                    確認
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                `;
+                >
+                  確認
+                </div>
+              </div>
+            </div>
+          </div>
+        `;
         }, 'orderFinish', {
             dismiss: () => {
             },
@@ -112,7 +120,7 @@ export class PaymentFunction {
                 }, (res) => {
                     var _a;
                     const response = JSON.parse(res.result.data);
-                    if (response.code === "250") {
+                    if (response.code === '250') {
                         gvc.closeDialog();
                         callback(true);
                     }
@@ -126,7 +134,7 @@ export class PaymentFunction {
                 gvc.glitter.share.credit_card_callback = (res) => {
                     var _a;
                     const response = JSON.parse(res.result.data);
-                    if (response.code === "250") {
+                    if (response.code === '250') {
                         gvc.closeDialog();
                         callback(true);
                     }
@@ -150,27 +158,36 @@ export class PaymentFunction {
                 }, 100);
             }
             return html `
-                    <div class="dialog-box">
-                        <div class="dialog-content position-relative "
-                             style="width: 370px;max-width: calc(100% - 20px);">
-                            <div class="my-3  fw-500 text-center"
-                                 style="white-space: normal; overflow-wrap: anywhere;font-size: 20px;font-style: normal;font-weight: 700;line-height: normal;letter-spacing: 2.8px;">
-                                請感應或插入信用卡進行付款
-                            </div>
-                            <div style="font-size: 16px;font-style: normal;font-weight: 400;line-height: 160%;letter-spacing: 0.72px;">
-                                若逾時將重新選擇付款方式
-                            </div>
-                            <img class="mt-3" style="max-width:70%;"
-                                 src="https://d3jnmi1tfjgtti.cloudfront.net/file/234285319/size1440_s*px$_scsds7s8sbsfs3s8_b00f1f368f2a9b9fb067a844f940ca2a.gif"></img>
-                            <div class="fw-500 w-100 mt-3"
-                                 style="border-radius: 10px;border: 1px solid #DDD;background: #FFF;padding: 12px 24px;color: #393939;width:120px;text-align:center;"
-                                 onclick="${gvc.event(() => {
+          <div class="dialog-box">
+            <div class="dialog-content position-relative " style="width: 370px;max-width: calc(100% - 20px);">
+              <div
+                class="my-3  fw-500 text-center"
+                style="white-space: normal; overflow-wrap: anywhere;font-size: 20px;font-style: normal;font-weight: 700;line-height: normal;letter-spacing: 2.8px;"
+              >
+                請感應或插入信用卡進行付款
+              </div>
+              <div
+                style="font-size: 16px;font-style: normal;font-weight: 400;line-height: 160%;letter-spacing: 0.72px;"
+              >
+                若逾時將重新選擇付款方式
+              </div>
+              <img
+                class="mt-3"
+                style="max-width:70%;"
+                src="https://d3jnmi1tfjgtti.cloudfront.net/file/234285319/size1440_s*px$_scsds7s8sbsfs3s8_b00f1f368f2a9b9fb067a844f940ca2a.gif"
+              />
+              <div
+                class="fw-500 w-100 mt-3"
+                style="border-radius: 10px;border: 1px solid #DDD;background: #FFF;padding: 12px 24px;color: #393939;width:120px;text-align:center;"
+                onclick="${gvc.event(() => {
                 gvc.glitter.closeDiaLog();
-            })}">取消付款
-                            </div>
-                        </div>
-                    </div>
-                `;
+            })}"
+              >
+                取消付款
+              </div>
+            </div>
+          </div>
+        `;
         }, 'orderFinish', {
             dismiss: () => {
             },
@@ -180,7 +197,7 @@ export class PaymentFunction {
         const dialog = new ShareDialog(gvc.glitter);
         gvc.glitter.innerDialog((gvc) => {
             let block = false;
-            PayConfig.onPayment = (scanText) => {
+            PayConfig.onPayment = scanText => {
                 if (block) {
                     return;
                 }
@@ -195,7 +212,7 @@ export class PaymentFunction {
                     })
                         .join(','),
                     oneTimeKey: scanText,
-                }).then((res) => {
+                }).then(res => {
                     dialog.dataLoading({ visible: false });
                     if (!res.result || !res.response.result) {
                         dialog.errorMessage({ text: '交易失敗' });
@@ -210,62 +227,67 @@ export class PaymentFunction {
             };
             let m_text = '';
             return html `
-                    <div class="dialog-box">
-                        <div class="dialog-content position-relative "
-                             style="width: 370px;max-width: calc(100% - 20px);">
-                            <div class="my-3  fw-500 text-center"
-                                 style="white-space: normal; overflow-wrap: anywhere;font-size: 20px;font-style: normal;font-weight: 700;line-height: normal;letter-spacing: 2.8px;">
-                                請掃描LINE Pay付款條碼
-                            </div>
-                            <img class="mt-3" style="max-width:70%;"
-                                 src="https://d3jnmi1tfjgtti.cloudfront.net/file/234285319/size1440_s*px$_s6sfs4scs5s3s0sa_Screenshot2024-09-06at12.28.00 PM.jpg"></img>
-                            <div class="d-flex w-100 align-items-center mt-3"
-                                 style="border:1px solid grey;height: 50px;">
-                                <input
-                                        class="form-control h-100"
-                                        style="border: none;"
-                                        placeholder="請輸入或掃描付款代碼"
-                                        onchange="${gvc.event((e, event) => {
+          <div class="dialog-box">
+            <div class="dialog-content position-relative " style="width: 370px;max-width: calc(100% - 20px);">
+              <div
+                class="my-3  fw-500 text-center"
+                style="white-space: normal; overflow-wrap: anywhere;font-size: 20px;font-style: normal;font-weight: 700;line-height: normal;letter-spacing: 2.8px;"
+              >
+                請掃描LINE Pay付款條碼
+              </div>
+              <img
+                class="mt-3"
+                style="max-width:70%;"
+                src="https://d3jnmi1tfjgtti.cloudfront.net/file/234285319/size1440_s*px$_s6sfs4scs5s3s0sa_Screenshot2024-09-06at12.28.00 PM.jpg"
+              />
+              <div class="d-flex w-100 align-items-center mt-3" style="border:1px solid grey;height: 50px;">
+                <input
+                  class="form-control h-100"
+                  style="border: none;"
+                  placeholder="請輸入或掃描付款代碼"
+                  onchange="${gvc.event((e, event) => {
                 m_text = e.value;
             })}"
-                                        value="${m_text || ''}"
-                                        onfocus="${gvc.event(() => {
+                  value="${m_text || ''}"
+                  onfocus="${gvc.event(() => {
                 block = true;
             })}"
-                                        onblur="${gvc.event(() => {
+                  onblur="${gvc.event(() => {
                 block = false;
             })}"
-                                />
-                                <div class="flex-fill"></div>
-                                <div
-                                        style="background: grey;width: 50px;"
-                                        class="d-flex align-items-center justify-content-center text-white h-100"
-                                        onclick="${gvc.event(() => {
-                gvc.glitter.runJsInterFace('start_scan', {}, (res) => {
+                />
+                <div class="flex-fill"></div>
+                <div
+                  style="background: grey;width: 50px;"
+                  class="d-flex align-items-center justify-content-center text-white h-100"
+                  onclick="${gvc.event(() => {
+                gvc.glitter.runJsInterFace('start_scan', {}, res => {
                     PayConfig.onPayment(res.text);
                 });
             })}"
-                                >
-                                    <i class="fa-regular fa-barcode-read"></i>
-                                </div>
-                            </div>
-                            <div class="d-flex align-items-center justify-content-center w-100"
-                                 style="margin-top: 24px;font-size: 16px;font-weight: 700;letter-spacing: 0.64px;">
-                                <div
-                                        class="flex-fill"
-                                        style="border-radius: 10px;border: 1px solid #DDD;background: #FFF;padding: 12px 24px;color: #393939;text-align:center;"
-                                        onclick="${gvc.event(() => {
+                >
+                  <i class="fa-regular fa-barcode-read"></i>
+                </div>
+              </div>
+              <div
+                class="d-flex align-items-center justify-content-center w-100"
+                style="margin-top: 24px;font-size: 16px;font-weight: 700;letter-spacing: 0.64px;"
+              >
+                <div
+                  class="flex-fill"
+                  style="border-radius: 10px;border: 1px solid #DDD;background: #FFF;padding: 12px 24px;color: #393939;text-align:center;"
+                  onclick="${gvc.event(() => {
                 PayConfig.onPayment = undefined;
                 gvc.glitter.closeDiaLog();
             })}"
-                                >
-                                    取消
-                                </div>
-                                <div class="mx-2"></div>
-                                <div
-                                        class="flex-fill"
-                                        style="border-radius: 10px;background: #393939;padding: 12px 24px;color: #FFF;text-align:center;"
-                                        onclick="${gvc.event(() => __awaiter(this, void 0, void 0, function* () {
+                >
+                  取消
+                </div>
+                <div class="mx-2"></div>
+                <div
+                  class="flex-fill"
+                  style="border-radius: 10px;background: #393939;padding: 12px 24px;color: #FFF;text-align:center;"
+                  onclick="${gvc.event(() => __awaiter(this, void 0, void 0, function* () {
                 if (!m_text) {
                     dialog.errorMessage({ text: '請輸入交易條碼' });
                     return;
@@ -273,17 +295,109 @@ export class PaymentFunction {
                 block = false;
                 PayConfig.onPayment(m_text);
             }))}"
-                                >
-                                    確定
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                `;
+                >
+                  確定
+                </div>
+              </div>
+            </div>
+          </div>
+        `;
         }, 'orderFinish', {
             dismiss: () => {
                 gvc.glitter.share.scan_back = () => { };
             },
         });
     }
+    static customFinish(gvc, total, callback) {
+        gvc.addStyle(`
+      .dialog-box {
+        width: 100vw;
+        height: 100vh;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background-color: rgba(0, 0, 0, 0.5);
+        z-index: 10000;
+      }
+
+      .dialog-absolute {
+        width: 100%;
+        border-top: 1px solid #e2e5f1;
+        position: absolute;
+        left: 0px;
+        bottom: 0px;
+        height: 40px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+      }
+
+      .hover-cancel {
+        background-color: #fff;
+        border-radius: 0 0 0 0.5rem;
+      }
+
+      .hover-cancel:hover {
+        background-color: #e6e6e6;
+      }
+
+      .hover-save {
+        background-color: #393939;
+        border-radius: 0 0 0.5rem;
+      }
+
+      .hover-save:hover {
+        background-color: #646464;
+      }
+    `);
+        const dialog = new ShareDialog(gvc.glitter);
+        gvc.glitter.innerDialog((gvc) => {
+            return html `
+          <div class="dialog-box">
+            <div class="dialog-content position-relative pb-5" style="width: 452px;max-width: calc(100% - 20px);">
+              <div
+                class="my-3 fs-6 fw-500 text-center"
+                style="white-space: normal; overflow-wrap: anywhere;font-size: 28px;font-style: normal;font-weight: 700;line-height: normal;letter-spacing: 2.8px;"
+              >
+                請先收取款項後進行結帳
+              </div>
+              <div
+                style="font-size: 18px;font-style: normal;font-weight: 400;line-height: 160%;letter-spacing: 0.72px;"
+              >
+                本次結帳金額為
+                <span style="font-size: 28px;font-style: normal;font-weight: 700;line-height: 160%;"
+                  >$${total.toLocaleString()}</span
+                >
+              </div>
+              <div
+                class="d-flex align-items-center justify-content-center"
+                style="margin-top: 24px;font-size: 16px;font-weight: 700;letter-spacing: 0.64px;"
+              >
+                <div
+                  style="border-radius: 10px;border: 1px solid #DDD;background: #FFF;padding: 12px 24px;color: #393939;width:120px;text-align:center;"
+                  onclick="${gvc.event(() => {
+                gvc.glitter.closeDiaLog();
+            })}"
+                >
+                  取消
+                </div>
+                <div
+                  style="border-radius: 10px;background: #393939;padding: 12px 24px;color: #FFF;margin-left: 24px;width:120px;text-align:center;"
+                  onclick="${gvc.event(() => {
+                gvc.closeDialog();
+                callback(true);
+            })}"
+                >
+                  確認
+                </div>
+              </div>
+            </div>
+          </div>
+        `;
+        }, 'orderFinish', {
+            dismiss: () => {
+            },
+        });
+    }
 }