459 lines
13 KiB
Vue
459 lines
13 KiB
Vue
<template>
|
|
<div class="currentorder">
|
|
<person-title>当前位置 :: 我的订单 >> <em>所有订单</em></person-title>
|
|
<div class="currentorder-cont">
|
|
<div class="findOrder-search">
|
|
<el-form :inline="true" :model="selectData" class="user-findOrder">
|
|
<el-form-item label="查询条件">
|
|
<el-select v-model="selectData.status" clearable placeholder="选择查询条件">
|
|
<!-- 状态1:待取件 2:运输 3:送到 4:收取 前端返回值为-->
|
|
<el-option label="待取件" :value="1"></el-option>
|
|
<el-option label="运输中" :value="2"></el-option>
|
|
<el-option label="待收取" :value="3"></el-option>
|
|
<el-option label="完成" :value="4"></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="请输入">
|
|
<el-input v-model="selectData.name" clearable placeholder="姓名"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="请输入">
|
|
<el-input v-model="selectData.phone" clearable placeholder="电话"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="请输入">
|
|
<el-input v-model="selectData.company" clearable placeholder="快递公司"></el-input>
|
|
</el-form-item>
|
|
<el-button type="primary" v-on:click="getUserOrder()">查询</el-button>
|
|
</el-form>
|
|
</div>
|
|
<el-table
|
|
:data="OrderData"
|
|
class="userOrderList"
|
|
:default-sort="{prop: 'createTime', order: 'descending'}"
|
|
style="width: 100%">
|
|
<div class="emptyTip" slot="empty">
|
|
暂时没有订单 , 赶紧去
|
|
|
|
<a href="" @click.prevent="handleGotoNewOrde"
|
|
> 发布订单 </a>吧
|
|
</div>
|
|
<el-table-column type="expand">
|
|
<template slot-scope="props">
|
|
<el-form label-position="left"
|
|
inline class="userTable demo-table-expand">
|
|
<el-form-item label="订单号 :">
|
|
<span>{{ props.row.id }}</span>
|
|
</el-form-item>
|
|
<el-form-item label="收货人姓名 :">
|
|
<span>{{ props.row.name }}</span>
|
|
</el-form-item>
|
|
<el-form-item label="电话 :">
|
|
<span>{{ props.row.phone }}</span>
|
|
</el-form-item>
|
|
<el-form-item label="快递大小 :">
|
|
<span>{{ props.row.typeDesc }}</span>
|
|
</el-form-item>
|
|
<el-form-item label="快递公司 :">
|
|
<span>{{ props.row.company }}</span>
|
|
</el-form-item>
|
|
<el-form-item label="取货码 :">
|
|
<span>{{ props.row.number }}</span>
|
|
</el-form-item>
|
|
<el-form-item label="公寓 :">
|
|
<span>{{ props.row.flats }}</span>
|
|
</el-form-item>
|
|
<el-form-item label="寝室号 :">
|
|
<span>{{ props.row.hostel }}</span>
|
|
</el-form-item>
|
|
<el-form-item label="备注 :">
|
|
<span>{{ props.row.decs }}</span>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
</el-form-item>
|
|
<template v-if="props.row.status!=1">
|
|
<el-form-item label="接单人员 :">
|
|
<span>{{ props.row.courier.username }}</span>
|
|
</el-form-item>
|
|
<el-form-item label="接单人电话 :">
|
|
<span>{{ props.row.courier.phone }}</span>
|
|
</el-form-item>
|
|
<el-form-item v-if="props.row.status==2" label="接单时间 :">
|
|
<span>{{ props.row.lastTime }}</span>
|
|
</el-form-item>
|
|
<el-form-item v-if="props.row.status==3" label="送达时间 :">
|
|
<span>{{ props.row.lastTime }}</span>
|
|
</el-form-item>
|
|
<el-form-item v-if="props.row.status==4" label="收取时间 :">
|
|
<span>{{ props.row.lastTime }}</span>
|
|
</el-form-item>
|
|
</template>
|
|
<!-- <el-form-item label="发布时间 :">-->
|
|
<!-- <span>{{ props.row.createTime }}</span>-->
|
|
<!-- </el-form-item>-->
|
|
</el-form>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column
|
|
v-for="item in titleList"
|
|
:key='item.id'
|
|
:sortable='item.sortable'
|
|
:label="item.columnTitle"
|
|
:prop="item.prop">
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="status"
|
|
label="快递状态"
|
|
filter-placement="bottom-end">
|
|
<template slot-scope="scope">
|
|
<el-tag
|
|
v-if="scope.row.status==1">待取件
|
|
</el-tag>
|
|
<el-tag
|
|
type="warning" v-if="scope.row.status==2"
|
|
>运输中
|
|
</el-tag>
|
|
<el-tag
|
|
type="danger" v-if="scope.row.status==3"
|
|
disable-transitions>待收取
|
|
</el-tag>
|
|
<el-tag
|
|
type="success" v-if="scope.row.status==4"
|
|
disable-transitions>完成
|
|
</el-tag>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column>
|
|
<template slot="header" slot-scope="scope">操作
|
|
</template>
|
|
<template slot-scope="scope">
|
|
<template v-if="scope.row.status==1">
|
|
<el-button
|
|
size="mini"
|
|
class="btn-cancel"
|
|
type='danger'
|
|
key='Cancel'
|
|
v-on:click="cancel(scope.row.id)"
|
|
>取消订单
|
|
</el-button>
|
|
<!-- handleSuccess(scope.$index, scope.row) -->
|
|
</template>
|
|
<template v-if="scope.row.status==3">
|
|
<el-button
|
|
size="mini"
|
|
key='Delete'
|
|
v-on:click="chargeOrder(scope.row.id)"
|
|
>确认收货
|
|
</el-button>
|
|
</template>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</div>
|
|
<div class="pageination-oder">
|
|
<el-pagination
|
|
@size-change="handleSizeChange"
|
|
@current-change="handleCurrentChange"
|
|
:current-page="4"
|
|
:page-sizes="[10, 50, 80, 100]"
|
|
:page-size="10"
|
|
layout="total, sizes, prev, pager, next, jumper"
|
|
:total="totalOrder">
|
|
</el-pagination>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import {getSelfOrderLst, cancelO, charge} from '../../../api/order'
|
|
import {formData} from '../../../unit/formDate'
|
|
|
|
export default {
|
|
data () {
|
|
return {
|
|
findOrderForm: {
|
|
condition: '',
|
|
answers: ''
|
|
},
|
|
OrderData: null,
|
|
selectData: {
|
|
page: 1,
|
|
size: 10,
|
|
flats: '',
|
|
name: '',
|
|
phone: '',
|
|
company: '',
|
|
starttime: '',
|
|
endtime: '',
|
|
type: '',
|
|
status: ''
|
|
},
|
|
totalOrder: 0,
|
|
showPagination: true,
|
|
listType: {
|
|
noCompBtn: true
|
|
},
|
|
titleList: [
|
|
{id: 1, columnTitle: '订单号', prop: 'id'},
|
|
{id: 2, columnTitle: '姓名', prop: 'name'},
|
|
{id: 3, columnTitle: '发布时间', prop: 'createTime'}
|
|
]
|
|
}
|
|
},
|
|
created () {
|
|
this.getUserOrder()
|
|
},
|
|
methods: {
|
|
chargeOrder (id) {
|
|
this.$confirm(`是否确认送达,完成订单?`,
|
|
'确认送达', {
|
|
confirmButtonText: '确认',
|
|
cancelButtonText: '取消',
|
|
type: 'success'
|
|
}).then(() => {
|
|
let formData = {
|
|
id: id
|
|
}
|
|
charge(formData).then((res) => {
|
|
console.log(res)
|
|
let resData = res.data
|
|
if (resData.success) {
|
|
this.$message({
|
|
type: 'success',
|
|
message: '订单完成'
|
|
})
|
|
this.getUserOrder()
|
|
} else {
|
|
this.$message({
|
|
type: 'error',
|
|
message: resData.msg
|
|
})
|
|
}
|
|
})
|
|
}).catch(() => {
|
|
this.$message({
|
|
type: 'info',
|
|
message: '已取消操作'
|
|
})
|
|
})
|
|
},
|
|
cancel (id) {
|
|
let data = {
|
|
orderid: id
|
|
}
|
|
cancelO(data).then((res) => {
|
|
let data = res.data
|
|
console.log(data)
|
|
if (data.success) {
|
|
this.$message({
|
|
type: 'success',
|
|
message: data.msg
|
|
})
|
|
setTimeout(this.getUserOrder, 500)
|
|
} else {
|
|
this.$message({
|
|
type: 'error',
|
|
message: data.msg
|
|
})
|
|
}
|
|
})
|
|
},
|
|
getUserOrder () {
|
|
let loading = this.$loading({lock: true, text: '玩命加载中...'})
|
|
getSelfOrderLst(this.selectData).then((res) => {
|
|
var data = res.data
|
|
loading.close()
|
|
if (data.success) {
|
|
this.OrderData = []
|
|
var list = data.data.list
|
|
for (let i = 0; i < list.length; i++) {
|
|
var dataitem = list[i]
|
|
dataitem.lastTime = formData(list[i].lastTime, 'yyyy-MM-dd hh:mm:ss')
|
|
dataitem.createTime = formData(list[i].createTime, 'yyyy-MM-dd hh:mm:ss')
|
|
this.OrderData.push(dataitem)
|
|
}
|
|
this.totalOrder = data.data.count
|
|
} else {
|
|
this.$message({
|
|
type: 'info',
|
|
message: data.msg
|
|
})
|
|
}
|
|
}).catch(function () {
|
|
loading.close()
|
|
})
|
|
},
|
|
updateHandler () {
|
|
this.OrderData = {...this.OrderData}
|
|
},
|
|
handleCancel (data) {
|
|
// 如果已接单接不可以取消
|
|
this.$confirm('此操作将取消订单, 是否继续?',
|
|
'取消订单', {
|
|
confirmButtonText: '确定',
|
|
cancelButtonText: '取消',
|
|
type: 'error'
|
|
}).then(() => {
|
|
// let loading = this.$loading({lock:true,text:'正在取消订单...'});
|
|
// axios.get(`/users/cancelCurrentOrder?orderId=${data.orderId}`).then(response=>{
|
|
// let res = response.data;
|
|
// loading.close();
|
|
// if(res.status=='0'){
|
|
// this.$message({
|
|
// type: 'success',
|
|
// message: '取消成功!'
|
|
// });
|
|
// let mode = this.totalOrder % this.selectData.size;
|
|
// if(mode ===1){ //判断是否当页最后一条
|
|
// this.selectData.page --;
|
|
// }
|
|
// this.getUserOrder();
|
|
// }else{
|
|
// this.$message({
|
|
// type: 'error',
|
|
// message:res.msg
|
|
// });
|
|
// }
|
|
// }).catch(err=>{
|
|
// console.log(err);
|
|
// });
|
|
}).catch(() => {
|
|
this.$message({
|
|
type: 'info',
|
|
message: '已取消操作'
|
|
})
|
|
})
|
|
},
|
|
handleCompleted (orderData) {
|
|
// 完成订单
|
|
this.$confirm(`是否确认送达,完成订单?`,
|
|
'支付订单', {
|
|
confirmButtonText: '确认',
|
|
cancelButtonText: '取消',
|
|
type: 'success'
|
|
}).then(() => {
|
|
// let loading = this.$loading({lock:true,text:'正在完成订单...'});
|
|
// axios.post(`/users/completedCurrentOrder`,orderData).then(response=>{
|
|
// let res = response.data;
|
|
// loading.close();
|
|
// if(res.status=='0'){
|
|
// this.$message({
|
|
// type: 'success',
|
|
// message: '收货成功!'
|
|
// });
|
|
// let mode = this.totalOrder % this.selectData.size;
|
|
// if(mode ===1){ //判断是否当页最后一条
|
|
// this.selectData.page --;
|
|
// }
|
|
// this.getUserOrder();
|
|
// }else{
|
|
// this.$message({
|
|
// type: 'error',
|
|
// message:res.msg
|
|
// });
|
|
// }
|
|
// }).catch(err=>{
|
|
// console.log(err);
|
|
// });
|
|
}).catch(() => {
|
|
this.$message({
|
|
type: 'info',
|
|
message: '已取消操作'
|
|
})
|
|
})
|
|
},
|
|
handleSizeChange (val) {
|
|
this.selectData.size = val
|
|
this.getUserOrder()
|
|
},
|
|
handleCurrentChange (val) {
|
|
this.selectData.page = val
|
|
this.getUserOrder()
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang='scss'>
|
|
|
|
.pageination-oder{ //订单页中的分页样式
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
//margin-top: 1rem;
|
|
bottom: -3rem;
|
|
}
|
|
|
|
.userOrderList {
|
|
.el-message {
|
|
top: 5rem;
|
|
}
|
|
|
|
.el-button {
|
|
width: 4.2rem;
|
|
height: 1.5rem;
|
|
line-height: 1.5rem;
|
|
padding: 0;
|
|
|
|
span {
|
|
font-size: 0.6rem;
|
|
}
|
|
}
|
|
|
|
//交易操作
|
|
.btn-cancel {
|
|
margin-right: 0.2rem;
|
|
margin-bottom: 0.3rem;
|
|
}
|
|
|
|
.btn-success {
|
|
/*background-color: #409eff;*/
|
|
/*color: #fff;*/
|
|
|
|
&:hover {
|
|
/*background-color: lighten(#409eff, 5%);*/
|
|
}
|
|
}
|
|
|
|
// 当前订单没有数据时候
|
|
.emptyTip a {
|
|
color: rgb(226, 137, 137);
|
|
|
|
&:hover {
|
|
color: rgb(214, 29, 29);
|
|
}
|
|
}
|
|
|
|
.el-button + .el-button {
|
|
margin-left: 0;
|
|
}
|
|
|
|
// 展开详情后文本 的span
|
|
.horder .el-form-item__content span,
|
|
.currentorder .el-form-item__content span {
|
|
margin-right: 0.5rem;
|
|
}
|
|
|
|
.demo-table-expand {
|
|
font-size: 0;
|
|
}
|
|
|
|
.demo-table-expand label {
|
|
width: 6.2rem;
|
|
color: #99a9bf;
|
|
}
|
|
|
|
.demo-table-expand .el-form-item {
|
|
margin-right: 0;
|
|
margin-bottom: 0;
|
|
width: 50%;
|
|
}
|
|
}
|
|
|
|
.el-button {
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.findOrder-search {
|
|
padding-top: 1rem;
|
|
}
|
|
</style>
|