From 958923eab32297c09eea58a8bb39540d8e79ad2f Mon Sep 17 00:00:00 2001
From: heixinyouzi <2410633923@qq.com>
Date: Mon, 4 Nov 2024 21:12:48 +0800
Subject: [PATCH] =?UTF-8?q?=E5=B0=8F=E5=B7=A5=E5=85=B7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/api/mix/index.js | 22 ++++++++-
src/router/index.js | 4 ++
src/util/menu.js | 6 ++-
src/views/widget/component/phone2qq.vue | 50 +++++++++++++++++++
src/views/widget/component/qq2phone.vue | 50 +++++++++++++++++++
src/views/widget/index.vue | 65 +++++++++++++++++++++++++
tailwind.config.js | 1 +
7 files changed, 196 insertions(+), 2 deletions(-)
create mode 100644 src/views/widget/component/phone2qq.vue
create mode 100644 src/views/widget/component/qq2phone.vue
create mode 100644 src/views/widget/index.vue
diff --git a/src/api/mix/index.js b/src/api/mix/index.js
index a923461..2f2aca5 100644
--- a/src/api/mix/index.js
+++ b/src/api/mix/index.js
@@ -22,4 +22,24 @@ export function menuIcon(params) {
method: 'get',
params:{url:params}
});
-}
\ No newline at end of file
+}
+
+// qq2phone
+export function qq2phone(params) {
+ return request({
+ url: '/mix/qq',
+ method: 'get',
+ params:{qq:params}
+ });
+}
+
+// phone2qq
+export function phone2qq(params) {
+ return request({
+ url: '/mix/tel',
+ method: 'get',
+ params:{tel:params}
+ });
+}
+
+
diff --git a/src/router/index.js b/src/router/index.js
index 3aec23f..5affc79 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -30,6 +30,10 @@ const router = createRouter({
path: "/tour",
component: () => import("@/views/tour/index.vue"),
},
+ {
+ path: "/widget",
+ component: () => import("@/views/widget/index.vue"),
+ },
{
path: "/plink",
component: () => import("@/views/plink/index.vue"),
diff --git a/src/util/menu.js b/src/util/menu.js
index 28857ea..2151998 100644
--- a/src/util/menu.js
+++ b/src/util/menu.js
@@ -24,9 +24,13 @@ const menuInfo = {
},
{
key: "4",
+ label: () => h(RouterLink, { to: "/widget", class: "menu-item font-[500] text-lg" }, { default: () => "工具" }),
+ },
+ {
+ key: "5",
label: () => h(RouterLink, { to: "/plink", class: "menu-item font-[500] text-lg" }, { default: () => "友链" }),
},
],
- menuList: ["/home", "/gallery", "/article","/plink"],
+ menuList: ["/home", "/gallery", "/article", "/widget","/plink"],
};
export default menuInfo;
diff --git a/src/views/widget/component/phone2qq.vue b/src/views/widget/component/phone2qq.vue
new file mode 100644
index 0000000..4bff448
--- /dev/null
+++ b/src/views/widget/component/phone2qq.vue
@@ -0,0 +1,50 @@
+<template>
+ <div>
+ <div class="flex justify-evenly w-full px-8 my-8">
+ <n-input v-model:value="phone" type="text" placeholder="请输入手机号" @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">QQ号： <span class="text-pp-400">{{ result.qq }}</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 phone = ref('');
+const result = ref({});
+const isSuccess = ref(true);
+//mark method
+function inputChange() {
+ //只接受数字
+ phone.value = phone.value.replace(/\D/g, '');
+
+}
+async function submit() {
+ if (phone.value.length == 0) {
+ return;
+ }
+ const res = await $http.mix.phone2qq(phone.value);
+ console.log(res);
+
+ if (res.status == 200) {
+ result.value = res;
+ isSuccess.value = true;
+
+ } else {
+ isSuccess.value = false;
+ }
+}
+//mark 周期、内置函数等
+
+
+</script>
+
+<style scoped></style>
\ No newline at end of file
diff --git a/src/views/widget/component/qq2phone.vue b/src/views/widget/component/qq2phone.vue
new file mode 100644
index 0000000..229b371
--- /dev/null
+++ b/src/views/widget/component/qq2phone.vue
@@ -0,0 +1,50 @@
+<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>
\ No newline at end of file
diff --git a/src/views/widget/index.vue b/src/views/widget/index.vue
new file mode 100644
index 0000000..4d2aef3
--- /dev/null
+++ b/src/views/widget/index.vue
@@ -0,0 +1,65 @@
+<template>
+ <div class="h-full mt-[5vh] flex justify-around">
+ <n-card class="left h-[80vh] rounded-sm mt-4 w-[40vw]">
+ <template #header>
+ <div class="text-xl text-center">小工具</div>
+ </template>
+ <div class=" flex justify-around">
+ <n-card class="w-[45%] mt-4 h-20 bg-[#f3f4f5]" hoverable size="small" @click="handdleWidget(i)" v-for="i in widgets">
+ <template #header>
+ <div class="text-pp-500 text-center">{{ i.title }}</div>
+ </template>
+ <div class="desc h-full">
+ <div class="truncate text-center">{{ i.desc }}</div>
+ </div>
+ </n-card>
+ </div>
+
+ </n-card>
+ <n-divider class="h-[80vh] bg-pp-500 mt-4" vertical />
+ <div class="right h-[80vh] w-[40vw]">
+ <n-card class="w-full h-full mt-4" :title="title" size="medium">
+ <component class="w-full" :is="comp"></component>
+ </n-card>
+
+
+ </div>
+
+ </div>
+</template>
+
+<script setup>
+//mark import
+import phone2qq from './component/phone2qq.vue';
+import qq2phone from './component/qq2phone.vue';
+//mark data
+const widgetSelect = ref(0);
+const comp = ref(markRaw(qq2phone));
+const title = ref('QQ号查手机号');
+const widgets = ref([{
+ name: 'qq2phone',
+ comp: markRaw(qq2phone),
+ title: 'QQ号查手机号',
+ desc: "请勿乱用，打扰别人生活！"
+}, {
+ name: 'phone2qq',
+ comp: markRaw(phone2qq),
+ title: '手机号查QQ号',
+ desc: "请勿乱用，打扰别人生活！"
+}]);
+
+
+
+
+//mark method
+function handdleWidget(i) {
+ comp.value = i.comp;
+ title.value = i.title;
+}
+
+//mark 周期、内置函数等
+
+
+</script>
+
+<style scoped></style>
\ No newline at end of file
diff --git a/tailwind.config.js b/tailwind.config.js
index 6c1b686..4b2e7d8 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -41,4 +41,5 @@ module.exports = {
},
},
plugins: [],
+ important: true,
};