ts-glitter 21.5.9 → 21.6.0

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

@@ -28,6 +28,7 @@ import { PaymentFunction } from './payment-function.js';
 import { UmClass } from '../../public-components/user-manager/um-class.js';
 import { FormCheck } from '../module/form-check.js';
 import { ShipmentConfig } from '../../glitter-base/global/shipment-config.js';
+import { Tool } from '../../modules/tool.js';
 const html = String.raw;
 export class PaymentPage {
     static checkout(params) {
@@ -67,6 +68,7 @@ export class PaymentPage {
         const vm = obj.vm;
         const dialog = new ShareDialog(gvc.glitter);
         PaymentPage.storeHistory(obj.ogOrderData);
+        PaymentPage.addStyle(gvc);
         obj.ogOrderData.pos_info = obj.ogOrderData.pos_info || {
             payment: [
                 {
@@ -96,7 +98,7 @@ export class PaymentPage {
             return {
                 bind: id,
                 view: () => {
-                    return new Promise((resolve, reject) => __awaiter(this, void 0, void 0, function* () {
+                    return new Promise((resolve) => __awaiter(this, void 0, void 0, function* () {
                         var _a, _b;
                         const orderDetail = yield (() => __awaiter(this, void 0, void 0, function* () {
                             dialog.dataLoading({ visible: true });
@@ -150,9 +152,9 @@ export class PaymentPage {
                 >
                   ${PosWidget.bigTitle('訂單明細')}
                   <div
-                    class="d-flex flex-column ${document.body.offsetWidth < 800 ? `` : ``}"
+                    class="d-flex flex-column ${document.body.offsetWidth < 800 ? '' : ''}"
                     style="${document.body.offsetWidth < 800
-                            ? ``
+                            ? ''
                             : `padding:24px;border-radius: 10px;background: #FFF;box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.08);margin-top:32px;`}"
                   >
                     <div
@@ -165,109 +167,124 @@ export class PaymentPage {
                       <div class="col-2 text-center">數量${hasWeighing ? ' / 重量' : ''}</div>
                       <div class="col-2 text-center">小計</div>
                     </div>
-                    <div class="d-flex flex-column" style="${document.body.offsetWidth < 800 ? `` : ``}">
+                    <div class="d-flex flex-column" style="${document.body.offsetWidth < 800 ? '' : ''}">
                       ${(() => {
-                            if (orderDetail.lineItems.length > 0) {
-                                return orderDetail.lineItems
-                                    .map((data, index) => {
-                                    return html `
-                                <div class="d-flex" style="">
-                                  <div class="col-12 col-sm-6 d-flex align-items-center">
-                                    <div
-                                      class="d-flex flex-column align-items-center justify-content-center"
-                                      style="gap:5px;width:75px;"
-                                    >
-                                      <div style="height: 20px;"></div>
-                                      <div
-                                        style="width: 70px;height: 70px; min-width: 70px;min-height: 70px; border-radius: 5px;background: 50%/cover url('${data.preview_image ||
-                                        'https://d3jnmi1tfjgtti.cloudfront.net/file/234285319/1722936949034-default_image.jpg'}')"
-                                      ></div>
-                                      <div
-                                        style="font-size: 13px;height: 20px;"
-                                        class="fw-500 ${data.pre_order ? `text-danger` : ``}"
-                                      >
-                                        庫存:${(() => {
-                                        if (`${data.show_understocking}` === 'false') {
-                                            return `不追蹤`;
+                            if (orderDetail.lineItems.length === 0) {
+                                return '';
+                            }
+                            const ogOrderMap = new Map(obj.ogOrderData.lineItems.map((ogItem, index) => {
+                                return [`${ogItem.id}-${ogItem.spec.join('/')}`, index];
+                            }));
+                            const lineItemCountMap = new Map(orderDetail.lineItems.map((item) => {
+                                return [`${item.id}-${item.spec.join('/')}`, item.count];
+                            }));
+                            const resetSalePriceIcon = (data, index) => {
+                                return html `<i
+                            class="fa-solid fa-pencil cursor_pointer"
+                            onclick="${gvc.event(() => {
+                                    var _a, _b;
+                                    const def = ((_b = (_a = obj.ogOrderData.lineItems) === null || _a === void 0 ? void 0 : _a[index]) === null || _b === void 0 ? void 0 : _b.custom_price) || 0;
+                                    PosFunction.setMoney(gvc, def, money => {
+                                        if (money === data.sale_price) {
+                                            delete obj.ogOrderData.lineItems[index].custom_price;
                                         }
                                         else {
-                                            return ((data.stockList[POSSetting.config.where_store] &&
-                                                data.stockList[POSSetting.config.where_store].count) ||
-                                                0);
+                                            obj.ogOrderData.lineItems[index].custom_price = money;
                                         }
-                                    })()}
-                                      </div>
-                                    </div>
+                                        refreshOrderView();
+                                    }, '更改商品單價');
+                                })}"
+                          ></i>`;
+                            };
+                            return [...ogOrderMap.keys()]
+                                .filter(key => {
+                                return lineItemCountMap.get(key);
+                            })
+                                .map(key => {
+                                const lineItemKeys = [...lineItemCountMap.keys()].findIndex(k => k === key);
+                                const index = ogOrderMap.get(key);
+                                const data = orderDetail.lineItems[lineItemKeys];
+                                if (index === undefined) {
+                                    console.error(`ogOrderData LineItems 不存在商品規格 ${key}`);
+                                    return '';
+                                }
+                                return html `
+                              <div class="d-flex">
+                                <div class="col-12 col-sm-6 d-flex align-items-center">
+                                  <div
+                                    class="d-flex flex-column align-items-center justify-content-center"
+                                    style="gap:5px;width:75px;"
+                                  >
+                                    <div style="height: 20px;"></div>
                                     <div
-                                      class="d-flex flex-column py-2"
-                                      onclick="${gvc.event(() => {
-                                        var _a, _b;
-                                        const def = ((_b = (_a = obj.ogOrderData.lineItems) === null || _a === void 0 ? void 0 : _a[index]) === null || _b === void 0 ? void 0 : _b.count) || 0;
-                                        PosFunction.setMoney(gvc, def, count => {
-                                            obj.ogOrderData.lineItems[index].count = count;
-                                            refreshOrderView();
-                                        }, '更改商品數量');
-                                    })}"
-                                      style="font-size: 16px;font-style: normal;font-weight: 500;letter-spacing: 0.64px;margin-left: 12px;"
+                                      style="width: 70px;height: 70px; min-width: 70px;min-height: 70px; border-radius: 5px;background: 50%/cover url('${data.preview_image ||
+                                    'https://d3jnmi1tfjgtti.cloudfront.net/file/234285319/1722936949034-default_image.jpg'}')"
+                                    ></div>
+                                    <div
+                                      style="font-size: 13px;height: 20px;"
+                                      class="fw-500 ${data.pre_order ? `text-danger` : ''}"
                                     >
-                                      <div class="d-flex justify-content-center flex-column" style="gap:5px;">
-                                        ${(() => {
-                                        if (!data.pre_order) {
-                                            return ``;
-                                        }
-                                        else {
-                                            return html ` <div>${BgWidget.dangerInsignia('需預購')}</div>`;
-                                        }
-                                    })()}
-                                        ${data.title}
-                                      </div>
-                                      <span
-                                        style="color: #949494; font-size: 16px; font-style: normal; font-weight: 500; line-height: normal; letter-spacing: 0.64px; text-transform: uppercase;"
-                                      >
-                                        ${(() => {
-                                        return data.spec.length > 0
-                                            ? data.spec
-                                                .map((spec) => {
-                                                return html ` ${spec}`;
-                                            })
-                                                .join(',')
-                                            : html ``;
-                                    })()}
-                                      </span>
-
-                                      ${document.body.clientWidth < 800
-                                        ? html ` <div
-                                            style="color: #393939; font-size: 16px; font-style: normal; font-weight: 400; line-height: normal; letter-spacing: 0.64px; text-transform: uppercase;"
-                                          >
-                                            NT.${parseInt(data.sale_price, 10).toLocaleString()}
-                                            ${document.body.clientWidth < 800 ? `x` : ``} ${data.count}
-                                          </div>`
-                                        : ``}
+                                      ${(() => {
+                                    if (`${data.show_understocking}` === 'false') {
+                                        return '不追蹤庫存';
+                                    }
+                                    const stock = data.stockList[POSSetting.config.where_store];
+                                    return `庫存: ${(stock === null || stock === void 0 ? void 0 : stock.count) || 0}`;
+                                })()}
                                     </div>
-                                    <div class="flex-fill"></div>
-                                    <div
-                                      class="d-sm-none d-flex align-items-center justify-content-center flex-column"
-                                      style="gap:0px;"
-                                      onclick="${gvc.event(() => {
-                                        var _a, _b;
-                                        const n = ((_b = (_a = obj.ogOrderData.lineItems) === null || _a === void 0 ? void 0 : _a[index]) === null || _b === void 0 ? void 0 : _b.custom_price) || 0;
-                                        PosFunction.setMoney(gvc, n, money => {
-                                            if (money === data.sale_price) {
-                                                delete obj.ogOrderData.lineItems[index].custom_price;
-                                            }
-                                            else {
-                                                obj.ogOrderData.lineItems[index].custom_price = money;
-                                            }
-                                            refreshOrderView();
-                                        }, '更改商品單價');
-                                    })}"
+                                  </div>
+                                  <div
+                                    class="d-flex flex-column mt-3 gap-1"
+                                    style="font-size: 16px;font-style: normal;font-weight: 500;letter-spacing: 0.64px;margin-left: 12px;"
+                                  >
+                                    ${data.pre_order
+                                    ? html `<div>${BgWidget.warningInsignia('需預購', { size: 'sm' })}</div>`
+                                    : ''}
+                                    <div class="d-flex justify-content-start align-items-center gap-2">
+                                      ${data.title}
+                                    </div>
+                                    <span
+                                      style="color: #949494; font-size: 16px; font-style: normal; font-weight: 500; letter-spacing: 0.64px; text-transform: uppercase;"
                                     >
+                                      ${data.spec.length > 0 ? data.spec.map((spec) => `${spec}`).join(',') : ''}
+                                    </span>
+                                    ${document.body.clientWidth < 800
+                                    ? html ` <div
+                                          style="color: #393939; font-size: 16px; font-style: normal; font-weight: 400; letter-spacing: 0.64px; text-transform: uppercase;"
+                                        >
+                                          ${resetSalePriceIcon(data, index)}
+                                          NT.${parseInt(data.sale_price, 10).toLocaleString()}
+                                          ${document.body.clientWidth < 800 ? `x` : ''} ${data.count}
+                                        </div>`
+                                    : ''}
+                                  </div>
+                                  <div class="flex-fill"></div>
+                                  <div
+                                    class="d-sm-none d-flex flex-column align-items-end justify-content-between h-100"
+                                    style="padding: 16px 0px 4px;"
+                                  >
+                                    <div>
+                                      <i
+                                        class="fa-sharp fa-regular fa-xmark fs-4"
+                                        onclick="${gvc.event(() => {
+                                    function callMinus(index) {
+                                        obj.ogOrderData.lineItems[index].count = 0;
+                                        refreshOrderView();
+                                    }
+                                    dialog.checkYesOrNot({
+                                        text: '確定要移除此商品嗎？',
+                                        callback: bool => bool && callMinus(index),
+                                    });
+                                })}"
+                                      ></i>
+                                    </div>
+                                    <div class="d-flex align-items-center justify-content-center flex-column gap-0">
                                       ${(() => {
-                                        function formatPrice(price) {
-                                            return `$${parseInt(`${price}`, 10).toLocaleString()}`;
-                                        }
-                                        if (data.variant_sale_price && data.sale_price !== data.variant_sale_price) {
-                                            return html `
+                                    function formatPrice(price) {
+                                        return `$${parseInt(`${price}`, 10).toLocaleString()}`;
+                                    }
+                                    if (data.variant_sale_price && data.sale_price !== data.variant_sale_price) {
+                                        return html `
                                             <span class="text-decoration-line-through"
                                               >${formatPrice(data.variant_sale_price * data.count)}</span
                                             >
@@ -275,18 +292,59 @@ export class PaymentPage {
                                               >${formatPrice(data.sale_price * data.count)}</span
                                             >
                                           `;
-                                        }
-                                        return html ` <span>${formatPrice(data.sale_price * data.count)}</span> `;
-                                    })()}
+                                    }
+                                    return html ` <span>${formatPrice(data.sale_price * data.count)}</span> `;
+                                })()}
                                     </div>
                                   </div>
-                                  <div class="col-2 d-none d-sm-flex align-items-center justify-content-start">
-                                    $${parseInt(data.sale_price, 10).toLocaleString()}
-                                  </div>
+                                </div>
+                                <div class="col-2 d-none d-sm-flex align-items-center justify-content-start gap-2">
+                                  $ ${parseInt(data.sale_price, 10).toLocaleString()}
+                                  ${resetSalePriceIcon(data, index)}
+                                </div>
+                                <div
+                                  class="col-3 col-lg-2 d-flex align-items-center justify-content-center d-none d-sm-flex"
+                                >
                                   <div
-                                    class="col-3 col-lg-2 d-flex align-items-center justify-content-center d-none d-sm-flex"
-                                    style="gap:10px;cursor: pointer;"
+                                    class="pos-count-button"
                                     onclick="${gvc.event(() => {
+                                    function callMinus(index) {
+                                        obj.ogOrderData.lineItems[index].count = Tool.floatAdd(obj.ogOrderData.lineItems[index].count, -1);
+                                        refreshOrderView();
+                                    }
+                                    if (obj.ogOrderData.lineItems[index].count - 1 > 0) {
+                                        callMinus(index);
+                                    }
+                                    else {
+                                        dialog.checkYesOrNot({
+                                            text: '確定要移除此商品嗎？',
+                                            callback: bool => bool && callMinus(index),
+                                        });
+                                    }
+                                })}"
+                                  >
+                                    ${this.minusSVG}
+                                  </div>
+                                  ${data.product_category === 'weighing'
+                                    ? html `<input
+                                        class="border-0 pos-count-input"
+                                        value="${obj.ogOrderData.lineItems[index].count}"
+                                        onchange="${gvc.event(e => {
+                                        const originNum = obj.ogOrderData.lineItems[index].count;
+                                        const n = parseFloat(e.value);
+                                        if (CheckInput.isNumberString(`${n}`) && n > 0) {
+                                            obj.ogOrderData.lineItems[index].count = Tool.floatAdd(n, 0);
+                                            refreshOrderView();
+                                        }
+                                        else {
+                                            e.value = originNum;
+                                        }
+                                    })}"
+                                      />`
+                                    : html `<div
+                                        class="border-0 pos-count-input cursor_pointer"
+                                        style="margin-bottom: 3px;"
+                                        onclick="${gvc.event(() => {
                                         var _a, _b;
                                         const def = ((_b = (_a = obj.ogOrderData.lineItems) === null || _a === void 0 ? void 0 : _a[index]) === null || _b === void 0 ? void 0 : _b.count) || 0;
                                         PosFunction.setMoney(gvc, def, count => {
@@ -294,54 +352,44 @@ export class PaymentPage {
                                             refreshOrderView();
                                         }, '更改商品數量');
                                     })}"
-                                  >
-                                    ${Number(data.count).toLocaleString()}
-                                  </div>
+                                      >
+                                        ${data.count}
+                                      </div>`}
                                   <div
-                                    class="col-3 col-lg-2 d-flex align-items-center justify-content-center  d-none d-sm-flex"
-                                    style="gap:10px;cursor: pointer;"
+                                    class="pos-count-button"
                                     onclick="${gvc.event(() => {
-                                        var _a, _b;
-                                        const def = ((_b = (_a = obj.ogOrderData.lineItems) === null || _a === void 0 ? void 0 : _a[index]) === null || _b === void 0 ? void 0 : _b.custom_price) || 0;
-                                        PosFunction.setMoney(gvc, def, money => {
-                                            if (money === data.sale_price) {
-                                                delete obj.ogOrderData.lineItems[index].custom_price;
-                                            }
-                                            else {
-                                                obj.ogOrderData.lineItems[index].custom_price = money;
-                                            }
-                                            refreshOrderView();
-                                        }, '更改商品單價');
-                                    })}"
+                                    obj.ogOrderData.lineItems[index].count = Tool.floatAdd(obj.ogOrderData.lineItems[index].count, 1);
+                                    refreshOrderView();
+                                })}"
                                   >
-                                    ${(() => {
-                                        function formatPrice(price) {
-                                            return `$${parseInt(`${price}`, 10).toLocaleString()}`;
-                                        }
-                                        if (data.variant_sale_price && data.sale_price !== data.variant_sale_price) {
-                                            return html `
-                                          <span class="text-decoration-line-through"
-                                            >${formatPrice(data.variant_sale_price * data.count)}</span
-                                          >
-                                          <span class="text-danger">${formatPrice(data.sale_price * data.count)}</span>
-                                        `;
-                                        }
-                                        return html ` <span>${formatPrice(data.sale_price * data.count)}</span> `;
-                                    })()}
+                                    ${this.plusSVG}
                                   </div>
                                 </div>
-                              `;
-                                })
-                                    .join((() => {
-                                    if (document.body.clientWidth < 800) {
-                                        return `<div style="margin-top: 20px;background: #DDD;width: 100%;height: 1px;"></div>`;
+                                <div
+                                  class="col-3 col-lg-2 d-flex align-items-center justify-content-center d-none d-sm-flex"
+                                  style="gap:10px;"
+                                >
+                                  ${(() => {
+                                    function formatPrice(price) {
+                                        return `$${parseInt(`${price}`, 10).toLocaleString()}`;
                                     }
-                                    else {
-                                        return `<div style=""></div>`;
+                                    if (data.variant_sale_price && data.sale_price !== data.variant_sale_price) {
+                                        return html `
+                                        <span class="text-decoration-line-through"
+                                          >${formatPrice(data.variant_sale_price * data.count)}</span
+                                        >
+                                        <span class="text-danger">${formatPrice(data.sale_price * data.count)}</span>
+                                      `;
                                     }
-                                })());
-                            }
-                            return ``;
+                                    return html `<span>${formatPrice(data.sale_price * data.count)}</span> `;
+                                })()}
+                                </div>
+                              </div>
+                            `;
+                            })
+                                .join(document.body.clientWidth < 800
+                                ? html `<div style="margin-top: 20px;background: #DDD;width: 100%;height: 1px;"></div>`
+                                : '');
                         })()}
                     </div>
                   </div>
@@ -365,7 +413,7 @@ export class PaymentPage {
                               class="w-100 d-flex align-items-center justify-content-center"
                               style="cursor:pointer;flex:1; height: 65px; ${vm.type === 'old'
                                             ? `border-radius: 0px 10px 0px 0px; background: #FFF;`
-                                            : ``}"
+                                            : ''}"
                               onclick="${gvc.event(() => {
                                             vm.type = 'old';
                                             gvc.notifyDataChange(vm.id);
@@ -377,7 +425,7 @@ export class PaymentPage {
                               class="w-100 d-flex align-items-center justify-content-center"
                               style="cursor:pointer;flex:1; height: 65px;${vm.type === 'new'
                                             ? `border-radius: 10px 10px 0px 0px; background: #FFF;`
-                                            : ``}"
+                                            : ''}"
                               onclick="${gvc.event(() => {
                                             vm.type = 'new';
                                             gvc.notifyDataChange(vm.id);
@@ -495,7 +543,6 @@ export class PaymentPage {
                                         </div>
                                       </div>
                                       <div
-                                        class=""
                                         style="display: flex; width: 44px; height: 44px; padding: 8px 10px; border-radius: 10px; border: 1px solid #DDD; justify-content: center; align-items: center; gap: 8px; flex-shrink: 0;"
                                         onclick="${gvc.event(() => {
                                                             gvc.glitter.runJsInterFace('start_scan', {}, (res) => __awaiter(this, void 0, void 0, function* () {
@@ -722,7 +769,7 @@ export class PaymentPage {
                                                                     }
                                                                 },
                                                                 divCreate: {
-                                                                    class: `w-100 my-3`,
+                                                                    class: 'w-100 my-3',
                                                                     style: `padding: 20px; border-radius: 10px; border: 1px #DDDDDD solid; flex-direction: column; justify-content: flex-start; align-items: flex-end; gap: 18px; display: inline-flex;`,
                                                                 },
                                                             };
@@ -731,8 +778,8 @@ export class PaymentPage {
                                                     return inView.join('');
                                                 },
                                                 divCreate: {
-                                                    class: ` p-3 bg-white`,
-                                                    style: `gap:14px;`,
+                                                    class: 'p-3 bg-white',
+                                                    style: 'gap: 14px;',
                                                 },
                                             };
                                         }));
@@ -747,7 +794,6 @@ export class PaymentPage {
                                             address: '',
                                             managerNote: '',
                                         };
-                                        const saasConfig = window.parent.saasConfig;
                                         view.push(gvc.bindView(() => {
                                             const id = gvc.glitter.getUUID();
                                             return {
@@ -762,7 +808,7 @@ export class PaymentPage {
                                                             let h = '';
                                                             data.map((item) => {
                                                                 if (item.hidden) {
-                                                                    return ``;
+                                                                    return '';
                                                                 }
                                                                 if (item.require) {
                                                                     need_check[item.key] = true;
@@ -892,11 +938,11 @@ export class PaymentPage {
                                 divCreate: {
                                     class: `mx-sm-0`,
                                     style: `
-                                                    border-radius: 10px;
-                                                    overflow: hidden;
-                                                    background: #eaeaea;
-                                                    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.15);
-                                                `,
+                          border-radius: 10px;
+                          overflow: hidden;
+                          background: #eaeaea;
+                          box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.15);
+                        `,
                                 },
                             };
                         })}
@@ -966,17 +1012,22 @@ export class PaymentPage {
                       `;
                             }
                             else if (obj.ogOrderData.user_info.shipment === 'normal') {
-                                return `<input class="form-control mt-2" value="${(_a = obj.ogOrderData.user_info.address) !== null && _a !== void 0 ? _a : ''}" onchange="${gvc.event((e, event) => {
+                                return html `<input
+                        class="form-control mt-2"
+                        value="${(_a = obj.ogOrderData.user_info.address) !== null && _a !== void 0 ? _a : ''}"
+                        onchange="${gvc.event(e => {
                                     obj.ogOrderData.user_info.address = e.value;
-                                })}" placeholder="請輸入宅配地址">`;
+                                })}"
+                        placeholder="請輸入宅配地址"
+                      />`;
                             }
                             else {
-                                return ``;
+                                return '';
                             }
                         })()}
                   ${(() => {
                             if (obj.ogOrderData.user_info.shipment === 'now') {
-                                return ``;
+                                return '';
                             }
                             else {
                                 return html ` ${PaymentPage.spaceView()}
@@ -1008,7 +1059,7 @@ export class PaymentPage {
                                     },
                                 ]
                                     .map(dd => {
-                                    return html ` <div class="mb-2 col-${dd.col} ps-0" style="">
+                                    return html ` <div class="mb-2 col-${dd.col} ps-0">
                                 <div>
                                   <div
                                     class="fw-normal mb-2 fs-6"
@@ -1039,10 +1090,10 @@ export class PaymentPage {
                             {
                                 title: '小計總額',
                                 hint: '',
-                                value: (Number(orderDetail.total) +
+                                value: parseInt(`${Number(orderDetail.total) +
                                     Number(orderDetail.discount) -
                                     Number(orderDetail.shipment_fee) +
-                                    Number(orderDetail.use_rebate)).toLocaleString(),
+                                    Number(orderDetail.use_rebate)}`, 10).toLocaleString(),
                             },
                             ...(() => {
                                 if (PayConfig.pos_config.pos_type === 'eat') {
@@ -1094,7 +1145,7 @@ export class PaymentPage {
                                                 return `${isMinus} $${(dd.discount_total * isNegative).toLocaleString()}`;
                                             })()}
                               <i
-                                class="fa-solid fa-xmark ${dd.code || dd.id === 0 ? `` : `d-none`} fs-5"
+                                class="fa-solid fa-xmark ${dd.code || dd.id === 0 ? '' : `d-none`} fs-5"
                                 style="color:#949494;"
                                 onclick="${gvc.event(() => {
                                             const dialog = new ShareDialog(gvc.glitter);
@@ -1139,7 +1190,7 @@ export class PaymentPage {
                               ${dd.title}
                             </div>
                             <div
-                              class="${dd.hint ? `` : 'd-none'}"
+                              class="${dd.hint ? '' : 'd-none'}"
                               style="align-self: stretch; color: #8D8D8D; font-size: 16px; font-family: Noto Sans; text-transform: uppercase; letter-spacing: 0.64px; word-wrap: break-word"
                             >
                               ${dd.hint}
@@ -1305,7 +1356,7 @@ export class PaymentPage {
                                                 }
                                                 else {
                                                     return html ` <div class="w-100 d-flex flex-column">
-                                  <div class="d-flex align-items-center justify-content-center w-100 " style="">
+                                  <div class="d-flex align-items-center justify-content-center w-100 ">
                                     <div class="d-flex" style="flex:68;">${PosWidget.fontLight('付款方式')}</div>
                                     <div class="d-flex" style="flex:94;">${PosWidget.fontLight('付款金額')}</div>
                                     <div class="d-flex" style="flex:68;">${PosWidget.fontLight('狀態')}</div>
@@ -1336,7 +1387,6 @@ export class PaymentPage {
                                         <div class="d-flex" style="flex:94;">
                                           <input
                                             style="display: flex;width: calc(100% - 20px);padding: 9px 18px;border-radius: 10px;border: 1px solid #DDD;text-align: right;"
-                                            class=""
                                             value="${dd.total}"
                                             onclick="${gvc.event(() => {
                                                             if (dd.paied) {
@@ -1402,8 +1452,12 @@ export class PaymentPage {
                                                 }
                                             },
                                             divCreate: {
-                                                class: ``,
-                                                style: `display: flex;justify-content: space-between;margin-top: 24px;gap:15px;`,
+                                                style: `
+                                display: flex;
+                                justify-content: space-between;
+                                margin-top: 24px;
+                                gap: 15px;
+                              `,
                                             },
                                         })}`,
                                         html ` <div style="height:24px;"></div>`,
@@ -1417,7 +1471,7 @@ export class PaymentPage {
                                                 },
                                             });
                                         })),
-                                        `<div style="height:24px;"></div>`,
+                                        html `<div style="height:24px;"></div>`,
                                     ];
                                     if (obj.ogOrderData.pos_info.payment.length === 1 &&
                                         !obj.ogOrderData.pos_info.payment[0].paied) {
@@ -1449,9 +1503,7 @@ export class PaymentPage {
                                     }
                                     view.push(PaymentPage.spaceView());
                                     const total = obj.ogOrderData.pos_info.payment
-                                        .map((dd) => {
-                                        return dd.total;
-                                    })
+                                        .map((dd) => dd.total)
                                         .reduce((accumulator, currentValue) => accumulator + currentValue, 0);
                                     view.push(html ` <div class="d-flex" style="gap:18px;">
                             ${[
@@ -1579,7 +1631,6 @@ export class PaymentPage {
                               <i class="fa-solid fa-down-to-bracket fs-4"></i>
                             </div>
                             <div
-                              class=""
                               style="flex:1;display: flex;padding: 10px;justify-content: center;align-items: center;border-radius: 10px;background: #FF6C02;color: #FFF;font-size: 18px;font-style: normal;font-weight: 500;line-height: normal;letter-spacing: 0.72px;"
                               onclick="${gvc.event(() => {
                                         if (obj.ogOrderData.pos_info.payment.length > 1 &&
@@ -1604,7 +1655,6 @@ export class PaymentPage {
                               建立預購單
                             </div>
                             <div
-                              class=""
                               style="flex:1;display: flex;padding: 10px;justify-content: center;align-items: center;border-radius: 10px;background: #393939;color: #FFF;font-size: 18px;font-style: normal;font-weight: 500;line-height: normal;letter-spacing: 0.72px;"
                               onclick="${gvc.event(() => {
                                         if (total - parseInt(orderDetail.total, 10) < 0) {
@@ -1632,7 +1682,7 @@ export class PaymentPage {
                                         }
                                         PaymentPage.storeHistory(orderDetail);
                                         dialog.checkYesOrNot({
-                                            text: '是否確認前往結帳?',
+                                            text: '是否確認前往結帳？',
                                             callback: response => {
                                                 if (response) {
                                                     paymentNext(false);
@@ -1701,9 +1751,7 @@ export class PaymentPage {
                 return __awaiter(this, void 0, void 0, function* () {
                     const dialog = new ShareDialog(gvc.glitter);
                     orderDetail.code_array = orderDetail.code_array || [];
-                    orderDetail.code_array = orderDetail.code_array.filter((dd) => {
-                        return dd !== c_vm.value;
-                    });
+                    orderDetail.code_array = orderDetail.code_array.filter((dd) => dd !== c_vm.value);
                     orderDetail.code_array.push(c_vm.value);
                     dialog.dataLoading({ visible: true });
                     const od = (yield ApiShop.getCheckout({
@@ -1713,13 +1761,8 @@ export class PaymentPage {
                         code_array: orderDetail.code_array,
                     })).response.data;
                     dialog.dataLoading({ visible: false });
-                    if (!od ||
-                        !od.voucherList.find((dd) => {
-                            return dd.code === c_vm.value;
-                        })) {
-                        orderDetail.code_array = orderDetail.code_array.filter((dd) => {
-                            return dd !== c_vm.value;
-                        });
+                    if (!od || !od.voucherList.find((dd) => dd.code === c_vm.value)) {
+                        orderDetail.code_array = orderDetail.code_array.filter((dd) => dd !== c_vm.value);
                         dialog.errorMessage({ text: '請輸入正確的優惠代碼' });
                     }
                     else {
@@ -1739,7 +1782,6 @@ export class PaymentPage {
                 請掃描或輸入優惠代碼
               </div>
               <img
-                class=""
                 style="max-width:70%;"
                 src="https://d3jnmi1tfjgtti.cloudfront.net/file/234285319/size1440_s*px$_s5sasfscsbs7s3sf_%E6%88%AA%E5%9C%962024-08-30%E4%B8%8B%E5%8D%882.29.361.png"
               />
@@ -1831,7 +1873,6 @@ export class PaymentPage {
                 請掃描或輸入會員代碼
               </div>
               <img
-                class=""
                 style="max-width:70%;"
                 src="https://d3jnmi1tfjgtti.cloudfront.net/file/234285319/size1440_s*px$_s5sasfscsbs7s3sf_%E6%88%AA%E5%9C%962024-08-30%E4%B8%8B%E5%8D%882.29.361.png"
               />
@@ -2041,34 +2082,9 @@ export class PaymentPage {
                   <div
                     style="position: relative;max-width:calc(100% - 20px);width: 492px;height: 223px;border-radius: 10px;background: #FFF;display: flex;flex-direction: column;align-items: center;justify-content: center;"
                   >
-                    <svg
-                      xmlns="http://www.w3.org/2000/svg"
-                      width="14"
-                      height="14"
-                      viewBox="0 0 14 14"
-                      fill="none"
-                      style="position: absolute;top: 12px;right: 12px;cursor: pointer;"
-                      onclick="${gvc.event(() => {
+                    ${PaymentPage.checkSVG(gvc.event(() => {
                                 gvc.glitter.closeDiaLog();
-                            })}"
-                    >
-                      <path d="M1 1L13 13" stroke="#393939" stroke-linecap="round" />
-                      <path d="M13 1L1 13" stroke="#393939" stroke-linecap="round" />
-                    </svg>
-
-                    <svg xmlns="http://www.w3.org/2000/svg" width="75" height="75" viewBox="0 0 75 75" fill="none">
-                      <g clip-path="url(#clip0_9850_171427)">
-                        <path
-                          d="M37.5 7.03125C45.5808 7.03125 53.3307 10.2413 59.0447 15.9553C64.7587 21.6693 67.9688 29.4192 67.9688 37.5C67.9688 45.5808 64.7587 53.3307 59.0447 59.0447C53.3307 64.7587 45.5808 67.9688 37.5 67.9688C29.4192 67.9688 21.6693 64.7587 15.9553 59.0447C10.2413 53.3307 7.03125 45.5808 7.03125 37.5C7.03125 29.4192 10.2413 21.6693 15.9553 15.9553C21.6693 10.2413 29.4192 7.03125 37.5 7.03125ZM37.5 75C47.4456 75 56.9839 71.0491 64.0165 64.0165C71.0491 56.9839 75 47.4456 75 37.5C75 27.5544 71.0491 18.0161 64.0165 10.9835C56.9839 3.95088 47.4456 0 37.5 0C27.5544 0 18.0161 3.95088 10.9835 10.9835C3.95088 18.0161 0 27.5544 0 37.5C0 47.4456 3.95088 56.9839 10.9835 64.0165C18.0161 71.0491 27.5544 75 37.5 75ZM54.0527 30.6152C55.4297 29.2383 55.4297 27.0117 54.0527 25.6494C52.6758 24.2871 50.4492 24.2725 49.0869 25.6494L32.8271 41.9092L25.9424 35.0244C24.5654 33.6475 22.3389 33.6475 20.9766 35.0244C19.6143 36.4014 19.5996 38.6279 20.9766 39.9902L30.3516 49.3652C31.7285 50.7422 33.9551 50.7422 35.3174 49.3652L54.0527 30.6152Z"
-                          fill="#393939"
-                        />
-                      </g>
-                      <defs>
-                        <clipPath id="clip0_9850_171427">
-                          <rect width="75" height="75" fill="white" />
-                        </clipPath>
-                      </defs>
-                    </svg>
+                            }))}
                     <div
                       style="text-align: center;color: #393939;font-size: 16px;font-weight: 400;line-height: 160%;margin-top: 24px;"
                     >
@@ -2078,17 +2094,14 @@ export class PaymentPage {
                 </div>
               `;
                         }, 'orderFinish', {
-                            dismiss: () => {
-                            },
+                            dismiss: () => { },
                         });
                     }
                 }));
             }
             if ((yield ApiShop.getInvoiceType()).response.method === 'nouse' ||
                 orderDetail.pos_info.payment
-                    .map((dd) => {
-                    return dd.total;
-                })
+                    .map((dd) => dd.total)
                     .reduce((accumulator, currentValue) => accumulator + currentValue, 0) < orderDetail.total ||
                 !PayConfig.pos_config.pos_support_finction.includes('print_invoice')) {
                 c_vm.invoice_select = 'nouse';
@@ -2118,22 +2131,22 @@ export class PaymentPage {
                             {
                                 title: PayConfig.deviceType === 'pos' || ConnectionMode.on_connected_device ? `列印` : `寄送`,
                                 value: 'print',
-                                icon: `<i class="fa-regular fa-print"></i>`,
+                                icon: html `<i class="fa-regular fa-print"></i>`,
                             },
                             {
                                 title: `載具`,
                                 value: 'carry',
-                                icon: `<i class="fa-regular fa-mobile"></i>`,
+                                icon: html `<i class="fa-regular fa-mobile"></i>`,
                             },
                             {
                                 title: `統編`,
                                 value: 'company',
-                                icon: `<i class="fa-regular fa-building"></i>`,
+                                icon: html `<i class="fa-regular fa-building"></i>`,
                             },
                             {
                                 title: `不開立`,
                                 value: 'nouse',
-                                icon: `<i class="fa-solid fa-ban"></i>`,
+                                icon: html `<i class="fa-solid fa-ban"></i>`,
                             },
                         ];
                         return btnArray
@@ -2152,7 +2165,7 @@ export class PaymentPage {
                                 gvc.recreateView();
                             })}"
                             >
