From 7db491745762b16d4b14d92c1cf999ae36fcb7cb Mon Sep 17 00:00:00 2001
From: peng <peng.com>
Date: 星期一, 13 十月 2025 16:25:31 +0800
Subject: [PATCH] 显示调整
---
manager/src/views/order/order/orderDetail.vue | 325 +++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 323 insertions(+), 2 deletions(-)
diff --git a/manager/src/views/order/order/orderDetail.vue b/manager/src/views/order/order/orderDetail.vue
index dbf46b1..5245977 100644
--- a/manager/src/views/order/order/orderDetail.vue
+++ b/manager/src/views/order/order/orderDetail.vue
@@ -7,6 +7,7 @@
<Button v-if="allowOperation.editConsignee" @click="editAddress" type="primary" ghost>淇敼鏀惰揣鍦板潃</Button>
<Button v-if="allowOperation.cancel" @click="orderCancel" type="warning" ghost>璁㈠崟鍙栨秷</Button>
<Button v-if="orderInfo.order.orderStatus === 'UNPAID'" @click="confirmPrice" type="primary">鏀舵</Button>
+ <Button v-if="allowOperation.showLogistics || orderPackage.length > 0" @click="checkLogistics" type="primary">鏌ョ湅鐗╂祦</Button>
<Button @click="orderLog" type="info" ghost>璁㈠崟鏃ュ織</Button>
<Button @click="printOrder" type="primary" ghost style="float:right;"
v-if="$route.query.orderType != 'VIRTUAL'">鎵撳嵃鍙戣揣鍗�</Button>
@@ -112,6 +113,7 @@
<div class="div-item-right">{{ orderInfo.order.remark }}</div>
</div>
+
<!-- <div class="div-item" v-if="orderInfo.order.needReceipt == false">
<div class="div-item-left">鍙戠エ淇℃伅锛�</div>
<div class="div-item-right">鏆傛棤鍙戠エ淇℃伅</div>
@@ -170,6 +172,64 @@
</div>
</div>
</div>
+ <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>
</Card>
<Card class="mt_10">
<Table :loading="loading" border :columns="columns" :data="data" ref="table" sortable="custom">
@@ -308,6 +368,74 @@
<div slot="footer" style="text-align: right">
<Button @click="modal = false">鍏抽棴</Button>
<Button type="primary" @click="modifyPriceSubmit">璋冩暣</Button>
+ </div>
+ </Modal>
+ <!-- 鏌ヨ鐗╂祦 -->
+ <Modal v-model="logisticsModal" width="40">
+ <p slot="header">
+ <span>鏌ヨ鐗╂祦</span>
+ </p>
+ <div class="layui-layer-wrap">
+ <dl>
+ <dt>璁㈠崟鍙凤細</dt>
+ <dd>
+ <div class="text-box">{{ sn }}</div>
+ </dd>
+ </dl>
+ </div>
+ <div v-if="packageTraceList.length > 0" v-for="(packageItem, packageIndex) in packageTraceList" :key="packageIndex">
+ <div class="layui-layer-wrap">
+ <dl>
+ <dt>鐗╂祦鍏徃锛�</dt>
+ <dd><div class="text-box">{{ packageItem.logisticsName }}</div></dd>
+ </dl>
+ <dl>
+ <dt>蹇�掑崟鍙凤細</dt>
+ <dd><div nctype="ordersSn" class="text-box">{{ packageItem.logisticsNo }}</div></dd>
+ </dl>
+ <div class="div-express-log">
+ <ul class="express-log express-log-name">
+ <li v-for="(item, index) in packageItem.orderPackageItemList" :key="index">
+ <span class="time" style="width: 50%;"><span>鍟嗗搧鍚嶇О锛�</span><span>{{ item.goodsName }}</span></span>
+ <span class="time" style="width: 30%;"><span>鍙戣揣鏃堕棿锛�</span><span>{{ item.logisticsTime }}</span></span>
+ <span class="time" style="width: 20%;"><span>鍙戣揣鏁伴噺锛�</span><span>{{ item.deliverNumber }}</span></span>
+ </li>
+ </ul>
+ </div>
+ <div class="div-express-log">
+ <ul class="express-log" v-if="packageItem.traces && packageItem.traces.traces">
+ <li v-for="(item, index) in packageItem.traces.traces" :key="index">
+ <span class="time">{{ item.AcceptTime || item.acceptTime }}</span>
+ <span class="detail">{{ item.AcceptStation || item.remark }}</span>
+ </li>
+ </ul>
+ <ul class="express-log" v-else><li>鏆傛棤鐗╂祦淇℃伅</li></ul>
+ </div>
+ </div>
+ </div>
+ <div v-if = "packageTraceList.length == 0 && logisticsInfo">
+ <div class="layui-layer-wrap">
+ <dl>
+ <dt>鐗╂祦鍏徃锛�</dt>
+ <dd><div class="text-box">{{ logisticsInfo.shipper }}</div></dd>
+ </dl>
+ <dl>
+ <dt>蹇�掑崟鍙凤細</dt>
+ <dd><div nctype="ordersSn" class="text-box">{{ logisticsInfo.logisticCode }}</div></dd>
+ </dl>
+ <div class="div-express-log">
+ <ul class="express-log" v-if="logisticsInfo && logisticsInfo.traces">
+ <li v-for="(item, index) in logisticsInfo.traces" :key="index">
+ <span class="time">{{ item.AcceptTime }}</span>
+ <span class="detail">{{ item.AcceptStation }}</span>
+ </li>
+ </ul>
+ <ul class="express-log" v-else><li>鏆傛棤鐗╂祦淇℃伅</li></ul>
+ </div>
+ </div>
+ </div>
+ <div slot="footer" style="text-align: right">
+ <Button @click="logisticsModal = false">鍙栨秷</Button>
</div>
</Modal>
<!-- 璁㈠崟鍙栨秷妯℃�佹 -->
@@ -451,6 +579,9 @@
},
data () {
return {
+ isPreviewVisible: false,
+ currentPreviewImage: '',
+ currentPreviewIndex: 0,
typeList: [],
showPrices: false,
printHiddenFlag: false,//闅愯棌淇℃伅
@@ -468,6 +599,12 @@
orderLogModal: false, //寮瑰嚭璋冩暣浠锋牸妗�
checkedLogistics: [], //閫変腑鐨勭墿娴佸叕鍙搁泦鍚�
allowOperation: {}, //璁㈠崟鍙墠鍋氶�夐」
+ logisticsModal: false, //寮瑰嚭鏌ヨ鐗╂祦妗�
+ packageTraceList: [],
+ orderPackage: [],
+ logisticsInfo: {
+ shipper: "",
+ }, //鐗╂祦淇℃伅
sn: "", //璁㈠崟缂栧彿
orderInfo: {
order: {
@@ -602,6 +739,45 @@
minWidth: 80,
},
{
+ title: "閫�娆剧姸鎬�",
+ key: "isRefund",
+ minWidth: 100,
+ 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"} },
+ "鏈煡鐘舵��"
+ );
+ }
+
+ }
+ },
+ {
title: "灏忚",
key: "subTotal",
minWidth: 100,
@@ -638,14 +814,65 @@
},
watch: {
$route (to, from) {
- this.$router.go(0);
+ console.log("to:",to.fullPath)
+ console.log("form:",from.fullPath)
+ // 姝ｇ‘鎵撳嵃璺敱瀵硅薄鐨勬柟娉�
+ if((from.fullPath === "/orderList"|| from.fullPath === "/fictitiousOrderList" ||from.fullPath === "/orderStatistics"||from.fullPath.includes( "/member-detail")) && to.fullPath.includes("/order-detail")){
+ this.sn = this.$route.query.sn;
+ this.getDataList();
+ this.getOrderPackage();
+ }
},
},
methods: {
+ 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);
+ },
gotoHomes () {
return false
},
-
+ getOrderPackage() {
+ API_Order.getPackage(this.sn).then(res => {
+ if (res.success) {
+ this.orderPackage = res.result;
+ console.log('this.orderPackage',this.orderPackage);
+ }
+ })
+ },
+ //鏌ヨ鐗╂祦
+ checkLogistics () {
+ this.logisticsModal = true;
+ if (this.orderPackage.length > 0) {
+ this.logisticsList();
+ } else {
+ this.logistics();
+ }
+ },
+ logisticsList () {
+ this.packageTraceList = []
+ this.logisticsModal = true;
+ API_Order.getPackage(this.sn).then((res) => {
+ if (res.success && res.result != null) {
+ this.packageTraceList = res.result;
+ }
+ });
+ },
+ logistics () {
+ this.logisticsModal = true;
+ API_Order.getTraces(this.sn).then((res) => {
+ if (res.success && res.result != null) {
+ this.logisticsInfo = res.result;
+ }
+ });
+ },
//纭鏀舵
confirmPrice () {
this.$Modal.confirm({
@@ -689,6 +916,7 @@
// 鑾峰彇璁㈠崟璇︽儏
getDataList () {
this.loading = true;
+ console.log("鎵ц鑾峰彇璁㈠崟淇℃伅鎿嶄綔")
API_Order.orderDetail(this.sn).then((res) => {
this.loading = false;
if (res.success) {
@@ -803,8 +1031,10 @@
},
},
mounted () {
+ console.log("鍔犺浇鏁版嵁")
this.sn = this.$route.query.sn;
this.getDataList();
+ this.getOrderPackage();
},
};
</script>
@@ -910,7 +1140,72 @@
}
}
}
+.div-express-log {
+ max-height: 300px;
+ border: solid 1px #e7e7e7;
+ background: #fafafa;
+ overflow-y: auto;
+ overflow-x: auto;
+}
+.layui-layer-wrap {
+ dl {
+ border-top: solid 1px #f5f5f5;
+ margin-top: -1px;
+ overflow: hidden;
+ dt {
+ font-size: 14px;
+ line-height: 28px;
+ display: inline-block;
+ padding: 8px 1% 8px 0;
+ color: #999;
+ }
+
+ dd {
+ font-size: 14px;
+ line-height: 28px;
+ display: inline-block;
+ padding: 8px 0 8px 8px;
+ border-left: solid 1px #f5f5f5;
+
+ .text-box {
+ line-height: 40px;
+ color: #333;
+ word-break: break-all;
+ }
+ }
+ }
+}
+.express-log {
+ /*margin: 5px -10px 5px 5px;*/
+ padding: 10px;
+ list-style-type: none;
+
+ .time {
+ width: 30%;
+ display: inline-block;
+ float: left;
+ }
+
+ .detail {
+ width: 60%;
+ margin-left: 30px;
+ display: inline-block;
+ }
+
+ li {
+ line-height: 30px;
+ }
+}
+
+.express-log-name {
+ li {
+ display: flex;
+ span {
+ display: flex;
+ }
+ }
+}
.f14 {
font-size: 14px;
color: #333;
@@ -978,4 +1273,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