File: /var/www/dk/wp-content/themes/food/food-app/components/yq-header.vue
<template>
<div>
<div class=" p-[0.2rem] main-footer rounded-[0.2rem] w-100 md:w-[768px] md:mx-auto xl:w-[1280px]" >
<pc-header class=" hidden md:flex fixed top-0 z-40 md:w-[768px] md:mx-auto xl:w-[1280px] bg-white items-center mt-[0.16rem] mb-[0.16rem]" >
<a href="/" class=" flex ml-[0.08rem] items-center">
<img class=" w-[2.4rem] h-[0.77rem] flex-shrink-0 md:hidden" :src="local_url+'img/icon/logo.png'" alt="logo"/>
<div class=" text-[0.23rem] leading-[0.35rem] font-bold text-1E2B5C ml-[0.1rem]"></div>
<!-- <div class=" mx-[0.15rem]">|</div>
<img class=" w-[0.71rem] h-[0.32rem] flex-shrink-0" :src="local_url+'img/header-logo2.png'" alt="logo2"/> -->
</a>
<div class=" ml-auto flex px-[0.2rem] items-center w-[3rem] h-[0.36rem] bg-f5 rounded-full">
<input v-model="search" @keyup.enter="hdSearch" placeholder="Search"
class=" text-[0.18rem] leading-[0.2rem] outline-none w-full h-full bg-f5" type="text">
<img @click="hdSearch" class=" w-[0.24rem] h-[0.24rem] flex-shrink-0 cursor-pointer"
:src="local_url+'img/search.png'" alt="search">
</div>
</pc-header>
<div class=" hidden md:flex h-[0.62rem]"></div>
<header class=" w-100 md:w-[768px] md:mx-auto h-[1rem] bg-white flex xl:hidden items-center px-[0.3rem]">
<a href="/" class=" flex ml-[0.08rem] items-center flex-1">
<img class="flex md:hidden h-[0.6rem] w-[1.87rem] flex-shrink-0" :src="local_url+'img/icon/logo.png'" alt="logo"/>
<div class=" text-[0.35rem] leading-[0.48rem] font-bold text-1E2B5C ml-[0.1rem]"></div>
<!-- <div class=" mx-[0.15rem]">|</div>
<img class=" w-[1.1rem] h-[0.5rem] flex-shrink-0" :src="local_url+'img/header-logo2.png'" alt="logo2"/> -->
</a>
<a-dropdown :trigger="['click']">
<img class=" w-[0.48rem] h-[0.48rem] ml-[0.2rem] flex-shrink-0" :src="local_url+'img/menu.png'" alt="menu"/>
<a-menu slot="overlay">
<a-menu-item v-for="item in menu_list" :key="item.id">
<a :href="item.path">{{ item.title }}</a>
</a-menu-item>
</a-menu>
</a-dropdown>
<!-- <a href="/food-home/#part1">招牌商品</a>-->
<!-- <a-menu-item key="0">-->
<!-- <a href="/">主頁</a>-->
<!-- </a-menu-item>-->
<!-- <a-menu-item key="0">-->
<!-- <a href="/zone">專區</a>-->
<!-- </a-menu-item>-->
<!-- <a-menu-item key="0">-->
<!-- <a href="/member_services">會員服務</a>-->
<!-- </a-menu-item>-->
<!-- <a-menu-item key="0">-->
<!-- <a href="/home/#mall_channel">關於 Mall Mall Channel</a>-->
<!-- </a-menu-item>-->
<!-- <a-menu-item key="0">-->
<!-- <a href="/category/infos/">資料查詢</a>-->
<!-- </a-menu-item>-->
</header>
<nav class=" w-100 md:w-[768px] md:mx-auto h-[1rem] bg-white flex xl:hidden items-center px-[0.3rem]">
<!-- <div v-if="user_info.ID > 0" class=" h-[0.6rem] flex items-center bg-main rounded-full px-[0.24rem]">
<img class=" w-[0.36rem] h-[0.36rem]" :src="local_url+'img/shopcar.png'"/>
<a href="/food-shop-car"
class=" ml-[0.1rem] text-white text-[0.24rem] leading-[0.2rem]">購物車({{ user_info.cart_num }})</a>
</div> -->
<!-- <a class=" ml-auto" href="/food-search"><img class=" w-[0.48rem] h-[0.48rem]" :src="local_url+'img/search.png'"-->
<!-- alt="search"/></a>-->
<!-- <img @click="toUserInfo('0')" v-if="user_info.ID > 0" class=" cursor-pointer w-[0.48rem] h-[0.48rem] ml-[0.2rem]"
:src="local_url+'img/msg.png'" alt="msg"/>
<img @click="toUserInfo('1')" v-if="user_info.ID > 0" class=" cursor-pointer w-[0.48rem] h-[0.48rem] ml-[0.2rem]"
:src="local_url+'img/setting.png'" alt="set"/> -->
<!-- <div v-if="user_info.ID == 0" @click="showLoginModel()" class=" cursor-pointer ml-[0.2rem] text-333 text-[0.24rem] leading-[0.2rem]">登入/註冊</div>
<a-dropdown v-else class=" ml-[0.2rem]" :trigger="['click']">
<div class=" flex items-center cursor-pointer">
<img class=" w-[0.48rem] h-[0.48rem]" :src="local_url+'img/user.png'" alt="user" />
<div class=" ml-[0.2rem] text-333 text-[0.24rem] leading-[0.2rem]">{{user_info.user_name}}</div>
</div>
<a-menu slot="overlay">
<a-menu-item key="0">
<a @click="loginOut">退出</a>
</a-menu-item>
</a-menu>
</a-dropdown> -->
</nav>
<div class="hidden xl:flex items-center text-1E2B5C mt-[0.2rem] text-[0.2rem]">
<div class="w-auto mx-1" v-for="item in menu_list" :key="item.id">
<a :href="item.path">{{ item.title }}</a>
</div>
<div class=" flex ml-auto">
<div v-if="user_info.ID > 0" class="text-center mt-0.5 mr-[0.26rem] relative">
<a href="/mmc-shop-car"
class=" ml-[0.04rem] text-white text-[0.18rem] leading-[0.2rem]"><img
:src="local_url+'img/icon/cart.png'" class="w-[0.46rem] h-[0.46rem]">
<div style="background: #EA6908;"
class=" text-white text-[0.18rem] absolute w-[0.36rem] h-[0.26rem] rounded-[0.13rem] left-[-0.18rem] top-[0.1rem]">
<span class="mb-[0.1rem]">{{ user_info.cart_num }}</span>
</div>
</a>
</div>
<div v-if="user_info.ID > 0" class="text-center mt-0.5 mr-[0.26rem]"><img :src="local_url+'img/icon/ring.png'"
class="w-[0.46rem] h-[0.46rem]">
</div>
<div v-if="user_info.ID > 0" class="text-center mt-0.5 mr-[0.26rem]"><img
:src="local_url+'img/icon/setting.png'"
class="w-[0.46rem] h-[0.46rem]"></div>
<div v-if="user_info.ID == 0" @click="showLoginModel()"
class=" cursor-pointer text-333 text-[0.18rem] leading-[0.2rem] mt-0.5">登入/註冊
</div>
<a-dropdown v-else class=" mt-0.5 " :trigger="['click']">
<div class=" flex items-center cursor-pointer">
<img class="w-[0.46rem] h-[0.46rem]" :src="local_url+'img/user.png'" alt="user"/>
<div class=" ml-[0.16rem] text-333 text-[0.18rem] leading-[0.2rem]">{{ user_info.user_name }}</div>
</div>
<a-menu slot="overlay">
<a-menu-item key="0">
<a @click="loginOut">退出</a>
</a-menu-item>
</a-menu>
</a-dropdown>
</div>
</div>
</div>
<yq-model ref="login"></yq-model>
</div>
</template>
<script>
module.exports = {
props: {
search_text: {
type: String,
default: ""
}
},
components: {
'yq-model': httpVueLoader(local_url + 'components/yq-modal.vue?v=2'),
},
data() {
return {
search: "",
menu_list: [
{
id: 28,
title: "首頁",
path: "/",
img_url: "",
}, {
id: 29,
title: "會員服務",
path: "/member_services",
img_url: "",
}, {
id: 30,
title: "關於 Mall Mall Channel",
path: "/home/#mall_channel",
img_url: "",
}, {
id: 31,
title: "資料查詢",
path: "/category/infos/",
img_url: "",
}
],
}
},
created() {
this.search = this.search_text
},
methods: {
toUserInfo(key) {
sessionStorage.user_active_nav = key
// window.location.href = "/food-user"
window.location.href = "/mmc-user"
},
hdSearch() {
if (window.location.href.indexOf("food-search") > -1) {
this.$emit('search', this.search)
} else {
sessionStorage.search_text = this.search
// window.location.href = "/food-search"
window.location.href = "/products_search"
}
},
showLoginModel() {
this.$refs.login.changeShow()
},
loginOut() {
let postForm = document.createElement("form");
postForm.method = "post";
postForm.action = "";
postForm.style = "display:none";
let actionInput = document.createElement("input");
actionInput.setAttribute("name", 'action');
actionInput.setAttribute("value", 'loginout');
postForm.appendChild(actionInput);
document.body.appendChild(postForm);
postForm.submit();
},
}
}
</script>