578 lines
12 KiB
Vue
578 lines
12 KiB
Vue
<!--
|
||
* @Descripttion:
|
||
* @version:
|
||
* @Author: kBank
|
||
* @Date: 2023-03-04 09:57:47
|
||
-->
|
||
<template>
|
||
<div class="contain orderCenter">
|
||
<!-- table -->
|
||
<div class="table">
|
||
<div class="table_tit">
|
||
<div class="t_btm_l">
|
||
<div class="tab_i1">{{ "订单详情" }}</div>
|
||
</div>
|
||
<div class="t_btm_r table_width">
|
||
<div>{{ "订单类型" }}</div>
|
||
<div>{{ "订单金额" }}</div>
|
||
<!-- <div>订单业绩(PV)</div>
|
||
<div>订单业绩(BV)</div> -->
|
||
<div>{{ "支付编号" }}</div>
|
||
<div>{{ "支付姓名" }}</div>
|
||
<div>{{ "会员编号" }}</div>
|
||
<div>{{ "会员姓名" }}</div>
|
||
<div>{{ "订单状态" }}</div>
|
||
<div>{{ "收货人" }}</div>
|
||
<span class="sheng">{{ "联系方式" }}</span>
|
||
<!-- <span class="sheng">省、市、区/县、详细地址</span> -->
|
||
<div>{{ "省" }}</div>
|
||
<div>{{ "市" }}</div>
|
||
<div>{{ "区/县" }}</div>
|
||
<div>{{ "详细地址" }}</div>
|
||
<div>{{ "操作" }}</div>
|
||
</div>
|
||
</div>
|
||
<div v-for="(item, index) in orderLists" class="order_i" :key="index">
|
||
<div class="t_top">
|
||
<span>{{ "订单编号" }}：{{ item.orderCode }}</span>
|
||
<span>{{ "创建时间" }}：{{ item.creationTime }}</span>
|
||
<span>{{ "支付时间" }}：{{ item.payTime }}</span>
|
||
<span
|
||
>{{ "订单业绩" }}(PV)：{{
|
||
item.orderAchieve | toThousandthAndKeepDecimal
|
||
}}</span
|
||
>
|
||
<!-- <span>{{ '订单业绩' }}(BV)：{{ item.orderAssAchieve |toThousandthAndKeepDecimal}}</span> -->
|
||
</div>
|
||
<div class="t_btm_a">
|
||
<div class="t_btm_l">
|
||
<div
|
||
v-for="(ctem, cndex) in item.itemList"
|
||
:key="cndex"
|
||
class="t_btm"
|
||
>
|
||
<!-- 详情 -->
|
||
<div class="tab_i1">
|
||
<img :src="ctem.cover" alt="" />
|
||
<div class="tab_i1_1">
|
||
<div class="prot">{{ ctem.productName }}</div>
|
||
<div>{{ ctem.specsName }}</div>
|
||
<div class="prot_i">
|
||
<div>{{ ctem.price | toThousandthAndKeepDecimal }}</div>
|
||
<div>X{{ ctem.quantity }}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="t_btm_r table_width">
|
||
<!-- 类型 -->
|
||
<div>{{ item.orderTypeVal }}</div>
|
||
<!-- 金额 -->
|
||
<div>
|
||
{{ item.orderAmount | toThousandthAndKeepDecimal }}
|
||
</div>
|
||
<!-- pv -->
|
||
<!-- <div>{{ item.orderAchieve }}</div> -->
|
||
<!-- Bv -->
|
||
<!-- <div>{{ item.orderAssAchieve }}</div> -->
|
||
<!-- 支付编号 -->
|
||
<div>
|
||
{{ item.creatorCode }}
|
||
</div>
|
||
<!-- 支付姓名 -->
|
||
<div>
|
||
{{ item.creatorName }}
|
||
</div>
|
||
<!-- 会员编号 -->
|
||
<div>{{ item.memberCode }}</div>
|
||
<!-- 会员姓名 -->
|
||
<div>{{ item.memberName }}</div>
|
||
<!-- 状态 -->
|
||
<div v-if="item.orderStatus == '4'" style="color: #666">
|
||
{{ item.orderStatusVal }}
|
||
</div>
|
||
<div v-if="item.orderStatus == '1'" style="color: #009b58">
|
||
{{ item.orderStatusVal }}
|
||
</div>
|
||
<div
|
||
v-if="item.orderStatus == '0'"
|
||
style="color: var(--primary-color)"
|
||
>
|
||
{{ item.orderStatusVal }}
|
||
</div>
|
||
<div v-if="item.orderStatus == '3'" style="color: #ffad41">
|
||
{{ item.orderStatusVal }}
|
||
</div>
|
||
<div v-if="item.orderStatus == '5'" style="color: #ffad41">
|
||
{{ item.orderStatusVal }}
|
||
</div>
|
||
|
||
<!-- 名 -->
|
||
<div>{{ item.recName }}</div>
|
||
<!-- 电话 -->
|
||
<span class="sheng">{{ item.recPhone }}</span>
|
||
<!-- 地址 -->
|
||
<div>{{ item.recProvince }}</div>
|
||
<div>{{ item.recCity }}</div>
|
||
<div>{{ item.recCounty || "" }}</div>
|
||
<div>{{ item.address }}</div>
|
||
<!-- <span class="sheng">{{item.recProvince}}{{item.recCity}}{{item.recCounty || ''}}{{ item.address }}</span> -->
|
||
<!-- 操作 -->
|
||
<div class="del">
|
||
<div class="del1" @click="cancleOrder(item)">
|
||
{{ "撤销订单" }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<pagination
|
||
v-show="total > 0"
|
||
:total="total"
|
||
:page.sync="queryParams.pageNum"
|
||
:limit.sync="queryParams.pageSize"
|
||
@pagination="getDataList"
|
||
/>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import * as api from "@/api/orderComment.js";
|
||
import { mapGetters } from "vuex";
|
||
export default {
|
||
data() {
|
||
return {
|
||
// 查询参数
|
||
queryParams: {
|
||
pageNum: 1,
|
||
pageSize: 50,
|
||
},
|
||
total: 0,
|
||
orderLists: [],
|
||
};
|
||
},
|
||
computed: {
|
||
...mapGetters(["userInfo"]),
|
||
},
|
||
mounted() {
|
||
this.getDataList();
|
||
},
|
||
methods: {
|
||
getDataList() {
|
||
api.selfRevokeList(Object.assign({}, this.queryParams)).then((res) => {
|
||
this.orderLists = res.rows;
|
||
this.total = res.total;
|
||
});
|
||
},
|
||
cancleOrder(item) {
|
||
this.$confirm("确定撤销订单?", "警告", {
|
||
confirmButtonText: "确定",
|
||
cancelButtonText: "取消",
|
||
type: "warning",
|
||
}).then((_) => {
|
||
api.selfRevokeListCheck(item).then((res) => {
|
||
if (res.code == 200) {
|
||
api.selfRevokeOrder(item).then((res) => {
|
||
if (res.code == 200) {
|
||
this.$message({
|
||
message: res.msg,
|
||
type: "success",
|
||
});
|
||
this.getDataList();
|
||
} else {
|
||
this.$message({
|
||
message: res.msg,
|
||
type: "warning",
|
||
});
|
||
}
|
||
});
|
||
} else {
|
||
this.$message({
|
||
message: res.msg,
|
||
type: "warning",
|
||
});
|
||
}
|
||
});
|
||
});
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.contain {
|
||
.kuang {
|
||
background: #ffffff;
|
||
// box-shadow: 0px 0px 20px 0px rgba(204, 204, 204, 0.5);
|
||
border-radius: 8px 8px 8px 8px;
|
||
padding: 20px 20px 20px 0;
|
||
}
|
||
}
|
||
|
||
.table {
|
||
background: #ffffff;
|
||
// box-shadow: 0px 2px 20px 0px rgba(135, 135, 135, 0.3);
|
||
border-radius: 10px 10px 10px 10px;
|
||
margin-top: 20px;
|
||
font-size: 14px;
|
||
.tabList {
|
||
display: flex;
|
||
align-items: center;
|
||
font-weight: 400;
|
||
color: #666666;
|
||
padding: 20px 20px 0 20px;
|
||
.tab_i {
|
||
margin-right: 70px;
|
||
border-bottom: 5px solid #fff;
|
||
padding-bottom: 10px;
|
||
position: relative;
|
||
cursor: pointer;
|
||
.qiu {
|
||
position: absolute;
|
||
width: 20px;
|
||
height: 20px;
|
||
background: #00417c;
|
||
top: -10px;
|
||
right: -10px;
|
||
border-radius: 50%;
|
||
font-size: 12px;
|
||
color: #ffffff;
|
||
text-align: center;
|
||
line-height: 20px;
|
||
}
|
||
}
|
||
.tabAct {
|
||
color: #00417c;
|
||
border-bottom: 5px solid #00417c;
|
||
}
|
||
}
|
||
}
|
||
.searchbox {
|
||
display: flex;
|
||
align-items: center;
|
||
.btn1 {
|
||
background: #cccccc;
|
||
border-radius: 5px 5px 5px 5px;
|
||
color: #ffffff;
|
||
}
|
||
.btn2 {
|
||
border-radius: 5px 5px 5px 5px;
|
||
background: rgba(214, 24, 32, 1);
|
||
color: #ffffff;
|
||
}
|
||
}
|
||
|
||
.table_tit {
|
||
background: #eeeeee;
|
||
padding: 30px 0 30px 30px;
|
||
display: flex;
|
||
font-size: 14px;
|
||
font-weight: 600;
|
||
color: #333333;
|
||
align-items: center;
|
||
position: sticky;
|
||
top: 100px;
|
||
}
|
||
|
||
.table_tit2 {
|
||
width: 8%;
|
||
text-align: center;
|
||
}
|
||
|
||
.t_btm_a {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 20px 0px 20px 30px;
|
||
}
|
||
|
||
.t_btm_l {
|
||
width: 14%;
|
||
}
|
||
|
||
.t_btm_r {
|
||
// width: 8%;
|
||
text-align: center;
|
||
display: flex;
|
||
flex: 1;
|
||
align-items: center;
|
||
}
|
||
|
||
.table_width {
|
||
text-align: center;
|
||
div {
|
||
flex: 1;
|
||
word-break: break-all;
|
||
} // div:nth-child(11) {
|
||
// width: 8%;
|
||
// }
|
||
}
|
||
|
||
.tab_i1 {
|
||
// padding-left: 30px;
|
||
display: flex;
|
||
align-items: center;
|
||
font-size: 11px;
|
||
}
|
||
|
||
.tab_i1_1 {
|
||
// display: flex;
|
||
text-align: left;
|
||
flex: 1;
|
||
padding-left: 10px;
|
||
.prot {
|
||
margin-bottom: 5px;
|
||
}
|
||
.prot_i {
|
||
width: 50% !important;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin-top: 5px;
|
||
}
|
||
}
|
||
|
||
.t_top {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 18px 0 15px 30px;
|
||
border-bottom: 2px solid rgba(0, 0, 0, 0.05);
|
||
span {
|
||
margin-right: 60px;
|
||
}
|
||
}
|
||
|
||
.t_btm {
|
||
display: flex;
|
||
align-items: center; // padding: 20px 0px 20px 30px;
|
||
margin-bottom: 10px;
|
||
img {
|
||
width: 64px;
|
||
height: 64px;
|
||
border-radius: 8px 8px 8px 8px;
|
||
}
|
||
}
|
||
|
||
.order_i {
|
||
background: #ffffff;
|
||
box-shadow: 0px 4px 20px 0px rgba(204, 204, 204, 0.5);
|
||
border-radius: 10px 10px 10px 10px;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.del {
|
||
div:nth-child(2) {
|
||
width: 100%;
|
||
}
|
||
div:nth-child(3) {
|
||
width: 100%;
|
||
}
|
||
div:nth-child(1) {
|
||
width: 100%;
|
||
color: #3499ff;
|
||
}
|
||
}
|
||
|
||
.del1 {
|
||
color: #009b58;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.del2 {
|
||
color: var(--primary-color);
|
||
cursor: pointer;
|
||
}
|
||
|
||
.del3 {
|
||
color: var(--primary-color);
|
||
cursor: pointer;
|
||
}
|
||
|
||
.del4 {
|
||
color: var(--primary-color);
|
||
cursor: pointer;
|
||
}
|
||
|
||
::v-deep .el-range-editor.el-input__inner {
|
||
width: auto;
|
||
}
|
||
|
||
::v-deep .el-select {
|
||
width: 100%;
|
||
}
|
||
|
||
.sheng {
|
||
width: 8% !important;
|
||
}
|
||
|
||
.delBtn {
|
||
background: var(--primary-color);
|
||
color: #fff;
|
||
border-color: var(--primary-color);
|
||
}
|
||
|
||
.all_dig {
|
||
display: flex;
|
||
align-items: center;
|
||
.tit {
|
||
font-size: 12px;
|
||
font-family: PingFang SC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #999999;
|
||
display: inline-block;
|
||
margin-bottom: 30px;
|
||
cursor: pointer;
|
||
margin-right: 20px;
|
||
}
|
||
.act {
|
||
font-size: 16px;
|
||
font-family: PingFang SC-Semibold, PingFang SC;
|
||
font-weight: 600;
|
||
color: #333333;
|
||
display: inline-block;
|
||
border-bottom: 4px solid #00417c;
|
||
margin-bottom: 30px;
|
||
cursor: pointer;
|
||
margin-right: 20px;
|
||
}
|
||
}
|
||
|
||
.head_t {
|
||
display: flex;
|
||
align-items: center;
|
||
font-size: 12px;
|
||
font-family: PingFang SC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #666666;
|
||
padding-bottom: 20px;
|
||
margin-bottom: 20px;
|
||
border-bottom: 1px solid #ccc;
|
||
img {
|
||
width: 44px;
|
||
height: 44px;
|
||
margin-right: 10px;
|
||
}
|
||
}
|
||
|
||
.wl_tree {
|
||
display: flex;
|
||
margin-bottom: 10px;
|
||
.tree_l {
|
||
width: 30%;
|
||
text-align: right;
|
||
}
|
||
.zhong {
|
||
// flex: 1;
|
||
margin: 0 20px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
.qiu {
|
||
width: 10px;
|
||
height: 10px;
|
||
background: #cccccc;
|
||
border-radius: 50%; // margin: 10px 0;
|
||
margin: 3px 0 10px 0;
|
||
}
|
||
.gun {
|
||
background: #ccc;
|
||
width: 1px;
|
||
min-height: 70px;
|
||
}
|
||
}
|
||
.tree_r {
|
||
width: 60%;
|
||
}
|
||
}
|
||
|
||
::v-deep .orderCenter .el-dialog__body {
|
||
height: 700px;
|
||
overflow-y: auto;
|
||
}
|
||
.digTit {
|
||
color: #5392f0;
|
||
font-size: 50px;
|
||
text-align: right;
|
||
font-weight: 700;
|
||
}
|
||
.digCent {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
font-size: 18px;
|
||
color: #000;
|
||
}
|
||
.digCent_l {
|
||
flex: 1;
|
||
}
|
||
.digCent_f {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 10px;
|
||
:first-child {
|
||
margin-right: 30px;
|
||
font-weight: 500;
|
||
}
|
||
}
|
||
.digCent_r {
|
||
flex: 1;
|
||
text-align: right;
|
||
margin-top: 50px;
|
||
div {
|
||
margin-bottom: 10px;
|
||
}
|
||
:nth-child(1) {
|
||
font-weight: 500;
|
||
font-size: 22px;
|
||
}
|
||
:nth-child(2) {
|
||
font-weight: 500;
|
||
font-size: 22px;
|
||
}
|
||
}
|
||
</style>
|
||
|
||
<style lang="scss">
|
||
.print {
|
||
.el-table--border:after,
|
||
.el-table--group:after,
|
||
.el-table:before {
|
||
background-color: #000;
|
||
}
|
||
|
||
.el-table--border,
|
||
.el-table--group {
|
||
border-color: #000;
|
||
}
|
||
|
||
.el-table td,
|
||
.el-table th.is-leaf {
|
||
border-color: #000;
|
||
}
|
||
|
||
.el-table--border th,
|
||
.el-table--border th.gutter:last-of-type {
|
||
border-color: #000;
|
||
}
|
||
|
||
.el-table--border td,
|
||
.el-table--border th {
|
||
border-color: #000;
|
||
}
|
||
.el-table__row {
|
||
color: #000;
|
||
}
|
||
}
|
||
#printDom {
|
||
table {
|
||
table-layout: auto !important;
|
||
}
|
||
.el-table__header-wrapper .el-table__header {
|
||
width: 100% !important;
|
||
}
|
||
.el-table__body-wrapper .el-table__body {
|
||
width: 100% !important;
|
||
}
|
||
}
|
||
</style>
|