From 5ea9e7951f171a581e9f3157730284a2dd947dfa Mon Sep 17 00:00:00 2001
From: gyq <875626088@qq.com>
Date: Sat, 16 Mar 2024 17:47:15 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E8=AE=A2=E5=8D=95=E8=AF=A6?=
 =?UTF-8?q?=E6=83=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .env.development                              |   2 +-
 src/App.vue                                   |  22 +
 src/api/home.js                               |   5 +-
 src/api/order.js                              |  12 +
 src/views/home/home.vue                       | 400 +++++++++++++++++-
 .../order_manage/components/orderDetail.vue   | 334 +++++++++++++++
 src/views/order_manage/order_list.vue         |  24 +-
 src/views/product/add_shop.vue                |   9 +-
 src/views/product/components/addGroup.vue     |   2 +-
 src/views/shop/components/shopInfo.vue        |   4 +-
 10 files changed, 790 insertions(+), 24 deletions(-)
 create mode 100644 src/views/order_manage/components/orderDetail.vue

diff --git a/.env.development b/.env.development
index f97c926..4b22c0f 100644
--- a/.env.development
+++ b/.env.development
@@ -2,7 +2,7 @@ ENV = 'development'
 
 # 接口地址
 # VUE_APP_BASE_API  = 'http://192.168.2.128:8000' // 刘一帆
-# VUE_APP_BASE_API  = 'http://192.168.2.98:8000' // 公司测试
+# VUE_APP_BASE_API  = 'https://405465h7n2.vicp.fun ' // 公司测试
 # VUE_APP_BASE_API  = 'http://192.168.2.96:8000' // 阿伟
 VUE_APP_BASE_API  = 'https://cashieradmin.sxczgkj.cn'
 # VUE_APP_BASE_API  = 'http://192.168.2.16:8000'
