第一章 POS界面

• POS应用中的弹窗类型
• POS界面布局

POS应用中的弹窗类型

如果想要在POS界面中使用弹窗，根据不同的版本代码形式有稍许区别。

17.0版本代码

const {confirmed} = await this.popup.add(ConfirmPopup, {
    title: _t("Refund Confirm"),
    body: _t("Are you sure to Refund?")
})

使用this.popup.add方法来添加弹窗，弹窗的结果可以通过confirm和payload变量获得。目前版本(17.0)支持的弹窗列表如下:

• 文本输入框: TextInputPopup
• 数字输入框: NumberPopup
• 对话确认框: ConfirmPopup

18.0版本代码

而在18.0中，取消了popup属性，取而代之的是dialog属性，弹窗方式为：

this.dialog.add(AlertDialog,{
    title: res.msg,
    body: res.sub_msg,
    confirm: ()=>{
        this.cancel_payment(paymentMethod, trade_no);
    }
})

支持的对话框：

• AlertDialog: 警告框
• ConfirmationDialog: 确认对话框
• ErrorDialog： 异常对话框

警告框

import { ConfirmationDialog, AlertDialog } from "@web/core/confirmation_dialog/confirmation_dialog";

this.dialog.add(AlertDialog,{
    title: res.msg,
    body: res.sub_msg,
    confirm: ()=>{
        this.cancel_payment(paymentMethod, trade_no);
    }
})

• confirm: 当用户点击了确认按钮触发的事件

确认对话框

import { ConfirmationDialog, AlertDialog } from "@web/core/confirmation_dialog/confirmation_dialog";

this.dialog.add(ConfirmationDialog,{
    title: res.msg,
    body: res.sub_msg,
    confirm: ()=>{
        this.cancel_payment(paymentMethod, trade_no);
    }
})

• confirm: 当用户点击了确认按钮触发的事件
• cancel: 当用户点击取消按钮出发的事件

文本输入框和数字对话框

使用文本对话框和数字对话框获取值的方式如下:

const { payload } = await this.popup.add(TextInputPopup, {
    title: _t("Scan Barcode/QR Code"),
});

对话框输入的内容将被赋值到变量payload中。

POS布局

18.0 版本

POS屏幕可以分为以下几个屏幕布局

• partner_list
• payment_screen
• product_screen
• receipt_screen
• scale_screen
• ticket_screen

Product Screen

接下来我们先看以下Proudct Screen的结构。

Control Buttons

想要自定义一个Control Button就需要按照如下步骤进行编码：

1. 编写button布局文件