增加页面

src/components/UserMan/vipbuySales.vue

+<style>
+  .vipbuysales .distri_more {
+    color: #409EFF;
+    margin-bottom: 20px;
+    cursor: pointer;
+    display: block;
+    width: 100%;
+    text-align: center;
+  }
+
+  .vipbuysales .content {
+    background: #fff;
+    margin-top: 10px;
+    padding: 20px;
+    box-sizing: border-box;
+  }
+
+</style>
+<template>
+  <div class="vipbuysales">
+    <div class="head-title">
+      会员购买分销
+      <div style="float:right;">
+        <el-button @click="getExport()" style="margin: -5px 0 0 20px;" size="small" type="primary">导出</el-button>
+      </div>
+    </div>
+    <div class="content">
+      <div>
+        <span>订单号：</span>
+        <el-input type="text" class="w160" v-model="msg.OrderNo"></el-input>
+        <span style="margin-left:20px;">购买用户id：</span>
+        <el-input type="text" class="w160" v-model="msg.UserId"></el-input>
+        <span style="margin-left:20px;">分销用户id：</span>
+        <el-input type="text" class="w160" v-model="msg.DistributionUserId"></el-input>
+      </div>
+      <el-table :data="dataList" v-loading="loading" border style="width: 100%;margin:20px 0">
+        <el-table-column prop="OrderNo" label="订单号">
+        </el-table-column>
+        <el-table-column prop="UserName" label="购买用户">
+        </el-table-column>
+        <el-table-column prop="Money" label="购买金额">
+        </el-table-column>
+        <el-table-column prop="GradeName" label="等级名称">
+        </el-table-column>
+        <el-table-column prop="PayTimeStr" label="购买时间">
+        </el-table-column>
+        <el-table-column prop="CommissionList" label="分销情况">
+          <template slot-scope="scope">
+            <template v-if="scope.row.isShow">
+              <div v-for="(list,index) in scope.row.CommissionList" v-if="index<3" :key="index"
+                style="margin: 10px;text-align:left">
+                <div>
+                  <span>{{list.GradeDescription}}</span>
+                  <span class="price">￥{{list.Commission}}</span>
+                </div>
+                <div>昵称：{{list.UserName}}</div>
+              </div>
+              <span v-if="scope.row.CommissionList.length>3" @click="showMoreDis(scope.row)"
+                class="distri_more">查看更多↓</span>
+            </template>
+            <template v-else>
+              <div v-for="(list,index2) in scope.row.CommissionList" :key="index2" style="margin: 10px;text-align:left">
+                <div>
+                  <span>{{list.GradeDescription}}</span>
+                  <span class="price">￥{{list.Commission}}</span>
+                </div>
+                <div>昵称：{{list.UserName}}</div>
+              </div>
+              <span v-if="scope.row.CommissionList.length>3" @click="hideMoreDis(scope.row)"
+                class="distri_more">点击收起↑</span>
+            </template>
+          </template>
+        </el-table-column>
+      </el-table>
+      <el-pagination style="text-align:right" background @current-change="handleCurrentChange" :page-size="msg.pageSize"
+        layout="prev, pager, next" :total="total">
+      </el-pagination>
+    </div>
+  </div>
+</template>
+<script>
+  export default {
+    data() {
+      return {
+        loading: false,
+        dataList: [],
+        msg: {
+          pageIndex: 1,
+          pageSize: 15,
+          OrderNo: '', //订单号
+          UserId: 0, //购买用户id
+          DistributionUserId: 0 //分销用户id
+        },
+        total: 0,
+      };
+    },
+    components: {},
+    created() {
+
+    },
+    methods: {
+      handleCurrentChange(val) {
+        this.msg.pageIndex = val;
+        this.getList();
+      },
+      //显示更多
+      showMoreDis(list) {
+        list.isShow = false;
+        this.$forceUpdate();
+      },
+      //点击收起
+      hideMoreDis(list) {
+        list.isShow = true;
+        this.$forceUpdate();
+      },
+
+      getList() {
+        this.loading = true;
+        this.apipost("/api/uservip/GetVipBuyCommissionPageList", this.msg, res => {
+          this.loading = false;
+          if (res.data.resultCode == 1) {
+            console.log(res, 'resss');
+            this.total = res.data.data.count;
+            var pageData = res.data.data.pageData;
+            if (pageData) {
+              pageData.forEach(x => {
+                x.isShow = true;
+              })
+            }
+            this.dataList = JSON.parse(JSON.stringify(pageData));
+          } else {
+            this.Info(res.data.message);
+          }
+        })
+      },
+      //导出数据
+      getExport() {
+        this.GetLocalFile(
+          "/api/uservip/GetVipBuyCommissionPageListToExcel",
+          {},
+          "vip购买返佣列表.xls"
+        );
+      }
+    },
+    mounted() {
+      this.getList();
+    }
+  };
+
+</script>
+<style>
+
+</style>

src/router/index.js

@@ -280,6 +280,12 @@ export default new Router({
           name: 'buyRecords',
           component: resolve => require(['@/components/UserMan/buyRecords'], resolve),
         },
+        //用户管理 分销商管理 vip购买分销
+        {
+          path: '/vipbuySales',
+          name: 'vipbuySales',
+          component: resolve => require(['@/components/UserMan/vipbuySales'], resolve),
+        },
         // 用户管理 分销订单
         {
           path: '/distributionOrder',