160 lines
3.3 KiB
Vue
160 lines
3.3 KiB
Vue
<template>
|
|
<view class="d-flex border-top faster" style="height: 100%;box-sizing: border-box;">
|
|
<view class="container bg_F2F2F2">
|
|
<view class="b_header bg-linear-gradient x-text-white text-center">
|
|
分类
|
|
</view>
|
|
<view class="contant_list">
|
|
<view class="list padding-zy30" v-for="(item,index) in list" :key='index'>
|
|
<view class="font-weight title">{{item.name}}</view>
|
|
<view class="d-flex list_items">
|
|
<view class="box x-bg-white" v-for='(item1,index1,key) in item.sub_cate' :key='index1' @tap='to_goodsDetail(item1,index,key)' >
|
|
<view v-if="!item1.show">{{item1.name}}</view>
|
|
<image v-if="item1.show" src="../../static/home/xia.png" mode="" style="height:18upx; width:30upx;"></image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import HeaderTop from '../../components/HeaderTop/HeaderTop.vue'
|
|
import X_goods from '../../utils/models/goods.js'
|
|
export default {
|
|
data() {
|
|
return {
|
|
menu_index: 0,
|
|
list: [], // 分类列表菜单
|
|
all:[]
|
|
}
|
|
},
|
|
watch: {
|
|
'$route'(to, from) {
|
|
if(to.path=='/pages/classfication/classfication' && (from.path == '/pages/shoppingCart/shoppingCart' || from.path == '/pages/home/home' || from.path == '/pages/my/my')){
|
|
this.classification();
|
|
}
|
|
}
|
|
},
|
|
onLoad(option) {
|
|
this.classification();
|
|
},
|
|
mounted() {
|
|
|
|
},
|
|
onShow() {
|
|
},
|
|
created() {
|
|
|
|
},
|
|
methods: {
|
|
// 进去详情页
|
|
to_goodsDetail(item,index,key) {
|
|
if(key == 8 && item.show){
|
|
let arr = this.all[item.pid]
|
|
let int = 0
|
|
this.list[index].sub_cate.pop()
|
|
for (let j in arr) {
|
|
int++
|
|
if(int>8){
|
|
this.list[index].sub_cate.push(arr[j])
|
|
}
|
|
}
|
|
}else{
|
|
uni.navigateTo({
|
|
url: '../home/search-list?cate_id=' + item.cate_id
|
|
})
|
|
}
|
|
},
|
|
// 分类列表
|
|
async classification() {
|
|
this.list = []
|
|
let res = await X_goods.x_Classification()
|
|
for (let i in res.data) {
|
|
let arr = res.data[i].sub_cate
|
|
let son = []
|
|
let int = 0
|
|
this.all[i] = []
|
|
for (let j in arr) {
|
|
int++
|
|
if(int<=8){
|
|
son.push(arr[j])
|
|
}
|
|
if(int==9){
|
|
let parames = {
|
|
name:'',
|
|
pid:arr[j].pid,
|
|
show : true
|
|
}
|
|
son.push(parames)
|
|
}
|
|
this.all[i].push(arr[j])
|
|
}
|
|
res.data[i].sub_cate = son
|
|
this.list.push(res.data[i])
|
|
}
|
|
this.handleError(res, res => {
|
|
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.container {
|
|
.b_header{
|
|
height:148upx;
|
|
position: relative;
|
|
line-height:210upx;
|
|
font-size: 32upx;
|
|
.goback{
|
|
position: absolute;
|
|
bottom:29upx;
|
|
left:31upx;
|
|
height:30.9upx;
|
|
width:18upx;
|
|
}
|
|
.message{
|
|
position: absolute;
|
|
bottom:18upx;
|
|
right:31upx;
|
|
height:43upx;
|
|
width:50upx;
|
|
}
|
|
.spot{
|
|
height:12upx;
|
|
width:12upx;
|
|
background-color: #FF3824;
|
|
border-radius: 50%;
|
|
position: absolute;
|
|
bottom:52upx;
|
|
right:31upx;
|
|
}
|
|
}
|
|
|
|
height: 100%;
|
|
width: 100%;
|
|
overflow-y: auto;
|
|
.contant_list{
|
|
height:calc(100% - 148upx);
|
|
overflow-y: auto;
|
|
.list{
|
|
.title{
|
|
margin: 30upx 0 14upx 0;
|
|
}
|
|
.list_items {
|
|
flex-wrap: wrap;
|
|
.box{
|
|
width:33%;
|
|
padding:30upx 0;
|
|
text-align: center;
|
|
margin:0 3upx 3upx 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|