503 lines
22 KiB
Vue
503 lines
22 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="el-icon-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 categoryData"
|
|
@mouseenter="showShowChild(index)"
|
|
@mouseleave="hideShowChild(index)"
|
|
class="clearfix menuliselected" :key="index">
|
|
<i class="cate-menu-icon cate-icon-1"></i>
|
|
<h2>
|
|
<a @click="jumpToIndex(item)" class="pointer cate-name">{{
|
|
item.name
|
|
}}</a>
|
|
</h2>
|
|
<div class="cate-item clearfix" v-if="item.showChild">
|
|
<a v-for="(citem,cindex) in item.children" href="javascript:;"
|
|
v-show="cindex < 9"
|
|
@click="jump(item, citem)"
|
|
: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')"
|
|
:class="[currentPage.includes('self-support') ? 'active' : '']">
|
|
<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 " @click="navTo('/pages/index/old/old')"
|
|
:class="[currentPage.includes('old') ? 'active' : '']">
|
|
<a href="javascript:;">旧货交易</a>
|
|
</li>
|
|
<li @click="navTo('/pages/yellowPage/list')" class="nav "
|
|
:class="[currentPage.includes('yellowPage') ? 'active' : '']">
|
|
<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')"
|
|
:class="[(currentPage.includes('shop') && !currentPage.includes('pay')) ? 'active' : '']">
|
|
<a href="javascript:;">特产商城</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="classification">
|
|
<div class="entry">
|
|
<div class="entry-link " @click="navTo('/pages/index/self-support/self-support')">
|
|
<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"
|
|
@click.native="navTo('/pages/user/user')">
|
|
<text class="company-name" style="max-width: 320rpx">{{
|
|
JSON.stringify(vk.getVuex('$user.userInfo')) === '{}' ? '实名认证' :
|
|
([2, '2'].includes(vk.getVuex('$user.userInfo.accountType')) ? vk.getVuex('$user.userInfo.company.companyName') : vk.getVuex('$user.userInfo.person.personName'))
|
|
}}
|
|
</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" v-if="canShareType === 0">
|
|
<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>
|
|
<div class="me-step clearfix" v-else-if="canShareType === 1">
|
|
<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 0;">
|
|
<a v-if="canShareType === 0" href="javascript:;" @click="navTo('/pages/store/buyer')"
|
|
style="text-align: center;color: #a92924;font-size: 13px;line-height: 2">进入买家中心
|
|
></a>
|
|
<a v-else-if="canShareType === 1" href="javascript:;" @click="navTo('/pages/store/store')"
|
|
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 0;">
|
|
<a href="javascript:;" @click="navTo('/pages/store/store')"
|
|
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="gzhQr"
|
|
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: '',
|
|
gzhQr: '',
|
|
categoryData: []
|
|
};
|
|
},
|
|
mounted() {
|
|
let that = this
|
|
this.getCateList()
|
|
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
|
|
this.getGzhQr()
|
|
},
|
|
methods: {
|
|
async getGzhQr() {
|
|
const res = await vk.callFunction({
|
|
url: 'client/dict/pub/getDetail',
|
|
data: {
|
|
id: 'cd349d8f691400d0033a5408018d2fe7'
|
|
|
|
},
|
|
})
|
|
this.gzhQr = res.content
|
|
},
|
|
navTo(url) {
|
|
if (JSON.stringify(vk.getVuex('$user.userInfo')) === '{}') {
|
|
if (url === '/pages/user/user') url = '/pages/auth/register/register'
|
|
}
|
|
vk.navigateTo(url);
|
|
},
|
|
showShowChild(index) {
|
|
this.$set(this.categoryData[index], 'showChild', true)
|
|
},
|
|
hideShowChild(index) {
|
|
this.$set(this.categoryData[index], 'showChild', false)
|
|
},
|
|
getCateList() {
|
|
vk.callFunction({
|
|
url: 'client/spot/category/pub/getTree',
|
|
loading: false,
|
|
data: {},
|
|
success: (data) => {
|
|
data.rows.map(item => {
|
|
item.showChild = false
|
|
return item
|
|
})
|
|
this.categoryData = data.rows
|
|
}
|
|
});
|
|
},
|
|
jump(item, citem) {
|
|
if (item._id === '657609c48b0da41d31e5f901') this.navTo(`/pages/spot/goods/goods`)
|
|
else if (item._id === '5823f6ee68ca6a9101062ab04002e715') this.navTo(`/pages/index/self-support/self-support`)
|
|
else this.navTo(`/pages/spot/goods/goods?keyword=${citem.name}`)
|
|
},
|
|
jumpToIndex(item) {
|
|
if (item._id === '657609c48b0da41d31e5f901') this.navTo(`/pages/spot/goods/goods`)
|
|
else if (item._id === '5823f6ee68ca6a9101062ab04002e715') this.navTo(`/pages/index/self-support/self-support`)
|
|
else this.navTo(`/pages/spot/goods/goods?keyword=${item.name}`)
|
|
}
|
|
|
|
},
|
|
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;
|
|
}
|
|
}
|
|
}
|
|
|
|
.el-icon-menu {
|
|
padding: 0 4px;
|
|
}
|
|
|
|
.company-name {
|
|
display: inline-block;
|
|
max-width: 100px;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
word-break: break-all;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.cate-name:hover {
|
|
color: #a92924
|
|
}
|
|
</style>
|