diff --git a/src/views/merchant/single/order.vue b/src/views/merchant/single/order.vue
index a66b327..3fafa70 100644
--- a/src/views/merchant/single/order.vue
+++ b/src/views/merchant/single/order.vue
@@ -30,7 +30,10 @@
@@ -58,12 +61,12 @@
-
+
- AI 智能总结
+ 订单总结
@@ -74,9 +77,9 @@
- AI 正在分析订单数据,请稍候...
+ 正在生成订单总结,请稍候...
-
+
此过程可能需要较长时间,感谢您的耐心等待
@@ -88,12 +91,6 @@
:bordered="false"
style="background-color: var(--color-fill-2)"
>
-
-
-
- AI 生成
-
-
-
-
-
@@ -150,7 +144,7 @@ import {
} from '@/api/generated';
import useLoading from '@/hooks/loading';
import { Message } from '@arco-design/web-vue';
-import { reactive, ref } from 'vue';
+import { reactive, ref, computed } from 'vue';
const renderData = ref({});
const summaryData = ref(null);
@@ -161,6 +155,12 @@ const state = reactive({
value: ''
});
+// 响应式检测移动端
+const isMobile = computed(() => {
+ if (typeof window === 'undefined') return false;
+ return window.innerWidth <= 768;
+});
+
const fetchSummary = async (merchantOrderNo: string) => {
if (!merchantOrderNo) return;
@@ -172,8 +172,8 @@ const fetchSummary = async (merchantOrderNo: string) => {
});
summaryData.value = summaryResponse.data;
} catch (error) {
- console.error('获取 AI 总结失败:', error);
- Message.warning('AI 总结获取失败,请稍后重试');
+ console.error('获取订单总结失败:', error);
+ Message.warning('订单总结获取失败,请稍后重试');
} finally {
setSummaryLoading(false);
}
@@ -187,19 +187,15 @@ const search = async (value: string) => {
// 重置总结数据
summaryData.value = null;
- // 并行查询订单详情和 AI 总结
- const [data] = await Promise.all([
- apiClient.apiMerchantOrderQueryGet({
- merchantOrderNo: value
- }),
- // 在有订单数据时才获取总结
- fetchSummary(value).catch(() => null) // 忽略总结接口错误,不影响主查询
- ]);
+ // 只查询订单详情
+ const data = await apiClient.apiMerchantOrderQueryGet({
+ merchantOrderNo: value
+ });
renderData.value = data.data;
- // 如果订单有详情但总结还未获取,再次尝试获取总结
- if (data.data?.list?.length && !summaryLoading.value) {
+ // 如果有订单数据,异步获取总结
+ if (data.data?.list?.length) {
fetchSummary(value);
}
} catch (error) {
@@ -216,6 +212,151 @@ const search = async (value: string) => {
padding: 200px 20px;
margin: 0 auto;
+ // 手机端优化
+ @media (width <= 768px) {
+ padding: 120px 16px;
+
+ .body {
+ padding: 16px;
+ margin-top: 16px;
+ min-height: calc(100vh - 400px);
+ }
+
+ // 优化描述列表在手机端的显示
+ :deep(.arco-descriptions) {
+ .arco-descriptions-title {
+ font-size: 16px;
+ margin-bottom: 16px;
+ }
+
+ .arco-descriptions-item {
+ padding: 8px 0;
+
+ &-label {
+ width: 80px !important;
+ font-size: 13px;
+ }
+
+ &-value {
+ font-size: 13px;
+ }
+ }
+
+ // 强制手机端使用单列布局
+ &.arco-descriptions-layout-horizontal {
+ .arco-descriptions-item {
+ display: block;
+ margin-bottom: 12px;
+ width: 100% !important;
+ flex-basis: 100% !important;
+ }
+
+ // 覆盖两列布局的 grid 样式
+ &.arco-descriptions-size-medium .arco-descriptions-item,
+ &.arco-descriptions-size-small .arco-descriptions-item {
+ grid-column: 1 / -1;
+ width: 100% !important;
+ }
+ }
+
+ // 确保手机端始终是一列
+ &.arco-descriptions-column-2 {
+ .arco-descriptions-item {
+ grid-column: 1 / -1;
+ width: 100% !important;
+ }
+ }
+ }
+
+ // 总结区域手机端优化
+ :deep(.arco-card) {
+ .arco-card-body {
+ padding: 16px;
+ }
+
+ .arco-typography {
+ font-size: 14px;
+ line-height: 1.6;
+ }
+ }
+
+ // 分割线间距优化
+ :deep(.arco-divider) {
+ margin: 16px 0;
+ }
+
+ // 标题字体大小优化
+ :deep(.arco-typography) {
+ &.arco-typography-title-h5 {
+ font-size: 16px;
+ margin: 16px 0;
+ }
+
+ &.arco-typography-title {
+ font-size: 20px;
+ margin: 24px 0 16px;
+ }
+ }
+
+ // 记录列表手机端优化
+ :deep(.arco-typography-paragraph) {
+ margin: 8px 0;
+ font-size: 14px;
+ line-height: 1.5;
+ word-break: break-all;
+ }
+
+ // 加载动画区域手机端优化
+ :deep(.arco-spin) {
+ .arco-spin-icon {
+ font-size: 20px;
+ }
+ }
+
+ // 输入框手机端优化
+ :deep(.arco-input-search) {
+ .arco-input-wrapper {
+ height: 44px;
+ font-size: 16px; // iOS 防止缩放
+ }
+
+ .arco-input-search-btn {
+ height: 44px;
+ padding: 0 16px;
+ }
+ }
+
+ // 加载提示文字响应式样式
+ .loading-hint {
+ font-size: 12px;
+ line-height: 1.4;
+ }
+ }
+
+ // 超小屏手机优化
+ @media (width <= 480px) {
+ padding: 100px 12px;
+
+ .body {
+ padding: 12px;
+ }
+
+ :deep(.arco-descriptions) {
+ .arco-descriptions-item-label {
+ width: 70px !important;
+ font-size: 12px;
+ }
+
+ .arco-descriptions-item-value {
+ font-size: 12px;
+ }
+ }
+
+ :deep(.arco-typography-paragraph) {
+ font-size: 13px;
+ }
+ }
+
:deep(.arco-input-wrapper) {
background-color: var(--color-white);