ts-glitter 22.5.6 → 22.5.8

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

@@ -128,7 +128,7 @@ function drawIcon(black, type) {
           />
         </svg>
       `;
-        default:
+        case 'line':
             return html `
         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
           <path
@@ -137,6 +137,8 @@ function drawIcon(black, type) {
           />
         </svg>
       `;
+        default:
+            return html ` <i class="fa-regular fa-puzzle-piece-simple fs-4" aria-hidden="true"></i> `;
     }
 }
 export class PosFunction {
@@ -560,6 +562,9 @@ export class PosFunction {
         const paymentMethods = JSON.parse(JSON.stringify(orderData.pos_info.payment));
         const dialog = new ShareDialog(gvc.glitter);
         gvc.glitter.innerDialog(gvc => {
+            const saasConfig = window.parent.saasConfig;
+            let loading = true;
+            let custom_payment = [];
             return gvc.bindView(() => {
                 const id = gvc.glitter.getUUID();
                 const renderPaymentMethod = (method, index) => {
@@ -577,23 +582,27 @@ export class PosFunction {
                 onclick="${gvc.event(() => handlePaymentAmountClick(method, id, gvc, dialog))}"
               />
             </div>
-            <div class="d-flex" style="flex: 68;">${method.paied ? `已付款` : `尚未付款`}</div>
+            <div class="d-flex" style="flex: 68;">${method.paied ? '已付款' : '尚未付款'}</div>
             <div class="d-flex" style="flex: 16;">
               ${paymentMethods.length > 1 ? renderDeleteIcon(method, index, gvc, dialog, paymentMethods, id) : ''}
             </div>
           </div>`;
                 };
                 const getPaymentMethodLabel = (method) => {
-                    switch (method) {
-                        case 'cash':
-                            return `現金`;
-                        case 'creditCard':
-                            return `刷卡`;
-                        case 'line':
-                            return `LINE PAY`;
-                        default:
-                            return '';
+                    if (method === 'cash') {
+                        return '現金';
+                    }
+                    if (method === 'creditCard') {
+                        return '刷卡';
                     }
+                    if (method === 'line') {
+                        return 'LINE PAY';
+                    }
+                    const payment = (custom_payment || []).find(item => item.key === method);
+                    if (!payment) {
+                        return '';
+                    }
+                    return payment.title;
                 };
                 const handlePaymentAmountClick = (method, id, gvc, dialog) => {
                     if (method.paied) {
@@ -623,6 +632,9 @@ export class PosFunction {
                     bind: id,
                     view: () => {
                         try {
+                            if (loading) {
+                                return BgWidget.spinner({ text: { visible: false } });
+                            }
                             return html `
                 <div
                   class="d-flex align-items-center"
@@ -638,7 +650,7 @@ export class PosFunction {
                 </div>
                 ${paymentMethods.map(renderPaymentMethod).join('')}
                 ${PosWidget.buttonSnow('新增付款方式', gvc.event(() => {
-                                PosFunction.selectPaymentMethodSingle(gvc, orderData, data => {
+                                PosFunction.selectPaymentMethodSingle(gvc, orderData, custom_payment, data => {
                                     paymentMethods.push(data);
                                     gvc.notifyDataChange(id);
                                 });
@@ -665,11 +677,43 @@ export class PosFunction {
                         class: `p-3 p-lg-4`,
                         style: `${dialogStyle} width: 546px; gap: 16px;`,
                     },
+                    onCreate: () => {
+                        if (loading) {
+                            saasConfig.api.getPrivateConfig(saasConfig.config.appName, 'glitter_finance').then((d) => {
+                                custom_payment = (() => {
+                                    try {
+                                        const val = d.response.result[0].value;
+                                        return val.payment_info_custom
+                                            .filter((item) => {
+                                            try {
+                                                return item.type === 'pos' && val[item.id].toggle;
+                                            }
+                                            catch (error) {
+                                                return false;
+                                            }
+                                        })
+                                            .map((item) => {
+                                            return {
+                                                title: item.name,
+                                                value: item.id,
+                                                key: item.id,
+                                            };
+                                        });
+                                    }
+                                    catch (error) {
+                                        return [];
+                                    }
+                                })();
+                                loading = false;
+                                gvc.notifyDataChange(id);
+                            });
+                        }
+                    },
                 };
             });
         }, `selectPaymentMethod`);
     }
-    static selectPaymentMethodSingle(gvc, orderDetail, callback) {
+    static selectPaymentMethodSingle(gvc, orderDetail, custom_payment, callback) {
         let method = {
             method: 'cash',
             total: 0,
@@ -688,7 +732,7 @@ export class PosFunction {
                 >
                   新增付款方式
                 </div>`,
-                                html `<div class="w-100 d-flex align-items-center" style="gap: 5px;">
+                                html `<div class="w-100 d-flex align-items-center flex-wrap" style="gap: 5px;">
                   ${(() => {
                                     const btnArray = [
                                         { title: `現金`, value: 'cash', key: 'cash' },
@@ -697,14 +741,27 @@ export class PosFunction {
                                     ].filter(dd => {
                                         return dd.key === 'cash' || orderDetail.payment_setting.some((d1) => dd.key === d1.key);
                                     });
-                                    return btnArray
+                                    return [...btnArray, ...custom_payment]
                                         .map(btn => {
+                                        const isActive = method.method === btn.value;
+                                        const boxStyle = `
+                          min-width: 115px;
+                          max-width: 115px;
+                          flex: 1;
+                          display: flex;
+                          flex-direction: column;
+                          justify-content: center;
+                          align-items: center;
+                          padding: 15px;
+                          border-radius: 10px;
+                          background: #f6f6f6;
+                          color: ${isActive ? '#393939' : '#8D8D8D'};
+                          border: 3px solid ${isActive ? '#393939' : '#f6f6f6'};
+                          box-shadow: 2px 2px 15px rgba(0, 0, 0, ${isActive ? 0.2 : 0});
+                        `;
                                         return html `
                           <div
-                            style="flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 15px; border-radius: 10px; background: #F6F6F6; ${method.method ===
-                                            btn.value
-                                            ? 'color: #393939; border: 3px solid #393939; box-shadow: 2px 2px 15px rgba(0, 0, 0, 0.20);'
-                                            : 'color: #8D8D8D;'}"
+                            style="${boxStyle}"
                             onclick="${gvc.event(() => {
                                             method = { method: btn.value, total: 0 };
                                             gvc.notifyDataChange(id);

package/lowcode/cms-plugin/pos-pages/pos-function.ts

@@ -138,7 +138,7 @@ function drawIcon(black: boolean, type: string) {
           />
         </svg>
       `;
-    default:
+    case 'line':
       return html`
         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
           <path
@@ -147,6 +147,8 @@ function drawIcon(black: boolean, type: string) {
           />
         </svg>
       `;
+    default:
+      return html` <i class="fa-regular fa-puzzle-piece-simple fs-4" aria-hidden="true"></i> `;
   }
 }
 
@@ -620,6 +622,10 @@ export class PosFunction {
     const dialog = new ShareDialog(gvc.glitter);
 
     gvc.glitter.innerDialog(gvc => {
+      const saasConfig: { config: any; api: any } = (window.parent as any).saasConfig;
+      let loading = true;
+      let custom_payment: any[] = [];
+
       return gvc.bindView(() => {
         const id = gvc.glitter.getUUID();
 
@@ -638,7 +644,7 @@ export class PosFunction {
                 onclick="${gvc.event(() => handlePaymentAmountClick(method, id, gvc, dialog))}"
               />
             </div>
-            <div class="d-flex" style="flex: 68;">${method.paied ? `已付款` : `尚未付款`}</div>
+            <div class="d-flex" style="flex: 68;">${method.paied ? '已付款' : '尚未付款'}</div>
             <div class="d-flex" style="flex: 16;">
               ${paymentMethods.length > 1 ? renderDeleteIcon(method, index, gvc, dialog, paymentMethods, id) : ''}
             </div>
@@ -646,16 +652,21 @@ export class PosFunction {
         };
 
         const getPaymentMethodLabel = (method: string) => {
-          switch (method) {
-            case 'cash':
-              return `現金`;
-            case 'creditCard':
-              return `刷卡`;
-            case 'line':
-              return `LINE PAY`;
-            default:
-              return '';
+          if (method === 'cash') {
+            return '現金';
+          }
+          if (method === 'creditCard') {
+            return '刷卡';
           }
+          if (method === 'line') {
+            return 'LINE PAY';
+          }
+
+          const payment = (custom_payment || []).find(item => item.key === method);
+          if (!payment) {
+            return '';
+          }
+          return payment.title;
         };
 
         const handlePaymentAmountClick = (method: any, id: string, gvc: GVC, dialog: ShareDialog) => {
@@ -695,6 +706,10 @@ export class PosFunction {
           bind: id,
           view: () => {
             try {
+              if (loading) {
+                return BgWidget.spinner({ text: { visible: false } });
+              }
+
               return html`
                 <div
                   class="d-flex align-items-center"
@@ -712,7 +727,7 @@ export class PosFunction {
                 ${PosWidget.buttonSnow(
                   '新增付款方式',
                   gvc.event(() => {
-                    PosFunction.selectPaymentMethodSingle(gvc, orderData, data => {
+                    PosFunction.selectPaymentMethodSingle(gvc, orderData, custom_payment, data => {
                       paymentMethods.push(data);
                       gvc.notifyDataChange(id);
                     });
@@ -741,13 +756,49 @@ export class PosFunction {
             class: `p-3 p-lg-4`,
             style: `${dialogStyle} width: 546px; gap: 16px;`,
           },
+          onCreate: () => {
+            if (loading) {
+              saasConfig.api.getPrivateConfig(saasConfig.config.appName, 'glitter_finance').then((d: any) => {
+                custom_payment = (() => {
+                  try {
+                    const val = d.response.result[0].value;
+
+                    return val.payment_info_custom
+                      .filter((item: any) => {
+                        try {
+                          return item.type === 'pos' && val[item.id].toggle;
+                        } catch (error) {
+                          return false;
+                        }
+                      })
+                      .map((item: any) => {
+                        return {
+                          title: item.name,
+                          value: item.id,
+                          key: item.id,
+                        };
+                      });
+                  } catch (error) {
+                    return [];
+                  }
+                })();
+                loading = false;
+                gvc.notifyDataChange(id);
+              });
+            }
+          },
         };
       });
     }, `selectPaymentMethod`);
   }
 
   // 選擇單一付款方式
-  public static selectPaymentMethodSingle(gvc: GVC, orderDetail: any, callback: (method: any) => void) {
+  public static selectPaymentMethodSingle(
+    gvc: GVC,
+    orderDetail: any,
+    custom_payment: any,
+    callback: (method: any) => void
+  ) {
     let method = {
       method: 'cash',
       total: 0,
@@ -767,7 +818,7 @@ export class PosFunction {
                 >
                   新增付款方式
                 </div>`,
-                html`<div class="w-100 d-flex align-items-center" style="gap: 5px;">
+                html`<div class="w-100 d-flex align-items-center flex-wrap" style="gap: 5px;">
                   ${(() => {
                     const btnArray = [
                       { title: `現金`, value: 'cash', key: 'cash' },
@@ -777,14 +828,28 @@ export class PosFunction {
                       return dd.key === 'cash' || orderDetail.payment_setting.some((d1: any) => dd.key === d1.key);
                     });
 
-                    return btnArray
+                    return [...btnArray, ...custom_payment]
                       .map(btn => {
+                        const isActive = method.method === btn.value;
+                        const boxStyle = `
+                          min-width: 115px;
+                          max-width: 115px;
+                          flex: 1;
+                          display: flex;
+                          flex-direction: column;
+                          justify-content: center;
+                          align-items: center;
+                          padding: 15px;
+                          border-radius: 10px;
+                          background: #f6f6f6;
+                          color: ${isActive ? '#393939' : '#8D8D8D'};
+                          border: 3px solid ${isActive ? '#393939' : '#f6f6f6'};
+                          box-shadow: 2px 2px 15px rgba(0, 0, 0, ${isActive ? 0.2 : 0});
+                        `;
+
                         return html`
                           <div
-                            style="flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 15px; border-radius: 10px; background: #F6F6F6; ${method.method ===
-                            btn.value
-                              ? 'color: #393939; border: 3px solid #393939; box-shadow: 2px 2px 15px rgba(0, 0, 0, 0.20);'
-                              : 'color: #8D8D8D;'}"
+                            style="${boxStyle}"
                             onclick="${gvc.event(() => {
                               method = { method: btn.value, total: 0 };
                               gvc.notifyDataChange(id);

package/lowcode/cms-plugin/shopping-discount-setting.js

@@ -1245,12 +1245,12 @@ export class ShoppingDiscountSetting {
                         {
                             key: 'before',
                             name: '折扣前金額',
-                            innerHtml: BgWidget.grayNote('以未套用其他優惠前的商品原始金額，來判斷是否達成此優惠券的使用門檻'),
+                            innerHtml: BgWidget.grayNote('以未套用其他優惠前的訂單原始金額，來判斷是否達成此優惠券的使用門檻'),
                         },
                         {
                             key: 'after',
                             name: '折扣後金額',
-                            innerHtml: BgWidget.grayNote('使用已套用其他優惠後的實際結帳，來判斷是否達成此優惠券的使用門檻'),
+                            innerHtml: BgWidget.grayNote('使用已套用其他優惠後的實際結帳金額，來判斷是否達成此優惠券的使用門檻'),
                         },
                     ], [voucherData.includeDiscount], text => {
                         voucherData.includeDiscount = text[0];

package/lowcode/cms-plugin/shopping-discount-setting.ts

@@ -1521,12 +1521,12 @@ export class ShoppingDiscountSetting {
               {
                 key: 'before',
                 name: '折扣前金額',
-                innerHtml: BgWidget.grayNote('以未套用其他優惠前的商品原始金額，來判斷是否達成此優惠券的使用門檻'),
+                innerHtml: BgWidget.grayNote('以未套用其他優惠前的訂單原始金額，來判斷是否達成此優惠券的使用門檻'),
               },
               {
                 key: 'after',
                 name: '折扣後金額',
-                innerHtml: BgWidget.grayNote('使用已套用其他優惠後的實際結帳，來判斷是否達成此優惠券的使用門檻'),
+                innerHtml: BgWidget.grayNote('使用已套用其他優惠後的實際結帳金額，來判斷是否達成此優惠券的使用門檻'),
               },
             ],
             [voucherData.includeDiscount],