ts-glitter 20.5.4 → 20.5.6

package/lowcode/cms-plugin/module/delivery-html.ts

@@ -3,6 +3,7 @@ import { Tool } from '../../modules/tool.js';
 import { BgWidget } from '../../backend-manager/bg-widget.js';
 import { ApiUser } from '../../glitter-base/route/user.js';
 import { CartData, OrderData } from './data.js';
+import { OrderSetting } from '../module/order-setting.js';
 
 const html = String.raw;
 
@@ -60,14 +61,14 @@ export class DeliveryHTML {
               return '載入中';
             }
 
-            const printMap: Record<PrintType, string> = {
-              shipment: this.shipmentHTML(vm, glitter, dataArray),
-              pick: this.pickHTML(vm, glitter, dataArray),
-              address: this.addressHTML(vm, dataArray),
-              shipAddr: this.shipAddrHTML(vm, glitter, dataArray),
+            const printMap: Record<PrintType, () => string> = {
+              shipment: () => this.shipmentHTML(vm, gvc, dataArray),
+              pick: () => this.pickHTML(vm, glitter, dataArray),
+              address: () => this.addressHTML(vm, dataArray),
+              shipAddr: () => this.shipAddrHTML(vm, gvc, dataArray),
             };
 
-            return html`<div class="container" id="${containerID}">${printMap[type]}</div>`;
+            return html`<div class="container" id="${containerID}">${printMap[type]?.()}</div>`;
           },
           divCreate: {
             style: 'min-height: calc(100vh - 70px); padding: 20px;',
@@ -335,119 +336,155 @@ export class DeliveryHTML {
     `);
   }
 
-  // 出貨明細 HTML
-  static shipmentHTML(vm: any, glitter: any, dataArray: CartData[]) {
-    const section = (data: CartData) => {
-      const orderData = data.orderData;
-      return html`
-        <div class="page">
-          <div class="header">
-            <h1 class="subtitle">商店名稱：${vm.store.shop_name}</h1>
-            <h1 class="title">${vm.info.title}</h1>
-            <h1 class="subtitle">${vm.info.subtitle}時間：${glitter.ut.dateFormat(new Date(), 'yyyy-MM-dd hh:mm')}</h1>
-          </div>
-          <div class="details">
-            <table>
-              <tr>
-                <td>訂單編號：${data.cart_token}</td>
-                <td>送貨方式：${this.getShippingMethodText(orderData)}</td>
-              </tr>
-              <tr>
-                <td>訂購日期：${glitter.ut.dateFormat(new Date(data.created_time), 'yyyy-MM-dd hh:mm')}</td>
-                <td>
-                  送貨地址：${[orderData.user_info.city, orderData.user_info.area, orderData.user_info.address]
-                    .filter(Boolean)
-                    .join('')}
-                </td>
-              </tr>
-              <tr>
-                <td>訂購人帳號：${orderData.email}</td>
-                <td>收件人姓名：${orderData.user_info.name}</td>
-              </tr>
-              <tr>
-                <td>付款方式：${this.getPaymentMethodText(orderData)}</td>
-                <td>收件人電話：${orderData.user_info.phone}</td>
-              </tr>
-              <tr>
-                <td>付款狀態：${this.paymentStatus(data)}</td>
-                <td>收件人信箱：${orderData.user_info.email}</td>
-              </tr>
-            </table>
-          </div>
-          <div class="items">
-            <table>
-              <thead>
+  // 出貨明細 - 表頭
+  static shipmentHeader(vm: any, glitter: any) {
+    return html`<div class="header">
+      <h1 class="subtitle">商店名稱：${vm.store.shop_name}</h1>
+      <h1 class="title">${vm.info.title}</h1>
+      <h1 class="subtitle">${vm.info.subtitle}時間：${glitter.ut.dateFormat(new Date(), 'yyyy-MM-dd hh:mm')}</h1>
+    </div>`;
+  }
+
+  // 出貨明細 - 配送資訊
+  static shipmentDetail(glitter: any, data: CartData) {
+    const orderData = data.orderData;
+
+    function paymentStatus(cart: CartData) {
+      const statusMessages: Record<string, string> = {
+        '0': cart.orderData.proof_purchase ? '待核款' : '未付款',
+        '1': '已付款',
+        '-2': '已退款',
+        '3': '部分付款',
+      };
+
+      return statusMessages[`${cart.status}`] || '付款失敗';
+    }
+
+    return html`<div class="details">
+      <table>
+        <tr>
+          <td>訂單編號：${data.cart_token}</td>
+          <td>送貨方式：${OrderSetting.getShippingMethodText(orderData)}</td>
+        </tr>
+        <tr>
+          <td>訂購日期：${glitter.ut.dateFormat(new Date(data.created_time), 'yyyy-MM-dd hh:mm')}</td>
+          <td>
+            送貨地址：${[orderData.user_info.city, orderData.user_info.area, orderData.user_info.address]
+              .filter(Boolean)
+              .join('')}
+          </td>
+        </tr>
+        <tr>
+          <td>訂購人帳號：${orderData.email}</td>
+          <td>收件人姓名：${orderData.user_info.name}</td>
+        </tr>
+        <tr>
+          <td>付款方式：${OrderSetting.getPaymentMethodText(orderData)}</td>
+          <td>收件人電話：${orderData.user_info.phone}</td>
+        </tr>
+        <tr>
+          <td>付款狀態：${paymentStatus(data)}</td>
+          <td>收件人信箱：${orderData.user_info.email}</td>
+        </tr>
+      </table>
+    </div>`;
+  }
+
+  // 出貨明細 - 產品項目
+  static shipmentItems(gvc: GVC, orderData: OrderData) {
+    return html`<div class="items">
+      <table>
+        <thead>
+          <tr>
+            <th class="text-left">項次</th>
+            <th class="text-left">圖片</th>
+            <th class="text-left">商品名稱</th>
+            <th class="text-right">單價</th>
+            <th class="text-right">數量</th>
+            <th class="text-right">金額</th>
+          </tr>
+        </thead>
+        <tbody>
+          ${orderData.lineItems
+            .map((item, index) => {
+              return html`
                 <tr>
-                  <th class="text-left">項次</th>
-                  <th class="text-left">商品名稱</th>
-                  <th class="text-right">單價</th>
-                  <th class="text-right">數量</th>
-                  <th class="text-right">金額</th>
+                  <td class="text-left">${index + 1}</td>
+                  <td class="text-left">
+                    ${BgWidget.validImageBox({ gvc, image: item.preview_image ?? '', width: 40 })}
+                  </td>
+                  <td class="text-left">${item.title} ${item.spec.length > 0 ? `(${item.spec.join('/')})` : ''}</td>
+                  <td class="text-right">${item.sale_price.toLocaleString()}</td>
+                  <td class="text-right">${item.count}</td>
+                  <td class="text-right">
+                    $ ${Tool.floatAdd(item.sale_price * Number(item.count), 0).toLocaleString()}
+                  </td>
                 </tr>
-              </thead>
-              <tbody>
-                ${orderData.lineItems
-                  .map((item, index) => {
-                    return html`
-                      <tr>
-                        <td class="text-left">${index + 1}</td>
-                        <td class="text-left">
-                          ${item.title} ${item.spec.length > 0 ? `(${item.spec.join('/')})` : ''}
-                        </td>
-                        <td class="text-right">${item.sale_price.toLocaleString()}</td>
-                        <td class="text-right">${item.count}</td>
-                        <td class="text-right">$ ${Tool.floatAdd(item.sale_price * Number(item.count), 0).toLocaleString()}</td>
-                      </tr>
-                    `;
-                  })
-                  .join('')}
-              </tbody>
-            </table>
-          </div>
-          <div class="summary">
-            <table>
-              <tr>
-                <td>小計：</td>
-                <td>
-                  $
-                  ${(
-                    orderData.total +
-                    orderData.discount -
-                    orderData.shipment_fee +
-                    orderData.use_rebate
-                  ).toLocaleString()}
-                </td>
-              </tr>
-              <tr>
-                <td>運費：</td>
-                <td>${orderData.shipment_fee.toLocaleString()}</td>
-              </tr>
-              <tr>
-                <td>折扣：</td>
-                <td>-${orderData.discount.toLocaleString()}</td>
-              </tr>
-              <tr>
-                <td>購物金折抵：</td>
-                <td>-${orderData.use_rebate.toLocaleString()}</td>
-              </tr>
-              <tr>
-                <td>總計：</td>
-                <td>$ ${orderData.total.toLocaleString()}</td>
-              </tr>
-            </table>
-          </div>
-          ${orderData.order_note && orderData.order_note.length > 0
-            ? html` <div>【訂單備註】</div>
-                <p class="note">${orderData.order_note.replace(/\n/g, '<br />')}</p>`
-            : ''}
-        </div>
-      `;
-    };
+              `;
+            })
+            .join('')}
+        </tbody>
+      </table>
+    </div>`;
+  }
 
+  // 出貨明細 - 總結
+  static shipmentSummary(orderData: OrderData) {
+    return html`<div class="summary">
+      <table>
+        <tr>
+          <td>小計：</td>
+          <td>
+            $ ${(orderData.total + orderData.discount - orderData.shipment_fee + orderData.use_rebate).toLocaleString()}
+          </td>
+        </tr>
+        <tr>
+          <td>運費：</td>
+          <td>$ ${orderData.shipment_fee.toLocaleString()}</td>
+        </tr>
+        <tr>
+          <td>折扣：</td>
+          <td>- $ ${orderData.discount.toLocaleString()}</td>
+        </tr>
+        <tr>
+          <td>購物金折抵：</td>
+          <td>- $ ${orderData.use_rebate.toLocaleString()}</td>
+        </tr>
+        <tr>
+          <td>總計：</td>
+          <td>$ ${orderData.total.toLocaleString()}</td>
+        </tr>
+      </table>
+    </div>`;
+  }
+
+  // 出貨明細 - 備註
+  static shipmentNote(orderData: OrderData) {
+    return orderData.order_note && orderData.order_note.length > 0
+      ? html` <div>【訂單備註】</div>
+          <p class="note">${orderData.order_note.replace(/\n/g, '<br />')}</p>`
+      : '';
+  }
+
+  // 取得出貨明細頁面
+  static getShipmentPage(vm: any, gvc: GVC, data: CartData) {
+    const glitter = gvc.glitter;
+    const orderData = data.orderData;
+    return [
+      this.shipmentHeader(vm, glitter),
+      this.shipmentDetail(glitter, data),
+      this.shipmentItems(gvc, orderData),
+      this.shipmentSummary(orderData),
+      this.shipmentNote(orderData),
+    ].join('');
+  }
+
+  // 列印出貨明細
+  static shipmentHTML(vm: any, gvc: GVC, dataArray: CartData[]) {
     return dataArray
       .map(data => {
         try {
-          return section(data);
+          return html` <div class="page">${this.getShipmentPage(vm, gvc, data)}</div>`;
         } catch (e) {
           const text = `訂單 #${data.cart_token} 列印出貨發生錯誤`;
           console.error(`${text}: ${e}`);
@@ -457,7 +494,7 @@ export class DeliveryHTML {
       .join('');
   }
 
-  // 揀貨單 HTML
+  // 列印揀貨單
   static pickHTML(vm: any, glitter: any, dataArray: CartData[]) {
     const formulaLineItems = () => {
       const mergedItems = dataArray
@@ -514,7 +551,7 @@ export class DeliveryHTML {
     `;
   }
 
-  // 地址貼條 HTML
+  // 列印地址貼條
   static addressHTML(vm: any, dataArray: CartData[]) {
     const dataMap = dataArray.map(order => {
       const orderData = order.orderData;
@@ -565,8 +602,8 @@ export class DeliveryHTML {
       .join('');
   }
 
-  // 出貨明細+地址貼條 HTML
-  static shipAddrHTML(vm: any, glitter: any, dataArray: CartData[]) {
+  // 列印出貨明細 + 地址貼條
+  static shipAddrHTML(vm: any, gvc: GVC, dataArray: CartData[]) {
     const section = (data: CartData) => {
       const orderData = data.orderData;
 
@@ -600,105 +637,7 @@ export class DeliveryHTML {
             </div>
             <div style="text-align: end">訂單編號： ${data.cart_token}</div>
           </div>
-          <div class="header">
-            <h1 class="subtitle">商店名稱：${vm.store.shop_name}</h1>
-            <h1 class="title">${vm.info.title}</h1>
-            <h1 class="subtitle">${vm.info.subtitle}時間：${glitter.ut.dateFormat(new Date(), 'yyyy-MM-dd hh:mm')}</h1>
-          </div>
-          <div class="details">
-            <table>
-              <tr>
-                <td>訂單編號：${data.cart_token}</td>
-                <td>送貨方式：${this.getShippingMethodText(orderData)}</td>
-              </tr>
-              <tr>
-                <td>訂購日期：${glitter.ut.dateFormat(new Date(data.created_time), 'yyyy-MM-dd hh:mm')}</td>
-                <td>
-                  送貨地址：${[orderData.user_info.city, orderData.user_info.area, orderData.user_info.address]
-                    .filter(Boolean)
-                    .join('')}
-                </td>
-              </tr>
-              <tr>
-                <td>訂購人帳號：${orderData.email}</td>
-                <td>收件人姓名：${orderData.user_info.name}</td>
-              </tr>
-              <tr>
-                <td>付款方式：${this.getPaymentMethodText(orderData)}</td>
-                <td>收件人電話：${orderData.user_info.phone}</td>
-              </tr>
-              <tr>
-                <td>付款狀態：${this.paymentStatus(data)}</td>
-                <td>收件人信箱：${orderData.user_info.email}</td>
-              </tr>
-            </table>
-          </div>
-          <div class="items">
-            <table>
-              <thead>
-                <tr>
-                  <th class="text-left">項次</th>
-                  <th class="text-left">商品名稱</th>
-                  <th class="text-right">單價</th>
-                  <th class="text-right">數量</th>
-                  <th class="text-right">金額</th>
-                </tr>
-              </thead>
-              <tbody>
-                ${orderData.lineItems
-                  .map((item, index) => {
-                    return html`
-                      <tr>
-                        <td class="text-left">${index + 1}</td>
-                        <td class="text-left">
-                          ${item.title} ${item.spec.length > 0 ? `(${item.spec.join('/')})` : ''}
-                        </td>
-                        <td class="text-right">${item.sale_price.toLocaleString()}</td>
-                        <td class="text-right">${item.count}</td>
-                        <td class="text-right">$ ${Tool.floatAdd(item.sale_price * Number(item.count)??0, 0).toLocaleString()}</td>
-                      </tr>
-                    `;
-                  })
-                  .join('')}
-              </tbody>
-            </table>
-          </div>
-          <div class="summary">
-            <table>
-              <tr>
-                <td>小計：</td>
-                <td>
-                  $
-                  ${(
-                    orderData.total +
-                    orderData.discount -
-                    orderData.shipment_fee +
-                    orderData.use_rebate
-                  ).toLocaleString()}
-                </td>
-              </tr>
-              <tr>
-                <td>運費：</td>
-                <td>${orderData.shipment_fee.toLocaleString()}</td>
-              </tr>
-              <tr>
-                <td>折扣：</td>
-                <td>-${orderData.discount.toLocaleString()}</td>
-              </tr>
-              <tr>
-                <td>購物金折抵：</td>
-                <td>-${orderData.use_rebate.toLocaleString()}</td>
-              </tr>
-              <tr>
-                <td>總計：</td>
-                <td>$ ${orderData.total.toLocaleString()}</td>
-              </tr>
-            </table>
-          </div>
-          ${orderData.order_note && orderData.order_note.length > 0
-            ? html` <div>【訂單備註】</div>
-                <p class="note">${orderData.order_note.replace(/\n/g, '<br />')}</p>`
-            : ''}
+          ${this.getShipmentPage(vm, gvc, data)}
         </div>
       `;
     };
@@ -715,45 +654,4 @@ export class DeliveryHTML {
       })
       .join('');
   }
