144 lines
3.3 KiB
Vue
144 lines
3.3 KiB
Vue
<template>
|
||
<div>
|
||
<br>
|
||
<div style="max-width: 350px;margin: 0 auto;">
|
||
|
||
|
||
<input type="text" placeholder="请输入QQ账号" v-model="qq" class="mh_liti" style="width:80%;height:2.5em;margin: 1em auto;padding:2px 2px 2px 1em;box-sizing: border-box;">
|
||
<button style="width:80%;height:2.5em;margin: 1em auto;box-sizing: border-box;" @click="search" :disabled="wait">{{btnTitle}}</button>
|
||
</div>
|
||
<view class="content">
|
||
|
||
<div class="item" v-for="(item,index) in datas" :key="index">
|
||
<info-from-q-q-vue :qq="item['qq']" :tel="item['tel']" :wb="item['id']" :address="item['address']" :url="'https://q1.qlogo.cn/g?b=qq&nk='+item['qq']+'&s=640'"></info-from-q-q-vue>
|
||
</div>
|
||
|
||
</view>
|
||
<p style="text-align: center;color: darkgray;">批量查询业务请联系哔哩哔哩萌狼蓝天</p>
|
||
<p style="text-align: center;color: darkgray;">查询失效请联系萌狼蓝天进行维护</p>
|
||
<p style="text-align: center;color: darkgray;">返回结果为无则是未查询到</p>
|
||
<p style="text-align: center;color: darkgray;">最后一次更新：2023-08-05</p>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import InfoFromQQVue from '../info/InfoFromQQ/InfoFromQQ.vue'
|
||
export default {
|
||
components:{
|
||
InfoFromQQVue,
|
||
},
|
||
|
||
data() {
|
||
return {
|
||
qq: '',
|
||
that:this,
|
||
datas:[],
|
||
wait:false,
|
||
btnTitle:'查询'
|
||
}
|
||
},
|
||
onLoad() {
|
||
// console.log(this)
|
||
},
|
||
methods: {
|
||
search(){
|
||
this.wait=true
|
||
this.btnTitle="查询中"
|
||
console.log(this.qq)
|
||
if(this.qq===""){
|
||
uni.showToast({
|
||
title: '请输入正确的QQ号',
|
||
//将值设置为 success 或者直接不用写icon这个参数
|
||
icon: 'none',
|
||
//显示持续时间为 2秒
|
||
duration: 2000
|
||
})
|
||
this.wait=false
|
||
this.btnTitle="查询"
|
||
return false
|
||
}else{
|
||
console.log(this.qq)
|
||
}
|
||
uni.request({
|
||
url:'http://124.71.108.214:2312//apis/info/qq',
|
||
method:"POST",
|
||
'headers': {
|
||
'content-type': 'application/x-www-form-urlencoded'
|
||
},
|
||
data:{
|
||
"qq":this.qq
|
||
},
|
||
success: (res) => {
|
||
this.datas=[]
|
||
console.log("success:",res["data"])
|
||
let data = res["data"]
|
||
console.log("获取数据",data)
|
||
console.log("code",data["code"])
|
||
if(data["code"]===1){
|
||
let result = data["data"]
|
||
//有两种情况，一种是只有一个需要查询，一种是多个查询
|
||
if(this.qq.includes("/")){
|
||
// 此时是一个列表
|
||
this.datas = result
|
||
}else{
|
||
// 此时是一个字典
|
||
this.datas.push(result)
|
||
}
|
||
console.log("最终数据：",this.datas)
|
||
}
|
||
|
||
},
|
||
fail: (err) => {
|
||
console.log("err：",err)
|
||
},
|
||
complete: () => {
|
||
this.wait=false
|
||
this.btnTitle="查询"
|
||
}
|
||
|
||
})
|
||
|
||
var options = {
|
||
'method': 'POST',
|
||
'url': 'http://api.mllt.cc/apis/info/qq?qq='+this.qq,
|
||
|
||
};
|
||
|
||
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
.content {
|
||
display: flex;
|
||
flex-direction: ow- reverse;/*主轴*/
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-wrap: wrap;
|
||
}
|
||
.item{
|
||
|
||
}
|
||
/*
|
||
.logo {
|
||
height: 200rpx;
|
||
width: 200rpx;
|
||
margin-top: 200rpx;
|
||
margin-left: auto;
|
||
margin-right: auto;
|
||
margin-bottom: 50rpx;
|
||
}
|
||
|
||
.text-area {
|
||
display: flex;
|
||
justify-content: center;
|
||
}
|
||
|
||
.title {
|
||
font-size: 36rpx;
|
||
color: #8f8f94;
|
||
} */
|
||
</style>
|