update:更新了订单相关页面

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

@@ -95,7 +95,7 @@ export interface OrderItemRespVO {
   orderPartPrice?: number | null //子订单分摊金额（总）
   orderDividePrice?: number | null //分摊后子订单实付金额（总）
   // ========== 营销基本信息 ==========
-  // TODO 芋艿：在捉摸一下
+
   // ========== 售后基本信息 ==========
   afterSaleStatus?: number | null // 售后状态
   properties?: ProductPropertiesVO[] //属性数组
@@ -125,6 +125,7 @@ export const getOrderPage = async (params: any) => {
   return await request.get({ url: `/trade/order/page`, params })
 }
 
+
 // 查询交易订单统计
 export const getOrderSummary = async (params: any) => {
   return await request.get<TradeOrderSummaryRespVO>({ url: `/trade/order/summary`, params })
@@ -135,6 +136,27 @@ export const getOrder = async (id: number | null) => {
   return await request.get({ url: `/trade/order/get-detail?id=` + id })
 }
 
+// 查询交易订单商品详情
+export const getOrderProduct = async (id: number | null) => {
+  return await request.get({ url: `/trade/order/productInfo?id=` + id })
+}
+// 查询交易订单评论详情
+export const getOrderComment = async (id: number | null) => {
+  return await request.get({ url: `/trade/order/page_order_id?id=` + id })
+}
+// 查询交易订单售后详情
+export const getOrderAfterSale = async (id: number | null) => {
+  return await request.get({ url: `/trade/order/after_sale?id=` + id })
+}
+
+// 查询交易订单物流详情
+export const getOrderLogistics = async (id: number | null) => {
+  return await request.get({ url: `/trade/order/getOrderLogistics?id=` + id })
+}
+// 查询交易订单支付详情
+export const getOrderPay = async (id: number | null) => {
+  return await request.get({ url: `/trade/order/getOrderPay?id=` + id })
+}
 // 查询交易订单物流详情
 export const getExpressTrackList = async (id: number | null) => {
   return await request.get({ url: `/trade/order/get-express-track-list?id=` + id })

src/views/mall/product/spu/index.vue

@@ -4,8 +4,6 @@
 	<ContentWrap style="" class="spu-div">
 		<div style="position: relative;">
 			<div style="text-align: right;background: #fafbfc;padding: 10px;">
-
-
 				<el-input v-model="queryParams.name" class="!w-240px" placeholder="搜索商品名称" @keyup.enter="handleQuery">
 					<template #suffix>
 						<el-icon class="el-input__icon" @click="handleQuery" style="cursor: pointer;">
@@ -15,7 +13,6 @@
 					<template #append>
 						<el-button :icon="Operation" @click="showSearchMore" />
 					</template>
-
 				</el-input>
 				&nbsp;
 				<el-button v-hasPermi="['product:spu:create']" @click="openForm('create','',0)">
@@ -97,108 +94,7 @@
 		<div v-if="list.length == 0">
 			<p style="text-align: center;margin-top: 100px;">暂无商品</p>
 		</div>
-		<!--<el-table v-loading="loading" :data="list">
-			<el-table-column type="expand">
-				<template #default="{ row }">
-					<el-form class="spu-table-expand" label-position="left">
-						<el-row>
-							<el-col :span="24">
-								<el-row>
-									<el-col :span="8">
-										<el-form-item label="商品分类:">
-											<span>{{ formatCategoryName(row.categoryId) }}</span>
-										</el-form-item>
-									</el-col>
-									<el-col :span="8">
-										<el-form-item label="市场价:">
-											<span>{{ fenToYuan(row.marketPrice) }}</span>
-										</el-form-item>
-									</el-col>
-									<el-col :span="8">
-										<el-form-item label="成本价:">
-											<span>{{ fenToYuan(row.costPrice) }}</span>
-										</el-form-item>
-									</el-col>
-								</el-row>
-							</el-col>
-						</el-row>
-						<el-row>
-							<el-col :span="24">
-								<el-row>
-									<el-col :span="8">
-										<el-form-item label="浏览量:">
-											<span>{{ row.browseCount }}</span>
-										</el-form-item>
-									</el-col>
-									<el-col :span="8">
-										<el-form-item label="虚拟销量:">
-											<span>{{ row.virtualSalesCount }}</span>
-										</el-form-item>
-									</el-col>
-								</el-row>
-							</el-col>
-						</el-row>
-					</el-form>
-				</template>
-			</el-table-column>
-			<el-table-column label="商品编号" min-width="140" prop="id" />
-			<el-table-column label="商品信息" min-width="300">
-				<template #default="{ row }">
-					<div class="flex">
-						<el-image fit="cover" :src="row.picUrl" class="flex-none w-50px h-50px"
-							@click="imagePreview(row.picUrl)" />
-						<div class="ml-4 overflow-hidden">
-							<el-tooltip effect="dark" :content="row.name" placement="top">
-								<div>
-									{{ row.name }}
-								</div>
-							</el-tooltip>
-						</div>
-					</div>
-				</template>
-			</el-table-column>
-			<el-table-column align="center" label="价格" min-width="160" prop="price">
-				<template #default="{ row }"> ¥ {{ fenToYuan(row.price) }}</template>
-			</el-table-column>
-			<el-table-column align="center" label="销量" min-width="90" prop="salesCount" />
-			<el-table-column align="center" label="库存" min-width="90" prop="stock" />
-			<el-table-column align="center" label="排序" min-width="70" prop="sort" />
-			<el-table-column align="center" label="销售状态" min-width="80">
-				<template #default="{ row }">
-					<template v-if="row.status >= 0">
-						<el-switch v-model="row.status" :active-value="1" :inactive-value="0" active-text="上架"
-							inactive-text="下架" inline-prompt @change="handleStatusChange(row)" />
-					</template>
-					<template v-else>
-						<el-tag type="info">回收站</el-tag>
-					</template>
-				</template>
-			</el-table-column>
-			<el-table-column :formatter="dateFormatter" align="center" label="创建时间" prop="createTime" width="180" />
-			<el-table-column align="center" fixed="right" label="操作" min-width="200">
-				<template #default="{ row }">
-					<el-button link type="primary" @click="openDetail(row.id)"> 详情 </el-button>
-					<el-button v-hasPermi="['product:spu:update']" link type="primary" @click="openForm(row.id)">
-						修改
-					</el-button>
-					<template v-if="queryParams.tabType === 4">
-						<el-button v-hasPermi="['product:spu:delete']" link type="danger" @click="handleDelete(row.id)">
-							删除
-						</el-button>
-						<el-button v-hasPermi="['product:spu:update']" link type="primary"
-							@click="handleStatus02Change(row, ProductSpuStatusEnum.DISABLE.status)">
-							恢复
-						</el-button>
-					</template>
-					<template v-else>
-						<el-button v-hasPermi="['product:spu:update']" link type="danger"
-							@click="handleStatus02Change(row, ProductSpuStatusEnum.RECYCLE.status)">
-							回收
-						</el-button>
-					</template>
-				</template>
-			</el-table-column>
-		</el-table>-->
+		
 
 		<!-- 分页 -->
 		<Pagination v-model:limit="queryParams.pageSize" v-model:page="queryParams.pageNo" :total="total"

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

@@ -0,0 +1,101 @@
+<!-- 订单查看 - 售后 -->
+<template>
+  
+  <div class="aftersale-container" v-for="item in 10" :key="item">
+    <h3 class="rating-title">产品名称+型号</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">退款：0元</p>
+            <p class="first-aftersale">原由：运输损坏/客户问题</p>
+            <p class="aftersale-comment" title="">描述：由于物流运输问题，由货运公司承担相应的损失，包括产品费用及运输费用</p>
+        </div>
+    </div>
+  </div>
+
+</template>
+<script lang="ts" setup>
+	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'
+	const props = defineProps({
+    id: propTypes.number.def(undefined), // 订单ID
+    showPickUp: propTypes.bool.def(true) // 显示核销按钮
+  })
+  const formData = ref<TradeOrderApi.OrderVO>({
+    logs: []
+  })
+  const id = props.id
+  const getOrderAfterSale = async () => {
+    console.log(id)
+    if (id) {
+      const res = (await TradeOrderApi.getOrderAfterSale(id)) as TradeOrderApi.OrderVO
+      // 没有表单信息则关闭页面返回
+      if (!res) {
+        message.error('交易订单不存在')
+        close()
+      }
+      formData.value = res
+    }
+  }
+
+	const message = useMessage() // 消息弹窗
+
+
+	onMounted(async () => {
+    getOrderAfterSale()
+	})
+</script>
+<style lang="scss" scoped>
+  .aftersale-container {
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+      width: 355px;
+      border: 1px solid #ebeef5;
+      height: 180px;
+      padding: 0 20px;
+      border-radius: 10px;
+      float: left;
+      margin: 10px;
+    }
+    
+    .rating-title {
+        font-weight: bold;
+        margin-bottom: 10px;
+    }
+    
+    .aftersale-content {
+        display: flex;
+        align-items: center;
+        justify-content: flex-start;
+        width: 100%;
+    }
+    .aftersale-image{margin-right: 10px;}
+    .aftersale-image img {
+        width: 100px; /* 根据实际情况调整评价图片宽度 */
+        height: auto;
+        border: 1px solid #ebeef5;
+        border-radius: 10px;
+    }
+    
+    .aftersale-details p {
+        margin: 5px 0;
+    }
+    .aftersale-comment{
+      margin-top:12px !important;
+      font-size: 12px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      display: -webkit-box;
+      -webkit-line-clamp: 2;
+      -webkit-box-orient: vertical;
+
+    }
+</style>

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

@@ -0,0 +1,132 @@
+<!-- 订单查看 - 基础信息 -->
+<template>
+	<el-form ref="formRef" :model="formData"  label-width="120px" :disabled="isDetail">
+    
+    <el-row>
+      <el-col :span="12">
+        <el-form-item label="订单号" prop="no">
+          {{ formData.no }}
+        </el-form-item>
+      </el-col>
+      <el-col :span="12">
+        <el-form-item label="总金额" prop="categoryId">
+          {{ fenToYuan(formData.totalPrice) }}元
+        </el-form-item>
+      </el-col>
+    </el-row>
+		
+		<el-row>
+      <el-col :span="12">
+        <el-form-item label="订单类型" prop="brandId">
+          <!-- <dict-tag :type="DICT_TYPE.TRADE_ORDER_TYPE" :value="formData.type!" /> -->
+          {{getDictObj(DICT_TYPE.TRADE_ORDER_TYPE,formData.type)?.label}}
+
+        </el-form-item>
+      </el-col>
+      <el-col :span="12">
+        <el-form-item label="下单时间" prop="keyword">
+          {{formData.createTime && formatDate(formData.createTime) }}
+        </el-form-item>
+      </el-col>
+    </el-row>
+		
+		<el-row>
+      <el-col :span="12">
+        <el-form-item label="客户名称" prop="brandId">
+          {{formData?.user?.nickname}}
+        </el-form-item>
+      </el-col>
+      <el-col :span="12">
+        <el-form-item label="支付方式" prop="keyword">
+          {{getDictObj(DICT_TYPE.PAY_CHANNEL_CODE,formData.payChannelCode)?.label}}
+        </el-form-item>
+      </el-col>
+    </el-row>
+    <el-row>
+      <el-col :span="12">
+        <el-form-item label="状态" prop="brandId">
+          {{getDictObj(DICT_TYPE.TRADE_ORDER_STATUS,formData.status)?.label}}
+        </el-form-item>
+      </el-col>
+      <el-col :span="12">
+        <el-form-item label="支付时间" prop="keyword">
+          {{formData.payTime}}
+        </el-form-item>
+      </el-col>
+    </el-row>
+    <el-row>
+      <el-col :span="12">
+        <el-form-item label="订单来源" prop="brandId">
+          {{getDictObj(DICT_TYPE.TERMINAL,formData.terminal)?.label}}
+        </el-form-item>
+      </el-col>
+      <el-col :span="12">
+        <el-form-item label="配送方式" prop="keyword">
+          {{getDictObj(DICT_TYPE.TRADE_DELIVERY_TYPE,formData.deliveryType)?.label}}
+        </el-form-item>
+      </el-col>
+    </el-row>
+    <el-row>
+      <el-col :span="24">
+        <el-form-item label="买家留言" prop="brandId">
+          {{ formData.userRemark }}
+        </el-form-item>
+      </el-col>
+    </el-row>
+    <el-row>
+      <el-col :span="24">
+        <el-form-item label="备注:" prop="brandId">
+          {{ formData.remark }}
+        </el-form-item>
+      </el-col>
+    </el-row>
+	</el-form>
+</template>
+<script lang="ts" setup>
+	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'
+	const props = defineProps({
+    id: propTypes.number.def(undefined), // 订单ID
+    showPickUp: propTypes.bool.def(true) // 显示核销按钮
+  })
+  const formData = ref<TradeOrderApi.OrderVO>({
+    logs: []
+  })
+  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
+    }
+  }
+
+	const message = useMessage() // 消息弹窗
+
+
+	onMounted(async () => {
+    getDetail()
+	})
+</script>
+<style lang="scss" scoped>
+  .el-row{border:1px solid #ebeef5}
+  .el-col{border-right: 1px solid #ebeef5;}
+  .el-form-item{margin-bottom: 0;}
+  ::v-deep(.el-form-item--default .el-form-item__label){
+    height: 47px;
+    line-height: 47px;
+    border-right: 1px solid #ebeef5;
+  }
+  ::v-deep(.el-form-item--default .el-form-item__content){
+    line-height: 47px;
+    padding-left: 10px;
+  }
+</style>

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

@@ -0,0 +1,100 @@
+<!-- 订单查看 - 评论 -->
+<template>
+  
+  <div class="review-container" v-for="item in 10" :key="item">
+    <h3 class="rating-title">3星</h3>
+    <div class="review-content">
+        <div class="review-image">
+            <!-- 请将此处替换为实际评价图片链接 -->
+            <img src="https://static.iocoder.cn/mall/a79f5d2ea6bf0c3c11b2127332dfe2df.jpg" alt="评价图片" />
+        </div>
+        <div class="review-details">
+            <p class="product-model">型号：产品型号A123</p>
+            <p class="first-review">首评</p>
+            <p class="review-comment" title="评语：该产品性能优秀，使用体验良好，值得推荐该产品性能优秀，使用体验良好，值得推荐该产品性能优秀，使用体验良好，值得推荐该产品性能优秀，使用体验良好，值得推荐该产品性能优秀，使用体验良好，值得推荐该产品性能优秀，使用体验良好，值得推荐该产品性能优秀，使用体验良好，值得推荐。">评语：该产品性能优秀，使用体验良好，值得推荐该产品性能优秀，使用体验良好，值得推荐该产品性能优秀，使用体验良好，值得推荐该产品性能优秀，使用体验良好，值得推荐该产品性能优秀，使用体验良好，值得推荐该产品性能优秀，使用体验良好，值得推荐该产品性能优秀，使用体验良好，值得推荐。</p>
+        </div>
+    </div>
+  </div>
+
+</template>
+<script lang="ts" setup>
+	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'
+	const props = defineProps({
+    id: propTypes.number.def(undefined), // 订单ID
+    showPickUp: propTypes.bool.def(true) // 显示核销按钮
+  })
+  const formData = ref<TradeOrderApi.OrderVO>({
+    logs: []
+  })
+  const id = props.id
+  const getOrderComment = async () => {
+    console.log(id)
+    if (id) {
+      const res = (await TradeOrderApi.getOrderComment(id)) as TradeOrderApi.OrderVO
+      // 没有表单信息则关闭页面返回
+      if (!res) {
+        message.error('交易订单不存在')
+        close()
+      }
+      formData.value = res
+    }
+  }
+
+	const message = useMessage() // 消息弹窗
+
+
+	onMounted(async () => {
+    getOrderComment()
+	})
+</script>
+<style lang="scss" scoped>
+  .review-container {
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+      width: 355px;
+      border: 1px solid #ebeef5;
+      height: 180px;
+      padding: 0 20px;
+      border-radius: 10px;
+      float: left;
+      margin: 10px;
+    }
+    
+    .rating-title {
+        font-weight: bold;
+        margin-bottom: 10px;
+    }
+    
+    .review-content {
+        display: flex;
+        align-items: center;
+        justify-content: flex-start;
+        width: 100%;
+    }
+    .review-image{margin-right: 10px;}
+    .review-image img {
+        width: 100px; /* 根据实际情况调整评价图片宽度 */
+        height: auto;
+        border: 1px solid #ebeef5;
+        border-radius: 10px;
+    }
+    
+    .review-details p {
+        margin: 5px 0;
+    }
+    .review-comment{
+      // height: 60px;
+      overflow: hidden;
+
+      text-overflow: ellipsis;
+      display: -webkit-box;
+      -webkit-line-clamp: 3;
+      -webkit-box-orient: vertical;
+
+    }
+</style>

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

@@ -0,0 +1,226 @@
+<template>
+	<el-dialog v-model="dialogVisible" :title="dialogTitle" :fullscreen="isFullScreen" :show-close="false" width="70%"
+		draggable class="dialog" destroy-on-close	>
+		<template #header="{ close }">
+			<div class="my-header">
+				<div class="my-header-left">{{dialogTitle}}</div>
+				<div class="my-header-right">
+
+					<span @click="fullScreen">
+						<Icon :icon="isFullScreen ? 'zmdi:fullscreen-exit' : 'zmdi:fullscreen'" />
+					</span>
+					<span @click="close">
+						<el-icon>
+							<Close />
+						</el-icon>
+					</span>
+				</div>
+			</div>
+		</template>
+		<ContentWrap v-loading="formLoading" style="max-height:600px;overflow-y: auto;">
+			<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-tabs>
+			</div>
+			<div class="right">
+
+				<div v-show="activeName == 'info'">
+					<OrderBaseInfo ref="infoRef" :is-detail="isDetail" :id="orderId" />
+				</div>
+        <div v-show="activeName == 'product'">
+					<OrderProduct ref="infoRef" :is-detail="isDetail" :id="orderId" />
+				</div>
+        <div v-show="activeName == 'comment'">
+					<OrderComment ref="infoRef" :is-detail="isDetail" :id="orderId" />
+				</div>
+        <div v-show="activeName == 'service'">
+					<OrderService ref="infoRef" :is-detail="isDetail" :id="orderId" />
+				</div>
+        <div v-show="activeName == 'afterSale'">
+					<OrderAfterSale ref="infoRef" :is-detail="isDetail" :id="orderId" />
+				</div>
+        <div v-show="activeName == 'logistics'">
+					<OrderLogistics ref="infoRef" :is-detail="isDetail" :id="orderId" />
+				</div>
+        <div v-show="activeName == 'pay'">
+					<OrderPay ref="infoRef" :is-detail="isDetail" :id="orderId" />
+				</div>
+			</div>
+		</ContentWrap>
+	</el-dialog>
+	<!-- </div> -->
+
+</template>
+<script lang="ts" setup>
+	import { cloneDeep } from 'lodash-es'
+	import { useTagsViewStore } from '@/store/modules/tagsView'
+	import DetailForm from '../detail/index.vue'
+	import OrderBaseInfo from './OrderBaseInfo.vue'
+	import OrderProduct from './OrderProduct.vue'
+	import OrderComment from './OrderComment.vue'
+	import OrderService from './OrderService.vue'
+	import OrderAfterSale from './OrderAfterSale.vue'
+	import OrderLogistics from './OrderLogistics.vue'
+	import OrderPay from './OrderPay.vue'
+
+	import {
+		Close
+	} from '@element-plus/icons-vue'
+	import { Icon } from '@/components/Icon'
+	defineOptions({ name: 'ProductSpuForm' })
+  //全屏/取消全屏弹窗
+	const fullScreen = () => {
+		isFullScreen.value = !isFullScreen.value
+	}
+	const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
+	const activeName = ref('info') // Tag 激活的窗口
+	const isDetail = ref(false) // 是否查看详情
+	const dialogVisible = ref(false) // 弹窗的是否展示
+	const dialogTitle = ref('') // 弹窗的标题
+  const isFullScreen = ref(false)
+  const orderId = ref(0)
+	/** 打开弹窗 */
+	const open = async (type:string,id : number,no:string) => {
+    orderId.value = id
+    dialogTitle.value = "查看-"+no
+    if ('view' == type) {
+			isDetail.value = true
+		} else {
+			isDetail.value = false
+		}
+		dialogVisible.value = true
+		isFullScreen.value = false
+  }
+		
+	defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+
+	
+	
+	const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
+	
+	
+
+	/** 关闭按钮 */
+	const close = () => {
+		dialogVisible.value = false
+	}
+</script>
+<style type="text/css">
+	.el-dialog__body {
+		padding: unset;
+	}
+
+	.dialog .el-card__body {
+		padding: 0 20px 20px 0;
+	}
+
+	.dialog .el-dialog__headerbtn {
+		top: 0px;
+		line-height: 60px;
+	}
+
+	.dialog .el-dialog__headerbtn:hover {
+		background-color: #ef6b6b;
+	}
+
+	.dialog .el-dialog__headerbtn:hover .el-dialog__close {
+		color: #fff;
+	}
+
+	.dialog .el-dialog__header {
+		padding: 0;
+		margin: 0
+	}
+</style>
+<style lang="scss" scoped>
+	::v-deep .left {
+		width: 106px;
+		float: left;
+
+		img {
+			// width: 98%;
+			// border-bottom: 2px solid #e4e7ee;
+			// border-right: 2px solid #e4e7ee;
+			// margin-bottom: -5px;
+		}
+	}
+
+	.child-tabs {
+		border-top: 2px solid #e4e7ef;
+		margin-top: -7px;
+	}
+
+	::v-deep .child-tabs .is-active {
+		// border-left: 2px solid;
+	}
+
+	::v-deep .child-tabs .el-tabs__active-bar {
+		// background-color: #30fdff;
+		// background-color: unset;
+	}
+
+	::v-deep .child-tabs .el-tabs__item {
+		width: 106px;
+		justify-content: center;
+	}
+
+	::v-deep .child-tabs .el-tabs__item {}
+
+	.right {
+		padding: 10px 0 60px;
+		border-left: 2px solid #e4e7ee;
+		margin-left: -2px;
+		float: left;
+		width: calc(100% - 120px);
+    
+    padding-left: 10px;
+
+	}
+
+
+
+	.my-header {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+
+		&-left {
+			font-weight: bold;
+			font-size: 18px;
+			padding: 20px;
+			padding-bottom: 10px
+		}
+
+		&-right {
+			span {
+				width: 55px;
+				height: 55px;
+				display: inline-block;
+				line-height: 55px;
+				text-align: center;
+				cursor: pointer;
+			}
+
+			span:first-child:hover {
+				background-color: #f6f6f6;
+				// color: white
+			}
+
+			span:last-child:hover {
+				background-color: #ef6b6b;
+				color: white
+			}
+		}
+	}
+</style>

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

@@ -0,0 +1,101 @@
+<!-- 订单查看 - 物流 -->
+<template>
+  
+  <div class="aftersale-container" v-for="item in 10" :key="item">
+    <h3 class="rating-title">物流订单号</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>
+        </div>
+    </div>
+  </div>
+
+</template>
+<script lang="ts" setup>
+	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'
+	const props = defineProps({
+    id: propTypes.number.def(undefined), // 订单ID
+    showPickUp: propTypes.bool.def(true) // 显示核销按钮
+  })
+  const formData = ref<TradeOrderApi.OrderVO>({
+    logs: []
+  })
+  const id = props.id
+  const getOrderLogistics = async () => {
+    console.log(id)
+    if (id) {
+      const res = (await TradeOrderApi.getOrderLogistics(id)) as TradeOrderApi.OrderVO
+      // 没有表单信息则关闭页面返回
+      if (!res) {
+        message.error('交易订单不存在')
+        close()
+      }
+      formData.value = res
+    }
+  }
+
+	const message = useMessage() // 消息弹窗
+
+
+	onMounted(async () => {
+    getOrderLogistics()
+	})
+</script>
+<style lang="scss" scoped>
+  .aftersale-container {
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+      width: 355px;
+      border: 1px solid #ebeef5;
+      height: 180px;
+      padding: 0 20px;
+      border-radius: 10px;
+      float: left;
+      margin: 10px;
+    }
+    
+    .rating-title {
+        font-weight: bold;
+        margin-bottom: 10px;
+    }
+    
+    .aftersale-content {
+        display: flex;
+        align-items: center;
+        justify-content: flex-start;
+        width: 100%;
+    }
+    .aftersale-image{margin-right: 10px;}
+    .aftersale-image img {
+        width: 100px; /* 根据实际情况调整评价图片宽度 */
+        height: auto;
+        border: 1px solid #ebeef5;
+        border-radius: 10px;
+    }
+    
+    .aftersale-details p {
+        margin: 5px 0;
+    }
+    .aftersale-comment{
+      margin-top:12px !important;
+      font-size: 12px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      display: -webkit-box;
+      -webkit-line-clamp: 2;
+      -webkit-box-orient: vertical;
+
+    }
+</style>

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

@@ -0,0 +1,143 @@
+<!-- 订单查看 - 产品 -->
+<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!) }} 元
+        </el-form-item>
+      </el-col>
+      <el-col :span="12">
+        <el-form-item label="应付金额" prop="categoryId">
+          {{ fenToYuan(formData.payPrice!) }} 元
+        </el-form-item>
+      </el-col>
+    </el-row>
+		
+		<el-row>
+      <el-col :span="12">
+        <el-form-item label="优惠卷优惠" prop="brandId">
+          {{ fenToYuan(formData.couponPrice!) }} 元
+        </el-form-item>
+      </el-col>
+      <el-col :span="12">
+        <el-form-item label="运费金额" prop="keyword">
+          {{ fenToYuan(formData.deliveryPrice!) }} 元
+        </el-form-item>
+      </el-col>
+    </el-row>
+		
+		<el-row>
+      <el-col :span="12">
+        <el-form-item label="订单人工调价" prop="brandId">
+          {{ fenToYuan(formData.adjustPrice!) }} 元
+        </el-form-item>
+      </el-col>
+      <el-col :span="12">
+        <el-form-item label="活动优惠" prop="keyword">
+          {{ fenToYuan(formData.discountPrice!) }} 元
+        </el-form-item>
+      </el-col>
+    </el-row>
+    <el-row>
+      <el-col :span="12">
+        &nbsp;
+      </el-col>
+      <el-col :span="12">
+        <el-form-item label="积分抵扣" prop="keyword">
+          {{ fenToYuan(formData.pointPrice!) }} 元
+        </el-form-item>
+      </el-col>
+    </el-row>
+	</el-form>
+  <el-descriptions>
+      <el-descriptions-item labelClassName="no-colon">
+        <el-row :gutter="20" width="100%">
+          <el-col :span="24">
+            <el-table :data="formData.items" border width="150"> 
+              <el-table-column label="图片" prop="spuName">
+                <template #default="{ row }">
+                  {{ row.spuName }}
+                  <img :src="row.picUrl" />
+                </template>
+              </el-table-column>
+              <el-table-column label="商品条码" prop="price" width="150">
+                <template #default="{ row }">{{ fenToYuan(row.price) }}元</template>
+              </el-table-column>
+              <el-table-column label="销售价" prop="price" width="150">
+                <template #default="{ row }">{{ fenToYuan(row.price) }}元</template>
+              </el-table-column>
+              <el-table-column label="市场价" prop="price" width="150">
+                <template #default="{ row }">{{ fenToYuan(row.price) }}元</template>
+              </el-table-column>
+              <el-table-column label="数量" prop="count" width="100" />
+              <el-table-column label="小计" prop="payPrice" width="150">
+                <template #default="{ row }">{{ fenToYuan(row.payPrice) }}元</template>
+              </el-table-column>
+              <el-table-column label="备注" prop="afterSaleStatus" width="120">
+                <template #default="{ row }">
+                  <dict-tag
+                    :type="DICT_TYPE.TRADE_ORDER_ITEM_AFTER_SALE_STATUS"
+                    :value="row.afterSaleStatus"
+                  />
+                </template>
+              </el-table-column>
+            </el-table>
+          </el-col>
+        </el-row>
+      </el-descriptions-item>
+    </el-descriptions>
+</template>
+<script lang="ts" setup>
+	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'
+	const props = defineProps({
+    id: propTypes.number.def(undefined), // 订单ID
+    showPickUp: propTypes.bool.def(true) // 显示核销按钮
+  })
+  const formData = ref<TradeOrderApi.OrderVO>({
+    logs: []
+  })
+  const id = props.id
+  const getOrderProduct = async () => {
+    
+    if (id) {
+      const res = (await TradeOrderApi.getOrderProduct(id)) as TradeOrderApi.OrderVO
+      // 没有表单信息则关闭页面返回
+      if (!res) {
+        message.error('交易订单不存在')
+        close()
+      }
+      formData.value = res
+    }
+    console.log(formData.value)
+  }
+
+	const message = useMessage() // 消息弹窗
+
+
+	onMounted(async () => {
+    getOrderProduct()
+	})
+</script>
+<style lang="scss" scoped>
+  .el-form .el-row{border:1px solid #ebeef5}
+  .el-form .el-col{border-right: 1px solid #ebeef5;}
+  .el-form .el-form-item{margin-bottom: 0;}
+  ::v-deep(.el-form-item--default .el-form-item__label){
+    height: 47px;
+    line-height: 47px;
+    border-right: 1px solid #ebeef5;
+  }
+  ::v-deep(.el-form-item--default .el-form-item__content){
+    line-height: 47px;
+    padding-left: 10px;
+  }
+  .el-descriptions{
+    margin-top: 30px;
+  }
+</style>

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

@@ -0,0 +1,99 @@
+<!-- 订单查看 - 客服 -->
+<template>
+  
+  <div class="service-container" v-for="item in 10" :key="item">
+    <h3 class="rating-title">202401220411-01</h3>
+    <div class="service-content">
+        <div class="service-image">
+            <!-- 请将此处替换为实际评价图片链接 -->
+            <img src="https://static.iocoder.cn/mall/a79f5d2ea6bf0c3c11b2127332dfe2df.jpg" alt="评价图片" />
+        </div>
+        <div class="service-details">
+            <p class="first-service">评价：五星</p>
+            <p class="service-comment" title="正确处理了问题">摘要：正确处理了问题正确处理了问题正确处理了问题正确处理了问题正确处理了问题正确处理了问题正确处理了问题正确处理了问题正确处理了问题正确处理了问题正确处理了问题正确处理了问题正确处理了问题正确处理了问题正确处理了问题正确处理了问题正确处理了问题正确处理了问题正确处理了问题正确处理了问题正确处理了问题正确处理了问题正确处理了问题正确处理了问题正确处理了问题正确处理了问题正确处理了问题正确处理了问题正确处理了问题正确处理了问题正确处理了问题正确处理了问题正确处理了问题正确处理了问题正确处理了问题正确处理了问题</p>
+        </div>
+    </div>
+  </div>
+
+</template>
+<script lang="ts" setup>
+	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'
+	const props = defineProps({
+    id: propTypes.number.def(undefined), // 订单ID
+    showPickUp: propTypes.bool.def(true) // 显示核销按钮
+  })
+  const formData = ref<TradeOrderApi.OrderVO>({
+    logs: []
+  })
+  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
+    }
+  }
+
+	const message = useMessage() // 消息弹窗
+
+
+	onMounted(async () => {
+    getDetail()
+	})
+</script>
+<style lang="scss" scoped>
+  .service-container {
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+      width: 355px;
+      border: 1px solid #ebeef5;
+      height: 120px;
+      padding: 0 20px;
+      border-radius: 10px;
+      float: left;
+      margin: 10px;
+    }
+    
+    .rating-title {
+        font-weight: bold;
+        margin-bottom: 10px;
+    }
+    
+    .service-content {
+        display: flex;
+        align-items: center;
+        justify-content: flex-start;
+        width: 100%;
+    }
+    .service-image{margin-right: 10px;}
+    .service-image img {
+      width: 60px;
+      height: auto;
+      border: 1px solid #ebeef5;
+      border-radius: 50%;
+    }
+    
+    .service-details p {
+        margin: 5px 0;
+    }
+    .service-comment{
+      // height: 60px;
+      overflow: hidden;
+
+      text-overflow: ellipsis;
+      display: -webkit-box;
+      -webkit-line-clamp: 1;
+      -webkit-box-orient: vertical;
+
+    }
+</style>

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

