【后台管理】-- 热门搜索

admin/src/api/setting/search.ts

@@ -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 })
+}
+
+

admin/src/views/channel/wx_oa/menu.vue

@@ -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>
 

admin/src/views/setting/search/index.vue

@@ -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>

admin/src/views/setting/user/login_register.vue

@@ -126,29 +126,37 @@ const rules = reactive<FormRules>({
     openOtherAuth: [{ required: true, trigger: "blur" }],
 });
 
-// 获取备案信息
+// 获取登录注册数据
 const getData = async () => {
-    const data = await getLogin();
+    try {
-    for (const key in formData) {
+        const data = await getLogin();
-        //@ts-ignore
+        for (const key in formData) {
-        formData[key] = data[key];
+            //@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({
+    try {
-        ...formData,
+        await setLogin({
-        loginWay: loginWay.length == 2 ? `${loginWay[0]},${loginWay[1]}` : loginWay,
+            ...formData,
-        autoLoginAuth: autoLoginAuth.length == 2 ? `${autoLoginAuth[0]},${autoLoginAuth[1]}` : autoLoginAuth,
+            loginWay: loginWay.length == 2 ? `${loginWay[0]},${loginWay[1]}` : loginWay,
+            autoLoginAuth: autoLoginAuth.length == 2 ? `${autoLoginAuth[0]},${autoLoginAuth[1]}` : autoLoginAuth,
 
-    });
+        });
-    feedback.msgSuccess("操作成功");
+        feedback.msgSuccess("操作成功");
-    getData();
+        getData();
+    } catch (error) {
+        console.log('保存=>', error)
+    }
 };
 
 getData();

admin/src/views/setting/user/setup.vue

@@ -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()
+    try {
-    for (const key in formData) {
+        const data = await getUserSetup()
-        //@ts-ignore
+        for (const key in formData) {
-        formData[key] = data[key]
+            //@ts-ignore
+            formData[key] = data[key]
+        }
+    } catch (error) {
+        console.log('获取=>', error)
     }
 }
 
-// 设置备案信息
+// 保存用户设置数据
 const handleSubmit = async () => {
-    await setUserSetup(formData)
+    try {
-    feedback.msgSuccess('操作成功')
+        await setUserSetup(formData)
-    getData()
+        feedback.msgSuccess('操作成功')
+        getData()
+    } catch (error) {
+        console.log('保存=>', error)
+    }
 }
 
 getData()