16 changed files with 1254 additions and 212 deletions
@ -0,0 +1,508 @@ |
|||
<template> |
|||
<div> |
|||
<div class="order_info"> |
|||
<div class="order_info_left"> |
|||
<div class="order_info_left_title">订单信息</div> |
|||
<div class="order_info_left_content"> |
|||
<div class="order_info_left_content_item"> |
|||
<span>联系地址： </span> |
|||
<span>{{orderInfos.express_address}}</span> |
|||
</div> |
|||
<div class="order_info_left_content_item"> |
|||
<span>联系人： </span> |
|||
<span>{{orderInfos.express_user}} {{orderInfos.express_userphone}}</span> |
|||
</div> |
|||
<div class="order_info_left_content_item"> |
|||
<span>订单编号： </span> |
|||
<span>{{orderInfos.batchcode}}</span> |
|||
</div> |
|||
<div class="order_info_left_content_item"> |
|||
<span>下单时间： </span> |
|||
<span>{{orderInfos.create_time | formatDate}}</span> |
|||
</div> |
|||
<div class="order_info_left_content_item"> |
|||
<span>挂牌方： </span> |
|||
<span>{{orderInfos.sell_name}}</span> |
|||
</div> |
|||
<div class="order_info_left_content_item"> |
|||
<span>摘牌方留言： </span> |
|||
<span>{{orderInfos. sell_message}}</span> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="order_info_right"> |
|||
<div class="order_info_right_title"> |
|||
<img src="../../../assets/img/order_stats.png" alt=""> |
|||
<span>订单状态： |
|||
<template v-if="orderInfos.status==0 && orderInfos.check_status==0">等待摘牌方付款</template> |
|||
<template v-else-if="orderInfos.status==1 && orderInfos.check_status==0">等待交易所确认</template> |
|||
<template v-else-if="orderInfos.status==1 && orderInfos.check_status==2">摘牌方付款确认审核失败</template> |
|||
<template v-else-if="orderInfos.status==2 && orderInfos.check_status==0">等待双方上传签约合同</template> |
|||
<template v-else-if="orderInfos.status==3 && orderInfos.check_status==0">等待交易所确认签约合同</template> |
|||
<template v-else-if="orderInfos.status==3 && orderInfos.check_status==2">确认签约合同审核失败</template> |
|||
<template v-else-if="orderInfos.status==4 ">等待摘牌方确认交付</template> |
|||
<template v-else-if="orderInfos.status==6 ">订单结算中</template> |
|||
</span> |
|||
</div> |
|||
<p class="order_info_right_tips" v-if="orderInfos.status==0 && orderInfos.check_status==0 || orderInfos.status==1 && orderInfos.check_status==2"> |
|||
摘牌方还要23小时43分15秒来付款，超时订单自动关闭。 |
|||
</p> |
|||
<p class="order_info_right_tips" v-if="orderInfos.status==6"> |
|||
摘牌方已确认交付，该订单正在结算中，订单结算金额为（ ¥ 27,000.00 ），请耐心等候！ |
|||
</p> |
|||
<p class="order_info_right_tips" v-else-if="orderInfos.status==1 && orderInfos.check_status==0"> |
|||
摘牌方已上传转账记录，还有23小时43分15秒由交易所确认，请耐心等候！ |
|||
</p> |
|||
<p class="order_info_right_tips" v-else-if="orderInfos.status==2 && orderInfos.check_status==0||orderInfos.status==3 && orderInfos.check_status==2"> |
|||
请双方上传签约合同PDF文件扫描件，由交易所见证交易过程！ |
|||
</p> |
|||
<p class="order_info_right_tips" v-else-if="orderInfos.status==3 && orderInfos.check_status==0"> |
|||
交易所正在审核确认双方上传的签约合同，请耐心等候！ |
|||
</p> |
|||
<p class="order_info_right_tips" v-if="orderInfos.status==4"> |
|||
摘牌方还有 |
|||
<span class="order_time">23小时43分15秒{{orderInfos.serial_name}}</span> |
|||
来确认，超时订单自动确认。订单确认后交易所将会出具双方交易凭证，确认资产交易成功！ |
|||
</p> |
|||
<template v-if="orderInfos.status==2 && orderInfos.check_status==0 ||orderInfos.status==3 && orderInfos.check_status==0||orderInfos.status==3 && orderInfos.check_status==2"> |
|||
<div class="order_info_right_tips"> |
|||
<span>摘牌方上传</span> |
|||
<el-upload |
|||
v-if="orderInfos. sell_contract==null && orderInfos.check_status==0 || orderInfos.check_status==2" |
|||
class="upload-demo" |
|||
:action="action1" |
|||
:show-file-list="false" |
|||
:on-error="handleAvatarError" |
|||
list-type="picture" |
|||
:on-success="(res,file)=>{handleAvatarSuccess1(res,file)}" |
|||
> |
|||
<span class="upload_span ">{{orderInfos.check_status==2? '重新上传':'点击上传'}}</span> |
|||
</el-upload> |
|||
<a v-else class="upload_span upload-demo" :href="orderInfos.sell_contract" download>查看记录</a> |
|||
</div> |
|||
<div class="order_info_right_tips"> |
|||
<span>挂牌方上传</span> |
|||
<a class="upload_span upload-demo" @click="imgDetils(orderInfos.buy_contract)">查看记录</a> |
|||
</div> |
|||
</template> |
|||
<div class="order_info_right_tips" v-if="orderInfos.status==6 "> |
|||
<span>您可以点击</span> |
|||
<button class="pay_button" @click="imgDetils()">交易凭证</button> |
|||
<span>下载资产交易凭证</span> |
|||
</div> |
|||
<div class="order_info_right_tips" v-if="orderInfos.status==0 || orderInfos.status==1"> |
|||
<span>您可以</span> |
|||
<template v-if="orderInfos.status==0 && orderInfos.check_status==0 || orderInfos.status==1 && orderInfos.check_status==2"> |
|||
<button class="pay_button">网银支付</button> |
|||
<span>或上传转账记录</span> |
|||
<el-upload |
|||
class="upload-demo" |
|||
:action="action" |
|||
:on-change="fileChange" |
|||
:show-file-list="false" |
|||
:on-error="handleAvatarError" |
|||
list-type="picture" |
|||
:on-success="(res,file)=>{handleAvatarSuccess(res,file)}" |
|||
> |
|||
<span class="upload_span">点击上传</span> |
|||
</el-upload> |
|||
</template> |
|||
<template v-else-if="orderInfos.status==1 && orderInfos.check_status==0"> |
|||
<span class="upload_span1" @click="onPreview(orderInfos.pay_record)">查看记录</span> |
|||
</template> |
|||
</div> |
|||
<div class="error_msg" v-if="orderInfos.check_status==2">失败原因：{{orderInfos.check_content}}</div> |
|||
</div> |
|||
</div> |
|||
<div class="order_head"> |
|||
<div class="order_head_item" >资产名称</div> |
|||
<div class="order_head_item" >资产编号</div> |
|||
<div class="order_head_item" >资产分类</div> |
|||
<div class="order_head_item" >资产单价</div> |
|||
<div class="order_head_item" >交易数量</div> |
|||
<div class="order_head_item" >金额小计</div> |
|||
</div> |
|||
<div class="order_content"> |
|||
<div class="order_content_item"> |
|||
<img :src="orderInfos.serial_img[0]" alt="" class="order_content_item_img"> |
|||
<span class="order_content_item_span">{{orderInfos.serial_name}}</span> |
|||
</div> |
|||
<div class="order_content_item"> |
|||
<span>GM-BZ-165254{{orderInfos.serial_name}}</span> |
|||
</div> |
|||
<div class="order_content_item"> |
|||
<span>{{orderInfos.asset_type_name}}</span> |
|||
</div> |
|||
<div class="order_content_item"> |
|||
<span>¥ {{orderInfos.single_price}}</span> |
|||
</div> |
|||
<div class="order_content_item"> |
|||
<span>{{orderInfos.count}}</span> |
|||
</div> |
|||
<div class="order_content_item"> |
|||
<span class="order_price">¥ {{orderInfos.price}}</span> |
|||
</div> |
|||
</div> |
|||
<div class="order_other"> |
|||
<div class="order_other_item"> |
|||
<div class="order_message"> |
|||
<span>给挂牌方留言：</span> |
|||
<span>{{orderInfos.buy_message}}</span> |
|||
</div> |
|||
<div class="order_other_item_right"> |
|||
<div> |
|||
<span>契税： ¥ {{orderInfos.contract_tax}}</span> |
|||
<span class="order_price">¥ {{orderInfos.contract_tax}}</span> |
|||
</div> |
|||
<div> |
|||
<span>印花税： ¥ {{orderInfos.printing_tax}}</span> |
|||
<span class="order_price">¥ {{orderInfos.printing_tax}}</span> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="order_other_item order_other_item1"> |
|||
<span>金额合计 </span> |
|||
<span class="all_price"> ¥ 33,000.00{{orderInfos.serial_name}}</span> |
|||
</div> |
|||
</div> |
|||
<el-image-viewer |
|||
v-if="showViewer" |
|||
:on-close="closeViewer" |
|||
:url-list="img_url" |
|||
:z-index="9999" |
|||
/> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
import {orderInfo,uploadingRecord,uploadingContract} from '../../../api/index' |
|||
export default { |
|||
data(){ |
|||
return{ |
|||
query:{ |
|||
batchcode:'', |
|||
record:'' |
|||
}, |
|||
showViewer:false, |
|||
img_url:[], |
|||
orderInfos:{ |
|||
serial_img:[] |
|||
}, |
|||
host:'http://wenhua.xingtongworld.com', |
|||
action:'http://wenhua.xingtongworld.com/api/Index/uploadimg', |
|||
action1:'http://wenhua.xingtongworld.com/api/Index/uploadFile', |
|||
} |
|||
}, |
|||
components: { |
|||
ElImageViewer: () => import('element-ui/packages/image/src/image-viewer') |
|||
}, |
|||
created(){ |
|||
this.query.batchcode=this.$route.query.batchcode |
|||
this.getData() |
|||
}, |
|||
methods:{ |
|||
uploadingContract(contract){ |
|||
let data={ |
|||
contract:contract, |
|||
batchcode:this.query.batchcode, |
|||
} |
|||
uploadingContract(data).then(res=>{ |
|||
console.info(res) |
|||
if(res.code==100){ |
|||
this.orderInfos.buy_contract=this.host+res.data.img_url; |
|||
this.$message.success('上传成功!'); |
|||
}else{ |
|||
this.$message.error(res.msg) |
|||
} |
|||
}) |
|||
}, |
|||
imgDetils(img){ |
|||
if(img!=null){ |
|||
window.location.href = img; |
|||
}else{ |
|||
this.$message.error('摘牌方还未上传签约合同') |
|||
} |
|||
}, |
|||
getData(){ |
|||
orderInfo(this.query).then(res => { |
|||
console.info(res) |
|||
if(res.code==100){ |
|||
this.orderInfos=res.data |
|||
this.$emit('confirm',res.data) |
|||
}else{ |
|||
this.$message.error(res.msg) |
|||
} |
|||
}) |
|||
}, |
|||
uploadingRecord(){ |
|||
uploadingRecord(this.query).then(res => { |
|||
console.info(res) |
|||
if(res.code==100){ |
|||
this.$message.success('文件上传成功！请等待审核~'); |
|||
}else{ |
|||
this.$message.error(res.msg) |
|||
} |
|||
}) |
|||
}, |
|||
onPreview(img) { |
|||
this.img_url = img |
|||
this.showViewer = true |
|||
}, |
|||
// 关闭查看器 |
|||
closeViewer() { |
|||
this.showViewer = false |
|||
}, |
|||
handleAvatarError(){ |
|||
this.$message.error('文件上传失败！'); |
|||
}, |
|||
handleAvatarSuccess1(res,file){ |
|||
console.info(res) |
|||
if(res.code==1){ |
|||
let contract=this.host+res.data.img_url; |
|||
this.uploadingContract(contract) |
|||
}else{ |
|||
this.$message.error(res.msg); |
|||
} |
|||
}, |
|||
handleAvatarSuccess(res, file, index,key){ |
|||
if(res.code==1){ |
|||
this.query.record=this.host+res.data.img_url; |
|||
this.uploadingRecord() |
|||
} |
|||
}, |
|||
fileChange(file){ |
|||
const typeArr = ['image/png', 'image/gif', 'image/jpeg', 'image/jpg']; |
|||
const isJPG = typeArr.indexOf(file.raw.type) !== -1; |
|||
const isLt3M = file.size / 1024 / 1024 < 3; |
|||
if (!isJPG) { |
|||
this.$message.error('只能是图片!'); |
|||
this.$refs.upload.clearFiles(); |
|||
return; |
|||
} |
|||
if (!isLt3M) { |
|||
this.$message.error('上传图片大小不能超过 3MB!'); |
|||
this.$refs.upload.clearFiles(); |
|||
// this.$set(this.query, 'goods_img', ''); |
|||
return; |
|||
} |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
<style scoped> |
|||
.upload-demo{ |
|||
margin-left: 20px; |
|||
} |
|||
.upload_span{ |
|||
color: #294CC6; |
|||
text-decoration: underline; |
|||
cursor: pointer; |
|||
} |
|||
.upload_span1{ |
|||
color: #294CC6; |
|||
text-decoration: underline; |
|||
display: inline-block; |
|||
margin-left: 20px; |
|||
cursor: pointer; |
|||
} |
|||
.order_info{ |
|||
width: 100%; |
|||
min-height: 360px; |
|||
height: auto; |
|||
border: 1px solid rgba(215, 215, 215, 1); |
|||
margin-bottom: 30px; |
|||
display: flex; |
|||
} |
|||
.order_info_right{ |
|||
width: 940px; |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: center; |
|||
padding-left: 60px; |
|||
box-sizing: border-box; |
|||
} |
|||
.order_info_right_title{ |
|||
display: flex; |
|||
align-items: center; |
|||
font-size: 16px; |
|||
margin-bottom: 35px; |
|||
} |
|||
.order_info_right_title img{ |
|||
width: 30px; |
|||
height: 30px; |
|||
margin-right: 30px; |
|||
} |
|||
.order_info_right_tips{ |
|||
font-size: 12px; |
|||
color: #555555; |
|||
display: flex; |
|||
align-items: center; |
|||
margin-left: 80px; |
|||
margin-bottom: 25px; |
|||
} |
|||
.order_time{ |
|||
color: #89201F; |
|||
} |
|||
.pay_button{ |
|||
width: 80px; |
|||
font-size: 12px; |
|||
color: #555555; |
|||
height: 30px; |
|||
border: 1px solid #D7D7D7; |
|||
margin: 0 20px; |
|||
cursor: pointer; |
|||
} |
|||
|
|||
.order_info_left{ |
|||
width: 250px; |
|||
border-right: 1px solid rgba(215, 215, 215, 1); |
|||
box-sizing: border-box; |
|||
background-color: #F2F2F2; |
|||
} |
|||
.order_info_left_title{ |
|||
padding-left: 20px; |
|||
background-color: #E7E7E7; |
|||
display: flex; |
|||
height: 40px; |
|||
align-items: center; |
|||
font-size: 12px; |
|||
font-weight: 650; |
|||
border-bottom: 1px solid rgba(215, 215, 215, 1); |
|||
box-sizing: border-box; |
|||
} |
|||
.order_info_left_content{ |
|||
padding: 10px 20px; |
|||
min-height: 320px; |
|||
height: auto; |
|||
box-sizing: border-box; |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: space-between; |
|||
|
|||
} |
|||
.order_info_left_content_item{ |
|||
font-size: 12px; |
|||
color: #555555; |
|||
display: flex; |
|||
margin-bottom: 10px; |
|||
} |
|||
.order_info_left_content_item span:first-child{ |
|||
display: inline-block; |
|||
width: 80px; |
|||
margin-right: 10px; |
|||
} |
|||
.order_info_left_content_item span:last-child{ |
|||
display: inline-block; |
|||
width: 135px; |
|||
} |
|||
.order_head{ |
|||
display: flex; |
|||
justify-content: space-between; |
|||
margin-bottom: 25px; |
|||
width: 100%; |
|||
} |
|||
.order_head_item{ |
|||
width: 166px; |
|||
font-size: 12px; |
|||
color: #7F7F7F; |
|||
text-align: center; |
|||
border-bottom: 2px solid rgba(215, 215, 215, 1); |
|||
padding-bottom: 5px; |
|||
} |
|||
.order_head_item:first-child{ |
|||
width:340px |
|||
} |
|||
.order_content{ |
|||
height: 75px; |
|||
background-color: rgba(255, 255, 255, 0); |
|||
border-top: 1px dashed #AAAAAA; |
|||
border-bottom: 1px dashed #AAAAAA; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
margin-bottom: 5px; |
|||
} |
|||
.order_content_item{ |
|||
width: 166px; |
|||
height: 100%; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
font-size: 12px; |
|||
box-sizing: border-box; |
|||
} |
|||
.order_content_item:first-child{ |
|||
width:340px; |
|||
justify-content: flex-start; |
|||
padding-left: 20px; |
|||
} |
|||
.order_content_item:last-child{ |
|||
justify-content: flex-end; |
|||
padding-right: 20px; |
|||
} |
|||
.order_content_item_img{ |
|||
width: 55px; |
|||
height: 55px; |
|||
margin-right: 10px; |
|||
} |
|||
.order_content_item_span{ |
|||
display: inline-block; |
|||
width: 240px; |
|||
} |
|||
.order_price{ |
|||
color: #EB4747; |
|||
} |
|||
.order_other{ |
|||
margin-bottom: 100px; |
|||
} |
|||
.order_other_item{ |
|||
display: flex; |
|||
justify-content: space-between; |
|||
height: 103px; |
|||
width: 100%; |
|||
} |
|||
.order_message{ |
|||
width: 596px; |
|||
padding: 10px 20px; |
|||
display: flex; |
|||
font-size: 12px; |
|||
background: #F2F2F2; |
|||
box-sizing: border-box; |
|||
} |
|||
.order_message .order_message_input{ |
|||
width: 455px; |
|||
margin-left: 10px; |
|||
} |
|||
.order_message_input >>>.el-textarea__inner{ |
|||
height: 75px; |
|||
} |
|||
.order_other_item_right{ |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: space-between; |
|||
} |
|||
.order_other_item_right>div{ |
|||
width: 601px; |
|||
height: 50px; |
|||
background-color: rgba(242, 242, 242, 1); |
|||
font-size: 12px; |
|||
padding: 0 20px; |
|||
display: flex; |
|||
align-items: center; |
|||
box-sizing: border-box; |
|||
justify-content: space-between; |
|||
} |
|||
.order_other_item1{ |
|||
height: 50px; |
|||
background: #F2F2F2; |
|||
align-items: center; |
|||
justify-content: flex-end; |
|||
margin-top: 3px; |
|||
font-size: 14px; |
|||
padding-right: 20px; |
|||
box-sizing: border-box; |
|||
} |
|||
.error_msg{ |
|||
font-size: 12px; |
|||
color: #89201F; |
|||
margin-left: 80px; |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue