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

<template>
  <el-dialog
    :title="$t('ding-dan-xiang-qing')"
    :visible.sync="showDialog"
    class="common-dialog"
    width="80%"
    @close="cancel"
    destroy-on-close
    append-to-body
  >
    <div class="main-panel" v-if="orderInfo.id">
      <div class="panel">
        <div class="title">{{ $t('ji-chu-xin-xi') }}</div>
        <div class="content">
          <el-row class="row">
            <el-col :span="8">
              <span class="head">{{ $t('ding-dan-hao') }}：</span>
              <span class="control-label">{{ orderInfo.orderSn }}</span>
            </el-col>
            <el-col :span="8">
              <span class="head">{{ $t('zong-jin-e') }}：</span>
              <span class="control-label">
                {{ $pinia._s.get('user').getSymbol }}{{ orderInfo.amount }}
              </span>
            </el-col>
            <el-col :span="8">
              <span class="head">{{ $t('ding-dan-zhuang-tai') }}：</span>
              <!-- <span :class="`control-label ${changeClassName(orderInfo.statusText)}`">
                {{ orderInfo.statusText }}
              </span> -->
              <span class="control-label normal-status">{{ orderInfo.statusText }}</span>
            </el-col>
          </el-row>
          <el-row class="row">
            <el-col :span="8">
              <span class="head">{{ $t('serviceFee') }}：</span>
              <span class="control-label">{{ orderInfo.serviceFee.toFixed(2) }}</span>
            </el-col>
            <el-col :span="8">
              <span class="head">{{ $t('ding-dan-shi-jian') }}：</span>
              <span class="control-label">{{ orderInfo.createTime }}</span>
            </el-col>
            <el-col :span="8">
              <span class="head">{{ $t('xia-dan-zhuo-ma') }}：</span>
              <span class="control-label">
                {{ orderInfo.newTableInfo ? orderInfo.newTableInfo.tableNumber : '-' }}
              </span>
            </el-col>
          </el-row>
          <el-row class="row">
            <el-col :span="24">
              <span class="head">{{ $t('bei-zhu-xin-xi') }}：</span>
              <span class="control-label">{{ orderInfo.remark ? orderInfo.remark : '-' }}</span>
            </el-col>
          </el-row>
        </div>
      </div>
      <div class="panel">
        <div class="title">{{ $t('zhi-fu-xin-xi') }}</div>
        <div class="content">
          <el-row class="row">
            <el-col :span="8">
              <span class="head">{{ $t('zhi-fu-jin-e') }}：</span>
              <span class="control-label">
                {{ $pinia._s.get('user').getSymbol }}{{ orderInfo.payAmount.toFixed(2) }}
              </span>
            </el-col>
            <el-col :span="8">
              <span class="head">{{ $t('zhi-fu-zhuang-tai') }}：</span>
              <!-- <span class="control-label payed-status" v-if="orderInfo.payStatus == 'B'">
                {{ getName(payStatusList, orderInfo.payStatus) }}
              </span>
              <span class="control-label normal-status" v-else>
                {{ getName(payStatusList, orderInfo.payStatus) }}
              </span> -->

              <span :class="`control-label ${changeClassName(orderInfo.payStatus)}`">
                {{ getName(payStatusList, orderInfo.payStatus) }}
              </span>
            </el-col>
            <el-col :span="8">
              <span class="head">{{ $t('jian-mian-jin-e') }}：</span>
              <span class="control-label">
                {{ $pinia._s.get('user').getSymbol }}{{ orderInfo.discount.toFixed(2) }}
              </span>
            </el-col>
          </el-row>
          <el-row class="row">
            <el-col :span="8">
              <span class="head">{{ $t('zhi-fu-fang-shi') }}：</span>
              <span class="control-label">{{ getName(payTypeList, orderInfo.payType) }}</span>
            </el-col>
            <el-col :span="8">
              <span class="head">{{ $t('zhi-fu-shi-jian') }}：</span>
              <span class="control-label">{{ orderInfo.payTime ? orderInfo.payTime : '-' }}</span>
            </el-col>
            <el-col :span="8">
              <span class="head">{{ $t('shi-yong-qia-quan') }}：</span>
              <span class="control-label">
                {{
                  orderInfo.couponInfo
                    ? $pinia._s.get('user').getSymbol +
                      orderInfo.couponInfo.amount +
                      '（' +
                      orderInfo.couponInfo.name +
                      '）'
                    : '-'
                }}
              </span>
            </el-col>
          </el-row>
          <el-row class="row">
            <el-col :span="8">
              <span class="head">{{ $t('shi-yong-ji-fen') }}：</span>
              <span class="control-label">{{ orderInfo.usePoint ? orderInfo.usePoint : 0 }}</span>
            </el-col>
            <el-col :span="8">
              <span class="head">{{ $t('ji-fen-jin-e') }}：</span>
              <span class="control-label">
                {{ $pinia._s.get('user').getSymbol }}{{ orderInfo.pointAmount.toFixed(2) }}
              </span>
            </el-col>
            <el-col :span="8">
              <span class="head">{{ $t('pei-song-fei-yong') }}：</span>
              <span class="control-label">
                {{ $pinia._s.get('user').getSymbol }}{{ orderInfo.deliveryFee.toFixed(2) }}
              </span>
            </el-col>
          </el-row>
        </div>
      </div>

      <!-- <div class="panel">
          <div class="title">{{ $t('hui-yuan-xin-xi') }}</div>
          <div class="content">
            <el-row class="row">
              <el-col :span="6">
                <span class="head">{{ $t('hui-yuan-ID') }}：</span>
                <span class="control-label" v-if="orderInfo.userInfo && orderInfo.isVisitor == 'N'">{{ orderInfo.userInfo.id }}</span>
                <span class="control-label" v-else>{{ $t('you-ke') }}</span>
              </el-col>
              <el-col :span="6">
                <span class="head">{{ $t('hui-yuan-hao') }}：</span>
                <span class="control-label" v-if="orderInfo.userInfo && orderInfo.isVisitor == 'N'">{{ orderInfo.userInfo.no }}</span>
                <span class="control-label" v-else>{{ $t('you-ke') }}</span>
              </el-col>
              <el-col :span="6">
                <span class="head">{{ $t('hui-yuan-ming-cheng') }}：</span>
                <span class="control-label" v-if="orderInfo.userInfo && orderInfo.isVisitor == 'N'">{{ orderInfo.userInfo.name }}</span>
                <span class="control-label" v-else>{{ $t('you-ke') }}<span v-if="orderInfo.userInfo">{{ $t('guan-li-yuan') }}{{ orderInfo.userInfo.name }}{{ $t('dai-xia-dan') }}</span></span>
              </el-col>
              <el-col :span="6">
                <span class="head">{{ $t('shou-ji-hao') }}：</span>
                <span class="control-label">{{ orderInfo.userInfo.mobile ? orderInfo.userInfo.mobile : '-' }}</span>
              </el-col>
            </el-row>
          </div>
        </div> -->

      <div class="panel">
        <div class="title">{{ $t('shang-pin-xin-xi') }}</div>
        <div class="content">
          <el-table ref="tables" v-loading="loading" :data="orderInfo.goods">
            <el-table-column :label="$t('shang-pin-ID')" width="66">
              <template slot-scope="scope">
                {{ scope.row.id.slice(-4) }}
              </template>
            </el-table-column>
            <el-table-column :label="$t('tu-pian')" align="center" prop="name">
              <template slot-scope="scope">
                <img class="goods-logo" style="margin: 0 auto" :src="scope.row.image" />
              </template>
            </el-table-column>
            <el-table-column :label="$t('ming-cheng')" align="left" prop="name">
              <template slot-scope="scope">
                <span class="goods-name">{{ scope.row.name }}</span>
              </template>
            </el-table-column>
            <el-table-column :label="$t('gui-ge')" align="center">
              <template slot-scope="scope">
                <span v-if="scope.row.specList">
                  <span class="spec-item" v-for="spec in scope.row.specList">
                    {{ spec.specValue }}
                  </span>
                </span>
                <span v-else>--</span>
              </template>
            </el-table-column>
            <el-table-column :label="$t('jia-ge')" align="center" prop="price" />
            <el-table-column :label="$t('you-hui-jin-e')" align="center" prop="discount" />
            <el-table-column :label="$t('shu-liang')" align="center" prop="num" />
          </el-table>
        </div>
      </div>

      <!-- <div class="panel" v-if="orderInfo.type == 'goods'">
        <div class="title">{{ $t('pei-song-xin-xi') }}</div>
        <div class="content">
          <el-row class="row">
            <el-col :span="8">
              <span class="head">{{ $t('pei-song-fang-shi') }}：</span>
              <span class="control-label" v-if="orderInfo.orderMode == 'oneself'">
                {{ $t('men-dian-zi-ti') }}
              </span>
              <span class="control-label" v-else>{{ $t('wu-liu-pei-song') }}</span>
            </el-col>
            <el-col :span="16" v-if="orderInfo.orderMode == 'oneself'">
              <span class="head">{{ $t('zi-ti-di-zhi') }}：</span>
              <span class="control-label">
                {{ orderInfo.storeInfo.name }} {{ orderInfo.storeInfo.phone }}
                {{ orderInfo.storeInfo.address }}
              </span>
            </el-col>
            <el-col :span="8" v-if="orderInfo.orderMode == 'express' && orderInfo.address">
              <span class="head">{{ $t('shou-huo-ren') }}：</span>
              <span class="control-label">
                {{ orderInfo.address.name ? orderInfo.address.name : '--' }}
              </span>
            </el-col>
            <el-col :span="8" v-if="orderInfo.orderMode == 'express' && orderInfo.address">
              <span class="head">{{ $t('lian-xi-dian-hua') }}：</span>
              <span class="control-label">
                {{ orderInfo.address.mobile ? orderInfo.address.mobile : '-' }}
              </span>
            </el-col>
          </el-row>
          <el-row class="row">
            <el-col :span="24" v-if="orderInfo.orderMode == 'express' && orderInfo.address">
              <span class="head">{{ $t('xiang-xi-di-zhi') }}：</span>
              <span class="control-label">
                {{ orderInfo.address.provinceName }}{{ orderInfo.address.cityName
                }}{{ orderInfo.address.regionName }}{{ orderInfo.address.detail }}
              </span>
            </el-col>
          </el-row>
        </div>
      </div> -->

      <div class="panel" v-if="orderInfo.expressInfo">
        <div class="title">{{ $t('wu-liu-xin-xi') }}</div>
        <div class="content">
          <el-row class="row">
            <el-col :span="8">
              <span class="head">{{ $t('wu-liu-gong-si') }}：</span>
              <span class="control-label" v-if="orderInfo.expressInfo.expressCompany">
                {{ orderInfo.expressInfo.expressCompany }}
              </span>
              <span class="control-label" v-else>--</span>
            </el-col>
            <el-col :span="8">
              <span class="head">{{ $t('wu-liu-dan-hao') }}：</span>
              <span class="control-label" v-if="orderInfo.expressInfo.expressNo">
                {{ orderInfo.expressInfo.expressNo }}
              </span>
              <span class="control-label" v-else>--</span>
            </el-col>
            <el-col :span="8">
              <span class="head">{{ $t('fa-huo-shi-jian') }}：</span>
              <span class="control-label">{{ orderInfo.expressInfo.expressTime }}</span>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import { getOrderInfo } from '@/api/order'
export default {
  name: 'orderDetail',
  props: {
    showDialog: {
      type: [Boolean],
      default: () => false,
    },
    orderId: {
      type: [String],
      default: () => '',
    },
  },
  data() {
    return {
      // 遮罩层
      loading: false,
      payTypeList: [],
      payStatusList: [],
      orderInfo: { payAmount: 0, discount: 0, pointAmount: 0, userInfo: {} },
    }
  },
  watch: {
    showDialog(value) {
      if (value) {
        this.getOrderInfo(this.orderId)
      }
    },
  },
  methods: {
    // 查询配置
    getOrderInfo(orderId) {
      this.loading = true
      getOrderInfo(orderId)
        .then((response) => {
          this.loading = false
          this.orderInfo = response.data.orderInfo
          this.payTypeList = response.data.payTypeList
          this.payStatusList = response.data.payStatusList
        })
        .catch(() => {
          // empty
        })
    },
    // 取消按钮
    cancel() {
      this.$emit('closeDialog')
    },
    // 支付状态得class
    changeClassName(status) {
      if (status == 'B' || status == '已支付') {
        return 'payed-status'
      } else if (status == 'A' || status == '待支付') {
        return ' unpaid'
      } else {
        return 'normal-status'
      }
    },
  },
}
</script>
<style rel="stylesheet/scss" lang="scss">
.main-panel {
  margin: 0px;
  padding: 5px;
  max-height: 65vh;
  overflow-y: auto;
  .panel {
    border: solid 1px #cccccc;
    min-height: 100px;
    border-radius: 2px;
    margin-top: 10px;
    .title {
      font-weight: bold;
      margin-top: 10px;
      margin-left: 5px;
      padding-left: 5px;
      color: #333333;
      border-left: 5px solid rgb(254, 106, 0);
    }
    .content {
      padding: 20px;
      .goods-logo {
        width: 45px;
        height: 45px;
        border: solid 1px #cccccc;
      }
      .spec-item {
        color: #666666;
        background: #ffffff;
        border: #666666 solid 1px;
        border-radius: 20px;
        padding: 2px 8px 2px 8px;
        margin-right: 5px;
      }
      .row {
        min-height: 40px;
        verticle-align: middle;
        display: flex;
        line-height: 40px;
        .payed-status {
          color: #52c41a;
          background: #f6ffed;
          border: #b7eb8f solid 1px;
          border-radius: 20px;
          padding: 2px 8px;
          font-size: 90%;
        }
        .normal-status {
          color: #666;
          background: white;
          border: #999 solid 1px;
          border-radius: 20px;
          padding: 2px 8px;
          font-size: 90%;
        }
        .unpaid {
          color: #f67f20;
          background: rgba(#f67f20, 0.2);
          border: #f67f20 solid 1px;
          border-radius: 20px;
          padding: 2px 8px;
          font-size: 90%;
        }
      }
      .head {
        color: rgb(164, 164, 164);
        min-width: 120px;
        text-align: right;
        display: block;
        float: left;
      }
      .control-text {
        display: block;
        background: #f5f5f5;
        border-radius: 10px;
        margin-left: 120px;
        margin-top: 5px;
        line-height: 22px;
        padding: 5px 10px 5px 10px;
      }
    }
  }
}
</style>