fixed 修改订单列表查询

src/views/business/OrderManage/Orders/index.vue

@@ -74,44 +74,52 @@
     <!-- 表格渲染  prop="对应的字段"-->
     <el-table v-loading="loading" :data="dataList" ref="tableRef" border highlight-current-row
       @selection-change="handleSelectionChange">
-      <el-table-column type="selection" width="50" align="center"  />
+      <el-table-column type="selection" width="50" align="center" />
 
-      <el-table-column prop="orderNumber" label="订单号"  :show-overflow-tooltip="true" width="250" />
+      <el-table-column prop="goodsInfo" label="商品信息 / 单价与数量" width="450">
-      <el-table-column prop="goodsInfo" label="商品信息" width="350">
         <template #default="scope">
-          <div class="goods-info-box">
+          <div class="order-num-box">
+            <div>订单号：<b>{{ scope.row.orderNumber }}</b></div>
+            <el-link class="copy" type="primary" @click="copyText(scope.row.orderNumber)">复制订单号</el-link>
+          </div>
+          <div class="goods-info-box" v-for="(item, idx) in scope.row.goodsInfoList" :key="idx">
             <el-image preview-teleported :hide-on-click-modal="true" lazy class="table-td-thumb" fit="contain"
-              :src="scope.row.goodsInfo.goodsPicture?.split(',')[0]"
+              :src="item.goodsPicture?.split(',')[0]" :preview-src-list="item.goodsPicture?.split(',')">
-              :preview-src-list="scope.row.goodsInfo.goodsPicture?.split(',')">
               <div><el-icon :size="15">
                   <document />
                 </el-icon></div>
             </el-image>
+
             <div>
               <div class="goods-info-text m2">
-                {{ scope.row.goodsInfo.goodsName }}
+                {{ item.goodsName }}
               </div>
               <div>
-                <el-tag>{{ scope.row.goodsInfo.goodsSpecName }}</el-tag>
+                <el-tag type="info">{{ item.goodsSpecName }}</el-tag>
               </div>
             </div>
 
+            <div class="price-box">
+              <div>￥ {{ item.goodsPrice }}</div>
+              <div>× {{ item.goodsTotalNum }}</div>
+            </div>
           </div>
+
         </template>
       </el-table-column>
-      <el-table-column prop="goodsInfo" label="单价/数量" width="150">
+      <!-- <el-table-column prop="goodsInfo" label="单价/数量" width="150">
         <template #default="scope">
           <div>￥ {{ scope.row.goodsInfo.goodsPrice }}</div>
           <div>× {{ scope.row.goodsTotalNum }}</div>
         </template>
-      </el-table-column>
+      </el-table-column> -->
       <el-table-column prop="payPrice" label="实付款" width="150">
         <template #default="scope">
-          <div>￥ {{ scope.row.goodsInfo.goodsPrice }}</div>
+          <div>￥ {{ scope.row.payPrice }}</div>
           <div>(含运费：￥ {{ scope.row.expressPrice }})</div>
         </template>
       </el-table-column>
-      <el-table-column prop="goodsInfo" label="买家信息" width="250">
+      <el-table-column prop="goodsInfo" label="买家信息" width="200">
         <template #default="scope">
           <div class="goods-info-box">
             <div class="avatar">
@@ -129,32 +137,34 @@
           </div>
         </template>
       </el-table-column>
-      <el-table-column prop="payType" label="支付方式"  width="150">
+      <el-table-column prop="payType" label="支付方式" width="150">
         <template #default="scope">
           <dict-tag :options="pay_type" :value="scope.row.payType" />
         </template>
       </el-table-column>
-      <el-table-column prop="deliveryType" label="配送方式"  width="150">
+      <el-table-column prop="deliveryType" label="配送方式" width="150">
         <template #default="scope">
           <dict-tag :options="delivery_type" :value="scope.row.deliveryType" />
         </template>
       </el-table-column>
-      <el-table-column prop="deliveryStatus" label="交易状态"  width="200">
+      <el-table-column prop="deliveryStatus" label="交易状态" width="200">
         <template #default="scope">
           <div class="status-box">付款状态: &nbsp;<dict-tag :options="pay_status" :value="scope.row.payStatus" /></div>
