From 88ce566fdb66bbc7c253b1ca7a4ed0276d8d240c Mon Sep 17 00:00:00 2001
From: zxl <763096477@qq.com>
Date: 星期六, 11 十月 2025 16:08:59 +0800
Subject: [PATCH] 以及新增商品选择定制商品模板，订单详情页面展示定制商品模板信息
---
seller/src/views/order/order/orderDetail.vue | 306 +++++++++++++++++++++++++++++++++++++++++++++++++-
1 files changed, 297 insertions(+), 9 deletions(-)
diff --git a/seller/src/views/order/order/orderDetail.vue b/seller/src/views/order/order/orderDetail.vue
index dd1896f..54aa0d6 100644
--- a/seller/src/views/order/order/orderDetail.vue
+++ b/seller/src/views/order/order/orderDetail.vue
@@ -146,7 +146,76 @@
}}
</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>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
</Col>
+
</Row>
</Card>
@@ -527,7 +596,7 @@
</div>
</Modal>
<!--璁㈠崟鍒嗗寘瑁瑰彂璐�-->
- <Modal v-model="groupShipModal" :loading="shipLoading" title="鍒嗗寘瑁瑰彂蹇��" width="1000">
+ <Modal v-model="groupShipModal" :loading="shipLoading" title="鍒嗗寘瑁瑰彂蹇��" width="1300">
<div>
<Form ref="groupOrderDeliveryForm" :model="groupOrderDeliveryForm" :label-width="90" :rules="groupOrderDeliverFormValidate" style="position: relative">
<FormItem label="鐗╂祦鍏徃" prop="logisticsId">
@@ -571,7 +640,7 @@
</div>
</template>
<template slot="numSlot" slot-scope="{ row, index }">
- <InputNumber :min="0" :max="row.___num - row.deliverNumber" v-model="data[index].canNum">
+ <InputNumber :min="0" :max="row.___num - row.deliverNumber - row.returnGoodsNumber" v-model="data[index].canNum">
</InputNumber>
</template>
</Table>
@@ -600,6 +669,10 @@
},
data () {
return {
+ isPreviewVisible: false,
+ currentPreviewImage: '',
+ currentPreviewIndex: 0,
+
loading:false,
typeList: [],
showPrices: false,
@@ -760,7 +833,6 @@
);
},
},
-
{
title: "鏁伴噺",
key: "num",
@@ -776,6 +848,55 @@
this.$options.filters.unitPrice(params.row.flowPrice, "锟�")
);
},
+ },
+ {
+ title: "閫�娆炬暟閲�",
+ key: "returnGoodsNumber",
+ minWidth: 80,
+ },
+ {
+ title: "閫�娆鹃噾棰�",
+ key: "refundPrice",
+ minWidth: 80,
+ },
+ {
+ title: "閫�娆剧姸鎬�",
+ key: "isRefund",
+ minWidth: 80,
+ render:(h, params) => {
+ if(params.row.isRefund==='NO_REFUND'){
+ return h(
+ "div",
+ "鏈��娆�"
+ );
+ }else if(params.row.isRefund==='ALL_REFUND'){
+ return h(
+ "div",
+ { style: {color:"red"} },
+ "鍏ㄩ儴閫�娆�"
+ );
+ }else if(params.row.isRefund==='PART_REFUND'){
+ return h(
+ "div",
+ { style: {color:"red"} },
+ "閮ㄥ垎閫�娆�"
+ );
+ }else if(params.row.isRefund==='REFUNDING'){
+ return h(
+ "div",
+ { style: {color:"red"} },
+ "閫�娆句腑"
+ );
+ }
+ else {
+ return h(
+ "div",
+ { style: {color:"red"} },
+ "鏈煡鐘舵��"
+ );
+ }
+
+ }
},
],
data: [], // 鍟嗗搧琛ㄥ崟鏁版嵁
@@ -850,12 +971,95 @@
return h("div", this.$options.filters.unitPrice(params.row.subTotal, "锟�"));
},
},
+ {
+ title: "閫�娆炬暟閲�",
+ key: "returnGoodsNumber",
+ minWidth: 80,
+ },
+ {
+ title: "閫�娆鹃噾棰�",
+ key: "refundPrice",
+ minWidth: 80,
+ },
+ {
+ title: "閫�娆剧姸鎬�",
+ key: "isRefund",
+ minWidth: 80,
+ render:(h, params) => {
+ if(params.row.isRefund==='NO_REFUND'){
+ return h(
+ "div",
+ "鏈��娆�"
+ );
+ }else if(params.row.isRefund==='ALL_REFUND'){
+ return h(
+ "div",
+ { style: {color:"red"} },
+ "鍏ㄩ儴閫�娆�"
+ );
+ }else if(params.row.isRefund==='PART_REFUND'){
+ return h(
+ "div",
+ { style: {color:"red"} },
+ "閮ㄥ垎閫�娆�"
+ );
+ }else if(params.row.isRefund==='REFUNDING'){
+ return h(
+ "div",
+ { style: {color:"red"} },
+ "閫�娆句腑"
+ );
+ }
+ else {
+ return h(
+ "div",
+ { style: {color:"red"} },
+ "鏈煡鐘舵��"
+ );
+ }
+
+ }
+ },
],
orderPackage: [],
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 = '';
+ },
// 閫変腑
selectGroupShipGoodsMethods (selected) {
console.log('selectGroupShipGoodsMethods琚皟鐢�, selected:', JSON.stringify(selected));
@@ -894,7 +1098,7 @@
// 鐩存帴浠巇ata鏁扮粍涓幏鍙栨渶鏂扮殑canNum鍊硷紝鑰屼笉渚濊禆閫夋嫨鏃剁殑鏁版嵁
const currentDataItem = this.data.find(d => d.id === item.id);
const finalDeliveryNum = currentDataItem ? currentDataItem.canNum : item.num;
-
+
console.log('澶勭悊鍟嗗搧椤�:', {
id: item.id,
selectedCanNum: item.canNum,
@@ -902,7 +1106,7 @@
num: item.num,
finalDeliveryNum: finalDeliveryNum
});
-
+
return {
orderItemId: item.id,
deliveryNum: finalDeliveryNum,
@@ -1016,15 +1220,15 @@
this.data = res.result.orderItems.map((item) => {
// 鍙湪寮圭獥鎵撳紑鐘舵�佷笅鎵嶄繚鐣欑敤鎴蜂慨鏀圭殑canNum鍊�
const existingItem = this.groupShipModalOpened ? this.data.find(d => d.id === item.id) : null;
- const defaultCanNum = item.num - item.deliverNumber;
-
+ const defaultCanNum = item.num - item.deliverNumber - item.returnGoodsNumber;
+
return {
...item,
___num: item.num,
_disabled: item.deliverNumber >= item.num,
// 濡傛灉寮圭獥宸叉墦寮�涓旂敤鎴峰凡缁忎慨鏀硅繃canNum涓斿�煎悎鐞嗭紝鍒欎繚鐣欙紱鍚﹀垯浣跨敤榛樿鍊�
- canNum: (existingItem && existingItem.canNum !== undefined && existingItem.canNum <= defaultCanNum)
- ? existingItem.canNum
+ canNum: (existingItem && existingItem.canNum !== undefined && existingItem.canNum <= defaultCanNum)
+ ? existingItem.canNum
: defaultCanNum
};
});
@@ -1106,6 +1310,7 @@
}
},
logisticsList () {
+ this.packageTraceList = []
this.logisticsModal = true;
API_Order.getPackage(this.sn).then((res) => {
if (res.success && res.result != null) {
@@ -1267,6 +1472,89 @@
};
</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 {
--
Gitblit v1.8.0