fix:微信端企业画像重点客户tab切换

src/web/staticres/big-member/weixin/css/ent_portrait.css

@@ -229,7 +229,7 @@
     align-items: center;
     padding-top: .2rem;
 }
-.client .c-name,.client .item-name{
+.client .item-name{
     width: 2.84rem;
     margin-right: .24rem;
 }
@@ -251,9 +251,10 @@
     text-align: center;
 }
 .client .c-name{
-    font-weight: bold;
-    font-size: .3rem;
-    color: #171826;
+  color: #9B9CA3;
+  font-size: .22rem;
+  width: 2.84rem;
+  margin-right: .24rem;
 }
 .client .c-count,.client .c-rate,.client .c-time{
     color: #9B9CA3;
@@ -418,3 +419,44 @@
 .win-analyse .high-link > span{
   margin-right: .08rem;
 }
+
+.c-top, .top-switch {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  font-size: .26rem;
+  align-items: center;
+}
+
+.c-itemName {
+  font-size: .3rem;
+}
+
+.top-switch div {
+  margin-left: .16rem;
+  height: .44rem;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.top-switch div.active {
+  color: #2ABED1;
+  position: relative;
+}
+
+.top-switch div.active:after {
+  content: '';
+  position: absolute;
+  left: 50%;
+  top: auto;
+  margin-left: -0.4rem;
+  bottom: 0;
+  width: 0.8rem;
+  border-bottom: 1.5px solid #2ABED1;
+  z-index: 99999999;
+}
+
+.top-switch div:not(active) {
+  color: #5F5E64
+}

src/web/staticres/common-module/collection/js/ent_portrait.js

@@ -1235,7 +1235,9 @@ var vNode = {
         data.forEach(function (list) {
           var i1 = {
             title: list.buyerclass,
-            list: []
+            list: [],
+            firstList: [],
+            showLabels: false
           }
           if (list.topData && $.isArray(list.topData)) {
             list.topData.forEach(function (item) {
@@ -1249,7 +1251,18 @@ var vNode = {
               })
             })
           }
-
+          if (list.firstData && $.isArray(list.firstData)) {
+            list.firstData.forEach(function (item) {
+              i1.firstList.push({
+                name: item.BuyerName,
+                money: item.CountMoney,
+                count: item.CountProject,
+                rate: item.AvgRate ? (item.AvgRate * 100).fixed(2) : item.AvgRate,
+                time: new Date(item.lastTime * 1000).pattern('yyyy/MM/dd'),
+                percent: item.CountMoney / list.firstData[0].CountMoney * 100 + '%'
+              })
+            })
+          }
           if (!list.buyerclass || ($.isArray(list.topData) && list.topData.length === 0)) {
             // console.log('此数据为空')
           } else {

src/web/templates/frontRouter/wx/collection/sess/ent_portrait.html

@@ -539,29 +539,62 @@
                 <div class="bg-white tab-card customers client"  v-show="conf._4 && importantCustomers.length !== 0  && !getStatus">
                     <div class="tab-card-title">重点及首次合作客户</div>
                     <div class="tab-card-content">
-                        <div class="client-list" v-for="c in importantCustomers">
-                            <div class="c-thead">
-                                <strong class="c-name">${c.title}</strong>
-                                <span class="c-count">中标数量</span>
-                                <span class="c-rate">平均折扣率</span>
-                                <span class="c-time">最近合作日期</span>
+                    <div class="client-list" v-for="c in importantCustomers">
+                      <div class="c-top">
+                        <strong class="c-itemName">${c.title}</strong>
+                        <div class="top-switch">
+                          <div :class="{active: !c.showLabels}" @click="c.showLabels=false">重点客户</div>
+                          <div :class="{active: c.showLabels}" @click="c.showLabels=true">首次合作客户</div>
+                        </div>
+                      </div>
+                      <div class="progress-bar-container" v-show="!c.showLabels">
+                        <div class="c-thead">
+                          <strong class="c-name">企业名称</strong>
+                          <span class="c-count">中标数量</span>
+                          <span class="c-rate">平均折扣率</span>
+                          <span class="c-time">最近合作日期</span>
+                        </div>
+                        <div class="progress-bar-item" v-for="(item,index) in c.list" :key="index" v-show="item.name">
+                          <div class="item-label">
+                            <span class="ellipsis-2 item-name" @click="toUnitPortrayal(item)">${item.name}</span>
+                            <span class="item-count">${item.count ? item.count + '个' : item.count}</span>
+                            <span class="item-rate">${(item.rate != null) ? item.rate + '%' : '--'}</span>
+                            <span class="item-time">${item.time}</span>
+                          </div>
+                          <div class="item-progress">
+                            <span class="item-money" v-if="item.money > 0">${utils.moneyUnit(item.money)}</span>
+                            <span class="item-progress-count active-progress" :style="{width: item.percent}"></span>
+                          </div>
+                        </div>
+                      </div>
+                      <div class="progress-bar-container" v-show="c.showLabels">
+                        <div v-if="c.firstList&&c.firstList.length>0">
+                          <div class="c-thead">
+                            <strong class="c-name">企业名称</strong>
+                            <span class="c-count">中标数量</span>
+                            <span class="c-rate">平均折扣率</span>
+                            <span class="c-time">最近合作日期</span>
+                          </div>
+                          <div class="progress-bar-item" v-for="(item,index) in c.firstList" :key="index" v-show="item.name">
+                            <div class="item-label">
+                              <span class="ellipsis-2 item-name" @click="toUnitPortrayal(item)">${item.name}</span>
+                              <span class="item-count">${item.count ? item.count + '个' : item.count}</span>
+                              <span class="item-rate">${(item.rate != null) ? item.rate + '%' : '--'}</span>
+                              <span class="item-time">${item.time}</span>
                             </div>
-                            <div class="progress-bar-container">
-                                <div class="progress-bar-item" v-for="(item,index) in c.list" :key="index" v-show="item.name">
-                                    <div class="item-label">
-                                        <span class="ellipsis-2 item-name" @click="toUnitPortrayal(item)">${item.name}</span>
-                                        <span class="item-count">${item.count ? item.count + '个' : item.count}</span>
-                                        <span class="item-rate">${(item.rate != null) ? item.rate + '%' : '--'}</span>
-                                        <span class="item-time">${item.time}</span>
-                                    </div>
-                                    <div class="item-progress">
-                                        <span class="item-money" v-if="item.money > 0">${utils.moneyUnit(item.money)}</span>
-                                        <span class="item-progress-count active-progress" :style="{width: item.percent}"></span>
-                                    </div>
-                                </div>
+                            <div class="item-progress">
+                              <span class="item-money" v-if="item.money > 0">${utils.moneyUnit(item.money)}</span>
+                              <span class="item-progress-count active-progress" :style="{width: item.percent}"></span>
                             </div>
+                          </div>
+                        </div>
+                        <div v-else style="display:flex;flex-direction:column;justify-content:center;align-items:center;padding:.4rem;">
+                          <div style="height:4rem;width:4rem;background:url('/common-module/collection/image/jy-back.png') no-repeat;background-size:100% 100%"></div>
+                          <span style="font-size: .28rem;line-height: 20px;color: #9B9CA3;">该时间范围暂无首次合作过的客户</span>
                         </div>
+                      </div>
                     </div>
+                  </div>
                 </div>
                 <div class="vip_component" v-if="getStatus" style="height:10.8rem;background:url('/common-module/collection/image/bg/vip_bg_7.png') no-repeat;background-size:100% 100%">
                     <vip-component data-cl-event="c_wx_open_buttionclick" @tabactive="tabActive" :power="conf" type="item_7" :entvisit="entvisit" :can-free-exp="canFreeExp" :newvip="isVip" imgurl='{{Msg "seo" "cdn"}}/common-module/collection/image/bg/vip_ex_7.png'></vip-component>