From f8fd1bd1df45a1aa7b6717562722e61c7ee8b4c3 Mon Sep 17 00:00:00 2001
From: peng <peng.com>
Date: 星期三, 15 十月 2025 10:20:31 +0800
Subject: [PATCH] 显示调整
---
seller/src/views/order/order/orderDetail.vue | 273 ++++++++++++++++++------------------------------------
1 files changed, 92 insertions(+), 181 deletions(-)
diff --git a/seller/src/views/order/order/orderDetail.vue b/seller/src/views/order/order/orderDetail.vue
index 54aa0d6..9949108 100644
--- a/seller/src/views/order/order/orderDetail.vue
+++ b/seller/src/views/order/order/orderDetail.vue
@@ -146,73 +146,64 @@
}}
</div>
</div>
- <div class="div-item" >
- <div class="div-item-left">鍟嗗搧妯℃澘锛�</div>
- <div class="div-item-right">
- <template v-if="orderInfo.orderItems[0] && orderInfo.orderItems[0].goodsCustomizeTemplateVO">
- {{
- orderInfo.orderItems[0].goodsCustomizeTemplateVO.templateName
- }}
- </template>
- <template v-else>
- 鏆傛棤
- </template>
- </div>
- </div>
- <div class="div-item" >
- <div class="div-item-left">妯℃澘鏍囬锛�</div>
- <div class="div-item-right">
- <!-- 鍏堥�愬眰鍒ゆ柇鏄惁瀛樺湪锛岄伩鍏嶆姤閿� -->
- <template v-if="orderInfo.orderItems[0] && orderInfo.orderItems[0].goodsCustomizeTemplateVO && orderInfo.orderItems[0].goodsCustomizeTemplateVO.titles && orderInfo.orderItems[0].goodsCustomizeTemplateVO.titles.length">
- <span
- v-for="(item, index) in orderInfo.orderItems[0].goodsCustomizeTemplateVO.titles"
- :key="index"
- >{{ item.templateTitle }}
- <span v-if="index !== orderInfo.orderItems[0].goodsCustomizeTemplateVO.titles.length - 1">銆�</span>
- </span>
- </template>
- <template v-else>
- 鏆傛棤
- </template>
- </div>
- </div>
- <div class="div-item">
- <div class="div-item-left">妯℃澘鍥剧墖锛�</div>
- <div class="div-item-right">
- <!-- 鍥剧墖鍒楄〃瀹瑰櫒 -->
- <div v-if="hasImages" class="image-list">
- <div
- class="image-item"
- v-for="(image, index) in imageList"
- :key="index"
- @click="previewImage(index)"
- >
- <img
- :src="image.imgUrl"
- :alt="'妯℃澘鍥剧墖' + (index + 1)"
- class="small-image"
- loading="lazy"
- >
- </div>
- </div>
- <!-- 鏃犲浘鐗囨椂鏄剧ず -->
- <div v-else >鏆傛棤鍥剧墖</div>
-
- <!-- 鍥剧墖棰勮寮圭獥 -->
- <div v-if="isPreviewVisible" class="preview-modal" @click="closePreview">
- <div class="preview-content" @click.stop>
- <img
- :src="currentPreviewImage"
- :alt="`棰勮鍥剧墖 ${currentPreviewIndex + 1}`"
- class="preview-image"
- >
- <div class="preview-nav">
- <button class="close-btn" @click="closePreview">脳</button>
+ </Col>
+ <Col span="24">
+ <!-- 澶栧眰瀹瑰櫒锛氬惊鐜亶鍘� userCheckTemplates 闆嗗悎 -->
+ <div class="check-template-list">
+ <div class="template-item" v-for="(item, index) in orderInfo.userCheckTemplates" :key="item.id">
+ <!-- 2. 妯℃澘鏍囬锛氫粎绗竴涓惊鐜」鏄剧ず templateName锛坕ndex===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="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-right">
+ {{ item.subName || '鏃犲晢鍝佹ā鏉垮悕绉�' }} <!-- 澶勭悊绌哄�奸粯璁ゆ樉绀� -->
</div>
</div>
+
+
+
+ <!-- 3. 鏂囨湰鍐呭锛氬垽鏂� content 鏄�屽浘鐗嘦RL銆嶈繕鏄�岀函鏂囨湰銆� -->
+ <div class="div-item">
+ <div class="div-item-left">{{isUrl(item.content)? '鍥剧墖锛�':'鏂囨湰鍐呭'}}</div>
+ <div class="div-item-right">
+ <!-- 姝ｅ垯鍒ゆ柇锛歝ontent 浠� http/https 寮�澶� 鈫� 娓叉煋鍥剧墖锛涘惁鍒欐覆鏌撴枃鏈� -->
+ <img
+ v-if="isUrl(item.content)"
+ :src="item.content"
+ alt="鍐呭鍥剧墖"
+ class="content-img"
+ style="max-width: 200px; max-height: 150px;"
+ >
+ <span v-else>{{ item.content || '鏃犳枃鏈唴瀹�' }}</span> <!-- 绾枃鏈�/绌哄�煎鐞� -->
+ </div>
+ </div>
+
+
+
+ <!-- 鍙�夛細寰幆椤瑰垎闅旂嚎锛屼紭鍖栬瑙� -->
+ <hr v-if="index !== orderInfo.userCheckTemplates.length - 1" style="margin: 15px 0; border: none; border-top: 1px solid #eee;">
+ </div>
</div>
</Col>
@@ -669,9 +660,9 @@
},
data () {
return {
- isPreviewVisible: false,
- currentPreviewImage: '',
- currentPreviewIndex: 0,
+ // isPreviewVisible: false,
+ // currentPreviewImage: '',
+ // currentPreviewIndex: 0,
loading:false,
typeList: [],
@@ -1025,40 +1016,17 @@
packageTraceList: []
};
},
- computed: {
- // 鑾峰彇鍥剧墖鍒楄〃锛堝鐞嗙┖鍊兼儏鍐碉級
- imageList() {
- console.log(this.orderInfo.orderItems[0].goodsCustomizeTemplateVO)
- if (this.orderInfo &&
- this.orderInfo.orderItems &&
- this.orderInfo.orderItems[0] &&
- this.orderInfo.orderItems[0].goodsCustomizeTemplateVO &&
- this.orderInfo.orderItems[0].goodsCustomizeTemplateVO.listImages &&
- Array.isArray(this.orderInfo.orderItems[0].goodsCustomizeTemplateVO.listImages)) {
- return this.orderInfo.orderItems[0].goodsCustomizeTemplateVO.listImages;
- }
- return [];
- },
- // 鍒ゆ柇鏄惁鏈夊浘鐗�
- hasImages() {
- return this.imageList.length > 0;
- }
- },
methods: {
- previewImage(index) {
- if (this.imageList[index]) {
- this.currentPreviewIndex = index;
- this.currentPreviewImage = this.imageList[index].imgUrl;
- this.isPreviewVisible = true;
- // 闃绘椤甸潰婊氬姩
- document.body.style.overflow = 'hidden';
- }
- },
- // 鍏抽棴棰勮
- closePreview() {
- this.isPreviewVisible = false;
- // 鎭㈠椤甸潰婊氬姩
- document.body.style.overflow = '';
+ isUrl(str) {
+ if (!str) return false; // 绌哄�肩洿鎺ヨ繑鍥瀎alse
+ // 姝ｅ垯璇存槑锛�
+ // 1. https?:// 锛氭敮鎸乭ttp/https鍗忚
+ // 2. ([\w-]+\.)+ 锛氬厑璁稿瓙鍩熷悕鍖呭惈鐭í绾匡紙濡俵mk-1356772813锛�
+ // 3. [a-zA-Z]{2,} 锛氶《绾у煙鍚嶏紙濡俢om銆乧n锛岃嚦灏�2涓瓧姣嶏級
+ // 4. (\w-./?%&=)* 锛歎RL璺緞/鍙傛暟閮ㄥ垎锛屾敮鎸佸父瑙佸瓧绗�
+ // 5. \.(jpg|jpeg|png|gif|bmp|webp)$ 锛氫粎鍖归厤甯歌鍥剧墖鍚庣紑锛屽拷鐣ュぇ灏忓啓锛坕鏍囧織锛�
+ const imgReg = /^https?:\/\/([\w-]+\.)+[a-zA-Z]{2,}(\/[\w-./?%&=]*)*\.(jpg|jpeg|png|gif|bmp|webp)$/i;
+ return imgReg.test(str);
},
// 閫変腑
selectGroupShipGoodsMethods (selected) {
@@ -1472,89 +1440,6 @@
};
</script>
<style lang="scss" scoped>
-.image-list {
- display: flex;
- gap: 8px;
- flex-wrap: wrap;
- max-width: 600px;
-}
-
-.image-item {
- cursor: pointer;
- border: 1px solid #eee;
- border-radius: 4px;
- overflow: hidden;
- transition: transform 0.2s;
-}
-
-.image-item:hover {
- transform: scale(1.02);
-}
-
-.small-image {
- width: 80px;
- height: 80px;
- object-fit: cover;
-}
-
-.no-image {
- color: #999;
- padding: 10px 0;
-}
-
-/* 棰勮寮圭獥鏍峰紡 */
-.preview-modal {
- position: fixed;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- background-color: rgba(0, 0, 0, 0.8);
- display: flex;
- align-items: center;
- justify-content: center;
- z-index: 1000;
-}
-
-.preview-content {
- position: relative;
- max-width: 90%;
- max-height: 90%;
-}
-
-.preview-image {
- max-width: 100%;
- object-fit: contain;
-}
-
-.preview-nav {
- position: absolute;
- top: -30px;
- right: 0;
- color: white;
- display: flex;
- align-items: center;
- gap: 15px;
-}
-
-.preview-count {
- font-size: 14px;
-}
-
-.close-btn {
- background: none;
- border: none;
- color: white;
- font-size: 20px;
- cursor: pointer;
- width: 24px;
- height: 24px;
- display: flex;
- align-items: center;
- justify-content: center;
- padding: 0;
-}
-
// 寤鸿寮曞叆閫氱敤鏍峰紡 鍙垹闄や笅闈㈡牱寮忎唬鐮�
// @import "@/styles/table-common.scss";
.lineH30 {
@@ -1770,4 +1655,30 @@
height: inherit;
}
}
+.check-template-list {
+ display: flex;
+ flex-wrap: wrap; // 鍏抽敭锛氬浣欏瓙椤硅嚜鍔ㄦ崲琛�
+ gap: 15px; // 瀛愰」涔嬮棿鐨勯棿璺濓紙姘村钩+鍨傜洿锛�
+ padding: 10px 0; // 涓婁笅鍐呰竟璺濓紝閬垮厤璐磋竟
+ width: 100%; // 鍗犳弧鐖跺鍣紙Col span="12"锛�
+}
+
+// 2. 姣忎釜妯℃澘椤癸細鎺у埗瀹藉害鍜屽崱鐗囨牱寮�
+.template-item {
+ min-width: 280px; // 鏈�灏忓搴︼紝閬垮厤杩囩獎
+ max-width: 350px; // 鏈�澶у搴︼紝闃叉杩囧
+ flex: 1; // 鍚屼竴琛屽瓙椤瑰潎鍖�鍒嗛厤瀹藉害
+ padding: 12px;
+ border: 1px solid #eee;
+ border-radius: 6px;
+ background-color: #fafafa;
+ box-sizing: border-box; // 闃叉padding鎾戝ぇ瀹藉害
+}
+.content-img,
+.selected-img {
+ max-width: 100%; // 閫傚簲瀛愰」瀹藉害
+ max-height: 150px; // 闄愬埗鏈�澶ч珮搴�
+ border-radius: 4px;
+ object-fit: cover; // 淇濇寔鍥剧墖姣斾緥锛屼笉鎷変几
+}
</style>
--
Gitblit v1.8.0