这里我不在对代码进行任何说明，只进行代码展示，因为我在另一篇文章里进行了说明，在末尾有跳转代码说明教程连接。
由于新版本无刷新按钮，需要root获取链接，我需近一步研究获取链接方式
原神抽卡分析工具完整页面代码
原神抽卡分析工具完整页面代码
<template>
<div>
<div class="p20 backColor">
<el-form label-position="top" label-width="80px" :model="forms" :rules="rules" ref="ruleForm">
<el-form-item label="url" prop="url">
<el-input
type="textarea"
placeholder="请输入url"
:rows="4"
v-model="forms.url"
>
</el-input>
<p class="alink"><a href="https://www.sinye.xyz/ys/406.html" target="_blank" rel="noopener noreferrer"><span class="t_c_409eff">如何获取url？</span></a></p>
</el-form-item>
<el-form-item label="池子" prop="gacha_type">
<el-select v-model="forms.gacha_type" placeholder="请选择">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<div class="flex_c_e">
<el-button size="medium" type="primary" @click="getdata()">分 析</el-button>
</div>
</el-form>
</div>
<div class="mt20 backColor p20">
<div class="t12 danger">米忽悠只有近半年的记录</div>
<div class="mg_b20">
<div class="t16 t_w_600 mg_b15">总体分析结果</div>
<div class="result">
<van-cell
title-class="resultTitle" value-class="resultConten"
title="共抽取："
:value="result.totle"
/>
<van-cell
title-class="resultTitle" value-class="resultConten"
title="五星："
:value="result.five.num"
/>
<van-cell
title-class="resultTitle" value-class="resultConten"
title="四星："
:value="result.four.num"
/>
<van-cell
title-class="resultTitle" value-class="resultConten"
title="三星："
:value="result.three.num"
/>
</div>
</div>
<div>
<div class="t16 t_w_600 mg_b15">5星分析结果</div>
<div class="result">
<van-cell
title-class="resultTitle" value-class="resultConten"
title="垫了"
:value="result.five.notOut+'抽'"
/>
<van-cell
v-for="(item,index) in result.five.ren" :key="index"
title-class="resultTitle" value-class="resultConten"
:title="item.name"
:value="item.num+'抽'"
/>
</div>
</div>
</div>
</div>
</template>
<script>
import { Toast } from 'vant';
export default {
name: 'mihoyo',
data() {
return {
params: '',// 两连接相同段
end_id: 0,
bool: true,// 停止发起ajax请求判断变量
forms: {
url: '',// 使用者填写的uel
gacha_type: '',// 使用者选择的池子类型
},
// 池子类型
options: [
{label: '新手祈愿', value: '100'},
{label: '常驻祈愿', value: '200'},
{label: '活动祈愿', value: '301'},
{label: '武器祈愿', value: '302'},
],
// 分析后整合的数据
result:{
totle: 0,
three: {
num:0
},
four: {
num:0
},
five: {
num:0,
notOut: 0,
ren:[]
}
},
// element的输入校验
rules: {
url: [
{ required: true, message: '请输入url', trigger: 'blur' },
],
gacha_type: [
{ required: true, message: '请选择池子', trigger: 'change' }
],
}
}
},
methods: {
getdata(){
this.$refs['ruleForm'].validate(async (valid) => {
if (valid) {
this.bool = true
Toast.loading({
duration: 0,
forbidClick: true,
message: '加载中。。。',
overlay: true
});
this.params = this.forms.url.substr(this.forms.url.indexOf("?")).split("#")[0]
// 获取数据
var data = []
this.end_id = 0
while (this.bool){
let a = await this.mihoyo()
data = data.concat(a)
}
data = data.reverse()
// 分析数据
this.result = {
totle: 0,
three: {
num:0
},
four: {
num:0
},
five: {
num:0,
ren:[]
}
}
var oldNum = 0
this.result.totle = data.length
for (let i = 1; i <= this.result.totle; i++) {
const el = data[i-1];
if(el.rank_type == 3){
++this.result.three.num
}
if(el.rank_type == 4){
++this.result.four.num
}
if(el.rank_type == 5){
++this.result.five.num
this.result.five.ren.push({
name: el.name,
num: i - oldNum,
})
oldNum = i
}
}
this.result.five.notOut = this.result.totle - oldNum
console.log(data)
console.log(this.result)
Toast.clear();
} else {
return false;
}
});
},
mihoyo(){
// console.log('/mihoyo/event/gacha_info/api/getGachaLog'+this.params+'&page='+i+'&size=20&end_id=0')
return new Promise(resolve=>{
this.$axios.get(
'/event/gacha_info/api/getGachaLog'+this.params+'&gacha_type='+this.forms.gacha_type+'&page=1&size=20&end_id='+this.end_id,
).then((response)=>{
console.log(response)
if(response.data.retcode == -101){
this.$message.error({
showClose: true,
message: 'url过期！请重新获取',
type: 'error',
duration: 3000,
center: true,
offset: "50"
});
this.bool = false
Toast.clear();
}else{
var data = response.data.data
if(data == null){
resolve([])
}
var list = data.list
if(list.length == 0){
this.bool = false
}else{
this.end_id = list[list.length - 1].id
}
resolve(list)
}
})
})
},
},
mounted(){
},
created() {
}
}
</script>
<style scoped>
.alink{
line-height: 1;
margin: 10px 0 0;
}
.result{
margin: -5px -16px 0;
}
.resultTitle {
width: 6em;
flex: auto;
}
.resultConten {
width: 100%;
flex: auto;
}
</style>