377 lines
10 KiB
Vue
377 lines
10 KiB
Vue
<script setup lang="ts">
|
|
import $bus from '@/utils/bus'
|
|
import { mainStore } from 'store/main'
|
|
import { ElMessage, ElMessageBox } from 'element-plus'
|
|
const store: any = mainStore()
|
|
|
|
const route = useRoute()
|
|
const router = useRouter()
|
|
const isRolesSelect = ref<boolean>(false)
|
|
const rolesName = ref<string>('出租方')
|
|
|
|
// 是否显示退出登录
|
|
const isShowLogout = computed(() => {
|
|
return store.token
|
|
})
|
|
|
|
const placeholderText = ref('请输入关键字')
|
|
|
|
// 退出登录
|
|
const handlerLogout = () => {
|
|
ElMessageBox.confirm('是否确定退出登录', {
|
|
confirmButtonText: '确定',
|
|
cancelButtonText: '取消',
|
|
type: 'warning',
|
|
})
|
|
.then(() => {
|
|
router.push('/login')
|
|
store.cleanUpToken('')
|
|
store.clearUserInfo('')
|
|
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
|
|
})
|
|
})
|
|
|
|
// 角色切换按钮
|
|
const onRolesCheck = () => {
|
|
isRolesSelect.value = true
|
|
}
|
|
// 选择角色
|
|
const onSelectRoles = (type: number) => {
|
|
if (type === 1) {
|
|
rolesName.value = '出租方'
|
|
} else {
|
|
rolesName.value = '承租方'
|
|
}
|
|
isRolesSelect.value = false
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<!-- 头部个人信息 收藏夹 手机版等图标 -->
|
|
<div class="header-container">
|
|
<div class="header-user-info">
|
|
<div class="header-box wapper">
|
|
<div class="header-item">
|
|
<!-- <img src="../assets/img/home/star.png" alt="" /> -->
|
|
<a class="user-name">{{ store.userInfo.nickName }}</a>
|
|
</div>
|
|
<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 style="padding: 0 20px 0 0" @click="$router.push('/register')">注册</a>
|
|
</span>
|
|
<span v-else>
|
|
<a @click="handlerLogout">退出登录</a>
|
|
</span>
|
|
</div>
|
|
<div class="header-item roles-check" @click="onRolesCheck">
|
|
<!-- <img src="../assets/img/home/star.png" alt="" /> -->
|
|
<a style="display: flex; justify-content: center; padding-right: 10px">
|
|
{{ rolesName }}
|
|
<el-icon style="margin-left: 10px"><ArrowDownBold /></el-icon>
|
|
</a>
|
|
|
|
<div class="select-list" v-if="isRolesSelect">
|
|
<div
|
|
style="border-top-left-radius: 6px; border-top-right-radius: 6px"
|
|
@click.stop="onSelectRoles(1)"
|
|
>
|
|
出租方
|
|
</div>
|
|
<div
|
|
style="border-bottom-left-radius: 6px; border-bottom-right-radius: 6px"
|
|
@click.stop="onSelectRoles(2)"
|
|
>
|
|
承租方
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="header-item">
|
|
<a @click="$router.push({ name: 'myuser' })">个人中心</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 {
|
|
height: 37px;
|
|
display: flex;
|
|
align-items: center;
|
|
color: #6d6d6d;
|
|
font-size: 14px;
|
|
cursor: pointer;
|
|
|
|
.user-name:hover {
|
|
color: #6d6d6d;
|
|
}
|
|
|
|
img {
|
|
vertical-align: middle;
|
|
}
|
|
|
|
a {
|
|
padding: 0 20px;
|
|
border-right: 1px solid #666655;
|
|
}
|
|
|
|
a:hover {
|
|
color: #3cb4a6;
|
|
}
|
|
|
|
.a-border-none {
|
|
border: none;
|
|
padding: 0;
|
|
}
|
|
}
|
|
|
|
.roles-check {
|
|
position: relative;
|
|
}
|
|
.roles-check .select-list {
|
|
height: 50px;
|
|
// display: none;
|
|
position: absolute;
|
|
left: 1%;
|
|
bottom: -46px;
|
|
width: 98%;
|
|
background-color: #fff;
|
|
border-radius: 6px;
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
|
|
z-index: 999;
|
|
transition: all 1s linear;
|
|
|
|
div {
|
|
height: 25px;
|
|
font-size: 14px;
|
|
line-height: 25px;
|
|
text-align: center;
|
|
letter-spacing: 1px;
|
|
}
|
|
|
|
div:hover {
|
|
color: #fff;
|
|
background-color: #1967d2;
|
|
}
|
|
}
|
|
|
|
// .roles-check:hover .select-list {
|
|
// display: block;
|
|
// }
|
|
|
|
.last-item {
|
|
position: relative;
|
|
z-index: 998;
|
|
padding-left: 20px;
|
|
.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>
|