Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
云顶记录
<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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment