yeyin/tools-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: 反馈中心，工具随机推荐、广告开关

Browse Source
This commit is contained in:
osiris
2023-12-12 10:36:09 +08:00
parent 55083da9f5
commit 19bf468fb5
7 changed files with 137 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/api/tools/index.ts
+8 -3
View File
@@ -4,7 +4,8 @@ import request from '@/utils/request'
import type {
ToolsReqData,
ToolsResponseData,
ToolCateResponseData
ToolCateResponseData,
ToolRecommendResponseData
} from './type'
//项目用户相关的请求地址
@@ -13,11 +14,15 @@ enum API {
//获取tools
GET_TOOLS = '/tools',
//获取tool cate
GET_TOOL_CATES = '/tool/cates'
GET_TOOL_CATES = '/tool/cates',
//获取推荐
GET_TOOL_RECOMMEND = '/tool/recommends',
}
//获取tools
export const getTools = (data: ToolsReqData) => request.get<any, ToolsResponseData>(API.GET_TOOLS, {
params: data
})
//获取tool cate
export const getToolCate = () => request.get<any, ToolCateResponseData>(API.GET_TOOL_CATES)
export const getToolCate = () => request.get<any, ToolCateResponseData>(API.GET_TOOL_CATES)
//获取推荐
export const getToolRecommend = () => request.get<any, ToolRecommendResponseData>(API.GET_TOOL_RECOMMEND)
src/api/tools/type.ts
+5
View File
@@ -35,4 +35,9 @@ export interface ToolCateResponseData extends ResponseData {
data: ToolCate[]
}
//tools recommend response
export interface ToolRecommendResponseData extends ResponseData {
data: ToolsInfo[]
}
src/components/Layout/Right/Right.vue
+61 -24
View File
@@ -1,44 +1,81 @@
<script setup lang="ts">
import { Tools } from '@element-plus/icons-vue'
import { reactive } from 'vue';
import { Message } from '@element-plus/icons-vue'
import { reactive, onMounted } from 'vue';
import { useToolsStore } from '@/store/modules/tools'
const info = reactive({
hotTools: [
feedbackUrl: import.meta.env.VITE_FEEDBACK_URL || 'javascript:void(0)',
advShow: import.meta.env.VITE_ADV_SHOW || 'false',
advList: [
{
id: 1,
value: '时间戳转换'
img: 'https://img.jutuike.com/taokeout/banner/ele_hongbao_banner.png',
url: 'https://baseran2.oss-cn-shenzhen.aliyuncs.com/toools-web/adv/elm_adv.jpeg'
},
{
id: 1,
value: 'MD5在线加密'
},
{
id: 1,
value: 'Json在线转换'
},
{
id: 1,
value: '正则测试工具'
},
{
id: 1,
value: '在线图片处理'
img: 'https://s3plus.sankuai.com/v1/mss_5017c592a8a946d2a54eb62a76ba299c/nebulafile/910fa09a310aadd229e90e4ad872d86e.png',
url: 'https://baseran2.oss-cn-shenzhen.aliyuncs.com/toools-web/adv/meituan_adv.png'
}
]
})
//store
const toolsStore = useToolsStore()
//获取随机推荐
const getToolRecommend = async () => {
try {
await toolsStore.getToolRecommend()
} catch (e) {
console.log(e)
}
}
//点击走马灯
const clickCarousel = (url: string) => {
let w = window.open('')
w?.document.write(`<!DOCTYPE html><html><body ><img src='${url}'/></body></html>`)
}
//反馈
const feedback = () => {
window.open(info.feedbackUrl)
}
onMounted(() => {
getToolRecommend()
})
</script>
<template>
<div>
<!-- feedback -->
<div class="flex flex-col text-center mt-3 border-solid rounded border-gray border p-3 c-xs:mr-3 c-xs:ml-3">
<div @click="feedback()" class="text-2xl flex items-center justify-center cursor-pointer">
<el-icon><Message /></el-icon>
<div class="ml-2">
建议反馈
</div>
</div>
</div>
<!-- adv -->
<div class="mt-3" v-if="info.advShow == 'true'">
<el-carousel
height="130px"
:autoplay="false"
>
<el-carousel-item v-for="(item, index) in info.advList" :key="index" @click="clickCarousel(item.url)">
<el-image :src="item.img" fit="fill" class="h-full w-full"></el-image>
</el-carousel-item>
</el-carousel>
</div>
<!-- hot tools -->
<div class="mt-3 border-solid rounded border-gray border p-3 c-xs:mr-3 c-xs:ml-3">
<div class="text-xl text-gray-400 font-bold">热门工具</div>
<div class="text-xl text-gray-400 font-bold">随机推荐</div>
<ul class="mt-3">
<li class="flex items-center hover:bg-gray-200 p-1 rounded" v-for="(item, index) in info.hotTools" :key="index">
<RouterLink :to="item.url" class="flex items-center hover:bg-gray-200 p-1 rounded" v-for="(item, index) in toolsStore.recommends" :key="index">
<el-icon class="mr-1"><Tools /></el-icon>
<div>{{ item.value }}</div>
</li>
<div>{{ item.title }}</div>
</RouterLink>
</ul>
</div>
</div>
src/router/index.ts
+3 -2
View File
@@ -1,10 +1,11 @@
//通过vue-router插件实现模板路由配置
import { createRouter, createWebHashHistory } from 'vue-router'
import { createRouter, createWebHistory } from 'vue-router'
import { constantRoute } from './router'
//创建路由器
const router = createRouter({
//路由模式hash
history: createWebHashHistory(),
// history: createWebHashHistory(),
history: createWebHistory(),
routes: constantRoute,
//滚动行为
scrollBehavior() {
src/store/modules/tools.ts
+15 -4
View File
@@ -1,6 +1,6 @@
//创建tools相关的小工具
import { defineStore } from 'pinia'
import { getTools, getToolCate} from '@/api/tools'
import { getTools, getToolCate, getToolRecommend} from '@/api/tools'
import { getIp } from '@/api/ip'
import type { ToolsReqData, ToolsInfo, ToolCate } from '@/api/tools/type'
import type { IpReqData, IpInfo } from '@/api/ip/type'
@@ -10,6 +10,7 @@ export const useToolsStore = defineStore('tools', {
state: () => ({
list: [] as ToolsInfo[],
cates: [] as ToolCate[],
recommends: [] as ToolsInfo[],
ipData: {} as IpInfo,
}),
//方法
@@ -36,15 +37,25 @@ export const useToolsStore = defineStore('tools', {
return Promise.reject(new Error(result.message))
}
},
//获取推荐
async getToolRecommend() {
const result: any = await getToolRecommend()
if (result.code == 200) {
this.recommends = result.data
return result.message
} else {
return Promise.reject(new Error(result.message))
}
},
//获取ip
async getIp(data: IpReqData) {
const result: any = await getIp(data)
if (result.code == 200) {
this.ipData = result.data
return result.message
} else {
return Promise.reject(new Error(result.message))
}
} else {
return Promise.reject(new Error(result.message))
}
}
}
})