update:再次调整订单页面

src/api/mall/trade/order/index.ts

@@ -138,25 +138,33 @@ export const getOrder = async (id: number | null) => {
 
 // 查询交易订单商品详情
 export const getOrderProduct = async (id: number | null) => {
-  return await request.get({ url: `/trade/order/productInfo?id=` + id })
+  return await request.get({ url: `/trade/order-detail/productInfo?id=` + id })
 }
 // 查询交易订单评论详情
 export const getOrderComment = async (id: number | null) => {
-  return await request.get({ url: `/trade/order/page_order_id?id=` + id })
+  return await request.get({ url: `/product/comment/page_order_id?orderId=` + id })
 }
 // 查询交易订单售后详情
 export const getOrderAfterSale = async (id: number | null) => {
-  return await request.get({ url: `/trade/order/after_sale?id=` + id })
+  return await request.get({ url: `/trade/order-detail/after_sale?id=` + id })
 }
-
 // 查询交易订单物流详情
 export const getOrderLogistics = async (id: number | null) => {
-  return await request.get({ url: `/trade/order/getOrderLogistics?id=` + id })
+  return await request.get({ url: `/trade/order-detail/delivery?id=` + id })
 }
 // 查询交易订单支付详情
 export const getOrderPay = async (id: number | null) => {
-  return await request.get({ url: `/trade/order/getOrderPay?id=` + id })
+  return await request.get({ url: `/trade/order-detail/payInfo?id=` + id })
 }
+
+
+
+
+
+
+
+
+
 // 查询交易订单物流详情
 export const getExpressTrackList = async (id: number | null) => {
   return await request.get({ url: `/trade/order/get-express-track-list?id=` + id })

src/views/Home/components/ToBeDone.vue

@@ -142,7 +142,7 @@
 		console.log(type, id)
 		// 如果是类型是2，代表是待发货，调起待发货弹窗
 		if (type == 2) {
-			deliveryFormRef.value?.open({}, "待办", id)
+			deliveryFormRef.value?.open("待办", id)
 		}
 	}
 </script>

src/views/mall/trade/order/components/OrderAfterSale.vue

@@ -1,18 +1,21 @@
 <!-- 订单查看 - 售后 -->
 <template>
   
-  <div class="aftersale-container" v-for="item in 10" :key="item">
-    <h3 class="rating-title">产品名称+型号</h3>
+  <div v-if="formData != null" style="text-align: center;margin-top: 50px;font-size: 14px;">
+    该订单暂无售后记录
+  </div>
+  <div v-else class="aftersale-container">
+    <h3 class="rating-title">{{formData.spuName}}</h3>
     <div class="aftersale-content">
         <div class="aftersale-image">
             <!-- 请将此处替换为实际评价图片链接 -->
-            <img src="https://static.iocoder.cn/mall/a79f5d2ea6bf0c3c11b2127332dfe2df.jpg" alt="评价图片" />
+            <img src="https://static.iocoder.cn/mall/a79f5d2ea6bf0c3c11b2127332dfe2df.jpg" alt="商品主图" />
         </div>
         <div class="aftersale-details">
-            <p class="product-model">退货/换货/补货</p>
-            <p class="first-aftersale">退款：0元</p>
-            <p class="first-aftersale">原由：运输损坏/客户问题</p>
-            <p class="aftersale-comment" title="">描述：由于物流运输问题，由货运公司承担相应的损失，包括产品费用及运输费用</p>
+            <p class="product-model">{{formData.status}}</p>
+            <p class="first-aftersale">退款：{{fenToYuan(formData.refundPrice)}}元</p>
+            <p class="first-aftersale">原由：{{formData.applyReason || "无"}}</p>
+            <p class="aftersale-comment" :title="formData.applyDescription">描述：{{formData.applyDescription || "无"}}</p>
         </div>
     </div>
   </div>
@@ -33,14 +36,14 @@
   })
   const id = props.id
   const getOrderAfterSale = async () => {
-    console.log(id)
     if (id) {
-      const res = (await TradeOrderApi.getOrderAfterSale(id)) as TradeOrderApi.OrderVO
+      const res = (await TradeOrderApi.getOrderAfterSale(id)) 
       // 没有表单信息则关闭页面返回
       if (!res) {
         message.error('交易订单不存在')
         close()
       }
+      console.log(res)
       formData.value = res
     }
   }

src/views/mall/trade/order/components/OrderBaseInfo.vue

