blog/src/views/widget/component/qq2phone.vue
2024-11-04 21:12:48 +08:00

50 lines
1.3 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<div>
<div class="flex justify-evenly w-full px-8 my-8">
<n-input v-model:value="qq" type="text" placeholder="请输入qq号" @keyup.enter="submit" @input="inputChange"></n-input>
<n-button class="w-32 ml-8" type="primary" size="medium" @click="submit">确认</n-button>
</div>
<div class="px-8" v-if="isSuccess">
<div class="mb-2">手机号 <span class="text-pp-400">{{ result.phone }}</span></div>
<div class="diqu">手机号地区 <span class="text-pp-400">{{ result.phonediqu }}</span></div>
</div>
<div class=" text-center text-[red]" v-else>
该qq号不存在或未绑定手机号
</div>
</div>
</template>
<script setup>
//mark import
//mark data
const qq = ref('');
const result = ref({});
const isSuccess = ref(true);
//mark method
function inputChange() {
//只接受数字
qq.value = qq.value.replace(/\D/g, '');
}
async function submit() {
if (qq.value.length == 0) {
return;
}
const res = await $http.mix.qq2phone(qq.value);
console.log(res);
if (res.status == 200) {
result.value = res;
isSuccess.value = true;
} else {
isSuccess.value = false;
}
}
//mark 周期、内置函数等
</script>
<style scoped></style>