<template>
|
<div class="goodsclass">
|
<div class="row border-bottom-1" v-for="(goodsclass, index) in goodsclasses" :key="index">
|
<div class="col-2">
|
<h4 v-text="goodsclass.title"></h4>
|
<ul>
|
<li v-for="item in goodsclass.data" :key="item.type">
|
<a href="javascript:;" @click="jumpmenu(item)" v-text="item.name"></a>
|
</li>
|
</ul>
|
</div>
|
<div class="col-2">
|
<img :src="goodsclass.imgurl" alt="">
|
</div>
|
</div>
|
<bottom-line-component v-if="message" :message="message"></bottom-line-component>
|
<tab-bar-component v-if="tabMenu" :menu="tabMenu"></tab-bar-component>
|
</div>
|
</template>
|
|
<script>
|
import {dict} from '../store/dictionary'
|
import {mainmenu} from '../store/menulist'
|
import {goodsclassData} from '../store/mockdata'
|
import bottomLineComponent from '../components/bottomLineComponent'
|
import tabBarComponent from '../components/tabBarComponent'
|
export default {
|
name: 'goodsclass',
|
components: {tabBarComponent, bottomLineComponent},
|
data () {
|
return {
|
tabMenu: null,
|
goodsclasses: null,
|
message: null
|
}
|
},
|
methods: {
|
jumpmenu (item) {
|
this.$router.push({name: 'goods', params: {type: item.type}})
|
}
|
},
|
mounted: function () {
|
this.tabMenu = mainmenu.map(item => {
|
if (item.view === this.$route.name) {
|
item.active = true
|
} else {
|
item.active = false
|
}
|
return item
|
})
|
setTimeout(() => {
|
this.goodsclasses = JSON.parse(JSON.stringify(goodsclassData))
|
this.message = dict.bottomtip
|
}, 1000)
|
}
|
}
|
</script>
|
|
<style scoped>
|
.goodsclass {
|
overflow: hidden;
|
padding-bottom: 50px;
|
}
|
.goodsclass img {
|
width: 100%;
|
}
|
.goodsclass h4 {
|
margin: 10px 0px 10px 20px;
|
font-size: 18px;
|
color: #EA2E55;
|
}
|
.goodsclass ul li {
|
line-height: 35px;
|
margin-left: 20px;
|
font-size: 16px;
|
list-style-type: none;
|
}
|
.goodsclass a {
|
color: #000000;
|
}
|
</style>
|
