Zlpt_Portal/src/layout/header.vue

<script setup lang="ts">
    import $bus from "@/utils/bus";
    import { mainStore } from "store/main";
    import { ElMessage, ElMessageBox } from "element-plus";
    const store = mainStore();

    const route = useRoute();
    const router = useRouter();

    // 是否显示退出登录
    const isShowLogout = computed(() => {
        return store.token;
    });

    const placeholderText = ref("请输入关键字");

    // 退出登录
    const handlerLogout = () => {
        ElMessageBox.confirm("是否确定退出登录", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
        })
            .then(() => {
                router.push("/login");
                store.cleanUpToken("");
                ElMessage({
                    type: "success",
                    message: "已退出登录",
                });
            })
            .catch(() => {
                ElMessage({
                    type: "info",
                    message: "已取消",
                });
            });
    };

    // 搜索查询绑定值
    const keywordIptValue = ref("");

    // 输入框 dom
    const inputRef: any = ref(null);

    // 输入框下方历史搜索记录
    // const searchHistoryList = computed(() => {
    //     return store.searchHistoryList.slice(0, 1)
    // })

    // 搜索按钮
    const searchKeywordBtn = () => {
        /* 去除空格 */
        keywordIptValue.value = keywordIptValue.value.replace(/\s*/g, "");

        store.addHistoryRecord(keywordIptValue.value);
        if (route.path == "/equipList") {
            $bus.emit("search", keywordIptValue.value);
        } else {
            router.push({
                name: "equipList",
                state: { keyWord: keywordIptValue.value },
            });
        }
    };

    // 点击下方搜索记录时
    const handleHistory = (hisValue: any) => {
        keywordIptValue.value = hisValue;
        searchKeywordBtn();
        // inputRef.value.focus()
    };
    //页面刷新回显模糊搜索词
    $bus.on("callBackText", (val) => {
        nextTick(() => {
            keywordIptValue.value = val;
        });
    });
</script>

<template>
    <!-- 头部个人信息  收藏夹  手机版等图标 -->
    <div class="header-container">
        <div class="header-user-info">
            <div class="header-box wapper">
                <div class="header-item">
                    <span v-if="!isShowLogout">
                        <a class="a-border-none" @click="$router.push('/login')"
                            >登录</a
                        >
                        <span style="margin: 0 3px">/</span>
                        <a @click="$router.push('/register')">注册</a>
                    </span>
                    <span v-else>
                        <a @click="handlerLogout">退出登录</a>
                    </span>
                </div>
                <div class="header-item">
                    <a @click="$router.push({ name: 'myuser' })">个人中心</a>
                </div>
                <div class="header-item">
                    <img src="../assets/img/home/star.png" alt="" />
                    <a @click="$router.push('/collect')">收藏夹</a>
                </div>
                <div class="header-item last-item">
                    <img src="../assets/img/home/phone.png" alt="" />
                    <a class="a-border-none">手机版</a>

                    <!-- 二维码弹框 -->
                    <div class="qr-code">
                        <el-image
                            src="https://img.xjishu.com/img/zl/2017/10/212257159687020.gif"
                            fit="cover" />

                        扫二维码查看xxx
                    </div>
                </div>
            </div>
        </div>

        <!-- 中间logo 部分 -->

        <div class="logo-ipt-container wapper">
            <img
                src="@/assets/img/home//机械化装备平台.png"
                alt="首页"
                title="首页"
                @click="$router.push('/home')" />

            <input
                :placeholder="placeholderText"
                type="text"
                v-model.trim="keywordIptValue"
                @keydown.enter="searchKeywordBtn"
                ref="inputRef"
                @focus="placeholderText = ''"
                @blur="placeholderText = '请输入关键字'" />
            <button class="search-btn" @click="searchKeywordBtn">搜索</button>

            <div class="ipt-down">
                <a
                    v-for="item in store.searchHistoryList.slice(0, 4)"
                    :key="item"
                    @click="handleHistory(item)"
                    class="history-box">
                    {{ item }}
                </a>
            </div>
        </div>
    </div>
</template>

<style lang="scss" scoped>
    .header-container {
        position: sticky;
        top: 0;
        left: 0;
        z-index: 999;

        .header-user-info {
            background-color: #f5f5f5;
        }

        /* 头部个人信息部分 */
        .header-box {
            height: 37px;
            display: flex;
            align-items: center;
            justify-content: flex-end;
        }

        .header-item {
            margin-left: 15px;
            height: 37px;
            display: flex;
            align-items: center;
            padding-left: 18px;
            color: #6d6d6d;
            font-size: 14px;
            cursor: pointer;

            img {
                vertical-align: middle;
            }

            a {
                border-right: 1px solid #666655;
                padding-right: 33px;
            }

            a:hover {
                color: #3cb4a6;
            }

            .a-border-none {
                border: none;
                padding: 0;
            }
        }

        .last-item {
            position: relative;
            z-index: 998;
            .qr-code {
                position: absolute;
                left: -70px;
                top: -140px;
                width: 140px;
                height: 140px;
                background-color: #fff;
                visibility: hidden;
                padding: 10px;
                box-shadow: 0 2px 2px 2px #ccc;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                color: #333;
                .el-image {
                    width: 120px;
                    height: 120px;
                    margin-bottom: 5px;
                }
            }
        }

        .last-item:hover > .qr-code {
            visibility: visible;
            transform: translateY(177px);
            transition: all 0.6s;
        }

        /* 中间logo  搜索框部分 */
        .logo-ipt-container {
            position: relative;
            display: flex;
            background-color: #eeeff6;
            padding: 30px 0;

            img {
                width: 240px;
                height: 58px;
                cursor: pointer;
            }

            input {
                width: 700px;
                height: 45px;
                border: 1px solid #3cb4a6;
                border-radius: 45px;
                margin-left: 70px;
                line-height: 45px;
                color: #333;
                text-shadow: 0 0 0 #333;
                padding-left: 30px;
            }

            input:focus {
                outline: 1px solid #3cb4a6;
            }

            input::-webkit-input-placeholder {
                color: #949494;
            }
            .search-btn {
                width: 100px;
                height: 39px;
                transform: translate(-110px, 4px);
                border-radius: 39px;
                background: linear-gradient(132deg, #22ab9b 0%, #0d7462 100%);
                box-shadow: 0px 2px 4px 0px rgba(20, 175, 255, 0.5);
                border: none;
                color: #fff;
                cursor: pointer;
                font-size: 18px;
            }

            .ipt-down {
                position: absolute;
                bottom: 15px;
                left: 22%;
                overflow: hidden;

                a {
                    max-width: 140px;
                    padding: 0 10px;
                    color: #727272;
                    font-size: 14px;
                    cursor: pointer;
                    overflow: hidden;
                    display: inline-block;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                }
            }
        }
    }
</style>