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.
342 lines
9.0 KiB
342 lines
9.0 KiB
<template>
|
|
<div>
|
|
<div class="header">
|
|
<span v-for="(item,index) in headerList" :key="index" :class="header_active==index ? 'header_active':''" @click="changeSelect(index,item.type)">{{item.name}}</span>
|
|
</div>
|
|
<div class="seach">
|
|
<div class="seach1">
|
|
<div class="seach1_item">
|
|
<span>订单类型</span>
|
|
<el-select v-model="query.cartellino_type" @change="getData" class="seach1_select">
|
|
<el-option :key="0" label="全部" value=""></el-option>
|
|
<el-option :key="1" label="协议" :value="1"></el-option>
|
|
<el-option :key="2" label="拍卖" :value="2"></el-option>
|
|
</el-select>
|
|
</div>
|
|
<div class="seach1_item">
|
|
<span>摘牌方名称</span>
|
|
<el-input
|
|
class="seach1_select"
|
|
placeholder="请输入挂牌方关键字"
|
|
v-model="query.buyer">
|
|
</el-input>
|
|
</div>
|
|
<div class="seach1_item">
|
|
<span>下单时间</span>
|
|
<el-date-picker
|
|
v-model="query.create_time"
|
|
type="date"
|
|
placeholder="选择日期"
|
|
class="seach1_select1"
|
|
format="yyyy 年 MM 月 dd 日"
|
|
value-format="yyyy-MM-dd"
|
|
@change="getData">
|
|
</el-date-picker>
|
|
</div>
|
|
<div class="seach1_item">
|
|
<span>资产名称</span>
|
|
<el-input
|
|
class="seach1_select"
|
|
placeholder="请输入标的名称关键字"
|
|
v-model="query.asset_name">
|
|
</el-input>
|
|
</div>
|
|
<div class="seach1_item">
|
|
<button @click="getData" class="seach_button">确定</button>
|
|
</div>
|
|
</div>
|
|
<div class="body_header">
|
|
<span style="width:48px">序号</span>
|
|
<span style="width:495px">资产</span>
|
|
<span style="width:100px">单价</span>
|
|
<span style="width:170px">数量</span>
|
|
<span style="width:115px">交易总额</span>
|
|
<span style="width:170px">交易状态</span>
|
|
<span style="width:75px;text-align: right;">交易操作</span>
|
|
</div>
|
|
</div>
|
|
<div class="body">
|
|
<div class="order_item" v-for="(item,index) in orderList" :key="index">
|
|
<div class="order_item_id">{{item.id}}</div>
|
|
<img :src="item.serial_img" alt="" class="order_item_img">
|
|
<div class="order_item_info">
|
|
<div class="order_item_info_title">
|
|
<span>{{item.create_time | formatDate}}</span>
|
|
<span>订单编号：{{item.batchcode}}</span>
|
|
<span>托管方：{{item.firm_name}}</span>
|
|
<span>资产编号：{{item.serial}}</span>
|
|
</div>
|
|
<div class="order_item_info_content">
|
|
<div class="order_item_info_content_left">
|
|
<p>{{item.serial_name}}</p>
|
|
<p>契税：¥ {{item.contract_tax}}</p>
|
|
<p>印花税：¥ {{item.printing_tax}}</p>
|
|
</div>
|
|
<div class="order_item_info_content_price">
|
|
<p>¥ {{item.price}}</p>
|
|
</div>
|
|
<div class="order_item_id">{{item.count}}</div>
|
|
<div class="order_item_info_content_all">¥ {{item.total_price}}</div>
|
|
<div>
|
|
<span v-if="item.status==0">待支付</span>
|
|
<span v-else-if="item.status==1">待审核付款</span>
|
|
<span v-else-if="item.status==2">待上传签约合同</span>
|
|
<span v-else-if="item.status==3">待确认签约合同</span>
|
|
<span v-else-if="item.status==4">待交付</span>
|
|
<span v-else-if="item.status==5">待确认交付</span>
|
|
<span v-else-if="item.status==6">待结算</span>
|
|
<span v-else-if="item.status==7">已完成</span>
|
|
<span v-else-if="item.status==8">已关闭</span>
|
|
<span v-else-if="item.status==9">退款中</span>
|
|
<span v-else-if="item.status==10">已退款</span>
|
|
<span v-else-if="item.status==11">已取消</span>
|
|
</div>
|
|
<div class="order_item_info_content_operation">
|
|
<p @click="goDetails(item.status,item.batchcode)">订单详情</p>
|
|
<p>下载合同</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="pagination">
|
|
<el-pagination
|
|
background
|
|
layout="total, prev, pager, next"
|
|
:current-page="query.page"
|
|
:page-size="query.limit"
|
|
:total="pageTotal"
|
|
@current-change="handlePageChange"
|
|
></el-pagination>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import {seller_order_list} from '../../../api/index'
|
|
export default {
|
|
data(){
|
|
return{
|
|
query:{
|
|
cartellino_type:'',
|
|
buyer:'',
|
|
create_time:'',
|
|
asset_name:'',
|
|
page:1,
|
|
limit:10,
|
|
order_status:''
|
|
},
|
|
pageTotal:0,
|
|
|
|
headerList:[
|
|
{name:'全部订单',type:''},
|
|
{name:'待付款',type:1},
|
|
{name:'待签约',type:2},
|
|
{name:'待交付',type:3},
|
|
{name:'已完成',type:4},
|
|
{name:'已关闭',type:5},
|
|
],
|
|
orderList:[],
|
|
header_active:0
|
|
}
|
|
},
|
|
created(){
|
|
this.getData()
|
|
},
|
|
methods:{
|
|
goDetails(status,batchcode){
|
|
let step,
|
|
type=1,
|
|
url='/order/sellorderPendingPay';
|
|
if(status==0||status==1){
|
|
step=1
|
|
}else if(status==2||status==3){
|
|
step=2
|
|
}else if(status==4||status==5){
|
|
step=3
|
|
}else if(status==6 ){
|
|
step=4
|
|
}else if(status==7){
|
|
step=5
|
|
url='/order/orderDetails'
|
|
}else if (status==8) {
|
|
step=2
|
|
url='/order/orderDetails'
|
|
type=2
|
|
}
|
|
this.$router.push({path:url,query:{step:step,batchcode:batchcode,type:type}})
|
|
},
|
|
changeSelect(index,type){
|
|
this.header_active=index
|
|
this.query.order_status=type
|
|
this.getData()
|
|
},
|
|
getData(){
|
|
seller_order_list(this.query).then(res => {
|
|
console.info(res)
|
|
if(res.code==100){
|
|
this.orderList=res.data.list;
|
|
this.pageTotal=res.data.count
|
|
}else{
|
|
this.$message.error(res.msg)
|
|
}
|
|
})
|
|
},
|
|
// 分页导航
|
|
handlePageChange(val) {
|
|
this.$set(this.query, 'page', val);
|
|
this.getData();
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style scoped>
|
|
.seach1_select1{
|
|
margin-left: 10px;
|
|
}
|
|
.body_header{
|
|
background: #F2F2F2;
|
|
width: 100%;
|
|
border: 1px solid #D7D7D7;
|
|
border-top: none;
|
|
font-size: 14px;
|
|
color: #333333;
|
|
height: 50px;
|
|
display: flex;
|
|
align-items: center;
|
|
box-sizing: border-box;
|
|
}
|
|
.body_header span{
|
|
display: inline-block;
|
|
text-align: center;
|
|
}
|
|
.seach{
|
|
margin: 20px 0;
|
|
}
|
|
.seach1_select{
|
|
margin-left: 10px;
|
|
width: 170px;
|
|
}
|
|
.seach_button{
|
|
width: 60px;
|
|
height: 30px;
|
|
font-size: 12px;
|
|
color: #333333;
|
|
background-color: transparent;
|
|
border:1px solid #D7D7D7;
|
|
cursor: pointer;
|
|
}
|
|
.seach_input{
|
|
width: 100px;
|
|
margin: 0 15px;
|
|
}
|
|
.seach1{
|
|
width: 100%;
|
|
height: 50px;
|
|
background: #F2F2F2;
|
|
border: 1px solid #D7D7D7;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.seach1:last-child{
|
|
border-top: none;
|
|
}
|
|
.seach1_item{
|
|
padding: 0 15px;
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 12px;
|
|
height: 100%;
|
|
}
|
|
.seach1_item_span{
|
|
color: #C94C4C;
|
|
}
|
|
.select_city{
|
|
margin: 0 15px;
|
|
}
|
|
.header{
|
|
font-size: 14px;
|
|
}
|
|
.header_active{
|
|
color: rgba(201, 76, 76, 0.698039215686274);
|
|
font-size: 16px;
|
|
font-weight: bold;
|
|
}
|
|
.header span{
|
|
display: inline-block;
|
|
padding: 0 10px;
|
|
cursor: pointer;
|
|
margin-right: 20px;
|
|
}
|
|
.header span:hover{
|
|
color: rgba(201, 76, 76, 0.698039215686274);
|
|
font-size: 16px;
|
|
font-weight: bold;
|
|
}
|
|
.el-dropdown-link{
|
|
color: #EAB1B1;
|
|
cursor: pointer;
|
|
}
|
|
.body{
|
|
margin-top: 10px;
|
|
}
|
|
.order_item{
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 14px;
|
|
padding: 15px 0;
|
|
}
|
|
.order_item:nth-child(2n+2){
|
|
background-color: #F2F2F2;
|
|
}
|
|
.order_item_id{
|
|
padding: 0 15px;
|
|
}
|
|
.order_item_img{
|
|
width: 100px;
|
|
height: 100px;
|
|
margin: 0 15px;
|
|
}
|
|
.order_item_info_title{
|
|
display: flex;
|
|
font-size: 14px;
|
|
color: #7F7F7F;
|
|
align-items: center;
|
|
width: 1020px;
|
|
justify-content: space-between;
|
|
}
|
|
.order_item_info_content{
|
|
display: flex;
|
|
align-items: center;
|
|
width: 1020px;
|
|
font-size: 14px;
|
|
justify-content: space-between;
|
|
margin-top: 5px;
|
|
color: #333333;
|
|
padding-right: 15px;
|
|
box-sizing: border-box;
|
|
}
|
|
.order_item_info_content_left p{
|
|
width: 300px;
|
|
margin-bottom: 5px;
|
|
}
|
|
.order_item_info_content_price{
|
|
/* margin:0 30px; */
|
|
text-align: center;
|
|
}
|
|
.order_item_info_content_price_p{
|
|
text-decoration: line-through;
|
|
margin-bottom: 5px;
|
|
}
|
|
.order_item_info_content_all{
|
|
font-weight: bold;
|
|
}
|
|
.order_item_info_content_operation{
|
|
color: #555555;
|
|
}
|
|
.order_item_info_content_operation p{
|
|
margin-bottom: 5px;
|
|
cursor: pointer;
|
|
}
|
|
</style>
|
|
|