mall4vs-bbc/src/views/modules/print/print-order-info.vue

<template>
   <el-dialog
      :title="
        !dataForm.orderNumber
          ? this.$i18n.t('crud.addTitle')
          : this.$i18n.t('order.orderDetail')
      "
      :close-on-click-modal="false"
      :visible.sync="visible"
      :append-to-body="true"
      width="80%"
      @close="closeDialog"
      v-if="visible"
      top="1vh"
   >
    <div class="new-page-title">
      <div class="line" />
      <div class="text">
        {{
          !dataForm.orderNumber
          ? this.$i18n.t('crud.addTitle')
          : this.$i18n.t('order.orderDetail')
        }}
      </div>
    </div>
      <el-form
        :model="dataForm"
        ref="dataForm"
        @keyup.enter.native="dataFormSubmit()"
        label-width="auto"
      >
        <div class="mod-order-orderInfo">
          <div class="content">
            <div class="order-number">
              <div class="number">
                <span class="text">{{ $t("order.number") }}:</span>
                {{ dataForm.orderNumber }}
              </div>
              <div class="time">
                <span class="text">{{ $t("order.createTime") }}:</span>
                {{ dataForm.createTime }}
              </div>
            </div>
            <div :class="['order-info',$t('language') === 'English'?'flex-wrap':'']">
              <div :class="['info-item',$t('language') === 'English'?'small-width':'']" v-if="dataForm.userAddrOrder && dataForm.userAddrOrder !== null">
                <div class="item-tit">
                  {{ $t("order.recipientInformation") }}
                </div>
                <div class="item">
                  <div class="text">
                    {{
                      dataForm.dvyType === 2
                        ? $t("order.deliveryPerson")
                        : $t("publics.addressee")
                    }}：
                  </div>
                  <div class="res">{{ dataForm.userAddrOrder.receiver }}</div>
                </div>
                <div class="item">
                  <div class="text">{{ $t("shop.contactTel") }}：</div>
                  <div class="res">{{ dataForm.userAddrOrder.mobile }}</div>
                </div>
                <div class="item" v-if="dataForm.dvyType !== 2">
                  <div class="text">{{ $t("publics.deliveryAddr") }}：</div>
                  <div class="res">
                    {{ dataForm.userAddrOrder.province
                    }}{{ dataForm.userAddrOrder.city
                    }}{{ dataForm.userAddrOrder.area
                    }}{{ dataForm.userAddrOrder.street
                    }}{{ dataForm.userAddrOrder.addr }}
                  </div>
                </div>
              </div>
            </div>
            <div class="goods-list">
              <el-table
                :data="prodList"
                :default-expand-all="true"
                header-cell-class-name="table-header"
                row-class-name="table-row">
                <el-table-column type="expand">
                  <template slot-scope="scope">
                    <OrderCardItem :orderItem="scope.row" :showFlagBtn="false"/>
                  </template>
                </el-table-column>
                <el-table-column prop="" :label="this.$i18n.t('home.product')">
                  <template slot-scope="scope">
                    <!-- 商品信息 -->
                    <div class="df">
                      <prod-pic
                        width="60"
                        :pic="scope.row.pic"
                        class="prod-pic"
                      ></prod-pic>
                      <div class="name">
                        <div>
                          <span v-if="scope.row.giveawayOrderItemId" class="gift-icon">{{ $t("order.giveawayPord") }}</span>
                          <span>{{ scope.row.prodName }}</span>
                        </div>
                        <div
                          class="order-status"
                          v-if="
                            scope.row.returnMoneySts &&
                            scope.row.returnMoneySts < 5 &&
                            scope.row.returnMoneySts > 0
                          "
                        >
                          {{
                              $t("order.refunding")
                          }}
                        </div>
                        <div
                          class="order-status"
                          v-if="
                            scope.row.returnMoneySts &&
                            scope.row.returnMoneySts === 5
                          "
                        >
                          {{
                              $t("order.refundsuccessfully")
                          }}
                        </div>
                      </div>
                    </div>
                    <!-- / 商品信息 -->
                  </template>
                </el-table-column>
                <el-table-column
                  prop="count"
                  :label="this.$i18n.t('order.quantity')"
                  width="180"
                  align="center"
                >
                  <template slot-scope="scope">
                    <span>{{ scope.row.prodCount }}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="count"
                  label=""
                  width="180"
                  align="center"
                >
                </el-table-column>
                <el-table-column
                  prop="totalPrice"
                  label=""
                  width="180"
                  align="center"
                >
                </el-table-column>
              </el-table>
              <!--<div class="goods-total">
                <div class="text-box">
                  <div class="item">
                    <div class="text">{{ $t("order.prodTotalPrice") }}:</div>
                    <div class="number">￥{{ dataForm.total }}</div>
                  </div>
                  <div class="item" v-if="dataForm.reduceAmount">
                    <div class="text">{{ $t("marketing.discountedPrice") }}:</div>
                    <div class="number">￥{{ dataForm.reduceAmount }}</div>
                  </div>
                  <div class="item" v-if="dataForm.freightAmount">
                    <div class="text">{{ $t("order.shippingFees") }}:</div>
                    <div class="number">￥{{ dataForm.freightAmount }}</div>
                  </div>
                  <div class="item act-price">
                    <div class="text">{{ $t("order.actualAmount") }}:</div>
                    <div class="number">￥{{ dataForm.actualTotal }}{{ dataForm.score?" + "+ dataForm.score +$t("order.integral"):''}}</div>
                  </div>
                </div>
              </div>-->
            </div>
          </div>
        </div>
      </el-form>
   </el-dialog>
</template>

<script>
import OrderAddrUpdate from '@/components/order-addr-update'
import OrderRemarkUpdate from '@/components/order-remark-update'
import ProdPic from '@/components/prod-pic'
import OrderCardItem from '@/components/order-card-item'
import OrderPrintCreate from '@/components/order-print-create'
import OrderPdfGenerate from '@/components/order-pdf-generate'
export default {
  name: 'order-info',
  data () {
    return {
      visible: false,
      dataForm: {
        orderId: 0,
        virtualRemark: '',
        orderNumber: '',
        remarks: '',
        shopRemarks: '',
        total: 0,
        deliveryExpresses: [],
        actualTotal: 0,
        dvyType: '',
        status: 1,
        addrOrderId: 0,
        nickName: '',
        orderItems: [],
        orderTime: '',
        updateTime: '',
        payTime: '',
        dvyTime: '',
        finallyTime: '',
        cancelTime: '',
        orderType: '',
        userAddrOrder: {},
        shopId:null,
        auditStatus: 0
      },
      resourcesUrl: process.env.VUE_APP_RESOURCES_URL,
      // 商品列表
      prodList: [],
    }
  },
  components: {
    OrderAddrUpdate,
    ProdPic,
    OrderCardItem,

  },
  watch: {

  },
  created () {
  },
  methods: {
    closeDialog(){
      this.visible = false;
      this.$emit('printOrderClose');
    },
    init (params) {
      this.dataForm.orderNumber = params.orderNumber || 0
      this.dataForm.shopId = params.shopId || null
      this.orderStatus = params.status || null

      this.visible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].resetFields()
      })
      if (this.dataForm.orderNumber) {
        // 修改
        this.$http({
          url: this.$http.adornUrl(`/printOrder/printOrder/findPrintOrderInfo`),
          method: 'GET',
          params: this.$http.adornParams({orderNumber: this.dataForm.orderNumber})
        }).then(({ data }) => {
          this.dataForm = data
          // 处理商品列表
          this.prodList = data.orderItemList
          if (data.orderItemList.length === 1 &&
              data.orderItemList[0].giveawayList &&
              data.orderItemList[0].giveawayList.length) {
            // 单个商品且有赠品时，将主商品和赠品放在同一级列表中展示
            this.prodList = [...data.orderItemList, ...data.orderItemList[0].giveawayList]
          }
        })
      }
    },
  }
}
</script>


