caimei365-www/src/main/resources/templates/components/header.html

<header id="globalHead" xmlns:th="http://www.w3.org/1999/xhtml">
    <!--顶部导航-->
    <div class="baseHeadTop">
        <ul class="wrap clear">
            <li>
                <a href="javascript:void(0);">采美365网</a>
                <div class="qrCode">
                    <img src="/img/common/qr_code_caimei.png" alt="采美365网"/>
                    <p>扫描关注</p>
                </div>
            </li>
            <li>
                <a href="javascript:void(0);">呵呵商城</a>
                <div class="qrCode">
                    <img src="/img/common/qr_code_hehe.png" alt="呵呵商城"/>
                    <p>扫描关注</p>
                </div>
            </li>
            <li v-if="loginStatus">
                <a class="cTab" href="javascript:void(0);" v-text="userData.userName"></a>
                <div class="cShow">
                    <a href="javascript:void(0);">我的采美</a>
                    <a href="javascript:void(0);">机构资料</a>
                    <a href="javascript:void(0);">我的机构</a>
                    <a href="javascript:void(0);">店铺管理</a>
                    <a href="javascript:void(0);">我的订单</a>
                    <a href="javascript:void(0);" @click="userLogOut()">退出登录</a>
                </div>
            </li>
            <template v-else>
                <li><a href="/register.html">注册</a></li>
                <li><a href="/login.html">登录</a></li>
            </template>
        </ul>
    </div>
    <!--搜索及购物车-->
    <div class="baseHeadCenter">
        <div class="wrap clear">
            <a href="javascript:void(0);" class="h5Only mClassBtn mIcon" title="分类"></a>
            <a href="/" class="logo">
                <img class="pcOnly" src="/img/base/logo.png" alt="采美 生美/医美采购服务平台"/>
                <img class="h5Only" src="/img/base/logo_m.png" alt="采美 生美/医美采购服务平台"/>
            </a>
            <div class="mf h5Only mUserCenter">
                <a :href="loginStatus?'/shopping/cart.html':'javascript:void(0);'" :class="loginStatus?'mAddCart mIcon':'mAddCart mIcon toLogin'" title="购物车"></a>
                <a href="javascript:void(0);" :class="loginStatus?'mUserIcon mIcon':'mUserIcon mIcon toLogin'" title="个人中心"></a>
            </div>
            <div class="searchBox" id="topSearch">
                <div class="search">
                    <div class="jqSelect">
                        <div class="pc">
                            <span data-select="0">产品</span>
                            <ul><li data-id="0">产品</li></ul>
                        </div>
                        <select>
                            <option value="0">产品</option>
                            <option value="1">供应商</option>
                            <option value="2">项目仪器</option>
                        </select>
                    </div>
                    <input class="keyword" type="text" placeholder="请输入搜索关键词" />
                    <a class="searchBtn icon mIcon" href="javascript:void(0);"></a>
                </div>
                <!-- 热门搜索关键词 -->
                <div class="hotKey">
                    <span th:each="word,wordStat: ${searchHotWord}">
                        <i th:if="${wordStat.index}>0">/</i>
                        <em class="word" th:text="${word}"></em>
                    </span>
                </div>
            </div>
            <div class="headCart">
                <a href="javascript:void(0);" class="addBtn icon">购物车<em v-text="'('+headCart.cartCount+')'"></em></a>
                <div class="cartData">
                    <div v-if="headCart.cartCount>0">
                        <ul class="cartMain">
                            <li class="cartItem" v-for="cart in headCart.cartList">
                                <a href="javascript:void(0)">
                                    <img :src="cart.image" >
                                    <span class="name" v-text="cart.name"></span>
                                    <span class="unit" v-text="'包装规格：'+cart.unit"></span>
                                    <span class="price" v-text="'￥'+parseFloat(cart.price).toFixed(2)"></span>
                                </a>
                                <span class="delBtn"></span>
                            </li>
                        </ul>
                        <div class="cartBtm">
                            <span>共计：<em v-text="headCart.productCount"></em> 件</span>
                            <span>合计：<em v-text="parseFloat(headCart.priceTotal).toFixed(2)"></em> 元</span>
                            <a class="btn" href="/shopping/cart.html">去购物车结算</a>
                        </div>
                    </div>
                    <div v-else class="empty">
                        <img src="/img/common/empty_cart.png">
                        <p>购物车暂无商品</p>
                        <p v-if="!loginStatus">请先<a href="/login.html">登录</a>添加商品到购物车</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--商品分类及主导航菜单-->
    <div class="baseTopNav">
        <div class="wrap clear">
            <a class="classBtn nav" href="javascript:void(0);">商品分类</a>
            <a class="home nav" href="/">首页</a>
            <div class="navBox">
                <ul class="clear">
                    <!--导航菜单-->
                    <li th:each="menu: ${topMenuList}">
                        <a th:if="${menu.link}" class="nav" th:href="${menu.link}" th:text="${menu.name}"></a>
                        <a th:unless="${menu.link}" class="nav" href="javascript:void(0);" th:text="${menu.name}"></a>
                        <div th:if="${not #lists.isEmpty(menu.subMenus)}">
                            <a th:each="sub: ${menu.subMenus}" th:href="${sub.link}" th:text="${sub.name}"></a>
                        </div>
                    </li>
                </ul>
            </div>
            <a class="service nav" href="/maintenance/index.html">维修</a>
        </div>
        <div id="mainClassify" class="classifyBox mFixed">
            <div v-if="!isPC" class="clsHead clear">
                <a href="javascript:void(0);" class="mClassBtn mIcon" title="分类"></a>
                <a href="/" class="logo">
                    <img src="/img/base/logo_m.png" alt="采美 生美/医美采购服务平台"/>
                </a>
                <a href="javascript:void(0);" class="close" title="关闭"></a>
            </div>
            <div class="clsTab">
                <template v-for="(big,i) in classify">
                    <a :class="{'on':i==0}" v-if="big.validFlag==1" href="javascript:void(0);" v-text="big.name"></a>
                </template>
            </div>
            <div class="clsCon">
                <div class="tabItem" v-for="big in classify" :bid="big.bigTypeID" style="display: none;">
                    <div class="line" v-for="small in big.smalltypeList" v-if="small.validFlag==1">
                        <div class="lft">
                            <a :href="'/product/list.html?category='+big.bigTypeID+'-'+small.smallTypeID+'-0'" v-text="small.name"></a>
                        </div>
                        <div class="rgt mfw">
                            <template v-for="tiny in small.tinytypeList">
                                <a v-if="tiny.validFlag==1" :href="'/product/list.html?category='+big.bigTypeID+'-'+small.smallTypeID+'-'+tiny.tinyTypeID">
                                    <img v-if="!isPC" :src="tiny.icon" alt="tiny.name">
                                    <span v-text="tiny.name"></span>
                                </a>
                            </template>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <input type="hidden" th:value="${spiServer}" id="spiServer">
    <input type="hidden" th:value="${agent}" id="userAgent">
</header>