升级Vue3，iView替换ElementPlus

- 删除babel配置、更新依赖与入口初始化
- 全量替换UI组件、样式适配，新增迁移文档与标签/过滤器自动化替换脚本

seller/src/views/statistics/goods.vue

@@ -1,79 +1,69 @@
 <template>
   <div>
-
-      <Card class="card fixed-bottom">
-        <affixTime :closeShop="true" @selected="clickBreadcrumb"/>
-      </Card>
-
-    <Card class="card">
-
-      <Tabs @on-click="handleClickType">
-        <TabPane label="热门商品订单数量" name="NUM">
-          <Table :columns="columns" :data="data"></Table>
-        </TabPane>
-        <TabPane label="热门商品订单金额" name="PRICE">
-          <Table :columns="columns" :data="data"></Table>
-        </TabPane>
-      </Tabs>
-
-    </Card>
+    <el-affix :offset="100">
+      <el-card class="card fixed-bottom">
+        <affixTime :closeShop="true" @selected="clickBreadcrumb" />
+      </el-card>
+    </el-affix>
+    <el-card class="card">
+      <el-tabs v-model="params.type" @tab-click="handleClickType">
+        <el-tab-pane label="热门商品订单数量" name="NUM">
+          <el-table :data="data" stripe style="width: 100%">
+            <el-table-column prop="goodsName" label="商品名称" min-width="160" />
+            <el-table-column prop="num" label="销售数量" min-width="120" />
+            <el-table-column label="销售金额" min-width="120">
+              <template #default="{ row }">
+                <priceColorScheme v-if="row" :value="row.price" :color="$mainColor" />
+              </template>
+            </el-table-column>
+          </el-table>
+        </el-tab-pane>
+        <el-tab-pane label="热门商品订单金额" name="PRICE">
+          <el-table :data="data" stripe style="width: 100%">
+            <el-table-column prop="goodsName" label="商品名称" min-width="160" />
+            <el-table-column prop="num" label="销售数量" min-width="120" />
+            <el-table-column label="销售金额" min-width="120">
+              <template #default="{ row }">
+                <priceColorScheme v-if="row" :value="row.price" :color="$mainColor" />
+              </template>
+            </el-table-column>
+          </el-table>
+        </el-tab-pane>
+      </el-tabs>
+    </el-card>
   </div>
 </template>
 <script>
-import affixTime from "@/views/lili-components/affix-time";
 import * as API_Goods from "@/api/goods";
