cashier_desktop/src/views/home/components/settleAccount.vue

<!-- 结算订单 -->

<template>
    <el-drawer size="100%" :with-header="false" direction="btt" v-model="dialogVisible">
        <div class="drawer_wrap">
            <div class="cart_list">
                <div class="nav_wrap card">
                    <div class="return" @click="dialogVisible = false">
                        <el-icon class="icon">
                            <ArrowLeftBold />
                        </el-icon>
                    </div>
                    <div class="info">
                        <div class="master_id">{{ props.masterId }}</div>
                        <div class="btm">
                            <span class="p">服务员：{{ store.userInfo.shopName || '' }}</span>
                            <span class="t">03-01 09:05</span>
                        </div>
                    </div>
                </div>
                <div class="list_wrap card" style="margin-top: var(--el-font-size-base);">
                    <div class="item" v-for="item in props.cart" :key="item.id">
                        <div class="top">
                            <span class="name">{{ item.name }}</span>
                            <span class="n">x{{ item.number }}</span>
                            <span class="p">￥{{ item.salePrice }}</span>
                        </div>
                        <div class="gift_wrap" v-if="item.isGift == 'true'">
                            <span>[赠送]</span>
                            <span>￥-{{ item.salePrice }}</span>
                        </div>
                        <div class="tag_wrap" v-if="item.skuName">
                            <div class="tag" v-for="item in item.skuName.split(',')">{{ item }}</div>
                        </div>
                        <div class="packge_Wrap" v-if="item.isPack == 'true'">
                            <div class="icon_item" v-if="item.isPack == 'true'" @click="giftPackHandle('isPack', item)">
                                <el-icon class="icon" style="color: var(--primary-color);">
                                    <Box />
                                </el-icon>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="footer">
                    <!-- <el-button icon="Edit"></el-button> -->
                    <div class="button">
                        <el-checkbox v-model="isPrint" border label="打印结算小票" style="width: 100%;" />
                    </div>
                    <div class="print">
                        <el-button type="primary" @click="printHandle">打印预结单</el-button>
                    </div>
                </div>
            </div>
            <div class="pay_wrap">
                <payCard :amount="props.amount" :orderId="props.orderId" @paySuccess="paySuccess" />
            </div>
        </div>
    </el-drawer>
</template>

<script setup>
import { ref } from 'vue'
import { useUser } from "@/store/user.js"
import payCard from '@/components/payCard/payCard.vue'

import { ipcRenderer } from 'electron'

const store = useUser()

const emit = defineEmits('paySuccess')

const dialogVisible = ref(false)
const props = defineProps({
    cart: {
        type: Array,
        default: []
    },
    amount: {
        type: [Number, String],
        default: 0
    },
    remark: {
        type: String,
        default: ''
    },
    orderId: {
        type: [String, Number],
        default: ''
    },
    masterId: {
        type: String,
        default: ''
    }
})

const isPrint = ref(true)

function printHandle() {
    if (!isPrint.value) return
    const data = {
        shop_name: store.userInfo.merchantName,
        carts: props.cart,
        amount: props.amount,
        remark: props.remark,
        orderId: props.orderId
    }
    ipcRenderer.send('printerInfoSync', JSON.stringify(data))
}

// 订单已支付
function paySuccess() {
    dialogVisible.value = false
    emit('paySuccess')
}

function show() {
    dialogVisible.value = true
}

defineExpose({
    show
})
</script>

<style>
.el-drawer {
    background-color: #efefef !important;
}
</style>

<style scoped lang="scss">
.drawer_wrap {
    width: 100%;
    height: 100%;
    display: flex;
    padding: var(--el-font-size-base) 0;

    .cart_list {
        flex: 1;

        .nav_wrap {
            display: flex;
            align-items: center;
            padding: 0 var(--el-font-size-base);

            .return {
                $size: 50px;
                width: $size;
                height: $size;
                border-radius: 50%;
                border: 2px solid #333;
                display: flex;
                align-items: center;
                justify-content: center;

                .icon {
                    color: #333;
                    font-size: var(--el-font-size-base);
                }
            }

            .info {
                flex: 1;
                padding-left: var(--el-font-size-base);
                $padding: 10px;

                .master_id {
                    font-size: calc(var(--el-font-size-base) + 10px);
                    border-bottom: 1px solid #ececec;
                    padding: $padding 0;
                }

                .btm {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    padding: $padding 0;


                    .p {
                        color: #999;
                    }
                }
            }
        }

        .list_wrap {
            padding: var(--el-font-size-base);
            height: calc(100vh - 200px);
            overflow-y: auto;

            .item {
                padding-bottom: var(--el-font-size-base);

                .top {
                    display: flex;
                    padding-bottom: 6px;

                    .name {
                        flex: 1;
                    }

                    .n {
                        margin-right: 50px;
                        color: #555;
                    }

                    .p {
                        color: #555;
                    }
                }

                .gift_wrap {
                    display: flex;
                    justify-content: space-between;
                    color: #999;
                    font-size: 16px;
                }

                .tag_wrap {
                    display: flex;
                    flex-wrap: wrap;
                    padding-top: 10px;
                    padding-bottom: 10px;

                    .tag {
                        padding: 2px 6px;
                        background-color: var(--el-color-danger);
                        color: #fff;
                        margin-right: 10px;
                        margin-bottom: 10px;
                    }
                }

                .packge_Wrap {
                    display: flex;
                    align-items: center;

                    .icon_item {
                        $size: 40px;
                        width: $size;
                        height: $size;
                        background-color: #e2e2e2;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        margin-right: 10px;
                    }
                }
            }
        }

        .footer {
            display: flex;
            padding-top: var(--el-font-size-base);
            gap: var(--el-font-size-base);

            .editor {
                border: 1px solid #ececec;
                border-radius: 6px;
                display: flex;
                align-items: center;
                justify-content: center;
                color: #555;
            }

            .button {
                flex: 1;

                :deep(.el-checkbox.el-checkbox--large) {
                    height: var(--el-component-size-large);
                    background-color: #fff;
                }

                :deep(.el-checkbox__inner) {
                    width: 20px;
                    height: 20px;

                    &::after {
                        border-width: 2px;
                        top: 3px;
                        left: 7px;
                    }
                }

                :deep(.el-checkbox__label) {
                    font-size: var(--el-font-size-base) !important;
                }
            }
        }
    }

    .pay_wrap {
        flex: 1.5;
        padding-left: 20px;
    }
}
</style>