header.html 18 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250
  1. <header id="globalHead" xmlns:th="http://www.w3.org/1999/xhtml" :class="isFiexd ? 'fiexd': ''">
  2. <!--顶部导航-->
  3. <div class="baseHeadTop">
  4. <div class="wrap clear">
  5. <div class="header_top_left">欢迎来到采美采购服务平台</div>
  6. <div class="header_top_left"></div>
  7. <ul class="header_top_ul" >
  8. <li class="headmsg" v-if="!isPC">
  9. <a v-if="userIdentity===3" @click="goMsgLinkFn('/supplier/message/list.html')" href="javascript:void(0)" class="WEB-icon msg-btn">消息<em v-text="'('+noticeNum+')'"></em></a>
  10. <a v-else @click="goMsgLinkFn('/user/message/list.html')" href="javascript:void(0)" class="WEB-icon msg-btn">消息<em v-text="'('+noticeNum+')'"></em></a>
  11. </li>
  12. <li class="headCart" v-if="!isPC">
  13. <a v-if="userIdentity!=3" href="javascript:void(0)" class="addBtn icon" @click="goCartsLinkFn" onclick="_czc.push(['_trackEvent','顶部导航','购物车','点击','','Um_Event_Cart'])">购物车<em v-text="'('+headCart.cartCount+')'"></em></a>
  14. <div class="cartData">
  15. <div v-if="headCart.cartCount>0">
  16. <div class="cartMain">
  17. <div class="cartItem" v-for="cart in headCart.cartList">
  18. <a href="javascript:void(0)" @click="productDetailsFn(cart.productId)">
  19. <img :src="cart.image" >
  20. <span class="name" v-text="cart.name"></span>
  21. <span class="unit" v-text="'包装规格:'+cart.unit"></span>
  22. <span class="unit" v-text="'数量:'+cart.number"></span>
  23. <span class="price" v-text="'¥'+parseFloat(cart.price).toFixed(2)"></span>
  24. </a>
  25. <span class="delBtn" @click="DeleteCartProducts(cart.productId)"></span>
  26. </div>
  27. </div>
  28. <div class="cartBtm">
  29. <span>共计:<span v-text="headCart.productCount"></span> 件</span>
  30. <span>合计:<span v-text="parseFloat(headCart.priceTotal).toFixed(2)"></span> 元</span>
  31. <a class="btn" href="/shopping/cart.html" rel="nofollow">去购物车结算</a>
  32. </div>
  33. </div>
  34. <div v-else class="empty">
  35. <img src="/img/common/empty_cart.png" alt="空购物车">
  36. <p>购物车暂无商品</p>
  37. <p v-if="!loginStatus">请先<a href="/login.html" rel="nofollow">登录</a>添加商品到购物车</p>
  38. </div>
  39. </div>
  40. </li>
  41. <li v-if="GLOBAL_USER_IDENTITY !== 3"><a :href="GLOBAL_USER_ID === 0 ? '/login.html' : '/user/member.html'">超级会员</a></li>
  42. <li v-if="loginStatus" id="mGlobalMenu" @click="hideGlobalMenu()">
  43. <a class="cTab" href="javascript:void(0);" v-if="userIdentity == 3" v-text="userData.name"></a>
  44. <a class="cTab" href="javascript:void(0);" v-else v-text="userData.name"></a>
  45. <div class="cShow" v-if="userIdentity == 4 || userIdentity == 2">
  46. <a href="/user/dashboard.html" rel="nofollow">我的采美</a>
  47. <a href="/user/setting/information.html" rel="nofollow">机构资料</a>
  48. <!-- <a @click="goMsgLinkFn('/user/message/list.html')" href="javascript:void(0);">我的消息<span>({{noticeNum}})</span></a>-->
  49. <a href="javascript:void(0);" @click="userLogOut()">退出登录</a>
  50. </div>
  51. <div class="cShow" v-if="userIdentity == 3">
  52. <a href="/supplier/dashboard.html" rel="nofollow">我的采美</a>
  53. <a href="javascript:void(0);" @click="pageLinkSupplier()">店铺管理</a>
  54. <!-- <a @click="goMsgLinkFn('/supplier/message/list.html')" href="javascript:void(0);">我的消息<span>({{noticeNum}})</span></a>-->
  55. <a href="javascript:void(0);" @click="userLogOut()">退出登录</a>
  56. </div>
  57. </li>
  58. <template v-else>
  59. <li><a href="/club/register.html" rel="nofollow" onclick="_czc.push(['_trackEvent','顶部导航','注册','点击','','Um_Event_Regirster'])">注册</a></li>
  60. <li><a href="/login.html" rel="nofollow">登录</a></li>
  61. </template>
  62. </ul>
  63. </div>
  64. </div>
  65. <!--搜索及购物车-->
  66. <div class="baseHeadCenter">
  67. <div class="wrap clear">
  68. <a href="javascript:void(0);" class="h5Only mClassBtn mIcon" title="分类"></a>
  69. <a href="/" class="logo">
  70. <img class="pcOnly" src="/img/base/logo.png" alt="采美 生美/医美采购服务平台"/>
  71. <img class="h5Only" src="/img/base/logo_m.png" alt="采美 生美/医美采购服务平台"/>
  72. </a>
  73. <div class="mf h5Only mUserCenter">
  74. <template v-if="loginStatus">
  75. <!-- <a class="mUserIcon mIcon toLogin" href="/user/member.html" v-if="!isPC && userIdentity != 3" title="超级会员" rel="nofollow"></a>-->
  76. <a href="/shopping/cart.html" :class="loginStatus?'mAddCart mIcon':'mAddCart mIcon toLogin'" v-if="!isPC && userIdentity != 3" title="购物车" rel="nofollow"></a>
  77. <a v-if="userIdentity===3" style="background-position: " @click="goMsgLinkFn('/supplier/message/list.html')" href="javascript:void(0);" :class="loginStatus?'mNotice H5-icon':'mNotice H5-icon toLogin'" title="消息" rel="nofollow"></a>
  78. <a v-else @click="goMsgLinkFn('/user/message/list.html')" href="javascript:void(0);" :class="loginStatus?'mNotice H5-icon':'mNotice H5-icon toLogin'" title="消息" rel="nofollow"></a>
  79. <a @click="showGlobalMenu()" class="mUserIcon mIcon" href="javascript:void(0);" title="个人中心" rel="nofollow"></a>
  80. </template>
  81. <template v-else>
  82. <!-- <a class="mUserIcon mIcon superVip" :href="GLOBAL_USER_ID === 0 ? '/login.html' : '/user/member.html'" title="超级会员" rel="nofollow"></a>-->
  83. <!-- <a href="/login.html" :class="loginStatus?'mAddCart mIcon':'mAddCart mIcon toLogin'" title="购物车" rel="nofollow"></a>-->
  84. <a class="mUserIcon mIcon toLogin" href="javascript:void(0);" title="个人中心" rel="nofollow"></a>
  85. </template>
  86. </div>
  87. <div class="searchBox" id="topSearch">
  88. <!-- :style="{float: (userIdentity !== 3 && loginStatus) ? 'none' : '', margin: (userIdentity !== 3 && loginStatus) ? '0 auto' : '' }"-->
  89. <div class="search auto-input" :style="{width: !isPC ? '95.4vw' : ''}" id="autoInput">
  90. <div class="jqSelect">
  91. <div class="pc">
  92. <span data-select="0">产品</span>
  93. <ul><li data-id="0">产品</li></ul>
  94. </div>
  95. <select>
  96. <option value="0">产品</option>
  97. <option value="1">供应商</option>
  98. <!-- <option value="2">项目仪器</option>-->
  99. </select>
  100. </div>
  101. <input class="keyword" type="text" placeholder="请输入搜索关键词" maxlength="30"/>
  102. <a class="searchBtn icon mIcon" href="javascript:void(0);" onclick="_czc.push(['_trackEvent','顶部导航','搜索按钮','点击','','Um_Event_SearchButton'])"></a>
  103. </div>
  104. <!-- 热门搜索关键词 -->
  105. <div class="hotKey">
  106. <span th:each="word,wordStat: ${searchHotWord}">
  107. <i th:if="${wordStat.index}>0">/</i>
  108. <em class="word" th:text="${word}"></em>
  109. </span>
  110. </div>
  111. </div>
  112. <div class="wechat_qrcode">
  113. <div class="q_item newCarLink" v-if="userIdentity!=3" @click="goCartsLinkFn" >
  114. <div class="headCart">
  115. <div class="bg_car"></div>
  116. <a v-if="userIdentity!=3" href="javascript:void(0)" class="addBtn icon" onclick="_czc.push(['_trackEvent','顶部导航','购物车','点击','','Um_Event_Cart'])">购物车<span style="color: #FF5B00;" v-text="'('+headCart.cartCount+')'"></span></a>
  117. <div class="cartData">
  118. <div v-if="headCart.cartCount>0">
  119. <div class="cartMain">
  120. <div class="cartItem" v-for="cart in headCart.cartList">
  121. <a href="javascript:void(0)" @click="productDetailsFn(cart.productId)">
  122. <img :src="cart.image" >
  123. <span class="name" v-text="cart.name"></span>
  124. <span class="unit" v-text="'包装规格:'+cart.unit"></span>
  125. <span class="unit" v-text="'数量:'+cart.number"></span>
  126. <span class="price" v-text="'¥'+parseFloat(cart.price).toFixed(2)"></span>
  127. </a>
  128. <span class="delBtn" @click="DeleteCartProducts(cart.productId)"></span>
  129. </div>
  130. </div>
  131. <div class="cartBtm">
  132. <span>共计:<span v-text="headCart.productCount"></span> 件</span>
  133. <span>合计:<span v-text="parseFloat(headCart.priceTotal).toFixed(2)"></span> 元</span>
  134. <a class="btn" href="/shopping/cart.html" rel="nofollow">去购物车结算</a>
  135. </div>
  136. </div>
  137. <div v-else class="empty">
  138. <img src="/img/common/empty_cart.png" alt="空购物车">
  139. <p>购物车暂无商品</p>
  140. <p v-if="!loginStatus">请先<a href="/login.html" rel="nofollow">登录</a>添加商品到购物车</p>
  141. </div>
  142. </div>
  143. </div>
  144. </div>
  145. <div class="q_item newMsgLink">
  146. <div class="bg_msg"></div>
  147. <div class="headmsg">
  148. <a v-if="userIdentity===3" href="javascript:void(0)" class="WEB-icon msg-btn">消息<span style="color: #FF5B00;" v-text="'('+noticeNum+')'"></span></a>
  149. <a v-else @click="goMsgLinkFn('/user/message/list.html')" href="javascript:void(0)" class="WEB-icon msg-btn">消息<span style="color: #FF5B00;" v-text="'('+noticeNum+')'"></span></a>
  150. </div>
  151. </div>
  152. <div class="q_item newSupplierLink" v-if="userIdentity===3 || !loginStatus" @click="goSupplierLink">
  153. <div class="bg_supplier"></div>
  154. <a href="javascript:void(0)" style="white-space: nowrap;">供应商服务</a>
  155. </div>
  156. </div>
  157. </div>
  158. </div>
  159. <!--商品分类及主导航菜单-->
  160. <div class="baseTopNav">
  161. <div class="wrap clear">
  162. <div class="baseTopNav_nav">
  163. <a class="classBtn nav on" href="javascript:void(0);">商品分类</a>
  164. <a class="home nav" href="/">首页</a>
  165. <div class="navBox">
  166. <ul class="clear">
  167. <!--导航菜单-->
  168. <li th:each="menu: ${topMenuList}">
  169. <a class="nav" th:href="${menu.link}" th:text="${menu.name}" th:attr="rel=${#strings.contains(menu.link,'caimei365.com')} ? '' : 'nofollow'" target="_blank"></a>
  170. </li>
  171. </ul>
  172. </div>
  173. </div>
  174. <div id="mainClassify" class="classifyBox mFixed">
  175. <div v-if="!isPC" class="clsHead clear">
  176. <a href="javascript:void(0);" class="mClassBtn mIcon" title="分类"></a>
  177. <a href="/" class="logo">
  178. <img src="/img/base/logo_m.png" alt="采美 生美/医美采购服务平台"/>
  179. </a>
  180. <a href="javascript:void(0);" class="close" title="关闭"></a>
  181. </div>
  182. <div class="clsTab">
  183. <div class="clsTab-main">
  184. <a href="javascript:void(0);" @click="changeClassify(1)" class="on">产品<p :class="1==classifyIndex?'line':''"></p></a>
  185. <a href="javascript:void(0);" @click="changeClassify(2)">仪器<p :class="2==classifyIndex?'line':''"></p></a>
  186. </div>
  187. </div>
  188. <div class="clsCon">
  189. <th:block th:each="type:${#numbers.sequence(1,2)}">
  190. <div class="tabItem" style="display:none;" th:id="'mainClassify_'+${type}">
  191. <div class="tabItem_lift">
  192. <th:block th:each="big,stat : ${classifyJson}" th:if="${big.get('typeSort')}*1==${type}" th:object="${big}">
  193. <a th:class="${stat.index}==0? 'on':''" href="javascript:void(0);">
  194. <img class="tabItem_lift_icon" v-if="isPC" th:src="*{wwwIcon}" th:alt="*{name}"><th:block th:text="*{name}"></th:block>
  195. </a>
  196. </th:block>
  197. </div>
  198. <div class="tabItem_right">
  199. <th:block th:each="big,stat : ${classifyJson}" th:if="${big.get('typeSort')}*1==${type}" th:object="${big}">
  200. <div class="tabItem_right_content" th:class="${stat.index}==0? 'on':''">
  201. <th:block th:if="${big.containsKey('smallTypeList')} and ${big.get('smallTypeList')!=null}">
  202. <div class="line" th:each="small : *{smallTypeList}" th:object="${small}">
  203. <div class="lft show">
  204. <a th:href="'/product/classify-'+${big.getString('typeSort')}+'-' + *{bigTypeId} +'-'+*{smallTypeId} + '.html'" target="_blank">
  205. <span v-if="isPC"> > </span>
  206. <p th:text="*{name}"></p>
  207. </a>
  208. </div>
  209. <div class="rgt mfw" >
  210. <th:block th:if="${small.containsKey('tinyTypeList')} and ${small.get('smallTypeList')!=null}">
  211. <th:block th:each="tiny : *{tinyTypeList}" th:object="${tiny}">
  212. <a th:href="'/product/classify-'+ ${big.getString('typeSort')} +'-'+ ${big.getString('bigTypeId')} +'-'+ *{smallTypeId} +'-'+ *{tinyTypeId} + '.html'" target="_blank">
  213. <img v-if="!isPC" th:src="*{crmIcon}" alt="*{name}">
  214. <p th:text="*{name}"></p>
  215. </a>
  216. </th:block>
  217. </th:block>
  218. <th:block th:unless="${small.containsKey('tinyTypeList')} and ${small.get('smallTypeList')!=null}">
  219. <a th:href="'/product/classify-'+ ${big.getString('typeSort')} +'-'+ *{bigTypeId} +'-'+ *{smallTypeId} + '.html'" target="_blank">
  220. <img v-if="!isPC" th:src="*{crmIcon}" alt=""><p>全部</p>
  221. </a>
  222. </th:block>
  223. </div>
  224. </div>
  225. </th:block>
  226. <div class="line" th:unless="${big.containsKey('smallTypeList')} and ${big.get('smallTypeList')!=null}">
  227. <div class="lft none">
  228. <a th:href="'/product/classify-'+ ${big.getString('typeSort')} +'-'+ *{bigTypeId} +'.html'" target="_blank">
  229. <span v-if="isPC"> > </span>
  230. <p th:text="*{name}"></p>
  231. </a>
  232. </div>
  233. <div class="rgt mfw" >
  234. <a th:href="'/product/classify-'+ ${big.getString('typeSort')} +'-'+ *{bigTypeId} +'.html'" target="_blank">
  235. <img v-if="!isPC" th:src="*{crmIcon}" alt=""><p>全部</p>
  236. </a>
  237. </div>
  238. </div>
  239. </div>
  240. </th:block>
  241. </div>
  242. </div>
  243. </th:block>
  244. </div>
  245. </div>
  246. </div>
  247. </div>
  248. <input type="hidden" th:value="${coreServer}" id="coreServer">
  249. <input type="hidden" th:value="${agent}" id="userAgent">
  250. </header>