-import Cookies from "js-cookie";
+import affixTime from "@/views/lili-components/affix-time";
 
 export default {
-  components: { affixTime },
+  components: {
+    affixTime,
+  },
   data() {
     return {
-      setting:"",
-      params: { // 请求参数
+      params: {
         searchType: "LAST_SEVEN",
         year: "",
         month: "",
-        storeId: JSON.parse(Cookies.get("userInfoSeller")).id || '',
-        type: "NUM"
+        shopId: "",
+        type: "NUM",
       },
-      columns: [ // 表格表头
-        {
-          title: "商品名称",
-          key: "goodsName",
-        },
-        {
-          title: "销售数量",
-          key: "num",
-        },
-        {
-          title: "销售金额",
-          key: "price",
-          render: (h, params) => {
-            return h("priceColorScheme", {props:{value:params.row.price,color:this.$mainColor}} );
-          },
-        },
-      ],
-      data: [], // 表格数据
+      data: [],
     };
-  },
-  computed:{
-
   },
   methods: {
-    // tab切换
-    handleClickType(name) {
-      this.params.type = name;
+    handleClickType(tab) {
+      this.params.type = tab.paneName;
       this.getData();
     },
-    // 时间筛选
-    clickBreadcrumb(item, index) {
-      let callback = item;
-      let type = this.params.type;
-      this.params = {...callback};
+    clickBreadcrumb(item) {
+      const type = this.params.type;
+      this.params = { ...item };
       this.params.type = type;
       this.getData();
     },
-    // 获取数据
     getData() {
       Promise.all([API_Goods.goodsStatistics(this.params)]).then((res) => {
         if (res[0].result) {
@@ -88,11 +78,29 @@ export default {
 };
 </script>
 <style scoped lang="scss">
-.fixed-bottom{
-  position:sticky;
-  z-index: 999;
-  top: 0;
+.page-col {
+  text-align: right;
+  margin: 10px 0;
 }
+
+.order-col {
+  display: flex;
+
+  > div {
+    margin-right: 8px;
+    padding: 16px;
+    font-size: 15px;
+  }
+}
+
+.order-list {
+  display: flex;
+}
+
+.tips {
+  margin: 0 8px;
+}
+
 .card {
   margin-bottom: 10px;
 }

seller/src/views/statistics/order.vue

@@ -1,75 +1,99 @@
 <template>
-
   <div class="wrapper">
-      <Card class="card fixed-bottom">
+    <el-affix :offset="100">
+      <el-card class="card fixed-bottom">
         <affixTime @selected="clickBreadcrumb" />
-      </Card>
+      </el-card>
+    </el-affix>
 
-    <Card class="card">
+    <el-card class="card">
       <div>
         <h4>交易概况</h4>
         <div class="flex">
           <div class="transactionList">
-            <div class="transaction-item" v-for="(item,index) in transactionList" :key="index">
-              <h4>{{item.label}}</h4>
-              <div class="transaction-card" v-if="item.label=='转换'">
-
+            <div
+              class="transaction-item"
+              v-for="(item, index) in transactionList"
+              :key="index"
+            >
+              <h4>{{ item.label }}</h4>
+              <div class="transaction-card" v-if="item.label == '转换'">
                 <div class="card-item">
                   <div class="card-item-label">访客数UV</div>
-                  <div class="card-item-value">{{overViewList.uvNum || 0}}</div>
+                  <div class="card-item-value">
+                    {{ overViewList.uvNum || 0 }}
+                  </div>
                 </div>
                 <div class="card-item">
                   <div class="card-item-label">下单转化率</div>
-                  <div class="card-item-value">{{overViewList.orderConversionRate || '0%'}}</div>
+                  <div class="card-item-value">
+                    {{ overViewList.orderConversionRate || "0%" }}
+                  </div>
                 </div>
                 <div class="card-item">
                   <div class="card-item-label">付款转化率</div>
-                  <div class="card-item-value">{{overViewList.paymentsConversionRate ||'0%'}}</div>
+                  <div class="card-item-value">
+                    {{ overViewList.paymentsConversionRate || "0%" }}
+                  </div>
                 </div>
                 <div class="card-item">
                   <div class="card-item-label">全店转化率</div>
-                  <div class="card-item-value">{{overViewList.overallConversionRate || '0%'}}</div>
+                  <div class="card-item-value">
+                    {{ overViewList.overallConversionRate || "0%" }}
+                  </div>
                 </div>
-
               </div>
-              <div class="transaction-card" v-if="item.label=='订单'">
+              <div class="transaction-card" v-if="item.label == '订单'">
                 <div class="card-item">
                   <div class="card-item-label">下单笔数</div>
-                  <div class="card-item-value">{{overViewList.orderNum || 0}}</div>
+                  <div class="card-item-value">
+                    {{ overViewList.orderNum || 0 }}
+                  </div>
                 </div>
                 <div class="card-item">
                   <div class="card-item-label">下单人数</div>
-                  <div class="card-item-value">{{overViewList.orderMemberNum || 0}}</div>
+                  <div class="card-item-value">
+                    {{ overViewList.orderMemberNum || 0 }}
+                  </div>
                 </div>
                 <div class="card-item">
                   <div class="card-item-label">下单金额</div>
-                  <div class="card-item-value">{{overViewList.orderAmount || 0 | unitPrice('￥')}}</div>
+                  <div class="card-item-value">
+                    {{ $filters.unitPrice(overViewList.orderAmount || 0, "￥") }}
+                  </div>
                 </div>
                 <div class="card-item">
                   <div class="card-item-label">付款笔数</div>
-                  <div class="card-item-value">{{overViewList.paymentOrderNum  || 0}}</div>
+                  <div class="card-item-value">
+                    {{ overViewList.paymentOrderNum || 0 }}
+                  </div>
                 </div>
                 <div class="card-item">
                   <div class="card-item-label">付款人数</div>
-                  <div class="card-item-value">{{overViewList.paymentsNum || 0}}</div>
+                  <div class="card-item-value">
+                    {{ overViewList.paymentsNum || 0 }}
+                  </div>
                 </div>
                 <div class="card-item">
                   <div class="card-item-label">付款金额</div>
-                  <div class="card-item-value">{{ overViewList.paymentAmount || 0 | unitPrice('￥')}}</div>
+                  <div class="card-item-value">
+                    {{ $filters.unitPrice(overViewList.paymentAmount || 0, "￥") }}
+                  </div>
                 </div>
-
               </div>
-              <div class="transaction-card" v-if="item.label=='退单'">
-
+              <div class="transaction-card" v-if="item.label == '退单'">
                 <div class="card-item">
                   <div class="card-item-label">退单笔数</div>
-                  <div class="card-item-value">{{overViewList.refundOrderNum || 0}}</div>
+                  <div class="card-item-value">
+                    {{ overViewList.refundOrderNum || 0 }}
+                  </div>
                 </div>
                 <div class="card-item">
                   <div class="card-item-label">退单金额</div>
-                  <div class="card-item-value">{{overViewList.refundOrderPrice || 0 | unitPrice('￥')}}</div>
+                  <div class="card-item-value">
+                    {{ $filters.unitPrice(overViewList.refundOrderPrice || 0, "￥") }}
+                  </div>
                 </div>
-
               </div>
             </div>
           </div>
@@ -79,107 +103,181 @@
               <div class="block">
                 <div class="box">
                   <span>访客数</span>
-                  <span>{{overViewList.uvNum  || 0}}</span>
+                  <span>{{ overViewList.uvNum || 0 }}</span>
                 </div>
               </div>
               <!-- 中 -->
               <div class="block">
                 <div class="box">
                   <span>下单笔数</span>
-                  <span>{{overViewList.orderNum  || 0}}</span>
+                  <span>{{ overViewList.orderNum || 0 }}</span>
                 </div>
               </div>
               <!-- 下 -->
               <div class="block">
                 <div class="box">
                   <span>付款笔数</span>
-                  <span>{{overViewList.paymentOrderNum  || 0 }}</span>
+                  <span>{{ overViewList.paymentOrderNum || 0 }}</span>
                 </div>
               </div>
 
               <!-- 线 -->
-              <div class="rightBorder">
-
-              </div>
-              <div class="leftTopBorder">
-
-              </div>
-              <div class="leftBottomBorder">
-
-              </div>
+              <div class="rightBorder"></div>
+              <div class="leftTopBorder"></div>
+              <div class="leftBottomBorder"></div>
               <!--数据 -->
               <div class="leftTopTips">
-                <div>下单转化率 </div>
-                <div>{{overViewList.orderConversionRate  || '0%' }}</div>
+                <div>下单转化率</div>
+                <div>{{ overViewList.orderConversionRate || "0%" }}</div>
               </div>
               <div class="leftBottomTips">
                 <div>付款转化率</div>
-                <div>{{overViewList.paymentsConversionRate  || '0%'}}</div>
+                <div>{{ overViewList.paymentsConversionRate || "0%" }}</div>
               </div>
               <div class="rightTips">
                 <div>整体转换率</div>
-                <div>{{overViewList.overallConversionRate  || '0%'}}</div>
+                <div>{{ overViewList.overallConversionRate || "0%" }}</div>
               </div>
             </div>
           </div>
         </div>
       </div>
-    </Card>
+    </el-card>
 
-    <Card class="card">
+    <el-card class="card">
       <div>
         <h4>交易趋势</h4>
-        <div>
-
-        </div>
+        <div></div>
       </div>
 
       <div>
-
         <div id="orderChart"></div>
-
       </div>
-    </Card>
-    <Card class="card">
-      <div>
-        <h4>订退单统计</h4>
-        <div class="breadcrumb" style="margin-bottom:20px;">
-          <RadioGroup v-model="orderOrRefund" type="button" size="small" button-style="solid">
-            <Radio :label="1">订单</Radio>
-            <Radio :label="0">退单</Radio>
-          </RadioGroup>
-        </div>
-        <div>
-          <Table stripe :columns="columns" :data="data"></Table>
-        </div>
-        <Page @on-change="pageNumberChange" @on-page-size-change="pageSizeChange" class="mt_10" show-total show-elevator :total="total" />
-      </div>
-    </Card>
+    </el-card>
 
+    <el-card class="card">
+      <el-tabs v-model="orderOrRefund">
+        <el-tab-pane label="订单" name="order">
+          <el-table stripe :data="data" style="width: 100%">
+            <el-table-column type="expand" width="50">
+              <template #default="{ row }">
+                <orderRow v-if="row" :res="row" />
+              </template>
+            </el-table-column>
+            <el-table-column prop="storeName" label="商家名称" min-width="120" />
+            <el-table-column prop="memberName" label="用户名" min-width="100" />
+            <el-table-column label="订单状态" min-width="100">
+              <template #default="{ row }">
+                <span v-if="row">{{ orderStatusList[row.orderStatus] }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column prop="createTime" label="创建时间" min-width="160" />
+            <el-table-column label="支付时间" min-width="160">
+              <template #default="{ row }">
+                <span v-if="row">{{ row.paymentTime || "暂无" }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column label="价格" min-width="110">
+              <template #default="{ row }">
+                <span v-if="row" :style="{ color: $mainColor }">
+                  {{ $filters.unitPrice(row.flowPrice, "￥") }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column label="操作" width="80" align="center">
+              <template #default="{ row }">
+                <a v-if="row" class="link-text" @click="goDetail(row)">查看</a>
+              </template>
+            </el-table-column>
+          </el-table>
+        </el-tab-pane>
+        <el-tab-pane label="退单" name="refund">
+          <el-table stripe :data="data" style="width: 100%">
+            <el-table-column type="expand" width="50">
+              <template #default="{ row }">
+                <refundRow v-if="row" :res="row" />
+              </template>
+            </el-table-column>
+            <el-table-column label="商品图片" width="90" align="center">
+              <template #default="{ row }">
+                <img
+                  v-if="row && row.goodsImage"
+                  :src="row.goodsImage"
+                  style="width: 60px; vertical-align: middle"
+                  alt=""
+                />
+              </template>
+            </el-table-column>
+            <el-table-column prop="goodsName" label="商品名称" min-width="140" show-overflow-tooltip />
+            <el-table-column prop="storeName" label="商家名称" min-width="120" />
+            <el-table-column label="售后单类型" min-width="100">
+              <template #default="{ row }">
+                <span v-if="row">{{ serviceTypeList[row.serviceType] }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column label="售后单状态" min-width="120">
+              <template #default="{ row }">
+                <span v-if="row">{{ serviceStatusList[row.serviceStatus] }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column label="退款时间" min-width="160">
+              <template #default="{ row }">
+                <span v-if="row">{{ row.refundTime || "暂无" }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column label="申请退款金额" min-width="120">
+              <template #default="{ row }">
+                <span v-if="row" :style="{ color: $mainColor }">
+                  {{ $filters.unitPrice(row.applyRefundPrice, "￥") }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column prop="reason" label="申请原因" min-width="120" show-overflow-tooltip />
+            <el-table-column label="实际金额" min-width="110">
+              <template #default="{ row }">
+                <span v-if="row">{{ $filters.unitPrice(row.flowPrice || 0, "￥") }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column label="操作" width="90" align="center">
+              <template #default="{ row }">
+                <a v-if="row" class="link-text" @click="goDetail(row)">查看</a>
+              </template>
+            </el-table-column>
+          </el-table>
+        </el-tab-pane>
+      </el-tabs>
+      <el-pagination
+        v-if="showRecords"
+        v-model:current-page="refundParams.pageNumber"
+        v-model:page-size="refundParams.pageSize"
+        class="mt_10"
+        :total="total"
+        :page-sizes="[20, 50, 100]"
+        layout="total, sizes, prev, pager, next, jumper"
+        size="small"
+      />
+    </el-card>
   </div>
 </template>
 <script>
 import * as API_Goods from "@/api/goods";
 import { Chart } from "@antv/g2";
-
 import orderRow from "./order/orderDetail";
 import refundRow from "./order/refundOrder";
 import affixTime from "@/views/lili-components/affix-time";
-import Cookies from "js-cookie";
+
 export default {
   components: { orderRow, refundRow, affixTime },
 
   data() {
     return {
-      orderOrRefund: 1, // 订单还是退单
-      total:0, // 订单总数
+      orderOrRefund: "order", // order | refund
+      total: 0, // 总数
       // 订单状态
       orderStatusList: {
         UNDELIVERED: "待发货",
         UNPAID: "未付款",
         PAID: "已付款",
         DELIVERED: "已发货",
-        CANCELLED: "已取消",
+        CANCELLED: "已关闭",
         COMPLETED: "已完成",
         TAKE: "已完成",
       },
@@ -192,7 +290,7 @@ export default {
         RETURN_MONEY: "退款",
       },
       serviceStatusList: {
-        // 服务类型
+        // 服务状态
         APPLY: "申请售后",
         PASS: "通过售后",
         REFUSE: "拒绝售后",
@@ -207,140 +305,7 @@ export default {
       },
       //
 
-      data: [], //定退单存储值
-
-      columns: [], // 定退单title
-
-      orderColumns: [
-        // 订单表头
-        {
-          type: "expand",
-          width: 50,
-          render: (h, params) => {
-            return h(orderRow, {
-              props: {
-                res: params.row,
-              },
-            });
-          },
-        },
-        {
-          title: "商家名称",
-          key: "storeName",
-        },
-        {
-          title: "用户名",
-          key: "memberName",
-        },
-
-        {
-          title: "订单状态",
-          key: "orderStatus",
-          render: (h, params) => {
-            return h("div", this.orderStatusList[params.row.orderStatus]);
-          },
-        },
-        {
-          title: "创建时间",
-          key: "createTime",
-        },
-
-        {
-          title: "支付时间",
-          key: "paymentTime",
-          render: (h, params) => {
-            return h("div", params.row.paymentTime || "暂无");
-          },
-        },
-        {
-          title: "价格",
-          key: "flowPrice",
-          render: (h, params) => {
-            return h("priceColorScheme", {props:{value:params.row.flowPrice,color:this.$mainColor}} );
-          },
-        },
-      ],
-      refundColumns: [
-        // 退货单表头
-        {
-          type: "expand",
-          width: 50,
-          render: (h, params) => {
-            return h(refundRow, {
-              props: {
-                res: params.row,
-              },
-            });
-          },
-        },
-        {
-          title: "商品图片",
-          key: "goodsImage",
-          render: (h, params) => {
-            return h("img", {
-              attrs: {
-                src: params.row.goodsImage,
-              },
-              style: {
-                width: "60px",
-                verticalAlign: "middle",
-              },
-            });
-          },
-        },
-
-        {
-          title: "商品名称",
-          key: "goodsName",
-        },
-        {
-          title: "商家名称",
-          key: "sellerName",
-        },
-        {
-          title: "售后单类型",
-          key: "serviceType",
-          render: (h, params) => {
-            return h("div", this.serviceTypeList[params.row.serviceType]);
-          },
-        },
-        {
-          title: "售后单状态",
-          key: "serviceStatus",
-          render: (h, params) => {
-            return h("div", this.serviceStatusList[params.row.serviceStatus]);
-          },
-        },
-        {
-          title: "退款时间",
-          key: "refundTime",
-          render: (h, params) => {
-            return h("div", params.row.refundTime || "暂无");
-          },
-        },
-        {
-          title: "申请退款金额",
-          key: "applyRefundPrice",
-          render: (h, params) => {
-              return h("priceColorScheme", {props:{value:params.row.applyRefundPrice,color:this.$mainColor}} );
-          },
-
-        },
-        {
-          title: "申请原因",
-          key: "reason",
-        },
-        {
-          title: "实际金额",
-          key: "flowPrice",
-          render: (h, params) => {
-            return h(
-              "div",
-              this.$options.filters.unitPrice(params.row.flowPrice, "￥")
-            );
-          },
-        },
-      ],
+      data: [],
 
       // 交易概况
       transactionList: [
@@ -387,37 +352,35 @@ export default {
           value: "LAST_THIRTY",
         },
       ],
-
       // 订单传参
       orderParams: {
         searchType: "LAST_SEVEN", // TODAY ,  YESTERDAY , LAST_SEVEN , LAST_THIRTY
         year: "",
-        storeId: JSON.parse(Cookies.get("userInfoSeller")).id || "",
+        shopId: "",
         memberId: "",
       },
       // 订单概念
       overViewParams: {
         month: "",
         searchType: "LAST_SEVEN", // TODAY ,  YESTERDAY , LAST_SEVEN , LAST_THIRTY
-        storeId: JSON.parse(Cookies.get("userInfoSeller")).id || "",
+        storeId: "",
         year: "",
       },
       defaultParams: {
         month: "",
         searchType: "LAST_SEVEN", // TODAY ,  YESTERDAY , LAST_SEVEN , LAST_THIRTY
-        storeId: JSON.parse(Cookies.get("userInfoSeller")).id || "",
+        storeId: "",
         year: "",
       },
-
-      refundIndex: 0, // 当前退单下标详情
       // 退单订单
       refundParams: {
         pageNumber: 1,
         pageSize: 20,
         searchType: "LAST_SEVEN",
-        storeId: JSON.parse(Cookies.get("userInfoSeller")).id || "",
+        storeId: "",
         year: "",
       },
+      showRecords:false,
 
       //
       //
@@ -425,16 +388,17 @@ export default {
   },
   watch: {
     refundParams: {
-      handler() {
-        if (this.refundIndex == 1) {
-          this.getOrderRefundList();
-        } else {
-          this.getOrderList();
-        }
+      handler(val) {
+        this.getOrderList();
       },
       deep: true,
       immediate: true,
     },
+    orderOrRefund() {
+      this.showRecords = false;
+      this.refundParams.pageNumber = 1;
+      this.getOrderList();
+    },
     orderParams: {
       handler() {
         this.initOrderChartList();
@@ -447,25 +411,12 @@ export default {
       },
       deep: true,
     },
-    orderOrRefund: {
-      // 订单还是退单
-      handler(val) {
-        if (val == 1) {
-          this.getOrderList();
-        } else {
-          this.getOrderRefundList();
-        }
-      },
-    },
   },
   methods: {
-    pageNumberChange(val){
-      this.refundParams.pageNumber = val
-      this.getOrderList();
-    },
-    pageSizeChange(val){
-      this.refundParams.pageSize = val
-      this.getOrderList();
+    goDetail(row) {
+      const sn = row.sn;
+      const path = this.orderOrRefund === "order" ? "order-detail" : "after-order-detail";
+      this.$router.push({ path, query: { sn } });
     },
     // 订单图
     initOrderChart() {
@@ -500,16 +451,20 @@ export default {
           stroke: "#fff",
           lineWidth: 1,
         });
+         this.orderChart.area().position("createTime*price").color("title").shape("smooth");
+
       this.orderChart.render();
     },
-    // 时间筛选
+
     clickBreadcrumb(item, index) {
       let callback = JSON.parse(JSON.stringify(item));
-
+      console.log("callback",callback)
       this.orderParams = callback;
 
       this.overViewParams = callback;
       this.refundParams = callback;
+      this.refundParams.pageNumber = 1
+      this.refundParams.pageSize = 20
     },
 
     // 实例化订单概览
@@ -540,20 +495,17 @@ export default {
     },
     // 统计相关订单统计
     async getOrderList() {
-      const res = await API_Goods.statisticsOrderList(this.refundParams);
-      if (res.success) {
-        this.data = res.result.records;
-        this.columns = this.orderColumns;
-        this.total = res.result.total;
+      let res;
+      if (this.orderOrRefund === "order") {
+        // 订单
+        res = await API_Goods.statisticsOrderList(this.refundParams);
+      } else {
+        // 退单
+        res = await API_Goods.statisticsOrderRefundList(this.refundParams);
       }
-    },
-
-    //  统计相关退单统计
-    async getOrderRefundList() {
-      const res = await API_Goods.statisticsOrderRefundList(this.refundParams);
       if (res.success) {
+        this.showRecords = true;
         this.data = res.result.records;
-        this.columns = this.refundColumns;
         this.total = res.result.total;
       }
     },
@@ -573,11 +525,6 @@ export default {
 };
 </script>
 <style scoped lang="scss">
-.fixed-bottom{
-  position:sticky;
-  z-index: 999;
-  top: 0;
-}
 .active {
   color: $theme_color;
   position: relative;
@@ -718,7 +665,7 @@ export default {
       z-index: 2;
     }
   }
-  ::v-deep .box {
+  :deep(.box){
     color: #fff;
     position: absolute;
 
@@ -795,4 +742,12 @@ h4 {
 .card {
   margin-bottom: 10px;
 }
+.link-text {
+  color: #409eff;
+  cursor: pointer;
+  text-decoration: none;
+}
+.mt_10 {
+  margin-top: 10px;
+}
 </style>

seller/src/views/statistics/order/orderDetail.vue

@@ -1,70 +1,81 @@
 <template>
-  <div>
+  <div class="wrapper">
     <div class="shop">
       <h3>订单详情</h3>
       <div class="shop-item">
         <div class="label-item">
           <span>订单来源</span>
-          <span>{{res.clientType}}</span>
+          <span>{{ $filters.clientTypeWay(res.clientType) }}</span>
         </div>
         <div class="label-item">
           <span>订单状态</span>
-          <span>{{orderStatusList[res.orderStatus]}}</span>
+          <span>{{ orderStatusList[res.orderStatus] }}</span>
         </div>
         <div class="label-item">
           <span>付款状态</span>
-          <span>{{res.payStatus == "UNPAID"
-                ? "未付款"
-                : res.payStatus == "PAID"
-                ? "已付款"
-                : ""}}</span>
+          <span>{{
+            res.payStatus == "UNPAID"
+              ? "未付款"
+              : res.payStatus == "PAID"
+              ? "已付款"
+              : ""
+          }}</span>
         </div>
         <div class="label-item">
           <span>支付时间</span>
-          <span>{{res.paymentTime || '暂无'}}</span>
+          <span>{{ res.paymentTime || "暂无" }}</span>
         </div>
         <div class="label-item">
           <span>支付方式</span>
-          <span>{{res.paymentMethod == "ONLINE" ? "在线支付" : ""
-            }}{{ res.paymentMethod == "ALIPAY" ? "支付宝" : res.paymentMethod == "BANK_TRANSFER" ? "银行卡" : "" || '暂无'}}</span>
+          <span
+            >{{ res.paymentMethod == "ONLINE" ? "在线支付" : ""
+            }}{{
+              res.paymentMethod == "ALIPAY"
+                ? "支付宝"
+                : res.paymentMethod == "BANK_TRANSFER"
+                ? "银行卡"
+                : "" || "暂无"
+            }}</span
+          >
         </div>
-
       </div>
       <div class="shop-item">
         <div class="label-item">
           <span>用户名</span>
-          <span>{{res.memberName}}</span>
+          <span>{{ res.memberName }}</span>
         </div>
         <div class="label-item">
           <span>店铺名称</span>
-          <span>{{res.storeName}}</span>
+          <span>{{ res.storeName }}</span>
         </div>
         <div class="label-item">
           <span>创建时间</span>
-          <span>{{res.createTime}}</span>
+          <span>{{ res.createTime }}</span>
         </div>
-
       </div>
       <h3>商品详情</h3>
       <div class="shop-item">
-
-        <div class="goods-item" v-for="(item,index) in res.orderItems" :key="index">
+        <div
+          class="goods-item"
+          @click="handleClickGoods(item.goodsId)"
+          v-for="(item, index) in res.orderItems"
+          :key="index"
+        >
           <div class="goods-img">
-            <img class="img" :src="item.image" alt="">
+            <img class="img" :src="item.image" alt="" />
           </div>
           <div class="goods-title">
-            <div>{{item.name}}</div>
-            <div>{{'x'+item.num}}</div>
-            <div class="goods-price">{{res.flowPrice |  unitPrice('￥')}}</div>
-
+            <div>{{ item.name }}</div>
+            <div>{{ "x" + item.num }}</div>
+            <div class="goods-price">{{ $filters.unitPrice(res.flowPrice, "￥") }}</div>
           </div>
-
         </div>
       </div>
       <div class="count-price">
         <div class="label-item">
           <span>总价格</span>
-          <span class="flowPrice">{{res.flowPrice |  unitPrice('￥')}}</span>
+          <span class="flowPrice" :style="{ color: $mainColor }">
+            {{ $filters.unitPrice(res.flowPrice, "￥") }}</span>
         </div>
       </div>
     </div>
@@ -75,17 +86,26 @@ export default {
   data() {
     return {
       orderStatusList: {
+        // 订单状态
         UNDELIVERED: "待发货",
         UNPAID: "未付款",
         PAID: "已付款",
         DELIVERED: "已发货",
-        CANCELLED: "已取消",
+        CANCELLED: "已关闭",
         COMPLETED: "已完成",
         TAKE: "已完成",
       },
     };
   },
   props: ["res"],
+  methods: {
+    handleClickGoods(id) {
+      this.$router.push({
+        query: { id },
+        path: "/goods/goods-info/goodsDetail",
+      });
+    },
+  },
 };
 </script>
 <style lang="scss" scoped>
@@ -110,6 +130,7 @@ h3 {
   display: flex;
   width: 100%;
   margin: 16px;
+  cursor: pointer;
 }
 .count-price {
   display: flex;
@@ -135,13 +156,14 @@ h3 {
 }
 .label-item {
   margin: 10px 0;
-  width: 20%;
+  width: 33%;
   padding: 8px;
   align-items: center;
   font-weight: bold;
   display: flex;
-  > span {
-    padding: 8px;
+  > span:nth-child(1) {
+    width: 70px;
+    color: #999;
   }
 }
 </style>

seller/src/views/statistics/order/refundOrder.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="wrapper">
     <div class="shop">
       <h3>售后详情</h3>
       <div class="shop-item">
@@ -14,13 +14,16 @@
 
         <div class="label-item">
           <span>退款时间</span>
-          <span>{{res.refundTime || '暂无'}}</span>
+          <span>{{
+            res.refundTime
+              ? $filters.unixToDate(new Date(res.refundTime).getTime() / 1000)
+              : "暂无"
+          }}</span>
         </div>
         <div class="label-item">
           <span>申请退款金额</span>
-          <span>
-            <priceColorScheme :value="afterSaleInfo.applyRefundPrice" :color="$mainColor" />
-          </span>
+          <span :style="{ color: $mainColor }">
+            {{ $filters.unitPrice(res.applyRefundPrice, "￥") }}</span>
         </div>
         <div class="label-item">
           <span>商家备注</span>
@@ -39,25 +42,24 @@
         </div>
         <div class="label-item">
           <span>店铺名称</span>
-          <span>{{res.sellerName}}</span>
+          <span>{{res.storeName}}</span>
         </div>
         <div class="label-item">
           <span>创建时间</span>
           <span>{{res.createTime}}</span>
         </div>
-
       </div>
       <h3>商品详情</h3>
       <div class="shop-item">
 
-        <div class="goods-item">
+        <div  @click="handleClickGoods(res.goodsId)" class="goods-item">
           <div class="goods-img">
             <img class="img" :src="res.goodsImage" alt="">
           </div>
           <div class="goods-title">
             <div>{{res.goodsName}}</div>
             <div>{{'x'+res.num}}</div>
-            <div class="goods-price">{{res.flowPrice |  unitPrice('￥')}}</div>
+            <div class="goods-price">{{ $filters.unitPrice(res.flowPrice, "￥") }}</div>
 
           </div>
 
@@ -66,7 +68,7 @@
       <div class="count-price">
         <div class="label-item">
           <span>实际退款金额</span>
-          <span class="flowPrice">{{res.flowPrice | unitPrice('￥')}}</span>
+          <span class="flowPrice">{{ $filters.unitPrice(res.flowPrice, "￥") }}</span>
         </div>
       </div>
     </div>
@@ -77,12 +79,12 @@
 export default {
   data() {
     return {
-      orderStatusList: {
+      orderStatusList: { // 订单状态
         UNDELIVERED: "待发货",
         UNPAID: "未付款",
         PAID: "已付款",
         DELIVERED: "已发货",
-        CANCELLED: "已取消",
+        CANCELLED: "已关闭",
         COMPLETED: "已完成",
         TAKE: "已完成",
       },
@@ -109,16 +111,23 @@ export default {
     };
   },
   props: ["res"],
+  methods: {
+    handleClickGoods(id) {
+      this.$router.push({
+        query: { id },
+        path: "/goods/goods-info/goodsDetail",
+      });
+    },
+  }
 };
 </script>
 <style lang="scss" scoped>
 .shop {
-  padding: 10px 0;
+  padding: 5px 0;
   background: #fff;
 }
 .shop-item {
   display: flex;
-
   flex-wrap: wrap;
 }
 h3 {
@@ -133,6 +142,7 @@ h3 {
   display: flex;
   width: 100%;
   margin: 16px;
+  cursor: pointer;
 }
 .count-price {
   display: flex;
@@ -157,13 +167,18 @@ h3 {
 }
 .label-item {
   margin: 10px 0;
-  width: 20%;
+  width: 33%;
   padding: 8px;
   align-items: center;
   font-weight: bold;
   display: flex;
-  > span {
-    padding: 8px;
+  > span:nth-child(1) {
+    width: 90px;
+    color: #999;
+  }
+  > span:nth-child(2){
+    text-align: left;
+    white-space: wrap;
   }
 }
 </style>

seller/src/views/statistics/traffic.vue

@@ -1,118 +1,69 @@
 <template>
-  <div>
-      <Card class="card fixed-bottom">
+  <div class="wrapper">
+    <el-affix :offset="100">
+      <el-card class="card fixed-bottom">
         <affixTime @selected="clickBreadcrumb" />
-      </Card>
-    <Card class="card">
+      </el-card>
+    </el-affix>
+    <el-card class="card">
       <div>
         <h4>流量概况</h4>
-
       </div>
       <div class="box">
         <div class="box-item">
-          <div>
-            访客数UV
-          </div>
-          <div>
-            {{uvs||0}}
-          </div>
+          <div>访客数UV</div>
+          <div>{{ uvs || 0 }}</div>
         </div>
-
         <div class="box-item">
-          <div>
-            浏览量PV
-          </div>
-          <div>
-            {{pvs||0}}
-          </div>
+          <div>浏览量PV</div>
+          <div>{{ pvs || 0 }}</div>
         </div>
-
       </div>
+    </el-card>
 
-    </Card>
-
-    <Card class="card">
+    <el-card class="card">
       <div>
         <h4>流量趋势</h4>
         <div id="orderChart"></div>
       </div>
-    </Card>
+    </el-card>
 
-    <Card class="card">
+    <el-card class="card">
       <div>
-        <h4>客户增长报表</h4>
-        <Table class="table" stripe :columns="columns" :data="data"></Table>
+        <h4>会员流量报表</h4>
+        <el-table class="table" stripe :data="data" style="width: 100%">
+          <el-table-column prop="date" label="日期" min-width="120" />
+          <el-table-column prop="pvNum" label="浏览量" min-width="120" />
+          <el-table-column prop="uvNum" label="访客数" min-width="120" />
+        </el-table>
       </div>
-    </Card>
+    </el-card>
   </div>
 </template>
 <script>
 import affixTime from "@/views/lili-components/affix-time";
 import * as API_Member from "@/api/member";
 import { Chart } from "@antv/g2";
-import Cookies from "js-cookie";
+
 export default {
   components: { affixTime },
 
   data() {
     return {
-      // 时间
-
-      uvs: 0, // 访客数
-      pvs: 0, // 浏览量
-
-      dateList: [
-        // 日期选择列表
-        {
-          title: "今天",
-          selected: false,
-          value: "TODAY",
-        },
-        {
-          title: "昨天",
-          selected: false,
-          value: "YESTERDAY",
-        },
-        {
-          title: "过去7天",
-          selected: true,
-          value: "LAST_SEVEN",
-        },
-        {
-          title: "过去30天",
-          selected: false,
-          value: "LAST_THIRTY",
-        },
-      ],
-
-      orderChart: "", // 流量趋势数据
+      uvs: 0,
+      pvs: 0,
+      orderChart: "",
       params: {
         searchType: "LAST_SEVEN",
         year: "",
         month: "",
-        storeId: JSON.parse(Cookies.get("userInfoSeller")).id || "",
       },
-      columns: [
-        {
-          key: "date",
-          title: "日期",
-        },
-        {
-          key: "pvNum",
-          title: "浏览量",
-        },
-        {
-          key: "uvNum",
-          title: "访客数",
-        },
-      ],
-
-      data: [], // 客户增长报表数据
+      data: [],
     };
   },
   watch: {
     params: {
-      handler(val) {
+      handler() {
         this.uvs = 0;
         this.pvs = 0;
         this.init();
@@ -121,15 +72,9 @@ export default {
     },
   },
   methods: {
-    // 订单图
     initChart() {
-      // 默认已经加载 legend-filter 交互
-      /**
-       * 将数据分成三组来进行展示
-       */
-
-      let uv = [];
-      let pv = [];
+      const uv = [];
+      const pv = [];
 
       this.data.forEach((item) => {
         uv.push({
@@ -146,9 +91,9 @@ export default {
         });
       });
 
-      let data = [...uv, ...pv];
+      const chartData = [...uv, ...pv];
 
-      this.orderChart.data(data);
+      this.orderChart.data(chartData);
       this.orderChart.scale({
         activeQuantity: {
           range: [0, 1],
@@ -177,24 +122,21 @@ export default {
           stroke: "#fff",
           lineWidth: 1,
         });
+      this.orderChart.area().position("date*pv").color("title").shape("smooth");
 
       this.orderChart.render();
     },
-    // 时间筛选
-    clickBreadcrumb(item, index) {
-      let callback = JSON.parse(JSON.stringify(item));
-
-      this.params = callback;
+    clickBreadcrumb(item) {
+      this.params = JSON.parse(JSON.stringify(item));
     },
-    // 初始化
     init() {
-      this.orderChart ? this.orderChart.clear() : ''
+      this.orderChart ? this.orderChart.clear() : "";
       API_Member.getStatisticsList(this.params).then((res) => {
         if (res.result) {
           this.data = res.result;
           res.result.forEach((item) => {
-            this.uvs += parseInt(item.uvNum);
-            this.pvs += parseInt(item.pvNum);
+            this.uvs += item.uvNum;
+            this.pvs += item.pvNum;
           });
 
           if (!this.orderChart) {
@@ -216,24 +158,14 @@ export default {
 };
 </script>
 <style scoped lang="scss">
-.fixed-bottom{
-  position:sticky;
-  z-index: 999;
-  top: 0;
-}
 .table {
   margin-top: 10px;
 }
-.wrapper {
-  padding-bottom: 200px;
-}
 .box-item {
   display: flex;
-
   flex-direction: column;
   width: 25%;
   font-weight: bold;
-  // align-items: center;
   justify-content: center;
   > div {
     margin: 4px;