690 lines
20 KiB
Vue
690 lines
20 KiB
Vue
<script setup lang="ts">
|
|
import $bus from '@/utils/bus'
|
|
import { mainStore } from 'store/main'
|
|
import { useStore } from 'store/user'
|
|
import { cartStore } from 'store/cart'
|
|
import { ElMessage, ElMessageBox } from 'element-plus'
|
|
import { getHotSearchListApi, getBookCarDetailsApi } from 'http/api/home/index'
|
|
import userClass from '../hooks/userClass'
|
|
const { getCompanyList } = userClass()
|
|
import imgSrc from '@/assets/img/logo.png'
|
|
const store: any = mainStore()
|
|
const searchTypeName = ref('装备')
|
|
const userStore = useStore()
|
|
const cart = cartStore()
|
|
const isType: any = localStorage.getItem('rolesType')
|
|
userStore.editMenuList(1)
|
|
const route = useRoute()
|
|
const router = useRouter()
|
|
const isRolesSelect = ref<boolean>(false)
|
|
const rolesName = ref<any>('1')
|
|
rolesName.value = localStorage.getItem('rolesType')
|
|
const isAdmin = ref(false)
|
|
const roles = store.userInfo.roles
|
|
const activeLoginCompanyName = ref('')
|
|
const searchCheckVisible = ref(false)
|
|
if (roles?.length > 0) {
|
|
isAdmin.value = roles.some((e: any) => e.roleKey == 'admin')
|
|
}
|
|
|
|
// 是否显示退出登录
|
|
const isShowLogout = computed(() => {
|
|
return store.token
|
|
})
|
|
|
|
const setActiveCompanyName = () => {
|
|
const companyList = userStore.companyList
|
|
const activeCompany: any = companyList.filter(
|
|
(e: any) => e.companyId == store.userInfo.companyId,
|
|
)
|
|
activeLoginCompanyName.value = activeCompany[0]?.companyName
|
|
localStorage.setItem('currentCompanyName', activeLoginCompanyName.value)
|
|
}
|
|
|
|
if (userStore.companyList.length === 0) {
|
|
getCompanyList().then((res) => {
|
|
setActiveCompanyName()
|
|
})
|
|
} else {
|
|
setActiveCompanyName()
|
|
}
|
|
|
|
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 searchHistoryList = ref<any>(['挖掘机', '塔式起重机', '挖掘机', '吊机'])
|
|
|
|
// 获取热词
|
|
const getHotSearchListData = async () => {
|
|
const { data: res }: any = await getHotSearchListApi()
|
|
|
|
searchHistoryList.value = res
|
|
console.log(res, '热词')
|
|
}
|
|
|
|
getHotSearchListData()
|
|
|
|
// 搜索按钮
|
|
const searchKeywordBtn = () => {
|
|
/* 去除空格 */
|
|
keywordIptValue.value = keywordIptValue.value.replace(/\s*/g, '')
|
|
|
|
store.addHistoryRecord(keywordIptValue.value)
|
|
if (route.path == '/equipList') {
|
|
if (searchTypeName.value === '装备') {
|
|
$bus.emit('search', keywordIptValue.value)
|
|
} else {
|
|
router.push({
|
|
name: 'parity',
|
|
query: { keyWord: keywordIptValue.value },
|
|
})
|
|
}
|
|
}
|
|
if (route.path == '/parity') {
|
|
if (searchTypeName.value === '需求') {
|
|
$bus.emit('search', keywordIptValue.value)
|
|
} else {
|
|
router.push({
|
|
name: 'equipList',
|
|
query: { keyWord: keywordIptValue.value },
|
|
})
|
|
}
|
|
$bus.emit('search', keywordIptValue.value)
|
|
}
|
|
if (route.path == '/mall-view') {
|
|
if (searchTypeName.value === '装备') {
|
|
router.push({
|
|
name: 'equipList',
|
|
query: { keyWord: keywordIptValue.value },
|
|
})
|
|
}
|
|
if (searchTypeName.value === '需求') {
|
|
router.push({
|
|
name: 'parity',
|
|
query: { keyWord: keywordIptValue.value },
|
|
})
|
|
}
|
|
}
|
|
}
|
|
|
|
// 点击下方搜索记录时
|
|
const handleHistory = (hisValue: any) => {
|
|
keywordIptValue.value = hisValue
|
|
searchKeywordBtn()
|
|
// inputRef.value.focus()
|
|
}
|
|
//页面刷新回显模糊搜索词
|
|
$bus.on('callBackText', (val) => {
|
|
nextTick(() => {
|
|
keywordIptValue.value = val
|
|
})
|
|
})
|
|
|
|
// 角色切换按钮
|
|
const onRolesCheck = () => {
|
|
if (isAdmin.value) return
|
|
isRolesSelect.value = !isRolesSelect.value
|
|
}
|
|
// 选择角色
|
|
const onSelectRoles = (type: number) => {
|
|
if (type === 1) {
|
|
rolesName.value = '1'
|
|
userStore.editMenuList(1)
|
|
userStore.editUserMenuList(1)
|
|
localStorage.setItem('rolesType', '1')
|
|
userStore.editcurrentMenuItem('goodsManagement')
|
|
window.location.reload()
|
|
} else {
|
|
rolesName.value = '2'
|
|
userStore.editMenuList(2)
|
|
userStore.editUserMenuList(2)
|
|
localStorage.setItem('rolesType', '2')
|
|
userStore.editcurrentMenuItem('sourcingNeed')
|
|
window.location.reload()
|
|
}
|
|
isRolesSelect.value = false
|
|
}
|
|
|
|
const getBookCarDetailsData = async () => {
|
|
const res: any = await getBookCarDetailsApi()
|
|
let amountNum = 0
|
|
res.data.forEach((e: any) => {
|
|
amountNum = e.devInfoVoList.length + amountNum
|
|
})
|
|
cart.SET_CART_NUM(amountNum)
|
|
}
|
|
getBookCarDetailsData()
|
|
const cartNum = computed(() => {
|
|
return cart.cartNum
|
|
|
|
// let amountNum = 0
|
|
// cardList.value.forEach((e: any) => {
|
|
// amountNum = e.devInfoVoList.length + amountNum
|
|
// })
|
|
// return amountNum
|
|
})
|
|
|
|
// 查看预约车
|
|
const onCarts = () => {
|
|
console.log('跳转预约车页面')
|
|
router.push({
|
|
name: 'cart',
|
|
})
|
|
}
|
|
|
|
const onJumpUser = () => {
|
|
const roles = store.userInfo.roles
|
|
if (roles?.length > 0) {
|
|
const isAdmin = roles.some((e: any) => e.roleKey == 'admin')
|
|
if (isAdmin) {
|
|
// window.location.href = `http://192.168.137.101:80/?token=${store.token}`
|
|
window.open(`http://36.33.26.201:17788/glweb/login?token=${store.token}`)
|
|
} else {
|
|
router.push({ name: 'my-user' })
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<!-- 头部个人信息 收藏夹 手机版等图标 -->
|
|
<div class="header-container">
|
|
<div class="header-user-info">
|
|
<div class="header-box wapper">
|
|
<div class="header-item" v-if="isShowLogout">
|
|
<!-- <img src="../assets/img/home/star.png" alt="" /> -->
|
|
<a class="user-name"
|
|
>{{ activeLoginCompanyName }} / {{ store.userInfo.nickName }}</a
|
|
>
|
|
<div class="line"></div>
|
|
</div>
|
|
<div class="header-item">
|
|
<a v-if="!isShowLogout" class="a-border-none" @click="$router.push('/login')"
|
|
>登录</a
|
|
>
|
|
<span v-if="!isShowLogout" style="margin: 0 3px">/</span>
|
|
<a
|
|
v-if="!isShowLogout"
|
|
style="padding: 0 20px 0 0"
|
|
@click="$router.push('/register')"
|
|
>注册</a
|
|
>
|
|
<a v-else @click="handlerLogout">退出登录</a>
|
|
<div class="line"></div>
|
|
</div>
|
|
<div class="header-item roles-check" @click="onRolesCheck" v-if="isShowLogout">
|
|
<!-- <img src="../assets/img/home/star.png" alt="" /> -->
|
|
<a style="display: flex; justify-content: center">
|
|
<i
|
|
style="
|
|
background-color: #c9e7e5;
|
|
color: #47c4ad;
|
|
padding: 4px 6px;
|
|
font-weight: bold;
|
|
font-size: 13px;
|
|
border-radius: 4px;
|
|
"
|
|
>
|
|
{{ isAdmin ? '管理方' : rolesName == 1 ? '出租方' : '承租方' }}
|
|
</i>
|
|
<!-- <el-icon style="margin-left: 10px"><ArrowDownBold /></el-icon> -->
|
|
</a>
|
|
|
|
<div class="line"></div>
|
|
|
|
<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="onJumpUser">个人中心</a>
|
|
<div class="line"></div>
|
|
</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">
|
|
<div class="home-logo">
|
|
<el-image
|
|
style="width: 70%; margin-left: 60px; cursor: pointer"
|
|
:src="imgSrc"
|
|
fit="cover"
|
|
@click="$router.push('/mall-view')"
|
|
/>
|
|
</div>
|
|
<div class="home-search">
|
|
<input
|
|
:placeholder="searchTypeName === '装备' ? '搜索装备关键词' : '搜索需求关键词'"
|
|
type="text"
|
|
v-model.trim="keywordIptValue"
|
|
@keydown.enter="searchKeywordBtn"
|
|
ref="inputRef"
|
|
@focus="placeholderText = ''"
|
|
@blur="
|
|
placeholderText =
|
|
searchTypeName === '装备' ? '搜索装备关键词' : '搜索需求关键词'
|
|
"
|
|
/>
|
|
<button class="search-btn" @click="searchKeywordBtn">搜索</button>
|
|
<div
|
|
class="left-check-box"
|
|
@click="
|
|
() => {
|
|
searchCheckVisible = !searchCheckVisible
|
|
}
|
|
"
|
|
>
|
|
{{ searchTypeName }}
|
|
<el-icon style="margin-left: 5px"><ArrowDownBold /></el-icon>
|
|
</div>
|
|
|
|
<div class="check-container" v-if="searchCheckVisible">
|
|
<div
|
|
style="border-top-left-radius: 6px; border-top-right-radius: 6px"
|
|
@click="
|
|
() => {
|
|
searchTypeName = '装备'
|
|
searchCheckVisible = false
|
|
}
|
|
"
|
|
>
|
|
装备
|
|
</div>
|
|
<div
|
|
@click="
|
|
() => {
|
|
searchTypeName = '需求'
|
|
searchCheckVisible = false
|
|
}
|
|
"
|
|
style="border-bottom-left-radius: 6px; border-bottom-right-radius: 6px"
|
|
>
|
|
需求
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="cart-container">
|
|
<div class="cart-icon" @click="onCarts" v-if="isType == 2">
|
|
<el-badge :value="cartNum">
|
|
<svg class="icon" aria-hidden="true" style="width: 30px; height: 30px">
|
|
<use xlink:href="#icon-gouwuche2"></use>
|
|
</svg>
|
|
</el-badge>
|
|
<span style="margin-left: 15px"> 预约车 </span>
|
|
</div>
|
|
</div>
|
|
<!-- <img
|
|
src="@/assets/img/logo.png"
|
|
alt="首页"
|
|
title="首页"
|
|
@click="$router.push('/home')"
|
|
/> -->
|
|
|
|
<!-- <el-image
|
|
style="width: 190px; cursor: pointer; margin-left: 60px"
|
|
:src="imgSrc"
|
|
fit="cover"
|
|
@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 searchHistoryList"
|
|
:key="item.maId"
|
|
@click="handleHistory(item.deviceName)"
|
|
class="history-box"
|
|
>
|
|
{{ item.deviceName }}
|
|
</a>
|
|
</div>
|
|
|
|
<div class="cart-icon" @click="onCarts" v-if="isType == 2">
|
|
<el-badge :value="cartNum">
|
|
<svg class="icon" aria-hidden="true" style="width: 30px; height: 30px">
|
|
<use xlink:href="#icon-gouwuche2"></use>
|
|
</svg>
|
|
</el-badge>
|
|
<span style="margin-left: 15px"> 预约车 </span>
|
|
</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;
|
|
.line {
|
|
width: 1px;
|
|
height: 15px;
|
|
background-color: #666655;
|
|
}
|
|
|
|
.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: #00a288;
|
|
}
|
|
}
|
|
|
|
// .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;
|
|
align-items: center;
|
|
background-color: #eeeff6;
|
|
padding: 30px 0;
|
|
box-sizing: content-box;
|
|
|
|
// padding: 30px 0 60px 0;
|
|
|
|
.home-logo {
|
|
width: 246px;
|
|
height: 100%;
|
|
}
|
|
|
|
.home-search {
|
|
position: relative;
|
|
width: 800px;
|
|
margin-left: 20px;
|
|
|
|
.left-check-box {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
height: 53px;
|
|
width: 70px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-right: 1px solid #3cb4a6;
|
|
font-size: 14px;
|
|
color: #11806f;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.check-container {
|
|
position: absolute;
|
|
left: 0;
|
|
bottom: -100%;
|
|
width: 70px;
|
|
background-color: #fff;
|
|
border-radius: 6px;
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
|
|
z-index: 999;
|
|
transition: all 1s linear;
|
|
cursor: pointer;
|
|
|
|
div {
|
|
height: 25px;
|
|
font-size: 14px;
|
|
line-height: 25px;
|
|
text-align: center;
|
|
letter-spacing: 1px;
|
|
}
|
|
|
|
div:hover {
|
|
color: #fff;
|
|
background-color: #00a288;
|
|
}
|
|
}
|
|
}
|
|
|
|
.cart-container {
|
|
flex: 1;
|
|
}
|
|
|
|
// img {
|
|
// margin-left: 38px;
|
|
// width: 160px;
|
|
// height: 60px;
|
|
// cursor: pointer;
|
|
// }
|
|
|
|
input {
|
|
width: 100%;
|
|
height: 53px;
|
|
display: block;
|
|
border: 1px solid #3cb4a6;
|
|
border-radius: 20px;
|
|
line-height: 53px;
|
|
color: #333;
|
|
text-shadow: 0 0 0 #333;
|
|
padding-left: 75px;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
input:focus {
|
|
outline: 1px solid #3cb4a6;
|
|
}
|
|
|
|
input::-webkit-input-placeholder {
|
|
color: #949494;
|
|
}
|
|
.search-btn {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
width: 100px;
|
|
height: 43px;
|
|
transform: translate(-10px, 5px);
|
|
border-radius: 43px;
|
|
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;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.ipt-down {
|
|
position: absolute;
|
|
bottom: 25px;
|
|
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;
|
|
}
|
|
}
|
|
|
|
.cart-icon {
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
cursor: pointer;
|
|
|
|
span {
|
|
margin-left: 10px;
|
|
color: #1abc9c;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|