<template>
|
<div class="OrderList">
|
<div class="header">订单列表</div>
|
<div class="content">
|
<div class="search">
|
<div class="label">订单编号/产品名称</div>
|
<el-input v-model="input" placeholder="请输入内容"></el-input>
|
<div class="label">创建时间</div>
|
<el-date-picker
|
v-model="time"
|
type="daterange"
|
range-separator="至"
|
start-placeholder="开始日期"
|
end-placeholder="结束日期"
|
>
|
</el-date-picker>
|
<div class="button" @click="getList">查询</div>
|
</div>
|
|
<div class="table-area">
|
<el-table
|
id="multipleTable"
|
ref="multipleTable"
|
:data="dataList"
|
tooltip-effect="dark"
|
:fit="true"
|
>
|
<el-table-column label="序号" width="68">
|
<template slot-scope="scope">{{
|
scope.$index + 1 + (page - 1) * size
|
}}</template>
|
</el-table-column>
|
<el-table-column prop="sn" label="订单编号"></el-table-column>
|
|
<el-table-column label="产品名称">
|
<template slot-scope="scope">
|
{{ scope.row.products && scope.row.products[0].productName }}
|
</template>
|
</el-table-column>
|
|
<el-table-column prop="type" label="类型" sortable>
|
<template slot-scope="scope">
|
{{ scope.row.products && scope.row.products[0].productTypeName }}
|
</template>
|
</el-table-column>
|
<el-table-column
|
prop="createUserName"
|
label="创建人"
|
></el-table-column>
|
<el-table-column
|
prop="createTime"
|
label="创建时间"
|
sortable
|
></el-table-column>
|
<el-table-column
|
prop="orderMoney"
|
label="金额"
|
sortable
|
></el-table-column>
|
<el-table-column label="支付方式">
|
<template slot-scope="scope">
|
<div v-if="scope.row.payMethod == 1">线下汇款</div>
|
<div v-if="scope.row.payMethod == 2">支付宝</div>
|
<div v-if="scope.row.payMethod == 3">微信</div>
|
</template>
|
</el-table-column>
|
<el-table-column prop="status" label="订单状态" sortable>
|
<template slot-scope="scope">
|
<div class="data" v-if="scope.row.orderStatus == -1">已取消</div>
|
<div class="data" v-if="scope.row.orderStatus == 0">未下单</div>
|
<div class="data" v-if="scope.row.orderStatus == 1">待支付</div>
|
<div class="data" v-if="scope.row.orderStatus == 2">已支付</div>
|
<div class="data" v-if="scope.row.orderStatus == 11">
|
支付凭证待审核
|
</div>
|
</template>
|
</el-table-column>
|
|
<el-table-column label="操作">
|
<template slot-scope="scope">
|
<div class="control" @click="checkDetail(scope.row)">
|
查看详情
|
</div>
|
</template>
|
</el-table-column>
|
</el-table>
|
<el-pagination
|
@current-change="refrash"
|
@size-change="handleSizeChange"
|
:current-page="page"
|
:page-size="size"
|
layout=" prev, pager, next, jumper"
|
:total="total"
|
background
|
></el-pagination>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import { findAllOrderList } from "@/api/order";
|
export default {
|
created() {
|
this.getList();
|
},
|
data() {
|
return {
|
input: "",
|
time: [],
|
size: 10,
|
page: 1,
|
total: 10,
|
dataList: [],
|
};
|
},
|
methods: {
|
async getList() {
|
const res = await findAllOrderList({
|
page: this.page,
|
size: this.size,
|
startTime: this.time && this.time[0],
|
endTime: this.time && this.time[1],
|
inputText: this.input,
|
productBaseId: "0",
|
orderName: "",
|
orderType: "",
|
status: 0,
|
});
|
if (res && res.success) {
|
this.dataList = res.data.list;
|
this.total = res.data.total;
|
}
|
},
|
checkDetail(row) {
|
this.$router.push({
|
path: "/Layout/OrderDetail",
|
query: {
|
id: row.id,
|
},
|
});
|
},
|
refrash(page) {
|
this.page = page;
|
this.getList();
|
},
|
handleSizeChange() {
|
this.getList();
|
},
|
},
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
.OrderList {
|
background-color: rgb(243, 245, 248);
|
.header {
|
padding: 0 24px;
|
height: 50px;
|
font-size: 16px;
|
color: #666666;
|
line-height: 50px;
|
background: #ffffff;
|
font-weight: 700;
|
}
|
|
.content {
|
margin: 24px;
|
padding: 20px;
|
background-color: #fff;
|
|
.search {
|
display: flex;
|
align-items: center;
|
line-height: 23px;
|
|
.label {
|
margin-right: 20px;
|
height: 20px;
|
font-size: 14px;
|
color: #3d3d3d;
|
}
|
|
.el-input ::v-deep {
|
margin-right: 30px;
|
width: 300px;
|
height: 32px;
|
.el-input__inner {
|
width: 100%;
|
height: 32px;
|
line-height: 32px;
|
color: #3d3d3d;
|
border-radius: 0;
|
border-color: #c0c5cc;
|
&::-webkit-input-placeholder {
|
color: #999999;
|
}
|
|
&:focus {
|
border-color: #0065ff;
|
}
|
}
|
}
|
|
.el-date-editor ::v-deep {
|
box-sizing: border-box;
|
height: 32px;
|
|
.el-input__icon,
|
.el-input__suffix {
|
margin-top: -7px;
|
}
|
.el-range-separator {
|
line-height: 27px;
|
}
|
}
|
|
.button {
|
margin-left: 36px;
|
width: 60px;
|
height: 32px;
|
text-align: center;
|
border-radius: 3px;
|
background: #0064ff;
|
font-size: 14px;
|
line-height: 32px;
|
color: #ffffff;
|
cursor: pointer;
|
}
|
}
|
|
.control {
|
color: #0064ff;
|
cursor: pointer;
|
}
|
}
|
}
|
</style>
|
