dispacth_zhongpin/src/views/finance/order/OrderInfoInfo.vue

<template>
  <div>
    <div class="header-container">
      <div class="header-title">
        <svg-icon icon-class="icondingdan" />
        <span>订单详情：{{ orderInfo.orderSerialNumber }}</span>
        <el-button type="text" icon="el-icon-document-copy" size="mini" @click="copyOrderId(orderInfo.orderSerialNumber,$event)" />
      </div>
      <div class="header-content">
        <el-row :gutter="20">
          <el-col :span="10">
            <div class="header-item">
              <div class="item-img">
                <svg-icon style="color: #8cb4fd" icon-class="icongongsi-" />
              </div>
              <div class="item-text" style="display: flex; align-items: center">
                <span>{{ orderInfo.createName }} - {{ orderInfo.phone }} </span>
                <span v-if="!dataEditor">{{ orderInfo.plateNumber }}</span>
                <svg-icon v-if="!dataEditor" style="width: 20px;height:20px;cursor:pointer" icon-class="iconxiugai" @click="changeEditor" />
                <el-input v-else ref="inputVal" v-model="orderInfo.plateNumber" style="width: 140px; margin-left: 10px" size="mini" clearable @blur="updateData" />
              </div>
            </div>
          </el-col>
          <el-col :span="14">
            <div class="header-item">
              <div class="item-img">
                <svg-icon style="color: #80de80" icon-class="iconweixinxiaochengxu1" />
              </div>
              <div class="item-text">
                <span> {{markData.ORDER_SOURCE[orderInfo.orderSource]}} 创建时间：{{ orderInfo.createTime }}</span>
              </div>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="10">
            <div class="header-item">
              <div class="item-img">
                <img src="https://publicxingyou.oss-cn-hangzhou.aliyuncs.com/mp-oil/site-XOIL.png">
              </div>
              <div class="item-text">
                <span>{{ orderInfo.siteName }}({{ orderInfo.id }}) </span>
              </div>
            </div>
          </el-col>
          <el-col style="display:flex;justify-content: space-between;" :span="14">
            <div class="header-item">
              <div class="item-img">
                <svg-icon style="color: #219cdd" icon-class="iconyouka" />
              </div>
              <div class="item-text">
                <span>{{ orderInfo.name?orderInfo.name:'个人油卡' }}</span>
              </div>
            </div>
            <!-- <el-button @click="qrcodefn">{{ orderInfo.orderWfStatus===0?'未核销':'已核销' }}</el-button> -->
            <!-- <div ref="qrCodeUrl" class="qrcode" /> -->
          </el-col>
        </el-row>

      </div>
    </div>
    <section style="padding:20px;">
      <el-card shadow="never" class="box-card no-wrap">
        <div slot="header">
          <span class="card-header-icon"><svg-icon style="color: #118dde" icon-class="iconjichuziliao" /></span>
          <span class="card-header-text">订单基础信息</span>
        </div>
        <div class="card-content">
          <el-row :gutter="20">
            <el-col :span="5">
              <div class="cell-item">
                <span class="color-999 test-tst">订单编号</span>
                <br>
                <span class="inner-data">{{ orderInfo.id }}</span>
              </div>
            </el-col>
            <el-col :span="5">
              <div class="cell-item">
                <span class="color-999 test-tst">三方渠道订单编号</span>
                <br>
                <span class="inner-data">{{ orderInfo.otherOrderId }}</span>
              </div>
            </el-col>
            <el-col :span="5">
              <div class="cell-item">
                <span class="color-999 test-tst">订单支付方式</span>
                <br>
                <span class="inner-data">{{ markData.ORDER_METHOD[orderInfo.orderMethod] }}</span>
              </div>
            </el-col>
            <el-col :span="5">
              <div class="cell-item">
                <span class="color-999 test-tst">订单类型</span>
                <br>
                <span class="inner-data">{{ markData.ORDER_TYPE[orderInfo.orderType] }}</span>
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="5">
              <div class="cell-item">
                <span class="color-999 test-tst">退款时间</span>
                <br>
                <span class="inner-data">{{ orderInfo.refundTime }}</span>
              </div>
            </el-col>
            <el-col :span="5">
              <div class="cell-item">
                <span class="color-999 test-tst">退款原因</span>
                <br>
                <span class="inner-data">{{ orderInfo.refundRemark }}</span>
              </div>
            </el-col>
            <el-col :span="5">
              <div class="cell-item">
                <span class="color-999 test-tst">订单取消说明</span>
                <br>
                <span class="inner-data">{{ orderInfo.cancelRemak }}</span>
              </div>
            </el-col>
            <el-col :span="5">
              <div class="cell-item">
                <span class="color-999 test-tst">订单失败原因</span>
                <br>
                <span class="inner-data">{{ orderInfo.failRemak }}</span>
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="5">
              <div class="cell-item">
                <span class="color-999 test-tst">创建人</span>
                <br>
                <span class="inner-data">{{ orderInfo.createName + " - "}}{{ orderInfo.createUser }}</span>
              </div>
            </el-col>
            <el-col :span="5">
              <div class="cell-item">
                <span class="color-999 test-tst">创建时间</span>
                <br>
                <span class="inner-data">{{ orderInfo.createTime }}</span>
              </div>
            </el-col>
            <el-col :span="5">
              <div class="cell-item">
                <span class="color-999 test-tst">修改人</span>
                <br>
                <span class="inner-data">{{ orderInfo.updateName + " - "}}{{ orderInfo.updateUser }}</span>
              </div>
            </el-col>
            <el-col :span="5">
              <div class="cell-item">
                <span class="color-999 test-tst">修改时间</span>
                <br>
                <span class="inner-data">{{ orderInfo.updateTime }}</span>
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="5">
              <div class="cell-item">
                <span class="color-999 test-tst">支付位置</span>
                <br>
                <span class="inner-data">{{ orderInfo.longitude }} - {{ orderInfo.latitude }}</span>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-card>
      <el-card shadow="never" class="box-card no-wrap">
        <div slot="header">
          <span class="card-header-icon"><svg-icon style="color: #118dde" icon-class="iconjichuziliao" /></span>
          <span class="card-header-text">订单加油信息</span>
        </div>
        <div class="card-content">
          <el-row :gutter="20">
            <el-col :span="5">
              <div class="cell-item">
                <span class="color-999 test-tst">油站</span>
                <br>
                <span class="inner-data">{{ orderInfo.siteName }}({{ orderInfo.id }})</span>
              </div>
            </el-col>
            <el-col :span="5">
              <div class="cell-item">
                <span class="color-999 test-tst">油品名称/类型</span>
                <br>
                <span class="inner-data">{{ orderInfo.oilsCode }}/{{orderInfo.oilProductType === 'GAS' ? '天然气' : orderInfo.oilProductType === 'PETROL' ? '汽油' : '柴油' }}</span>
              </div>
            </el-col>
            <el-col :span="5">
              <div class="cell-item">
                <span class="color-999 test-tst">三方渠道编码</span>
                <br>
                <span class="inner-data">{{ orderInfo.channelCode }}</span>
              </div>
            </el-col>
            <el-col :span="4">
              <div class="cell-item">
                <span class="color-999 test-tst">三方渠道油品编码</span>
                <br>
                <span class="inner-data">{{ orderInfo.otherOilsCode }}</span>
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="5">
              <div class="cell-item">
                <span class="color-999 test-tst">油枪</span>
                <br>
                <span class="inner-data">{{ orderInfo.oilsBar }}号枪</span>
              </div>
            </el-col>
            <el-col :span="5">
              <div class="cell-item">
                <span class="color-999 test-tst">油站所属品牌</span>
                <br>
                <span class="inner-data">{{ orderInfo.siteBrand | formatBrand }}</span>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-card>
      <el-card shadow="never" class="box-card no-wrap">
        <div slot="header">
          <span class="card-header-icon"><svg-icon style="color: #118dde" icon-class="iconjichuziliao" /></span>
          <span class="card-header-text">订单结算信息</span>
        </div>
        <div class="card-content">
          <el-row :gutter="20">
            <el-col :span="5">
              <div class="cell-item">
                <span class="color-999 test-tst">{{orderInfo.oilProductType === 'GAS' ? '加气重量' : '加油升数' }}</span>
                <br>
                <span class="inner-data">{{ orderInfo.volume }}{{orderInfo.oilProductType === 'GAS' ? 'KG' : 'L' }}</span>
              </div>
            </el-col>
            <el-col :span="5">
              <div class="cell-item">
                <span class="color-999 test-tst">实际加油价格</span>
                <br>
                <span class="inner-data">{{ orderInfo.realPrice }}￥/{{orderInfo.oilProductType === 'GAS' ? 'KG' : 'L' }}</span>
              </div>
            </el-col>
            <el-col :span="5">
              <div class="cell-item">
                <span class="color-999 test-tst">实际价格计算金额</span>
                <br>
                <span class="inner-data">{{ orderInfo.realPriceAmount }}￥</span>
              </div>
            </el-col>
            <el-col :span="5">
              <div class="cell-item">
                <span class="color-999 test-tst">实际支付金额</span>
                <br>
                <span class="inner-data">{{ orderInfo.payRealAmount }}￥</span>
              </div>
            </el-col>
            <el-col :span="4">
              <div class="cell-item">
                <span class="color-999 test-tst">国标油品价格</span>
                <br>
                <span class="inner-data">{{ orderInfo.marketPrice }}￥/{{orderInfo.oilProductType === 'GAS' ? 'KG' : 'L' }}</span>
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="5">
              <div class="cell-item">
                <span class="color-999 test-tst">油站价格</span>
                <br>
                <span class="inner-data">{{ orderInfo.sitePrice }}￥/{{orderInfo.oilProductType === 'GAS' ? 'KG' : 'L' }}</span>
              </div>
            </el-col>
            <el-col :span="5">
              <div class="cell-item">
                <span class="color-999 test-tst">三方油站价格</span>
                <br>
                <span class="inner-data">{{ orderInfo.otherPrice }}￥/{{orderInfo.oilProductType === 'GAS' ? 'KG' : 'L' }}</span>
              </div>
            </el-col>
            <el-col :span="5">
              <div class="cell-item">
                <span class="color-999 test-tst">结算价格</span>
                <br>
                <span class="inner-data">{{ orderInfo.settlementPrice }}</span>
              </div>
            </el-col>
            <el-col :span="5">
              <div class="cell-item">
                <span class="color-999 test-tst">结算比例，按照利润百分比</span>
                <br>
                <span class="inner-data">{{ orderInfo.settlementScale }}</span>
              </div>
            </el-col>
            <el-col :span="4">
              <div class="cell-item">
                <span class="color-999 test-tst">三方油站计算金额</span>
                <br>
                <span class="inner-data">{{ orderInfo.otherPriceAmount }}￥</span>
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="5">
              <div class="cell-item">
                <span class="color-999 test-tst">实际价格计算金额</span>
                <br>
                <span class="inner-data">{{ orderInfo.realPriceAmount }}￥</span>
              </div>
            </el-col>
            <el-col :span="5">
              <div class="cell-item">
                <span class="color-999 test-tst">结算价格计算金额</span>
                <br>
                <span class="inner-data">{{ orderInfo.settlementPriceAmount }}￥</span>
              </div>
            </el-col>
            <el-col :span="5">
              <div class="cell-item">
                <span class="color-999 test-tst">结算比例计算金额</span>
                <br>
                <span class="inner-data">{{ orderInfo.settlementScaleAmount }}￥</span>
              </div>
            </el-col>
            <el-col :span="5">
              <div class="cell-item">
                <span class="color-999 test-tst">星油优惠金额</span>
                <br>
                <span class="inner-data">{{ orderInfo.oilDiscountAmount }}￥</span>
              </div>
            </el-col>
            <el-col :span="4">
              <div class="cell-item">
                <span class="color-999 test-tst">三方实际支付金额</span>
                <br>
                <span class="inner-data">{{ orderInfo.otherRealAmount }}￥</span>
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="20">
          <el-col :span="5">
              <div class="cell-item">
                <span class="color-999 test-tst">加价策略</span>
                <br>
                <span class="inner-data">{{ orderInfo.oilsPriceStrategy }}</span>
              </div>
            </el-col>
            <el-col :span="5">
              <div class="cell-item">
                <span class="color-999 test-tst">基础实际加油价格</span>
                <br>
                <span class="inner-data">{{ orderInfo.baseRealPrice }}</span>
              </div>
            </el-col>
            <el-col :span="5">
              <div class="cell-item">
                <span class="color-999 test-tst">基础实际价格计算金额</span>
                <br>
                <span class="inner-data">{{ orderInfo.baseRealPriceAmount }}￥</span>
              </div>
            </el-col>
            <el-col :span="5">
              <div class="cell-item">
                <span class="color-999 test-tst">油站价格计算金额</span>
                <br>
                <span class="inner-data">{{ orderInfo.sitePriceAmount }}￥</span>
              </div>
            </el-col>
            </el-row>
            <el-row :gutter="20">
          <el-col :span="5">
              <div class="cell-item">
                <span class="color-999 test-tst">底价价格</span>
                <br>
                <span class="inner-data">{{ orderInfo.floorPrice }}</span>
              </div>
            </el-col>
            <el-col :span="5">
              <div class="cell-item">
                <span class="color-999 test-tst">底价价格计算金额</span>
                <br>
                <span class="inner-data">{{ orderInfo.floorPriceAmount }}</span>
              </div>
            </el-col>
            </el-row>
        </div>
      </el-card>
    </section>
    <el-dialog
      title="请扫描二维码核销"
      :visible.sync="dialogVisible"
      width="20%"
      :modal="false"
    >
      <div style="display: flex;justify-content: center;">
        <div ref="qrCodeUrl" class="qrcode" />
      </div>
      <span slot="footer" style="text-align: center;" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import orderInfoApi from '@/api/order/orderInfo'
