|
|
@@ -5,13 +5,8 @@
|
|
|
<div class="order-track sa-m-b-46">
|
|
|
<h3 class="sa-m-b-20">订单轨迹</h3>
|
|
|
<el-steps :active="getActiveStep()" align-center>
|
|
|
- <el-step
|
|
|
- v-for="(step, index) in orderSteps"
|
|
|
- :key="index"
|
|
|
- :title="step.title"
|
|
|
- :description="step.description"
|
|
|
- :status="step.status"
|
|
|
- />
|
|
|
+ <el-step v-for="(step, index) in orderSteps" :key="index" :title="step.title" :description="step.description"
|
|
|
+ :status="step.status" />
|
|
|
</el-steps>
|
|
|
</div>
|
|
|
|
|
|
@@ -62,7 +57,7 @@
|
|
|
<el-col :span="6">
|
|
|
<div class="info-item">
|
|
|
<span class="label">用户名：</span>
|
|
|
- <span class="value">{{ state.orderDetail.realName || '--' }}</span>
|
|
|
+ <span class="value">{{ state.realName || '--' }}</span>
|
|
|
</div>
|
|
|
</el-col>
|
|
|
<el-col :span="6">
|
|
|
@@ -119,7 +114,7 @@
|
|
|
>取消</el-button
|
|
|
>
|
|
|
</template>
|
|
|
- <template v-if="!memoForm.flag">
|
|
|
+<template v-if="!memoForm.flag">
|
|
|
<div v-if="state.orderDetail.memo" class="sa-m-r-12">
|
|
|
{{ state.orderDetail.memo }}
|
|
|
</div>
|
|
|
@@ -131,26 +126,25 @@
|
|
|
>{{ state.orderDetail.memo ? '修改' : '添加' }}备注</el-button
|
|
|
>
|
|
|
</template>
|
|
|
- </div>
|
|
|
- <div class="remark sa-m-t-12">
|
|
|
- <span class="label">买家留言：</span>
|
|
|
- <span class="value">{{ state.orderDetail.remark || '暂无留言' }}</span>
|
|
|
- </div>
|
|
|
- </div> -->
|
|
|
+</div>
|
|
|
+<div class="remark sa-m-t-12">
|
|
|
+ <span class="label">买家留言：</span>
|
|
|
+ <span class="value">{{ state.orderDetail.remark || '暂无留言' }}</span>
|
|
|
+</div>
|
|
|
+</div> -->
|
|
|
|
|
|
<!-- 操作按钮 -->
|
|
|
<div class="action-buttons sa-m-b-26">
|
|
|
<!-- 取消订单按钮 - 只在待支付状态显示 -->
|
|
|
- <el-button v-if="state.orderDetail.status === 1" type="warning" plain @click="onCancelOrder"
|
|
|
- >取消订单</el-button
|
|
|
- >
|
|
|
+ <el-button v-if="state.orderDetail.status === 1" type="warning" plain @click="onCancelOrder">取消订单</el-button>
|
|
|
<!-- 立即发货按钮 - 待发货状态显示 -->
|
|
|
<el-button type="primary" @click="onDispatch">立即发货测试</el-button>
|
|
|
- <el-button type="primary" @click="onDispatch" v-if="state.orderDetail.status === 5"
|
|
|
- >立即发货</el-button
|
|
|
- >
|
|
|
- <!-- 全部退款按钮 - 在已支付、待发货、待收货状态显示 -->
|
|
|
- <el-button type="danger" plain @click="onRefund">全部退款</el-button>
|
|
|
+ <el-button type="primary" @click="onDispatch" v-if="state.orderDetail.status === 5">立即发货</el-button>
|
|
|
+ <!-- 全部退款按钮 - 订单状态已支付且拼团状态未成团时显示 -->
|
|
|
+ <el-button v-if="state.orderDetail.status === 3 && state.orderDetail.pinkStatus === 1" type="danger" plain
|
|
|
+ @click="onRefund">
|
|
|
+ 退款
|
|
|
+ </el-button>
|
|
|
</div>
|
|
|
<!-- 商品信息 -->
|
|
|
<div class="goods-content sa-m-b-16">
|
|
|
@@ -158,11 +152,7 @@
|
|
|
<el-table class="sa-table" :data="state.orderDetail.orderInfoVO" stripe border>
|
|
|
<el-table-column label="商品图片" width="100" align="center">
|
|
|
<template #default="{ row }">
|
|
|
- <el-image
|
|
|
- :src="row.image"
|
|
|
- style="width: 60px; height: 60px; border-radius: 4px"
|
|
|
- fit="cover"
|
|
|
- />
|
|
|
+ <el-image :src="row.image" style="width: 60px; height: 60px; border-radius: 4px" fit="cover" />
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
<el-table-column label="商品名称" prop="productName" />
|
|
|
@@ -200,9 +190,7 @@
|
|
|
|
|
|
<!-- 拼团信息 -->
|
|
|
<div class="group-content" v-if="state.pinkList && state.pinkList.length > 0">
|
|
|
- <div class="sa-title sa-m-b-10"
|
|
|
- >拼团信息({{ state.pinkList[0]?.people || '未知' }}人团)</div
|
|
|
- >
|
|
|
+ <div class="sa-title sa-m-b-10">拼团信息({{ state.pinkList[0]?.people || '未知' }}人团)</div>
|
|
|
<el-table class="sa-table" :data="state.pinkList" stripe border>
|
|
|
<el-table-column label="用户名" min-width="120" align="center">
|
|
|
<template #default="{ row }">
|
|
|
@@ -242,445 +230,469 @@
|
|
|
</el-container>
|
|
|
</template>
|
|
|
<script setup>
|
|
|
- import { onMounted, reactive, ref, computed } from 'vue';
|
|
|
- import { ElMessage, ElMessageBox } from 'element-plus';
|
|
|
- import {
|
|
|
- api,
|
|
|
- getOrderStatusInfo,
|
|
|
- getPinkStatusInfo,
|
|
|
- getWinStatusInfo,
|
|
|
- getPayTypeText,
|
|
|
- } from '../order.service';
|
|
|
- import { useModal } from '@/sheep/hooks';
|
|
|
- import OrderDispatch from './dispatch.vue';
|
|
|
- import OrderRefund from './refund.vue';
|
|
|
- import UserDetail from '../../user/list/detail.vue';
|
|
|
- import OrderDetailC from './detail.vue';
|
|
|
-
|
|
|
- const emit = defineEmits(['modalCallBack']);
|
|
|
- const props = defineProps(['modal']);
|
|
|
-
|
|
|
- const state = reactive({
|
|
|
- orderDetail: {}, // 订单详情
|
|
|
- pinkList: [], // 拼团信息列表
|
|
|
- });
|
|
|
-
|
|
|
- // loading状态
|
|
|
- const loading = ref(false);
|
|
|
-
|
|
|
- // 订单步骤配置
|
|
|
- const stepConfig = [
|
|
|
- { key: 'create_order', title: '提交订单', waitText: '未提交' },
|
|
|
- { key: 'payment', title: '付款', waitText: '未支付' },
|
|
|
- { key: 'group_start', title: '开团', waitText: '未开团' },
|
|
|
- { key: 'platform_ship', title: '平台发货', waitText: '未发货' },
|
|
|
- { key: 'user_receive', title: '用户收货', waitText: '未收货' },
|
|
|
- ];
|
|
|
-
|
|
|
- // 计算订单步骤
|
|
|
- const orderSteps = computed(() => {
|
|
|
- const trackData = state.orderDetail.orderStatusVO || [];
|
|
|
- const steps = [];
|
|
|
-
|
|
|
- stepConfig.forEach((config, index) => {
|
|
|
- const trackItem = trackData[index];
|
|
|
-
|
|
|
- if (trackItem) {
|
|
|
- // 有对应的轨迹数据，显示为已完成
|
|
|
- steps.push({
|
|
|
- title: config.title,
|
|
|
- description: trackItem.createTime,
|
|
|
- status: 'finish',
|
|
|
- });
|
|
|
- } else {
|
|
|
- // 没有对应的轨迹数据，显示为等待状态
|
|
|
- steps.push({
|
|
|
- title: config.title,
|
|
|
- description: config.waitText,
|
|
|
- status: 'wait',
|
|
|
- });
|
|
|
- }
|
|
|
- });
|
|
|
-
|
|
|
- return steps;
|
|
|
- });
|
|
|
-
|
|
|
- // 备注表单
|
|
|
- const memoForm = reactive({
|
|
|
- flag: false,
|
|
|
- data: '',
|
|
|
+import { onMounted, reactive, ref, computed } from 'vue';
|
|
|
+import { ElMessage, ElMessageBox } from 'element-plus';
|
|
|
+import {
|
|
|
+ api,
|
|
|
+ getOrderStatusInfo,
|
|
|
+ getPinkStatusInfo,
|
|
|
+ getWinStatusInfo,
|
|
|
+ getPayTypeText,
|
|
|
+} from '../order.service';
|
|
|
+import { useModal } from '@/sheep/hooks';
|
|
|
+import OrderDispatch from './dispatch.vue';
|
|
|
+import OrderRefund from './refund.vue';
|
|
|
+import UserDetail from '../../user/list/detail.vue';
|
|
|
+import OrderDetailC from './detail.vue';
|
|
|
+
|
|
|
+const emit = defineEmits(['modalCallBack']);
|
|
|
+const props = defineProps(['modal']);
|
|
|
+
|
|
|
+const state = reactive({
|
|
|
+ orderDetail: {}, // 订单详情
|
|
|
+ pinkList: [], // 拼团信息列表
|
|
|
+});
|
|
|
+
|
|
|
+// loading状态
|
|
|
+const loading = ref(false);
|
|
|
+
|
|
|
+// 订单步骤配置
|
|
|
+const stepConfig = [
|
|
|
+ { key: 'create_order', title: '提交订单', waitText: '未提交' },
|
|
|
+ { key: 'payment', title: '付款', waitText: '未支付' },
|
|
|
+ { key: 'group_start', title: '开团', waitText: '未开团' },
|
|
|
+ { key: 'platform_ship', title: '平台发货', waitText: '未发货' },
|
|
|
+ { key: 'user_receive', title: '用户收货', waitText: '未收货' },
|
|
|
+];
|
|
|
+
|
|
|
+// 计算订单步骤
|
|
|
+const orderSteps = computed(() => {
|
|
|
+ const trackData = state.orderDetail.orderStatusVO || [];
|
|
|
+ const steps = [];
|
|
|
+
|
|
|
+ stepConfig.forEach((config, index) => {
|
|
|
+ const trackItem = trackData[index];
|
|
|
+
|
|
|
+ if (trackItem) {
|
|
|
+ // 有对应的轨迹数据，显示为已完成
|
|
|
+ steps.push({
|
|
|
+ title: config.title,
|
|
|
+ description: trackItem.createTime,
|
|
|
+ status: 'finish',
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ // 没有对应的轨迹数据，显示为等待状态
|
|
|
+ steps.push({
|
|
|
+ title: config.title,
|
|
|
+ description: config.waitText,
|
|
|
+ status: 'wait',
|
|
|
+ });
|
|
|
+ }
|
|
|
});
|
|
|
|
|
|
- // 获取订单详情
|
|
|
- async function getOrderDetail() {
|
|
|
- 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;
|
|
|
+ return steps;
|
|
|
+});
|
|
|
+
|
|
|
+// 备注表单
|
|
|
+const memoForm = reactive({
|
|
|
+ flag: false,
|
|
|
+ data: '',
|
|
|
+});
|
|
|
+
|
|
|
+// 获取订单详情
|
|
|
+async function getOrderDetail() {
|
|
|
+ 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;
|
|
|
}
|
|
|
-
|
|
|
- // 获取拼团信息
|
|
|
- async function getPinkList(orderId) {
|
|
|
- if (!orderId) return;
|
|
|
- try {
|
|
|
- const { code, data } = await api.order.getPinkList(orderId);
|
|
|
- if (code == 200) {
|
|
|
- state.pinkList = data || [];
|
|
|
- }
|
|
|
- } catch (error) {
|
|
|
- console.error('获取拼团信息失败:', error);
|
|
|
- state.pinkList = [];
|
|
|
+}
|
|
|
+
|
|
|
+// 获取拼团信息
|
|
|
+async function getPinkList(orderId) {
|
|
|
+ if (!orderId) return;
|
|
|
+ try {
|
|
|
+ const { code, data } = await api.order.getPinkList(orderId);
|
|
|
+ if (code == 200) {
|
|
|
+ state.pinkList = data || [];
|
|
|
}
|
|
|
+ } catch (error) {
|
|
|
+ console.error('获取拼团信息失败:', error);
|
|
|
+ state.pinkList = [];
|
|
|
}
|
|
|
-
|
|
|
- // 获取激活步骤
|
|
|
- function getActiveStep() {
|
|
|
- const trackData = state.orderDetail.orderStatusVO || [];
|
|
|
- // 返回已完成步骤的数量减1（因为 el-steps 的 active 是从0开始的索引）
|
|
|
- return Math.max(0, trackData.length - 1);
|
|
|
- }
|
|
|
-
|
|
|
- // 通用状态处理函数
|
|
|
- const getStatusText = (type, value) => {
|
|
|
- const statusMap = {
|
|
|
- order: getOrderStatusInfo,
|
|
|
- pink: getPinkStatusInfo,
|
|
|
- win: getWinStatusInfo,
|
|
|
- };
|
|
|
- return statusMap[type]?.(value)?.text || '未知';
|
|
|
+}
|
|
|
+
|
|
|
+// 获取激活步骤
|
|
|
+function getActiveStep() {
|
|
|
+ const trackData = state.orderDetail.orderStatusVO || [];
|
|
|
+ // 返回已完成步骤的数量减1（因为 el-steps 的 active 是从0开始的索引）
|
|
|
+ return Math.max(0, trackData.length - 1);
|
|
|
+}
|
|
|
+
|
|
|
+// 通用状态处理函数
|
|
|
+const getStatusText = (type, value) => {
|
|
|
+ const statusMap = {
|
|
|
+ order: getOrderStatusInfo,
|
|
|
+ pink: getPinkStatusInfo,
|
|
|
+ win: getWinStatusInfo,
|
|
|
};
|
|
|
-
|
|
|
- const getStatusType = (type, value) => {
|
|
|
- const statusMap = {
|
|
|
- order: getOrderStatusInfo,
|
|
|
- pink: getPinkStatusInfo,
|
|
|
- win: getWinStatusInfo,
|
|
|
- };
|
|
|
- return statusMap[type]?.(value)?.type || 'info';
|
|
|
+ return statusMap[type]?.(value)?.text || '未知';
|
|
|
+};
|
|
|
+
|
|
|
+const getStatusType = (type, value) => {
|
|
|
+ const statusMap = {
|
|
|
+ order: getOrderStatusInfo,
|
|
|
+ pink: getPinkStatusInfo,
|
|
|
+ win: getWinStatusInfo,
|
|
|
};
|
|
|
-
|
|
|
- // 拼接完整地址
|
|
|
- function getFullAddress(addressInfo) {
|
|
|
- if (!addressInfo) return '--';
|
|
|
-
|
|
|
- const parts = [];
|
|
|
- if (addressInfo.province) parts.push(addressInfo.province);
|
|
|
- if (addressInfo.city) parts.push(addressInfo.city);
|
|
|
- if (addressInfo.district) parts.push(addressInfo.district);
|
|
|
- if (addressInfo.detail) parts.push(addressInfo.detail);
|
|
|
- if (addressInfo.postCode) parts.push(addressInfo.postCode);
|
|
|
-
|
|
|
- return parts.length > 0 ? parts.join('') : '--';
|
|
|
+ return statusMap[type]?.(value)?.type || 'info';
|
|
|
+};
|
|
|
+
|
|
|
+// 拼接完整地址
|
|
|
+function getFullAddress(addressInfo) {
|
|
|
+ if (!addressInfo) return '--';
|
|
|
+
|
|
|
+ const parts = [];
|
|
|
+ if (addressInfo.province) parts.push(addressInfo.province);
|
|
|
+ if (addressInfo.city) parts.push(addressInfo.city);
|
|
|
+ if (addressInfo.district) parts.push(addressInfo.district);
|
|
|
+ if (addressInfo.detail) parts.push(addressInfo.detail);
|
|
|
+ if (addressInfo.postCode) parts.push(addressInfo.postCode);
|
|
|
+
|
|
|
+ return parts.length > 0 ? parts.join('') : '--';
|
|
|
+}
|
|
|
+
|
|
|
+// 打开用户详情
|
|
|
+function openUserDetail(uid) {
|
|
|
+ if (!uid) {
|
|
|
+ ElMessage.warning('用户ID不存在');
|
|
|
+ return;
|
|
|
}
|
|
|
|
|
|
- // 打开用户详情
|
|
|
- function openUserDetail(uid) {
|
|
|
- if (!uid) {
|
|
|
- ElMessage.warning('用户ID不存在');
|
|
|
- return;
|
|
|
- }
|
|
|
-
|
|
|
- useModal(
|
|
|
- UserDetail,
|
|
|
- {
|
|
|
- title: '用户详情',
|
|
|
- id: uid,
|
|
|
+ useModal(
|
|
|
+ UserDetail,
|
|
|
+ {
|
|
|
+ title: '用户详情',
|
|
|
+ id: uid,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ success: () => {
|
|
|
+ // 用户详情关闭后的回调，如果需要的话
|
|
|
},
|
|
|
- {
|
|
|
- success: () => {
|
|
|
- // 用户详情关闭后的回调，如果需要的话
|
|
|
- },
|
|
|
- },
|
|
|
- );
|
|
|
- }
|
|
|
-
|
|
|
- // 取消订单
|
|
|
- async function onCancelOrder() {
|
|
|
- try {
|
|
|
- await ElMessageBox.confirm('确定要取消这个订单吗？', '提示', {
|
|
|
- confirmButtonText: '确定',
|
|
|
- cancelButtonText: '取消',
|
|
|
- type: 'warning',
|
|
|
- });
|
|
|
+ },
|
|
|
+ );
|
|
|
+}
|
|
|
+
|
|
|
+// 取消订单
|
|
|
+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('订单取消成功');
|
|
|
+ const { code, message } = await api.order.cancel(String(state.orderDetail.id));
|
|
|
+ if (code == 200) {
|
|
|
+ ElMessage.success('订单取消成功');
|
|
|
+ getOrderDetail(); // 刷新订单详情
|
|
|
+ } else {
|
|
|
+ ElMessage.error(message || '取消订单失败');
|
|
|
+ }
|
|
|
+ } catch (error) { }
|
|
|
+}
|
|
|
+
|
|
|
+// 立即发货
|
|
|
+function onDispatch() {
|
|
|
+ useModal(
|
|
|
+ OrderDispatch,
|
|
|
+ {
|
|
|
+ title: '订单发货',
|
|
|
+ data: state.orderDetail,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ success: () => {
|
|
|
getOrderDetail(); // 刷新订单详情
|
|
|
- } else {
|
|
|
- ElMessage.error(message || '取消订单失败');
|
|
|
- }
|
|
|
- } catch (error) {}
|
|
|
- }
|
|
|
-
|
|
|
- // 立即发货
|
|
|
- function onDispatch() {
|
|
|
- useModal(
|
|
|
- OrderDispatch,
|
|
|
- {
|
|
|
- title: '订单发货',
|
|
|
- data: state.orderDetail,
|
|
|
- },
|
|
|
- {
|
|
|
- success: () => {
|
|
|
- getOrderDetail(); // 刷新订单详情
|
|
|
- },
|
|
|
},
|
|
|
- );
|
|
|
- }
|
|
|
-
|
|
|
- // 全部退款
|
|
|
- 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) {
|
|
|
- if (!orderId) {
|
|
|
- ElMessage.warning('订单ID不存在');
|
|
|
- return;
|
|
|
- }
|
|
|
+ },
|
|
|
+ );
|
|
|
+}
|
|
|
+
|
|
|
+// 全部退款
|
|
|
+async function onRefund() {
|
|
|
+ try {
|
|
|
+ await ElMessageBox.confirm('确定要对这个订单进行全部退款吗？', '提示', {
|
|
|
+ confirmButtonText: '确定',
|
|
|
+ cancelButtonText: '取消',
|
|
|
+ type: 'warning',
|
|
|
+ });
|
|
|
|
|
|
- // 如果是当前订单，不需要打开新窗口
|
|
|
- if (orderId === state.orderDetail.orderId) {
|
|
|
- ElMessage.info('这是当前订单');
|
|
|
- return;
|
|
|
+ const { code, message } = await api.order.refund(String(state.orderDetail.id));
|
|
|
+ if (code == 200) {
|
|
|
+ ElMessage.success('退款提交成功');
|
|
|
+ getOrderDetail(); // 刷新订单详情
|
|
|
+ } else {
|
|
|
+ ElMessage.error(message || '退款申请失败');
|
|
|
}
|
|
|
-
|
|
|
- // 需要先根据订单号查找订单ID，然后打开订单详情
|
|
|
- // 这里假设需要调用接口根据订单号获取订单ID
|
|
|
- openOrderDetailByOrderId(orderId);
|
|
|
+ } catch (error) { }
|
|
|
+}
|
|
|
+
|
|
|
+// 打开订单详情
|
|
|
+function openOrderDetail(orderId) {
|
|
|
+ if (!orderId) {
|
|
|
+ ElMessage.warning('订单ID不存在');
|
|
|
+ return;
|
|
|
}
|
|
|
|
|
|
- // 根据订单号打开订单详情
|
|
|
- async function openOrderDetailByOrderId(orderId) {
|
|
|
- try {
|
|
|
- // 这里需要根据实际情况调用接口获取订单ID
|
|
|
- // 暂时直接使用订单号作为ID打开
|
|
|
- useModal(
|
|
|
- OrderDetailC,
|
|
|
- {
|
|
|
- title: '订单详情',
|
|
|
- type: 'detail',
|
|
|
- id: orderId, // 这里可能需要转换为数据库ID
|
|
|
- },
|
|
|
- {
|
|
|
- success: () => {
|
|
|
- // 订单详情关闭后的回调
|
|
|
- },
|
|
|
- },
|
|
|
- );
|
|
|
- } catch (error) {
|
|
|
- console.error('打开订单详情失败:', error);
|
|
|
- ElMessage.error('打开订单详情失败');
|
|
|
- }
|
|
|
+ // 如果是当前订单，不需要打开新窗口
|
|
|
+ if (orderId === state.orderDetail.orderId) {
|
|
|
+ ElMessage.info('这是当前订单');
|
|
|
+ return;
|
|
|
}
|
|
|
|
|
|
- // 发货
|
|
|
- function onOpenDispatch() {
|
|
|
- // 检查订单数据是否完整
|
|
|
- if (!state.orderDetail || !state.orderDetail.orderInfoVO) {
|
|
|
- ElMessage.error('订单数据加载中，请稍后再试');
|
|
|
- return;
|
|
|
- }
|
|
|
+ // 需要先根据订单号查找订单ID，然后打开订单详情
|
|
|
+ // 这里假设需要调用接口根据订单号获取订单ID
|
|
|
+ openOrderDetailByOrderId(orderId);
|
|
|
+}
|
|
|
|
|
|
+// 根据订单号打开订单详情
|
|
|
+async function openOrderDetailByOrderId(orderId) {
|
|
|
+ try {
|
|
|
+ // 这里需要根据实际情况调用接口获取订单ID
|
|
|
+ // 暂时直接使用订单号作为ID打开
|
|
|
useModal(
|
|
|
- OrderDispatch,
|
|
|
+ OrderDetailC,
|
|
|
{
|
|
|
- title: '订单发货',
|
|
|
- data: state.orderDetail,
|
|
|
+ title: '订单详情',
|
|
|
+ type: 'detail',
|
|
|
+ id: orderId, // 这里可能需要转换为数据库ID
|
|
|
},
|
|
|
{
|
|
|
success: () => {
|
|
|
- getOrderDetail();
|
|
|
+ // 订单详情关闭后的回调
|
|
|
},
|
|
|
},
|
|
|
);
|
|
|
+ } catch (error) {
|
|
|
+ console.error('打开订单详情失败:', error);
|
|
|
+ ElMessage.error('打开订单详情失败');
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// 发货
|
|
|
+function onOpenDispatch() {
|
|
|
+ // 检查订单数据是否完整
|
|
|
+ if (!state.orderDetail || !state.orderDetail.orderInfoVO) {
|
|
|
+ ElMessage.error('订单数据加载中，请稍后再试');
|
|
|
+ return;
|
|
|
}
|
|
|
|
|
|
- // 退款
|
|
|
- function onOpenRefund() {
|
|
|
- useModal(
|
|
|
- OrderRefund,
|
|
|
- {
|
|
|
- title: '订单退款',
|
|
|
- width: '600px',
|
|
|
- params: {
|
|
|
- id: state.orderDetail.id,
|
|
|
- },
|
|
|
+ useModal(
|
|
|
+ OrderDispatch,
|
|
|
+ {
|
|
|
+ title: '订单发货',
|
|
|
+ data: state.orderDetail,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ success: () => {
|
|
|
+ getOrderDetail();
|
|
|
},
|
|
|
- {
|
|
|
- success: () => {
|
|
|
- getOrderDetail();
|
|
|
- },
|
|
|
+ },
|
|
|
+ );
|
|
|
+}
|
|
|
+
|
|
|
+// 退款
|
|
|
+function onOpenRefund() {
|
|
|
+ useModal(
|
|
|
+ OrderRefund,
|
|
|
+ {
|
|
|
+ title: '订单退款',
|
|
|
+ width: '600px',
|
|
|
+ params: {
|
|
|
+ id: state.orderDetail.id,
|
|
|
},
|
|
|
- );
|
|
|
- }
|
|
|
-
|
|
|
- // 联系用户
|
|
|
- async function onContactUser() {
|
|
|
- try {
|
|
|
- const { code } = await api.order.contact(state.orderDetail.id);
|
|
|
- if (code == 200) {
|
|
|
- ElMessage.success('已发送联系信息');
|
|
|
- }
|
|
|
- } catch (err) {
|
|
|
- ElMessage.error('联系用户失败');
|
|
|
+ },
|
|
|
+ {
|
|
|
+ success: () => {
|
|
|
+ getOrderDetail();
|
|
|
+ },
|
|
|
+ },
|
|
|
+ );
|
|
|
+}
|
|
|
+
|
|
|
+// 联系用户
|
|
|
+async function onContactUser() {
|
|
|
+ try {
|
|
|
+ const { code } = await api.order.contact(state.orderDetail.id);
|
|
|
+ if (code == 200) {
|
|
|
+ ElMessage.success('已发送联系信息');
|
|
|
}
|
|
|
+ } catch (err) {
|
|
|
+ ElMessage.error('联系用户失败');
|
|
|
}
|
|
|
-
|
|
|
- // 导出订单
|
|
|
- async function onExportOrder() {
|
|
|
- try {
|
|
|
- const { code, data } = await api.order.export(state.orderDetail.id);
|
|
|
- if (code == 200) {
|
|
|
- ElMessage.success('导出成功');
|
|
|
- if (data.download_url) {
|
|
|
- window.open(data.download_url);
|
|
|
- }
|
|
|
+}
|
|
|
+
|
|
|
+// 导出订单
|
|
|
+async function onExportOrder() {
|
|
|
+ try {
|
|
|
+ const { code, data } = await api.order.export(state.orderDetail.id);
|
|
|
+ if (code == 200) {
|
|
|
+ ElMessage.success('导出成功');
|
|
|
+ if (data.download_url) {
|
|
|
+ window.open(data.download_url);
|
|
|
}
|
|
|
- } catch (err) {
|
|
|
- ElMessage.error('导出订单失败');
|
|
|
}
|
|
|
+ } catch (err) {
|
|
|
+ ElMessage.error('导出订单失败');
|
|
|
}
|
|
|
-
|
|
|
- // 关闭订单
|
|
|
- async function onCloseOrder() {
|
|
|
- try {
|
|
|
- const { code } = await api.order.close(state.orderDetail.id);
|
|
|
- if (code == 200) {
|
|
|
- ElMessage.success('订单已关闭');
|
|
|
- getOrderDetail();
|
|
|
- }
|
|
|
- } catch (err) {
|
|
|
- ElMessage.error('关闭订单失败');
|
|
|
+}
|
|
|
+
|
|
|
+// 关闭订单
|
|
|
+async function onCloseOrder() {
|
|
|
+ try {
|
|
|
+ const { code } = await api.order.close(state.orderDetail.id);
|
|
|
+ if (code == 200) {
|
|
|
+ ElMessage.success('订单已关闭');
|
|
|
+ getOrderDetail();
|
|
|
}
|
|
|
+ } catch (err) {
|
|
|
+ ElMessage.error('关闭订单失败');
|
|
|
}
|
|
|
-
|
|
|
- // 修改备注标志
|
|
|
- function onChangeMemoFlag(memo) {
|
|
|
- memoForm.flag = true;
|
|
|
- memoForm.data = memo || '';
|
|
|
- }
|
|
|
-
|
|
|
- // 确认备注
|
|
|
- async function onConfirmMemo() {
|
|
|
- try {
|
|
|
- const { code } = await api.order.editMemo(state.orderDetail.id, { memo: memoForm.data });
|
|
|
- if (code == 200) {
|
|
|
- ElMessage.success('备注更新成功');
|
|
|
- memoForm.flag = false;
|
|
|
- getOrderDetail();
|
|
|
- }
|
|
|
- } catch (err) {
|
|
|
- ElMessage.error('备注更新失败');
|
|
|
+}
|
|
|
+
|
|
|
+// 修改备注标志
|
|
|
+function onChangeMemoFlag(memo) {
|
|
|
+ memoForm.flag = true;
|
|
|
+ memoForm.data = memo || '';
|
|
|
+}
|
|
|
+
|
|
|
+// 确认备注
|
|
|
+async function onConfirmMemo() {
|
|
|
+ try {
|
|
|
+ const { code } = await api.order.editMemo(state.orderDetail.id, { memo: memoForm.data });
|
|
|
+ if (code == 200) {
|
|
|
+ ElMessage.success('备注更新成功');
|
|
|
+ memoForm.flag = false;
|
|
|
+ getOrderDetail();
|
|
|
}
|
|
|
+ } catch (err) {
|
|
|
+ ElMessage.error('备注更新失败');
|
|
|
}
|
|
|
+}
|
|
|
|
|
|
- onMounted(() => {
|
|
|
- getOrderDetail();
|
|
|
- });
|
|
|
+onMounted(() => {
|
|
|
+ getOrderDetail();
|
|
|
+});
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
- .order-detail {
|
|
|
- padding: 20px;
|
|
|
- .order-track {
|
|
|
- h3 {
|
|
|
- font-size: 16px;
|
|
|
- font-weight: 600;
|
|
|
- color: var(--sa-title);
|
|
|
- }
|
|
|
+.order-detail {
|
|
|
+ padding: 20px;
|
|
|
+
|
|
|
+ .order-track {
|
|
|
+ h3 {
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 600;
|
|
|
+ color: var(--sa-title);
|
|
|
}
|
|
|
+ }
|
|
|
|
|
|
- .basic-info {
|
|
|
- h3 {
|
|
|
- font-size: 16px;
|
|
|
- font-weight: 600;
|
|
|
- color: var(--sa-title);
|
|
|
- }
|
|
|
+ .basic-info {
|
|
|
+ h3 {
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 600;
|
|
|
+ color: var(--sa-title);
|
|
|
+ }
|
|
|
|
|
|
- .info-item {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- margin-bottom: 8px;
|
|
|
+ .info-item {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin-bottom: 8px;
|
|
|
|
|
|
- .label {
|
|
|
- flex-shrink: 0;
|
|
|
- color: var(--sa-subfont);
|
|
|
- font-size: 14px;
|
|
|
- }
|
|
|
+ .label {
|
|
|
+ flex-shrink: 0;
|
|
|
+ color: var(--sa-subfont);
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
|
|
|
- .value {
|
|
|
- color: var(--sa-subtitle);
|
|
|
- font-size: 14px;
|
|
|
- font-weight: 500;
|
|
|
- }
|
|
|
+ .value {
|
|
|
+ color: var(--sa-subtitle);
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 500;
|
|
|
}
|
|
|
}
|
|
|
+ }
|
|
|
|
|
|
- .action-buttons {
|
|
|
- .el-button {
|
|
|
- margin-right: 12px;
|
|
|
- }
|
|
|
+ .action-buttons {
|
|
|
+ .el-button {
|
|
|
+ margin-right: 12px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .goods-content,
|
|
|
+ .address-content,
|
|
|
+ .group-content,
|
|
|
+ .memo-info {
|
|
|
+ .sa-title {
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 600;
|
|
|
+ color: var(--sa-title);
|
|
|
}
|
|
|
|
|
|
- .goods-content,
|
|
|
- .address-content,
|
|
|
- .group-content,
|
|
|
- .memo-info {
|
|
|
- .sa-title {
|
|
|
- font-size: 16px;
|
|
|
- font-weight: 600;
|
|
|
- color: var(--sa-title);
|
|
|
- }
|
|
|
+ .sa-table {
|
|
|
+ border-radius: 8px;
|
|
|
+ overflow: hidden;
|
|
|
+ border: 1px solid #dcdfe6;
|
|
|
|
|
|
- .sa-table {
|
|
|
- border-radius: 8px;
|
|
|
- overflow: hidden;
|
|
|
- border: 1px solid #dcdfe6;
|
|
|
+ :deep(.el-table) {
|
|
|
+ border: none;
|
|
|
+ border-radius: 0;
|
|
|
+ }
|
|
|
|
|
|
- :deep(.el-table) {
|
|
|
- border: none;
|
|
|
- border-radius: 0;
|
|
|
- }
|
|
|
+ :deep(.el-table__header-wrapper) {
|
|
|
+ background: var(--sa-table-header-bg, #f5f7fa);
|
|
|
|
|
|
- :deep(.el-table__header-wrapper) {
|
|
|
+ .el-table__header {
|
|
|
background: var(--sa-table-header-bg, #f5f7fa);
|
|
|
|
|
|
- .el-table__header {
|
|
|
- background: var(--sa-table-header-bg, #f5f7fa);
|
|
|
+ th {
|
|
|
+ background: var(--sa-table-header-bg, #f5f7fa) !important;
|
|
|
+ font-weight: 600;
|
|
|
+ color: var(--sa-title, #303133);
|
|
|
+ border-bottom: 1px solid #dcdfe6;
|
|
|
+ border-right: 1px solid #dcdfe6;
|
|
|
|
|
|
- th {
|
|
|
- background: var(--sa-table-header-bg, #f5f7fa) !important;
|
|
|
- font-weight: 600;
|
|
|
- color: var(--sa-title, #303133);
|
|
|
+ &:first-child {
|
|
|
+ border-left: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ &:last-child {
|
|
|
+ border-right: none;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ :deep(.el-table__body-wrapper) {
|
|
|
+ .el-table__body {
|
|
|
+ tr {
|
|
|
+ &:hover {
|
|
|
+ background: #f5f7fa !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ td {
|
|
|
border-bottom: 1px solid #dcdfe6;
|
|
|
border-right: 1px solid #dcdfe6;
|
|
|
+ border-left: none;
|
|
|
|
|
|
&:first-child {
|
|
|
border-left: none;
|
|
|
@@ -690,109 +702,86 @@
|
|
|
border-right: none;
|
|
|
}
|
|
|
}
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- :deep(.el-table__body-wrapper) {
|
|
|
- .el-table__body {
|
|
|
- tr {
|
|
|
- &:hover {
|
|
|
- background: #f5f7fa !important;
|
|
|
- }
|
|
|
|
|
|
- td {
|
|
|
- border-bottom: 1px solid #dcdfe6;
|
|
|
- border-right: 1px solid #dcdfe6;
|
|
|
- border-left: none;
|
|
|
-
|
|
|
- &:first-child {
|
|
|
- border-left: none;
|
|
|
- }
|
|
|
-
|
|
|
- &:last-child {
|
|
|
- border-right: none;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- &:last-child td {
|
|
|
- border-bottom: none;
|
|
|
- }
|
|
|
+ &:last-child td {
|
|
|
+ border-bottom: none;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+ }
|
|
|
|
|
|
- // 确保边框完整性
|
|
|
- :deep(.el-table--border) {
|
|
|
- border: none;
|
|
|
-
|
|
|
- &::after {
|
|
|
- display: none;
|
|
|
- }
|
|
|
+ // 确保边框完整性
|
|
|
+ :deep(.el-table--border) {
|
|
|
+ border: none;
|
|
|
|
|
|
- &::before {
|
|
|
- display: none;
|
|
|
- }
|
|
|
+ &::after {
|
|
|
+ display: none;
|
|
|
}
|
|
|
|
|
|
- :deep(.el-table--border .el-table__cell) {
|
|
|
- border-right: 1px solid #dcdfe6;
|
|
|
- border-left: none;
|
|
|
-
|
|
|
- &:first-child {
|
|
|
- border-left: none;
|
|
|
- }
|
|
|
-
|
|
|
- &:last-child {
|
|
|
- border-right: none;
|
|
|
- }
|
|
|
+ &::before {
|
|
|
+ display: none;
|
|
|
}
|
|
|
+ }
|
|
|
|
|
|
- // 修复表格底部和左侧边框
|
|
|
- :deep(.el-table__body) {
|
|
|
+ :deep(.el-table--border .el-table__cell) {
|
|
|
+ border-right: 1px solid #dcdfe6;
|
|
|
+ border-left: none;
|
|
|
+
|
|
|
+ &:first-child {
|
|
|
border-left: none;
|
|
|
- border-bottom: none;
|
|
|
}
|
|
|
|
|
|
- :deep(.el-table__header) {
|
|
|
- border-left: none;
|
|
|
+ &:last-child {
|
|
|
+ border-right: none;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+ // 修复表格底部和左侧边框
|
|
|
+ :deep(.el-table__body) {
|
|
|
+ border-left: none;
|
|
|
+ border-bottom: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ :deep(.el-table__header) {
|
|
|
+ border-left: none;
|
|
|
+ }
|
|
|
}
|
|
|
+ }
|
|
|
|
|
|
- .group-content {
|
|
|
- .sa-table {
|
|
|
- width: 100% !important;
|
|
|
+ .group-content {
|
|
|
+ .sa-table {
|
|
|
+ width: 100% !important;
|
|
|
|
|
|
- :deep(.el-table) {
|
|
|
- width: 100% !important;
|
|
|
- }
|
|
|
+ :deep(.el-table) {
|
|
|
+ width: 100% !important;
|
|
|
+ }
|
|
|
|
|
|
- :deep(.el-table__header-wrapper) {
|
|
|
- width: 100% !important;
|
|
|
- }
|
|
|
+ :deep(.el-table__header-wrapper) {
|
|
|
+ width: 100% !important;
|
|
|
+ }
|
|
|
|
|
|
- :deep(.el-table__body-wrapper) {
|
|
|
- width: 100% !important;
|
|
|
- }
|
|
|
+ :deep(.el-table__body-wrapper) {
|
|
|
+ width: 100% !important;
|
|
|
}
|
|
|
}
|
|
|
+ }
|
|
|
|
|
|
- .memo-info {
|
|
|
- .memo {
|
|
|
- margin-bottom: 12px;
|
|
|
- }
|
|
|
+ .memo-info {
|
|
|
+ .memo {
|
|
|
+ margin-bottom: 12px;
|
|
|
+ }
|
|
|
|
|
|
- .remark {
|
|
|
- .label {
|
|
|
- color: var(--sa-subfont);
|
|
|
- font-size: 14px;
|
|
|
- }
|
|
|
+ .remark {
|
|
|
+ .label {
|
|
|
+ color: var(--sa-subfont);
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
|
|
|
- .value {
|
|
|
- color: var(--sa-subtitle);
|
|
|
- font-size: 14px;
|
|
|
- }
|
|
|
+ .value {
|
|
|
+ color: var(--sa-subtitle);
|
|
|
+ font-size: 14px;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+}
|
|
|
</style>
|
