| | |
| | | <Button @click="toPrint" type="primary" ghost |
| | | v-if="allowOperation.ship && logisticsType != 'SHUNFENG'">打印电子面单</Button> |
| | | <Button @click="modifyRemark" type="primary">添加备注</Button> |
| | | <!-- 将编辑模板按钮移到这里 --> |
| | | <Button v-if="orderInfo.userCheckTemplates && orderInfo.userCheckTemplates.length > 0" |
| | | @click="editTemplateInfo(orderInfo.userCheckTemplates[0].templateId, sn)" |
| | | type="primary">编辑模板</Button> |
| | | </div> |
| | | </Card> |
| | | |
| | |
| | | <!-- 外层容器:循环遍历 userCheckTemplates 集合 --> |
| | | <div class="check-template-list"> |
| | | <div class="template-item" v-for="(item, index) in orderInfo.userCheckTemplates" :key="item.id"> |
| | | <!-- 2. 模板标题:仅第一个循环项显示 templateName(index===0 控制) --> |
| | | <div class="div-item" > <!-- 关键:仅首项渲染 --> |
| | | <div class="div-item-left">商品模板:</div> |
| | | <div class="div-item-right"> |
| | | {{ item.templateName || '无模板标题' }} <!-- 处理空值默认显示 --> |
| | | </div> |
| | | </div> |
| | | <!-- 4. 选择图片:渲染 chooseImg 字段(处理 null/空值) --> |
| | | <div class="div-item"> |
| | | <div class="div-item-left">模板图片:</div> |
| | | <div class="div-item-right"> |
| | | <img |
| | | v-if="item.chooseImg" |
| | | :src="getImageUrl(item.chooseImg)" |
| | | alt="选择的图片" |
| | | class="selected-img" |
| | | style="max-width: 200px; max-height: 150px;" |
| | | > |
| | | <span v-else>无选择图片</span> <!-- 无图片时默认文本 --> |
| | | </div> |
| | | </div> |
| | | <!-- 1. 商品模板:每个循环项都显示 subName --> |
| | | <div class="div-item"> |
| | | <div class="div-item-left">商品模板:</div> |
| | | <div class="div-item-left">模板标题:</div> |
| | | <div class="div-item-right"> |
| | | {{ item.subName || '无商品模板名称' }} <!-- 处理空值默认显示 --> |
| | | </div> |
| | | </div> |
| | | |
| | | <!-- 2. 模板标题:仅第一个循环项显示 templateName(index===0 控制) --> |
| | | <div class="div-item" v-if="index === 0"> <!-- 关键:仅首项渲染 --> |
| | | <div class="div-item-left">模板标题:</div> |
| | | <div class="div-item-right"> |
| | | {{ item.templateName || '无模板标题' }} <!-- 处理空值默认显示 --> |
| | | </div> |
| | | </div> |
| | | |
| | | <!-- 3. 文本内容:判断 content 是「图片URL」还是「纯文本」 --> |
| | | <div class="div-item"> |
| | | <div class="div-item-left">文本内容:</div> |
| | | <div class="div-item-left">{{isUrl(item.content)? '图片:':'文本内容'}}</div> |
| | | <div class="div-item-right"> |
| | | <!-- 正则判断:content 以 http/https 开头 → 渲染图片;否则渲染文本 --> |
| | | <img |
| | | v-if="isUrl(item.content)" |
| | | :src="item.content" |
| | | :src="getImageUrl(item.content)" |
| | | alt="内容图片" |
| | | class="content-img" |
| | | style="max-width: 200px; max-height: 150px;" |
| | | > |
| | | <span v-else>{{ item.content || '无文本内容' }}</span> <!-- 纯文本/空值处理 --> |
| | | </div> |
| | | </div> |
| | | |
| | | <!-- 4. 选择图片:渲染 chooseImg 字段(处理 null/空值) --> |
| | | <div class="div-item"> |
| | | <div class="div-item-left">选择图片:</div> |
| | | <div class="div-item-right"> |
| | | <img |
| | | v-if="item.chooseImg" |
| | | :src="item.chooseImg" |
| | | alt="选择的图片" |
| | | class="selected-img" |
| | | style="max-width: 200px; max-height: 150px;" |
| | | > |
| | | <span v-else>无选择图片</span> <!-- 无图片时默认文本 --> |
| | | </div> |
| | | </div> |
| | | |
| | |
| | | </Modal> |
| | | |
| | | <multipleMap ref="map" @callback="getAddress"></multipleMap> |
| | | |
| | | <!-- 添加模板编辑弹窗 --> |
| | | <EditTemplateModal |
| | | v-model="editTemplateModalVisible" |
| | | :template-id="currentTemplateId" |
| | | :order-sn="sn" |
| | | :user-check-templates="orderInfo.userCheckTemplates" |
| | | @success="handleTemplateEditSuccess" |
| | | @cancel="editTemplateModalVisible = false" |
| | | /> |
| | | </div> |
| | | </template> |
| | | |
| | |
| | | import * as API_Order from "@/api/order"; |
| | | import * as API_Logistics from "@/api/logistics"; |
| | | import * as RegExp from "@/libs/RegExp.js"; |
| | | import { getSts } from "@/api/file"; |
| | | |
| | | import multipleMap from "@/views/my-components/map/multiple-map"; |
| | | |
| | | import EditTemplateModal from "./editTemplateModal.vue"; |
| | | |
| | | export default { |
| | | name: "orderDetail", |
| | | components: { |
| | | multipleMap, |
| | | EditTemplateModal |
| | | }, |
| | | data () { |
| | | return { |
| | |
| | | }, |
| | | submitLoading: false, // 添加或编辑提交状态 |
| | | logisticsType: 'KUAIDINIAO', //物流类型 |
| | | endpoint: '', // 添加endpoint变量用于存储STS endpoint |
| | | |
| | | someJSONdata: '', |
| | | faceSheetForm: { |
| | |
| | | }, |
| | | ], |
| | | orderPackage: [], |
| | | packageTraceList: [] |
| | | packageTraceList: [], |
| | | // 添加模板编辑弹窗相关数据 |
| | | editTemplateModalVisible: false, |
| | | currentTemplateId: "", |
| | | // 用于传递userCheckTemplates数据给子组件 |
| | | userCheckTemplates: [] |
| | | }; |
| | | }, |
| | | methods: { |
| | |
| | | // 5. \.(jpg|jpeg|png|gif|bmp|webp)$ :仅匹配常见图片后缀,忽略大小写(i标志) |
| | | const imgReg = /^https?:\/\/([\w-]+\.)+[a-zA-Z]{2,}(\/[\w-./?%&=]*)*\.(jpg|jpeg|png|gif|bmp|webp)$/i; |
| | | return imgReg.test(str); |
| | | }, |
| | | // 获取图片URL(使用STS获取的endpoint) |
| | | getImageUrl(fileKey) { |
| | | // 确保fileKey是字符串类型 |
| | | if (!fileKey || typeof fileKey !== 'string') { |
| | | console.warn('fileKey is not a valid string:', fileKey); |
| | | return ''; // 返回空字符串或默认图片 |
| | | } |
| | | |
| | | // 安全检查startsWith方法是否存在 |
| | | if (fileKey.startsWith && typeof fileKey.startsWith === 'function' && |
| | | (fileKey.startsWith("http://") || fileKey.startsWith("https://"))) { |
| | | return fileKey; |
| | | } |
| | | |
| | | // 如果有endpoint配置,使用endpoint拼接URL |
| | | if (this.endpoint) { |
| | | // 确保fileKey不以/开头,endpoint不以/结尾 |
| | | const cleanEndpoint = this.endpoint.replace(/\/$/, ''); |
| | | const cleanFileKey = fileKey.replace(/^\//, ''); |
| | | return `${cleanEndpoint}/${cleanFileKey}`; |
| | | } |
| | | |
| | | // 否则返回fileKey,让组件自己处理 |
| | | return fileKey; |
| | | }, |
| | | // 选中 |
| | | selectGroupShipGoodsMethods (selected) { |
| | |
| | | }) |
| | | }, |
| | | |
| | | // 获取STS信息 |
| | | // async getStsInfo() { |
| | | // try { |
| | | // const stsRes = await getSts(); |
| | | // if (stsRes.success) { |
| | | // this.endpoint = stsRes.data.endpoint; |
| | | // } |
| | | // } catch (error) { |
| | | // console.error('获取STS信息失败:', error); |
| | | // } |
| | | // }, |
| | | |
| | | // 编辑模板信息 |
| | | editTemplateInfo(templateId, orderSn) { |
| | | console.log("调用editTemplateInfo,参数:", { |
| | | templateId: templateId, |
| | | orderSn: orderSn |
| | | }); |
| | | this.currentTemplateId = templateId; |
| | | // 更新userCheckTemplates数据 |
| | | this.userCheckTemplates = this.orderInfo.userCheckTemplates || []; |
| | | this.editTemplateModalVisible = true; |
| | | }, |
| | | |
| | | // 模板编辑成功回调 |
| | | handleTemplateEditSuccess() { |
| | | this.editTemplateModalVisible = false; |
| | | // 可以在这里刷新数据或提示用户 |
| | | this.$Message.success("模板信息已更新"); |
| | | // 刷新订单详情页面数据 |
| | | this.getDataDetail(); |
| | | }, |
| | | |
| | | getStsInfo() { |
| | | getSts().then(res => { |
| | | if (res.code==200) { |
| | | this.endpoint = res.data.endpoint; |
| | | } |
| | | }); |
| | | } |
| | | }, |
| | | mounted () { |
| | | this.sn = this.$route.query.sn; |
| | | this.getDataDetail(); |
| | | this.getLogisticsSetting(); |
| | | this.getOrderPackage(); |
| | | this.getStsInfo(); // 添加这行来获取STS信息 |
| | | }, |
| | | // 如果是从详情页返回列表页,修改列表页keepAlive为true,确保不刷新页面 |
| | | beforeRouteLeave (to, from, next) { |