Pichome/dzz/search/template/view/pc/components/header.htm

<a  href="{$_G[siteurl]}" class="h-left" style="text-decoration: none;height: 60px;">
	<el-image class="logo" src="data/attachment/sitelogo/sitelogo.png?{VERHASH}" fit="contain">
		<template #error><div class="el-image__placeholder"></div></template>
	</el-image>
	<el-text tag="b" size="large" style="color:var(--el-text-color-primary);white-space: nowrap;">{$_G[setting][sitename]}</el-text>
</a>
<div class="h-center" style="overflow: hidden;flex-direction: column;width: 100%;align-items: flex-start;">
	<div style="height: 60px;display: flex;min-height: 60px;align-items: center;width: 100%;justify-content: flex-start;">
		<el-autocomplete
			ref="headerkeyword"
			style="width: 600px;min-width: 600px;"
			v-model="fheaderkeyword"
			:fetch-suggestions="querySearch"
			@clear="headerkeywordInput"
			@keydown.enter.native="headerkeywordInput"
			clearable
			size="large">
			<template #append>
				<el-button @click="headerkeywordInput" type="primary" icon="Search"></el-button>
			</template>
		</el-autocomplete>
	</div>
	
	<template v-if="bannerData.data && bannerData.data.length > 1">
		<div style="width: 100%;overflow: hidden;padding-bottom: 10px;">
			<el-menu
				class="dzz-menu"
				:default-active="bannerData.active"
				mode="horizontal"
				@select="menuChange"
				style="border:0;height: 100%;background: transparent;">
				<template v-for="item in bannerData.data">
					<el-menu-item :index="item.tid" style="background-color: transparent;">
						<template #title>
							{{item.title}}
						</template>
					</el-menu-item>
				</template>
			</el-menu>
		</div>
	</template>
	
</div>
<div class="h-right" style="height: 60px;"> 
	<el-tooltip content="切换页面配色" placement="bottom">
		<el-button 
			text 
			:icon="DocumentThemeColor=='light'?'Sunny':'Moon'" 
			style="font-size: var(--el-font-size-extra-large);" 
			circle  
			size="large"
			@click="DocumentThemeChange">
		</el-button>
	</el-tooltip>
	<el-tooltip :content="Screenshow?'隐藏筛选':'显示筛选'" placement="bottom">
		<el-button 
			text 
			icon="Filter" 
			style="font-size: var(--el-font-size-extra-large);" 
			circle  
			size="large"
			@click="Screenshow = !Screenshow"
			:bg="!Screenshow">
		</el-button>
	</el-tooltip>
	<el-popover
		placement="bottom"
		trigger="click"
		popper-class="isdropdown header-dropdown-menu">
		<comsort
			:iscolumn="false"
			:defaultval="HeaderRightBtnShow"
			@change.self="HeaderShowChange">
		</comsort>
		<template #reference>
			<div style="margin-left: 12px;">
				<el-tooltip content="偏好设置" placement="bottom">
					<el-button text icon="Sort" style="font-size: var(--el-font-size-extra-large);" circle  size="large"></el-button>
				</el-tooltip>
			</div>
		</template>
	</el-popover>
	<comavatar
		:level="parseInt($_G[pichomelevel])"
		iscollect="<!--{if defined('PICHOME_LIENCE') && (!$_G[config][pichomeclosecollect] || $_G[adminid])}--><!--{/if}-->"
		:adminid="parseInt($_G[adminid])"
		PICHOME_LIENCE="<!--{if defined('PICHOME_LIENCE')}--><!--{/if}-->"
		:uid="parseInt($_G[uid])"
		upgrade="<!--{if $_G['setting']['upgrade']}--><!--{/if}-->"
		version="$_G[setting][version]"
		formhash="{FORMHASH}">
		<el-avatar size="40">
			{eval echo avatar_block($_G[uid]);}
		</el-avatar>
	</comavatar>
</div>
<script>
	const HeaderMixins = {
		data(){
			return {
				headerdrawer_m:false,
				headerkeyword:'',
				fheaderkeyword:'',
				Screenshow:true,
				imagereload:false,
				HeaderRightBtnShow:{
					display:[],//显示内容
					other:'btime',//显示内容其它
					order:'btime',//排序方式
					sort:'desc',//升序、降序
					layout:'waterFall'//图片布局方式
				},
				HeaderActive:''
			}
		},
		methods:{
			menuChange(id){
				if(parseInt(this.bannerData.active) == parseInt(id)){
					return false;
				}
				window.location.href = 'index.php?mod=search#id='+id;
				window.location.reload();
			},
			querySearch(queryString, cb) {
				// const results = queryString
				// 	? restaurants.value.filter(createFilter(queryString))
				// 	: restaurants.value
				// call callback function to return suggestions
				cb([])
			},
			handleSelect(data){
				let self = this;
				if(parseInt(data.btype) == 3){
					if(data.realurl){
						window.open(data.realurl)
					}else{
						self.$message.error('没有链接地址');
					}
					return false;
				}
				if(data.url){
					window.location.href = data.url;
				}else{
					window.location.href = data.realurl;
				}
				setTimeout(() => {
					window.location.reload();
				}, 300);
			},
			DocumentThemeChange(){
				if(this.DocumentThemeColor=='light'){
					this.DocumentThemeColor='dark';
					localStorage.setItem('theme','dark');
				}else{
					this.DocumentThemeColor='light';
					localStorage.setItem('theme','light');
				}
				
			},
			handlepreference(data){
				if(!data instanceof Object) return false;
				for (const key in data) {
					this.HeaderShowChange({
						type:key,
						value:data[key]
					},true);
				}
			},
			HeaderShowChange(data){
				const self = this;
				this.HeaderRightBtnShow[data.type] = data.value;
				switch(data.type){
					case 'display':
						let display = JSON.parse(JSON.stringify(data.value))
						let index = display.indexOf('other');
						if(index<0){
							self.ImageProps.ShowMessage.other = '';
							// sessionStorage.removeItem('other');
						}else{
							display.splice(index,1);
							self.ImageProps.ShowMessage.other = this.HeaderRightBtnShow.other; 
							// sessionStorage.setItem('other',this.HeaderRightBtnShow.other);
						}
						// if(data.value && data.value.length){
						// 	sessionStorage.setItem('display',data.value.join(','));
						// }else{
						// 	sessionStorage.setItem('display','empty');
						// }
						self.ImageProps.ShowMessage.display = display;
					break;
					case 'other':
						// sessionStorage.setItem('other',data.value);
						self.ImageProps.ShowMessage.other = data.value;
					break;
					case 'sort':
					case 'order':
						// sessionStorage.setItem(data.type,data.value);
						this.HeaderRightBtnSubmit();
					break;
					case 'column':
						self.$nextTick(function(){
							self.$refs.RefImageLayout.updateImageData();
						});
					break;
					case 'layout':
						this.ImageProps.layout = data.value;
						// sessionStorage.setItem('layout',data.value);
					break;
				}
			},
			headerkeywordInput(){
				if(this.fheaderkeyword == this.headerkeyword){
					return false;
				}
				this.headerkeyword = JSON.parse(JSON.stringify(this.fheaderkeyword));
				this.CommonGetImageData();
				
			}
		},
	}
</script>