@@ -10,7 +10,7 @@
       </el-col>
       <el-col :span="12">
         <el-form-item label="总金额" prop="categoryId">
-          {{ fenToYuan(formData.totalPrice) }}元
+          {{ fenToYuan(formData.payPrice) }}元
         </el-form-item>
       </el-col>
     </el-row>
@@ -66,6 +66,26 @@
         </el-form-item>
       </el-col>
     </el-row>
+    <el-row>
+      <el-col :span="12">
+        <el-form-item label="收货人" prop="brandId">
+          {{formData.receiverName}}
+        </el-form-item>
+      </el-col>
+      <el-col :span="12">
+        <el-form-item label="收货地址" prop="keyword">
+          {{ formData.receiverDetailAddress }}
+        </el-form-item>
+      </el-col>
+    </el-row>
+    <el-row>
+      <el-col :span="12">
+        <el-form-item label="收货人联系电话" prop="brandId">
+          {{ formData.receiverMobile }}
+        </el-form-item>
+      </el-col>
+      
+    </el-row>
     <el-row>
       <el-col :span="24">
         <el-form-item label="买家留言" prop="brandId">

src/views/mall/trade/order/components/OrderComment.vue

@@ -1,17 +1,18 @@
 <!-- 订单查看 - 评论 -->
 <template>
-  
-  <div class="review-container" v-for="item in 10" :key="item">
-    <h3 class="rating-title">3星</h3>
+  <div v-if="!formData.total" style="text-align: center;margin-top: 50px;font-size: 14px;">
+    该订单暂无评论
+  </div>
+  <div v-else class="review-container" v-for="item in formData.list" :key="item">
+    <h3 class="rating-title">{{item.descriptionScores}}星</h3>
     <div class="review-content">
         <div class="review-image">
-            <!-- 请将此处替换为实际评价图片链接 -->
-            <img src="https://static.iocoder.cn/mall/a79f5d2ea6bf0c3c11b2127332dfe2df.jpg" alt="评价图片" />
+            <img :src="item.skuPicUrl" alt="评价图片" />
         </div>
         <div class="review-details">
-            <p class="product-model">型号：产品型号A123</p>
+            <p class="product-model">型号：{{ item.spuName }}-<span v-for="skuItem in item.skuProperties" :key="skuItem.propertyId">{{ skuItem.propertyName }}-{{ skuItem.valueName }}</span></p>
             <p class="first-review">首评</p>
-            <p class="review-comment" title="评语：该产品性能优秀，使用体验良好，值得推荐该产品性能优秀，使用体验良好，值得推荐该产品性能优秀，使用体验良好，值得推荐该产品性能优秀，使用体验良好，值得推荐该产品性能优秀，使用体验良好，值得推荐该产品性能优秀，使用体验良好，值得推荐该产品性能优秀，使用体验良好，值得推荐。">评语：该产品性能优秀，使用体验良好，值得推荐该产品性能优秀，使用体验良好，值得推荐该产品性能优秀，使用体验良好，值得推荐该产品性能优秀，使用体验良好，值得推荐该产品性能优秀，使用体验良好，值得推荐该产品性能优秀，使用体验良好，值得推荐该产品性能优秀，使用体验良好，值得推荐。</p>
+            <p class="review-comment" :title="item.content">评语：{{item.content}}</p>
         </div>
     </div>
   </div>
@@ -32,16 +33,18 @@
   })
   const id = props.id
   const getOrderComment = async () => {
-    console.log(id)
+    
     if (id) {
-      const res = (await TradeOrderApi.getOrderComment(id)) as TradeOrderApi.OrderVO
+      const res = (await TradeOrderApi.getOrderComment(id)) 
       // 没有表单信息则关闭页面返回
       if (!res) {
         message.error('交易订单不存在')
-        close()
+        // close()
       }
       formData.value = res
+      // console.log(formData.value)
     }
+    
   }
 
 	const message = useMessage() // 消息弹窗
@@ -58,8 +61,8 @@
       align-items: flex-start;
       width: 355px;
       border: 1px solid #ebeef5;
-      height: 180px;
-      padding: 0 20px;
+      height: auto;
+      padding: 0 20px 16px;
       border-radius: 10px;
       float: left;
       margin: 10px;
@@ -75,6 +78,7 @@
         align-items: center;
         justify-content: flex-start;
         width: 100%;