diff --git a/src/App.vue b/src/App.vue
index 9d9e72b..5089146 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -56,6 +56,28 @@ export default {
 .shop_type_box {
   display: flex;
 
+  &.disabled {
+    .item {
+      background-color: #f9f9f9;
+
+      &:hover {
+        cursor: not-allowed;
+      }
+
+      &.active {
+        border-color: #ececec;
+      }
+
+      .active_dot {
+        background-color: #ececec;
+      }
+
+      .s_title {
+        color: #999;
+      }
+    }
+  }
+
   .item {
     $borderColor: #1890FF;
     margin-right: 14px;
diff --git a/src/api/home.js b/src/api/home.js
index 0a5f44b..9434a7b 100644
--- a/src/api/home.js
+++ b/src/api/home.js
@@ -62,14 +62,15 @@ export function dateAmount(day) {
  * 商品销售排行
  * @returns
  */
-export function dateProduct(day, page) {
+export function dateProduct(day, page, size) {
     return request({
         url: '/api/summary/dateProduct',
         method: 'get',
         params: {
             shopId: localStorage.getItem('shopId'),
             day: day,
-            page: page
+            page: page,
+            size: size
         }
     })
 }
diff --git a/src/api/order.js b/src/api/order.js
index 173db70..8c7f17a 100644
--- a/src/api/order.js
+++ b/src/api/order.js
@@ -31,4 +31,16 @@ export function tbOrderInfoDownload(data) {
         },
         responseType: 'blob'
     })
+}
+
+/**
+ * 通过Id查询订单
+ * @param {*} id 
+ * @returns 
+ */
+export function tbOrderInfoDetail(id) {
+    return request({
+        url: `/api/tbOrderInfo/${id}`,
+        method: 'get'
+    })
 }
\ No newline at end of file
diff --git a/src/views/home/home.vue b/src/views/home/home.vue
index 1b90abe..ed6e709 100644
--- a/src/views/home/home.vue
+++ b/src/views/home/home.vue
@@ -17,15 +17,25 @@
           <div class="card_title">支付笔数</div>
         </div>
         <div class="number">{{ topData.paymentsNumber }}</div>
-        <div class="row"></div>
+        <div class="row" ref="cardPayChart" style="padding-bottom: 2px;"></div>
         <div class="row">今日支付笔数{{ topData.paymentsNumberToday || 0 }}</div>
       </div>
+      <div class="card">
+        <div class="header">
+          <div class="card_title">访问量</div>
+        </div>
+        <div class="number">{{ topData.totalVisits }}</div>
+        <div class="row" ref="cardCountChart"></div>
+        <div class="row">
+          <div class="dot"></div> 今日访问 {{ topData.totalVisitsToday || 0 }}
+        </div>
+      </div>
       <div class="card">
         <div class="header">
           <div class="card_title">用户数</div>
         </div>
         <div class="number">{{ topData.totalUser }}</div>
-        <div class="row"></div>
+        <div class="row" ref="cardUserChart" style="padding-bottom: 2px;"></div>
         <div class="row">今日新增 {{ topData.userToday || 0 }} <i class="icon el-icon-caret-top"></i> </div>
       </div>
     </div>
@@ -52,7 +62,7 @@
           <div class="tab_wrap">
             <div class="item active">商品销售排行</div>
           </div>
-          <el-radio-group v-model="saleTableActive" @change="dateProduct">
+          <el-radio-group v-model="saleTableActive" @change="rankChange">
             <el-radio-button label="7">近7天</el-radio-button>
             <el-radio-button label="30">30天</el-radio-button>
           </el-radio-group>
@@ -63,12 +73,14 @@
               <div class="card_title">销售数量</div>
             </div>
             <div class="number">{{ productCount }}</div>
+            <div class="product_chart_wrap" ref="productCountChart"></div>
           </div>
           <div class="card">
             <div class="sale_data_header">
               <div class="card_title">销售金额</div>
             </div>
             <div class="number">￥{{ productSum }}</div>
+            <div class="product_chart_wrap" ref="productSumChart"></div>
           </div>
         </div>
         <div class="table">
@@ -79,8 +91,8 @@
             <el-table-column label="金额" prop="amount"></el-table-column>
           </el-table>
           <div class="head-container" style="padding-top: 20px;display: flex;justify-content: flex-end;">
-            <el-pagination :total="saleTableTotal" :current-page="saleTablePage" @current-change="paginationChange"
-              layout="total, prev, pager, next, jumper"></el-pagination>
+            <el-pagination :total="saleTableTotal" :page-size="saleTableSize" :current-page="saleTablePage"
+              @current-change="paginationChange" layout="total, prev, pager, next, jumper"></el-pagination>
           </div>
         </div>
       </div>
@@ -102,7 +114,7 @@
 </template>
 
 <script>
-import { summaryGet, summaryTodayGet, dateProduct, dateAmount, datePayType } from '@/api/home'
+import { summaryGet, summaryTodayGet, dateProduct, dateAmount, datePayType, summaryDateGet } from '@/api/home'
 import echarts from 'echarts'
 import { debounce } from '@/utils'
 export default {
@@ -112,6 +124,9 @@ export default {
       topData: '',
       saleTab: 'sale',
       saleActive: '7',
+      cardPayChart: null,
+      cardCountChart: null,
+      cardUserChart: null,
       saleLoading: false,
       saleChart: null,
       payChartDay: '7',
@@ -125,7 +140,10 @@ export default {
       saleTableLoading: false,
       saleTablePage: 1,
       saleTableTotal: 0,
-      __resizeHandler: null
+      saleTableSize: 5,
+      __resizeHandler: null,
+      productCountChart: null,
+      productSumChart: null
     }
   },
   mounted() {
@@ -133,6 +151,7 @@ export default {
     this.dateAmount()
     this.dateProduct()
     this.datePayType()
+    this.summaryDateGet()
 
     this.__resizeHandler = debounce(() => {
       if (this.saleChart) {
@@ -141,10 +160,197 @@ export default {
       if (this.payChart) {
         this.payChart.resize()
       }
+      if (this.cardPayChart) {
+        this.cardPayChart.resize()
+      }
+      if (this.cardUserChart) {
+        this.cardUserChart.resize()
+      }
+      if (this.productCountChart) {
+        this.productCountChart.resize()
+      }
+      if (this.productSumChart) {
+        this.productSumChart.resize()
+      }
     }, 100)
     window.addEventListener('resize', this.__resizeHandler)
+    this.initCardUserChart()
   },
   methods: {
+    // 初始化支付笔数柱状图
+    initCardPayChart(time = [], data = []) {
+      this.cardPayChart = echarts.init(this.$refs.cardPayChart)
+      this.cardPayChart.setOption({
+        tooltip: {
+          trigger: 'axis'
+        },
+        grid: {
+          x: 0,
+          y: 0,
+          x2: 0,
+          y2: 0
+        },
+        xAxis: [{
+          type: 'category',
+          data: time,
+          show: false, // 不显示坐标轴线、坐标轴刻度线和坐标轴上的文字
+          axisTick: {
+            show: false // 不显示坐标轴刻度线
+          },
+          axisLine: {
+            show: false, // 不显示坐标轴线
+          },
+          axisLabel: {
+            show: false, // 不显示坐标轴上的文字
+          },
+          splitLine: {
+            show: false // 不显示网格线
+          }
+        }],
+        color: '#409eff',
+        yAxis: [
+          {
+            type: 'value',
+            show: false, // 不显示坐标轴线、坐标轴刻度线和坐标轴上的文字
+            axisTick: {
+              show: false // 不显示坐标轴刻度线
+            },
+            axisLine: {
+              show: false, // 不显示坐标轴线
+            },
+            axisLabel: {
+              show: false, // 不显示坐标轴上的文字
+            },
+            splitLine: {
+              show: false // 不显示网格线
+            }
+          }
+        ],
+        series: [
+          {
+            data: data,
+            type: 'bar',
+            barWidth: '30%'
+          }
+        ]
+      })
+    },
+    // 初始化访问量柱状图
+    initCardCountChart(time = [], data = []) {
+      this.cardCountChart = echarts.init(this.$refs.cardCountChart)
+      this.cardCountChart.setOption({
+        tooltip: {
+          trigger: 'axis'
+        },
+        grid: {
+          x: 0,
+          y: 0,
+          x2: 0,
+          y2: 0
+        },
+        xAxis: [{
+          type: 'category',
+          data: time,
+          show: false, // 不显示坐标轴线、坐标轴刻度线和坐标轴上的文字
+          axisTick: {
+            show: false // 不显示坐标轴刻度线
+          },
+          axisLine: {
+            show: false, // 不显示坐标轴线
+          },
+          axisLabel: {
+            show: false, // 不显示坐标轴上的文字
+          },
+          splitLine: {
+            show: false // 不显示网格线
+          }
+        }],
+        color: '#409eff',
+        yAxis: [
+          {
+            type: 'value',
+            show: false, // 不显示坐标轴线、坐标轴刻度线和坐标轴上的文字
+            axisTick: {
+              show: false // 不显示坐标轴刻度线
+            },
+            axisLine: {
+              show: false, // 不显示坐标轴线
+            },
+            axisLabel: {
+              show: false, // 不显示坐标轴上的文字
+            },
+            splitLine: {
+              show: false // 不显示网格线
+            }
+          }
+        ],
+        series: [
+          {
+            data: data,
+            type: 'bar',
+            barWidth: '30%'
+          }
+        ]
+      })
+    },
+    // 初始化用户数折线图
+    initCardUserChart(time = [], data = []) {
+      this.cardUserChart = echarts.init(this.$refs.cardUserChart)
+      this.cardUserChart.setOption({
+        tooltip: {
+          trigger: 'axis'
+        },
+        grid: {
+          x: 0,
+          y: 10,
+          x2: 0,
+          y2: 2
+        },
+        xAxis: [{
+          type: 'category',
+          data: time,
+          show: false, // 不显示坐标轴线、坐标轴刻度线和坐标轴上的文字
+          axisTick: {
+            show: false // 不显示坐标轴刻度线
+          },
+          axisLine: {
+            show: false, // 不显示坐标轴线
+          },
+          axisLabel: {
+            show: false, // 不显示坐标轴上的文字
+          },
+          splitLine: {
+            show: false // 不显示网格线
+          }
+        }],
+        color: '#409eff',
+        yAxis: [
+          {
+            type: 'value',
+            show: false, // 不显示坐标轴线、坐标轴刻度线和坐标轴上的文字
+            axisTick: {
+              show: false // 不显示坐标轴刻度线
+            },
+            axisLine: {
+              show: false, // 不显示坐标轴线
+            },
+            axisLabel: {
+              show: false, // 不显示坐标轴上的文字
+            },
+            splitLine: {
+              show: false // 不显示网格线
+            }
+          }
+        ],
+        series: [
+          {
+            data: data,
+            type: 'line',
+            symbol: 'none'
+          }
+        ]
+      })
+    },
     // 初始化销售额图标
     initSaleChart(time, data) {
       this.saleChart = null
@@ -260,9 +466,9 @@ export default {
     async dateProduct() {
       try {
         this.saleTableLoading = true
-        const res = await dateProduct(this.saleTableActive, this.saleTablePage)
+        const res = await dateProduct(this.saleTableActive, this.saleTablePage, this.saleTableSize)
         this.saleTable = res.totalProduct
-        this.saleTableTotal = res.productCount
+        this.saleTableTotal = res.total
         this.productCount = res.productCount
         this.productSum = res.productSum
         setTimeout(() => {
@@ -300,10 +506,171 @@ export default {
           ...res1,
           ...res2
         }
+        let payTime = res1.countDateList.map(item => item.tradeDay)
+        let payData = res1.countDateList.map(item => item.count)
+
+        let countTime = res1.visitsCountList.map(item => item.tradeDay)
+        let countData = res1.visitsCountList.map(item => item.count)
+
+        this.initCardPayChart(payTime, payData)
+        this.initCardCountChart(countTime, countData)
+        console.log(this.topData)
       } catch (error) {
         console.log(error)
       }
     },
+    rankChange() {
+      this.dateProduct()
+      this.summaryDateGet()
+    },
+    // 初始化销售图标
+    initProduceChart(p1, p2) {
+      this.productCountChart = echarts.init(this.$refs.productCountChart)
+      this.productSumChart = echarts.init(this.$refs.productSumChart)
+
+      this.productCountChart.setOption({
+        tooltip: {
+          trigger: 'axis'
+        },
+        grid: {
+          x: 0,
+          y: 0,
+          x2: 0,
+          y2: 0
+        },
+        xAxis: [{
+          boundaryGap: false,
+          type: 'category',
+          data: p1[0],
+          show: false, // 不显示坐标轴线、坐标轴刻度线和坐标轴上的文字
+          axisTick: {
+            show: false // 不显示坐标轴刻度线
+          },
+          axisLine: {
+            show: false, // 不显示坐标轴线
+          },
+          axisLabel: {
+            show: false, // 不显示坐标轴上的文字
+          },
+          splitLine: {
+            show: false // 不显示网格线
+          }
+        }],
+        color: '#409eff',
+        yAxis: [
+          {
+            type: 'value',
+            show: false, // 不显示坐标轴线、坐标轴刻度线和坐标轴上的文字
+            axisTick: {
+              show: false // 不显示坐标轴刻度线
+            },
+            axisLine: {
+              show: false, // 不显示坐标轴线
+            },
+            axisLabel: {
+              show: false, // 不显示坐标轴上的文字
+            },
+            splitLine: {
+              show: false // 不显示网格线
+            }
+          }
+        ],
+        series: [
+          {
+            data: p1[1],
+            type: 'line',
+            symbol: 'none',
+            smooth: true,
+            areaStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                offset: 0,
+                color: '#409eff' // 渐变颜色
+              }, {
+                offset: 1,
+                color: '#409eff' // 渐变颜色
+              }])
+            }
+          }
+        ]
+      })
+
+      this.productSumChart.setOption({
+        tooltip: {
+          trigger: 'axis'
+        },
+        grid: {
+          x: 0,
+          y: 0,
+          x2: 0,
+          y2: 0
+        },
+        xAxis: [{
+          boundaryGap: false,
+          type: 'category',
+          data: p2[0],
+          show: false, // 不显示坐标轴线、坐标轴刻度线和坐标轴上的文字
+          axisTick: {
+            show: false // 不显示坐标轴刻度线
+          },
+          axisLine: {
+            show: false, // 不显示坐标轴线
+          },
+          axisLabel: {
+            show: false, // 不显示坐标轴上的文字
+          },
+          splitLine: {
+            show: false // 不显示网格线
+          }
+        }],
+        color: '#409eff',
+        yAxis: [
+          {
+            type: 'value',
+            show: false, // 不显示坐标轴线、坐标轴刻度线和坐标轴上的文字
+            axisTick: {
+              show: false // 不显示坐标轴刻度线
+            },
+            axisLine: {
+              show: false, // 不显示坐标轴线
+            },
+            axisLabel: {
+              show: false, // 不显示坐标轴上的文字
+            },
+            splitLine: {
+              show: false // 不显示网格线
+            }
+          }
+        ],
+        series: [
+          {
+            data: p2[1],
+            type: 'line',
+            symbol: 'none',
+            smooth: true,
+            areaStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                offset: 0,
+                color: '#409eff' // 渐变颜色
+              }, {
+                offset: 1,
+                color: '#409eff' // 渐变颜色
+              }])
+            }
+          }
+        ]
+      })
+    },
+    // 日期汇总数据
+    async summaryDateGet() {
+      try {
+        const res = await summaryDateGet(this.saleTableActive)
+        let p1 = [res.numList.map(item => item.tradeDay), res.numList.map(item => item.count)]
+        let p2 = [res.amountList.map(item => item.tradeDay), res.amountList.map(item => item.count)]
+        this.initProduceChart(p1, p2)
+      } catch (error) {
+        console.log(error);
+      }
+    }
   }
 }
 </script>
@@ -344,7 +711,7 @@ export default {
     }
 
     .row {
-      height: 40px;
+      height: 50px;
       color: #555;
       font-size: 14px;
       display: flex;
@@ -358,6 +725,15 @@ export default {
         color: rgb(255, 85, 85);
         margin-left: 4px;
       }
+
+      .dot {
+        $size: 6px;
+        width: $size;
+        height: $size;
+        border-radius: 50%;
+        background-color: #1890FF;
+        margin-right: 6px;
+      }
     }
   }
 }
