1.商品列表 添加分组 选择商品优化

2.订单列表修复详情没有规格

src/api/order.js

@@ -44,3 +44,18 @@ export function tbOrderInfoDetail(id) {
         method: 'get'
     })
 }
+
+/**
+ * 通过Id查询订单
+ * @param {*} id 
+ * @returns 
+ */
+export function payCount() {
+    return request({
+        url: `/api/tbOrderInfo/payCount`,
+        method: 'get',
+        params: {
+            shopId: localStorage.getItem('shopId')
+        }
+    })
+}

src/components/shopList/index.vue

@@ -37,10 +37,10 @@
                 </el-table-column>
                 <el-table-column label="销量/库存">
                     <template v-slot="scope">
-                        0/0
+                        {{ scope.row.realSalesNumber }}/{{ scope.row.stockNumber }}
                     </template>
                 </el-table-column>
-                <el-table-column label="分类" prop="categoryId"></el-table-column>
+                <el-table-column label="分类" prop="categoryName"></el-table-column>
             </el-table>
         </div>
         <el-pagination :total="tableData.total" :current-page="tableData.page + 1" :page-size="tableData.size"

src/views/order_manage/components/orderDetail.vue

@@ -76,7 +76,10 @@
                             <template v-slot="scope">
                                 <div class="shop_info">
                                     <el-image :src="scope.row.productImg" style="width: 40px;height: 40px;"></el-image>
-                                    <span>{{ scope.row.productName }}</span>
+                                    <div class="info">
+                                        <span>{{ scope.row.productName }}</span>
+                                        <span style="color: #999;">{{ scope.row.productSkuName }}</span>
+                                    </div>
                                 </div>
                             </template>
                         </el-table-column>
@@ -218,8 +221,11 @@ export default {
 .shop_info {
     display: flex;
 
-    span {
+    .info {
-        margin-left: 6px;
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        padding-left: 6px;
     }
 }
 

src/views/order_manage/order_list.vue

@@ -50,19 +50,28 @@
                 </el-form-item>
             </el-form>
         </div>
-        <!-- <div class="head-container">
+        <div class="head-container">
             <div class="collect_wrap">
                 <div class="item">
-                    <div class="icon">
+                    <div class="icon_wrap" style="--bg-color:#C978EE">
-                        <i class="el-icon-s-goods"></i>
+                        <i class="icon el-icon-s-goods"></i>
                     </div>
                     <div class="info">
-                        <div class="m">￥224.45</div>
+                        <div class="m">￥{{ payCountTotal }}</div>
                         <div class="t">总金额</div>
                     </div>
                 </div>
+                <div class="item" v-for="item in payCountList" :key="item.payType">
+                    <div class="icon_wrap" style="--bg-color:#fff">
+                        <el-image class="img" :src="item.icon"></el-image>
+                    </div>
+                    <div class="info">
+                        <div class="m">￥{{ item.payAmount || 0 }}</div>
+                        <div class="t">{{ item.payType }}</div>
+                    </div>
+                </div>
             </div>
-        </div> -->
+        </div>
         <div class="head-container">
             <el-table :data="tableData.data" v-loading="tableData.loading">
                 <el-table-column label="订单号信息">
@@ -114,7 +123,7 @@
                         {{ scope.row.createdAt | timeFilter }}
                     </template>
                 </el-table-column>
-                <el-table-column label="操作">
+                <el-table-column label="操作" width="100">
                     <template v-slot="scope">
                         <el-button type="text" @click="$refs.orderDetail.show(scope.row)">详情</el-button>
                     </template>
@@ -133,7 +142,7 @@
 <script>
 import orderEnum from './orderEnum'
 import { tbShopPayTypeGet } from '@/api/setting'
-import { tbOrderInfoData, tbOrderInfoDownload } from '@/api/order'
+import { tbOrderInfoData, tbOrderInfoDownload, payCount } from '@/api/order'
 import dayjs from 'dayjs'
 import { downloadFile } from '@/utils/index'
 
@@ -162,7 +171,9 @@ export default {
                 loading: false,
                 total: 0
             },
-            downloadLoading: false
+            downloadLoading: false,
+            payCountList: '',
+            payCountTotal: 0
         }
     },
     filters: {
@@ -195,8 +206,24 @@ export default {
         this.resetQuery = { ...this.query }
         this.tbShopPayTypeGet()
         this.getTableData()
+        this.payCount()
     },
     methods: {
+        // 获取订单汇总
+        async payCount() {
+            try {
+                const res = await payCount()
+                this.payCountList = res
+
+                let total = 0
+                res.map(item => {
+                    total += item.payAmount
+                })
+                this.payCountTotal = total
+            } catch (error) {
+                console.log(error);
+            }
+        },
         // 导出Excel
         async downloadHandle() {
             try {
@@ -307,9 +334,67 @@ export default {
 <style scoped lang="scss">
 .collect_wrap {
     display: flex;
+    gap: 14px;
 
     .item {
         flex: 1;
+        display: flex;
+        align-items: center;
+        background-color: #f5f5f5;
+        padding: 20px;
+
+        .icon_wrap {
+            $size: 34px;
+            $border: 6px;
+            width: $size;
+            height: $size;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            background-color: var(--bg-color);
+            border-radius: 50%;
+            position: relative;
+
+            &::after {
+                content: "";
+                width: $size + $border;
+                height: $size + $border;
+                border-radius: 50%;
+                position: absolute;
+                top: 50%;
+                left: 50%;
+                transform: translate(-50%, -50%);
+                background-color: var(--bg-color);
+                opacity: .3;
+            }
+
+            .icon {
+                font-size: 16px;
+                color: #fff;
+            }
+
+            .img {
+                width: 20px;
+                height: 20px;
+            }
+        }
+
+        .info {
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+            padding-left: 10px;
+
+            .m {
+                font-weight: bold;
+            }
+
+            .t {
+                font-size: 12px;
+                color: #999;
+                padding-top: 4px;
+            }
+        }
     }
 }
 

src/views/product/components/addGroup.vue

@@ -36,7 +36,7 @@
                 <el-button type="primary" :loading="loading" @click="onSubmitHandle">确 定</el-button>
             </span>
         </el-dialog>
-        <shopList ref="shopListRef" @success="res => productIds = res" />
+        <shopList ref="shopListRef" @success="slectShop" />
     </div>
 </template>
 
@@ -72,6 +72,27 @@ export default {
         }
     },
     methods: {
+        slectShop(res) {
+            if (this.productIds.length) {
+                res.map(async item => {
+                    if (!await this.checkShop(item.id)) {
+                        this.productIds.push({ ...item })
+                    }
+                })
+            } else {
+                this.productIds = res
+            }
+        },
+        // 判断是否存在重复商品
+        checkShop(id) {
+            let falg = false
+            this.productIds.map(item => {
+                if (item.id == id) {
+                    falg = true
+                }
+            })
+            return falg
+        },
         onSubmitHandle() {
             this.$refs.form.validate(async valid => {
                 if (valid) {
@@ -151,10 +172,6 @@ export default {
 
             &:hover {
                 cursor: pointer;
-
-                &::before {
-                    transform: translateY(0);
-                }
             }
 
             &::after {
@@ -190,7 +207,6 @@ export default {
                 bottom: 0;
                 left: 0;
                 z-index: 10;
-                transform: translateY(100%);
                 transition: all .1s ease-in-out;
             }
         }