【后台管理】-- 热门搜索
This commit is contained in:
linjinyuan
parent
e31942371a
commit
d330a40296
|
|
@ -0,0 +1,29 @@
|
|||
import request from '@/utils/request'
|
||||
|
||||
/**
|
||||
* @return { Promise }
|
||||
* @description 获取热门搜索数据
|
||||
*/
|
||||
export function getSearch() {
|
||||
return request.get({ url: '/setting/search/detail' })
|
||||
}
|
||||
|
||||
export interface List {
|
||||
name: string // 搜索关键字
|
||||
sort: number // 热门搜索排序
|
||||
}
|
||||
|
||||
export interface Search {
|
||||
isHotSearch: number // 是否开启搜索0/1
|
||||
list: List[]
|
||||
}
|
||||
/**
|
||||
* @return { Promise }
|
||||
* @param { Search } Search
|
||||
* @description 设置热门搜索
|
||||
*/
|
||||
export function setSearch(params: Search) {
|
||||
return request.post({ url: '/setting/search/save', params })
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -12,13 +12,13 @@
|
|||
</el-card>
|
||||
|
||||
<footer-btns v-perms="['channel:h5:save']">
|
||||
<el-button type="primary" @click="handelSave">保存</el-button>
|
||||
<el-button type="primary" @click="">保存</el-button>
|
||||
</footer-btns>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
||||
import OaPhone from "./menu_component/oa-phone.vue"
|
||||
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,176 @@
|
|||
<template>
|
||||
<div class="hot-search">
|
||||
<el-card class="!border-none" shadow="never">
|
||||
<el-form ref="formRef" :model="formData" label-width="100px">
|
||||
<el-form-item label="功能状态" style="margin-bottom: 0;">
|
||||
<div>
|
||||
<el-radio-group v-model="formData.isHotSearch">
|
||||
<el-radio :label="1">开启</el-radio>
|
||||
<el-radio :label="0">关闭</el-radio>
|
||||
</el-radio-group>
|
||||
|
||||
<div class="form-tips">默认开始，关闭则前端不显示该功能</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-card>
|
||||
|
||||
<el-card class="!border-none mt-4" shadow="never">
|
||||
<div class="flex">
|
||||
<div class="flex-1 w-3/5">
|
||||
<el-button type="primary" class="mb-4" @click="handleAdd">添加</el-button>
|
||||
<el-table size="large" :data="formData.list">
|
||||
<el-table-column label="ID" prop="id" width="120">
|
||||
<template #default="{ $index }">
|
||||
{{ $index }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="关键词" prop="describe" min-width="160">
|
||||
<template #default="{ row }">
|
||||
<el-input v-model="row.name" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="排序" prop="describe" min-width="160">
|
||||
<template #default="{ row }">
|
||||
<el-input v-model="row.sort" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" min-width="80" fixed="right">
|
||||
<template #default="{ row, $index }">
|
||||
<el-button v-perms="['setting:storage:edit']" type="danger" link
|
||||
@click="handleDel($index)">
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
|
||||
<div class="w-2/5 hot-search-phone">
|
||||
<span class="mb-4">- 热搜预览图 -</span>
|
||||
<div class="hot-search-phone-content">
|
||||
<!-- 搜索框 -->
|
||||
<div class="search-com">
|
||||
<div class="search-con flex items-center px-[15px]">
|
||||
<icon name="el-icon-Search" :size="17" />
|
||||
<span class="ml-[5px]">请输入关键词搜索</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 热门搜索 -->
|
||||
<div class="hot-search-title">热门搜索</div>
|
||||
<div class="hot-search-text">
|
||||
<span v-for="text in list">{{ text.name }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<footer-btns v-perms="['setting:website:save']">
|
||||
<el-button type="primary" @click="handleSave">保存</el-button>
|
||||
</footer-btns>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { getSearch, setSearch } from "@/api/setting/search";
|
||||
import type { Search } from "@/api/setting/search";
|
||||
import feedback from "@/utils/feedback";
|
||||
|
||||
const formData = reactive<Search>({
|
||||
isHotSearch: 1,
|
||||
list: [
|
||||
{
|
||||
name: '搜索引擎',
|
||||
sort: 2
|
||||
},
|
||||
{
|
||||
name: '卧槽',
|
||||
sort: 1
|
||||
}
|
||||
]
|
||||
})
|
||||
|
||||
const list = computed(() => {
|
||||
return formData.list.sort((v1, v2) => v1.sort - v2.sort)
|
||||
})
|
||||
|
||||
// 获取登录注册数据
|
||||
const getData = async () => {
|
||||
try {
|
||||
const data = await getSearch();
|
||||
for (const key in formData) {
|
||||
//@ts-ignore
|
||||
formData[key] = data[key];
|
||||
}
|
||||
} catch (error) {
|
||||
console.log('获取=>', error)
|
||||
}
|
||||
};
|
||||
|
||||
const handleAdd = () => {
|
||||
formData.list.push({
|
||||
name: '关键字',
|
||||
sort: 0
|
||||
})
|
||||
}
|
||||
|
||||
const handleDel = (index: number) => {
|
||||
formData.list.splice(index, 1)
|
||||
}
|
||||
|
||||
const handleSave = async () => {
|
||||
try {
|
||||
await setSearch(formData)
|
||||
feedback.msgSuccess("操作成功");
|
||||
getData()
|
||||
} catch (error) {
|
||||
console.log('保存=>', error)
|
||||
}
|
||||
}
|
||||
|
||||
getData()
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.hot-search {
|
||||
.hot-search-phone {
|
||||
margin-left: 20px;
|
||||
@apply flex flex-col items-center;
|
||||
|
||||
&-content {
|
||||
width: 280px;
|
||||
height: 494px;
|
||||
padding: 12px 12px;
|
||||
border-radius: 10px;
|
||||
border: 1px solid #E6E6E6;
|
||||
|
||||
.search-com {
|
||||
.search-con {
|
||||
height: 100%;
|
||||
height: 36px;
|
||||
border-radius: 36px;
|
||||
background: #f4f4f4;
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
|
||||
.hot-search-title {
|
||||
padding: 10px 0;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.hot-search-text {
|
||||
span {
|
||||
font-size: 12px;
|
||||
border-radius: 100px;
|
||||
padding: 5px 10px;
|
||||
margin: 0 6px 6px 0;
|
||||
display: inline-block;
|
||||
background-color: #E6E6E6;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -126,29 +126,37 @@ const rules = reactive<FormRules>({
|
|||
openOtherAuth: [{ required: true, trigger: "blur" }],
|
||||
});
|
||||
|
||||
// 获取备案信息
|
||||
// 获取登录注册数据
|
||||
const getData = async () => {
|
||||
const data = await getLogin();
|
||||
for (const key in formData) {
|
||||
//@ts-ignore
|
||||
formData[key] = data[key];
|
||||
try {
|
||||
const data = await getLogin();
|
||||
for (const key in formData) {
|
||||
//@ts-ignore
|
||||
formData[key] = data[key];
|
||||
}
|
||||
} catch (error) {
|
||||
console.log('获取=>', error)
|
||||
}
|
||||
};
|
||||
|
||||
// 设置备案信息
|
||||
// 保存登录注册数据
|
||||
const handleSubmit = async () => {
|
||||
const loginWay = formData.loginWay.join('')
|
||||
const autoLoginAuth = formData.autoLoginAuth.join('')
|
||||
|
||||
await formRef.value?.validate();
|
||||
await setLogin({
|
||||
...formData,
|
||||
loginWay: loginWay.length == 2 ? `${loginWay[0]},${loginWay[1]}` : loginWay,
|
||||
autoLoginAuth: autoLoginAuth.length == 2 ? `${autoLoginAuth[0]},${autoLoginAuth[1]}` : autoLoginAuth,
|
||||
try {
|
||||
await setLogin({
|
||||
...formData,
|
||||
loginWay: loginWay.length == 2 ? `${loginWay[0]},${loginWay[1]}` : loginWay,
|
||||
autoLoginAuth: autoLoginAuth.length == 2 ? `${autoLoginAuth[0]},${autoLoginAuth[1]}` : autoLoginAuth,
|
||||
|
||||
});
|
||||
feedback.msgSuccess("操作成功");
|
||||
getData();
|
||||
});
|
||||
feedback.msgSuccess("操作成功");
|
||||
getData();
|
||||
} catch (error) {
|
||||
console.log('保存=>', error)
|
||||
}
|
||||
};
|
||||
|
||||
getData();
|
||||
|
|
|
|||
|
|
@ -26,27 +26,35 @@
|
|||
<script lang="ts" setup>
|
||||
import { getUserSetup, setUserSetup } from '@/api/setting/user'
|
||||
import feedback from '@/utils/feedback'
|
||||
import type { FormInstance } from 'element-plus'
|
||||
// import type { FormInstance } from 'element-plus'
|
||||
|
||||
// 表单数据
|
||||
const formData = reactive({
|
||||
defaultAvatar: '', // 用户默认头像
|
||||
})
|
||||
|
||||
// 获取用户设置信息
|
||||
// 获取用户设置数据
|
||||
const getData = async () => {
|
||||
const data = await getUserSetup()
|
||||
for (const key in formData) {
|
||||
//@ts-ignore
|
||||
formData[key] = data[key]
|
||||
try {
|
||||
const data = await getUserSetup()
|
||||
for (const key in formData) {
|
||||
//@ts-ignore
|
||||
formData[key] = data[key]
|
||||
}
|
||||
} catch (error) {
|
||||
console.log('获取=>', error)
|
||||
}
|
||||
}
|
||||
|
||||
// 设置备案信息
|
||||
// 保存用户设置数据
|
||||
const handleSubmit = async () => {
|
||||
await setUserSetup(formData)
|
||||
feedback.msgSuccess('操作成功')
|
||||
getData()
|
||||
try {
|
||||
await setUserSetup(formData)
|
||||
feedback.msgSuccess('操作成功')
|
||||
getData()
|
||||
} catch (error) {
|
||||
console.log('保存=>', error)
|
||||
}
|
||||
}
|
||||
|
||||
getData()
|
||||
|
|
|
|||
Loading…
Reference in New Issue