622 lines
17 KiB
Vue
622 lines
17 KiB
Vue
<template>
|
|
<div class="app-container customer-control">
|
|
<el-dialog
|
|
v-model="dialogVisible"
|
|
title="退货/退款"
|
|
width="40%"
|
|
:before-close="handleClose"
|
|
>
|
|
<el-form
|
|
:label-position="labelPosition"
|
|
label-width="130px"
|
|
:model="formLabelAlign"
|
|
style="max-width: 1000px"
|
|
>
|
|
<el-form-item
|
|
v-if="refundState == '2'"
|
|
label="拒绝原因"
|
|
prop="rejectReason"
|
|
:rules="[{ required: true, message: '请输入拒绝原因' }]"
|
|
>
|
|
<el-input type="textarea" v-model="rejectReason" />
|
|
</el-form-item>
|
|
<el-form-item
|
|
v-if="refundState == '1'"
|
|
label="退款金额"
|
|
prop="refundPrice"
|
|
:rules="[{ required: true, message: '请输入退款金额' }]"
|
|
>
|
|
<el-input type="number" v-model="refundPrice" />
|
|
</el-form-item>
|
|
</el-form>
|
|
<template #footer>
|
|
<span class="dialog-footer">
|
|
<el-button @click="dialogVisible = false">取消</el-button>
|
|
<el-button type="primary" @click="submit()"> 确定 </el-button>
|
|
</span>
|
|
</template>
|
|
</el-dialog>
|
|
<div class="container-custom">
|
|
<!-- 表格 -->
|
|
<div class="table-cont">
|
|
<!-- <el-table :data="tableData" style="width: 100%">
|
|
<el-table-column property="productId" label="商品ID" width="100" />
|
|
<el-table-column
|
|
property="productName"
|
|
label="商品名称"
|
|
width="300"
|
|
/>
|
|
<el-table-column label="图片" width="">
|
|
<template #default="scope">
|
|
<div class="tree-goods-subOrder-image">
|
|
<img
|
|
style="width: 60px; height: 60px"
|
|
:src="scope.row.productImage"
|
|
alt=""
|
|
/>
|
|
</div>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="购买数量" width="">
|
|
<template #default="scope">{{ scope.row.quantity }}</template>
|
|
</el-table-column>
|
|
<el-table-column label="商品单价" width="">
|
|
<template #default="scope">{{ scope.row.unitPrice }}</template>
|
|
</el-table-column>
|
|
<el-table-column label="规格" width="">
|
|
<template #default="scope">{{ scope.row.unit }}</template>
|
|
</el-table-column>
|
|
<el-table-column label="商品总价" width="">
|
|
<template #default="scope">{{ scope.row.subtotalAmount }}</template>
|
|
</el-table-column>
|
|
</el-table> -->
|
|
<div class="order-list-warp">
|
|
<div class="order-list-warp-left">
|
|
<div
|
|
style="
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
margin-top: 20px;
|
|
"
|
|
>
|
|
<el-icon size="30"><LocationFilled /></el-icon>
|
|
<div class="order-list-warp-left-address">
|
|
<div>{{ detailsData.receiverAddress }}</div>
|
|
<div>
|
|
{{ detailsData.receiverName }} {{ detailsData.receiverPhone }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="order-list-warp-left-title">商品信息</div>
|
|
<div
|
|
v-for="(item, index) in detailsData.orderItemInfos"
|
|
:key="item.id"
|
|
class="order-list-warp-left-goods"
|
|
>
|
|
<div class="order-list-warp-left-goods-list">
|
|
<img
|
|
style="width: 100px; height: 100px"
|
|
:src="item.productImage"
|
|
alt=""
|
|
/>
|
|
<div class="order-list-warp-left-goods-list-info">
|
|
<div class="order-list-warp-left-goods-list-info-title">
|
|
{{ item.productName }}
|
|
</div>
|
|
<div class="order-list-warp-left-goods-list-info-info">
|
|
{{ item.unitPrice }}元/{{ item.unit }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div
|
|
style="
|
|
color: #25bf82;
|
|
font-size: 15px;
|
|
width: 100px;
|
|
text-align: right;
|
|
"
|
|
>
|
|
￥{{ item.subtotalAmount }}
|
|
</div>
|
|
<div
|
|
style="
|
|
font-size: 15px;
|
|
color: #999999;
|
|
width: 100px;
|
|
text-align: right;
|
|
"
|
|
>
|
|
x{{ item.quantity }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="order-list-warp-right">
|
|
<div style="margin-top: 20px">
|
|
<div
|
|
style="
|
|
width: 100%;
|
|
text-align: left;
|
|
font-size: 18px;
|
|
font-weight: bold;
|
|
"
|
|
>
|
|
订单详情<text
|
|
style="
|
|
color: #409eff;
|
|
font-size: 20px;
|
|
font-weight: bold;
|
|
margin-left: 20px;
|
|
"
|
|
>{{
|
|
detailsData.orderStatus == "1"
|
|
? "待支付"
|
|
: detailsData.orderStatus == "2" ||
|
|
detailsData.orderStatus == "3"
|
|
? "待发货"
|
|
: detailsData.orderStatus == "4" ||
|
|
detailsData.orderStatus == "5"
|
|
? "已发货"
|
|
: detailsData.orderStatus == "6"
|
|
? "已收货"
|
|
: detailsData.orderStatus == "7"
|
|
? "已取消"
|
|
: detailsData.orderStatus == "8"
|
|
? "已完成"
|
|
: detailsData.orderStatus == "10"
|
|
? "退款中"
|
|
: ""
|
|
}}
|
|
</text>
|
|
</div>
|
|
<div class="order-list-warp-right-list">
|
|
<div>订单编号</div>
|
|
<div style="color: #000000">{{ detailsData.orderNo }}</div>
|
|
</div>
|
|
<div class="order-list-warp-right-list">
|
|
<div>订单备注</div>
|
|
<div style="color: #000000">
|
|
{{ detailsData.orderNote ?? "暂无备注" }}
|
|
</div>
|
|
</div>
|
|
<div class="order-list-warp-right-list">
|
|
<div>商品总数</div>
|
|
<div style="color: #000000">
|
|
{{ detailsData.totalQuantity }}
|
|
</div>
|
|
</div>
|
|
<div
|
|
v-if="
|
|
detailsData.orderStatus == '10' ||
|
|
detailsData.orderStatus == '11'
|
|
"
|
|
class="order-list-warp-right-list"
|
|
>
|
|
<div>退款理由</div>
|
|
<div style="color: #000000">
|
|
{{ detailsData.totalQuantity }}
|
|
</div>
|
|
</div>
|
|
<div
|
|
v-if="
|
|
detailsData.orderStatus == '10' ||
|
|
detailsData.orderStatus == '11'
|
|
"
|
|
class="order-list-warp-right-list"
|
|
>
|
|
<div>退款描述</div>
|
|
<div style="color: #000000">
|
|
{{ detailsData.totalQuantity }}
|
|
</div>
|
|
</div>
|
|
<div class="order-list-warp-right-list">
|
|
<div>创建时间</div>
|
|
<div style="color: #999999">{{ detailsData.createTime }}</div>
|
|
</div>
|
|
<div
|
|
v-if="detailsData.paymentTime"
|
|
class="order-list-warp-right-list"
|
|
>
|
|
<div>付款时间</div>
|
|
<div style="color: #999999">{{ detailsData.paymentTime }}</div>
|
|
</div>
|
|
</div>
|
|
<div v-if="detailsData.orderStatus != '1'" style="margin-top: 30px">
|
|
<div
|
|
style="
|
|
width: 100%;
|
|
text-align: left;
|
|
font-size: 18px;
|
|
font-weight: bold;
|
|
"
|
|
>
|
|
付款信息
|
|
</div>
|
|
<div class="order-list-warp-right-list">
|
|
<div>商品总价</div>
|
|
<div style="color: #000000">
|
|
￥{{ detailsData.totalAmount }}
|
|
</div>
|
|
</div>
|
|
<div class="order-list-warp-right-list">
|
|
<div>运费</div>
|
|
<div style="color: #000000">
|
|
￥{{ detailsData.totalShipFee }}
|
|
</div>
|
|
</div>
|
|
<div class="order-list-warp-right-list">
|
|
<div>优惠金额</div>
|
|
<div style="color: #999999">
|
|
￥{{ detailsData.discountAmount }}
|
|
</div>
|
|
</div>
|
|
<div class="order-list-warp-right-list">
|
|
<div>实付金额</div>
|
|
<div style="color: #999999">
|
|
￥{{ detailsData.payableAmount }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
style="
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background-color: #fff;
|
|
padding: 20px;
|
|
"
|
|
>
|
|
<div
|
|
v-if="detailsData.orderStatus == '10'"
|
|
class="button-bottom"
|
|
@click="agree('同意')"
|
|
>
|
|
同意退款
|
|
</div>
|
|
<div
|
|
v-if="detailsData.orderStatus == '10'"
|
|
class="button-bottoms"
|
|
@click="refuse('拒绝')"
|
|
>
|
|
拒绝退款
|
|
</div>
|
|
<!-- <div class="button-bottoms" @click="reAddress()">修改地址</div>
|
|
<div
|
|
v-if="
|
|
detailsData.orderStatus == '2' ||
|
|
detailsData.orderStatus == '3' ||
|
|
detailsData.orderStatus == '4' ||
|
|
detailsData.orderStatus == '5'
|
|
"
|
|
class="button-bottoms"
|
|
@click="refund()"
|
|
>
|
|
退货/退款
|
|
</div>
|
|
<div
|
|
v-if="detailsData.orderStatus == '1'"
|
|
class="button-bottoms"
|
|
@click="doCancel"
|
|
>
|
|
取消订单
|
|
</div> -->
|
|
<!-- <div class="button-bottoms">打印订单</div> -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script setup>
|
|
import { ref, reactive, computed, onMounted, onBeforeUnmount } from "vue";
|
|
import {
|
|
createLogisticOrder,
|
|
orderDetails,
|
|
refund,
|
|
} from "../../api/order/list";
|
|
import { useRoute, useRouter } from "vue-router";
|
|
import { watch } from "vue";
|
|
const route = useRoute();
|
|
const router = useRouter();
|
|
const tableData = ref([]);
|
|
const detailsData = ref({});
|
|
const dialogVisible = ref(false);
|
|
const refundPrice = ref(null);
|
|
const rejectReason = ref("");
|
|
const refundState = ref(1);
|
|
|
|
watch(
|
|
() => route.query.data,
|
|
(newSearch) => {
|
|
if (route.query.data) {
|
|
console.log("有新值");
|
|
|
|
getOrderDetails();
|
|
}
|
|
}
|
|
);
|
|
|
|
onMounted(() => {
|
|
// console.log(JSON.parse(route.query.data));
|
|
// tableData.value = JSON.parse(route.query.data).orderItemInfos;
|
|
getOrderDetails();
|
|
});
|
|
|
|
const getOrderDetails = async () => {
|
|
let response = await orderDetails({ id: route.query.data });
|
|
if (response.code == 200) {
|
|
tableData.value = response.data.records[0].orderItemInfos;
|
|
detailsData.value = response.data.records[0];
|
|
// tableTotal.value = response.data.total;
|
|
}
|
|
};
|
|
|
|
const inputData = reactive([
|
|
{
|
|
content: "",
|
|
},
|
|
]);
|
|
|
|
let list = ref([]);
|
|
|
|
const options = [
|
|
{
|
|
label: "申通快递",
|
|
value: "shentong",
|
|
},
|
|
{
|
|
label: "韵达快递",
|
|
value: "yunda",
|
|
},
|
|
{
|
|
label: "京东快递",
|
|
value: "jd",
|
|
},
|
|
];
|
|
let optionsValue = ref("申通快递");
|
|
|
|
const column = ref([
|
|
{ prop: "goodId", label: "ID", width: "150" },
|
|
{
|
|
prop: "productImage",
|
|
label: "商品图片",
|
|
width: "150",
|
|
},
|
|
{ prop: "productName", label: "商品名称", width: "150" },
|
|
{ prop: "goodPrice", label: "商品单价", width: "150" },
|
|
{ prop: "salesVolume", label: "购买数量", width: "150" },
|
|
{ prop: "pageView", label: "订单总价", width: "150" },
|
|
{ prop: "stock", label: "子订单数量", width: "150" },
|
|
{ prop: "isListed", label: "状态", width: "150" },
|
|
{ prop: "action", label: "操作", slotName: "action" },
|
|
]);
|
|
|
|
const addInput = () => {
|
|
inputData.push({
|
|
content: "",
|
|
});
|
|
};
|
|
|
|
const deleteList = (index) => {
|
|
inputData.splice(index, 1);
|
|
};
|
|
|
|
const agree = () => {
|
|
refundState.value = "1";
|
|
dialogVisible.value = true;
|
|
};
|
|
|
|
const refuse = () => {
|
|
refundState.value = "2";
|
|
dialogVisible.value = true;
|
|
};
|
|
|
|
const submit = () => {
|
|
refund(
|
|
refundState.value == "1"
|
|
? {
|
|
id: detailsData.value.id,
|
|
approveStatus: refundState.value,
|
|
refundAmount: refundPrice.value,
|
|
}
|
|
: {
|
|
id: detailsData.value.id,
|
|
approveStatus: refundState.value,
|
|
refuseReason: rejectReason.value,
|
|
}
|
|
).then((res) => {
|
|
dialogVisible.value = false;
|
|
getOrderDetails();
|
|
});
|
|
};
|
|
|
|
const send = async () => {};
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.order-list-warp {
|
|
margin-top: 20px;
|
|
padding: 10px 20px;
|
|
background-color: #fff;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
width: 100%;
|
|
.order-list-warp-left {
|
|
width: 50%;
|
|
height: 60vh;
|
|
.order-list-warp-left-title {
|
|
margin-top: 20px;
|
|
font-size: 18px;
|
|
font-weight: bold;
|
|
text-align: left;
|
|
}
|
|
.order-list-warp-left-goods {
|
|
margin-top: 20px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
.order-list-warp-left-goods-list {
|
|
display: flex;
|
|
.order-list-warp-left-goods-list-info {
|
|
margin-left: 10px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
height: 100px;
|
|
.order-list-warp-left-goods-list-info-title {
|
|
text-align: left;
|
|
width: 300px;
|
|
font-size: 15px;
|
|
}
|
|
.order-list-warp-left-goods-list-info-info {
|
|
margin-top: 10px;
|
|
text-align: left;
|
|
width: 300px;
|
|
font-size: 12px;
|
|
color: #999999;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.order-list-warp-left-address {
|
|
font-size: 15px;
|
|
text-align: start;
|
|
margin-left: 15px;
|
|
}
|
|
}
|
|
.order-list-warp-right {
|
|
width: 40%;
|
|
height: 60vh;
|
|
.order-list-warp-right-list {
|
|
margin-top: 20px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
div {
|
|
font-size: 14px;
|
|
color: #999999;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.button-bottom {
|
|
text-align: center;
|
|
cursor: pointer;
|
|
width: 100px;
|
|
border-radius: 10px;
|
|
height: 40px;
|
|
color: #fff;
|
|
line-height: 40px;
|
|
font-size: 15px;
|
|
font-weight: bold;
|
|
background-color: #409eff;
|
|
}
|
|
.button-bottoms {
|
|
text-align: center;
|
|
cursor: pointer;
|
|
margin-left: 20px;
|
|
width: 100px;
|
|
border-radius: 10px;
|
|
height: 40px;
|
|
color: #000000;
|
|
line-height: 40px;
|
|
font-size: 15px;
|
|
background-color: #ffffff;
|
|
border: 1px solid #707070;
|
|
}
|
|
.select-send {
|
|
padding: 5px 10px;
|
|
margin-top: 10px;
|
|
width: 100%;
|
|
background-color: #fff;
|
|
}
|
|
.tree-goods-subOrder-image {
|
|
width: 135px;
|
|
height: 60px;
|
|
}
|
|
.table-cont {
|
|
background-color: #f5f5f5 !important;
|
|
}
|
|
.sendGoods {
|
|
margin-top: 10px;
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
background-color: #fff;
|
|
padding: 10px 10px 30px 10px;
|
|
}
|
|
.logistics {
|
|
margin-top: 20px;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.address {
|
|
width: 100%;
|
|
background-color: #fff;
|
|
font-size: 15px;
|
|
color: #000000;
|
|
margin: 20px 0px;
|
|
padding: 20px 10px;
|
|
}
|
|
.send-button {
|
|
text-align: center;
|
|
width: 60px;
|
|
height: 25px;
|
|
line-height: 25px;
|
|
border-radius: 5px;
|
|
font-size: 15px;
|
|
color: #fff;
|
|
background-color: #409eff;
|
|
cursor: pointer;
|
|
}
|
|
.tree-goods {
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
margin-left: 300px;
|
|
align-items: center;
|
|
.sendGoods {
|
|
margin-left: 15px;
|
|
padding: 5px 10px;
|
|
background-color: #409eff;
|
|
color: #fff;
|
|
border-radius: 5px;
|
|
cursor: pointer;
|
|
}
|
|
.tree-goods-subOrder {
|
|
// display: flex;
|
|
// width: 1510px;
|
|
height: 60px;
|
|
.tree-goods-subOrder-list {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
.tree-goods-subOrder-image {
|
|
width: 135px;
|
|
height: 60px;
|
|
}
|
|
.tree-goods-subOrder-name {
|
|
width: 150px;
|
|
height: 60px;
|
|
line-height: 60px;
|
|
padding: 0 15px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.table-toolbar {
|
|
width: 300px;
|
|
height: 50px;
|
|
position: absolute;
|
|
right: 0;
|
|
top: 0;
|
|
display: flex;
|
|
justify-content: end;
|
|
padding: 14px 16px 0 0;
|
|
}
|
|
</style>
|