-                              <div style="" class="fs-2">${btn.icon}</div>
+                              <div class="fs-2">${btn.icon}</div>
                               <div style="font-size: 16px;font-weight: 500;letter-spacing: 0.64px;">${btn.title}</div>
                             </div>
                           </div>
@@ -2225,7 +2238,7 @@ export class PaymentPage {
                     </div>`;
                         }
                         else {
-                            return ``;
+                            return '';
                         }
                     })()}
                 <div
@@ -2235,9 +2248,7 @@ export class PaymentPage {
                   <div
                     class="flex-fill"
                     style="border-radius: 10px;background: #393939;padding: 12px 24px;color: #FFF;text-align:center;"
-                    onclick="${gvc.event(() => {
-                        next();
-                    })}"
+                    onclick="${gvc.event(() => next())}"
                   >
                     確定
                   </div>
@@ -2280,4 +2291,210 @@ export class PaymentPage {
             }
         });
     }
+    static addStyle(gvc) {
+        const isPhone = document.body.offsetWidth < 800;
+        gvc.addStyle(`
+      .pos-select {
+        font-size: 18px;
+        width: ${isPhone ? '100%' : '131px'};
+        height: 51px;
+        white-space: nowrap;
+        display: flex;
+        padding: 12px;
+        justify-content: center;
+        align-items: center;
+        border-radius: 10px;
+        box-shadow: 0px 0px 7px 0px rgba(0, 0, 0, 0.1);
+      }
+
+      .pos-category {
+        font-size: 18px;
+        width: 131px;
+        height: 51px;
+        margin-right: 16px;
+        white-space: nowrap;
+        display: flex;
+        padding: 12px 24px;
+        justify-content: center;
+        align-items: center;
+        border-radius: 10px;
+        box-shadow: 0px 0px 7px 0px rgba(0, 0, 0, 0.1);
+      }
+
+      .pos-product-card {
+        flex-basis: 188px;
+        flex-grow: 1;
+        border-radius: 10px;
+        box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.08);
+      }
+
+      .pos-bgr-image {
+        border-radius: 10px 10px 0 0;
+        background: 50% / cover no-repeat;
+      }
+
+      .pos-product-title {
+        font-size: 18px;
+        width: 100%;
+        overflow: hidden;
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        text-overflow: ellipsis;
+        word-break: break-word;
+        -webkit-box-orient: vertical;
+      }
+
+      .pos-product-container {
+        overflow: scroll;
+        max-height: 100%;
+        padding-bottom: 100px !important;
+        ${isPhone
+            ? `
+                padding-left: 12px;
+                padding-right: 12px;
+                justify-content: space-between;
+              `
+            : `
+                gap: 26px;
+                margin-left: 32px;
+                margin-right: 32px;
+              `}
+      }
+
+      .pos-drawer {
+        height: 100%;
+        width: 352px;
+        max-width: 100%;
+        overflow: auto;
+        background: #fff;
+        box-shadow: 1px 0 10px 0 rgba(0, 0, 0, 0.1);
+      }
+
+      .pos-check-container {
+        height: 50px;
+        margin-bottom: 24px;
+        margin-top: ${gvc.glitter.share.top_inset}px;
+      }
+
+      .pos-check-loading {
+        background: #ffb400;
+        color: #393939;
+        gap: 10px;
+      }
+
+      .pos-cart-list {
+        color: #393939;
+        font-size: 32px;
+        font-weight: 700;
+        letter-spacing: 3px;
+      }
+
+      .pos-cart-image {
+        height: 67px;
+        width: 66px;
+        margin-right: 12px;
+        min-height: 67px;
+        min-width: 66px;
+        background: 50% / cover;
+      }
+
+      .pos-spec {
+        color: #949494;
+        font-size: 16px;
+        font-style: normal;
+        font-weight: 500;
+      }
+
+      .pos-count-button {
+        display: flex;
+        width: 30px;
+        height: 30px;
+        padding: 8px;
+        justify-content: center;
+        align-items: center;
+        border-radius: 10px;
+        background: #393939;
+      }
+
+      .pos-count-input {
+        width: 60px;
+        height: 25px;
+        color: #393939;
+        font-size: 18px;
+        font-weight: 500;
+        text-align: center;
+      }
+
+      .pos-subtotal {
+        color: #393939;
+        font-size: 18px;
+        font-style: normal;
+        font-weight: 500;
+        letter-spacing: 0.72px;
+      }
+
+      .pos-price-container {
+        margin-top: 24px;
+        border-radius: 10px;
+        border: 1px solid #ddd;
+        background: #fff;
+        display: flex;
+        padding: 24px;
+        flex-direction: column;
+        justify-content: center;
+      }
+
+      .pos-goto-checkout {
+        margin-top: 32px;
+        display: flex;
+        padding: 12px 24px;
+        justify-content: center;
+        align-items: center;
+        border-radius: 10px;
+        background: #393939;
+        font-size: 20px;
+        font-style: normal;
+        font-weight: 500;
+        color: #fff;
+      }
+    `);
+    }
 }
+PaymentPage.minusSVG = html `<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 10 10" fill="none">
+    <path
+      d="M9.64314 5C9.64314 5.3457 9.32394 5.625 8.92885 5.625H1.07171C0.676618 5.625 0.357422 5.3457 0.357422 5C0.357422 4.6543 0.676618 4.375 1.07171 4.375H8.92885C9.32394 4.375 9.64314 4.6543 9.64314 5Z"
+      fill="white"
+    />
+  </svg>`;
+PaymentPage.plusSVG = html `<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 10 10" fill="none">
+    <path
+      d="M5.76923 0.769231C5.76923 0.34375 5.42548 0 5 0C4.57452 0 4.23077 0.34375 4.23077 0.769231V4.23077H0.769231C0.34375 4.23077 0 4.57452 0 5C0 5.42548 0.34375 5.76923 0.769231 5.76923H4.23077V9.23077C4.23077 9.65625 4.57452 10 5 10C5.42548 10 5.76923 9.65625 5.76923 9.23077V5.76923H9.23077C9.65625 5.76923 10 5.42548 10 5C10 4.57452 9.65625 4.23077 9.23077 4.23077H5.76923V0.769231Z"
+      fill="white"
+    />
+  </svg>`;
+PaymentPage.checkSVG = (clickEvent) => html `<svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="14"
+        height="14"
+        viewBox="0 0 14 14"
+        fill="none"
+        style="position: absolute;top: 12px;right: 12px;cursor: pointer;"
+        onclick="${clickEvent}"
+      >
+        <path d="M1 1L13 13" stroke="#393939" stroke-linecap="round" />
+        <path d="M13 1L1 13" stroke="#393939" stroke-linecap="round" />
+      </svg>
+
+      <svg xmlns="http://www.w3.org/2000/svg" width="75" height="75" viewBox="0 0 75 75" fill="none">
+        <g clip-path="url(#clip0_9850_171427)">
+          <path
+            d="M37.5 7.03125C45.5808 7.03125 53.3307 10.2413 59.0447 15.9553C64.7587 21.6693 67.9688 29.4192 67.9688 37.5C67.9688 45.5808 64.7587 53.3307 59.0447 59.0447C53.3307 64.7587 45.5808 67.9688 37.5 67.9688C29.4192 67.9688 21.6693 64.7587 15.9553 59.0447C10.2413 53.3307 7.03125 45.5808 7.03125 37.5C7.03125 29.4192 10.2413 21.6693 15.9553 15.9553C21.6693 10.2413 29.4192 7.03125 37.5 7.03125ZM37.5 75C47.4456 75 56.9839 71.0491 64.0165 64.0165C71.0491 56.9839 75 47.4456 75 37.5C75 27.5544 71.0491 18.0161 64.0165 10.9835C56.9839 3.95088 47.4456 0 37.5 0C27.5544 0 18.0161 3.95088 10.9835 10.9835C3.95088 18.0161 0 27.5544 0 37.5C0 47.4456 3.95088 56.9839 10.9835 64.0165C18.0161 71.0491 27.5544 75 37.5 75ZM54.0527 30.6152C55.4297 29.2383 55.4297 27.0117 54.0527 25.6494C52.6758 24.2871 50.4492 24.2725 49.0869 25.6494L32.8271 41.9092L25.9424 35.0244C24.5654 33.6475 22.3389 33.6475 20.9766 35.0244C19.6143 36.4014 19.5996 38.6279 20.9766 39.9902L30.3516 49.3652C31.7285 50.7422 33.9551 50.7422 35.3174 49.3652L54.0527 30.6152Z"
+            fill="#393939"
+          />
+        </g>
+        <defs>
+          <clipPath id="clip0_9850_171427">
+            <rect width="75" height="75" fill="white" />
+          </clipPath>
+        </defs>
+      </svg>`;