-
-  // 付款方式
-  static getPaymentMethodText(orderData: OrderData) {
-    const paymentMethods: Record<string, string> = {
-      POS: '門市POS付款',
-      off_line: '線下付款',
-      newWebPay: '藍新金流',
-      ecPay: '綠界金流',
-      line_pay: 'Line Pay',
-      atm: '銀行轉帳',
-      line: 'Line 轉帳',
-      cash_on_delivery: '貨到付款',
-    };
-
-    return orderData.orderSource === 'POS'
-      ? paymentMethods['POS']
-      : paymentMethods[orderData.customer_info.payment_select] || '線下付款';
-  }
-
-  // 配送方式
-  static getShippingMethodText(orderData: OrderData) {
-    const shippingMethods: Record<string, string> = {
-      UNIMARTC2C: '7-11店到店',
-      FAMIC2C: '全家店到店',
-      OKMARTC2C: 'OK店到店',
-      HILIFEC2C: '萊爾富店到店',
-    };
-
-    return shippingMethods[orderData.user_info.shipment] || '宅配';
-  }
-
-  // 付款狀態
-  static paymentStatus(cart: CartData) {
-    const statusMessages: Record<string, string> = {
-      '0': cart.orderData.proof_purchase ? '待核款' : '未付款',
-      '1': '已付款',
-      '-2': '已退款',
-    };
-
-    return statusMessages[`${cart.status}`] || '付款失敗';
-  }
 }

