|
@@ -1,6 +1,6 @@
|
|
<template>
|
|
<template>
|
|
<el-container class="order-detail">
|
|
<el-container class="order-detail">
|
|
- <el-main>
|
|
|
|
|
|
+ <el-main v-loading="loading" element-loading-text="加载中...">
|
|
<!-- 订单轨迹 -->
|
|
<!-- 订单轨迹 -->
|
|
<div class="order-track sa-m-b-46">
|
|
<div class="order-track sa-m-b-46">
|
|
<h3 class="sa-m-b-20">订单轨迹</h3>
|
|
<h3 class="sa-m-b-20">订单轨迹</h3>
|
|
@@ -75,7 +75,7 @@
|
|
</el-col>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-col :span="6">
|
|
<div class="info-item">
|
|
<div class="info-item">
|
|
- <span class="label">用户昵称:</span>
|
|
|
|
|
|
+ <span class="label">用户名:</span>
|
|
<span class="value">{{ state.orderDetail.realName || '--' }}</span>
|
|
<span class="value">{{ state.orderDetail.realName || '--' }}</span>
|
|
</div>
|
|
</div>
|
|
</el-col>
|
|
</el-col>
|
|
@@ -155,26 +155,12 @@
|
|
|
|
|
|
<!-- 操作按钮 -->
|
|
<!-- 操作按钮 -->
|
|
<div class="action-buttons sa-m-b-26">
|
|
<div class="action-buttons sa-m-b-26">
|
|
- <template v-if="state.orderDetail.btns">
|
|
|
|
- <el-button
|
|
|
|
- v-if="state.orderDetail.btns.includes('send')"
|
|
|
|
- type="primary"
|
|
|
|
- @click="onOpenDispatch"
|
|
|
|
- >立即发货</el-button
|
|
|
|
- >
|
|
|
|
- <el-button v-if="state.orderDetail.btns.includes('refund')" @click="onOpenRefund"
|
|
|
|
- >全部退款</el-button
|
|
|
|
- >
|
|
|
|
- <el-button v-if="state.orderDetail.btns.includes('contact_user')" @click="onContactUser"
|
|
|
|
- >联系用户</el-button
|
|
|
|
- >
|
|
|
|
- <el-button v-if="state.orderDetail.btns.includes('export_order')" @click="onExportOrder"
|
|
|
|
- >导出订单</el-button
|
|
|
|
- >
|
|
|
|
- <el-button v-if="state.orderDetail.btns.includes('close_order')" @click="onCloseOrder"
|
|
|
|
- >关闭订单</el-button
|
|
|
|
- >
|
|
|
|
- </template>
|
|
|
|
|
|
+ <!-- 取消订单按钮 - 只在待付款状态显示 -->
|
|
|
|
+ <el-button v-if="state.orderDetail.paid === 0" type="warning" plain @click="onCancelOrder"
|
|
|
|
+ >取消订单</el-button
|
|
|
|
+ >
|
|
|
|
+ <!-- 全部退款按钮 - 固定显示 -->
|
|
|
|
+ <el-button type="danger" plain @click="onRefund">全部退款</el-button>
|
|
</div>
|
|
</div>
|
|
<!-- 商品信息 -->
|
|
<!-- 商品信息 -->
|
|
<div class="goods-content sa-m-b-16">
|
|
<div class="goods-content sa-m-b-16">
|
|
@@ -228,33 +214,37 @@
|
|
>拼团信息({{ state.pinkList[0]?.people || '未知' }}人团)</div
|
|
>拼团信息({{ state.pinkList[0]?.people || '未知' }}人团)</div
|
|
>
|
|
>
|
|
<el-table class="sa-table" :data="state.pinkList" stripe border>
|
|
<el-table class="sa-table" :data="state.pinkList" stripe border>
|
|
- <el-table-column label="昵称" min-width="120" align="center">
|
|
|
|
|
|
+ <el-table-column label="用户名" min-width="120" align="center">
|
|
<template #default="{ row }">
|
|
<template #default="{ row }">
|
|
<el-link type="primary" @click="openUserDetail(row.uid)">
|
|
<el-link type="primary" @click="openUserDetail(row.uid)">
|
|
- {{ row.nickname || '--' }}
|
|
|
|
|
|
+ {{ row.name || '--' }}
|
|
</el-link>
|
|
</el-link>
|
|
</template>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table-column>
|
|
<el-table-column label="手机号" min-width="150" align="center">
|
|
<el-table-column label="手机号" min-width="150" align="center">
|
|
<template #default="{ row }">
|
|
<template #default="{ row }">
|
|
- {{ getUserPhone(row.uid) }}
|
|
|
|
|
|
+ {{ row.userPhone || '--' }}
|
|
</template>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table-column>
|
|
<el-table-column label="参团订单号" min-width="180" align="center">
|
|
<el-table-column label="参团订单号" min-width="180" align="center">
|
|
<template #default="{ row }">
|
|
<template #default="{ row }">
|
|
- <el-link type="primary" @click="openOrderDetail(row.orderId)">
|
|
|
|
|
|
+ <el-link type="primary" @click="openOrderDetail(row.orderIdKey)">
|
|
{{ row.orderId || '--' }}
|
|
{{ row.orderId || '--' }}
|
|
</el-link>
|
|
</el-link>
|
|
</template>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table-column>
|
|
- <el-table-column label="参团时间" prop="addTime" min-width="160" align="center" />
|
|
|
|
|
|
+ <el-table-column label="参团时间" min-width="160" align="center">
|
|
|
|
+ <template #default="{ row }">
|
|
|
|
+ {{ row.createTime || '--' }}
|
|
|
|
+ </template>
|
|
|
|
+ </el-table-column>
|
|
<el-table-column label="支付时间" min-width="160" align="center">
|
|
<el-table-column label="支付时间" min-width="160" align="center">
|
|
<template #default="{ row }">
|
|
<template #default="{ row }">
|
|
- {{ getPayTime(row.orderId) }}
|
|
|
|
|
|
+ {{ row.payTime || '--' }}
|
|
</template>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table-column>
|
|
<el-table-column label="奖励佣金" min-width="120" align="center">
|
|
<el-table-column label="奖励佣金" min-width="120" align="center">
|
|
- <template #default="{ row }"> ৳{{ getBrokerage(row.orderId) }} </template>
|
|
|
|
|
|
+ <template #default="{ row }"> ৳{{ row.commission || 0 }} </template>
|
|
</el-table-column>
|
|
</el-table-column>
|
|
</el-table>
|
|
</el-table>
|
|
</div>
|
|
</div>
|
|
@@ -262,8 +252,8 @@
|
|
</el-container>
|
|
</el-container>
|
|
</template>
|
|
</template>
|
|
<script setup>
|
|
<script setup>
|
|
- import { onMounted, reactive, computed } from 'vue';
|
|
|
|
- import { ElMessage } from 'element-plus';
|
|
|
|
|
|
+ import { onMounted, reactive, ref, computed } from 'vue';
|
|
|
|
+ import { ElMessage, ElMessageBox } from 'element-plus';
|
|
import {
|
|
import {
|
|
api,
|
|
api,
|
|
getPayStatusInfo,
|
|
getPayStatusInfo,
|
|
@@ -287,6 +277,9 @@
|
|
pinkList: [], // 拼团信息列表
|
|
pinkList: [], // 拼团信息列表
|
|
});
|
|
});
|
|
|
|
|
|
|
|
+ // loading状态
|
|
|
|
+ const loading = ref(false);
|
|
|
|
+
|
|
// 订单步骤配置
|
|
// 订单步骤配置
|
|
const stepConfig = [
|
|
const stepConfig = [
|
|
{ key: 'create_order', title: '提交订单', waitText: '未提交' },
|
|
{ key: 'create_order', title: '提交订单', waitText: '未提交' },
|
|
@@ -332,11 +325,19 @@
|
|
|
|
|
|
// 获取订单详情
|
|
// 获取订单详情
|
|
async function getOrderDetail() {
|
|
async function getOrderDetail() {
|
|
- const { code, data } = await api.order.detail(props.modal.params.id);
|
|
|
|
- if (code == 200) {
|
|
|
|
- state.orderDetail = data;
|
|
|
|
- // 获取拼团信息
|
|
|
|
- await getPinkList(data.orderId);
|
|
|
|
|
|
+ try {
|
|
|
|
+ loading.value = true;
|
|
|
|
+ const { code, data } = await api.order.detail(props.modal.params.id);
|
|
|
|
+ if (code == 200) {
|
|
|
|
+ state.orderDetail = data;
|
|
|
|
+ // 获取拼团信息
|
|
|
|
+ await getPinkList(data.id);
|
|
|
|
+ }
|
|
|
|
+ } catch (error) {
|
|
|
|
+ console.error('获取订单详情失败:', error);
|
|
|
|
+ ElMessage.error('获取订单详情失败');
|
|
|
|
+ } finally {
|
|
|
|
+ loading.value = false;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
@@ -346,7 +347,7 @@
|
|
try {
|
|
try {
|
|
const { code, data } = await api.order.getPinkList(orderId);
|
|
const { code, data } = await api.order.getPinkList(orderId);
|
|
if (code == 200) {
|
|
if (code == 200) {
|
|
- state.pinkList = data.list || [];
|
|
|
|
|
|
+ state.pinkList = data || [];
|
|
}
|
|
}
|
|
} catch (error) {
|
|
} catch (error) {
|
|
console.error('获取拼团信息失败:', error);
|
|
console.error('获取拼团信息失败:', error);
|
|
@@ -411,28 +412,11 @@
|
|
if (addressInfo.city) parts.push(addressInfo.city);
|
|
if (addressInfo.city) parts.push(addressInfo.city);
|
|
if (addressInfo.district) parts.push(addressInfo.district);
|
|
if (addressInfo.district) parts.push(addressInfo.district);
|
|
if (addressInfo.detail) parts.push(addressInfo.detail);
|
|
if (addressInfo.detail) parts.push(addressInfo.detail);
|
|
|
|
+ if (addressInfo.postCode) parts.push(addressInfo.postCode);
|
|
|
|
|
|
return parts.length > 0 ? parts.join('') : '--';
|
|
return parts.length > 0 ? parts.join('') : '--';
|
|
}
|
|
}
|
|
|
|
|
|
- // 获取用户手机号(这里需要根据实际情况调用用户接口或从其他地方获取)
|
|
|
|
- function getUserPhone(uid) {
|
|
|
|
- // TODO: 根据用户ID获取手机号,这里先返回占位符
|
|
|
|
- return '--';
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- // 获取支付时间(这里需要根据订单ID获取支付时间)
|
|
|
|
- function getPayTime(orderId) {
|
|
|
|
- // TODO: 根据订单ID获取支付时间,这里先返回占位符
|
|
|
|
- return '--';
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- // 获取奖励佣金(这里需要根据订单ID获取佣金信息)
|
|
|
|
- function getBrokerage(orderId) {
|
|
|
|
- // TODO: 根据订单ID获取佣金信息,这里先返回占位符
|
|
|
|
- return '0';
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
// 打开用户详情
|
|
// 打开用户详情
|
|
function openUserDetail(uid) {
|
|
function openUserDetail(uid) {
|
|
if (!uid) {
|
|
if (!uid) {
|
|
@@ -454,6 +438,44 @@
|
|
);
|
|
);
|
|
}
|
|
}
|
|
|
|
|
|
|
|
+ // 取消订单
|
|
|
|
+ async function onCancelOrder() {
|
|
|
|
+ try {
|
|
|
|
+ await ElMessageBox.confirm('确定要取消这个订单吗?', '提示', {
|
|
|
|
+ confirmButtonText: '确定',
|
|
|
|
+ cancelButtonText: '取消',
|
|
|
|
+ type: 'warning',
|
|
|
|
+ });
|
|
|
|
+
|
|
|
|
+ const { code, message } = await api.order.cancel(String(state.orderDetail.id));
|
|
|
|
+ if (code == 200) {
|
|
|
|
+ ElMessage.success('订单取消成功');
|
|
|
|
+ getOrderDetail(); // 刷新订单详情
|
|
|
|
+ } else {
|
|
|
|
+ ElMessage.error(message || '取消订单失败');
|
|
|
|
+ }
|
|
|
|
+ } catch (error) {}
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ // 全部退款
|
|
|
|
+ async function onRefund() {
|
|
|
|
+ try {
|
|
|
|
+ await ElMessageBox.confirm('确定要对这个订单进行全部退款吗?', '提示', {
|
|
|
|
+ confirmButtonText: '确定',
|
|
|
|
+ cancelButtonText: '取消',
|
|
|
|
+ type: 'warning',
|
|
|
|
+ });
|
|
|
|
+
|
|
|
|
+ const { code, message } = await api.order.refund(String(state.orderDetail.id));
|
|
|
|
+ if (code == 200) {
|
|
|
|
+ ElMessage.success('退款提交成功');
|
|
|
|
+ getOrderDetail(); // 刷新订单详情
|
|
|
|
+ } else {
|
|
|
|
+ ElMessage.error(message || '退款申请失败');
|
|
|
|
+ }
|
|
|
|
+ } catch (error) {}
|
|
|
|
+ }
|
|
|
|
+
|
|
// 打开订单详情
|
|
// 打开订单详情
|
|
function openOrderDetail(orderId) {
|
|
function openOrderDetail(orderId) {
|
|
if (!orderId) {
|
|
if (!orderId) {
|