update

package-lock.json

@@ -8,6 +8,7 @@
       "name": "_pc",
       "version": "1.0.0",
       "dependencies": {
+        "@aximario/json-tree": "^2.2.4",
         "amfe-flexible": "^2.2.1",
         "axios": "^0.27.2",
         "element-ui": "^2.15.8",
@@ -64,6 +65,11 @@
         "npm": ">= 3.0.0"
       }
     },
+    "node_modules/@aximario/json-tree": {
+      "version": "2.2.4",
+      "resolved": "https://registry.npmmirror.com/@aximario/json-tree/-/json-tree-2.2.4.tgz",
+      "integrity": "sha512-XGMJ+zuVQ0CRizo1d3ZTUKEvrTqKYbm2a00T6DnRFR36mzV6mexLUKRIk6repj3JKgLrj3iwW8aUFrOS4P7CEA=="
+    },
     "node_modules/@babel/parser": {
       "version": "7.24.7",
       "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.24.7.tgz",

package.json

@@ -10,6 +10,7 @@
     "build": "node build/build.js"
   },
   "dependencies": {
+    "@aximario/json-tree": "^2.2.4",
     "amfe-flexible": "^2.2.1",
     "axios": "^0.27.2",
     "element-ui": "^2.15.8",

src/components/mine/agent.vue

@@ -14,12 +14,14 @@
       <div class="block" :class="{ active: navActive === 2 }" @click="changeNav(2)">
         <div class="label">{{ $t('main.agent.label4') }}</div>
       </div>
+      <div class="block" :class="{ active: navActive === 3 }" @click="changeNav(3)">
+        <div class="label">下级</div>
+      </div>
     </div>
 
 
 
     <div class="list">
-
       <van-swipe class="my-swipe" :loop="false" :show-indicators="false" ref="swipe" @change="e => {this.navActive = e}">
         <van-swipe-item>
           <div class="row">
@@ -51,20 +53,26 @@
         <van-swipe-item>
           <div class="row">
             <div class="label">{{ $t('main.agent.label10') }}</div>
-            <div class="value">{{ fundsInfo.recharge }}KRW</div>
+            <div class="value">{{ fundsInfo.recharge }}MYR</div>
           </div>
           <div class="row">
             <div class="label">{{ $t('main.agent.label11') }}</div>
-            <div class="value">{{ fundsInfo.withdraw }}KRW</div>
+            <div class="value">{{ fundsInfo.withdraw }}MYR</div>
           </div>
         </van-swipe-item>
+        <van-swipe-item>
+          <AgentTree :data="childrenTree" @changeChildren="changeChildren"/>
+        </van-swipe-item>
       </van-swipe>
     </div>
 
   </main>
 </template>
 <script>
+import AgentTree from './components/agentTree.vue'
+import { construct, destruct } from '@aximario/json-tree'
 export default {
+  components: { AgentTree },
   name: 'message',
   data() {
     return {
@@ -74,7 +82,10 @@ export default {
       agentTeamInfo: {},
       fundsInfo: {},
       navActive: 0,
-      showCode: true
+      showCode: true,
+      userInfo: {},
+      childrenTree: [],
+      childrenList: []
     }
   },
   created() {
@@ -84,6 +95,8 @@ export default {
     if(this.$store.state.userInfo.invite_code) {
       this.showCode = false
     }
+    this.userInfo = JSON.parse(localStorage.getItem('userInfo'))
+    this.getChildren(this.userInfo.id)
   },
   methods: {
     async getAgentTeamInfo() {
@@ -101,6 +114,31 @@ export default {
         this.showCode = false
       }
     },
+    async getChildren(pid) {
+      const res = await this.$apiFun.agentChildrenApi({pid})
+      this.childrenTree = construct(res.data)
+      this.childrenList = res.data
+    },
+
+    changeChildren(data) {
+      let list = this.childrenList
+      let newList = []
+      if(data.data.length === 0) {
+        for(let i in list) {
+          if(list[i].id == data.pid) {
+            list[i].noChild = true
+            break
+          }
+        }
+        newList = list
+      }else {
+        newList = [...list, ...data.data]
+      }
+      console.log(newList)
+      console.log(destruct(newList))
+      this.$set(this, 'childrenList', destruct(newList))
+      this.$set(this, 'childrenTree', construct(newList))
+    },
 
     changeNav(e) {
       this.navActive = e

src/components/mine/components/agentTree.vue

+<template>
+  <div class="treeWrap">
+    <AgentTreeItem v-for="(item, index) in data" :key="index" :data="item" @changeChildren="changeChildren"/>
+    <!-- <div class="treeLable" v-for="(item, index) in data" :key="index" @click.stop="getChildren(item)">
+      <div class="label">
+        <van-icon name="arrow" v-if="item.children === undefined"/>
+        <van-loading type="spinner" size="16" v-if="item.loading"/>
+        <div class="name">{{ item.username }}</div>
+      </div>
+      <div class="value">{{ item.balance }}</div>
+      <div class="children">
+        <agent-tree :data="item.children" @changeChildren="changeChildren"/>
+      </div>
+    </div> -->
+  </div>
+</template>
+<script>
+import AgentTreeItem from './agentTreeItem.vue'
+export default {
+  components: { AgentTreeItem },
+  name: 'agentTree',
+  props: {
+    data: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {
+    }
+  },
+  created() {
+  },
+  methods: {
+    async getChildren(item) {
+      const pid = item.id
+      item.loading = true
+      const res = await this.$apiFun.agentChildrenApi({pid})
+      if(res.data.length > 0) {
+        res.data = res.data.map(item => {
+          item.pid = pid
+          return item
+        })
+      }
+      const data = {
+        data: res.data,
+        pid,
+      }
+      this.$emit('changeChildren', data)
+    },
+    changeChildren(data){
+      this.$emit('changeChildren', data)
+    }
+  },
+};
+</script>
+<style lang="scss" scoped>
+.treeLable {
+  display: flex;
+  justify-content: space-between;
+  border: 1px solid #ccc;
+  padding: 10px;
+  margin-bottom: 5px;
+  border-radius: 5px;
+  align-items: center;
+  flex-wrap: wrap;
+  .label {
+    display: flex;
+    align-items: center;
+    gap: 5px;
+  }
+  .children {
+    width: 100%;
+  }
+}
+</style>

src/components/mine/components/agentTreeItem.vue

+<template>
+  <div class="treeWrap">
+    <div class="treeLable" @click.stop="getChildren(data)">
+      <div class="label">
+        <van-icon name="arrow" :class="{expand: expand}" v-if="!data.noChild && !loading"/>
+        <van-loading type="spinner" size="16" v-if="loading"/>
+        <div class="name">{{ data.username }}</div>
+      </div>
+      <div class="value">{{ data.balance }}</div>
+    </div>
+    
+    <div class="children" v-if="expand">
+      <AgentTree :data="data.children" @changeChildren="changeChildren"/>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  components: { AgentTree: () => import('./agentTree.vue') },
+  name: 'agentTreeItem',
+  props: {
+    data: {
+      type: Object,
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      loading: false,
+      expand: false
+    }
+  },
+  methods: {
+    async getChildren(item) {
+      if(item.children && item.children.length > 0) {
+        this.expand = !this.expand
+        return
+      }
+      if(item.noChild) {
+        return
+      }
+      const pid = item.id
+      this.loading = true
+      const res = await this.$apiFun.agentChildrenApi({pid})
+      this.loading = false
+      if(res.data.length > 0) {
+        res.data = res.data.map(item => {
+          item.pid = pid
+          return item
+        })
+      }
+      const data = {
+        data: res.data,
+        pid,
+      }
+      this.expand = true
+      this.$emit('changeChildren', data)
+    },
+    changeChildren(data){
+      this.$emit('changeChildren', data)
+    }
+  },
+};
+</script>
+<style lang="scss" scoped>
+.treeLable {
+  display: flex;
+  justify-content: space-between;
+  border: 1px solid #ccc;
+  padding: 10px;
+  margin-bottom: 5px;
+  border-radius: 5px;
+  align-items: center;
+  flex-wrap: wrap;
+  .label {
+    display: flex;
+    align-items: center;
+    gap: 5px;
+  }
+}
+.children {
+  margin-left: 10px;
+}
+.expand {
+  transform: rotate(90deg);
+}
+</style>

src/components/recharge.vue

@@ -10,7 +10,7 @@
         <!-- <div :class="pay_way == 'wechat' ? ' tyls atc' : 'tyls'" @click="changPayway('wechat')" v-if="payWayList.wechat == 1"><img src="/static/image/QuickWechat.png" alt="" />{{ $t('main.recharge.label2') }}</div>
         <div :class="pay_way == 'alipay' ? ' tyls atc' : 'tyls'" @click="changPayway('alipay')" v-if="payWayList.alipay == 1"><img src="/static/image/icoAlipay2@3x.png" alt="" />{{ $t('main.recharge.label3') }}</div> -->
       </div>
-      <div v-if="pay_way == 'bank' && !(userbank.length == 0 && userUSD.length == 0)">
+      <div v-if="pay_way == 'bank'">
         <div class="usrse">
           <!-- <div class="bans" style="" v-for="(item, index) in cardLis" :key="index"> -->
           <div class="hgs" @click="changShow">
@@ -190,7 +190,7 @@
       <van-picker :confirm-button-text="$t('main.dealRecord.label6')" :cancel-button-text="$t('main.dealRecord.label7')" style="position: absolute; bottom: 0; left: 0; width: 100%" :title="$t('main.recharge.label4')" show-toolbar :columns="usdtList" @confirm="onConfirm2" @cancel="show2 = false" value-key="mch_id" />
     </div>
     <!-- 禁止   -->
-    <div class="domainModal_domainView__FWCzg" v-if="userbank.length == 0 && userUSD.length == 0">
+    <!-- <div class="domainModal_domainView__FWCzg" v-if="userbank.length == 0 && userUSD.length == 0">
       <div class="domainModal_mask__24Y2m domainModal_fadeIn__1I3AS false" @click="$router.back()"></div>
       <div class="domainModal_content__1nBgc" style="width: 80%">
         <div id="domain" class="domainModal_contentTop__2C4jc">
@@ -202,7 +202,7 @@
           <div style="height: 30px; text-align: center; line-height: 30px; color: #fff" @click="$parent.goNav('/wallet')">{{ $t('main.recharge.label33') }}</div>
         </div>
       </div>
-    </div>
+    </div> -->
   </div>
 </template>
 <script>

src/router/index.js

@@ -4,7 +4,6 @@ import Main from '@/components/Main'
 
 import index from '@/components/mode/index'
 import app from '@/components/mode/app'
-// import kefu from '@/components/mode/kefu'
 import gamePage from '@/components/mode/gamePage'
 import hongbao from '@/components/mode/hongbao'
 import activity from '@/components/mode/activity'