增加积分查看下级

src/views/proxyscore/index.vue

@@ -15,7 +15,17 @@
           >{{ item.nickName }}</el-option
         >
       </el-select>
-      <el-button class="ml20" @click="getPage" @keydown.enter="getPage" type="primary">搜索</el-button>
+      <el-button
+        class="ml20"
+        @click="getPage"
+        @keydown.enter="getPage"
+        type="primary"
+        >搜索</el-button
+      >
+
+      <span class="pl20 font14" :underline="false"
+        >总积分 {{ allProxySCore }}</span
+      >
     </div>
     <div class="pl20 pr20">
       <el-table :data="tableData">
@@ -25,21 +35,131 @@
             <img class="w40" :src="scope.row.headImage" />
           </template>
         </el-table-column>
+        <el-table-column sortable label="推广人数" prop="extensionCount">
+          <template slot-scope="scope">
+            <span>{{ scope.row.extensionCount }}</span>
+            <span
+              v-if="scope.row.extensionCount"
+              @click="
+                () => {
+                  subTableVisible = true;
+                  getSubPage(scope.row.openid);
+                }
+              "
+              style="color: #1890ff; cursor: pointer; padding-left: 5px"
+              type="primary"
+              >查看</span
+            >
+          </template>
+        </el-table-column>
         <el-table-column
-          label="推广人数"
-          prop="extensionCount"
-        ></el-table-column>
-        <el-table-column
+          sortable
           label="未结算推广积分"
           prop="achievement"
         ></el-table-column>
         <el-table-column
+          sortable
           label="已结算推广积分"
           prop="achievementSettled"
         ></el-table-column>
+
+        <el-table-column
+          sortable
+          label="总结算积分"
+          prop="achievementTotal"
+        ></el-table-column>
         <!-- achievement -->
       </el-table>
     </div>
+    <!-- 代理的 -->
+    <el-drawer size="60%" :visible.sync="subTableVisible">
+      <el-table :data="subTableData">
+        <el-table-column label="序号" type="index"></el-table-column>
+        <el-table-column label="微信名" prop="nickName"></el-table-column>
+        <el-table-column label="微信头像" prop="extensionCount">
+          <template slot-scope="scope">
+            <img class="w40" :src="scope.row.headImage" />
+          </template>
+        </el-table-column>
+        <el-table-column sortable label="推广人数" prop="extensionCount">
+          <template slot-scope="scope">
+            <span>{{ scope.row.extensionCount }}</span>
+            <span
+              @click="
+                () => {
+                  sub1TableVisible = true;
+                  getSub1Page(scope.row.openid);
+                }
+              "
+              style="color: #1890ff; cursor: pointer; padding-left: 5px"
+              type="primary"
+               v-if="scope.row.extensionCount"
+              >查看</span
+            >
+          </template>
+        </el-table-column>
+        <el-table-column
+          sortable
+          label="未结算推广积分"
+          prop="achievement"
+        ></el-table-column>
+        <el-table-column
+          sortable
+          label="已结算推广积分"
+          prop="achievementSettled"
+        ></el-table-column>
+
+        <el-table-column
+          sortable
+          label="总结算积分"
+          prop="achievementTotal"
+        ></el-table-column>
+      </el-table>
+    </el-drawer>
+    <!-- 代理下一级 -->
+    <el-drawer size="60%" :visible.sync="sub1TableVisible">
+      <el-table :data="sub1TableData">
+        <el-table-column label="序号" type="index"></el-table-column>
+        <el-table-column label="微信名" prop="nickName"></el-table-column>
+        <el-table-column label="微信头像" prop="extensionCount">
+          <template slot-scope="scope">
+            <img class="w40" :src="scope.row.headImage" />
+          </template>
+        </el-table-column>
+        <el-table-column sortable label="推广人数" prop="extensionCount">
+          <template slot-scope="scope">
+            <span>{{ scope.row.extensionCount }}</span>
+            <!-- <span
+              @click="
+                () => {
+                  sub1TableVisible = true;
+                  getSub1Page(scope.row.openid);
+                }
+              "
+              style="color: #1890ff; cursor: pointer; padding-left: 5px"
+              type="primary"
+              >查看</span
+            > -->
+          </template>
+        </el-table-column>
+        <el-table-column
+          sortable
+          label="未结算推广积分"
+          prop="achievement"
+        ></el-table-column>
+        <el-table-column
+          sortable
+          label="已结算推广积分"
+          prop="achievementSettled"
+        ></el-table-column>
+
+        <el-table-column
+          sortable
+          label="总结算积分"
+          prop="achievementTotal"
+        ></el-table-column>
+      </el-table>
+    </el-drawer>
   </div>
 </template>
 
@@ -51,41 +171,81 @@ export default {
       proxySchoolList: [],
       ProxySchoolSelected: "",
       tableData: [],
+      subTableVisible: false,
+      subTableData: [],
+
+      sub1TableVisible: false,
+      sub1TableData: [],
     };
   },
+  computed: {
+    allProxySCore() {
+      let allProxySCore = 0;
+      this.tableData.forEach((item) => {
+        allProxySCore +=
+          Number(item.achievementSettled) + Number(item.achievement);
+      });
+      return allProxySCore;
+    },
+  },
   methods: {
-    getPage() {
-    let query =this.ProxySchoolSelected? {
-          openid: this.ProxySchoolSelected,
-        }:{}
+    getSubPage(openid) {
+      proxyscoreApi
+        .extensionIncomeExtensionPoints({
+          openid,
+        })
+        .then((res) => {
+          this.subTableData = res.data;
+        });
+    },
+
+    getSub1Page(openid) {
       proxyscoreApi
-        .extensionIncomeExtensionPoints(query)
+        .extensionIncomeExtensionPoints({
+          openid,
+        })
         .then((res) => {
-          this.tableData = res.data;
+          this.sub1TableData = res.data;
         });
     },
+
+    getPage() {
+      let query = this.ProxySchoolSelected
+        ? {
+            openid: this.ProxySchoolSelected,
+          }
+        : {};
+      proxyscoreApi.extensionIncomeExtensionPoints(query).then((res) => {
+        this.tableData = res.data;
+      });
+    },
   },
   mounted() {
     proxyscoreApi.extensionIncomeInfo({}).then((res) => {
       this.proxySchoolList = res.data;
-      this.ProxySchoolSelected = res.data[0].openid
+      this.ProxySchoolSelected = res.data[0].openid;
       this.getPage();
       //   console.log(res.data);
     });
-    
   },
 };
 </script>
 
 <style lang="scss" scoped>
-.pl20{
-    padding-left: 20px;
+.font14 {
+  font-size: 18px;
+}
+.lh36 {
+  line-height: 36px;
+}
+.pl20 {
+  padding-left: 20px;
 }
-.pr20{
-    padding-right: 20px;
+.pr20 {
+  padding-right: 20px;
 }
-.pb20{
-    padding-bottom: 20px;
+.pb20 {
+  padding-bottom: 20px;
 }
 .w40 {
   width: 40px;