<template>
|
<GlobalWindow
|
:title="title"
|
:visible.sync="visible"
|
:withFooter="false"
|
width="calc(100% - 250px)"
|
:confirm-working="isWorking"
|
@close="close"
|
@confirm="confirm">
|
<div class="main">
|
<div class="renzheng" >
|
<div class="info" >
|
<span class="m10">订单信息</span>
|
<el-tag type="primary" class="ml10 tag2" v-if="info.status == 0||info.status == 1||info.status == 2||info.status == 3">{{ info.statusName }}</el-tag>
|
<el-tag type="success" class="ml10 tag2" v-if="info.status == 4">{{ info.statusName }}</el-tag>
|
<el-tag type="danger" class="ml10 tag2" v-if="info.status == 99">{{ info.statusName }}</el-tag>
|
<div style="display: inline-block;float: right;font-size: 12px"><el-button icon="el-icon-timer" type="primary" @click="showLogList" >订单流转日志</el-button></div>
|
</div>
|
<div class="detail" >
|
<div class="line">
|
<div class="cont"><span class="label"> 订单号：</span> <span class="txt">{{info.code }}</span></div>
|
<div class="cont"> <span class="label"> 下单时间：</span> <span class="txt">{{info.createTime }}</span></div>
|
<div class="cont"><span class="label"> 接单时间：</span> <span class="txt">{{info.acceptTime || '' }}</span></div>
|
</div>
|
<div class="line">
|
<div class="cont"><span class="label">开始时间：</span> <span class="txt">{{info.workStartTime || '' }}</span></div>
|
<div class="cont" style="flex: 2"><span class="label">完成时间：</span><span class="txt">{{info.finishTime || '' }}</span></div>
|
</div>
|
</div>
|
</div>
|
<div class="renzheng" >
|
<div class="info" >
|
<span class="m10">支付信息</span>
|
</div>
|
<div class="detail" >
|
<div class="line">
|
<div class="cont"><span class="label"> 实付金额：</span> <span class="txt yellowbtn">{{((info.payAccount||0)/100).toFixed(2) }}元</span></div>
|
<div class="cont"><span class="label">平台手续费：</span> <span class="txt yellowbtn">{{(((info.payAccount||0) - (info.receiveAccount||0))/100).toFixed(2) }}元</span></div>
|
<div class="cont"><span class="label">接单方收到金额：</span> <span class="txt yellowbtn">{{((info.receiveAccount||0)/100).toFixed(2) }}元</span></div>
|
</div>
|
<div class="line">
|
<div class="cont"><span class="label">支付时间：</span> <span class="txt">{{info.payTime || '' }}</span></div>
|
<div class="cont"><span class="label">支付方式：</span><span class="txt">{{info.payMethod==0?'微信支付':'其他' }}</span></div>
|
<div class="cont"><span class="label">交易单号：</span><span class="txt">{{info.wxExternalNo || '' }}</span></div>
|
</div>
|
</div>
|
</div>
|
<div class="renzheng" >
|
<div class="info" >
|
<span class="m10">需求信息</span>
|
</div>
|
<div class="detail" v-if="info.type==0">
|
<div class="line">
|
<div class="cont"><span class="label"> 订单类型：</span> <span class="txt">{{(info.type==0?'用工单':(info.type==1?'货运单':'订单单')) }}</span></div>
|
<div class="cont"><span class="label">工种：</span>
|
<span class="txt" v-if="info.type==0">{{(info.workType==0?'采摘工':(info.workType==1?'分拣工':'包装工')) }}</span>
|
<span v-else>-</span>
|
</div>
|
<div class="cont"><span class="label">品种：</span> <span class="txt">{{info.categoryName || ''}}</span></div>
|
</div>
|
<div class="line">
|
<div class="cont"><span class="label">重量：</span> <span class="txt">{{info.priceNum1 || '' }}斤</span></div>
|
<div class="cont"><span class="label">用工时间：</span><span class="txt">{{info.startDate|| '' }}-{{info.endDate|| '' }}</span></div>
|
<div class="cont"><span class="label">用工天数：</span><span class="txt">{{info.totalDays || 0 }}</span></div>
|
</div>
|
<div class="line">
|
<div class="cont"><span class="label">用工地点：</span> <span class="txt">{{info.location || '' }}</span></div>
|
<div class="cont"><span class="label">费用标准：</span><span class="txt">{{((info.price||0)/100).toFixed(2) }}{{info.priceUnit || '' }}</span></div>
|
<div class="cont"><span class="label">预估总费用：</span><span class="txt yellowbtn">{{((info.estimatedAccount||0)/100).toFixed(2) }}元</span></div>
|
</div>
|
<div class="line">
|
<div class="cont"><span class="label">地点描述：</span><span class="txt">{{info.locationRemark || '' }}</span></div>
|
</div>
|
<div class="line">
|
<div class="cont" ><span class="label">需求描述：</span><span class="txt">{{info.supplement || '' }}</span></div>
|
</div>
|
<div class="line">
|
<div class="cont">
|
<span class="label">图片：</span>
|
<span class="txt" v-if="!info.multifileList || info.multifileList.length ==0">无</span>
|
</div>
|
</div>
|
<div class="line" v-if="info.multifileList && info.multifileList.length>0">
|
<div class="cont">
|
<template v-if="info.multifileList && info.multifileList.length>0">
|
<div v-for="item in info.multifileList" style="display: inline-block" :key="'aaa'+item.id">
|
<el-image v-if="item.fileurlFull" style="width: 50px; height: 50px; margin-right: 10px" :src="item.fileurlFull"
|
:preview-src-list="[info.fileurlFull]">
|
</el-image>
|
</div>
|
</template>
|
</div>
|
</div>
|
<div class="line" v-if="info.auditStatus == 3 || info.auditStatus == 2" :style="'background-color: '+(info.auditStatus==2?'#eff8ea':'rgb(253 226 226)')+';padding: 20px'">
|
<span class="label"> 审核人：</span> <span class="txt">{{info.editorName}} </span><span class="label">{{info.auditTime || '' }} </span>
|
<div style="margin-top: 20px"> <span class="label"> 审核信息：</span> <span class="txt">{{info.auditRemark || '' }}</span></div>
|
</div>
|
</div>
|
<div class="detail" v-if="info.type==1">
|
<div class="line">
|
<div class="cont"><span class="label"> 订单类型：</span> <span class="txt">{{(info.type==0?'用工单':(info.type==1?'货运单':'订单单')) }}</span></div>
|
<div class="cont"><span class="label">车辆：</span> <span class="txt">{{info.categoryName || ''}}-{{info.carUnit || ''}}</span></div>
|
<div class="cont"><span class="label">用车时间：</span> <span class="txt">{{info.startDate|| '' }}-{{info.endDate|| '' }}</span></div>
|
</div>
|
<div class="line">
|
<div class="cont" > <span class="label"> 地址信息：</span> <span class="label" v-if="!wayList || wayList.length==0">-</span> </div>
|
</div>
|
<div class="line" v-if="wayList && wayList.length>0">
|
<div class="cont" style="padding-left: 40px;background-color: #e4ecfe">
|
<div v-for="(item,index) in wayList" style="display: block;margin: 10px" :key="'bbb'+index">
|
<span v-if="index == 0">用车起点：{{item.location || ''}}</span>
|
<span v-if="index >0 && index < wayList.length-1">途经地点：{{item.location || ''}}</span>
|
<span v-if="index == wayList.length-1">用车终点：{{item.location || ''}}</span>
|
</div>
|
</div>
|
</div>
|
<div class="line">
|
<div class="cont"><span class="label">用工天数：</span><span class="txt">{{info.totalDays || 0 }}</span></div>
|
<div class="cont"><span class="label">运输重量/数量：</span> <span class="txt">{{info.transportNum || '' }}{{info.transportUnit || ''}}</span></div>
|
<div class="cont"><span class="label">费用标准：</span><span class="txt">{{((info.price||0)/100).toFixed(2) }}{{info.priceUnit || '' }}</span></div>
|
</div>
|
<div class="line">
|
<div class="cont"><span class="label">预估总费用：</span><span class="txt yellowbtn">{{((info.estimatedAccount||0)/100).toFixed(2) }}元</span></div>
|
</div>
|
<div class="line">
|
<div class="cont" ><span class="label">需求补充：</span><span class="txt">{{info.supplement || '' }}</span></div>
|
</div>
|
<div class="line">
|
<div class="cont">
|
<span class="label">图片：</span>
|
<span class="txt" v-if="!info.multifileList || info.multifileList.length ==0">无</span>
|
</div>
|
</div>
|
<div class="line" v-if="info.multifileList && info.multifileList.length>0">
|
<div class="cont">
|
<template v-if="info.multifileList && info.multifileList.length>0">
|
<div v-for="item in info.multifileList" style="display: inline-block" :key="item.id">
|
<el-image v-if="item.fileurlFull" style="width: 50px; height: 50px; margin-right: 10px" :src="item.fileurlFull"
|
:preview-src-list="[info.fileurlFull]">
|
</el-image>
|
</div>
|
</template>
|
</div>
|
</div>
|
</div>
|
<div class="detail" v-if="info.type==2">
|
<div class="line">
|
<div class="cont"><span class="label">订单类型：</span> <span class="txt">{{(info.type==0?'用工单':(info.type==1?'货运单':'订单单')) }}</span></div>
|
<div class="cont"><span class="label">用餐时间：</span><span class="txt">{{info.startDate|| '' }}-{{info.endDate|| '' }}</span></div>
|
<div class="cont"><span class="label">用餐天数：</span><span class="txt">{{info.totalDays || 0 }}</span></div>
|
</div>
|
<div class="line">
|
<div class="cont"><span class="label">用餐地点：</span><span class="txt">{{info.location || '' }}</span></div>
|
<div class="cont" style="flex: 2" >
|
<span class="label"> 餐标/份数：</span>
|
<span v-for="(item,index) in wayList" :key="'bbb'+index">
|
{{item.name || ''}}{{((item.price||0)/100).toFixed(2)}}元{{item.num||0}}份{{index != wayList.length-1?'|':''}}
|
</span>
|
<span class="label" v-if="!wayList || wayList.length==0">-</span>
|
</div>
|
</div>
|
<div class="line">
|
<div class="cont" ><span class="label">地点描述：</span><span class="txt">{{info.locationRemark || '' }}</span></div>
|
</div>
|
<div class="line">
|
<div class="cont" ><span class="label">需求描述：</span><span class="txt">{{info.supplement || '' }}</span></div>
|
</div>
|
<div class="line">
|
<div class="cont">
|
<span class="label">图片：</span>
|
<span class="txt" v-if="!info.multifileList || info.multifileList.length ==0">无</span>
|
</div>
|
</div>
|
<div class="line" v-if="info.multifileList && info.multifileList.length>0">
|
<div class="cont">
|
<template v-if="info.multifileList && info.multifileList.length>0">
|
<div v-for="item in info.multifileList" style="display: inline-block" :key="'aaa'+item.id">
|
<el-image v-if="item.fileurlFull" style="width: 50px; height: 50px; margin-right: 10px" :src="item.fileurlFull"
|
:preview-src-list="[info.fileurlFull]">
|
</el-image>
|
</div>
|
</template>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="renzheng" >
|
<div class="info" >
|
<span class="m10">发单方信息</span>
|
</div>
|
<div class="detail" >
|
<div class="line">
|
<div class="cont"><span class="label">昵称：</span> <span class="txt">{{ info.releaseName||'' }}</span></div>
|
<div class="cont" ><span class="label">联系方式：</span> <span class="txt ">{{ info.releasePhone||'' }}</span></div>
|
<div class="cont" ><span class="label">其他联系人：</span> <span class="txt ">{{ info.linkName||'' }}-{{ info.linkPhone||'未设置' }}</span></div>
|
</div>
|
</div>
|
</div>
|
<div class="renzheng" >
|
<div class="info" >
|
<span class="m10">接单方信息</span>
|
</div>
|
<div class="detail" >
|
<div class="line">
|
<div class="cont"><span class="label">姓名/单位：</span> <span class="txt">{{ info.acceptName||'' }}</span></div>
|
<div class="cont" style="flex: 2"><span class="label">联系方式：</span> <span class="txt ">{{ info.acceptPhone||'' }}</span></div>
|
</div>
|
</div>
|
</div>
|
<div class="renzheng" >
|
<div class="info" >
|
<span class="m10">评价信息</span>
|
</div>
|
<div class="detail" >
|
<div class="line">
|
<div class="cont"><span class="label">{{info.commentType ==1 ?'系统自动评价':'发单方评价'}}</span> <span class="txt">{{ info.commentTime}}</span></div>
|
</div>
|
<div class="line">
|
<div class="cont">
|
<el-button class="label" :class="getScoreLevel(1)" style="border: none;cursor: default" icon="el-icon-star-on"></el-button>
|
<el-button class="label" :class="getScoreLevel(2)" style="border: grey;cursor: default" icon="el-icon-star-on"></el-button>
|
<el-button class="label" :class="getScoreLevel(3)" style="border: grey;cursor: default" icon="el-icon-star-on"></el-button>
|
<el-button class="label" :class="getScoreLevel(4)" style="border: grey;cursor: default" icon="el-icon-star-on"></el-button>
|
<el-button class="label" :class="getScoreLevel(5)" style="border: grey;cursor: default" icon="el-icon-star-on"></el-button>
|
</div>
|
</div>
|
<div class="line">
|
<div class="cont"><span class="label">评价内容：</span> <span class="txt">{{ info.commentInfo || '-'}}</span></div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<orderProgress ref ='orderProgress'></orderProgress>
|
</GlobalWindow>
|
</template>
|
|
<script>
|
import GlobalWindow from '@/components/common/GlobalWindow'
|
import BaseOpera from '@/components/base/BaseOpera'
|
import orderProgress from '@/components/business/orderProgress'
|
import { getById, cancel } from '@/api/business/orders'
|
export default {
|
components: {
|
GlobalWindow, orderProgress
|
},
|
extends: BaseOpera,
|
data () {
|
return {
|
id: '',
|
wayList:[],
|
info: {},
|
loading: false
|
}
|
},
|
methods: {
|
open (title, row) {
|
this.title = title
|
this.visible = true
|
this.tableData2 = []
|
this.id = row.id
|
this.wayList=[]
|
this.getData()
|
},
|
getData () {
|
getById(this.id)
|
.then(res => {
|
this.info = res
|
this.visible = true
|
if(this.info.wayInfo){
|
this.wayList = JSON.parse(this.info.wayInfo)
|
}
|
console.log(this.wayList)
|
})
|
},
|
close () {
|
|
},
|
showLogList () {
|
this.$refs.orderProgress.open('订单流转日志', this.info.orderLogList||[])
|
},
|
getScoreLevel (num) {
|
if (this.info.commentLevel && this.info.commentLevel >= num) {
|
return 'staron'
|
}
|
return 'staroff'
|
},
|
checkDo (status) {
|
console.log(this.$refs.formCheck.length)
|
this.$refs.formCheck.validate((valid) => {
|
if (!valid) {
|
return
|
}
|
this.$dialog.actionConfirm('您确认【取消】该申请吗？', '操作确认')
|
.then(() => {
|
this.dealing = true
|
cancel({
|
id: this.id,
|
auditStatus: status,
|
auditRemark: this.form.auditRemark
|
})
|
.then(res => {
|
this.$tip.apiSuccess('操作成功')
|
this.getData()
|
this.$emit('success')
|
})
|
.catch(e => {
|
this.$tip.apiFailed(e)
|
})
|
.finally(() => {
|
this.dealing = false
|
})
|
})
|
})
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
@import '@/assets/style/variables.scss';
|
.bottom{
|
text-align: center;
|
display: block;
|
height: auto;
|
background-color: #e4ecfe;
|
width: calc(100% - 32px);
|
z-index: 999;
|
padding: 16px;
|
}
|
.staroff{
|
color: #8c939d !important;
|
}
|
.staron{
|
color: #ff4d00 !important;
|
}
|
.renzheng{
|
margin: 0px 0px 30px 20px;
|
width: calc(100% - 60px);
|
.detail{
|
font-size: 14px;
|
.label{
|
//color: #8c939d;
|
}
|
.txt{
|
margin-right: 30px;
|
}
|
.line{
|
font-size: 12px;
|
margin-top: 15px;
|
display: flex;
|
width: calc(100% - 60px);
|
.cont{
|
flex: 1;
|
}
|
}
|
}
|
.ml10{
|
margin-left: 10px;
|
}
|
.info{
|
font-size: 14px;
|
font-weight: bold;
|
color: #5a72c5;
|
}
|
.tag2{
|
font-size: 12px;
|
}
|
}
|
.home_title {
|
.mr10{
|
margin-right: 10px;
|
}
|
.m10{
|
margin: 10px;
|
}
|
.bluebtn{
|
color: #2985f7;
|
}
|
.tag1{
|
border-radius: 10px;
|
font-size: 10px;
|
padding: 0px 15px;
|
height: 24px;
|
}
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
.left {
|
font-weight: 500;
|
font-size: 14px;
|
margin-right: 10px;
|
display: flex;
|
align-items: center;
|
.status {
|
padding: 0 6px;
|
height: 22px;
|
line-height: 22px;
|
border-radius: 2px;
|
border: 1px solid #00BA92;
|
color: #00BA92;
|
font-weight: 400;
|
font-size: 12px;
|
color: #00BA92;
|
}
|
}
|
}
|
.tab{
|
width: 20%;
|
}
|
.remark {
|
//background: #E8EBF7;
|
border-radius: 2px;
|
font-size: 14px;
|
margin: 10px 10px 0px -10px;
|
button{
|
border: none;
|
cursor: default;
|
margin-right: 20px;
|
background: #e4ecfe;
|
}
|
}
|
.bluebtn{
|
font-weight: bold;
|
color: #2985f7;
|
}
|
|
.redbtn{
|
font-weight: bold;
|
color: #ff1b1b;
|
}
|
.yellowbtn{
|
font-weight: bold;
|
color: #fc9d20;
|
}
|
|
.tabs {
|
border-bottom: 1px solid #DFE2E8;
|
display: flex;
|
margin-bottom: 20px;
|
.tab {
|
height: 58px;
|
line-height: 58px;
|
font-size: 14px;
|
color: #666666;
|
margin-right: 30px;
|
cursor: pointer;
|
}
|
|
.active {
|
font-weight: 500;
|
color: $primary-color;
|
border-bottom: 2px solid $primary-color;
|
}
|
}
|
|
.main {
|
padding: 12px 16px;
|
.title {
|
font-weight: 500;
|
font-size: 12px;
|
color: $primary-color;
|
margin-bottom: 15px;
|
}
|
/deep/ .el-form-item__label{
|
font-size: 12px;
|
}
|
.list {
|
display: flex;
|
flex-wrap: wrap;
|
/*background: #F7F7F7;*/
|
border-radius: 2px;
|
/*padding: 15px 20px;*/
|
margin-bottom: 20px;
|
|
.item {
|
font-size: 14px;
|
width: 25%;
|
margin-bottom: 16px;
|
|
.la {
|
color: #7f7f7f;
|
margin-bottom: 10px;
|
}
|
}
|
}
|
}
|
|
/deep/ .window__body {
|
padding: 0px !important;
|
}
|
</style>
|
