caoliancun
/
dispacth_zhongpin
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
中品二期调度
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
15 Commits
5 Branches
0 Tags
10 MiB
 
 
 
 
Tag: Branch: Tree: 661855a53e
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from '661855a53e'
${ noResults }
dispacth_zhongpin/src/views/finance/order/OrderInfoInfo.vue

648 lines
21 KiB
Raw Blame History

<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>