<style>
.detail-dialog .el-dialog {
  min-width: 950px;
  margin-top: 10vh !important;
}

.detail-dialog .goods-list .has-gutter th.is-leaf {
  background: #f7f8fa;
  color: #333;
  border-bottom: 1px solid #ebeef5;
  font-weight: 400;
  border-right: 0;
}

.detail-dialog .goods-list .el-table td {
  border-right: 0;
}
.left-line {
  /* padding-left: 30px;
  padding-bottom: 10px;
  padding-top: 15px;
  margin-left: -30px;
  margin-top: -10px !important;
  background-color: #fff; */
  border-left: 1px solid #fff !important;
}
</style>

<style lang="scss" scoped>
.mod-order-orderInfo {
  height: 100%;
  width: 100%;
  font: 14px Arial, "PingFang SC", "Hiragino Sans GB", STHeiti,
    "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
  color: #333;

  .order-number {
    display: flex;
    align-items: center;
    font-size: 14px;
    margin-left: 20px;
  }

  .order-number .text {
    color: #999;
  }

  .order-number .number,
  .order-number .time {
    display: flex;
    align-items: center;
  }

  .order-number .time {
    margin: 0 15px;
  }

  .order-state {
    position: relative;
    margin-top: 15px;
    border: 1px solid #eee;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .order-state .state-box {
    padding: 20px 15px;
    width: 40%;
    border-right: 1px solid #eee;
  }

  .order-state .state-box .state {
    font-size: 20px;
    font-weight: 700;
    line-height: 28px;
  }

  .order-state .state-box .state-des {
    margin-top: 10px;
    color: #999;
  }

  .order-state .state-box .actions {
    margin-top: 15px;
  }

  .order-state .state-box .actions .item {
    display: flex;
    align-items: center;
  }

  .order-state .state-box .actions .item .el-button--text {
    cursor: pointer;
  }

  .order-state .state-box .actions .item .item-btn {
    padding: 3px 10px;
    border: 1px solid #eee;
    border-radius: 2px;
  }

  .order-state .state-steps {
    flex: 1;
    // margin-left: -80px;
    padding-bottom: 10px;
  }

  .order-state .state-steps .el-form-item {
    margin-bottom: 0;
  }

  .packages {
    margin-top: 15px;
  }

  .packages .p-tab {
    display: flex;
    align-items: center;
    width: 100%;
    background: #F7F8FA;
    border: 1px solid #E8E9EC;
    border-bottom: none;
    height: 44px;
  }

  .packages .p-tab .item {
    background: #F7F8FA;
    // border: 1px solid #EAEAEA;
    margin-right: -1px;
    margin-bottom: -1px;
    position: relative;
    text-align: center;
    line-height: 44px;
    width: 90px;
    cursor: pointer;
    font-size: 12px;
    font-weight: bold;
    height: 44px;
    // border-right: 1px solid #EAEAEA;
  }

  .packages .p-tab .item:first-child {
    // border-radius: 3px 0 0 0;
    border-left: none;
  }

  .packages .p-tab .item:last-child {
    // border-radius: 0 3px 0 0;
    border-left: none;
  }

  .packages .p-tab .item.active {
    background: #fff;
    // border: 1px solid #E8E9EC;
  }

  .packages .p-con {
    border: 1px solid #eee;
    padding: 20px;
    display: flex;
  }

  .packages .p-con .deliver-msg {
    width: 40%;
    min-width: 430px;
  }

  .packages .p-con .deliver-msg .d-item {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
  }

  .packages .p-con .deliver-msg .d-item .text {
    width: 80px;
  }

  .packages .p-con .deliver-msg .d-goods {
    position: relative;
    width: 340px;
    margin: 30px 0 0;
  }

  .packages .p-con .deliver-msg .d-goods.over {
    margin: 30px 32px 0;
  }

  .packages .p-con .deliver-msg .d-goods .arrow {
    position: absolute;
    top: 28px;
    width: 22px;
    height: 22px;
    background: #eee;
    border-radius: 50%;
    cursor: pointer;
    display: none;
  }

  .packages .p-con .deliver-msg .d-goods .arrow.disable {
    opacity: 0.5;
    cursor: not-allowed;
  }

  .packages .p-con .deliver-msg .d-goods.over .arrow {
    display: block;
  }

  .packages .p-con .deliver-msg .d-goods .arrow.prev {
    left: -32px;
  }

  .packages .p-con .deliver-msg .d-goods .arrow.next {
    right: -32px;
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    transform: rotate(180deg);
  }

  .packages .p-con .deliver-msg .d-goods .arrow::before {
    position: absolute;
    left: 9px;
    top: 8px;
    display: block;
    width: 5px;
    height: 5px;
    content: " ";
    font-size: 0;
    border: 1px solid #666;
    border-width: 1px 1px 0 0;
    -webkit-transform: rotate(225deg);
    -moz-transform: rotate(225deg);
    transform: rotate(225deg);
  }

  .packages .p-con .deliver-msg .d-goods .item-goods {
    position: relative;
    width: 340px;
    height: 80px;
    overflow: hidden;
  }

  .packages .p-con .deliver-msg .d-goods .goods-box {
    position: absolute;
    left: 0;
    display: flex;
    margin-top: 0;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
  }

  .packages .p-con .deliver-msg .d-goods .goods-box .item {
    margin-right: 10px;
    font-size: 12px;
    cursor: pointer;
  }

  .packages .p-con .deliver-msg .d-goods .goods-box .item:last-child {
    margin: 0;
  }

  .packages .p-con .deliver-msg .d-goods .goods-box .item .img {
    width: 60px;
    height: 60px;
    font-size: 0;
    margin-bottom: 4px;
    position: relative;
  }

  .packages .p-con .deliver-msg .d-goods .goods-box .item .img img {
    width: 100%;
    height: 100%;
  }

  .packages .p-con .deliver-msg .d-goods .goods-box .item .img .number {
    position: absolute;
    bottom: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.3);
    color: #fff;
    border-radius: 6px 0 6px 0;
    font-size: 12px;
    height: 16px;
    line-height: 16px;
    padding: 0 5px;
  }

  .packages .p-con .deliver-msg .d-goods .goods-box .item .name {
    width: 60px;
    height: 16px;
    line-height: 16px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #999;
  }

  .packages .p-con .logistics {
    flex: 1;
  }

  .packages .p-con .logistics .l-tit {
    display: flex;
  }

  .packages .p-con .logistics .l-tit .l-state {
    color: #155BD4;
  }

  .packages .p-con .logistics .logistics-box {
    height: 175px;
    overflow-y: scroll;
    position: relative;
    margin-top: 15px;
  }

  .packages .p-con .logistics .logistics-box::before {
    position: absolute;
    left: 0;
    top: 0;
    display: block;
    width: 10px;
    height: 10px;
    content: " ";
    font-size: 0;
    background: #fff;
    z-index: 1;
  }

  .packages .p-con .logistics .logistics-box::after {
    position: absolute;
    left: 6px;
    top: 0;
    display: block;
    // width: 1px;
    height: 100%;
    content: " ";
    font-size: 0;
    background: #eee;
    z-index: 0;
  }

  .packages .p-con .logistics .logistics-box .item {
    padding: 0px 0 40px 25px;
    position: relative;
    margin-left: 6px;
    border-left: 1px solid #eee;
  }

  .packages .p-con .logistics .logistics-box .item::before {
    position: absolute;
    left: -10px;
    top: 0px;
    display: block;
    width: 19px;
    height: 19px;
    border-radius: 50%;
    content: " ";
    font-size: 0;
    background: #ccc;
    border: 5px solid #fff;
    z-index: 2;
  }

  .packages .p-con .logistics .logistics-box .item:first-child:before {
    background: #c00;
  }

  .packages .p-con .logistics .logistics-box .item .time {
    color: #999;
  }

  .packages .p-con .logistics .logistics-box .item .text {
    margin-top: 5px;
    width: 400px;
  }

  .order-info {
    background: #f7f8fa;
    margin-top: 15px;
    display: flex;
    padding: 20px;
  }

  .order-info .info-item {
    width: 25%;
    padding-right: 30px;
  }

  .order-info .info-item .item-tit {
    font-weight: 600;
  }

  .order-info .info-item .item {
    margin-top: 10px;
    display: flex;
    line-height: 20px;
  }
  .order-info .info-item .item .res{
    word-break: break-word;
  }

  .order-info .info-item .item .text {
    // width: 75px;
    white-space: nowrap;
  }

  .goods-list {
    margin-top: 15px;
  }

  .goods-list .df {
    display: flex;
    align-items: center;
  }

  .goods-list .df .prod-img {
    display: block;
    width: 60px !important;
    height: 60px !important;
    margin-right: 5px;
  }

  .goods-list .df .prod-pic {
    max-width: 60px;
    margin-right: 6px;
    flex: 1;
  }

  .goods-list .df .name {
    line-height: 20px;
    flex: 1;
  }

  .goods-list .df .gift-icon {
    display: inline-block;
    min-width: 34px;
    max-height: 21px;
    text-align: center;
    padding: 4px;
    border-radius: 4px;
    background: #e43130;
    color: #fff;
    font-size: 13px;
    line-height: 1em;
    margin-right: 5px;
  }

  .goods-list .goods-total {
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
  }

  .goods-list .goods-total .item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #999;
    margin-top: 5px;
  }

  .goods-list .goods-total .item .text {
    max-width: 220px;
    text-align: right;
  }

  .goods-list .goods-total .item .number {
    width: 150px;
    text-align: center;
  }

  .goods-list .goods-total .item.act-price {
    margin-top: 20px;
    color: #333;
    font-weight: 600;
  }

  .goods-list .goods-total .item.act-price .number {
    color: #c00;
  }

  .order-log {
    margin-top: 20px;
    border-top: 1px dashed #e9eaec;
    padding: 20px 10px;
  }

  .order-log .log-title {
    height: 30px;
    width: 100%;
    line-height: 30px;
    font-weight: bold;
  }

  .order-log .log-cont {
    color: #666666;
    margin-top: 10px;
  }
  .order-status {
    display: inline-block;
    width: auto;
    text-align: center;
    margin-top: 5px;
    padding: 0px 4px;
    border: 1px solid #e43130;
    border-radius: 2px;
    color: #e43130;
    font-size: 12px;
  }
}
// .el-step.is-horizontal .el-step__line {
//   top: 19px !important;
// }
div ::v-deep .el-step.is-center .el-step__head {
  display: flex;
  justify-content: center;
  align-items: center;
}

// 赠品
.gift-prod .item {
  margin-top: 5px;
  line-height: 1em;
  .name {
    display: inline-block;
    margin-right: 15px;
    line-height: 20px;
    // max-width: 400px;
    // overflow: hidden;
    // text-overflow: ellipsis;
    // white-space: nowrap;
  }
}

// 小屏样式适配
.flex-wrap {
  flex-wrap: wrap;
}
.small-width {
  width: 50% !important;
  margin-bottom: 10px;
}
.remarkSpan{
  display: inline-block;
  line-height: 24px;
  padding: 5px 0;
  margin-right: 10px;
  word-wrap: break-word;
  word-break: break-all;
  overflow: hidden;
}
</style>