@@ -391,6 +767,10 @@ export default {
         font-size: 24px;
         height: 60px;
       }
+
+      .product_chart_wrap {
+        height: 50px;
+      }
     }
   }
 
diff --git a/src/views/order_manage/components/orderDetail.vue b/src/views/order_manage/components/orderDetail.vue
new file mode 100644
index 0000000..0822e25
--- /dev/null
+++ b/src/views/order_manage/components/orderDetail.vue
@@ -0,0 +1,334 @@
+<template>
+    <el-drawer title="订单详情" size="50%" :visible.sync="drawer" direction="rtl" v-loading="loading">
+        <div class="header">
+            <div class="title">【收银订单】</div>
+            <div class="table">
+                <div class="item">
+                    <div class="t">订单状态</div>
+                    <div class="b">
+                        <el-tag :type="detail.status == 'closed' ? 'success' : 'warning'">{{
+        detail.status |
+        statusFilter
+    }}</el-tag>
+                    </div>
+                </div>
+                <div class="item">
+                    <div class="t">订单金额</div>
+                    <div class="b">
+                        ￥{{ detail.orderAmount }}
+                    </div>
+                </div>
+                <div class="item">
+                    <div class="t">订单时间</div>
+                    <div class="b">
+                        {{ detail.createdAt | timeFilter }}
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="container">
+            <el-tabs v-model="type" @tab-click="getTableData">
+                <el-tab-pane label="基本信息" name="1">
+                    <div class="info_content">
+                        <div class="item">
+                            <div class="label">会员信息</div>
+                            <div class="row">
+                                <div>会员昵称：-</div>
+                                <div>联系电话：-</div>
+                            </div>
+                        </div>
+                        <div class="item">
+                            <div class="label">收款详情</div>
+                            <div class="row">
+                                <div>商品金额：￥{{ detail.productAmount }}</div>
+                                <div>打包费：{{ detail.packFee || '-' }}</div>
+                            </div>
+                            <div class="row">
+                                <div>订单原价：￥{{ detail.originAmount }}</div>
+                                <div>优惠金额：￥{{ detail.userCouponAmount || '-' }}</div>
+                                <div>实收金额：<span style="color: red;">￥{{ detail.payAmount }}</span> </div>
+                            </div>
+                            <div class="row">
+                                <div>退款金额：￥{{ detail.refundAmount }} <span style="color: #FF9731;cursor: pointer;"
+                                        v-if="detail.isRefund" @click="type = '3'">退款详情></span>
+                                </div>
+                                <div>支付方式：现金</div>
+                            </div>
+                        </div>
+                        <div class="item">
+                            <div class="label">订单信息</div>
+                            <div class="row">
+                                <div>订单编号：{{ detail.orderNo }}</div>
+                                <div>订单类型：{{ detail.sendType | sendTypeFilter }}</div>
+                                <div>创建时间：{{ detail.createdAt | timeFilter }}</div>
+                            </div>
+                            <div class="row">
+                                <div>设备名称：-</div>
+                                <div>支付时间：{{ detail.paidTime | timeFilter }}</div>
+                                <div>更新时间：{{ detail.updatedAt | timeFilter }}</div>
+                            </div>
+                        </div>
+                    </div>
+                </el-tab-pane>
+                <el-tab-pane label="商品信息" name="2">
+                    <el-table :data="detail.detailList">
+                        <el-table-column label="商品">
+                            <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>
+                            </template>
+                        </el-table-column>
+                        <el-table-column label="数量">
+                            <template v-slot="scope">
+                                x{{ scope.row.num }}
+                            </template>
+                        </el-table-column>
+                        <el-table-column label="单价">
+                            <template v-slot="scope">
+                                ￥{{ scope.row.price }}/
+                            </template>
+                        </el-table-column>
+                        <el-table-column label="小计">
+                            <template v-slot="scope">
+                                ￥{{ scope.row.priceAmount }}
+                            </template>
+                        </el-table-column>
+                    </el-table>
+                </el-tab-pane>
+                <el-tab-pane label="退款详情" name="3" v-if="detail.isRefund">
+                    <div class="refund_wrap">
+                        <div class="row" v-for="item in refoundList" :key="item.id">
+                            <div class="time">{{ item.createdAt | timeFilter }}</div>
+                            <div class="list">
+                                <div class="list_row" v-for="val in item.detailList">
+                                    <div class="item">
+                                        <el-image :src="val.productImg" style="width: 50px;height: 50px;"></el-image>
+                                        <span class="name">{{ val.productName }}</span>
+                                    </div>
+                                    <div class="item">
+                                        <span>退-{{ val.num }}</span>
+                                    </div>
+                                    <div class="item">
+                                        <span>￥{{ val.priceAmount }}</span>
+                                    </div>
+                                    <div class="item">
+                                        <span>￥-{{ val.priceAmount }}</span>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="foot">退款：￥-{{item.refundAmount}}</div>
+                        </div>
+                    </div>
+                </el-tab-pane>
+            </el-tabs>
+        </div>
+    </el-drawer>
+</template>
+
+<script>
+import orderEnum from '../orderEnum';
+import dayjs from 'dayjs'
+import { tbOrderInfoDetail, tbOrderInfoData } from '@/api/order'
+export default {
+    data() {
+        return {
+            orderEnum,
+            drawer: false,
+            type: '1',
+            detail: '',
+            loading: false,
+            refoundList: []
+        }
+    },
+    filters: {
+        orderTypeFilter(t) {
+            if (t) {
+                return t && orderEnum.orderType.find(item => item.key == t).label
+            } else {
+                return t
+            }
+        },
+        sendTypeFilter(t) {
+            if (t) {
+                return orderEnum.sendType.find(item => item.key == t).label
+            } else {
+                return t
+            }
+        },
+        statusFilter(t) {
+            if (t) {
+                return t && orderEnum.status.find(item => item.key == t).label
+            } else {
+                return t
+            }
+        },
+        timeFilter(t) {
+            if (t) {
+                return dayjs(t).format('YYYY-MM-DD HH:mm:ss')
+            } else {
+                return '-'
+            }
+        }
+    },
+    methods: {
+        // 切换类型
+        getTableData() {
+            if (this.type == '3') {
+                this.tbOrderInfoData()
+            }
+        },
+        // 获取退单列表
+        async tbOrderInfoData() {
+            try {
+                const res = await tbOrderInfoData({
+                    source: this.detail.id,
+                    page: 0,
+                    pageSize: 500,
+                    orderType: '0'
+                })
+                this.refoundList = res.content
+            } catch (error) {
+                console.log(error)
+            }
+        },
+        // 获取订单详情
+        async tbOrderInfoDetail(id) {
+            try {
+                this.loading = true
+                const res = await tbOrderInfoDetail(id)
+                this.detail = res
+                this.loading = false
+            } catch (error) {
+                console.log(error)
+            }
+        },
+        show(obj) {
+            this.drawer = true
+            this.type = '1'
+            this.detail = ''
+            this.tbOrderInfoDetail(obj.id)
+        }
+    }
+}
+</script>
+
+<style scoped lang="scss">
+.shop_info {
+    display: flex;
+
+    span {
+        margin-left: 6px;
+    }
+}
+
+.header {
+    padding: 0 20px 0;
+
+    .title {
+        font-size: 20px;
+        color: #FF9731;
+    }
+
+    .table {
+        display: flex;
+        padding: 20px 0;
+
+        .item {
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            font-size: 14px;
+
+            .b {
+                padding-top: 20px;
+            }
+        }
+    }
+}
+
+.container {
+    padding: 0 20px;
+    font-size: 14px;
+
+    .info_content {
+        padding: 20px 0;
+
+        .item {
+            border-bottom: 1px dashed #ececec;
+            padding-bottom: 20px;
+
+            &:not(:first-child) {
+                margin-top: 20px;
+            }
+
+            .label {
+                position: relative;
+                padding-left: 20px;
+                color: #333;
+
+                &::after {
+                    content: "";
+                    width: 4px;
+                    height: 100%;
+                    position: absolute;
+                    left: 0;
+                    top: 0;
+                    background-color: #1890FF;
+                }
+            }
+
+            .row {
+                display: flex;
+                color: #555;
+                padding-top: 20px;
+
+                div {
+                    width: 33.333%;
+                }
+            }
+        }
+    }
+
+    .refund_wrap {
+        .row {
+            border-bottom: 1px dashed #ececec;
+            padding-bottom: 20px;
+
+            &:not(:first-child) {
+                margin-top: 20px;
+            }
+
+            .time {
+                font-weight: bold;
+                color: #333;
+            }
+
+            .list {
+                .list_row {
+                    display: flex;
+                    padding-top: 10px;
+
+                    .item {
+                        flex: 1;
+                        display: flex;
+                        color: #555;
+
+                        .name {
+                            margin-left: 6px;
+                        }
+                    }
+                }
+            }
+
+            .foot {
+                color: #333;
+                display: flex;
+                justify-content: flex-end;
+            }
+        }
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/order_manage/order_list.vue b/src/views/order_manage/order_list.vue
index 597c43f..34f0341 100644
--- a/src/views/order_manage/order_list.vue
+++ b/src/views/order_manage/order_list.vue
@@ -81,8 +81,10 @@
                             <div class="row" v-for="item in scope.row.detailList" :key="item.id">
                                 <el-image :src="item.productImg" class="cover" lazy></el-image>
                                 <div class="info">
-                                    <div class="name">{{ item.productName }}</div>
-                                    <div class="sku">{{ item.productSkuName }}</div>
+                                    <div class="name">{{ item.productName }} <span class="refund"
+                                            v-if="item.status == 'refunding' || item.status == 'refund'">(退 - {{
+            item.num }})</span></div>
+                                    <div class="sku">{{ item.productSkuName }} </div>
                                 </div>
                             </div>
                         </div>
@@ -91,6 +93,9 @@
                 <el-table-column label="订单金额">
                     <template v-slot="scope">
                         <div>{{ scope.row.orderType | orderTypeFilter }}</div>
+                        <div class="refund" v-if="scope.row.status == 'refunding' || scope.row.status == 'refund'">
+                            退款：-￥{{
+            scope.row.refundAmount }}</div>
                         <div>￥{{ scope.row.productAmount }}</div>
                     </template>
                 </el-table-column>
@@ -109,6 +114,11 @@
                         {{ scope.row.createdAt | timeFilter }}
                     </template>
                 </el-table-column>
+                <el-table-column label="操作">
+                    <template v-slot="scope">
+                        <el-button type="text" @click="$refs.orderDetail.show(scope.row)">详情</el-button>
+                    </template>
+                </el-table-column>
             </el-table>
         </div>
         <div class="head-container">
@@ -116,6 +126,7 @@
                 @current-change="paginationChange" @size-change="sizeChange"
                 layout="total, sizes, prev, pager, next, jumper"></el-pagination>
         </div>
+        <orderDetail ref="orderDetail" />
     </div>
 </template>
 
@@ -125,7 +136,11 @@ import { tbShopPayTypeGet } from '@/api/setting'
 import { tbOrderInfoData, tbOrderInfoDownload } from '@/api/order'
 import dayjs from 'dayjs'
 import { downloadFile } from '@/utils/index'
+
+import orderDetail from './components/orderDetail'
+
 export default {
+    components: { orderDetail },
     data() {
         return {
             orderEnum,
@@ -298,6 +313,11 @@ export default {
     }
 }
 
+.refund {
+    color: #FF9731;
+    font-weight: bold;
+}
+
 .table_order_info {
     .order_no {
         color: #999;
diff --git a/src/views/product/add_shop.vue b/src/views/product/add_shop.vue
index d535bee..632e56f 100644
--- a/src/views/product/add_shop.vue
+++ b/src/views/product/add_shop.vue
@@ -2,7 +2,7 @@
     <div class="app-container">
         <el-form ref="formRef" :model="form" :rules="rules" label-width="120px" label-position="left">
             <el-form-item label="商品类型" prop="typeEnum">
-                <div class="shop_type_box">
+                <div class="shop_type_box" :class="{ disabled: form.id }">
                     <div class="item" v-for="(item, index) in shopTypes" :key="index"
                         :class="{ active: shopTypesActive == index }" @click="changeTypeEnum(index)">
                         <div class="s_title">{{ item.label }}</div>
@@ -116,7 +116,7 @@
                 </el-table>
                 <div class="tips" v-if="form.isShowMall">注：小程序商城必须设置库存数量大于0</div>
             </el-form-item>
-            <el-form-item label="选择规格" v-if="shopTypes[shopTypesActive].typeEnum == 'sku'">
+            <el-form-item label="选择规格" v-if="shopTypes[shopTypesActive].typeEnum == 'sku' && !form.id">
                 <el-select v-model="form.specId" placeholder="请选择规格" style="width: 500px;" @change="selectSpecHandle">
                     <el-option :label="item.name" :value="item.id" v-for="item in specList" :key="item.id"></el-option>
                 </el-select>
@@ -423,10 +423,6 @@ export default {
                     })
                     this.selectSpecResult = true
                 }
-
-                if (res.typeEnum == 'sku') {
-                    this.createSkuBody()
-                }
             } catch (error) {
                 console.log(error)
             }
@@ -481,6 +477,7 @@ export default {
         },
         // 切换类型
         changeTypeEnum(index) {
+            if (this.form.id) return
             this.shopTypesActive = index
             const typeEnum = this.shopTypes[index].typeEnum
             this.form.typeEnum = typeEnum
diff --git a/src/views/product/components/addGroup.vue b/src/views/product/components/addGroup.vue
index 8408bcf..7aa8e14 100644
--- a/src/views/product/components/addGroup.vue
+++ b/src/views/product/components/addGroup.vue
@@ -7,7 +7,7 @@
                 </el-form-item>
                 <el-form-item label="选择商品">
                     <div>
-                        <el-button type="primary" icon="el-icon-plus" @click="$refs.shopListRef.show()">
+                        <el-button type="primary" icon="el-icon-plus" @click="$refs.shopListRef.show([...productIds])">
                             添加商品
                         </el-button>
                     </div>
diff --git a/src/views/shop/components/shopInfo.vue b/src/views/shop/components/shopInfo.vue
index 03574ff..2ef1362 100644
--- a/src/views/shop/components/shopInfo.vue
+++ b/src/views/shop/components/shopInfo.vue
@@ -50,12 +50,12 @@
                     }" format="HH:mm" value-format="HH:mm">
                     </el-time-picker>
                 </el-form-item>
-                <el-form-item label="结算类型">
+                <!-- <el-form-item label="结算类型">
                     <el-radio-group v-model="form.settleType">
                         <el-radio :label="0">今日</el-radio>
                         <el-radio :label="1">次日</el-radio>
                     </el-radio-group>
-                </el-form-item>
+                </el-form-item> -->
                 <el-form-item label="结算时间" prop="settleTime">
                     <el-time-picker placeholder="请选择结算时间" v-model="form.settleTime" :picker-options="{
                         selectableRange: '00:00:00 - 23:59:59',