feat(directPush): 直推数据排行功能开发

src/api/giftGoods.js

@@ -300,12 +300,44 @@ export function tourismDetails(params) {
   })
 }
 
-// 营销管理-直推排行数据
+// 营销管理-直推人数排行数据
-export function getMemberDirectPusht(params) {
+export function getMemberDirectPush(data) {
   return request({
-    url: '/member/manager/member/get-member-direct-push',
+    url: '/member/manage/member-statistics/topPeople',
-    method: 'get',
+    method: 'post',
-    params
+    data
+  })
+}
+// 营销管理-直推金额排行数据
+export function getMemberDirectPushAmount(data) {
+  return request({
+    url: '/member/manage/member-statistics/topAmount',
+    method: 'post',
+    data
+  })
+}
+
+// params type setShowPeople setShowAmount
+export function getMemberDirectPushSwitchStatus(type) {
+  return request({
+    url: `member/manage/member-statistics/${type}`,
+    method: 'get'
+  })
+}
+
+// 直推人数排行开关
+export function setMemberDirectPush(flag) {
+  return request({
+    url: `member/manage/member-statistics/setShowPeople/${flag}`,
+    method: 'get'
+  })
+}
+
+// 直推金额排行开关
+export function setMemberDirectPushAmount(flag) {
+  return request({
+    url: `member/manage/member-statistics/setShowAmount/${flag}`,
+    method: 'get'
   })
 }
 

src/router/index.js

@@ -2127,12 +2127,27 @@ export const constantRoutes = [
         path: 'directRanking',
         name: 'DirectRanking',
         component: ParentView,
+        meta: { title: '直推排行数据' },
         children: [
           {
             path: 'directRankingList',
             name: 'DirectRankingList',
             component: () => import('@/views/marketing/directRanking/index'),
-            meta: { title: '直推排行数据' }
+            meta: { title: '直推人数排行数据' }
+          },
+          {
+            path: 'directAmountRankingList',
+            name: 'DirectAmountRankingList',
+            component: () => import('@/views/marketing/directRanking/amount'),
+            meta: { title: '直推金额排行数据' },
+            hidden: true
+          },
+          {
+            path: 'directConfig',
+            name: 'DirectConfig',
+            component: () => import('@/views/marketing/directRanking/config'),
+            meta: { title: '直推配置' },
+            hidden: true
           }
         ]
       }

src/views/marketing/directRanking/amount.vue

@@ -0,0 +1,288 @@
+<template>
+  <div class="page">
+    <topBar
+      v-if="topList.length > 0"
+      :top-list="topList"
+      :moren="moren"
+    />
+    <div class="main">
+      <div class="form_all">
+        <el-form ref="select" :model="select" label-width="auto">
+          <el-row :gutter="10">
+            <el-col :span="6">
+              <el-form-item :label="'统计时间'">
+                <el-date-picker
+                  v-model="select.selectDate"
+                  type="month"
+                  value-format="yyyy-MM"
+                  :placeholder="'请选择'"
+                  :clearable="false"
+                  @change="changeTime"
+                />
+              </el-form-item>
+            </el-col>
+            <el-col :span="4">
+              <el-button type="primary" @click="getDataList">
+                {{ '搜索' }}</el-button>
+              <el-button type="" @click="reset"> {{ '重置' }}</el-button>
+            </el-col>
+          </el-row>
+        </el-form>
+      </div>
+      <div class="maintop">
+        <div class="mainbtn">
+          <el-button
+            v-hasButtons="['directRankingExport']"
+            size="small"
+            style="background-color: #ffad41"
+            class="thebtn1"
+            @click="handleExport"
+          >
+            {{ '导出' }}</el-button>
+        </div>
+      </div>
+      <div class="maintable">
+        <el-table
+          v-loading="loading"
+          :data="tableData"
+          style="width: 100%"
+          :header-cell-style="{ background: '#EEEEEE' }"
+          :row-class-name="tableRowClassName"
+          @selection-change="handleSelectionChange"
+        >
+          <el-table-column type="selection" width="55" />
+
+          <el-table-column align="center" prop="ranking" label="排名">
+            <template slot-scope="scope">
+              <span :class="getRankingClass(scope.$index + 1)">{{ scope.$index + 1 }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column
+            align="center"
+            prop="memberCode"
+            :label="'会员编号'"
+          />
+
+          <el-table-column
+            align="center"
+            prop="memberName"
+            :label="'会员姓名'"
+          />
+          <el-table-column
+            align="center"
+            prop="numberOfAmount"
+            label="直推金额(万元)"
+          />
+        </el-table>
+      </div>
+    </div>
+    <!-- <pagination
+      v-show="total > 0"
+      :total="total"
+      :page.sync="queryParams.pageNum"
+      :limit.sync="queryParams.pageSize"
+      @pagination="getDataList"
+    /> -->
+  </div>
+</template>
+
+<script>
+import * as api from '@/api/giftGoods.js'
+import mixins from './mixins'
+export default {
+  name: 'DirectRankingList',
+
+  mixins: [mixins],
+  data() {
+    return {
+      select: {
+        selectDate: ''
+      },
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 50,
+        year: '',
+        month: '',
+        faker: false
+      },
+      total: 0,
+      tableData: [],
+      loading: false,
+      moren: 'directAmountRankingList'
+
+    }
+  },
+  mounted() {
+    this.init()
+    this.getDataList()
+  },
+  methods: {
+    aaa(obj) {
+      console.log(obj, '....obj')
+    },
+    init() {
+      const month = new Date().getMonth() + 1
+      const monthStr = month < 10 ? '0' + month : month
+      this.select.selectDate = new Date().getFullYear() + '-' + monthStr
+    },
+    changeTime(val) {
+      this.queryParams.selectDate = val
+    },
+    reset() {
+      this.select = {}
+    },
+
+    getDataList() {
+      this.loading = true
+      const [year, month] = this.select.selectDate.split('-')
+      api
+        .getMemberDirectPushAmount(Object.assign({}, this.queryParams, this.select, {
+          year,
+          month
+        }))
+        .then((res) => {
+          this.tableData = res.data
+          this.total = res.total
+          this.loading = false
+        })
+    },
+
+    handleSelectionChange(val) {},
+    tableRowClassName({ row, rowIndex }) {
+      if (rowIndex % 2 === 1) {
+        return 'warning-row'
+      } else if (rowIndex % 2 === 0) {
+        return 'success-row'
+      }
+      return ''
+    },
+    getRankingClass(ranking) {
+      if (ranking === 1) {
+        return 'first-place-cell'
+      } else if (ranking === 2) {
+        return 'second-place-cell'
+      } else if (ranking === 3) {
+        return 'third-place-cell'
+      }
+      return 'normal-ranking'
+    }
+  }
+}
+</script>
+    <style scoped lang="scss">
+::v-deep .el-table .warning-row {
+  background: #f9f9f9;
+}
+
+::v-deep .el-table .success-row {
+  background: #ffffff;
+}
+::v-deep .el-table thead {
+  color: #000000;
+}
+::v-deep .el-select {
+  width: 100%;
+}
+.uploadIcon ::v-deep .el-upload--picture-card {
+  display: none !important; /* 上传按钮隐藏 */
+}
+.page {
+  padding: 20px;
+  background: #f9f9f9;
+  font-size: 14px;
+  .main {
+    background: #ffffff;
+    border-radius: 8px;
+    box-shadow: 0px 2px 20px 0px rgba(238, 238, 238, 0.5);
+    .form_all {
+      padding: 0px 20px 0 20px;
+      // margin-bottom: 20px;
+      background: #fff;
+      border-radius: 8px;
+    }
+    .maintop {
+      display: flex;
+      padding: 0px 0px;
+      justify-content: space-between;
+      align-items: center;
+
+      background: #f8f8f8;
+      .mainbtn {
+        .thebtn1 {
+          background: #3181e5;
+          color: #ffffff;
+        }
+        .thebtn2 {
+          background: #ffad41;
+          color: #ffffff;
+        }
+      }
+      .maintitle {
+        font-size: 10px;
+        font-family: MicrosoftYaHei;
+        color: #999999;
+      }
+    }
+  }
+  .tem {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    img {
+      width: 28px;
+      height: 20px;
+      margin-right: 3px;
+    }
+  }
+  .isRed {
+    color: #ed1d25;
+  }
+  .isGreen {
+    color: #1ab62b;
+  }
+  .bgImg {
+    width: 48px;
+    height: 48px;
+  }
+}
+.openClose {
+  text-align: right;
+  margin-right: 10px;
+  color: #3181e5;
+}
+.dizhi {
+  ::v-deep .el-cascader {
+    width: 100%;
+  }
+}
+::v-deep .el-date-editor.el-input,
+.el-date-editor.el-input__inner {
+  width: auto;
+}
+.lan {
+  text-decoration: underline;
+  color: #48b2fd;
+  cursor: pointer;
+}
+
+/* 排名字体颜色样式 */
+.first-place-cell {
+  color: #FFD700;
+  font-weight: bold;
+}
+
+.second-place-cell {
+  color: #C0C0C0;
+  font-weight: bold;
+}
+
+.third-place-cell {
+  color: #CD853F;
+  font-weight: bold;
+}
+
+.normal-ranking {
+  color: #666666;
+}
+</style>

src/views/marketing/directRanking/config.vue

@@ -0,0 +1,94 @@
+<template>
+  <div class="page">
+    <topBar
+      v-if="topList.length > 0"
+      :top-list="topList"
+      :moren="moren"
+    />
+    <el-form>
+      <el-form-item label="直推人数排行榜">
+        <el-switch
+          :value="pushPeople"
+          active-text="开启"
+          inactive-text="关闭"
+          active-value="true"
+          inactive-value="false"
+          @change="pushPeopleHandle"
+        />
+      </el-form-item>
+      <el-form-item label="直推金额排行榜">
+        <el-switch
+          :value="pushAmount"
+          active-text="开启"
+          inactive-text="关闭"
+          active-value="true"
+          inactive-value="false"
+          @change="pushAmountHandle"
+        />
+      </el-form-item>
+    </el-form>
+  </div>
+
+</template>
+
+<script>
+import mixins from './mixins'
+import {
+  getMemberDirectPushSwitchStatus,
+  setMemberDirectPush,
+  setMemberDirectPushAmount
+} from '@/api/giftGoods'
+
+export default {
+  name: 'DirectRankingConfig',
+  mixins: [mixins],
+  data() {
+    return {
+      pushPeople: false,
+      pushAmount: false,
+      moren: 'directConfig'
+    }
+  },
+  mounted() {
+    this.getMemberDirectPushSwitchStatus()
+  },
+  methods: {
+    pushPeopleHandle(val) {
+      this.pushPeople = val
+      this.setMemberDirectPush(val)
+    },
+    pushAmountHandle(val) {
+      this.pushAmount = val
+      this.setMemberDirectPushAmount(val)
+    },
+    getMemberDirectPushSwitchStatus() {
+      getMemberDirectPushSwitchStatus('getShowPeople').then(res => {
+        this.pushPeople = res.data
+      })
+      getMemberDirectPushSwitchStatus('getShowAmount').then(res => {
+        this.pushAmount = res.data
+      })
+    },
+
+    setMemberDirectPush(val) {
+      setMemberDirectPush(val).then(res => {
+        if (res.code === 200) {
+          this.pushPeople = res.data
+        }
+      })
+    },
+    setMemberDirectPushAmount(val) {
+      setMemberDirectPushAmount(val).then(res => {
+        if (res.code === 200) {
+          this.pushAmount = res.data
+        }
+      })
+    }
+  }
+
+}
+</script>
+
+<style>
+
+</style>

src/views/marketing/directRanking/index.vue

@@ -2,171 +2,139 @@
   <div class="page">
     <topBar
       v-if="topList.length > 0"
-      :topList="topList"
+      :top-list="topList"
       :moren="moren"
-    ></topBar>
+    />
     <div class="main">
       <div class="form_all">
         <el-form ref="select" :model="select" label-width="auto">
           <el-row :gutter="10">
-            <el-col :span="4">
-              <el-form-item :label="'会员编号'" prop="memberCode">
-                <el-input
-                  clearable
-                  v-model="select.memberCode"
-                  :placeholder="'请输入'"
-                ></el-input>
-              </el-form-item>
-            </el-col>
             <el-col :span="6">
               <el-form-item :label="'统计时间'">
                 <el-date-picker
-                  v-model="select.payDate"
+                  v-model="select.selectDate"
-                  @change="changeTime"
                   type="month"
                   value-format="yyyy-MM"
                   :placeholder="'请选择'"
-                >
+                  :clearable="false"
-                </el-date-picker>
+                  @change="changeTime"
+                />
               </el-form-item>
             </el-col>
             <el-col :span="4">
               <el-button type="primary" @click="getDataList">
-                {{ '搜索' }}</el-button
+                {{ '搜索' }}</el-button>
-              >
               <el-button type="" @click="reset"> {{ '重置' }}</el-button>
             </el-col>
           </el-row>
         </el-form>
       </div>
-      <div class="maintop">
+
-        <div class="mainbtn">
-          <el-button
-            size="small"
-            @click="handleExport"
-            v-hasButtons="['directRankingExport']"
-            style="background-color: #ffad41"
-            class="thebtn1"
-          >
-            {{ '导出' }}</el-button
-          >
-        </div>
-      </div>
       <div class="maintable">
         <el-table
-          :data="tableData"
           v-loading="loading"
+          :data="tableData"
           style="width: 100%"
           :header-cell-style="{ background: '#EEEEEE' }"
           :row-class-name="tableRowClassName"
           @selection-change="handleSelectionChange"
         >
-          <el-table-column type="selection" width="55"> </el-table-column>
+          <el-table-column type="selection" width="55" />
 
-          <el-table-column
-            align="center"
-            prop="payTime"
-            :label="'统计时间'"
-          >
-          </el-table-column>
           <el-table-column align="center" prop="ranking" label="排名">
+            <template slot-scope="scope">
+              <span :class="getRankingClass(scope.$index + 1)">{{ scope.$index + 1 }}</span>
+            </template>
           </el-table-column>
           <el-table-column
             align="center"
             prop="memberCode"
             :label="'会员编号'"
-          >
+          />
-          </el-table-column>
 
           <el-table-column
             align="center"
             prop="memberName"
             :label="'会员姓名'"
-          >
+          />
-          </el-table-column>
           <el-table-column
             align="center"
-            prop="gradeName"
+            prop="numberOfPeople"
-            :label="'结算等级'"
+            label="直推人数"
-          >
+          />
-          </el-table-column>
-          <el-table-column
-            align="center"
-            prop="awardsName"
-            :label="'真实奖衔'"
-          >
-          </el-table-column>
-
-          <el-table-column
-            align="center"
-            prop="orderAchieve"
-            :label="'直推业绩'"
-          >
-          </el-table-column>
         </el-table>
       </div>
     </div>
-    <pagination
+    <!-- <pagination
       v-show="total > 0"
       :total="total"
       :page.sync="queryParams.pageNum"
       :limit.sync="queryParams.pageSize"
       @pagination="getDataList"
-    />
+    /> -->
   </div>
 </template>
 
 <script>
-import topBar from "@/components/topBar";
+import * as api from '@/api/giftGoods.js'
-import * as api from "@/api/giftGoods.js";
+import mixins from './mixins'
 export default {
-  name: "DirectRankingList",
+  name: 'DirectRankingList',
-  components: {
+
-    topBar,
+  mixins: [mixins],
-  },
   data() {
     return {
-      creationTime: [],
+      select: {
-      select: {},
+        selectDate: ''
+      },
       // 查询参数
       queryParams: {
         pageNum: 1,
         pageSize: 50,
+        year: '',
+        month: '',
+        faker: false
       },
       total: 0,
       tableData: [],
       loading: false,
-      moren: "directRankingList",
+      moren: 'directRankingList'
-      topList: [
+
-        {
+    }
-          name: "直推排行数据",
-          path: "directRankingList",
-        },
-      ],
-    };
   },
   mounted() {
-    // 获取列表
+    this.init()
-    //   this.getDataList();
+    this.getDataList()
   },
   methods: {
+    aaa(obj) {
+      console.log(obj, '....obj')
+    },
+    init() {
+      const month = new Date().getMonth() + 1
+      const monthStr = month < 10 ? '0' + month : month
+      this.select.selectDate = new Date().getFullYear() + '-' + monthStr
+    },
     changeTime(val) {
-      this.queryParams.payDate = val
+      this.queryParams.selectDate = val
     },
     reset() {
-      this.select = {};
+      this.select = {}
-      this.creationTime = [];
     },
 
     getDataList() {
       this.loading = true
+      const [year, month] = this.select.selectDate.split('-')
       api
-        .getMemberDirectPusht(Object.assign({}, this.queryParams, this.select))
+        .getMemberDirectPush(Object.assign({}, this.queryParams, this.select, {
+          year,
+          month
+        }))
         .then((res) => {
-          this.tableData = res.data;
+          this.tableData = res.data
-          this.total = res.total;
+          this.total = res.total
           this.loading = false
-        });
+        })
     },
 
     handleSelectionChange(val) {},
