420 lines
14 KiB
Vue
420 lines
14 KiB
Vue
<template>
|
||
<div>
|
||
<el-dialog v-model="refundVs" title="退货/退款" width="800" :before-close="handleClose">
|
||
<div class="refundVs-title">退货/退款原因：</div>
|
||
<el-select v-model="optionsValue" placeholder="Select" size="large" style="width: 765px" @change="change">
|
||
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
|
||
</el-select>
|
||
<div class="refundVs-title" style="margin-top: 15px">退货/退款描述：</div>
|
||
<el-input v-model="input" type="textarea" size="large" style="width: 765px" placeholder="退货/退款描述" clearable />
|
||
<template #footer>
|
||
<div class="dialog-footer">
|
||
<el-button @click="refundVs = false">取消</el-button>
|
||
<el-button type="primary" @click="upRefund()"> 确认 </el-button>
|
||
</div>
|
||
</template>
|
||
</el-dialog>
|
||
<el-dialog v-model="dialogVisible" title="修改地址" width="800" :before-close="handleClose">
|
||
<el-radio-group v-model="radio1" @change="changeAddress">
|
||
<el-radio v-for="(item, index) in data" :key="item.id" :value="item.id"
|
||
><div style="font-size: 15px">
|
||
联系人:{{ item.receiverName }}, 联系人手机号:{{ item.receiverPhone }}, 地址:{{ item.postArea }} {{ item.postAddress }}
|
||
</div></el-radio
|
||
>
|
||
</el-radio-group>
|
||
<template #footer>
|
||
<div class="dialog-footer">
|
||
<el-button @click="dialogVisible = false">取消</el-button>
|
||
<el-button type="primary" @click="upAddress()"> 确认 </el-button>
|
||
</div>
|
||
</template>
|
||
</el-dialog>
|
||
<common current-name="order">
|
||
<template #main>
|
||
<div class="user-orders-warp">
|
||
<userHeader :title="'订单详情'"></userHeader>
|
||
<div class="user-orders-content">
|
||
<div class="order-tab">
|
||
<div class="order-tab-title">
|
||
<el-icon style="cursor: pointer" size="30" @click="back()"><ArrowLeftBold /></el-icon>
|
||
<span style="font-weight: bold; color: #25bf82; font-size: 20px">
|
||
{{
|
||
JSON.parse(route.query.page).orderStatus == '1'
|
||
? '待支付'
|
||
: JSON.parse(route.query.page).orderStatus == '2' || JSON.parse(route.query.page).orderStatus == '3'
|
||
? '待发货'
|
||
: JSON.parse(route.query.page).orderStatus == '4' || JSON.parse(route.query.page).orderStatus == '5'
|
||
? '已发货'
|
||
: JSON.parse(route.query.page).orderStatus == '6'
|
||
? '已收货'
|
||
: JSON.parse(route.query.page).orderStatus == '7'
|
||
? '已取消'
|
||
: JSON.parse(route.query.page).orderStatus == '8'
|
||
? '已完成'
|
||
: ''
|
||
}}</span
|
||
>
|
||
<span v-if="JSON.parse(route.query.page).orderStatus == '1'" style="font-size: 15px">在71小时59分59秒之前发货</span>
|
||
</div>
|
||
</div>
|
||
|
||
<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">￥{{ item.subtotalAmount }}</div>
|
||
<div style="font-size: 15px; color: #999999; width: 50px; 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">订单详情</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 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.totalAmount" 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: start">
|
||
<div v-if="detailsData.orderStatus == '1'" class="button-bottom" @click="doPay(1)">立即付款</div>
|
||
<div
|
||
v-if="
|
||
detailsData.orderStatus == '2' || detailsData.orderStatus == '3' || detailsData.orderStatus == '4' || detailsData.orderStatus == '5'
|
||
"
|
||
class="button-bottom"
|
||
@click="confirmReceipt()"
|
||
>
|
||
确认收货
|
||
</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>
|
||
</template>
|
||
</common>
|
||
</div>
|
||
</template>
|
||
<script setup>
|
||
import { userPostAddress, upOrderInfoList, confirmOrder } from '../../apis/user';
|
||
import common from './components/common.vue';
|
||
import { ref, reactive, computed, onMounted } from 'vue';
|
||
import userHeader from './components/userHeader.vue';
|
||
import { useRoute, useRouter } from 'vue-router';
|
||
import { cancelOrder, updateOrderReceiveAddress, orderInfoGetById, refundApprove } from '../../apis/user';
|
||
import { useGetUserOrder } from '../../store/modules/userOrder';
|
||
let store = useGetUserOrder();
|
||
let dialogVisible = ref(false);
|
||
let refundVs = ref(false);
|
||
const router = useRouter();
|
||
const route = useRoute();
|
||
let addressId = ref(0);
|
||
let data = ref([]);
|
||
let detailsData = ref([]);
|
||
let radio1 = ref(0);
|
||
let input = ref('');
|
||
let page = reactive({
|
||
orderStatus: 1,
|
||
current: 1,
|
||
size: 10,
|
||
});
|
||
let optionsValue = ref('不想要了');
|
||
|
||
const options = [
|
||
{
|
||
value: '不想要了',
|
||
label: '不想要了',
|
||
},
|
||
{
|
||
value: '与卖家协商一致',
|
||
label: '与卖家协商一致',
|
||
},
|
||
{
|
||
value: '货物损坏',
|
||
label: '货物损坏',
|
||
},
|
||
{
|
||
value: '实物与宣传不符',
|
||
label: '实物与宣传不符',
|
||
},
|
||
];
|
||
|
||
onMounted(() => {
|
||
getDetails();
|
||
getUserAddressList();
|
||
});
|
||
|
||
const confirmReceipt = () => {
|
||
getDetails();
|
||
};
|
||
|
||
const change = (value) => {
|
||
console.log(value);
|
||
optionsValue.value = value;
|
||
};
|
||
|
||
const getDetails = () => {
|
||
orderInfoGetById({ id: route.query.id }).then((res) => {
|
||
detailsData.value = res.data.records[0];
|
||
});
|
||
};
|
||
|
||
const changeAddress = (value) => {
|
||
addressId.value = value;
|
||
};
|
||
|
||
const doCancel = () => {
|
||
cancelOrder({ id: route.query.id }).then((res) => {
|
||
store.getData(JSON.parse(route.query.page)).then((res) => {
|
||
router.back();
|
||
});
|
||
});
|
||
};
|
||
|
||
const refund = () => {
|
||
refundVs.value = true;
|
||
};
|
||
|
||
const upRefund = () => {
|
||
refundApprove({
|
||
orderId: 0,
|
||
refundCategory: '1',
|
||
refundType: 1,
|
||
refundReason: input,
|
||
}).then((res) => {
|
||
getDetails();
|
||
refundVs.value = false;
|
||
});
|
||
};
|
||
|
||
const upAddress = () => {
|
||
updateOrderReceiveAddress({ orderId: route.query.id, addressId: addressId.value }).then((res) => {
|
||
getDetails();
|
||
dialogVisible.value = false;
|
||
});
|
||
};
|
||
|
||
const reAddress = () => {
|
||
dialogVisible.value = true;
|
||
};
|
||
|
||
const doPay = () => {
|
||
router.push({
|
||
path: '/sub-operation-service/orderSuccess',
|
||
query: { id: route.query.id },
|
||
});
|
||
};
|
||
|
||
const getUserAddressList = () => {
|
||
userPostAddress({ size: 100, current: 1 }).then((res) => {
|
||
console.log(res.data.records);
|
||
data.value = res.data.records;
|
||
});
|
||
};
|
||
|
||
const back = () => {
|
||
router.back();
|
||
};
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
.refundVs-title {
|
||
font-size: 15px;
|
||
color: #999999;
|
||
margin-bottom: 10px;
|
||
}
|
||
.user-orders-warp {
|
||
width: 100%;
|
||
.user-orders-content {
|
||
margin-top: 16px;
|
||
padding: 16px;
|
||
width: 100%;
|
||
height: calc(100vh - 136px);
|
||
border-radius: 16px;
|
||
background: $color-fff;
|
||
.order-list-warp {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
width: 100%;
|
||
.order-list-warp-left {
|
||
width: 55%;
|
||
height: 70vh;
|
||
.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: 70vh;
|
||
.order-list-warp-right-list {
|
||
margin-top: 20px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
div {
|
||
font-size: 14px;
|
||
color: #999999;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.order-tab {
|
||
width: 100%;
|
||
::v-deep() {
|
||
.el-tabs__nav-wrap::after {
|
||
background: transparent !important;
|
||
}
|
||
.el-tabs__item {
|
||
font-size: 20px !important;
|
||
}
|
||
.el-tabs__active-bar {
|
||
height: 5px !important;
|
||
border-radius: 4px;
|
||
}
|
||
.el-descriptions__label,
|
||
.el-descriptions__content {
|
||
font-size: 16px !important;
|
||
}
|
||
.cell-item {
|
||
display: inline-flex;
|
||
}
|
||
.el-descriptions__label {
|
||
color: $color-999;
|
||
}
|
||
.el-descriptions__content {
|
||
color: $color-333;
|
||
}
|
||
}
|
||
.order-tab-title {
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
span {
|
||
margin-left: 10px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.button-bottom {
|
||
cursor: pointer;
|
||
width: 100px;
|
||
border-radius: 10px;
|
||
height: 40px;
|
||
color: #fff;
|
||
line-height: 40px;
|
||
font-size: 15px;
|
||
font-weight: bold;
|
||
background-color: #25bf82;
|
||
}
|
||
.button-bottoms {
|
||
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;
|
||
}
|
||
</style>
|