+
     }
     .review-image{margin-right: 10px;}
     .review-image img {

src/views/mall/trade/order/components/OrderIndex.vue

@@ -21,46 +21,58 @@
 			<div class="left">
 				<!-- <SPuUploadImg v-model="" :disabled="isDetail" /> -->
 				<el-tabs v-model="activeName" tab-position="left" class="child-tabs">
-
 					<el-tab-pane label="基本信息" name="info" />
 					<el-tab-pane label="商品" name="product" />
-          <!-- 评价、客服、售后、物流 -->
           <el-tab-pane label="评价" name="comment" />
           <el-tab-pane label="客服" name="service" />
           <el-tab-pane label="售后" name="afterSale" />
           <el-tab-pane label="物流" name="logistics" />
           <el-tab-pane label="支付" name="pay" />
-
+          <el-tab-pane label="日志" name="logs" />
 				</el-tabs>
 			</div>
 			<div class="right">
 
-				<div v-show="activeName == 'info'">
+				<div v-if="activeName == 'info'">
 					<OrderBaseInfo ref="infoRef" :is-detail="isDetail" :id="orderId" />
 				</div>
-        <div v-show="activeName == 'product'">
+        <div v-if="activeName == 'product'">
 					<OrderProduct ref="infoRef" :is-detail="isDetail" :id="orderId" />
 				</div>
-        <div v-show="activeName == 'comment'">
+        <div v-if="activeName == 'comment'">
 					<OrderComment ref="infoRef" :is-detail="isDetail" :id="orderId" />
 				</div>
-        <div v-show="activeName == 'service'">
+        <div v-if="activeName == 'service'">
 					<OrderService ref="infoRef" :is-detail="isDetail" :id="orderId" />
 				</div>
-        <div v-show="activeName == 'afterSale'">
+        <div v-if="activeName == 'afterSale'">
 					<OrderAfterSale ref="infoRef" :is-detail="isDetail" :id="orderId" />
 				</div>
-        <div v-show="activeName == 'logistics'">
+        <div v-if="activeName == 'logistics'">
 					<OrderLogistics ref="infoRef" :is-detail="isDetail" :id="orderId" />
 				</div>
-        <div v-show="activeName == 'pay'">
+        <div v-if="activeName == 'pay'">
 					<OrderPay ref="infoRef" :is-detail="isDetail" :id="orderId" />
 				</div>
+        <div v-if="activeName == 'logs'">
+					<OrderLogs ref="infoRef" :is-detail="isDetail" :id="orderId" />
+				</div>
 			</div>
+
+			<el-form style="clear: both;">
+				<el-form-item style="float: right">
+					<el-button :loading="formLoading" type="primary" v-if="formData.deliveryType === DeliveryTypeEnum.EXPRESS.type && formData.status === TradeOrderStatusEnum.UNDELIVERED.status" @click="handleDelivery(formData.id)">发货</el-button>
+					<el-button :loading="formLoading" type="primary" v-if="formData.deliveryType === DeliveryTypeEnum.EXPRESS.type && formData.status === TradeOrderStatusEnum.UNDELIVERED.status" @click="updateAddress(formData.id,formData.receiverAreaName,formData.receiverMobile,formData.receiverAreaId,formData.receiverDetailAddress)">修改地址</el-button>
+					<el-button :loading="formLoading" type="primary" v-if="formData.status === TradeOrderStatusEnum.COMPLETED.status"  @click="handleInvoice">开发票</el-button>
+					<el-button :loading="formLoading" type="primary" @click="handleRemark(formData.id,formData.remark)">备注</el-button>
+				</el-form-item>
+			</el-form>
 		</ContentWrap>
 	</el-dialog>
 	<!-- </div> -->
-
+	<OrderDeliveryForm ref="deliveryFormRef" @success="getList" />
+	<OrderUpdateRemarkForm ref="updateRemarkForm" @success="getList" />
+	<OrderUpdateAddressForm ref="updateAddressFormRef" @success="getDetail" />
 </template>
 <script lang="ts" setup>
 	import { cloneDeep } from 'lodash-es'
@@ -73,7 +85,11 @@
 	import OrderAfterSale from './OrderAfterSale.vue'
 	import OrderLogistics from './OrderLogistics.vue'
 	import OrderPay from './OrderPay.vue'
-
+  import OrderLogs from './OrderLogs.vue'
+	import { DeliveryTypeEnum, TradeOrderStatusEnum } from '@/utils/constants'
+	import OrderDeliveryForm from '@/views/mall/trade/order/form/OrderDeliveryForm.vue'
+	import OrderUpdateRemarkForm from '@/views/mall/trade/order/form/OrderUpdateRemarkForm.vue'
+	import OrderUpdateAddressForm from '@/views/mall/trade/order/form/OrderUpdateAddressForm.vue'
 	import {
 		Close
 	} from '@element-plus/icons-vue'
@@ -90,10 +106,13 @@
 	const dialogTitle = ref('') // 弹窗的标题
   const isFullScreen = ref(false)
   const orderId = ref(0)
+	const formData = ref({})
 	/** 打开弹窗 */
-	const open = async (type:string,id : number,no:string) => {
-    orderId.value = id
+	const open = async (type:string,row:object,no:string) => {
+    orderId.value = row.id
+		formData.value = row
     dialogTitle.value = "查看-"+no
+    activeName.value = "info"
     if ('view' == type) {
 			isDetail.value = true
 		} else {
@@ -105,7 +124,19 @@
 		
 	defineExpose({ open }) // 提供 open 方法，用于打开弹窗
 
-	
+	/** 操作分发 */
+	const deliveryFormRef = ref()
+	const updateRemarkForm = ref()
+	const updateAddressFormRef = ref() // 收货地址表单 Ref
+	const updateAddress = (id,receiverName,receiverMobile,receiverAreaId,receiverDetailAddress) => {
+		updateAddressFormRef.value.open(id,receiverName,receiverMobile,receiverAreaId,receiverDetailAddress)
+	}
+	const handleDelivery = (id) =>{
+		deliveryFormRef.value?.open("订单列表",id)
+	}
+	const handleRemark = (id,remark) => {
+		updateRemarkForm.value?.open(id,remark)
+	}
 	
 	const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
 	

src/views/mall/trade/order/components/OrderLogistics.vue

@@ -1,29 +1,34 @@
 <!-- 订单查看 - 物流 -->
 <template>
-  
-  <div class="aftersale-container" v-for="item in 10" :key="item">
-    <h3 class="rating-title">物流订单号</h3>
+  <div v-if="formData.logisticsId == 0 || formData.logisticsId == null" style="text-align: center;margin-top: 50px;font-size: 14px;">
+    该订单暂无物流记录
+  </div>
+  <div v-else class="aftersale-container">
+    <h3 class="rating-title">{{formData.logisticsNo}}</h3>
     <div class="aftersale-content">
         <div class="aftersale-image">
             <!-- 请将此处替换为实际评价图片链接 -->
             <img src="https://static.iocoder.cn/mall/a79f5d2ea6bf0c3c11b2127332dfe2df.jpg" alt="评价图片" />
         </div>
         <div class="aftersale-details">
-            <p class="product-model">中通物流</p>
-            <p class="first-aftersale">运费：18元</p>
-            <p class="first-aftersale">配送方式：送货上门</p>
-            <p class="aftersale-comment" title="">备注：物流相关的备注信息填写在这里，不够的用省略号物流相关的备注信息填写在这里，不够的用省略号物流相关的备注信息填写在这里，不够的用省略号物流相关的备注信息填写在这里，不够的用省略号物流相关的备注信息填写在这里，不够的用省略号物流相关的备注信息填写在这里，不够的用省略号物流相关的备注信息填写在这里，不够的用省略号</p>
+            <p class="product-model">{{deliveryExpress(formData.logisticsId)}}</p>
+            <p class="first-aftersale">运费：{{ fenToYuan(formData.deliveryPrice)}}元</p>
+            <p class="first-aftersale">配送方式：{{formData.deliveryType}}</p>
+            <p class="aftersale-comment" :title="formData.remark">备注：{{formData.remark}}</p>
         </div>
     </div>
   </div>
 
 </template>
 <script lang="ts" setup>
+  // import { computed } from 'vue'
 	import { propTypes } from '@/utils/propTypes'
   import * as TradeOrderApi from '@/api/mall/trade/order'
   import { fenToYuan } from '@/utils'
   import { formatDate } from '@/utils/formatTime'
   import { DICT_TYPE, getDictLabel, getDictObj } from '@/utils/dict'
+	import * as DeliveryExpressApi from '@/api/mall/trade/delivery/express'
+
 	const props = defineProps({
     id: propTypes.number.def(undefined), // 订单ID
     showPickUp: propTypes.bool.def(true) // 显示核销按钮
@@ -33,7 +38,6 @@
   })
   const id = props.id
   const getOrderLogistics = async () => {
-    console.log(id)
     if (id) {
       const res = (await TradeOrderApi.getOrderLogistics(id)) as TradeOrderApi.OrderVO
       // 没有表单信息则关闭页面返回
@@ -42,14 +46,25 @@
         close()
       }
       formData.value = res
+      // console.log(formData.value)
     }
   }
 
 	const message = useMessage() // 消息弹窗
-
-
+  const deliveryExpress = (id) =>{
+    for (let index = 0; index < deliveryExpressList.value.length; index++) {
+      const element = deliveryExpressList.value[index];
+      if (element.id == id) {
+        return element.name
+      }
+    }
+  }
+  
+  const deliveryExpressList = ref<DeliveryExpressApi.DeliveryExpressVO[]>([])// 物流公司
 	onMounted(async () => {
     getOrderLogistics()
+    deliveryExpressList.value = await DeliveryExpressApi.getSimpleDeliveryExpressList()
+    // await deliveryExpress()
 	})
 </script>
 <style lang="scss" scoped>

src/views/mall/trade/order/components/OrderLogs.vue

@@ -0,0 +1,159 @@
+<template>
+<!-- 订单日志 -->
+  <ContentWrap>
+    <el-descriptions>
+      <el-descriptions-item labelClassName="no-colon">
+        <el-timeline>
+          <el-timeline-item
+            v-for="(log, index) in formData.logs"
+            :key="index"
+            :timestamp="formatDate(log.createTime!)"
+            placement="top"
+          >
+            <div class="el-timeline-right-content">
+              {{ log.content }}
+            </div>
+            <template #dot>
+              <span
+                :style="{ backgroundColor: getUserTypeColor(log.userType!) }"
+                class="dot-node-style"
+              >
+                {{ getDictLabel(DICT_TYPE.USER_TYPE, log.userType)[0] }}
+              </span>
+            </template>
+          </el-timeline-item>
+        </el-timeline>
+      </el-descriptions-item>
+    </el-descriptions>
+  </ContentWrap>
+</template>
+
+<script lang="ts" setup>
+import * as TradeOrderApi from '@/api/mall/trade/order'
+import { propTypes } from '@/utils/propTypes'
+import { formatDate } from '@/utils/formatTime'
+import { DICT_TYPE, getDictLabel, getDictObj } from '@/utils/dict'
+// 订单详情
+const formData = ref<TradeOrderApi.OrderVO>({
+  logs: []
+})
+const props = defineProps({
+  id: propTypes.number.def(undefined), // 订单ID
+  showPickUp: propTypes.bool.def(true) // 显示核销按钮
+})
+/** 获得 userType 颜色 */
+const getUserTypeColor = (type: number) => {
+  const dict = getDictObj(DICT_TYPE.USER_TYPE, type)
+  switch (dict?.colorType) {
+    case 'success':
+      return '#67C23A'
+    case 'info':
+      return '#909399'
+    case 'warning':
+      return '#E6A23C'
+    case 'danger':
+      return '#F56C6C'
+  }
+  return '#409EFF'
+}
+const id = props.id
+const getDetail = async () => {
+  console.log(id)
+  if (id) {
+    const res = (await TradeOrderApi.getOrder(id)) as TradeOrderApi.OrderVO
+    // 没有表单信息则关闭页面返回
+    if (!res) {
+      message.error('交易订单不存在')
+      close()
+    }
+    formData.value = res
+  }
+}
+onMounted(async () => {
+  getDetail()
+})
+</script>
+
+<style lang="scss" scoped>
+.el-card{
+  border:unset
+}
+:deep(.el-descriptions) {
+  &:not(:nth-child(1)) {
+    margin-top: 20px;
+  }
+
+  .el-descriptions__title {
+    display: flex;
+    align-items: center;
+
+    &::before {
+      display: inline-block;
+      width: 3px;
+      height: 20px;
+      margin-right: 10px;
+      background-color: #409eff;
+      content: '';
+    }
+  }
+
+  .el-descriptions-item__container {
+    margin: 0 10px;
+
+    .no-colon {
+      margin: 0;
+
+      &::after {
+        content: '';
+      }
+    }
+  }
+}
+
+// 时间线样式调整
+:deep(.el-timeline) {
+  margin: 10px 0 0 160px;
+
+  .el-timeline-item__wrapper {
+    position: relative;
+    top: -20px;
+
+    .el-timeline-item__timestamp {
+      position: absolute !important;
+      top: 10px;
+      left: -150px;
+    }
+  }
+
+  .el-timeline-right-content {
+    display: flex;
+    align-items: center;
+    min-height: 30px;
+    padding: 10px;
+    background-color: #f7f8fa;
+
+    &::before {
+      position: absolute;
+      top: 10px;
+      left: 13px; /* 将伪元素水平居中 */
+      border-color: transparent #f7f8fa transparent transparent; /* 尖角颜色，左侧朝向 */
+      border-style: solid;
+      border-width: 8px; /* 调整尖角大小 */
+      content: ''; /* 必须设置 content 属性 */
+    }
+  }
+
+  .dot-node-style {
+    position: absolute;
+    left: -5px;
+    display: flex;
+    width: 20px;
+    height: 20px;
+    font-size: 10px;
+    color: #fff;
+    border-radius: 50%;
+    justify-content: center;
+    align-items: center;
+  }
+}
+</style>

src/views/mall/trade/order/components/OrderProduct.vue

@@ -1,4 +1,4 @@
-<!-- 订单查看 - 产品 -->
+<!-- 订单查看 - 商品 -->
 <template>
 	<el-form ref="formRef" :model="formData"  label-width="120px" :disabled="isDetail" :border="true">
     

src/views/mall/trade/order/components/orderPay.vue

@@ -1,10 +1,10 @@
-<!-- 订单查看 - 产品 -->
+<!-- 订单查看 - 支付 -->
 <template>
 	<el-form ref="formRef" :model="formData"  label-width="120px" :disabled="isDetail" :border="true">
     <el-row>
       <el-col :span="12">
         <el-form-item label="总金额" prop="no">
-          {{ fenToYuan(formData.totalPrice!) }} 元
+          {{ fenToYuan(formData.payPrice) }} 元
         </el-form-item>
       </el-col>
       <el-col :span="12">
@@ -22,7 +22,7 @@
       </el-col>
       <el-col :span="12">
         <el-form-item label="路径" prop="keyword">
-          无
+          {{formData.path}}
         </el-form-item>
       </el-col>
     </el-row>
@@ -31,7 +31,7 @@
 
       <el-col >
         <el-form-item label="备注" prop="keyword">
-          无
+          {{formData.remark}}
         </el-form-item>
       </el-col>
     </el-row>

src/views/mall/trade/order/form/OrderDeliveryForm.vue

@@ -46,19 +46,21 @@
 	const formRef = ref() // 表单 Ref
 
 	/** 打开弹窗 */
-	const open = async (row : TradeOrderApi.OrderVO, openType : any, orderId : any) => {
+	const open = async (openType : any, orderId : any) => {
 
 		resetForm()
 		// 设置数据
-		copyValueToTarget(formData.value, row)
+		// copyValueToTarget(formData.value, row)
+
+		console.log(orderId)
 		//如果是首页待办点进来的，即点进来将id设为从待办传来的id
-		if (openType == "待办") {
-			formData.value.id = orderId
-		}
+		
+		formData.value.id = orderId
+		
 
-		if (row.logisticsId === 0) {
-			expressType.value = 'none'
-		}
+		// if (row.logisticsId === 0) {
+		// 	expressType.value = 'none'
+		// }
 		dialogVisible.value = true
 	}
 	defineExpose({ open }) // 提供 open 方法，用于打开弹窗
@@ -76,7 +78,7 @@
 				data.logisticsNo = ''
 			}
 			await TradeOrderApi.deliveryOrder(data)
-			message.success(t('common.updateSuccess'))
+			message.success("发货成功")
 			dialogVisible.value = false
 			// 发送操作成功的事件
 			emit('success', true)

src/views/mall/trade/order/form/OrderUpdateAddressForm.vue

@@ -54,10 +54,15 @@ const areaList = ref([]) // 地区列表
 const formRef = ref() // 表单 Ref
 
 /** 打开弹窗 */
-const open = async (row: TradeOrderApi.OrderVO) => {
+const open = async (id,receiverName,receiverMobile,receiverAreaId,receiverDetailAddress) => {
   resetForm()
   // 设置数据
-  copyValueToTarget(formData.value, row)
+  formData.value.id = id
+  formData.value.receiverName = receiverName
+  formData.value.receiverMobile = receiverMobile
+  formData.value.receiverAreaId = receiverAreaId
+  formData.value.receiverDetailAddress = receiverDetailAddress
+  // copyValueToTarget(formData.value, row)
   dialogVisible.value = true
 }
 defineExpose({ open }) // 提供 open 方法，用于打开弹窗

src/views/mall/trade/order/form/OrderUpdateRemarkForm.vue

@@ -33,11 +33,11 @@ const formData = ref({
 const formRef = ref() // 表单 Ref
 
 /** 打开弹窗 */
-const open = async (row: TradeOrderApi.OrderVO) => {
+const open = async (id,remark) => {
   resetForm()
   // 设置数据
-  formData.value.id = row.id
-  formData.value.remark = row.remark
+  formData.value.id = id
+  formData.value.remark = remark
   dialogVisible.value = true
 }
 defineExpose({ open }) // 提供 open 方法，用于打开弹窗

src/views/mall/trade/order/index.vue

@@ -1,8 +1,4 @@
 <template>
-	
-
-
-	
 	<ContentWrap class="order-div">
 		<!-- 搜索 -->
 		<div style="position: relative;">
@@ -121,7 +117,7 @@
 									<el-dropdown-item v-if="
                       row.deliveryType === DeliveryTypeEnum.EXPRESS.type &&
                       row.status === TradeOrderStatusEnum.UNDELIVERED.status
-                    " command="delivery">
+                    "command="delivery">
 										<Icon icon="ep:takeaway-box" />
 										发货
 									</el-dropdown-item>
@@ -137,28 +133,44 @@
 			</OrderTableColumn>
 		</el-table> -->
 		<el-row>
-			<el-col v-for="(o, index) in list" class="product-card" :key="index" :span="7" @mouseover="handleMouseOver(index)" @mouseout="handleMouseOut(index)">
-				<el-card @click="openDetail('view',o.id,o.no)">
+		
+			<el-col  v-for="(o, index) in list" class="product-card" :key="index" :span="7" :xl="7" :lg="7" :md="24" :sm="24" :xs="24" @mouseover="handleMouseOver(index)" @mouseout="handleMouseOut(index)">
+				<el-card @click="openDetail('view',o,o.no)">
 					<div style="display: flex;justify-content: space-between;align-items: center;margin-bottom: 5px;">
-						<p style="width: 100%;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;font-size: 16px;color:#000"
-							title="">{{o.no}}
+						<p style="width: 95%;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;font-size: 16px;color:#000"
+							title=""><span v-for="item in o.items" :key="item.id">{{item.spuName}}</span>
 						</p>
-						<div 
-							 class="setting" v-show="o.showSetting" >
-							<el-icon size="20" color="rgb(220 223 231)">
-								<Setting />
-							</el-icon>
+						<div class="setting" @click.stop="">
+								<el-dropdown v-hasPermi="['trade:order:update']" @command="(command) => handleCommand(command, row)">
+								<span>
+									<el-icon size="20" color="rgb(220 223 231)">
+										<Operation />
+									</el-icon>
+									<!-- <el-icon class="el-icon--right">
+										<arrow-down />
+									</el-icon> -->
+								</span>
+								<template #dropdown >
+									<el-dropdown-menu >
+										<el-dropdown-item @click="handleDelivery(o.id)" v-if="o.deliveryType === DeliveryTypeEnum.EXPRESS.type && o.status === TradeOrderStatusEnum.UNDELIVERED.status">发货</el-dropdown-item>
+										<el-dropdown-item @click="handleRemark(o.id,o.remark)">备注</el-dropdown-item>
+										<el-dropdown-item @click="handleInvoice" v-if="o.status === TradeOrderStatusEnum.COMPLETED.status">开发票</el-dropdown-item>
+										<el-dropdown-item v-if="o.deliveryType === DeliveryTypeEnum.EXPRESS.type && o.status === TradeOrderStatusEnum.UNDELIVERED.status" @click="updateAddress(o.id,o.receiverAreaName,o.receiverMobile,o.receiverAreaId,o.receiverDetailAddress)">修改地址</el-dropdown-item>
+									</el-dropdown-menu>
+								</template>
+							</el-dropdown>
 						</div>
 					</div>
 					<div style="display:flex;align-items: center;">
 						<div style="width: 178px;height: 100px;margin-right:10px;border:1px solid rgb(220 223 231);border-radius: 5px;display: flex;align-items: center;justify-content: center;"
 							>
-							<img src="" style="width: auto;height: auto;max-width: 100%;max-height: 100%;" />
+							<img :src="o.items[0].picUrl" style="width: auto;height: auto;max-width: 100%;max-height: 100%;" />
 						</div>
 
 						<div style='line-height: 25px;'>
 							<p>¥{{ o.payPrice }}</p>
-							<p> {{ getDictObj(DICT_TYPE.TRADE_ORDER_STATUS, o.status)?.label }}</p>
+							<p>{{ o.no }}</p>
+							<p>{{ getDictObj(DICT_TYPE.TRADE_ORDER_STATUS, o.status)?.label }}</p>
 							<p>{{o.user.nickname}}</p>
 							<p>{{formatDate(o.createTime)}}</p>
 							
@@ -168,7 +180,7 @@
 			</el-col>
 		</el-row>
 		<div v-if="list.length == 0">
-			<p style="text-align: center;margin-top: 100px;">暂无商品</p>
+			<p style="text-align: center;margin-top: 100px;">暂无订单</p>
 		</div>
 		<!-- 分页 -->
 		<Pagination v-model:limit="queryParams.pageSize" v-model:page="queryParams.pageNo" :total="total"
@@ -178,6 +190,7 @@
 	<!-- 各种操作的弹窗 -->
 	<OrderDeliveryForm ref="deliveryFormRef" @success="getList" />
 	<OrderUpdateRemarkForm ref="updateRemarkForm" @success="getList" />
+	<OrderUpdateAddressForm ref="updateAddressFormRef" @success="getDetail" />
 	<OrderIndex ref="formRef" @success="getList" />
 
 </template>
@@ -192,11 +205,10 @@
 	import * as DeliveryExpressApi from '@/api/mall/trade/delivery/express'
 	import { DeliveryTypeEnum, TradeOrderStatusEnum } from '@/utils/constants'
 	import { Setting, Search, Operation } from '@element-plus/icons-vue'
-
 	import { OrderTableColumn } from './components'
 	import { formatDate } from '@/utils/formatTime'
-
 	import OrderIndex from "./components/OrderIndex.vue"
+	import OrderUpdateAddressForm from '@/views/mall/trade/order/form/OrderUpdateAddressForm.vue'
 
 	const searchMoreShow = ref(false)
 	// 鼠标移入显示变动图标
@@ -215,10 +227,10 @@
 		searchMoreShow.value = false
 	}
 	const formRef = ref()
-	const openDetail = (type:string,id : number,no:string) => {
-		formRef.value.open(type,id,no)
+	const openDetail = (type:string,row : {},no:string) => {
+		formRef.value.open(type,row,no)
 	}
-
+	
 	defineOptions({ name: 'TradeOrder' })
 	const { currentRoute, push } = useRouter() // 路由跳转
 	const loading = ref(true) // 列表的加载中
@@ -313,16 +325,17 @@
 	/** 操作分发 */
 	const deliveryFormRef = ref()
 	const updateRemarkForm = ref()
-	const handleCommand = (command : string, row : TradeOrderApi.OrderVO) => {
-		switch (command) {
-			case 'remark':
-				updateRemarkForm.value?.open(row)
-				break
-			case 'delivery':
-				deliveryFormRef.value?.open(row)
-				break
-		}
+	const updateAddressFormRef = ref() // 收货地址表单 Ref
+	const updateAddress = (id,receiverName,receiverMobile,receiverAreaId,receiverDetailAddress) => {
+		updateAddressFormRef.value.open(id,receiverName,receiverMobile,receiverAreaId,receiverDetailAddress)
+	}
+	const handleDelivery = (id) =>{
+		deliveryFormRef.value?.open("订单列表",id)
 	}
+	const handleRemark = (id,remark) => {
+		updateRemarkForm.value?.open(id,remark)
+	}
+
 
 	// 监听路由变化更新列表，解决订单保存/更新后，列表不刷新的问题。
 	watch(
@@ -339,7 +352,9 @@
 		await getList()
 		pickUpStoreList.value = await PickUpStoreApi.getListAllSimple()
 		deliveryExpressList.value = await DeliveryExpressApi.getSimpleDeliveryExpressList()
+		
 	})
+	
 </script>
 <style lang="scss" scoped>
 	.order-div {
@@ -405,7 +420,12 @@
 			align-items: center;
 			justify-content: center;
 		}
-
+		.setting :focus-visible {
+			outline: 0;
+		}
+		.setting:focus-visible {
+			font-size: 20px;
+		}
 		.setting:hover {
 			background: #666
 		}