订单详情的包裹Tag

src/api/order/cons.js

@@ -19,3 +19,7 @@ export function getCons(param){
 export function getConsPage(param){
     return request.get('/app-api/order/cons/page',param);
 }
+
+export function getConsList(param){
+    return request.get('/app-api/order/cons/list',param);
+}

src/pages/orderInfo/components/orderConsPackage.vue

+<template>
+  <view class="container">
+    <!-- 表格容器 -->
+    <view class="table">
+      <!-- 表头 -->
+      <view class="table-header">
+        <view class="header-item">快递单号</view>
+        <view class="header-item">商品</view>
+        <view class="header-item">签收时间</view>
+      </view>
+
+      <!-- 表格内容 -->
+      <view class="table-body">
+        <view
+            class="body-row"
+            v-for="(item, index) in list"
+            :key="index"
+        >
+          <view style="color: var(--c396)" class="body-item" @click="navigateTo('../cons/detail?id=' + item.id)">{{ item.expressNo }}</view>
+          <view class="body-item">{{ handleConsItem(item.consItem) }}</view>
+          <view class="body-item">{{ $request.getDate(item.signedTime) }}</view>
+        </view>
+      </view>
+    </view>
+  </view>
+
+</template>
+
+<script>
+import {getConsList} from "@/api/order/cons";
+export default {
+  name:'OrderConsPackage',
+  props: {
+    orderId:Number
+  },
+
+  data() {
+    return {
+      list:[],
+    }
+  },
+
+
+  created(){
+    /**
+     * 根据orderId获取集运列表
+     */
+    getConsList({orderId:this.orderId}).then(res => {
+      if (res.code === 0 && res.data && res.data.length > 0) {
+        this.list = res.data;
+      }
+    });
+  },
+
+  methods:{
+    /**
+     * 组装集运商品字符串
+     */
+    handleConsItem(items){
+      const productStrings = [];
+      items.forEach(item => {
+        const title = item.product?.titleZh || '';
+        const quantity = item.quantity || 0;
+        productStrings.push(`${title}*${quantity}`);
+      });
+      return productStrings.join(',');
+    },
+
+    /**
+     * 页面跳转
+     */
+    navigateTo(page) {
+      uni.navigateTo({
+        // url: '../cons/create'
+        url: page
+      })
+    },
+  },
+
+}
+
+</script>
+
+
+
+<style scoped>
+.container {
+  background-color: #f8f8f8;
+}
+
+/* 表格样式 */
+.table {
+  background-color: #ffffff;
+  border-radius: 10rpx;
+  overflow: hidden;
+  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.1);
+}
+
+/* 表头样式 */
+.table-header {
+  display: flex;
+  background-color: #f5f7fa;
+  padding: 20rpx 0;
+}
+
+.header-item {
+  flex: 1;
+  text-align: center;
+  font-weight: bold;
+  color: #606266;
+  font-size: 28rpx;
+}
+
+/* 表格内容样式 */
+.body-row {
+  display: flex;
+  padding: 24rpx 0;
+  align-items: center; /* 新增垂直居中 */
+  border-bottom: 1rpx solid #ebeef5;
+}
+
+.body-row:last-child {
+  border-bottom: none;
+}
+
+.body-item {
+  flex: 1;
+  text-align: center;
+  display: flex; /* 新增 */
+  align-items: center; /* 新增垂直居中 */
+  justify-content: center; /* 水平居中 */
+  color: #606266;
+  font-size: 26rpx;
+  padding: 0 10rpx;
+}
+
+/* 添加响应式效果 */
+@media (max-width: 768px) {
+  .table {
+    overflow-x: auto;
+  }
+
+  .table-header,
+  .body-row {
+    min-width: 600rpx;
+  }
+}
+</style>

src/pages/orderInfo/orderInfo.vue

@@ -218,6 +218,9 @@
 
 		<view class="order-nav">
 			<view class="order-nav-v">
+        <view :class="activeIndex==3?'act':''" @click="activeIndex=3">
+          <text>{{$lang.lang.orderInfo.package}}</text>
+        </view>
 				<view :class="activeIndex==0?'act':''" @click="activeIndex=0">
 					<text>{{$lang.lang.orderInfo.goodsInfo}}</text>
 				</view>
@@ -338,6 +341,9 @@
 				</view>
 			</view>
 		</view>
+    <view class="order-info" v-if="activeIndex === 3">
+      <order-cons-package :orderId="orderData.orderId"></order-cons-package>
+    </view>
 		<uni-popup ref="pdf" type="center">
 			<view class="link-content" :style="{maxHeight:windowsHeight+'px'}">
 				{{billLadingData}}
@@ -386,9 +392,11 @@
   import Drawee from "@/pages/create_order/components/drawee.vue";
 	//#ifdef H5
 	import FileSaver from 'file-saver'
+  import OrderConsPackage from "@/pages/orderInfo/components/orderConsPackage.vue";
 	//#endif
 	export default {
 		components: {
+      OrderConsPackage,
       Drawee,
 			steper,declarationDocuments
 		},

src/static/lang/zh/orderInfo.js

@@ -46,6 +46,7 @@ export default {
   "goodsInfo": "货物详情",
   "ordering": "订单动态",
   "file": "运单资料/提货单",
+  "package": "包裹",
   "index": "序号",
   "prodZh": "中文品名",
   "prodEn": "英文品名",