From 4d8a1e1e90919b8c9b7ca594d57a6aa5c0b29018 Mon Sep 17 00:00:00 2001
From: pengda <10266652509@qq.com>
Date: Thu, 15 May 2025 16:49:36 +0800
Subject: [PATCH] =?UTF-8?q?=E8=B4=9F=E6=AF=9B=E5=88=A9=E7=BB=9F=E8=AE=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Pagination.vue            | 130 +++++++++++++++++++++++++++++++
 src/components/super/RankingLeftMenu.vue |   8 +-
 src/router/index.js                      |  42 +++++-----
 src/views/super/Ranking/RankDetail.vue   |  89 ++++++++++-----------
 src/views/super/Ranking/RankList.vue     |  33 ++++++++
 5 files changed, 234 insertions(+), 68 deletions(-)
 create mode 100644 src/components/Pagination.vue

diff --git a/src/components/Pagination.vue b/src/components/Pagination.vue
new file mode 100644
index 0000000..b6b031d
--- /dev/null
+++ b/src/components/Pagination.vue
@@ -0,0 +1,130 @@
+<template>
+    <div class="pagination">
+        <button @click="click('first')" :disabled="cur_page === 1">首页</button>
+        <button @click="click('prev')" :disabled="cur_page === 1">上一页</button>
+        <span class="page-info">第 {{ cur_page }} 页</span>
+        <button @click="click('next')" :disabled="!hasNext">下一页</button>
+        <button @click="click('last')" :disabled="!hasNext">尾页</button>
+        <input type="number" v-model.number="jumpPage" min="1" />
+        <button @click="click('jump')">跳转</button>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'SimplePager',
+    props: {
+        curPage: {
+            type: Number,
+            required: true
+        },
+        hasNext: {
+            type: Boolean,
+            default: true
+        }
+    },
+    data() {
+        return {
+            jumpPage: null,
+            cur_page: this.curPage,
+        };
+    },
+    watch: {
+        curPage(newVal) {
+            this.jumpPage = newVal;
+            this.cur_page = newVal;
+        }
+    },
+    methods: {
+        click(type) {
+            let payload = {
+                first: 0,
+                prev: 0,
+                next: 0,
+                last: 0,
+                jump: 0,
+                cur_page: this.cur_page
+            };
+
+            switch (type) {
+                case 'first':
+                    payload.first = 1;
+                    payload.cur_page = 1;
+                    break;
+                case 'prev':
+                    payload.prev = 1;
+                    payload.cur_page = Math.max(1, this.cur_page - 1);
+                    break;
+                case 'next':
+                    if (!this.hasNext) return;
+                    payload.next = 1;
+                    payload.cur_page = this.cur_page + 1;
+                    break;
+                case 'last':
+                    payload.last = 1;
+                    payload.cur_page = this.cur_page;
+                    break;
+                case 'jump':
+                    if (this.jumpPage && this.jumpPage > 0) {
+                        payload.jump = this.jumpPage;
+                        payload.cur_page = this.jumpPage;
+                    } else {
+                        return;
+                    }
+                    break;
+            }
+
+            this.$emit('change', payload);
+        }
+    }
+};
+</script>
+<style scoped>
+.pagination {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 8px;
+    margin: 12px 0;
+}
+
+button {
+    padding: 6px 12px;
+    border: 1px solid #ccc;
+    background-color: #f8f8f8;
+    cursor: pointer;
+    border-radius: 4px;
+    font-size: 14px;
+    transition: all 0.2s;
+}
+
+button:hover:not(:disabled) {
+    background-color: #e6f7ff;
+    border-color: #91d5ff;
+}
+
+button:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+}
+
+.page-info {
+    font-size: 14px;
+    margin: 0 6px;
+}
+
+input[type='number'] {
+    width: 70px;
+    padding: 8px 8px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    font-size: 14px;
+    transition: border-color 0.2s, box-shadow 0.2s;
+    outline: none;
+}
+
+input[type='number']:focus {
+    border-color: #40a9ff;
+    box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
+}
+</style>
\ No newline at end of file
diff --git a/src/components/super/RankingLeftMenu.vue b/src/components/super/RankingLeftMenu.vue
index 250a2fd..1c59105 100644
--- a/src/components/super/RankingLeftMenu.vue
+++ b/src/components/super/RankingLeftMenu.vue
@@ -53,6 +53,10 @@ export default {
                             name: '退单数排行',
                             path: '/super/ranking/checkRefund',
                         },