import handleClipboard from '@/utils/clipboard.js'
import QRCode from 'qrcodejs2'
import { mapGetters } from 'vuex'
export default {
  filters: {
    formatBrand(val) {
      if (val == 1) {
        return '中国石油'
      }
      if (val == 2) {
        return '审核通过'
      }
      if (val == 3) {
        return '壳牌'
      }
      if (val == 4) {
        return '民营'
      }
      if (val == 5) {
        return '中海油'
      }
      if (val == 6) {
        return '京博'
      }
      if (val == 7) {
        return '中化石油'
      }
      if (val == 8) {
        return '其他'
      }
      return val
    }
  },
  props: {
    orderInfo: {
      type: Object,
      default() {

      }
    }
  },
  data() {
    return {
      gridNum: {
        header: 6,
        body: 18
      },
      codeStr:'',
      dataEditor: false,
      dialogVisible: false,
      codeopen: false
    }
  },
  computed: {
    ...mapGetters(['sysUserList', 'markData'])
    
  },
  created() {
    console.log(this.orderInfo.orderSerialNumber, '666')
    // this.creatQrCode()
  },
  mounted() {
    // this.$nextTick(function() {
    //   this.creatQrCode()
    // })
  },
  methods: {
    creatQrCode(e) {
      console.log(e,'code')
      // if (this.codeopen) {
      //   console.log('停止')
      //   return
      // }
      this.$refs.qrCodeUrl.innerHTML =''
      new QRCode(this.$refs.qrCodeUrl, {
        text: e,
        width: 100,
        height: 100,
        colorDark: '#333333', // 二维码颜色
        colorLight: '#ffffff', // 二维码背景色
        correctLevel: QRCode.CorrectLevel.L// 容错率，L/M/H
      })
      this.codeopen = true
    },
    qrcodefn() {
      if (this.orderInfo.orderWfStatus === 1) {
        return
      } else {
        orderInfoApi.getOrderQrCode(this.orderInfo.orderSerialNumber).then(res => {
          if (res.code !== 20000) {
            return
          } else {
            this.dialogVisible = true
            // if(this.codeStr===''){
              setTimeout(() => {
              this.creatQrCode(res.data.codeStr)
              console.log(res.data.codeStr,'1111')
            }, 0)
            // }
            
          }
        })
      }
    },
    copyOrderId(text, event) {
      handleClipboard(text, event)
    },
    close() {
      this.$emit('closeDialog')
    },
    updateData() {
      this.dataEditor = false
      orderInfoApi.updateC(this.orderInfo).then(res => {
        this.$message.success(res.msg)
      })
    },
    changeEditor() {
      this.dataEditor = true
      this.$nextTick(() => {
        this.$refs.inputVal.focus()
      })
    }
  }
}
</script>
<style>
.el-dialog__footer{
text-align: center !important;
}
</style>
<style scoped>
.qrcode{
  width:100px;
  height:100px;
}
.qrcode img {
  width:100px;
  height:100px;
  border: 1px solid #1c90ff;
}
/* 主样式 */
.header-container {
  background: #1c90ff !important;
  padding: 20px;
}
.header-title {
  font-weight: bold;
  color: #FFF;
  font-family: '微软雅黑';
  font-size: 20px;
}
.header-title .icon{
  font-size: 26px;
}
.el-button >>> i {
  color: #FFF;
  font-size: 20px;
}
.header-content {
  padding: 10px 50px;
}
.header-content >>> .el-row {
  margin-top: 20px;
}
.card-content {
  padding: 10px 30px;
}
.card-content >>> .el-row{
  margin-bottom: 20px;
}
.header-item {
  display: flex;
  align-items: center;
}
.header-item .item-img {
  width: 40px;
  height: 40px;
  background-color: #FFF;
  margin-right: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: bold;
}

.item-text {
  color: #FFF;
  font-size: 14px;
}

.item-img img {
  width: 20px;
  height: 20px;
}
.box-card {
  margin-bottom: 25px;
}
.card-header-icon {
  font-size: 24px;
}
.card-header-text {
  font-weight: bold;
}
/* 主样式 */
.my-cell {
  color: #666;
  margin-bottom: 20px;
  display: flex;
  flex-direction: row;
}

/* guo' */
.color-999 {
  color: #999;
  font-size: 0.8rem;
  padding-right: 2rem;
  display: inline-block;
  min-width: 5rem;
}
.inner-data {
  color: #66668c;
}
.test-tst {
  padding-bottom: 0.3rem;
  margin-bottom: 10px;
}
.table-detail-drawer >>> .el-drawer__header {
  color: #222 !important;
  font-size: 18px;
}
.photo-list-container {
  display: flex;
  flex-direction: row;
}

.photo-list-container p {
  margin-right: 20px;
  text-align: center;
}
</style>