401 lines
12 KiB
Vue
401 lines
12 KiB
Vue
<template>
|
|
<div class="orderManagement">
|
|
<!-- 搜索框 -->
|
|
<el-card class="mobileCaed" v-if="isMobile">
|
|
<el-row :span="24">
|
|
<el-col :span="24" class="search">
|
|
<el-select v-model="select" filterable @change="selectSearch" class="searchSelect" placeholder="请选择"
|
|
size="small">
|
|
<!-- <el-option label="全部" value="all" /> -->
|
|
|
|
<el-option label="订单号" value="id" />
|
|
<el-option label="订单日期" value="order_date" />
|
|
<el-option label="订单状态:未支付" value="0" />
|
|
<el-option label="订单状态:已支付" value="1" />
|
|
<el-option label="订单状态:已取消" value="3" />
|
|
</el-select>
|
|
<el-input size="small" v-show="this.select == 'id'" placeholder="请输入内容" class="input-with-select" @input="input"
|
|
v-model="searchValue" clearable></el-input>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row>
|
|
<el-col :span="24" style="margin-top:5px;">
|
|
<div v-if="select == 'order_date'">
|
|
<div class="datePicker">
|
|
<el-date-picker size="small" @change="change" v-model="value1" type="daterange" range-separator="至"
|
|
start-placeholder="开始日期" end-placeholder="结束日期" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd">
|
|
</el-date-picker>
|
|
</div>
|
|
</div>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row class="allPrice">
|
|
<el-col :span="24">
|
|
<span class="price" style="font-size: 18px">支付总金额:¥ {{ all_price }}</span>
|
|
<el-button type="primary" class="searchSelectIcon" @click="set">重置</el-button>
|
|
</el-col>
|
|
</el-row>
|
|
</el-card>
|
|
|
|
<el-card class="pcCard" v-else style="height:80px;display: flex;justify-content: flex-start;align-items: center;">
|
|
<el-row :span="24">
|
|
<el-col :span="24" class="search" style="display: flex;justify-content: flex-start;align-items: center">
|
|
<el-select v-model="select" filterable @change="selectSearch" class="searchSelect" placeholder="请选择"
|
|
width="130px" size="small">
|
|
<!-- <el-option label="全部" value="all" /> -->
|
|
<el-option label="订单号" value="id" />
|
|
<el-option label="订单日期" value="order_date" />
|
|
<el-option label="订单状态:未支付" value="0" />
|
|
<el-option label="订单状态:已支付" value="1" />
|
|
<el-option label="订单状态:已取消" value="3" />
|
|
</el-select>
|
|
<el-input style="width: 150px;margin-left:10px;" size="small" v-show="this.select == 'id'" placeholder="请输入内容"
|
|
class="input-with-select" @input="input" v-model="searchValue" clearable></el-input>
|
|
<div v-if="select == 'order_date'">
|
|
<div style="display:flex;margin-left:10px;">
|
|
<el-date-picker size="small" @change="change" v-model="value1" type="daterange" range-separator="至"
|
|
start-placeholder="开始日期" end-placeholder="结束日期" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd">
|
|
</el-date-picker>
|
|
</div>
|
|
</div>
|
|
<el-button type="primary" style="padding: 0 5px;height: 30px; margin-left:10px;" class="searchSelectIcon"
|
|
@click="set">重置
|
|
</el-button>
|
|
<span
|
|
style="font-size: 16px;padding-left:15px;display: flex;justify-content: center;align-items: center">支付总金额:
|
|
<div style="width: 250px;line-height: 36px">
|
|
<el-skeleton animated v-if="all_price_show" rows="2" />
|
|
<span v-else> ¥ {{ all_price }}</span>
|
|
</div>
|
|
|
|
</span>
|
|
</el-col>
|
|
</el-row>
|
|
</el-card>
|
|
<!-- 表格 -->
|
|
<el-card class="orderList">
|
|
<el-table border :data="tableData" class="table" height="calc(100vh - 280px)" v-loading="all_price_show">
|
|
<!-- 序号 -->
|
|
<el-table-column label="序号" width="80">
|
|
<template slot-scope="scope">
|
|
{{ scope.$index + 1 }}
|
|
</template>
|
|
</el-table-column>
|
|
<!-- 订单名称 -->
|
|
<el-table-column align="center" min-width="180" header-align="center" prop="source" label="产品名称">
|
|
</el-table-column>
|
|
<el-table-column align="center" min-width="300" header-align="center" prop="id" label="订单号"></el-table-column>
|
|
<el-table-column align="center" header-align="center" label="订单原价">
|
|
<template slot-scope="scope">
|
|
<!-- <div style="padding-left: 35px">-->
|
|
￥{{ scope.row.countprice }}
|
|
<!-- </div>-->
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column align="center" header-align="center" label="订单折后价">
|
|
<template slot-scope="scope">
|
|
{{ scope.row.amount ? "￥" + scope.row.amount : "-" }}
|
|
</template>
|
|
|
|
</el-table-column>
|
|
<el-table-column align="center" header-align="center" label="订单类型">
|
|
<template slot-scope="scope">
|
|
<!-- {{ orderTypeMap(scope.row.business_op) }}-->
|
|
<el-tag :style="{ padding: '0 8px' }" :type="orderTypeMap(scope.row.business_op).type">
|
|
{{ orderTypeMap(scope.row.business_op).text }}
|
|
</el-tag>
|
|
</template>
|
|
</el-table-column>
|
|
|
|
<el-table-column align="center" header-align="center" label="订单状态">
|
|
<template slot-scope="scope">
|
|
<el-tag v-if="scope.row.order_status === '0'" style="padding: 0 5px" type="warning" effect="dark">
|
|
{{ getResult(scope.row.order_status) }}
|
|
</el-tag>
|
|
<el-tag v-else-if="scope.row.order_status === '1'" style="padding: 0 5px" type="success" effect="dark">
|
|
{{ getResult(scope.row.order_status) }}
|
|
</el-tag>
|
|
<el-tag v-else style="padding: 0 5px" type="info" effect="dark">
|
|
{{ getResult(scope.row.order_status) }}
|
|
</el-tag>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column align="center" header-align="center" prop="order_date" label="订单日期"></el-table-column>
|
|
<el-table-column align="center" header-align="center" label="操作">
|
|
<template slot-scope="scope">
|
|
<el-button size="small" v-if="scope.row.order_status === '0'" type="primary" @click="orderDetails(scope.row)"
|
|
style="padding: 8px 15px">去支付
|
|
</el-button>
|
|
<el-button size="small" v-else type="primary" @click="orderDetails(scope.row)" style="padding: 8px">
|
|
查看详情
|
|
</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
|
|
<!-- 分 页-->
|
|
<div class="page">
|
|
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage4"
|
|
:page-sizes="[100, 200, 300, 400]" :page-size="100" layout="total, sizes, prev, pager, next, jumper"
|
|
:total="400">
|
|
</el-pagination>
|
|
</div>
|
|
</el-card>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { getOrderAPI } from "@/api/product/product";
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
|
|
all_price_show: true,//金额显示骨架屏
|
|
// 获取用户代理字P串
|
|
userAgent: window.navigator.userAgent,
|
|
// 判断是否为移动设备
|
|
isMobile: false,
|
|
all_price: '',
|
|
showDate: false,
|
|
pickerOptions: {
|
|
shortcuts: [{
|
|
text: '最近一周',
|
|
onClick(picker) {
|
|
const end = new Date();
|
|
const start = new Date();
|
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
|
|
picker.$emit('pick', [start, end]);
|
|
}
|
|
}, {
|
|
text: '最近一个月',
|
|
onClick(picker) {
|
|
const end = new Date();
|
|
const start = new Date();
|
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
|
|
picker.$emit('pick', [start, end]);
|
|
}
|
|
}, {
|
|
text: '最近三个月',
|
|
onClick(picker) {
|
|
const end = new Date();
|
|
const start = new Date();
|
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
|
|
picker.$emit('pick', [start, end]);
|
|
}
|
|
}]
|
|
},
|
|
value1: '',
|
|
select: "",
|
|
tableData: [],
|
|
page: 1,
|
|
searchValue: null,
|
|
order_status_select: null,
|
|
userId: sessionStorage.getItem("userId"),
|
|
dialogVisible: false,
|
|
orderDetail: {
|
|
order_goods: [
|
|
{
|
|
productid: "",
|
|
amount: "",
|
|
list_price: "",
|
|
quantity: "",
|
|
discount: "",
|
|
price: "",
|
|
},
|
|
],
|
|
},
|
|
};
|
|
},
|
|
created() {
|
|
this.getOrder();
|
|
this.isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(this.userAgent);
|
|
},
|
|
methods: {
|
|
// 订单类型映射
|
|
orderTypeMap(type) {
|
|
switch (type) {
|
|
case 'BUY_REVERSE':
|
|
// return <el-tag type="danger"></el-tag>;
|
|
return { text: "退款", type: "danger" };
|
|
case 'RENEW':
|
|
return { text: "续费", type: "primary" };
|
|
case 'BUY':
|
|
return { text: "购买", type: "success" };
|
|
default:
|
|
return { text: "-", type: "primary" };
|
|
}
|
|
},
|
|
getOrder(data) {//获取订单
|
|
let params = {};
|
|
if (this.select) {
|
|
if (this.select === 'id' && this.searchValue) {
|
|
params['type'] = '200'
|
|
params['id'] = this.searchValue
|
|
}
|
|
if (this.select === 'order_date' && this.value1) {
|
|
params['start_time'] = data[0]
|
|
params['end_time'] = data[1]
|
|
params['type'] = '200'
|
|
}
|
|
if (this.select == '0') {
|
|
params['type'] = '200'
|
|
params['order_status'] = '0'
|
|
}
|
|
if (this.select == '1') {
|
|
params['type'] = '200'
|
|
params['order_status'] = '1'
|
|
}
|
|
if (this.select == '3') {
|
|
params['type'] = '200'
|
|
params['order_status'] = '3'
|
|
}
|
|
}
|
|
getOrderAPI(params).then((res) => {
|
|
this.all_price_show = false
|
|
if (res.status == true) {
|
|
this.tableData = res.data;
|
|
this.all_price = res.all_price
|
|
}
|
|
});
|
|
},
|
|
change(e) {//选择时间
|
|
this.value1 = e
|
|
this.getOrder(e)
|
|
},
|
|
set() {//重置
|
|
this.value1 = null
|
|
this.searchValue = null
|
|
this.select = null
|
|
this.getOrder()
|
|
|
|
},
|
|
selectSearch(e) { //下拉搜索事件
|
|
this.select = e
|
|
this.getOrder(e)
|
|
},
|
|
input(e) {//input事件
|
|
this.searchValue = e
|
|
this.getOrder(e)
|
|
},
|
|
orderDetails(row) { //查看订单详情
|
|
this.$router.push({ name: "orderDetil", query: { id: row.id } });
|
|
},
|
|
getResult(data) {
|
|
switch (data) {
|
|
case "0":
|
|
return "未支付";
|
|
case "1":
|
|
return "已支付";
|
|
case "2":
|
|
return "已关闭";
|
|
case "3":
|
|
return "已取消";
|
|
case "4":
|
|
return "后付费";
|
|
}
|
|
},
|
|
},
|
|
handleSizeChange(val) {
|
|
console.log(`每页 ${val} 条`);
|
|
},
|
|
handleCurrentChange(val) {
|
|
console.log(`当前页: ${val}`);
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
* {
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
.orderManagement {
|
|
height: calc(100vh - 180px);
|
|
.mobileCaed {
|
|
height: 100px;
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
|
|
.search {
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
|
|
.searchSelect {
|
|
width: 150px;
|
|
}
|
|
|
|
.input-with-select {
|
|
width: 150px;
|
|
margin-left: 10px;
|
|
}
|
|
}
|
|
|
|
.allPrice {
|
|
margin-top: 5px;
|
|
|
|
.searchSelectIcon {
|
|
padding: 0 5px;
|
|
height: 20px;
|
|
margin-left: 10px;
|
|
}
|
|
|
|
.price {
|
|
font-weight: 600;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.datePicker {
|
|
display: flex;
|
|
margin-left: 10px;
|
|
width: auto;
|
|
}
|
|
}
|
|
}
|
|
|
|
.pcCard {
|
|
.search {
|
|
text-align: left;
|
|
|
|
.input-with-select {
|
|
width: 60%;
|
|
|
|
.searchSelect {
|
|
width: 150px;
|
|
}
|
|
|
|
.searchSelectIcon {
|
|
width: 30px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.orderList {
|
|
margin-top: 10px;
|
|
// height: calc(100vh - 180px);
|
|
|
|
.table {
|
|
width: 100%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.page{
|
|
text-align: center;
|
|
margin: 20px;
|
|
}
|
|
</style>
|
|
<style>
|
|
.el-table .el-table__header {
|
|
background-color: #d0cff8;
|
|
}
|
|
|
|
::v-deep .el-tag {
|
|
padding: 0 8px !important;
|
|
}
|
|
|
|
</style>
|