@@ -175,25 +143,35 @@ export default {
       this.$confirm('是否确认导出所有数据项?', '警告', {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
-        type: "warning",
+        type: 'warning'
       }).then((_) => {
         this.download(
-          "/member/manager/member/get-member-direct-push-export",
+          '/member/manager/member/get-member-direct-push-export',
           Object.assign({}, this.queryParams, this.select),
           `直推排行数据${new Date().getTime()}.xlsx`
-        );
+        )
-      });
+      })
     },
     tableRowClassName({ row, rowIndex }) {
-      if (rowIndex % 2 == 1) {
+      if (rowIndex % 2 === 1) {
-        return "warning-row";
+        return 'warning-row'
-      } else if (rowIndex % 2 == 0) {
+      } else if (rowIndex % 2 === 0) {
-        return "success-row";
+        return 'success-row'
       }
-      return "";
+      return ''
     },
-  },
+    getRankingClass(ranking) {
-};
+      if (ranking === 1) {
+        return 'first-place-cell'
+      } else if (ranking === 2) {
+        return 'second-place-cell'
+      } else if (ranking === 3) {
+        return 'third-place-cell'
+      }
+      return 'normal-ranking'
+    }
+  }
+}
 </script>
     <style scoped lang="scss">
 ::v-deep .el-table .warning-row {
@@ -290,5 +268,24 @@ export default {
   color: #48b2fd;
   cursor: pointer;
 }
-</style>
 
+/* 排名字体颜色样式 */
+.first-place-cell {
+  color: #FFD700;
+  font-weight: bold;
+}
+
+.second-place-cell {
+  color: #C0C0C0;
+  font-weight: bold;
+}
+
+.third-place-cell {
+  color: #CD853F;
+  font-weight: bold;
+}
+
+.normal-ranking {
+  color: #666666;
+}
+</style>

src/views/marketing/directRanking/mixins.js

@@ -0,0 +1,48 @@
+import topBar from '@/components/topBarRole'
+import { getRouters } from '@/api/settle'
+
+export default {
+  data() {
+    return {
+      topList: [
+        {
+          name: '直推人数排行数据',
+          path: 'directRankingList',
+          url: 'DirectRankingList',
+          changed: false
+        },
+        {
+          name: '直推金额排行数据',
+          path: 'directAmountRankingList',
+          url: 'DirectAmountRankingList',
+          changed: false
+        },
+        {
+          name: '直推配置',
+          path: 'directConfig',
+          url: 'DirectConfig',
+          changed: false
+        }
+      ]
+    }
+  },
+  components: {
+    topBar
+  },
+  mounted() {
+    this.getUserRoute()
+  },
+  methods: {
+    getUserRoute() {
+      getRouters().then((res) => {
+        res.data.forEach((item) => {
+          this.topList.forEach((items) => {
+            if (item.routeName === items.url) {
+              items.changed = true
+            }
+          })
+        })
+      })
+    }
+  }
+}