@@ -0,0 +1,91 @@
+<!-- 订单查看 - 产品 -->
+<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!) }} 元
+        </el-form-item>
+      </el-col>
+      <el-col :span="12">
+        <el-form-item label="支付状态" prop="categoryId">
+          {{ formData.payStatus }} 
+        </el-form-item>
+      </el-col>
+    </el-row>
+		
+		<el-row>
+      <el-col :span="12">
+        <el-form-item label="支付方式" prop="brandId">
+          {{ formData.payChannelCode }} 
+        </el-form-item>
+      </el-col>
+      <el-col :span="12">
+        <el-form-item label="路径" prop="keyword">
+          无
+        </el-form-item>
+      </el-col>
+    </el-row>
+		
+    <el-row>
+
+      <el-col >
+        <el-form-item label="备注" prop="keyword">
+          无
+        </el-form-item>
+      </el-col>
+    </el-row>
+	</el-form>
+  
+</template>
+<script lang="ts" setup>
+	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'
+	const props = defineProps({
+    id: propTypes.number.def(undefined), // 订单ID
+    showPickUp: propTypes.bool.def(true) // 显示核销按钮
+  })
+  const formData = ref<TradeOrderApi.OrderVO>({
+    logs: []
+  })
+  const id = props.id
+  const getOrderPay = async () => {
+    console.log(id)
+    if (id) {
+      const res = (await TradeOrderApi.getOrderPay(id)) as TradeOrderApi.OrderVO
+      // 没有表单信息则关闭页面返回
+      if (!res) {
+        message.error('交易订单不存在')
+        close()
+      }
+      formData.value = res
+    }
+  }
+
+	const message = useMessage() // 消息弹窗
+
+
+	onMounted(async () => {
+    getOrderPay()
+	})
+</script>
+<style lang="scss" scoped>
+  .el-form .el-row{border:1px solid #ebeef5}
+  .el-form .el-col{border-right: 1px solid #ebeef5;}
+  .el-form .el-form-item{margin-bottom: 0;}
+  ::v-deep(.el-form-item--default .el-form-item__label){
+    height: 47px;
+    line-height: 47px;
+    border-right: 1px solid #ebeef5;
+  }
+  ::v-deep(.el-form-item--default .el-form-item__content){
+    line-height: 47px;
+    padding-left: 10px;
+  }
+  .el-descriptions{
+    margin-top: 30px;
+  }
+</style>

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

@@ -294,13 +294,15 @@ const handlePickUp = async () => {
 }
 
 /** 获得详情 */
-const { params } = useRoute() // 查询参数
+
 const props = defineProps({
   id: propTypes.number.def(undefined), // 订单ID
   showPickUp: propTypes.bool.def(true) // 显示核销按钮
 })
-const id = (params.id || props.id) as unknown as number
+
+const id = props.id
 const getDetail = async () => {
+  console.log(id)
   if (id) {
     const res = (await TradeOrderApi.getOrder(id)) as TradeOrderApi.OrderVO
     // 没有表单信息则关闭页面返回
@@ -334,7 +336,7 @@ onMounted(async () => {
   // 如果配送方式为快递，则查询物流公司
   if (formData.value.deliveryType === DeliveryTypeEnum.EXPRESS.type) {
     deliveryExpressList.value = await DeliveryExpressApi.getSimpleDeliveryExpressList()
-    if (form.value.logisticsId) {
+    if (formData.value.logisticsId) {
       expressTrackList.value = await TradeOrderApi.getExpressTrackList(formData.value.id!)
     }
   } else if (formData.value.deliveryType === DeliveryTypeEnum.PICK_UP.type) {

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

@@ -1,7 +1,18 @@
 <template>
-	<!-- 搜索 -->
-	<ContentWrap>
-		<el-form ref="queryFormRef" :inline="true" :model="queryParams" class="-mb-15px" label-width="68px">
+	
+
+
+	
+	<ContentWrap class="order-div">
+		<!-- 搜索 -->
+		<div style="position: relative;">
+			<div style="text-align: right;background: #fafbfc;padding: 10px;">
+
+				<el-button :icon="Operation" @click="showSearchMore" />
+
+			</div>
+			<div class="searchMore" v-if="searchMoreShow">
+				<el-form ref="queryFormRef" :inline="true" :model="queryParams" class="-mb-15px" label-width="68px">
 			<el-form-item label="订单状态" prop="status">
 				<el-select v-model="queryParams.status" class="!w-280px" clearable placeholder="全部">
 					<el-option v-for="dict in getIntDictOptions(DICT_TYPE.TRADE_ORDER_STATUS)" :key="dict.value"
@@ -68,27 +79,33 @@
 					</template>
 				</el-input>
 			</el-form-item>
-			<el-form-item>
-				<el-button @click="handleQuery">
-					<Icon class="mr-5px" icon="ep:search" />
-					搜索
-				</el-button>
-				<el-button @click="resetQuery">
-					<Icon class="mr-5px" icon="ep:refresh" />
-					重置
-				</el-button>
-			</el-form-item>
+			<el-row>
+				<el-col>
+						<el-form-item>
+							<el-button @click="hideSearchMore">
+								收起
+							</el-button>
+							<el-button @click="resetQuery">
+								<!-- <Icon class="mr-5px" icon="ep:refresh" /> -->
+								重置
+							</el-button>
+							<el-button @click="handleQuery"  plain type="primary">
+								<Icon class="mr-5px" icon="ep:search" />
+								搜索
+							</el-button>
+						</el-form-item>
+				</el-col>
+			</el-row>
+			
 		</el-form>
-	</ContentWrap>
-
-	<!-- 列表 -->
-	<ContentWrap>
-		<!-- 添加 row-key="id" 解决列数据中的 table#header 数据不刷新的问题  -->
-		<el-table v-loading="loading" :data="list" row-key="id">
+			</div>
+		</div>
+		<!-- 列表 -->
+		<!-- <el-table v-loading="loading" :data="list" row-key="id">
 			<OrderTableColumn :list="list" :pick-up-store-list="pickUpStoreList">
 				<template #default="{ row }">
 					<div class="flex items-center justify-center">
-						<el-button v-hasPermi="['trade:order:query']" link type="primary" @click="openDetail(row.id)">
+						<el-button v-hasPermi="['trade:order:query']" link type="primary" >
 							<Icon icon="ep:notification" />
 							详情
 						</el-button>
@@ -100,7 +117,7 @@
 							</el-button>
 							<template #dropdown>
 								<el-dropdown-menu>
-									<!-- 如果是【快递】，并且【未发货】，则展示【发货】按钮 -->
+									如果是【快递】，并且【未发货】，则展示【发货】按钮
 									<el-dropdown-item v-if="
                       row.deliveryType === DeliveryTypeEnum.EXPRESS.type &&
                       row.status === TradeOrderStatusEnum.UNDELIVERED.status
@@ -118,7 +135,41 @@
 					</div>
 				</template>
 			</OrderTableColumn>
-		</el-table>
+		</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)">
+					<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>
+						<div 
+							 class="setting" v-show="o.showSetting" >
+							<el-icon size="20" color="rgb(220 223 231)">
+								<Setting />
+							</el-icon>
+						</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%;" />
+						</div>
+
+						<div style='line-height: 25px;'>
+							<p>¥{{ o.payPrice }}</p>
+							<p> {{ getDictObj(DICT_TYPE.TRADE_ORDER_STATUS, o.status)?.label }}</p>
+							<p>{{o.user.nickname}}</p>
+							<p>{{formatDate(o.createTime)}}</p>
+							
+						</div>
+					</div>
+				</el-card>
+			</el-col>
+		</el-row>
+		<div v-if="list.length == 0">
+			<p style="text-align: center;margin-top: 100px;">暂无商品</p>
+		</div>
 		<!-- 分页 -->
 		<Pagination v-model:limit="queryParams.pageSize" v-model:page="queryParams.pageNo" :total="total"
 			@pagination="getList" />
@@ -127,6 +178,8 @@
 	<!-- 各种操作的弹窗 -->
 	<OrderDeliveryForm ref="deliveryFormRef" @success="getList" />
 	<OrderUpdateRemarkForm ref="updateRemarkForm" @success="getList" />
+	<OrderIndex ref="formRef" @success="getList" />
+
 </template>
 
 <script lang="ts" setup>
@@ -135,13 +188,38 @@
 	import OrderUpdateRemarkForm from '@/views/mall/trade/order/form/OrderUpdateRemarkForm.vue'
 	import * as TradeOrderApi from '@/api/mall/trade/order'
 	import * as PickUpStoreApi from '@/api/mall/trade/delivery/pickUpStore'
-	import { DICT_TYPE, getIntDictOptions, getStrDictOptions } from '@/utils/dict'
+	import { DICT_TYPE, getIntDictOptions, getStrDictOptions,getDictObj } from '@/utils/dict'
 	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'
 
-	defineOptions({ name: 'TradeOrder' })
+	import OrderIndex from "./components/OrderIndex.vue"
+
+	const searchMoreShow = ref(false)
+	// 鼠标移入显示变动图标
+	function handleMouseOver(index) {
+		list.value[index].showSetting = true;
+	}
+	// 鼠标移出不显示图标
+	function handleMouseOut(index) {
+		list.value[index].showSetting = false;
+	}
+	// 打开更多搜索条件
+	const showSearchMore = () => {
+		searchMoreShow.value = !searchMoreShow.value
+	}
+	const hideSearchMore = () => {
+		searchMoreShow.value = false
+	}
+	const formRef = ref()
+	const openDetail = (type:string,id : number,no:string) => {
+		formRef.value.open(type,id,no)
+	}
 
+	defineOptions({ name: 'TradeOrder' })
 	const { currentRoute, push } = useRouter() // 路由跳转
 	const loading = ref(true) // 列表的加载中
 	const total = ref(2) // 列表的总页数
@@ -190,10 +268,15 @@
 		loading.value = true
 		try {
 			const data = await TradeOrderApi.getOrderPage(unref(queryParams))
+			data.list.forEach(obj => {
+				obj.showSetting = false;
+			});
 			list.value = data.list
 			total.value = data.total
 		} finally {
 			loading.value = false
+			searchMoreShow.value = false
+
 		}
 	}
 
@@ -222,10 +305,10 @@
 		handleQuery()
 	}
 
-	/** 查看订单详情 */
-	const openDetail = (id : number) => {
-		push({ name: 'TradeOrderDetail', params: { id } })
-	}
+	// /** 查看订单详情 */
+	// const openDetail = (id : number) => {
+	// 	push({ name: 'TradeOrderDetail', params: { id } })
+	// }
 
 	/** 操作分发 */
 	const deliveryFormRef = ref()
@@ -257,4 +340,90 @@
 		pickUpStoreList.value = await PickUpStoreApi.getListAllSimple()
 		deliveryExpressList.value = await DeliveryExpressApi.getSimpleDeliveryExpressList()
 	})
-</script>
+</script>
+<style lang="scss" scoped>
+	.order-div {
+		position: relative;
+		min-height: 400px;
+	}
+
+
+	::v-deep .parent-tabs .el-tabs__nav-wrap::after {
+		position: static !important;
+
+	}
+
+	::v-deep .parent-tabs .el-tabs__active-bar {
+
+		background-color: unset;
+	}
+
+	.searchMore {
+		text-align: right;
+		background: #f3f5f8;
+		padding: 10px;
+		position: absolute;
+		// height: 100px;
+		width: calc(100% - 20px);
+		z-index: 111;
+		box-shadow: 0px 9px 6px rgba(0, 0, 0, 0.2);
+
+
+	}
+
+	.el-tabs {
+		position: absolute;
+		z-index: 111;
+		top: 25px;
+		left: 40px;
+	}
+
+	.product-card {
+
+		font-size: 14px;
+		margin: 10px;
+
+		.el-card {
+			padding: 15px;
+			cursor: pointer;
+			position: relative;
+
+			:deep(.el-card__body) {
+				padding: unset;
+			}
+		}
+
+		.setting {
+			width: 30px;
+			top: 0px;
+			right: 0px;
+			position: absolute;
+			height: 30px;
+			line-height: 30px;
+			text-align: center;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+		}
+
+		.setting:hover {
+			background: #666
+		}
+
+		p,
+		div {
+			margin: unset;
+			padding: unset;
+		}
+	}
+
+	.spu-table-expand {
+		padding-left: 42px;
+
+		:deep(.el-form-item__label) {
+			width: 82px;
+			font-weight: bold;
+			color: #99a9bf;
+		}
+	}
+</style>

tsconfig.json

@@ -4,7 +4,7 @@
     "useDefineForClassFields": true,
     "module": "esnext",
     "moduleResolution": "node",
-    "strict": true,
+    "strict": false,
     "jsx": "preserve",
     "sourceMap": true,
     "resolveJsonModule": true,
@@ -15,8 +15,8 @@
     "forceConsistentCasingInFileNames": true,
     "allowSyntheticDefaultImports": true,
     "strictFunctionTypes": false,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
     "experimentalDecorators": true,
     "noImplicitAny": false,
     "skipLibCheck": true,