云顶记录

game_yundingzhiyi_equip.vue

<template>
  <div class="equip">
    <b-input v-model="searchEquip"/>
    <b-checkbox-group>
      <b-checkbox v-for="(kind,index) in kinds" :key="index" v-model="selectKinds" :value="kind.id" :title="kind.property">{{ kind.name }}</b-checkbox>
    </b-checkbox-group>
    <div v-if="equips">
      <b-card v-for="(equip, index) in equips.equip" :key="index" :hidden="!equip.show">
        
        <b-img-lazy v-bind="equipPicProps" :src="'https://wegame.gtimg.com/tgp_act/release/wegame/equips/images/'+equip.id+'.png'" :title="equip.property"></b-img-lazy>
        <div class="card equipname">
          {{ equip.name }}<br/>
          {{ equip.property }}
        </div>
      </b-card>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Equip',
  data(){
    return {
      equips: {},
      searchEquip: "",
      kinds: [],
      selectKinds:[],
      have_kinds:[],
      equipPicProps: { float:'left',class: 'pngequip'}
    }
  },
  mounted(){
    this.getAllEquips()
  },
  methods:{
    getAllEquips(){
      this.$axios('./equip.json').then(res=>{
        if(res.status===200){
          var r = res.data.result
          this.equips = r
          console.log("eqip: ",r)
          let copy_compound = JSON.parse(JSON.stringify(r.equip_compound)) 
          var have_id = {}
          for( var item in r.equip){
            // console.log(item)
            r.equip[item].show = true
            r.equip[item].index = item
            if(r.equip[item].id <= 12){
              this.kinds.push(r.equip[item])
              have_id[r.equip[item].id] = []
            }else{
              // 需要保存的是索引
              // console.log("index:",have_id)
              let d
              for(var i in copy_compound){
                // console.log("i",i,copy_compound[i],copy_compound)
                let id1 = copy_compound[i].source_id1,id2 = copy_compound[i].source_id2,target_id = copy_compound[i].target_id
                if(target_id === r.equip[item].id){
                  
                  r.equip[item].compound = JSON.parse(JSON.stringify(copy_compound[i]))
                  if(id1 === id2){
                    have_id[id1].push(JSON.parse(JSON.stringify(item)))
                  }else{
                    have_id[id1].push(JSON.parse(JSON.stringify(item)))
                    have_id[id2].push(JSON.parse(JSON.stringify(item)))
                  }
                  // console.log("get",have_id)
                  delete copy_compound[i]
                  break;
                }
              }
            }
            // 保存的是id
            // for(let i = 0;i<13;i++){
            //   have_id[i] = []
            // }
            // for(var i in copy_compound){
            //   let id1 = copy_compound[i].source_id1,id2 = copy_compound[i].source_id2,target_id = copy_compound[i].target_id
            //   if(id1 === id2){
            //     have_id[id1].push(target_id)
            //   }else{
            //     have_id[id1].push(target_id)
            //     have_id[id2].push(target_id)
            //   }
            // }
            // console.log(have_id )
          }
          // console.log("kindes",this.kinds)
          this.have_kinds = have_id
          this.handle(r)
        }
      })
    },
    handle( values ){
      let {  equip, equip_compound} = values
      let equips = []
      for(let i in equip){
        equips[equip[i].id] = JSON.parse(JSON.stringify(equip[i]))
      }
      let equips_kinds = []
      for(let i in equip_compound){
        let id1 = equip_compound[i].source_id1
        let id2 = equip_compound[i].source_id2
        let target = equip_compound[i].target_id
        equips[target].id1 = id1
        equips[target].id2 = id2
        if(id1 === id2){
          if(!equips_kinds[id1])equips_kinds[id1] = []
          equips_kinds[id1].push(target)
        }else{
          if(!equips_kinds[id1])equips_kinds[id1] = []
          if(!equips_kinds[id2])equips_kinds[id2] = []
          equips_kinds[id1].push(target)
          equips_kinds[id2].push(target)
        }
      }
      console.log("equip:",equip,equip_compound)
      console.log("equips",equips,equips_kinds)
    }
  },
  watch:{
    selectKinds(selects){
      // console.log(this.selectKinds,"change",val)
      // 没有选则所有都为true
      // console.log(selects,selects.length)
      if(selects.length>2){
        // alert("不能选择多于两个")
        return
      }
      if(selects.length === 0){
        for(let i in this.equips.equip){
          this.equips.equip[i].show = true
        }
      }
      if(selects.length === 1){
        for(let i in this.equips.equip){
          this.equips.equip[i].show = false
        }
        selects.map((val)=>{
          let have_kind = this.have_kinds[val]
          for(let i in have_kind){
            this.equips.equip[have_kind[i]].show = true
          }
        })
      }
      if(selects.length === 2){
        let id1 = selects[0],id2 = selects[1]
        // console.log(this.have_kinds[id1])
        // console.log(this.have_kinds[id2])
        let ec = this.equips.equip_compound
        let target_id = 0
        for(let i in ec){
          if(ec[i].source_id1 === id1 && ec[i].source_id2 === id2){
            target_id = ec[i].target_id
            break
          }else if(ec[i].source_id2 === id1 && ec[i].source_id1 === id2){
            target_id = ec[i].target_id
            break
          }
        }
        for(let i in this.equips.equip){
          if(this.equips.equip[i].id === target_id){
            this.equips.equip[i].show = true
            // console.log(this.equips.equip[i])
          }else
          this.equips.equip[i].show = false
        }
      }

    },
    searchEquip(se){
       let ep = this.equips.equip
        for(let i in ep){
          if(new RegExp(se).test(ep[i].name)){
            this.equips.equip[i].show = true
          }else
          this.equips.equip[i].show = false
        }
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.pngequip{
  float: left;
}
.equipname{
  margin-left: 2px;
  padding: 5px;
  left: 4px;
}
</style>