package/lowcode/cms-plugin/module/order-setting.js

@@ -8,27 +8,19 @@ import { EditorElem } from '../../glitterBundle/plugins/editor-elem.js';
 const html = String.raw;
 export class OrderSetting {
     static getPaymentMethodText(orderData) {
-        if (orderData.orderSource === 'POS') {
-            return '門市POS付款';
-        }
-        switch (orderData.customer_info.payment_select) {
-            case 'off_line':
-                return '線下付款';
-            case 'newWebPay':
-                return '藍新金流';
-            case 'ecPay':
-                return '綠界金流';
-            case 'line_pay':
-                return 'Line Pay';
-            case 'atm':
-                return '銀行轉帳';
-            case 'line':
-                return 'Line 轉帳';
-            case 'cash_on_delivery':
-                return '貨到付款';
-            default:
-                return '線下付款';
-        }
+        const paymentMethods = {
+            POS: '門市POS付款',
+            off_line: '線下付款',
+            newWebPay: '藍新金流',
+            ecPay: '綠界金流',
+            line_pay: 'Line Pay',
+            atm: '銀行轉帳',
+            line: 'Line 轉帳',
+            cash_on_delivery: '貨到付款',
+        };
+        return orderData.orderSource === 'POS'
+            ? paymentMethods['POS']
+            : paymentMethods[orderData.customer_info.payment_select] || '線下付款';
     }
     static getShippingMethodText(orderData) {
         switch (orderData.user_info.shipment) {
@@ -1691,26 +1683,30 @@ export class OrderSetting {
         });
         const handleSave = () => {
             const alertHTML = html `
-      <div class="d-flex flex-column">
-        <div class="tx_normal text-start">您即將拆分訂單，系統將產生 ${splitOrderArray.length} 筆子訂單，拆分後：</div>
-        <ul class="${gClass('dialog-ul')}">
-          <li>原訂單調整金額與折扣，運費及附加費維持不變。子訂單按比例分配優惠。</li>
-          <li>子訂單繼承母訂單設定，發票需手動作廢與重開。 </li>
-          <li>代收金額更新，已建立的出貨單需取消並重新建立。</li>
-        </ul>
-      </div>
+        <div class="d-flex flex-column">
+          <div class="tx_normal text-start">
+            您即將拆分訂單，系統將產生 ${splitOrderArray.length} 筆子訂單，拆分後：
+          </div>
+          <ul class="${gClass('dialog-ul')}">
+            <li>原訂單調整金額與折扣，運費及附加費維持不變。子訂單按比例分配優惠。</li>
+            <li>子訂單繼承母訂單設定，發票需手動作廢與重開。</li>
+            <li>代收金額更新，已建立的出貨單需取消並重新建立。</li>
+          </ul>
+        </div>
       `;
             dialog.checkYesOrNotWithCustomWidth({
                 callback: bool => {
                     if (bool) {
                         orderData.lineItems.forEach((lineItem, index) => {
                             let count = 0;
-                            count = splitOrderArray.reduce((total, order) => { return total += Number(order.lineItems[index].count); }, 0);
+                            count = splitOrderArray.reduce((total, order) => {
+                                return (total += Number(order.lineItems[index].count));
+                            }, 0);
                             lineItem.count -= count;
                         });
                         const passData = {
                             orderData: orderData,
-                            splitOrderArray: splitOrderArray
+                            splitOrderArray: splitOrderArray,
                         };
                         ApiShop.combineOrder(vm.dataObject).then(r => {
                             if (r.result && r.response) {
@@ -1743,10 +1739,9 @@ export class OrderSetting {
                 else {
                     checkBTN = BgWidget.disableSave('拆分訂單');
                 }
-                return html `
-          ${BgWidget.cancel(gvc.event(closeDialog))} ${checkBTN}
-        `;
-            }, divCreate: { class: `${gClass('footer')}` }
+                return html ` ${BgWidget.cancel(gvc.event(closeDialog))} ${checkBTN} `;
+            },
+            divCreate: { class: `${gClass('footer')}` },
         });
         const renderHint = (gvc) => {
             const phoneCardStyle = isDesktop
@@ -1775,15 +1770,18 @@ export class OrderSetting {
             })
                 .join('')}
                   </ul>
-                  <div class="${gClass('split-rule')} ms-auto d-flex align-items-end" onclick="${gvc.event(() => {
+                  <div
+                    class="${gClass('split-rule')} ms-auto d-flex align-items-end"
+                    onclick="${gvc.event(() => {
                 BgWidget.settingDialog({
                     gvc: gvc,
                     title: '拆單需知',
                     width: 766,
                     innerHTML: gvc => {
-                        return html `
-                          <ul class="${gClass('dialog-ul')}">
-                            <li>原訂單將保留剩餘商品，訂單金額與折扣將調整；子訂單將包含選定商品，並按比例分配優惠折扣</li>
+                        return html ` <ul class="${gClass('dialog-ul')}">
+                            <li>
+                              原訂單將保留剩餘商品，訂單金額與折扣將調整；子訂單將包含選定商品，並按比例分配優惠折扣
+                            </li>
                             <li>拆單後運費及附加費用不變，將保留於原訂單內，如需更改，請手動編輯訂單新增費用</li>
                             <li>子訂單會預設繼承母訂單的配送與付款方式，如需更改，請手動編輯訂單內容</li>
                             <li>子訂單若要重新開立發票，請至發票頁面手動建立</li>
@@ -1795,7 +1793,10 @@ export class OrderSetting {
                         return '';
                     },
                 });
-            })}">詳細拆單規則</div>
+            })}"
+                  >
+                    詳細拆單規則
+                  </div>
                 </div>
               </div>
             `)}
@@ -1910,7 +1911,7 @@ export class OrderSetting {
                             <img class="${gClass('product-preview-img')}" src="${item.preview_image}" alt="產品圖片" />
                             <div class="d-flex flex-column flex-grow-1" style="gap:2px;">
                               <div class="tx_normal_14" style="white-space: normal;line-height: normal;">
-                                ${Tool.truncateString((_a = item.title) !== null && _a !== void 0 ? _a : "", 10)} -${spec}
+                                ${Tool.truncateString((_a = item.title) !== null && _a !== void 0 ? _a : '', 10)} -${spec}
                               </div>
                               <div class="tx_normal_14 ${gClass('font-gray')}">
                                 存貨單位 (SKU): ${(_b = item.sku) !== null && _b !== void 0 ? _b : '無SKU'}
@@ -2002,9 +2003,11 @@ export class OrderSetting {
             });
         };
         const renderBlock = (gvc) => {
-            const subBlock = splitOrderArray.map((order, index) => {
+            const subBlock = splitOrderArray
+                .map((order, index) => {
                 return html `<div class="${gClass('summary-subSummary')}"></div>`;
-            }).join('');
+            })
+                .join('');
             return html `
         <div class="d-flex" style="height:27px;">
           <div class="${gClass('summary-title')}"></div>
@@ -2063,7 +2066,9 @@ export class OrderSetting {
                     <div class="d-flex align-items-center">
                       <span class="text-decoration-line-through">${orderData.total}</span
                       ><i class="fa-solid fa-arrow-right ${gClass('font-blue')} ${gClass('summary-right')}"></i
-                      ><span class="${gClass('font-blue')}">${sale_price - split_price - discount + orderData.shipment_fee}</span>
+                      ><span class="${gClass('font-blue')}"
+                        >${sale_price - split_price - discount + orderData.shipment_fee}</span
+                      >
                     </div>
                   `;
                                 }