1468 lines
43 KiB
Vue
1468 lines
43 KiB
Vue
<template>
|
||
<el-dialog
|
||
append-to-body
|
||
custom-class="center-dialog"
|
||
title="福家优鲜 线上超市"
|
||
top="0vh"
|
||
:visible.sync="isDialog"
|
||
width="400px"
|
||
@close="closeDialog"
|
||
class="receiptDialog-container"
|
||
>
|
||
<div class="block-container">
|
||
<!-- <div v-for="(item,index) of receiptConfig" :key="index" :class="[item.class,test(item.classText)]" :style="item.style" v-show=" item.show.length > 0 ? test2(item.show) : test3(item.handerChekcItems)">
|
||
{{ item.data != '' ? item.data : item.dataKey.length > 0 ? printData[item.dataKey[0]][item.dataKey[1]] : '' }}
|
||
<div v-if="item.children.length > 0 ">
|
||
<div :style="group.style" :class="[group.class,test(group.classText)]" v-for="(group,index2) of item.children" :key="index2" v-show="(group.show)">
|
||
{{ handerText(group) }}
|
||
</div>
|
||
</div>
|
||
</div> -->
|
||
<div
|
||
style="padding-bottom: 10px"
|
||
:class="[
|
||
'block-content',
|
||
'item-block',
|
||
classItem('header_info', 'template_size', 'template_bold'),
|
||
]"
|
||
v-show="showItem('header_info', 'template_status')"
|
||
>
|
||
{{ printData.header_info.template_name || '小票名称' }}
|
||
</div>
|
||
<div
|
||
style="padding-bottom: 10px"
|
||
:class="[
|
||
'block-content',
|
||
'item-block',
|
||
classItem('header_info', 'shop_name_size', 'shop_name_bold'),
|
||
]"
|
||
v-show="showItem('header_info', 'shop_name')"
|
||
>
|
||
商城名称
|
||
</div>
|
||
<div
|
||
class="block-content item-small-size"
|
||
v-show="
|
||
handerChekcItem('recharge_info', [
|
||
'recharge_money',
|
||
'send_money',
|
||
'customer_balance',
|
||
]) && [3].includes(form.resource)
|
||
"
|
||
>
|
||
<div
|
||
class="item-block-left"
|
||
v-show="showItem('header_info', 'write_off_name')"
|
||
>
|
||
核销员：张三
|
||
</div>
|
||
<div
|
||
class="item-block-left"
|
||
v-show="showItem('header_info', 'write_off_time')"
|
||
>
|
||
核销时间：2023-12-12 14:20:20
|
||
</div>
|
||
<div
|
||
class="item-block-left"
|
||
v-show="showItem('header_info', 'order_no')"
|
||
>
|
||
订单编号：ES20231026111444527685
|
||
</div>
|
||
<div
|
||
class="item-block-left"
|
||
v-show="showItem('header_info', 'write_off_type')"
|
||
>
|
||
核销类型：自提订单
|
||
</div>
|
||
</div>
|
||
<div
|
||
class="block-content item-small-size"
|
||
v-show="
|
||
handerChekcItem('header_info', [
|
||
'open_time',
|
||
'print_time',
|
||
'print_people',
|
||
]) && form.resource == 5
|
||
"
|
||
>
|
||
<div
|
||
class="item-block-left"
|
||
v-show="showItem('header_info', 'open_time')"
|
||
>
|
||
营业时间：2023-02-17
|
||
</div>
|
||
<div
|
||
class="item-block-left"
|
||
v-show="showItem('header_info', 'print_time')"
|
||
>
|
||
打印时间：2023-02-28 16:29:29
|
||
</div>
|
||
<div
|
||
class="item-block-left"
|
||
v-show="showItem('header_info', 'print_people')"
|
||
>
|
||
打印人：张三
|
||
</div>
|
||
</div>
|
||
<div
|
||
class="block-content item-small-size"
|
||
v-show="
|
||
handerChekcItem('stand_info', ['name', 'start_time', 'end_time']) &&
|
||
form.resource == 5
|
||
"
|
||
>
|
||
<div class="item-block-left" v-show="showItem('stand_info', 'name')">
|
||
收银员：李四
|
||
</div>
|
||
<div
|
||
class="item-block-left"
|
||
v-show="showItem('stand_info', 'start_time')"
|
||
>
|
||
开始：2023-02-28 16:29:29
|
||
</div>
|
||
<div
|
||
class="item-block-left"
|
||
v-show="showItem('stand_info', 'end_time')"
|
||
>
|
||
结束：2023-02-28 16:29:29
|
||
</div>
|
||
</div>
|
||
<div
|
||
class="block-content item-small-size"
|
||
v-show="
|
||
handerChekcItem('finish_info', [
|
||
'all',
|
||
'pay_order_count',
|
||
'sale_goods_count',
|
||
'card_price',
|
||
'recharge_money_price',
|
||
'refund_price',
|
||
'refund_order_count',
|
||
'refund_goods_count',
|
||
'real_money',
|
||
]) && form.resource == 5
|
||
"
|
||
>
|
||
<div class="item-block gift-block">
|
||
<div class="gift-boder"></div>
|
||
<div class="gift-num item-small-size bold">营业汇总</div>
|
||
<div class="gift-boder"></div>
|
||
</div>
|
||
<div
|
||
class="item-block item-balance-info item-small-size"
|
||
v-show="showItem('finish_info', 'all')"
|
||
>
|
||
<div class="item-balance-info-name">总交易额</div>
|
||
<div class="item-balance-info-num">31000</div>
|
||
</div>
|
||
<div
|
||
class="item-block item-balance-info item-small-size"
|
||
v-show="showItem('finish_info', 'pay_order_count')"
|
||
>
|
||
<div class="item-balance-info-name">支付订单数</div>
|
||
<div class="item-balance-info-num">3600</div>
|
||
</div>
|
||
<div
|
||
class="item-block item-balance-info item-small-size"
|
||
v-show="showItem('finish_info', 'sale_goods_count')"
|
||
>
|
||
<div class="item-balance-info-name">出售商品件数</div>
|
||
<div class="item-balance-info-num">5000</div>
|
||
</div>
|
||
<div
|
||
class="item-block item-balance-info item-small-size"
|
||
v-show="showItem('finish_info', 'card_price')"
|
||
>
|
||
<div class="item-balance-info-name">会员卡交易额</div>
|
||
<div class="item-balance-info-num">3546</div>
|
||
</div>
|
||
<div
|
||
class="item-block item-balance-info item-small-size"
|
||
v-show="showItem('finish_info', 'recharge_money_price')"
|
||
>
|
||
<div class="item-balance-info-name">余额充值金额</div>
|
||
<div class="item-balance-info-num">9555</div>
|
||
</div>
|
||
<div
|
||
class="item-block item-balance-info item-small-size"
|
||
v-show="showItem('finish_info', 'refund_price')"
|
||
>
|
||
<div class="item-balance-info-name">退款金额</div>
|
||
<div class="item-balance-info-num">3000</div>
|
||
</div>
|
||
<div
|
||
class="item-block item-balance-info item-small-size"
|
||
v-show="showItem('finish_info', 'refund_order_count')"
|
||
>
|
||
<div class="item-balance-info-name">退款订单数</div>
|
||
<div class="item-balance-info-num">30</div>
|
||
</div>
|
||
<div
|
||
class="item-block item-balance-info item-small-size"
|
||
v-show="showItem('finish_info', 'refund_goods_count')"
|
||
>
|
||
<div class="item-balance-info-name">退款件数</div>
|
||
<div class="item-balance-info-num">20</div>
|
||
</div>
|
||
<div
|
||
:class="[
|
||
'item-block',
|
||
'item-balance-info',
|
||
classItem('finish_info', 'real_money_size', 'real_money_blod'),
|
||
]"
|
||
v-show="showItem('finish_info', 'real_money')"
|
||
>
|
||
<div class="item-balance-info-name">实营收额</div>
|
||
<div class="item-balance-info-num">250000</div>
|
||
</div>
|
||
</div>
|
||
<div
|
||
class="block-content item-small-size"
|
||
v-show="
|
||
handerChekcItem('pay_type_info', [
|
||
'wechat',
|
||
'ali',
|
||
'cash',
|
||
'balance',
|
||
'other',
|
||
]) && form.resource == 5
|
||
"
|
||
>
|
||
<div class="item-block gift-block">
|
||
<div class="gift-boder"></div>
|
||
<div class="gift-num item-small-size bold">支付方式组成</div>
|
||
<div class="gift-boder"></div>
|
||
</div>
|
||
<div
|
||
class="item-block item-balance-info item-small-size"
|
||
v-show="showItem('pay_type_info', 'wechat')"
|
||
>
|
||
<div class="item-balance-info-name">微信</div>
|
||
<div class="item-balance-info-num">31000</div>
|
||
</div>
|
||
<div
|
||
class="item-block item-balance-info item-small-size"
|
||
v-show="showItem('pay_type_info', 'ali')"
|
||
>
|
||
<div class="item-balance-info-name">支付宝</div>
|
||
<div class="item-balance-info-num">3600</div>
|
||
</div>
|
||
<div
|
||
class="item-block item-balance-info item-small-size"
|
||
v-show="showItem('pay_type_info', 'cash')"
|
||
>
|
||
<div class="item-balance-info-name">现金</div>
|
||
<div class="item-balance-info-num">5000</div>
|
||
</div>
|
||
<div
|
||
class="item-block item-balance-info item-small-size"
|
||
v-show="showItem('pay_type_info', 'balance')"
|
||
>
|
||
<div class="item-balance-info-name">余额</div>
|
||
<div class="item-balance-info-num">3546</div>
|
||
</div>
|
||
<div
|
||
class="item-block item-balance-info item-small-size"
|
||
v-show="showItem('pay_type_info', 'other')"
|
||
>
|
||
<div class="item-balance-info-name">其他线下方式</div>
|
||
<div class="item-balance-info-num">9555</div>
|
||
</div>
|
||
</div>
|
||
<div
|
||
class="block-content item-small-size"
|
||
v-show="
|
||
handerChekcItem('checkstand_writeoff', [
|
||
'self',
|
||
'virtual',
|
||
'timegoods',
|
||
'booking',
|
||
'giftpackage',
|
||
'coupon',
|
||
'hotel',
|
||
]) && form.resource == 5
|
||
"
|
||
>
|
||
<div class="item-block gift-block">
|
||
<div class="gift-boder"></div>
|
||
<div class="gift-num item-small-size bold">核销记录</div>
|
||
<div class="gift-boder"></div>
|
||
</div>
|
||
<div
|
||
class="item-block item-balance-info item-small-size"
|
||
v-show="showItem('checkstand_writeoff', 'self')"
|
||
>
|
||
<div class="item-balance-info-name">自提订单</div>
|
||
<div class="item-balance-info-num">100单</div>
|
||
</div>
|
||
<div
|
||
class="item-block item-balance-info item-small-size"
|
||
v-show="showItem('checkstand_writeoff', 'virtual')"
|
||
>
|
||
<div class="item-balance-info-name">虚拟核销订单</div>
|
||
<div class="item-balance-info-num">200单</div>
|
||
</div>
|
||
<div
|
||
class="item-block item-balance-info item-small-size"
|
||
v-show="showItem('checkstand_writeoff', 'timegoods')"
|
||
>
|
||
<div class="item-balance-info-name">计次时卡券</div>
|
||
<div class="item-balance-info-num">5000</div>
|
||
</div>
|
||
<div
|
||
class="item-block item-balance-info item-small-size"
|
||
v-show="showItem('checkstand_writeoff', 'booking')"
|
||
>
|
||
<div class="item-balance-info-name">余额</div>
|
||
<div class="item-balance-info-num">35406</div>
|
||
</div>
|
||
<div
|
||
class="item-block item-balance-info item-small-size"
|
||
v-show="showItem('checkstand_writeoff', 'giftpackage')"
|
||
>
|
||
<div class="item-balance-info-name">预约到店</div>
|
||
<div class="item-balance-info-num">500次</div>
|
||
</div>
|
||
<div
|
||
class="item-block item-balance-info item-small-size"
|
||
v-show="showItem('checkstand_writeoff', 'coupon')"
|
||
>
|
||
<div class="item-balance-info-name">优惠券</div>
|
||
<div class="item-balance-info-num">30张</div>
|
||
</div>
|
||
<div
|
||
class="item-block item-balance-info item-small-size"
|
||
v-show="showItem('checkstand_writeoff', 'hotel')"
|
||
>
|
||
<div class="item-balance-info-name">酒店预订</div>
|
||
<div class="item-balance-info-num">5单</div>
|
||
</div>
|
||
</div>
|
||
<div
|
||
class="block-content"
|
||
v-show="
|
||
handerChekcItem('header_info', [
|
||
'gen_num',
|
||
'order_sort',
|
||
'quick_buy',
|
||
'customer_mark',
|
||
'selfsend_time',
|
||
]) && [1, 2].includes(form.resource)
|
||
"
|
||
>
|
||
<div
|
||
:class="[
|
||
'item-block',
|
||
classItem('header_info', 'gen_num_size', 'gen_num_bold'),
|
||
]"
|
||
v-show="showItem('header_info', 'gen_num')"
|
||
>
|
||
#0001
|
||
</div>
|
||
<div
|
||
:class="[
|
||
'item-block',
|
||
classItem(
|
||
'header_info',
|
||
'order_sort_font_size',
|
||
'order_sort_font_bold'
|
||
),
|
||
]"
|
||
v-show="showItem('header_info', 'order_sort') && form.resource == 1"
|
||
>
|
||
{{ printData.header_info.order_sort_prefix || '序号' }}
|
||
</div>
|
||
<div
|
||
:class="[
|
||
'item-block',
|
||
classItem('header_info', 'quick_buy_size', 'quick_buy_bold'),
|
||
]"
|
||
v-show="showItem('header_info', 'quick_buy')"
|
||
>
|
||
快速购买渠道名称
|
||
</div>
|
||
<div
|
||
:class="[
|
||
'item-block-left',
|
||
classItem(
|
||
'header_info',
|
||
'customer_mark_size',
|
||
'customer_mark_bold'
|
||
),
|
||
]"
|
||
v-show="
|
||
showItem('header_info', 'customer_mark') && form.resource == 1
|
||
"
|
||
>
|
||
买家备注：多用一层包装袋，送到后请打电话，谢谢！！
|
||
</div>
|
||
<div
|
||
:class="[
|
||
'item-block-left',
|
||
classItem(
|
||
'header_info',
|
||
'selfsend_time_size',
|
||
'selfsend_time_bold'
|
||
),
|
||
]"
|
||
v-show="
|
||
showItem('header_info', 'selfsend_time') && form.resource == 1
|
||
"
|
||
>
|
||
配送时间：10-25 14:00-14:30
|
||
</div>
|
||
</div>
|
||
<div
|
||
class="block-content item-small-size"
|
||
v-show="
|
||
handerChekcItem('order_info', [
|
||
'order_no',
|
||
'order_from',
|
||
'order_goods_type',
|
||
'order_pay_type',
|
||
'order_status',
|
||
'order_dispatch_name',
|
||
'order_create_time',
|
||
'order_pay_time',
|
||
'order_finish_time',
|
||
]) && [1, 2].includes(form.resource)
|
||
"
|
||
>
|
||
<div
|
||
class="item-block-left"
|
||
v-show="showItem('order_info', 'order_no')"
|
||
>
|
||
订单编号：ES20231026111444527685
|
||
</div>
|
||
<div
|
||
class="item-block-left"
|
||
v-show="showItem('order_info', 'order_from')"
|
||
>
|
||
订单来源：微信小程序
|
||
</div>
|
||
<div
|
||
class="item-block-left"
|
||
v-show="showItem('order_info', 'order_goods_type')"
|
||
>
|
||
商品类型：实体商品
|
||
</div>
|
||
<div
|
||
class="item-block-left"
|
||
v-show="showItem('order_info', 'order_pay_type')"
|
||
>
|
||
支付方式：微信支付
|
||
</div>
|
||
<div
|
||
class="item-block-left"
|
||
v-show="showItem('order_info', 'order_status')"
|
||
>
|
||
订单状态：已完成
|
||
</div>
|
||
<div
|
||
class="item-block-left"
|
||
v-show="showItem('order_info', 'order_dispatch_name')"
|
||
>
|
||
配送方式：同城配送
|
||
</div>
|
||
<div
|
||
class="item-block-left"
|
||
v-show="showItem('order_info', 'order_create_time')"
|
||
>
|
||
下单时间：2023-12-12 14:20:20
|
||
</div>
|
||
<div
|
||
class="item-block-left"
|
||
v-show="showItem('order_info', 'order_pay_time')"
|
||
>
|
||
付款时间：2023-12-12 14:20:20
|
||
</div>
|
||
<div
|
||
class="item-block-left"
|
||
v-show="showItem('order_info', 'order_finish_time')"
|
||
>
|
||
完成时间：2023-12-12 14:20:20
|
||
</div>
|
||
<div
|
||
class="item-block-left"
|
||
v-show="
|
||
showItem('order_info', 'refund_create_time') && form.resource == 2
|
||
"
|
||
>
|
||
申请退款时间：2023-12-12 14:20:20
|
||
</div>
|
||
<div
|
||
class="item-block-left"
|
||
v-show="
|
||
showItem('order_info', 'refund_finish_time') && form.resource == 2
|
||
"
|
||
>
|
||
退款完成时间：2023-12-12 14:20:20
|
||
</div>
|
||
</div>
|
||
<div
|
||
style="padding-bottom: 10px"
|
||
class="block-content"
|
||
v-show="form.resource == 2"
|
||
>
|
||
<div
|
||
class="item-block refund-block bold"
|
||
v-show="showItem('make_info', 'gift_info')"
|
||
>
|
||
<div class="refund-xing">*********************</div>
|
||
<div class="refund-num item-small-size">退款商品</div>
|
||
<div class="refund-xing">*********************</div>
|
||
</div>
|
||
<div class="item-block item-flex bold">
|
||
<div class="item-flex-1">商品名称</div>
|
||
<div class="item-flex-2">退款数量</div>
|
||
<div class="item-flex-2" v-show="showItem('make_info', 'real_price')">
|
||
实退款
|
||
</div>
|
||
</div>
|
||
<div
|
||
:class="[
|
||
'item-block-left',
|
||
classItem('make_info', 'real_price_size', 'real_price_bold'),
|
||
]"
|
||
v-show="showItem('make_info', 'goods_name')"
|
||
style="padding: 0"
|
||
>
|
||
(退)可口可乐mini罐 经典碳酸饮料【新包装；200ml*12罐】
|
||
</div>
|
||
<div class="item-flex">
|
||
<div class="item-flex-1"></div>
|
||
<div
|
||
class="item-flex-2"
|
||
:class="
|
||
classItem('make_info', 'real_price_size', 'real_price_bold')
|
||
"
|
||
>
|
||
[
|
||
<span style="padding: 0 5px">X 2</span>
|
||
]
|
||
</div>
|
||
<div
|
||
class="item-flex-2"
|
||
:class="
|
||
classItem('make_info', 'real_price_size', 'real_price_bold')
|
||
"
|
||
v-show="showItem('make_info', 'real_price')"
|
||
>
|
||
¥54.5
|
||
</div>
|
||
</div>
|
||
<div
|
||
:class="[
|
||
'item-block-left',
|
||
classItem('make_info', 'real_price_size', 'real_price_bold'),
|
||
]"
|
||
v-show="showItem('make_info', 'goods_name')"
|
||
>
|
||
(退)超薄液晶电视
|
||
</div>
|
||
<div class="item-flex">
|
||
<div class="item-flex-1"></div>
|
||
<div
|
||
class="item-flex-2"
|
||
:class="
|
||
classItem('make_info', 'real_price_size', 'real_price_bold')
|
||
"
|
||
>
|
||
1
|
||
</div>
|
||
<div
|
||
class="item-flex-2"
|
||
:class="
|
||
classItem('make_info', 'real_price_size', 'real_price_bold')
|
||
"
|
||
v-show="showItem('make_info', 'real_price')"
|
||
>
|
||
¥1999
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div
|
||
class="block-content item-small-size"
|
||
v-show="
|
||
handerChekcItem('refund', [
|
||
'type',
|
||
'apply_time',
|
||
'apply_money',
|
||
'apply_reason',
|
||
'apply_real',
|
||
'apply_detail',
|
||
]) && form.resource == 2
|
||
"
|
||
>
|
||
<div class="item-block-left" v-show="showItem('refund', 'type')">
|
||
退款方式：售后（仅退款）
|
||
</div>
|
||
<div class="item-block-left" v-show="showItem('refund', 'apply_time')">
|
||
申请售后时间：2023-12-12 14:20:20
|
||
</div>
|
||
<div
|
||
class="item-block item-flex"
|
||
v-show="showItem('refund', 'apply_money')"
|
||
>
|
||
申请金额：64.5
|
||
</div>
|
||
<div
|
||
class="item-block-left"
|
||
v-show="showItem('refund', 'apply_reason')"
|
||
>
|
||
申请原因：拍多了。
|
||
</div>
|
||
<div
|
||
:class="[
|
||
'item-block item-flex',
|
||
classItem('refund', 'apply_real_size', 'apply_real_bold'),
|
||
]"
|
||
v-show="showItem('refund', 'apply_real')"
|
||
>
|
||
<div class="item-flex-1">实退金额</div>
|
||
<div class="item-flex-2">64.5</div>
|
||
</div>
|
||
<div
|
||
class="item-block-left"
|
||
v-show="showItem('refund', 'apply_detail')"
|
||
>
|
||
微信退款金额：50（原路退还）
|
||
</div>
|
||
<div
|
||
class="item-block-left"
|
||
v-show="showItem('refund', 'apply_detail')"
|
||
>
|
||
余额退款金额：14.5
|
||
</div>
|
||
</div>
|
||
<div
|
||
style="padding-bottom: 10px"
|
||
class="block-content"
|
||
v-show="[1, 3].includes(form.resource)"
|
||
>
|
||
<div class="item-block item-flex">
|
||
<div class="item-flex-1">商品名称</div>
|
||
<div class="item-flex-2">数量</div>
|
||
<div
|
||
class="item-flex-2"
|
||
v-show="showItem('order_price', 'pay_price')"
|
||
>
|
||
金额
|
||
</div>
|
||
</div>
|
||
<div
|
||
:class="[
|
||
'item-block-left',
|
||
classItem('make_info', 'goods_name_size', 'goods_name_bold'),
|
||
]"
|
||
v-show="showItem('make_info', 'goods_name')"
|
||
style="padding: 0"
|
||
>
|
||
可口可乐mini罐 经典碳酸饮料【新包装；200ml*12罐】
|
||
</div>
|
||
<div
|
||
class="item-small-size"
|
||
v-show="showItem('make_info', 'goods_code')"
|
||
>
|
||
123456789
|
||
</div>
|
||
<div
|
||
style="margin: 0"
|
||
class="item-block-left item-small-size"
|
||
v-show="showItem('make_info', 'product_sn')"
|
||
>
|
||
6970448170051
|
||
</div>
|
||
<div class="item-flex">
|
||
<div class="item-flex-1"></div>
|
||
<div
|
||
class="item-flex-2"
|
||
:class="classItem('make_info', 'num_size', 'num_bold')"
|
||
>
|
||
[
|
||
<span style="padding: 0 5px">X 2</span>
|
||
]
|
||
</div>
|
||
<div
|
||
class="item-flex-2"
|
||
:class="
|
||
classItem('order_price', 'pay_price_size', 'pay_price_bold')
|
||
"
|
||
v-show="showItem('order_price', 'pay_price')"
|
||
>
|
||
¥54.5
|
||
</div>
|
||
</div>
|
||
<div
|
||
:class="[
|
||
'item-block-left',
|
||
classItem('make_info', 'goods_name_size', 'goods_name_bold'),
|
||
]"
|
||
v-show="showItem('make_info', 'goods_name')"
|
||
>
|
||
超薄液晶电视
|
||
</div>
|
||
<div
|
||
class="item-small-size"
|
||
v-show="showItem('make_info', 'goods_code')"
|
||
>
|
||
123456789
|
||
</div>
|
||
<div
|
||
style="margin: 0"
|
||
class="item-block-left item-small-size"
|
||
v-show="showItem('make_info', 'product_sn')"
|
||
>
|
||
6970448170051
|
||
</div>
|
||
<div class="item-flex">
|
||
<div class="item-flex-1"></div>
|
||
<div
|
||
class="item-flex-2"
|
||
:class="classItem('make_info', 'num_size', 'num_bold')"
|
||
>
|
||
1
|
||
</div>
|
||
<div
|
||
class="item-flex-2"
|
||
:class="
|
||
classItem('order_price', 'pay_price_size', 'pay_price_bold')
|
||
"
|
||
v-show="showItem('order_price', 'pay_price')"
|
||
>
|
||
¥1999
|
||
</div>
|
||
</div>
|
||
<div v-show="showItem('make_info', 'attach')">
|
||
<div class="item-block-left item-small-size">（上门安装服务）</div>
|
||
<div class="item-flex">
|
||
<div class="item-flex-1"></div>
|
||
<div class="item-flex-2">1</div>
|
||
<div class="item-flex-2" v-show="showItem('make_info', 'price')">
|
||
¥0
|
||
</div>
|
||
</div>
|
||
<div class="item-block-left item-small-size">（3年延保）</div>
|
||
<div class="item-flex">
|
||
<div class="item-flex-1"></div>
|
||
<div class="item-flex-2">1</div>
|
||
<div class="item-flex-2" v-show="showItem('make_info', 'price')">
|
||
¥199.99
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div
|
||
class="item-block gift-block"
|
||
v-show="showItem('make_info', 'gift_info')"
|
||
>
|
||
<div class="gift-boder"></div>
|
||
<div class="gift-num item-small-size">赠品</div>
|
||
<div class="gift-boder"></div>
|
||
</div>
|
||
<div v-show="showItem('make_info', 'gift_info')">
|
||
<div
|
||
class="item-block-left item-small-size"
|
||
v-show="form.resource == 1"
|
||
>
|
||
余额：50
|
||
</div>
|
||
<div
|
||
class="item-block-left item-small-size"
|
||
v-show="form.resource == 1"
|
||
>
|
||
积分：50
|
||
</div>
|
||
<div class="item-block-left item-small-size">
|
||
商品：冰红茶风味饮料x2；五香瓜子【150g；小包装】x1
|
||
</div>
|
||
<div
|
||
class="item-block-left item-small-size"
|
||
v-show="form.resource == 1"
|
||
>
|
||
优惠券：元旦大促7折券x1
|
||
</div>
|
||
<div
|
||
class="item-block-left item-small-size"
|
||
v-show="form.resource == 1"
|
||
>
|
||
会员卡：超级会员卡Plus【365天】
|
||
</div>
|
||
<div
|
||
class="item-block-left item-small-size"
|
||
v-show="form.resource == 1"
|
||
>
|
||
礼品卡：超值复购大礼包x1
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div
|
||
class="block-content"
|
||
v-show="form.resource == 3 && printData.write_off_info"
|
||
>
|
||
<div class="item-block item-size bold">#001</div>
|
||
<div class="item-block-left item-small-size">
|
||
核销自提点：自提点名称
|
||
</div>
|
||
<div class="item-block-left item-small-size">
|
||
联系方式：123456789123
|
||
</div>
|
||
<div class="item-block-left item-small-size">
|
||
地址：北京市朝阳区朝阳路1号
|
||
</div>
|
||
<div class="item-block-left item-small-size">营业时间：00:00~23:59</div>
|
||
<div class="item-block-left item-small-size">
|
||
自提时间：10-20 14:00~14:30
|
||
</div>
|
||
</div>
|
||
<div
|
||
class="block-content"
|
||
v-show="
|
||
handerChekcItem('order_price', [
|
||
'goods_count',
|
||
'price_detail',
|
||
'price_detail',
|
||
'price_detail',
|
||
'discount_detail',
|
||
'discount_detail',
|
||
]) && form.resource == 1
|
||
"
|
||
>
|
||
<div
|
||
class="item-block item-balance-info item-small-size"
|
||
v-show="showItem('order_price', 'goods_count')"
|
||
>
|
||
<div class="item-balance-info-name">商品件数</div>
|
||
<div class="item-balance-info-num">3</div>
|
||
</div>
|
||
<div
|
||
class="item-block item-balance-info item-small-size"
|
||
v-show="showItem('order_price', 'price_detail')"
|
||
>
|
||
<div class="item-balance-info-name">商品总额</div>
|
||
<div class="item-balance-info-num">800</div>
|
||
</div>
|
||
<div
|
||
class="item-block item-balance-info item-small-size"
|
||
v-show="showItem('order_price', 'price_detail')"
|
||
>
|
||
<div class="item-balance-info-name">押金</div>
|
||
<div class="item-balance-info-num">200</div>
|
||
</div>
|
||
<div
|
||
class="item-block item-balance-info item-small-size"
|
||
v-show="showItem('order_price', 'price_detail')"
|
||
>
|
||
<div class="item-balance-info-name">运费</div>
|
||
<div class="item-balance-info-num">10</div>
|
||
</div>
|
||
<div
|
||
class="item-block item-balance-info item-small-size"
|
||
v-show="showItem('order_price', 'discount_detail')"
|
||
>
|
||
<div class="item-balance-info-name">会员权益</div>
|
||
<div class="item-balance-info-num">3</div>
|
||
</div>
|
||
<div
|
||
class="item-block item-balance-info item-small-size"
|
||
v-show="showItem('order_price', 'discount_detail')"
|
||
>
|
||
<div class="item-balance-info-name">秒杀</div>
|
||
<div class="item-balance-info-num">-100</div>
|
||
</div>
|
||
<div
|
||
:class="[
|
||
'item-block-left',
|
||
classItem('order_price', 'pay_price_size', 'pay_price_bold'),
|
||
]"
|
||
v-show="showItem('order_price', 'pay_price')"
|
||
>
|
||
实付金额
|
||
</div>
|
||
<div
|
||
:class="[
|
||
'item-block',
|
||
classItem('make_info', 'real_price_size', 'real_price_bold'),
|
||
]"
|
||
style="text-align: right"
|
||
v-show="showItem('make_info', 'real_price')"
|
||
>
|
||
¥860.00
|
||
</div>
|
||
</div>
|
||
<div
|
||
class="block-content"
|
||
v-show="
|
||
handerChekcItem('recharge_info', [
|
||
'recharge_money',
|
||
'send_money',
|
||
'customer_balance',
|
||
]) && form.resource == 4
|
||
"
|
||
>
|
||
<div
|
||
:class="[
|
||
'item-block',
|
||
'item-balance-info',
|
||
classItem(
|
||
'recharge_info',
|
||
'recharge_money_size',
|
||
'recharge_money_blod'
|
||
),
|
||
]"
|
||
v-show="showItem('recharge_info', 'recharge_money')"
|
||
>
|
||
<div class="item-balance-info-name">充值金额</div>
|
||
<div class="item-balance-info-num">¥100.00</div>
|
||
</div>
|
||
<div
|
||
:class="[
|
||
'item-block',
|
||
'item-balance-info',
|
||
classItem('recharge_info', 'send_money_size', 'send_money_blod'),
|
||
]"
|
||
v-show="showItem('recharge_info', 'send_money')"
|
||
>
|
||
<div class="item-balance-info-name">赠送金额</div>
|
||
<div class="item-balance-info-num">¥50.00</div>
|
||
</div>
|
||
<div
|
||
:class="[
|
||
'item-block',
|
||
'item-balance-info',
|
||
classItem(
|
||
'recharge_info',
|
||
'customer_balance_size',
|
||
'customer_balance_blod'
|
||
),
|
||
]"
|
||
v-show="showItem('recharge_info', 'customer_balance')"
|
||
>
|
||
<div class="item-balance-info-name">账户余额</div>
|
||
<div class="item-balance-info-num">¥250.00</div>
|
||
</div>
|
||
</div>
|
||
<div
|
||
class="block-content"
|
||
v-show="
|
||
handerChekcItem('mark_info', ['form_data', 'saler_mark']) &&
|
||
form.resource == 1
|
||
"
|
||
>
|
||
<div
|
||
class="item-small-size"
|
||
v-show="showItem('mark_info', 'form_data')"
|
||
>
|
||
<div class="item-block-left">表单信息：信息内容</div>
|
||
<div class="item-block-left">表单信息：信息内容</div>
|
||
<div class="item-block-left">表单信息：信息内容</div>
|
||
</div>
|
||
<div
|
||
:class="[
|
||
'item-block-left',
|
||
classItem('mark_info', 'saler_mark_size', 'saler_mark_bold'),
|
||
]"
|
||
v-show="showItem('mark_info', 'saler_mark')"
|
||
>
|
||
商家备注：老客户再赠送一箱牛奶；玻璃瓶包装轻拿轻放
|
||
</div>
|
||
</div>
|
||
<div
|
||
class="block-content"
|
||
v-show="
|
||
handerChekcItem('customer_info', [
|
||
'customer_name',
|
||
'customer_mobile',
|
||
'customer_realname',
|
||
'customer_balance',
|
||
'customer_credit',
|
||
'customer_remark',
|
||
]) && [1, 2, 3, 4].includes(form.resource)
|
||
"
|
||
>
|
||
<div
|
||
class="item-block item-balance-info item-small-size"
|
||
v-show="showItem('customer_info', 'customer_name')"
|
||
>
|
||
<div class="item-balance-info-name">会员名称</div>
|
||
<div class="item-balance-info-num">AAAAAAA</div>
|
||
</div>
|
||
<div
|
||
class="item-block item-balance-info item-small-size"
|
||
v-show="showItem('customer_info', 'customer_mobile')"
|
||
>
|
||
<div class="item-balance-info-name">会员手机号</div>
|
||
<div class="item-balance-info-num">
|
||
133{{
|
||
printData.customer_info.customer_mobile_des == 1
|
||
? '****'
|
||
: printData.customer_info.customer_mobile_des || '5555'
|
||
}}3333
|
||
</div>
|
||
</div>
|
||
<div
|
||
class="item-block item-balance-info item-small-size"
|
||
v-show="showItem('customer_info', 'customer_realname')"
|
||
>
|
||
<div class="item-balance-info-name">姓名</div>
|
||
<div class="item-balance-info-num">张三</div>
|
||
</div>
|
||
<div
|
||
class="item-block item-balance-info item-small-size"
|
||
v-show="showItem('customer_info', 'customer_balance')"
|
||
>
|
||
<div class="item-balance-info-name">余额</div>
|
||
<div class="item-balance-info-num">1200.5</div>
|
||
</div>
|
||
<div
|
||
class="item-block item-balance-info item-small-size"
|
||
v-show="showItem('customer_info', 'customer_credit')"
|
||
>
|
||
<div class="item-balance-info-name">积分</div>
|
||
<div class="item-balance-info-num">500</div>
|
||
</div>
|
||
<div
|
||
class="item-block item-balance-info item-small-size"
|
||
v-show="showItem('customer_info', 'customer_remark')"
|
||
>
|
||
<div class="item-balance-info-name">备注：本店前100注册优质客户</div>
|
||
</div>
|
||
</div>
|
||
<div
|
||
class="block-content"
|
||
v-show="
|
||
handerChekcItem('customer_info', [
|
||
'buyer_name',
|
||
'buyer_mobile',
|
||
'buyer_address',
|
||
]) && form.resource == 1
|
||
"
|
||
>
|
||
<div
|
||
:class="[
|
||
'item-block-left',
|
||
classItem('customer_info', 'buyer_name_size', 'buyer_name_blod'),
|
||
]"
|
||
v-show="showItem('customer_info', 'buyer_name')"
|
||
>
|
||
收货人：张三
|
||
</div>
|
||
<div
|
||
:class="[
|
||
'item-block-left',
|
||
classItem(
|
||
'customer_info',
|
||
'buyer_mobile_size',
|
||
'buyer_mobile_blod'
|
||
),
|
||
]"
|
||
v-show="showItem('customer_info', 'buyer_mobile')"
|
||
>
|
||
联系方式：133{{
|
||
printData.customer_info.buyer_mobile_des == 1
|
||
? '****'
|
||
: printData.customer_info.buyer_mobile_des || '5555'
|
||
}}3333
|
||
</div>
|
||
<div
|
||
:class="[
|
||
'item-block-left',
|
||
classItem(
|
||
'customer_info',
|
||
'buyer_address_size',
|
||
'buyer_address_blod'
|
||
),
|
||
]"
|
||
v-show="showItem('customer_info', 'buyer_address')"
|
||
>
|
||
收货地址：北京市朝阳区朝阳路朝阳人民小区1号楼1栋1101
|
||
</div>
|
||
</div>
|
||
<div
|
||
class="block-content"
|
||
v-show="
|
||
handerChekcItem('customer_info', ['invoice', 'invoice_info']) &&
|
||
form.resource == 1
|
||
"
|
||
>
|
||
<div
|
||
class="item-block-left item-small-size"
|
||
v-show="showItem('customer_info', 'invoice')"
|
||
>
|
||
发票：需要开具
|
||
</div>
|
||
<div v-show="showItem('customer_info', 'invoice_info')">
|
||
<div class="item-block-left item-small-size">抬头类型：企业</div>
|
||
<div class="item-block-left item-small-size">
|
||
抬头信息：网络科技有限公司
|
||
</div>
|
||
<div class="item-block-left item-small-size">税号：123456789</div>
|
||
</div>
|
||
</div>
|
||
<div
|
||
class="block-content"
|
||
v-show="
|
||
handerChekcItem('pick_store', [
|
||
'store_name',
|
||
'store_address',
|
||
'store_contact',
|
||
'store_contact_name',
|
||
]) && form.resource == 1
|
||
"
|
||
>
|
||
<div
|
||
class="item-block-left item-small-size"
|
||
v-show="showItem('pick_store', 'store_name')"
|
||
>
|
||
自提门店：门店名称
|
||
</div>
|
||
<div
|
||
class="item-block-left item-small-size"
|
||
v-show="showItem('pick_store', 'store_address')"
|
||
>
|
||
门店地址：北京市朝阳区朝阳路朝阳人民小区22号楼2栋2202
|
||
</div>
|
||
<div
|
||
class="item-block-left item-small-size"
|
||
v-show="showItem('pick_store', 'store_contact')"
|
||
>
|
||
联系人：李四
|
||
</div>
|
||
<div
|
||
class="item-block-left item-small-size"
|
||
v-show="showItem('pick_store', 'store_contact_name')"
|
||
>
|
||
联系方式：13111111111
|
||
</div>
|
||
</div>
|
||
<div
|
||
class="block-content"
|
||
v-show="
|
||
handerChekcItem('footer_info', [
|
||
'stand_name',
|
||
'cashier_name',
|
||
'shop_name',
|
||
'shop_phone',
|
||
'store_name',
|
||
'store_phone',
|
||
'shop_qrcode',
|
||
'print_time',
|
||
'print_footer',
|
||
]) && [1, 3, 4].includes(form.resource)
|
||
"
|
||
>
|
||
<div
|
||
class="item-block-left item-small-size"
|
||
v-show="
|
||
showItem('footer_info', 'stand_name') && [1].includes(form.resource)
|
||
"
|
||
>
|
||
收银员：名称
|
||
</div>
|
||
<div
|
||
class="item-block-left item-small-size"
|
||
v-show="
|
||
showItem('footer_info', 'cashier_name') &&
|
||
[1].includes(form.resource)
|
||
"
|
||
>
|
||
导购员：名称
|
||
</div>
|
||
<div
|
||
class="item-block item-small-size"
|
||
v-show="showItem('footer_info', 'shop_name')"
|
||
>
|
||
商城名称
|
||
</div>
|
||
<div
|
||
class="item-block item-small-size"
|
||
v-show="showItem('footer_info', 'shop_phone')"
|
||
>
|
||
010-12345678
|
||
</div>
|
||
<div
|
||
class="item-block item-small-size"
|
||
v-show="showItem('footer_info', 'store_name')"
|
||
>
|
||
门店名称
|
||
</div>
|
||
<div
|
||
class="item-block item-small-size"
|
||
v-show="showItem('footer_info', 'store_phone')"
|
||
>
|
||
010-12345678
|
||
</div>
|
||
<div class="item-block" v-show="showItem('footer_info', 'shop_qrcode')">
|
||
<img src="./../../../../assets/weChat.png" width="300" height="300" />
|
||
</div>
|
||
<div
|
||
:class="[
|
||
[1, 3, 4].includes(form.resource)
|
||
? 'item-block'
|
||
: 'item-block-left',
|
||
'item-small-size',
|
||
]"
|
||
v-show="showItem('footer_info', 'print_time')"
|
||
>
|
||
打印时间：2023-12-12 12:12:20
|
||
</div>
|
||
<div
|
||
class="item-block item-small-size"
|
||
v-show="showItem('footer_info', 'print_footer')"
|
||
>
|
||
{{ printData.footer_info.print_footer_info }}
|
||
</div>
|
||
</div>
|
||
<div
|
||
class="block-content"
|
||
v-show="
|
||
handerChekcItem('footer_info', ['manage', 'print_time']) &&
|
||
form.resource == 2
|
||
"
|
||
>
|
||
<div
|
||
class="item-block-left item-small-size"
|
||
v-show="showItem('footer_info', 'manage') && form.resource == 2"
|
||
>
|
||
操作人：李四
|
||
</div>
|
||
<div
|
||
:class="[
|
||
form.resource == 1 ? 'item-block' : 'item-block-left',
|
||
'item-small-size',
|
||
]"
|
||
v-show="showItem('footer_info', 'print_time')"
|
||
>
|
||
打印时间：2023-12-12 12:12:20
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</el-dialog>
|
||
</template>
|
||
|
||
<script>
|
||
import { config, printData } from './receiptConfig.js'
|
||
export default {
|
||
data() {
|
||
return {
|
||
isDialog: false,
|
||
receiptConfig: config,
|
||
printData: printData,
|
||
form: {
|
||
resource: 1,
|
||
tepName: '',
|
||
},
|
||
}
|
||
},
|
||
methods: {
|
||
showDialog() {
|
||
this.isDialog = true
|
||
},
|
||
closeDialog() {
|
||
this.isDialog = false
|
||
},
|
||
handleClass(str) {
|
||
var _str = str.replace(/\['|'\]$/g, '"').replace(/','/g, '","')
|
||
debugger
|
||
// return JSON.parse(_str);
|
||
},
|
||
handerText(group) {
|
||
if (group) {
|
||
if (group.data) {
|
||
return group.data
|
||
}
|
||
}
|
||
},
|
||
handerChekcItem(itemName, keyGroups) {
|
||
for (var key of keyGroups) {
|
||
if (this.printData[itemName][key] == 1) {
|
||
return true
|
||
}
|
||
}
|
||
},
|
||
// test(items){
|
||
// if(items.length <= 0 ) return;
|
||
|
||
// let arr = [];
|
||
|
||
// if(this.printData[items[0]][items[1]] == 1){
|
||
// arr.push('item-size');
|
||
// }else{
|
||
// arr.push('item-small-size')
|
||
// }
|
||
|
||
// if(this.printData[items[0]][items[2]] == 1){
|
||
// arr.push('bold');
|
||
// }
|
||
|
||
// return arr;
|
||
// },
|
||
// test2(items){
|
||
// if(items.length <= 0 ) return;
|
||
// return this.printData[items[0]][items[1]] !=0 ? true : false
|
||
// },
|
||
// test3(items){
|
||
// if(items.length <= 0 ) return;
|
||
// for(var key of items[1]){
|
||
// if(this.printData[items[0]][key] == 1){
|
||
// return true;
|
||
// }
|
||
// }
|
||
// },
|
||
classItem(blockName, itemSizeName, itemBoldName) {
|
||
let arr = []
|
||
|
||
if (this.printData[blockName][itemSizeName] == 1) {
|
||
arr.push('item-size')
|
||
} else {
|
||
arr.push('item-small-size')
|
||
}
|
||
|
||
if (this.printData[blockName][itemBoldName] == 1) {
|
||
arr.push('bold')
|
||
}
|
||
|
||
return arr
|
||
},
|
||
// classItem(blockName,itemName){
|
||
|
||
// let arr = [];
|
||
|
||
// Object.keys(this.printData[blockName]).some(key=>{
|
||
// console.log(key);
|
||
// if(key.includes(itemName) && key.includes('size')){
|
||
// if(this.printData[blockName][key] == 1){
|
||
// arr.push('item-size');
|
||
// }else{
|
||
// arr.push('item-small-size')
|
||
// }
|
||
// }
|
||
|
||
// if(key.includes(itemName) && key.includes('bold')){
|
||
// if(this.printData[blockName][key] == 1){
|
||
// arr.push('bold');
|
||
// }
|
||
// }
|
||
// })
|
||
|
||
// return arr;
|
||
// },
|
||
showItem(blockName, itemName) {
|
||
if (!this.printData == null) return
|
||
return this.printData[blockName][itemName] != 0 ? true : false
|
||
},
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.receiptDialog-container {
|
||
.el-dialog__header {
|
||
position: sticky;
|
||
top: 0;
|
||
background-color: white;
|
||
z-index: 1001;
|
||
}
|
||
|
||
.el-dialog {
|
||
height: 670px;
|
||
max-height: 670px;
|
||
overflow: hidden;
|
||
overflow-y: auto;
|
||
}
|
||
|
||
.el-dialog__title {
|
||
font-size: 16px !important;
|
||
}
|
||
|
||
.el-dialog__body {
|
||
padding: 10px !important;
|
||
color: #000;
|
||
}
|
||
|
||
.block-container {
|
||
padding: 10px;
|
||
border: 1px solid #ededed;
|
||
border-radius: 10px;
|
||
background: #f8f8f9;
|
||
}
|
||
|
||
.block-content {
|
||
border-bottom: 1px dashed #ccc;
|
||
color: #333333 !important;
|
||
}
|
||
|
||
.item-flex {
|
||
display: flex;
|
||
font-size: 16px;
|
||
|
||
.item-flex-1 {
|
||
flex: 2 1 0%;
|
||
text-align: left;
|
||
}
|
||
|
||
.item-flex-2 {
|
||
flex: 1;
|
||
text-align: right;
|
||
}
|
||
}
|
||
|
||
.item-balance-info {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.gift-block {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.gift-num {
|
||
padding: 0 10px;
|
||
}
|
||
|
||
.gift-boder {
|
||
flex: 1;
|
||
border-bottom: 1px dashed #ccc;
|
||
}
|
||
}
|
||
|
||
.refund-block {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
font-size: 16px;
|
||
font-weight: bold;
|
||
|
||
.refund-xing {
|
||
margin-top: 7px;
|
||
line-height: 1;
|
||
}
|
||
|
||
.refund-num {
|
||
padding: 0 10px;
|
||
}
|
||
}
|
||
|
||
.item-size {
|
||
font-size: 20px;
|
||
}
|
||
|
||
.item-small-size {
|
||
font-size: 16px;
|
||
}
|
||
|
||
.item-block {
|
||
margin: 10px 0;
|
||
text-align: center;
|
||
}
|
||
|
||
.item-block-left {
|
||
margin: 10px 0;
|
||
text-align: left;
|
||
}
|
||
|
||
.bold {
|
||
font-weight: 700;
|
||
}
|
||
}
|
||
</style> |