force.vue

<template>
  <!--  -->
  <div class="force ranklist">
    <div class="go back" @click="clear" v-if="city !== '全国'">
      <img src="@/assets/img/backoff.png" alt="">
    </div>
    <div class="map">
      <ForceMap :optionList="optionList" type="wap" :mapStyle="mapStyle" title="原力值" @setrankList="setrankList"/>
    </div>
    <div class="user-rank-list" ref="user-rank-list">
      <RankList title="用户原力榜" listTitle="原力值" :city="city" @onConfirm="onConfirm" :dropdownList="dropdownList" @listOpen="listOpen" :rankData="rankData"/>
    </div>
  </div>
</template>
<script>
import ForceMap from '../pc/mapForce.vue'
import RankList from "./rankList.vue";
import { getForceInfo } from '@/server/screen-data'
export default {
  data() {
    return {
      optionList: [],
      rankData: [],
      Popup:false,
      city:'全国',
      rankList:[],
      dropdownList:[],
      mapStyle:{
        width:'',
        height:'',
        tooltip:false,
        zoom:1
      }
    }
  },
  methods: {
    clear(){
      this.city= '全国'
      this.rankData = this.rankList
    },
    onConfirm (val) {
      this.city = val
      this.rankData = this.optionList.find(it=>it.city == val).list
    },
    listOpen (val) {
      var height = -(this.$refs['user-rank-list'].offsetHeight-300)
      if (val){
        height = 48
      }
      this.$refs['user-rank-list'].style=`bottom:${height}px;`
    },
    getlist() {
      getForceInfo().then((res) => {
        if (res.status == 200) {
          this.optionList = res.data.data.cityInfoList
          this.rankData = res.data.data.countryTop
          this.rankList = res.data.data.countryTop
          this.dropdownList = res.data.data.cityInfoList.map(it=>it.city)
        }
      }).catch(() => {

      })
    },
    setrankList(data){
      this.rankData = data.list
      this.city = data.city
    }
  },
  created () {
    this.mapStyle.width = document.documentElement.clientWidth
    this.mapStyle.height = document.documentElement.clientHeight
  },
  mounted() {
    this.getlist()
    this.listOpen(false)
  },
  components: {
    ForceMap,
    RankList
  },
}
</script>
<style scoped lang="scss">
// .user-rank-list{
//   position: fixed;

// }

.popup-btn{
  position: absolute;
  bottom: 20px;
  background: #0f0;
}
</style>