-          <div class="status-box">发货状态: &nbsp;<dict-tag :options="delivery_status" :value="scope.row.deliveryStatus" /></div>
+          <div class="status-box">发货状态: &nbsp;<dict-tag :options="delivery_status" :value="scope.row.deliveryStatus" />
-          <div class="status-box">收货状态: &nbsp;<dict-tag :options="receipt_status" :value="scope.row.receiptStatus" /></div>
+          </div>
+          <div class="status-box">收货状态: &nbsp;<dict-tag :options="receipt_status" :value="scope.row.receiptStatus" />
+          </div>
           <div class="status-box">订单状态: &nbsp;<dict-tag :options="order_status" :value="scope.row.orderStatus" /></div>
         </template>
       </el-table-column>
-      <el-table-column prop="createTime" label="下单时间" :show-overflow-tooltip="true" />
+      <el-table-column prop="createTime" label="下单时间" :show-overflow-tooltip="true" width="200" />
 
 
-      <el-table-column label="操作" width="350" fixed="right">
+      <el-table-column label="操作" width="250" fixed="right">
         <template #default="scope">
           <!-- <el-button type="primary" size="small" icon="edit" @click="handleUpdate(scope.row)"
             v-hasPermi="['business:order:addOrUpdate']">编辑</el-button> -->
-            <el-button type="primary" size="small" icon="view" @click="handleDetail(scope.row)">详情</el-button>
+          <el-button type="primary" size="small" icon="view" @click="handleDetail(scope.row)">详情</el-button>
           <el-button type="danger" size="small" icon="delete" @click="handleDelete(scope.row)"
             v-hasPermi="['business:order:delete']">删除</el-button>
         </template>
@@ -179,6 +189,7 @@ import { exportOrder, orderList, delOrder } from '@/api/business/OrderManage/Ord
 import AddDialog from "./components/AddDialog.vue";
 import EditDialog from "./components/EditDialog.vue";
 import DetailDialog from "./components/DetailDialog.vue";
+import useClipboard from 'vue-clipboard3'
 
 const AddDialogVisible = ref(false);
 const EditDialogVisible = ref(false);
@@ -205,6 +216,8 @@ const loading = ref(true)
 // 路由
 const router = useRouter();
 
