gxwebsoft
370 lines
21 KiB
Vue
370 lines
21 KiB
Vue
<template>
|
|
<view>
|
|
<div class="group-nav">
|
|
<div class="mod-nav clearfix">
|
|
<div class="first-level-nav ">
|
|
<div class="clearfix navigation-bottom">
|
|
<div class="classification" id="bannerAllPro">
|
|
<div class="classification-text">
|
|
<i class="icon-nav icon-nav-menu"></i> 全部商品分类
|
|
</div>
|
|
<!--全部商品分类开始-->
|
|
<div v-show="alwaysShowCategory || showCategory" class="banner-left" style="">
|
|
<div class="mod-category">
|
|
<div class="part-category">
|
|
<div class="cate-menu" psa="a156">
|
|
<ul id="nav-sub" class="">
|
|
<li v-for="(item,index) in vk.getVuex('$app.siteData.categoryData')"
|
|
class="clearfix menuliselected" :key="index">
|
|
<i class="cate-menu-icon cate-icon-1"></i>
|
|
<h2>
|
|
<a href="">{{ item.name }}</a>
|
|
</h2>
|
|
<div class="cate-item clearfix">
|
|
<a v-for="(citem,cindex) in item.children" href=""
|
|
:key="cindex">{{ citem.name }}</a>
|
|
</div>
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
</div>
|
|
<div class="cate-cont" psa="a157" style="">
|
|
<div class="item-main" style="">
|
|
<div class="part-hot-word">
|
|
<div class="item">
|
|
<div class="title">
|
|
<h2>
|
|
<a href="/market/index.html?name2=螺纹钢、高线">螺纹钢</a>
|
|
</h2>
|
|
<a href="/market/index.html" class="more">更多
|
|
<i>></i></a>
|
|
</div>
|
|
<div class="cont">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="part-logo-cont">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!--全部商品分类结束-->
|
|
</div>
|
|
<div class="linkNav">
|
|
<ul>
|
|
<li class="nav ">
|
|
<a href="/">首页</a>
|
|
</li>
|
|
<li class="nav" @click="navTo('/pages/index/self-support/self-support')">
|
|
<a href="javascript:;">金久信自营</a>
|
|
</li>
|
|
<li @click="navTo('/pages/spot/goods/goods')" class="nav"
|
|
:class="[currentPage.includes('spot') ? 'active' : '']">
|
|
<a href="javascript:;" class="navigator">
|
|
现货市场
|
|
</a>
|
|
</li>
|
|
<li @click="navTo('/pages/enquiry/list')" class="nav "
|
|
:class="[currentPage.includes('enquiry') ? 'active' : '']">
|
|
<a href="javascript:;" class="navigator">
|
|
下询价单
|
|
</a>
|
|
</li>
|
|
<li @click="navTo('/pages/process/list')" class="nav "
|
|
:class="[currentPage.includes('process') ? 'active' : '']">
|
|
<a href="javascript:;">找加工</a>
|
|
</li>
|
|
<li class="nav ">
|
|
<a href="javascript:;">旧货交易</a>
|
|
</li>
|
|
<li class="nav ">
|
|
<a href="javascript:;">金久信黄页</a>
|
|
</li>
|
|
<li class="nav " @click="navTo('/pages/article/list')"
|
|
:class="[currentPage.includes('article') ? 'active' : '']">
|
|
<a href="javascript:;">金久信学堂</a>
|
|
</li>
|
|
<li class="nav " @click="navTo('/pages/index/shop/shop')">>
|
|
<a href="javascript:;">特产商城</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="classification">
|
|
<div class="entry">
|
|
<div class="entry-link">
|
|
<img src="@/static/images/logo-left2.png">
|
|
</div>
|
|
</div>
|
|
<!--全部商品分类开始-->
|
|
<div v-show="alwaysShowCategory" class="zghome-nav-display">
|
|
|
|
<div v-show="alwaysShowCategory" class="mod-manage" style="height: 500px;">
|
|
|
|
<div class="me-login">
|
|
<div class="login-not">
|
|
<div class="login-head">
|
|
<img src="/static/images/logo-small.png" alt="">
|
|
</div>
|
|
<div class="login-action">
|
|
<el-button v-if="!vk.getVuex('$user.userInfo.nickname')" type="primary"
|
|
class="empty-bg-plain-btn w-full" plain icon="el-icon-user"
|
|
@click.native="navTo('/pages/auth/login/login')">登录
|
|
</el-button>
|
|
<el-button v-else type="primary"
|
|
class="empty-bg-plain-btn w-full" plain icon="el-icon-user"
|
|
@click.native="navTo('/pages/user/user')">个人中心
|
|
</el-button>
|
|
</div>
|
|
<div class="login-action">
|
|
<el-button type="primary" class="auth-btn">
|
|
<img src="@/static/images/id-card.png">
|
|
<text>实名认证</text>
|
|
</el-button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="me-tab">
|
|
<div class="me-tab-text">
|
|
<ul>
|
|
<li @click="canShareType = 0" class="tab-left"
|
|
:class="[canShareType === 0 ? 'active' : '']">
|
|
<a href="javascript:void(0)">买家可享</a>
|
|
</li>
|
|
<li @click="canShareType = 1" class=""
|
|
:class="[canShareType === 1 ? 'active' : '']">
|
|
<a href="javascript:void(0)">卖家可享</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="me-tab-content">
|
|
<div class="tab-inner">
|
|
<div class="me-step clearfix">
|
|
<dl>
|
|
<dt>
|
|
<i class="iconNew"><img
|
|
src="/static/images/lg1.png"></i>
|
|
<i class="iconNew iconNew-step-arrow"><img
|
|
src="/static/images/lg13.png"></i>
|
|
</dt>
|
|
<dd>免费注册</dd>
|
|
</dl>
|
|
<dl>
|
|
<dt>
|
|
<i class="iconNew"><img
|
|
src="/static/images/lg2.png"></i>
|
|
<i class="iconNew iconNew-step-arrow"><img
|
|
src="/static/images/lg13.png"></i>
|
|
</dt>
|
|
<dd>发布需求</dd>
|
|
</dl>
|
|
<dl>
|
|
<dt>
|
|
<i class="iconNew"><img
|
|
src="/static/images/lg3.png"></i>
|
|
</dt>
|
|
<dd>管理采购</dd>
|
|
</dl>
|
|
<dl class="dowslf3">
|
|
<dt class="clearfix">
|
|
<i class="iconNew iconNew-step-arrow2"><img
|
|
src="/static/images/lg14.png"></i>
|
|
</dt>
|
|
</dl>
|
|
<dl>
|
|
<dt>
|
|
<i class="iconNew"><img
|
|
src="/static/images/lg6.png"></i>
|
|
<i class="iconNew iconNew-step-arrow"><img
|
|
src="/static/images/lg15.png"></i>
|
|
</dt>
|
|
<dd>达成交易</dd>
|
|
</dl>
|
|
<dl>
|
|
<dt>
|
|
<i class="iconNew"><img
|
|
src="/static/images/lg5.png"></i>
|
|
<i class="iconNew iconNew-step-arrow"><img
|
|
src="/static/images/lg15.png"></i>
|
|
</dt>
|
|
<dd>验收</dd>
|
|
</dl>
|
|
<dl>
|
|
<dt>
|
|
<i class="iconNew"><img
|
|
src="/static/images/lg4.png"></i>
|
|
</dt>
|
|
<dd> 我的订单</dd>
|
|
</dl>
|
|
</div>
|
|
<p style="width: 100%;margin:10px 0px;">
|
|
<a href="/buyer/index.html"
|
|
style="text-align: center;color: #a92924;font-size: 13px;line-height: 2">进入买家中心
|
|
></a>
|
|
</p>
|
|
</div>
|
|
<div class="tab-inner" style="display: none;">
|
|
<div class="me-step clearfix">
|
|
<dl>
|
|
<dt>
|
|
<i class="iconNew"><img
|
|
src="/static/images/lg7.png"></i>
|
|
<i class="iconNew iconNew-step-arrow"><img
|
|
src="/static/images/lg13.png"></i>
|
|
</dt>
|
|
<dd>企业注册</dd>
|
|
</dl>
|
|
<dl>
|
|
<dt>
|
|
<i class="iconNew"><img
|
|
src="/static/images/lg8.png"></i>
|
|
<i class="iconNew iconNew-step-arrow"><img
|
|
src="/static/images/lg13.png"></i>
|
|
</dt>
|
|
<dd>商品管理</dd>
|
|
</dl>
|
|
<dl>
|
|
<dt>
|
|
<i class="iconNew"><img
|
|
src="/static/images/lg9.png"></i>
|
|
</dt>
|
|
<dd>匹配需求</dd>
|
|
</dl>
|
|
<dl class="dowslf3">
|
|
<dt class="clearfix">
|
|
<i class="iconNew iconNew-step-arrow2"><img
|
|
src="/static/images/lg14.png"></i>
|
|
</dt>
|
|
</dl>
|
|
<dl>
|
|
<dt>
|
|
<i class="iconNew"><img
|
|
src="/static/images/lg12.png"></i>
|
|
<i class="iconNew iconNew-step-arrow"><img
|
|
src="/static/images/lg15.png"></i>
|
|
</dt>
|
|
<dd>完成订单</dd>
|
|
</dl>
|
|
<dl>
|
|
<dt>
|
|
<i class="iconNew"><img
|
|
src="/static/images/lg11.png"></i>
|
|
<i class="iconNew iconNew-step-arrow"><img
|
|
src="/static/images/lg15.png"></i>
|
|
</dt>
|
|
<dd>卖出货品</dd>
|
|
</dl>
|
|
<dl>
|
|
<dt>
|
|
<i class="iconNew"><img
|
|
src="/static/images/lg10.png"></i>
|
|
</dt>
|
|
<dd> 报价</dd>
|
|
</dl>
|
|
|
|
</div>
|
|
<p style="width: 100%;margin:10px 0px;">
|
|
<a href="/seller/index.html"
|
|
style="text-align: center;color: #a92924;font-size: 13px;line-height: 2">进入卖家中心
|
|
></a>
|
|
</p>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
<div class="clearfix wartchar">
|
|
<div class="wartcharlist"><img src="/static/images/wx.png"
|
|
style="height: 38px;margin-top: 5px;">
|
|
<p style="padding-top: 5px;line-height: 2">金久信</p>
|
|
<p>微信公众号</p>
|
|
</div>
|
|
<div class="wartcharlist">
|
|
<img src="/static/images/80705c8b12d05d0ff67a2758749ef09c.jpg"
|
|
style="height: 100px;width: 100px;">
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
<!---->
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: {
|
|
alwaysShowCategory: {
|
|
type: Boolean,
|
|
default: false
|
|
}
|
|
},
|
|
name: "category-bar",
|
|
data() {
|
|
return {
|
|
showCategory: false,
|
|
canShareType: 0,
|
|
currentPage: ''
|
|
};
|
|
},
|
|
mounted() {
|
|
let that = this
|
|
const bannerAllPro = document.getElementById("bannerAllPro")
|
|
bannerAllPro.addEventListener("mouseover", () => {
|
|
that.showCategory = true
|
|
})
|
|
bannerAllPro.addEventListener("mouseleave", () => {
|
|
that.showCategory = false
|
|
})
|
|
const routes = getCurrentPages()
|
|
this.currentPage = getCurrentPages()[routes.length - 1].route
|
|
},
|
|
methods: {
|
|
navTo(url) {
|
|
vk.navigateTo(url);
|
|
}
|
|
},
|
|
watch: {
|
|
$route({meta: {pagePath}}) {
|
|
this.currentPage = pagePath
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.navigator {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.login-action {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
.auth-btn {
|
|
margin-top: .5rem;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 100%;
|
|
|
|
img {
|
|
width: 14px;
|
|
margin-right: 5px;
|
|
}
|
|
}
|
|
}
|
|
</style>
|