添加：客户概况页面

yunshop-front-master/src/router/index.js

@@ -407,6 +407,7 @@ const Collection = r => require(["../views/member/tool/collection"], r);
 const MyRelationship = r => require(["../views/member/tool/my_relationship_v2"], r);
 const MyRelationshipAmount = r => require(["../views/member/tool/my_relationship_amount"], r);
 const MyRelationshipDetail = r => require(["../views/member/tool/my_relationship_detail"], r);
+const MyRelationshipDetailV2 = r => require(["../views/member/tool/my_relationship_detail_v2"], r);
 const OfflineSearch = r => require(["../views/member/tool/search"], r);
 const MyEvaluation = r => require(["../views/comment/myEvaluation"], r);
 const Comment = r => require(["../views/member/tool/comment"], r);
@@ -2585,6 +2586,15 @@ const routes = [
       foot: true
     }
   },
+  {
+    path: "/member/myrelationship_v2/detail/:uid",
+    component: MyRelationshipDetailV2,
+    name: "MyRelationshipDetailV2",
+    meta: {
+      title: "会员概况",
+      foot: true
+    }
+  },
   {
     path: "/member/offlineSearch",
     component: OfflineSearch,

yunshop-front-master/src/views/member/tool/my_relationship_detail_v2.vue

@@ -0,0 +1,368 @@
+<template>
+  <div class="main-content">
+    <!--顶部标题-->
+    <c-title :hide="false" :text="pageTitle"></c-title>
+    <!--客户信息-->
+    <div class="self-info">
+      <div class="top">
+        <img class="avatar" :src="selfInfo.avatar_image" />
+        <div class="title">Ta的概况</div>
+      </div>
+      <div class="statistics">
+        <div class="s-box">
+          <div class="num">{{ selfInfo.child_order_total || 0 }}</div>
+          <div class="title">订单数</div>
+        </div>
+        <div class="s-box">
+          <div class="num">{{ selfInfo.child_order_money || 0 }}</div>
+          <div class="title">订单总额</div>
+        </div>
+        <div class="s-box">
+          <div class="num">{{ selfInfo.team_total || 0 }}</div>
+          <div class="title">{{ memberTitle || '' }}数量</div>
+        </div>
+        <div class="s-box">
+          <div class="num">{{ selfInfo.team_order_money || 0 }}</div>
+          <div class="title">{{ memberTitle || '' }}订单</div>
+        </div>
+      </div>
+    </div>
+    <!--客户直推下级信息-->
+    <div class="list-content">
+      <!--选项卡-->
+      <van-tabs v-model="activeName">
+        <van-tab name="children" :title="'Ta的' + memberTitle">
+          <div class="list" v-if="Object.values(children).length > 0">
+            <div class="children-box" v-for="(item, index) in children" :key="index">
+              <!--用户信息-->
+              <div class="user-info" @click.stop="$router.push(fun.getUrl('MyRelationshipDetailV2',{uid:item.uid}))">
+                <img class="avatar" :src="item.avatar_image" />
+                <div class="info">
+                  <div class="nickname">{{ item.nickname || '' }}<span class="user-id">{{ item.uid }}</span></div>
+                  <div class="time">{{ item.createtime }}</div>
+                </div>
+              </div>
+              <!--统计信息-->
+              <div class="statistics">
+                <div class="s-box">订单数：{{ item.child_order_total || 0 }}</div>
+                <div class="s-box">订单总额：{{ item.child_order_money || 0 }}</div>
+                <div class="s-box">{{ memberTitle || '' }}数量：{{ item.team_total || 0 }}</div>
+                <div class="s-box">{{ memberTitle || '' }}订单：{{ item.team_order_money || 0 }}</div>
+              </div>
+            </div>
+          </div>
+          <van-empty v-else :description="'暂无' + memberTitle + '~'" />
+        </van-tab>
+        <van-tab name="order" title="Ta的订单">
+          <div class="list" v-if="Object.values(selfOrders).length > 0">
+            <div class="order-box" v-for="(item, index) in selfOrders" :key="index">
+              <!--订单号-->
+              <div class="order-sn">
+                <div class="left">订单号：{{ item.order_sn || ''}}</div>
+                <div class="right">{{ item.status_name || ''}}</div>
+              </div>
+              <!--商品信息-->
+              <div class="goods-list" v-for="(goodItem,goodIndex) in item.has_many_order_goods" :key="goodIndex">
+                <img class="logo" :src="goodItem.thumb" />
+                <div class="info">
+                  <div class="title">{{ goodItem.title || '' }}</div>
+                  <div class="buy-num">×{{ goodItem.total }}</div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <van-empty v-else description="暂无订单~" />
+        </van-tab>
+      </van-tabs>
+    </div>
+  </div>
+</template>
+
+<script>
+import { scrollMixin } from "@/utils/mixin";
+
+export default {
+  mixins: [scrollMixin],
+  data() {
+    return {
+      pageTitle: '会员概况',
+      memberTitle: '',
+      uid: 0,
+      selfInfo: {},
+      selfOrders: {},
+      children: {},
+      activeName: 'children',// children=他的客户；order=他的订单
+    };
+  },
+  created(){
+    // 设置页面标题
+    this.setPageTitle();
+    // 获取信息
+    this.uid = this.$route.params.uid;
+    this.getMyRelation();
+  },
+  activated() {},
+  methods: {
+    // 设置页面标题
+    setPageTitle() {
+      let lang = window.localStorage.getItem("mailLanguage");
+      this.memberTitle = JSON.parse(lang).agent && JSON.parse(lang).agent.agent ? JSON.parse(lang).agent.agent : "客户";
+      this.pageTitle = this.memberTitle + '概况';
+      this.fun.setWXTitle(this.pageTitle);
+    },
+    // 我的推荐
+    getMyRelation() {
+      let _this = this;
+      $http.get('member.member.myRelationShip', {uid: _this.uid}).then(function (response) {
+        if (response.result == 1) {
+          let data = response.data || {};
+          _this.selfInfo = data.self_info || {};
+          _this.selfOrders = data.self_info.orders || {};
+          _this.children = data.children || {};
+        } else {
+          console.log('错误：', error);
+        }
+      }, function (error) {
+        console.log('失败：', error);
+      });
+    },
+
+
+  },
+  components: {}
+};
+</script>
+
+<style lang="scss" scoped>
+.main-content {
+  width: 100vw !important;
+  min-height: calc(100vh - 40px);
+  background: #f6f6f6;
+  padding: 15px;
+
+  .self-info {
+    background-color: #fff;
+    border-radius: 10px;
+    margin-top: 20px;
+    padding: 0 15px 15px 15px;
+
+    .top {
+      width: 100%;
+      height: 45px;
+      display: inline-flex;
+      flex-direction: row;
+      flex-wrap: nowrap;
+      justify-content: flex-start;
+      align-items: center;
+      position: relative;
+
+      .avatar {
+        margin: 0 !important;
+        padding: 0 !important;
+        width: 55px !important;
+        height: 55px;
+        border-radius: 50%;
+        position: absolute;
+        top: calc(0px - (55px / 2));
+        left: 0;
+      }
+
+      .title {
+        width: calc(100% - 55px);
+        height: 45px;
+        line-height: 65px;
+        padding-left: 65px;
+        color: #202020;
+        font-size: 1rem;
+        font-weight: 600;
+        text-align: left;
+      }
+    }
+
+    .statistics {
+      padding-top: 10px;
+      width: 100%;
+      display: inline-flex;
+      flex-wrap: wrap;
+      flex-direction: row;
+      justify-content: flex-start;
+      align-items: center;
+
+      .s-box {
+        display: inline-flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        width: 50%;
+        height: 70px;
+
+        .num {
+          color: #202020;
+          font-size: 1rem;
+          font-weight: 600;
+        }
+
+        .title {
+          color: #666;
+        }
+      }
+    }
+  }
+
+  .list-content {
+    background-color: #fff;
+    border-radius: 10px;
+    margin-top: 15px;
+    overflow: hidden;
+
+    .list {
+      padding: 0 10px;
+
+      .children-box {
+        width: 100%;
+        padding: 10px 0;
+        border-top: 1px solid #f6f6f6;
+
+        .user-info {
+          display: inline-flex;
+          justify-content: flex-start;
+          align-items: center;
+          flex-direction: row;
+          flex-wrap: nowrap;
+          width: 100%;
+
+          .avatar {
+            margin: 0 !important;
+            padding: 0 !important;
+            width: 40px !important;
+            height: 40px !important;
+            border-radius: 50%;
+          }
+
+          .info {
+            padding-left: 10px;
+            width: calc(100% - 40px) !important;
+
+            .nickname {
+              width: 100%;
+              height: 30px;
+              line-height: 30px;
+              overflow: hidden;
+              text-overflow: ellipsis;
+              white-space: nowrap;
+              text-align: left;
+
+              .user-id {
+                display: inline-block;
+                padding: 0 0.5rem;
+                margin-left: 0.5rem;
+                color: #f15353;
+                background: #ffe4dc;
+                height: 20px;
+                line-height: 20px;
+                font-size: 13px;
+                border-radius: 1rem;
+              }
+            }
+
+            .time {
+              text-align: left;
+              width: 100%;
+              font-size: 14px;
+              color: #8c8c8c;
+              height: 20px;
+              line-height: 20px;
+            }
+          }
+        }
+
+        .statistics {
+          width: 100%;
+          display: inline-flex;
+          flex-direction: row;
+          flex-wrap: wrap;
+          justify-content: flex-start;
+          align-items: center;
+
+          .s-box {
+            width: 50%;
+            height: 30px;
+            line-height: 30px;
+            text-align: left;
+            font-size: 14px;
+          }
+        }
+      }
+
+      .order-box {
+        width: 100%;
+        padding: 10px 0;
+        border-top: 1px solid #f6f6f6;
+
+        .order-sn {
+          width: 100%;
+          height: 45px;
+          line-height: 45px;
+          display: inline-flex;
+          flex-direction: row;
+          flex-wrap: nowrap;
+          justify-content: space-between;
+          align-items: center;
+
+          .left {
+            height: 45px;
+            line-height: 45px;
+            color: #666;
+          }
+
+          .right {
+            height: 45px;
+            line-height: 45px;
+            color: #f15353;
+          }
+        }
+
+        .goods-list {
+          width: 100%;
+          display: inline-flex;
+          flex-direction: row;
+          flex-wrap: nowrap;
+          justify-content: flex-start;
+          align-items: center;
+
+          .logo {
+            width: 90px !important;
+            height: 90px !important;
+          }
+
+          .info {
+            width: calc(100% - 90px) !important;
+            height: 90px !important;
+            padding-left: 10px;
+
+            .title {
+              overflow: hidden;
+              text-overflow: ellipsis;
+              display: -webkit-box;
+              -webkit-box-orient: vertical;
+              -webkit-line-clamp: 2;
+              font-size: 14px;
+              text-align: left;
+              color: #333;
+              height: 60px;
+            }
+
+            .buy-num {
+              text-align: left;
+              color: #888;
+              font-size: 12px;
+              height: 30px;
+              line-height: 30px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>

yunshop-front-master/src/views/member/tool/my_relationship_v2.vue

@@ -2,8 +2,6 @@
   <div id="myrelationship">
     <c-title :hide="false" :text="name"></c-title>
 
-    <!-- 我的客户 -->
-
     <div id="content">
       <modal v-if="showModal" :title="mdTitle" :tips="mdTips" :value="mdValue" @onClose="handleToggle"></modal>
       <div class="member-info">
@@ -141,8 +139,9 @@
                 <i class="iconfont icon-sousuo1" style="color: #ccc;" @click="search"></i>
               </div>
             </div>
-            <div class="list" v-for="(item, index) in new_content" :key="index">
+            <div class="list" v-for="(item, index) in new_content" :key="index" @click.stop="$router.push(fun.getUrl('MyRelationshipDetailV2',{uid:item.id}))">
-              <div class="list_top" @click="gotoMemberDetail(item.id)">
+              <!--<div class="list_top" @click="gotoMemberDetail(item.id)">-->
+              <div class="list_top">
                 <div class="header_left">
                   <div class="img">
                     <img :src="item.avatar" @click.stop="goMarket(item.id)"/>
@@ -153,9 +152,7 @@
 
                   <ul class="name">
                     <li style="">
-                      <div
+                      <div style="float: left; max-width: 7rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
-                        style="float: left; max-width: 7rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;"
-                      >
                         {{ item.nickname }}
                       </div>
                       <div class="member-id" style="float: left;">

yunshop-front-master/src/views/member/tool/my_relationship_v2_controller.js

@@ -175,7 +175,7 @@ export default {
       this.keyword1 = '';
       this.keyword2 = '';
       this.keyword3 = '';
-            
+
     },
 
     //我的推荐人
@@ -212,7 +212,7 @@ export default {
 
       });
     },
-		
+
     goMarket(id){
       //会员概况优先于我的市场
       if(this.is_link) {
@@ -348,7 +348,7 @@ export default {
             that.level2.total = response.data.total;
             break;
           case "2":
-            that.third_content = response.data.data; 
+            that.third_content = response.data.data;
             break;
           default:
             break;
@@ -361,7 +361,7 @@ export default {
         // error callback
       });
     },
-        
+
     enterSearch(event) {
       if (event.keyCode === 13) {
         //如果按的是enter键
@@ -712,7 +712,7 @@ export default {
           // error callback
           this.page--;
         });
-    
+
       }
     },
     gotoList(type) {
@@ -733,12 +733,17 @@ export default {
     }
   },
   activated() {
-    setTimeout(() => {
+    // setTimeout(() => {
-      this.agent=JSON.parse(window.localStorage.getItem('mailLanguage')).agent?JSON.parse(window.localStorage.getItem('mailLanguage')).agent:{};      
+    //   this.agent=JSON.parse(window.localStorage.getItem('mailLanguage')).agent?JSON.parse(window.localStorage.getItem('mailLanguage')).agent:{};
-      this.name=JSON.parse(window.localStorage.getItem('mailLanguage')).agent&&JSON.parse(window.localStorage.getItem('mailLanguage')).agent.agent?JSON.parse(window.localStorage.getItem('mailLanguage')).agent.agent:'客户';
+    //   this.name=JSON.parse(window.localStorage.getItem('mailLanguage')).agent&&JSON.parse(window.localStorage.getItem('mailLanguage')).agent.agent?JSON.parse(window.localStorage.getItem('mailLanguage')).agent.agent:'客户';
-      this.$forceUpdate();
+    //   this.$forceUpdate();
-      this.fun.setWXTitle(this.name);
+    //   this.fun.setWXTitle(this.name);
-    }, 2000);
+    // }, 2000);
+    this.agent=JSON.parse(window.localStorage.getItem('mailLanguage')).agent?JSON.parse(window.localStorage.getItem('mailLanguage')).agent:{};
+    this.name=JSON.parse(window.localStorage.getItem('mailLanguage')).agent&&JSON.parse(window.localStorage.getItem('mailLanguage')).agent.agent?JSON.parse(window.localStorage.getItem('mailLanguage')).agent.agent:'客户';
+    this.$forceUpdate();
+    this.fun.setWXTitle(this.name);
+
     this.initData(); //初始化参数
     this.pageInit();
     this.getMyRelation();