store-v1/src/renderer/views/cashier/components/orderPrintDialog.vue

<template>
  <el-dialog
    class="common-dialog"
    :title="$t('ding-dan-da-yin-yu-lan')"
    :visible="showDialog"
    width="380px"
    @close="cancel"
    append-to-body
    destroy-on-close
  >
    <div v-if="orderInfo.id" class="print-area" id="printArea">
      <div class="base-info">
        <div class="name" v-if="storeInfo">{{ storeInfo.name }}</div>
        <div class="table" v-if="orderInfo.tableInfo">
          <span>{{ $t('zhuo-ma') }}：</span>
          {{ orderInfo.tableInfo.code }}
        </div>
        <div class="no">
          <span>{{ $t('dan-hao') }}：</span>
          {{ orderInfo.orderSn }}
        </div>
      </div>
      <div>****************************************</div>
      <div class="goods-list" v-if="orderInfo.goods.length > 0">
        <div class="goods-item" v-for="(goodsInfo, index) in orderInfo.goods">
          <span class="item">{{ index + 1 }}.{{ goodsInfo.name }}</span>
          <span class="item">x{{ goodsInfo.num }}</span>
          <span class="item">{{ $pinia._s.get('user').getSymbol }}{{ goodsInfo.price }}</span>
        </div>
      </div>
      <div v-if="orderInfo.goods.length > 0">****************************************</div>
      <div class="member-info">
        <div class="item" v-if="orderInfo.isVisitor == 'N'">
          <span class="t">{{ $t('hui-yuan-ming-cheng') }}：</span>
          {{ orderInfo.userInfo.name }}
        </div>
        <div class="item" v-if="orderInfo.isVisitor == 'N'">
          <span class="t">{{ $t('hui-yuan-hao-ma') }}：</span>
          {{ orderInfo.userInfo.userNo ? orderInfo.userInfo.userNo : '-' }}
        </div>
        <div class="item" v-if="orderInfo.isVisitor == 'Y'">
          <span class="t">{{ $t('hui-yuan-xin-xi') }}：</span>
          {{ $t('wu') }}
        </div>
      </div>
      <div v-if="orderInfo.orderMode == 'express' && orderInfo.address">
        ****************************************
      </div>
      <div class="address-info" v-if="orderInfo.orderMode == 'express' && orderInfo.address">
        <div class="item">
          {{ $t('shou-huo-ren-ming') }}：{{ orderInfo.address.name ? orderInfo.address.name : '-' }}
        </div>
        <div class="item">
          {{ $t('lian-xi-dian-hua') }}：{{
            orderInfo.address.mobile ? orderInfo.address.mobile : $t('wu')
          }}
        </div>
        <div class="item">
          {{ $t('xiang-xi-di-zhi') }}：{{ orderInfo.address.provinceName
          }}{{ orderInfo.address.cityName }}{{ orderInfo.address.regionName
          }}{{ orderInfo.address.detail }}
        </div>
      </div>
      <div>****************************************</div>
      <div class="total-info">
        <div class="item">{{ $t('ding-dan-lei-xing') }}：{{ orderInfo.typeName }}</div>
        <div class="item">{{ $t('ding-dan-shi-jian') }}：{{ orderInfo.createTime }}</div>
        <div class="item">
          {{ $t('you-hui-jin-e') }}：
          <span class="discount">
            {{ $pinia._s.get('user').getSymbol }}{{ orderInfo.discount.toFixed(2) }}
          </span>
        </div>
        <div class="item">
          {{ $t('serviceFee') }}：
          <span class="discount">
            {{ $pinia._s.get('user').getSymbol }}{{ orderInfo.serviceFee.toFixed(2) }}
          </span>
        </div>
        <div class="item">
          {{ $t('ying-shou-jin-e') }}：
          <span class="amount">
            {{ $pinia._s.get('user').getSymbol }}{{ orderInfo.payAmount.toFixed(2) }}
          </span>
        </div>
      </div>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button
        type="primary"
        class="main-button"
        @click="handlePrint(printObj)"
        v-print="printObj"
      >
        {{ $t('da-yin') }}
      </el-button>
      <el-button @click="cancel()">{{ $t('qu-xiao') }}</el-button>
    </div>
  </el-dialog>
</template>
<script>
export default {
  props: {
    showDialog: {
      type: [Boolean],
      default: () => false,
    },
    orderInfo: {
      type: [Object],
      default: () => {},
    },
    storeInfo: {
      type: [Object],
      default: () => {},
    },
  },
  data() {
    return {
      printObj: {
        id: 'printArea',
        popTitle: this.$t('ding-dan-ming-xi'),
        extraCss: '',
        preview: false,
        previewTitle: this.$t('yu-lan-de-biao-ti'),
        previewPrintBtnLabel: this.$t('yu-lan-jie-shu-kai-shi-da-yin'),
        extraHead: '',
        standard: 'loose',
      },
    }
  },
  methods: {
    handlePrint() {
      this.$emit('closeDialog', 'printOrder')
    },
    cancel() {
      this.$emit('closeDialog', 'printOrder')
    },
  },
}
</script>
<style scoped lang="scss">
.print-area {
  font-size: 14px;
  border: solid 1px #ccc;
  padding: 30px 10px 30px 10px;
  overflow: scroll;
  width: 100%;
  .base-info {
    margin-bottom: 10px;
    .name {
      font-weight: bold;
      margin-bottom: 5px;
    }
  }
  .goods-list {
    margin-top: 10px;
    margin-bottom: 15px;
    .goods-item {
      margin-bottom: 10px;
    }
  }
  .member-info {
    margin-top: 10px;
    margin-bottom: 20px;
    .item {
      clear: both;
    }
  }
  .address-info {
    margin-top: 10px;
    margin-bottom: 20px;
  }
  .total-info {
    .item {
      margin-bottom: 2px;
      .amount {
        font-weight: bold;
        font-size: 28px;
      }
    }
  }
}
</style>
<style media="print" lang="scss">
@page {
  size: auto;
  margin: 0mm;
}
@media print {
  html {
    height: auto;
    width: auto;
    margin: 0px;
  }
  body {
    border: solid 1px #ffffff;
  }
  #printArea {
    font-size: 14px;
    display: block;
    min-width: 320px;
    min-height: 420px;
    margin-top: 60px;
    .base-info {
      margin-bottom: 10px;
      .name {
        font-weight: bold;
        margin-bottom: 5px;
      }
    }
    .goods-list {
      margin-bottom: 20px;
      .goods-item {
        margin-bottom: 50px;
        .item {
          margin-right: 10px;
          margin-bottom: 10px;
        }
      }
    }
    .member-info {
      margin-top: 20px;
      margin-bottom: 20px;
      margin-top: 10px;
      margin-bottom: 20px;
      .item {
        clear: both;
      }
    }
    .total-info {
      margin-top: 20px;
      margin-bottom: 60px;
      .item {
        margin-bottom: 2px;
        .amount {
          font-weight: bold;
          font-size: 28px;
        }
      }
    }
  }
}
</style>