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)" > - - - -
@@ -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);