fans.vue

<template>
  <!--  -->
  <div class="force ranklist">
    <div class="go back" @click="clear" v-if="cityObj">
      <img src="@/assets/img/backoff.png" alt="">
    </div>
    <div class="map">
      <FansceMap v-if="cityObj" type="wap" :mapStyle="mapStyle" :optionList="optionList" :cityObj="cityObj" @fansObj="fansObj"/>
      <ForceMap v-else :optionList="optionList" type="wap" :mapStyle="mapStyle" :cityObj="cityObj" @setrankList="setrankList" title="铁粉数"/>
    </div>
    
    <div class="user-rank-list" ref="user-rank-list">
        <RankList title="铁粉榜"  :cityObj="cityObj" :city="city" listTitle="铁粉数" @listOpen="listOpen" :rankData="rankData" @rankFans="rankFans"/>
    </div>
    <van-popup v-model="Popup" 
   >
      <div class="popover-fans">
        <div class="popover-top">
          <p class="popover-title" v-if="fansData.flag"> <a target="_blank" :href="`https://blog.csdn.net/${cityObj.username}`"><img :src="cityObj.avatar" alt=""> <span>{{cityObj.nickname||cityObj.username}}</span></a> </p>
          <p class="popover-title" v-else>地区</p>
          <p class="popover-city"><i></i><span class="city">{{fansData.obj.name}}</span> <span>铁粉数</span> <span class="num">{{fansData.obj.uv}}</span></p>
        </div>
      </div>
      <div class="close" @click="Popup = false"><img src="@/assets/img/close-circle.png" alt=""></div>
    </van-popup>
  </div>
</template>
<script>
import ForceMap from '../pc/mapForce.vue'
import FansceMap from '../pc/mapFans.vue'
import RankList from "./rankList.vue";
import { getHardcoreFanInfo,getFanDistribution } from '@/server/screen-data'
export default {
  data() {
    return {
      optionList:[],
      rankData:[],
      rankList:[],
      Popup:false,
      cityObj:'',
      dataList:[],
      show:true,
      city:'全国',
      listFlag:false,
      mapStyle:{
        width:'',
        height:'',
        tooltip:false,
        zoom:1
      },
      listStyle:'',
      positionY:'',
      mapbottom:'',
      fansData:{
        obj:{}
      }
    }
  },
  methods: {
    setrankList(data){
      this.rankData = data.list
      this.city = data.city
    },
    fansObj (obj) {
      this.fansData = obj
      setTimeout(()=>{
        this.Popup = true
      },100)
    },
    listOpen (val) {
      var height = -(this.$refs['user-rank-list'].offsetHeight-300)
      if (val){
        height = 34
      }
      this.$refs['user-rank-list'].style=`bottom:${height}px;`
    },
    getlist(){
       getHardcoreFanInfo().then((res) => {
        if (res.status == 200){
          this.rankData = res.data.data.countryTop
          this.rankList = res.data.data.countryTop
          this.dataList = res.data.data.cityInfoList
          this.optionList = res.data.data.cityInfoList
        }
        
      }).catch(() => {
      })
    },
    clear() {
      this.cityObj = null
      this.optionList = this.dataList
      this.rankData = this.rankList
    },
    rankFans(item) {
      getFanDistribution(item.username).then(re=>{
        if (re.status === 200){
          this.optionList = re.data.data.map(it=>{
            return {
              name:it.city,
              value:it.gps.concat(it.score),
              uv:it.score
            }
          })
          this.Popup = false
          this.cityObj = item
        }
      })
    }
  },
  created () {
    this.mapStyle.width = document.documentElement.clientWidth
    this.mapStyle.height = document.documentElement.clientHeight
  },
  mounted(){
    this.getlist()
    this.listOpen(false)
  },
  components: {
    ForceMap,
    RankList,
    FansceMap
  },
}
</script>
<style scoped lang="scss">
.force{
  position: relative;
  overflow: hidden;
    .popover-fans{
      width: 275px !important;
      height: 94px !important;
      .popover-title a{
        color: #77c0ff;
        display: flex;
        align-items: center;
      }
    }
}


</style>