+const { toClipboard } = useClipboard()
+
 const data = reactive({
   form: {},
   queryParams: {
@@ -219,6 +232,15 @@ const dateRange = ref([])
 
 
 // 业务方法
+const copyText = async (val) => {
+  try {
+    await toClipboard(val)
+    proxy.$modal.msgSuccess('复制成功！')
+  } catch (e) {
+    console.log(e)
+    proxy.$modal.msgError('当前浏览器不支持')
+  }
+}
 
 // 字典获取
 const pay_type = ref([]);
@@ -386,10 +408,11 @@ function handleDetail(row) {
 handleQuery()
 </script>
 
-<style>
+<style lang="scss">
 .goods-info-box {
   display: flex;
   justify-content: space-between;
+  margin: 10px 0;
 }
 
 .goods-info-text {
@@ -411,9 +434,23 @@ handleQuery()
   margin-right: 15px;
 }
 
-.status-box{
+.status-box {
   display: flex;
   align-items: center;
   margin-bottom: 2px;
 }
+
+.price-box{
+  width: 60px;
+}
+
+.order-num-box{
+  display: flex;
+  position: relative;
+
+  .copy{
+    position: absolute;
+    right: 0%;
+  }
+}
 </style>

src/views/business/OrderManage/Orders/orderDetail.vue

@@ -32,20 +32,151 @@
     </el-card>
 
 
+    <!-- 订单信息 -->
+    <el-card class="box-card">
+
+        <!-- 订单操作 -->
+        <div class="order-operation">
+            <div class="card-title">订单操作</div>
+
+            <div class="btn-box">
+                <el-button type="primary">发 货</el-button>
+            </div>
+        </div>
+
+        <el-divider />
+
+        <div class="order-info">
+            <div class="card-title">订单信息</div>
+        <el-row class="order-info-box">
+            <el-col :span="8">订单号： 11111</el-col>
+            <el-col :span="8">实付款金额： 11111</el-col>
+            <el-col :span="8">支付方式： 11111</el-col>
+        </el-row>
+        <el-row class="order-info-box">
+            <el-col :span="8">配送方式： 11111</el-col>
+            <el-col :span="8">运费金额： 11111</el-col>
+            <el-col :span="8">订单状态： 11111</el-col>
+        </el-row>
+        <el-row class="order-info-box">
+            <el-col :span="8">订单号： 11111</el-col>
+            <el-col :span="8">买家信息： 11111</el-col>
+            <el-col :span="8"> 买家留言： 11111</el-col>
+        </el-row>
+        </div>
         
 
 
+    </el-card>
+
+
+    <!-- 商品信息 -->
+    <el-card class="box-card">
+
+        <div class="card-title">订单商品</div>
+
+        <el-table v-loading="loading" :data="dataList" ref="tableRef" highlight-current-row>
+            <el-table-column prop="goodsInfo" label="商品信息" width="850">
+                <!-- <template #default="scope">
+                    <div class="goods-info-box">
+                        <el-image preview-teleported :hide-on-click-modal="true" lazy class="table-td-thumb" fit="contain"
+                            :src="scope.row.goodsPicture?.split(',')[0]" :preview-src-list="scope.row.goodsPicture?.split(',')">
+                            <div><el-icon :size="15">
+                                    <document />
+                                </el-icon></div>
+                        </el-image>
+
+                        <div>
+                            <div class="goods-info-text m2">
+                                {{ scope.row.goodsName }}
+                            </div>
+                            <div>
+                                <el-tag type="info">{{ scope.row.goodsSpecName }}</el-tag>
+                            </div>
+                        </div>
+                    </div>
+
+                </template> -->
+            </el-table-column>
+            <el-table-column prop="payPrice" label="编码" width="150" />
+            <el-table-column prop="payPrice" label="重量(Kg)" width="150" />
+            <el-table-column prop="payType" label="单价" width="150">
+                <!-- <template #default="scope">
+                    <div>￥ 2</div>
+                </template> -->
+            </el-table-column>
+            <el-table-column prop="payType" label="购买数量" width="150">
+                <!-- <template #default="scope">
+                    <div>￥ 2</div>
+                </template> -->
+            </el-table-column>
+            <el-table-column prop="payType" label="商品总价" width="150">
+                <!-- <template #default="scope">
+                    <div>￥ 2</div>
+                </template> -->
+            </el-table-column>
+
+        </el-table>
+
+        <div class="order-summary-box">
+            <div>订单总额: &nbsp;￥111.00</div>
+            <div>运费金额: &nbsp;￥0.00</div>
+            <div>实付款金额: &nbsp;<b>￥111.00</b></div>
+        </div>
+
+    </el-card>
+
+
+    <!-- 收货信息 / 发货信息 -->
+    <!-- 订单信息 -->
+    <el-card class="box-card">
+
+        <div class="card-title">收货信息</div>
+        <el-row class="order-info-box">
+            <el-col :span="8">收货人姓名： 11111</el-col>
+            <el-col :span="8">联系电话： 11111</el-col>
+            <el-col :span="8">收货地区： 11111</el-col>
+        </el-row>
+        <el-row class="order-info-box">
+            <el-col :span="8">详细地址： 11111</el-col>
+        </el-row>
+
+        <el-divider />
+        <div class="card-title">发货信息</div>
+        <el-row class="order-info-box">
+            <el-col :span="8">物流公司： 11111</el-col>
+            <el-col :span="8">物流单号： 11111</el-col>
+            <el-col :span="8">发货状态： 11111</el-col>
+        </el-row>
+        <el-row class="order-info-box">
+            <el-col :span="8">发货时间： 11111</el-col>
+        </el-row>
+
+    </el-card>
 </template>
 
 <script setup>
 
 const progress = ref(2)
+const loading = ref(false)
+const dataList = ref([])
 
 </script>
 
 <style lang="scss" scoped>
 .box-card {
-    margin-bottom: 50px;
+    position: relative;
+    margin-bottom: 30px;
+}
+
+.card-title {
+    // font-size: 18px;
+    margin-bottom: 30px;
+    font-weight: bold;
+}
+
+.btn-box {
+    display: flex;
 }
 
 // 分割线
@@ -63,7 +194,7 @@ const progress = ref(2)
     text-align: center;
     position: relative;
 
-    li{
+    li {
         list-style: none;
     }
 
@@ -180,4 +311,28 @@ const progress = ref(2)
         color: #fff;
     }
 }
+
+
+// 信息盒子
+.order-info{
+    margin-bottom: 10px;
+}
+.order-info-box {
+    font-size: 15px;
+    margin-top: 25px;
+}
+
+
+// 订单商品
+.order-summary-box {
+    display: flex;
+    align-items: flex-end;
+    flex-direction: column;
+    margin: 20px 0;
+
+    div {
+        font-size: 15px;
+        margin-bottom: 5px;
+    }
+}
 </style>