+                        {
+                            name: '负毛利排行',
+                            path: '/super/ranking/loss',
+                        },
                     ]
                 },
                 {
@@ -78,10 +82,6 @@ export default {
                     imgActive: require('@/assets/super/ranking-menu.svg'),
                     list: [
                         {
-                            name: '负毛利',
-                            path: '/super/ranking/loss',
-                        },
-                        {
                             name: '采购价',
                             path: '/super/ranking/purchase',
                         },
diff --git a/src/router/index.js b/src/router/index.js
index 3c0ef1c..942ec7e 100755
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -161,6 +161,12 @@ const routes = [{
         props: {pageTitle:'产品 - 退单数排行', rank_type: 3, type: 'check_type'}
       },
       {
+        path: 'loss',
+        name: '产品负毛利排行',
+        component: () => import( /* webpackChunkName: "Ranking" */ '../views/super/Ranking/RankList.vue'),
+        props: {pageTitle:'产品 - 负毛利排行', rank_type: 5, type: 'loss'}
+      },
+      {
         path: 'agentProfit',
         name: '代理商毛利润排行',
         component: () => import( /* webpackChunkName: "Ranking" */ '../views/super/Ranking/RankBatchList.vue'),
@@ -179,12 +185,6 @@ const routes = [{
         props: {pageTitle:'代理商 - 新加盟', type: 'agentnew', showDateSelect: false}
       },
       {
-        path: 'loss',
-        name: '负毛利',
-        component: () => import( /* webpackChunkName: "Ranking" */ '../views/super/Ranking/RankDetail.vue'),
-        props: {pageTitle:'负毛利 - 排行', type: 'loss'}
-      },
-      {
         path: 'purchase',
         name: '采购价',
         component: () => import( /* webpackChunkName: "Ranking" */ '../views/super/Ranking/Purchase.vue'),
@@ -196,20 +196,26 @@ const routes = [{
         component: () => import( /* webpackChunkName: "Ranking" */ '../views/super/Ranking/Purchase.vue'),
         props: {pageTitle:'设置 - 阶段采购', type: 'stagePurchase'}
       },
+      {
+        path: 'detail',
+        name: '详情',
+        component: () => import( /* webpackChunkName: "Ranking" */ '../views/super/Ranking/RankDetail.vue'),
+        props: {pageTitle:'详情', type: 'day', showDateSelect: false, lookMore:false}
+      },
+      {
+        path: 'list',
+        name: '列表',
+        component: () => import( /* webpackChunkName: "Ranking" */ '../views/super/Ranking/RankList.vue'),
+        props: {pageTitle:'详情', showDateSelect: false, lookMore:false}
+      },
+      {
+        path: 'order',
+        name: '订单统计',
+        component: () => import( /* webpackChunkName: "Ranking" */ '../views/super/Ranking/RankDetail.vue'),
+        props: {pageTitle:'订单统计', type: 'order', showDateSelect: false}
+      },
     ]
   },
-  {
-    path: '/super/ranking/detail',
-    name: '详情',
-    component: () => import( /* webpackChunkName: "Ranking" */ '../views/super/Ranking/RankDetail.vue'),
-    props: {pageTitle:'详情', type: 'day', showDateSelect: false, lookMore:false}
-  },
-  {
-    path: '/super/ranking/list',
-    name: '列表',
-    component: () => import( /* webpackChunkName: "Ranking" */ '../views/super/Ranking/RankList.vue'),
-    props: {pageTitle:'详情', showDateSelect: false, lookMore:false}
-  },
 ]
 
 const router = new VueRouter({
diff --git a/src/views/super/Ranking/RankDetail.vue b/src/views/super/Ranking/RankDetail.vue
index 14adb14..70331eb 100644
--- a/src/views/super/Ranking/RankDetail.vue
+++ b/src/views/super/Ranking/RankDetail.vue
@@ -199,33 +199,22 @@
             </el-form>
         </div>
 
-        <div class=" flex-common" v-if="dataType == 'loss'">
-            <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px;">
-                <h3 style="margin: 0;"></h3>
-                <span style="font-size: 14px; color: #999;">总负毛利：{{ total_value }}</span>
-            </div>
-
+        <div class=" flex-common" v-if="dataType == 'order'">
             <el-form>
-                <el-table :data="tableData"
-                          style="width: 100%"
-                          @sort-change="handleSortChange"
-                          @cell-mouse-enter="handleRowHover">
-
-                    <el-table-column prop="sort" label="排序"></el-table-column>
-
-                    <el-table-column prop="1" label="日期" sortable="custom">
+                <el-table :data="tableData" style="width: 100%">
+                    <el-table-column prop="sale_id" label="订单ID"></el-table-column>
+                    <el-table-column prop="income" label="收入"></el-table-column>
+                    <el-table-column prop="cost" label="成本"></el-table-column>
+                    <el-table-column prop="profit" label="毛利"></el-table-column>
+                    <el-table-column prop="is_refund" label="是否退款">
                         <template slot-scope="scope">
-                            {{ scope.row.value_1 }}
-                        </template>
-                    </el-table-column>
-
-                    <el-table-column prop="2" label="负毛利" sortable="custom">
-                        <template slot-scope="scope">
-                            {{ scope.row.value_2 }}
+                            {{ scope.row.is_refund == 1 ? '是' : '否' }}
                         </template>
                     </el-table-column>
+                    <el-table-column prop="sale_date" label="销售日期"></el-table-column>
                 </el-table>
             </el-form>
+            <Pagination :curPage="cur_page" :hasNext="has_next" @change="handleChange" />
         </div>
     </div>
 </template>
@@ -233,6 +222,7 @@
 import DateSelect from '@/components/super/DateSelect.vue';
 import CustomDropdown from '@/components/CustomDropdown.vue';
 import HoverImage from "@/components/super/HoverImage.vue";
+import Pagination from "@/components/Pagination.vue";
 
 export default {
     name: 'rank_detail',
@@ -259,6 +249,7 @@ export default {
         },
     },
     components: {
+        Pagination,
         HoverImage,
         DateSelect,
         CustomDropdown
@@ -292,6 +283,10 @@ export default {
             top_list: [],
             growth_list: [],
             show_detail_index: 0,
+            has_next: false,
+            cur_page: 1,
+            page_size: 20,
+            page_point: 0,
         }
     },
     mounted() {
@@ -408,9 +403,8 @@ export default {
                 return true;
             }
 
-            if (this.dataType == 'loss') {
-                this.onlyYear = false;
-                this.getLossDetail(obj)
+            if (this.dataType == 'order') {
+                this.getOrderList()
                 return true;
             }
 
@@ -441,28 +435,6 @@ export default {
                 console.error(error, 'error')
             })
         },
-        getLossDetail(obj) {
-            const that = this
-            that.tableData = []
-            that.total_value = 0
-            this.$http('POST', '/supernew/ajax_get_loss_detail', {
-                aid: that.aid,
-                ver_type: that.ver_type,
-                check_type: that.check_type,
-                date: that.text,
-                ...obj
-            }).then(response => {
-                this.$nextTick(() => {
-                    that.tableData = response.data.list
-                    that.total_value = response.data.total_value
-                    that.total = response.data.total
-
-                    if (that.showfilterTitle) that.filterTitle = response.data.title
-                })
-            }).catch(error => {
-                console.error(error, 'error')
-            })
-        },
         getRankingList(obj) {
             const that = this
             that.tableData1 = []
@@ -492,6 +464,31 @@ export default {
                 console.error(error, 'error')
             })
         },
+        getOrderList(obj) {
+            const that = this
+            that.tableData = []
+            this.$http('POST', '/supernew/ajax_get_order_check_list', {
+                aid: that.aid,
+                ver_type: that.ver_type,
+                check_type: that.check_type,
+                page_point: that.page_point,
+                lose: 1,
+                ...obj
+            }).then(response => {
+                this.$nextTick(() => {
+                    that.tableData = response.data.list
+                    that.has_next = response.data.hasNext
+                    if(!that.has_next) that.cur_page = response.data.cur_page
+                    that.page_point = response.data.page_point
+                })
+            }).catch(error => {
+                console.error(error, 'error')
+            })
+        },
+        handleChange(payload) {
+            this.cur_page = payload.cur_page
+            this.getOrderList(payload)
+        }
     }
 }
 </script>
diff --git a/src/views/super/Ranking/RankList.vue b/src/views/super/Ranking/RankList.vue
index 82542cb..ddfa265 100644
--- a/src/views/super/Ranking/RankList.vue
+++ b/src/views/super/Ranking/RankList.vue
@@ -219,11 +219,13 @@ export default {
                 1: '毛利润',
                 2: '订单数',
                 3: '退单数',
+                5: '负毛利',
             },
             type_desc: {
                 'agent': '代理商昵称',
                 'ver_type': '品牌名称',
                 'check_type': '服务名称',
+                'loss': '服务名称',
             },
             type_select: {
                 'ver_type': '按品牌名称',
@@ -278,6 +280,10 @@ export default {
             if (this.$route.query.rank_type) this.dataRank = this.$route.query.rank_type
             if (Object.keys(this.$route.query).length > 0) this.showfilterTitle = true
 
+            if (this.dataType == 'loss') {
+                this.sort_order = 1;
+            }
+
             this.getRankingData(); // 每次路由变化都重新获取数据
         },
         handleUpdateView(newView) {
@@ -439,6 +445,9 @@ export default {
             if (this.dataType == 'check_type') {
                 this.getTypeRanking()
             }
+            if (this.dataType == 'loss') {
+                this.getLossList()
+            }
         },
         getAgentRanking() {
             const that = this
@@ -550,6 +559,30 @@ export default {
                 console.error(error, 'error')
             })
         },
+        getLossList() {
+            const that = this
+            that.tableData = []
+            this.$http('POST', '/supernew/ajax_get_loss_list', {
+                aid: that.aid,
+                ver_type: that.ver_type,
+                check_type: that.check_type,
+                date: that.text,
+                sort_by: that.sort_by,
+                sort_order: that.sort_order,
+                cur_page: that.currentPage,
+                page_size: that.pageSize,
+            }).then(response => {
+                this.$nextTick(() => {
+                    that.tableData = response.data.list
+                    that.total_value = response.data.total_value
+                    that.total = response.data.total
+
+                    if (that.showfilterTitle) that.filterTitle = response.data.title
+                })
+            }).catch(error => {
+                console.error(error, 'error')
+            })
+        },
         handleSizeChange(val) {
             this.pageSize = val
             this.getRankingData()