|
| 1 | +<template> |
| 2 | + <div> |
| 3 | + <n-list> |
| 4 | + <template #header> |
| 5 | + <n-space justify="space-around" class="aligncenter"> |
| 6 | + <n-avatar |
| 7 | + round |
| 8 | + :bordered="false" |
| 9 | + :size="50" |
| 10 | + :src=imgUrl |
| 11 | + fallback-src="https://wegame.gtimg.com/g.26-r.c2d3c/helper/lol/assis/images/resources/usericon/4027.png" |
| 12 | + style="display: block" |
| 13 | + /> |
| 14 | + <n-popover trigger="hover"> |
| 15 | + <template #trigger> |
| 16 | + <n-tag :bordered="false">是否使用自动符文</n-tag> |
| 17 | + </template> |
| 18 | + <span>下次选择此英雄自动配置符文</span> |
| 19 | + </n-popover> |
| 20 | + <n-switch @update:value="setIsAutoRune()" |
| 21 | + v-model:value="isAutoRune" /> |
| 22 | + </n-space> |
| 23 | + <n-tabs style="margin-top: 12px" type="segment" |
| 24 | + :default-value="0"> |
| 25 | + <n-tab-pane v-for="(restraint,index) in restraintList" |
| 26 | + :tab="restraint.position" :name="index"> |
| 27 | + <n-scrollbar style="max-height: 385px"> |
| 28 | + <n-list-item v-for="champRes in restraint.restraint"> |
| 29 | + <n-space class=aligncenter> |
| 30 | + <n-avatar |
| 31 | + round |
| 32 | + :bordered="false" |
| 33 | + :size="50" |
| 34 | + :src=champRes[1] |
| 35 | + fallback-src="https://wegame.gtimg.com/g.26-r.c2d3c/helper/lol/assis/images/resources/usericon/4027.png" |
| 36 | + style="display: block" |
| 37 | + /> |
| 38 | + <n-tag type="success" :bordered="false" |
| 39 | + style="width: 100px;justify-content: center"> |
| 40 | + 胜率 {{ (champRes[2] * 0.01).toFixed(1) + '%' }} |
| 41 | + </n-tag> |
| 42 | + <p>{{ champRes[0] }}</p> |
| 43 | + </n-space> |
| 44 | + </n-list-item> |
| 45 | + </n-scrollbar> |
| 46 | + </n-tab-pane> |
| 47 | + </n-tabs> |
| 48 | + </template> |
| 49 | + </n-list> |
| 50 | + </div> |
| 51 | +</template> |
| 52 | + |
| 53 | +<script> |
| 54 | +export default { |
| 55 | + name: "restraint" |
| 56 | +} |
| 57 | +</script> |
| 58 | + |
| 59 | +<script setup> |
| 60 | +import { |
| 61 | + NAvatar, NList, NScrollbar,NSwitch,NPopover, |
| 62 | + NListItem, NSpace, NTag,NTabs,NTabPane |
| 63 | +} from "naive-ui"; |
| 64 | +import {ref,onMounted} from "vue"; |
| 65 | +import {champDict} from "@/utils/render/lolDataList"; |
| 66 | +import {appConfig} from "@/utils/main/config"; |
| 67 | +import {request} from "@/utils/render/request"; |
| 68 | +import {createHttp1Request} from "@/utils/league-connect"; |
| 69 | +const props = defineProps({ |
| 70 | + champ: { |
| 71 | + type: String, |
| 72 | + } |
| 73 | +}) |
| 74 | +const emits = defineEmits(['autoRune']) |
| 75 | +
|
| 76 | +const isAutoRune = ref(false) |
| 77 | +const imgUrl = ref(null) |
| 78 | +const restraintList = ref([]) |
| 79 | +
|
| 80 | +
|
| 81 | +onMounted(() => { |
| 82 | + imgUrl.value = `https://game.gtimg.cn/images/lol/act/img/champion/${champDict[props.champ].alias}.png` |
| 83 | + isAutoRune.value = appConfig.has(`autoRune.${props.champ}`) === true ? true : false |
| 84 | + getRestraintData() |
| 85 | +}) |
| 86 | +
|
| 87 | +const getRestraintData = async () => { |
| 88 | + restraintList.value = [] |
| 89 | + const url = `https://lol.qq.com/act/lbp/common/guides/champDetail/champDetail_${props.champ}.js` |
| 90 | + const result = await request({ |
| 91 | + 'url': url, |
| 92 | + method: 'GET', |
| 93 | + params: {ts: '2760378'} |
| 94 | + }) |
| 95 | + const detailsData = JSON.parse(result.data.split('=')[1].split(';/*')[0]) |
| 96 | + const championFightKeys = Object.keys(detailsData.list.championFight) |
| 97 | + for (const championFightKey of championFightKeys) { |
| 98 | + const position = getPosition(championFightKey) |
| 99 | + const restraint = getDetailsData(detailsData.list.championFight[championFightKey]) |
| 100 | + restraintList.value.push({position,restraint}) |
| 101 | + } |
| 102 | +} |
| 103 | +
|
| 104 | +// 获取位置信息 |
| 105 | +const getPosition = (pos) => { |
| 106 | + switch (pos) { |
| 107 | + case 'mid': |
| 108 | + return '中单'; |
| 109 | + case 'top': |
| 110 | + return '上单'; |
| 111 | + case 'support': |
| 112 | + return '辅助'; |
| 113 | + case 'jungle': |
| 114 | + return '打野'; |
| 115 | + case 'bottom': |
| 116 | + return '射手'; |
| 117 | + case 'aram': |
| 118 | + return '极地'; |
| 119 | + } |
| 120 | +} |
| 121 | +// 获取压制英雄数据 |
| 122 | +const getDetailsData = (restraint) => { |
| 123 | + let resList = [] |
| 124 | +
|
| 125 | + for (const restraintListElement of restraint) { |
| 126 | + const chapmId = restraintListElement.championid2 |
| 127 | + const label = champDict[chapmId].label |
| 128 | + const imgUrl = `https://game.gtimg.cn/images/lol/act/img/champion/${champDict[chapmId].alias}.png` |
| 129 | + const winRate = 10000 - Number(restraintListElement.winrate) |
| 130 | + resList.push([label, imgUrl, winRate]) |
| 131 | + } |
| 132 | + resList.sort((a, b) => { |
| 133 | + return a[2] < b[2] ? 1 : -1 |
| 134 | + }) |
| 135 | + return resList |
| 136 | +} |
| 137 | +// 设置是否自动符文 |
| 138 | +const setIsAutoRune = async () => { |
| 139 | + if (!isAutoRune.value){ |
| 140 | + // 获取符文页信息 |
| 141 | + const currentRuneList = (await createHttp1Request({ |
| 142 | + method: "GET", |
| 143 | + url: 'lol-perks/v1/pages', |
| 144 | + }, appConfig.get('credentials'))).json() |
| 145 | + const current = currentRuneList.find((i) => i.current && i.isDeletable) |
| 146 | + appConfig.set(`autoRune.${props.champ}`, current) |
| 147 | + emits('autoRune', true) |
| 148 | +
|
| 149 | + }else { |
| 150 | + appConfig.delete(`autoRune.${props.champ}`) |
| 151 | + emits('autoRune', false) |
| 152 | + } |
| 153 | +} |
| 154 | +</script> |
| 155 | + |
| 156 | +<style scoped> |
| 157 | +.aligncenter { |
| 158 | + align-items: center; |
| 159 | +} |
| 160 | +</style> |
0 commit comments