You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
168 lines
3.2 KiB
168 lines
3.2 KiB
<template>
|
|
<view class="container">
|
|
<!-- 搜索框 -->
|
|
<!-- <search tips="搜索商品" @event="$navTo('pages/search/index')" /> -->
|
|
|
|
<view class="cate-content" v-if="list.length > 0">
|
|
<!-- 左侧 一级分类 -->
|
|
<scroll-view class="cate-left" :scroll-y="true">
|
|
<text class="type-nav" :class="{ selected: curIndex == index }"
|
|
v-for="(item, index) in list" @click="handleSelectNav(index)"
|
|
:key="index" >{{ item.name }}</text>
|
|
</scroll-view>
|
|
|
|
<!-- 右侧 二级分类 -->
|
|
<scroll-view class="cate-right" :scroll-top="scrollTop" :scroll-y="true">
|
|
|
|
<image class="cate-tow-img" :src="list[curIndex].image ? list[curIndex].image.preview_url : ''"></image>
|
|
<view v-for="(item, idx) in list[curIndex].children"
|
|
:key="idx" @click="onTargetGoodsList(item.category_id)">
|
|
<view class="cate-tow-group">
|
|
<text class="cate-tow-group--title">{{item.name}}</text>
|
|
<view class="cate-tow-group--item" v-for="i in item.children" :key="i.id">
|
|
<image class="cate-tow-group--img" mode="scaleToFill"
|
|
:src="i.image.preview_url"></image>
|
|
<text class="cate-tow-group--name">{{i.name}}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
<BsEmpty v-if="!list.length" :isLoading="isLoading" />
|
|
</view>
|
|
</template>
|
|
|
|
|
|
<script>
|
|
import categoryData from "@/mock/category.json";
|
|
import BsEmpty from "@/components/BsEmpty";
|
|
export default {
|
|
components: { BsEmpty },
|
|
data() {
|
|
return {
|
|
// 一级分类:指针
|
|
curIndex: 0,
|
|
// 内容区竖向滚动条位置
|
|
scrollTop: 0,
|
|
// 分类列表
|
|
list: [],
|
|
// 正在加载中
|
|
isLoading: true,
|
|
};
|
|
},
|
|
onLoad() {
|
|
// 加载页面数据
|
|
this.getPageData();
|
|
},
|
|
/**
|
|
* 生命周期函数--监听页面显示
|
|
*/
|
|
onShow() {
|
|
this.getPageData();
|
|
},
|
|
methods: {
|
|
|
|
// 一级分类:选中分类
|
|
handleSelectNav(index) {
|
|
this.curIndex = index;
|
|
this.scrollTop = 0;
|
|
},
|
|
/**
|
|
* 获取页面数据
|
|
*/
|
|
getPageData() {
|
|
this.isLoading = true;
|
|
// 初始化分类列表数据
|
|
this.initCategory(categoryData.data.list);
|
|
|
|
this.isLoading = false;
|
|
},
|
|
|
|
/**
|
|
* 初始化分类列表数据
|
|
* @param {Object} result
|
|
*/
|
|
initCategory(list) {
|
|
this.list = list;
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
<style>
|
|
page {
|
|
background: #fff;
|
|
}
|
|
</style>
|
|
<style lang="scss" scoped>
|
|
.cate-content {
|
|
background: #fff;
|
|
height: calc(100vh - 120rpx);
|
|
display: flex;
|
|
}
|
|
|
|
.cate-left {
|
|
width: 190rpx;
|
|
color: #444;
|
|
height: 100%;
|
|
background: #f8f8f8;
|
|
}
|
|
|
|
.cate-right {
|
|
height: 100%;
|
|
padding: 40rpx 0;
|
|
overflow: hidden;
|
|
}
|
|
.type-nav {
|
|
display: block;
|
|
width: 190rpx;
|
|
height: 100rpx;
|
|
line-height: 100rpx;
|
|
font-size: 28rpx;
|
|
text-align: center;
|
|
color: #999;
|
|
}
|
|
|
|
.type-nav.selected {
|
|
background: #fff;
|
|
color: #FF875B;
|
|
font-size: 28rpx;
|
|
}
|
|
|
|
.cate-tow-img{
|
|
width:480rpx;
|
|
margin: 0 40rpx 40rpx;
|
|
height: 164rpx;
|
|
background: #ccc;
|
|
border-radius: 16rpx;
|
|
}
|
|
.cate-tow-group{
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
margin-bottom: 40rpx;
|
|
&--title{
|
|
padding: 20rpx 40rpx;
|
|
display: block;
|
|
width: 100%;
|
|
font-size: 30rpx;
|
|
color: #333;
|
|
}
|
|
&--item{
|
|
margin-left: 40rpx;
|
|
}
|
|
&--img{
|
|
display: block;
|
|
width: 130rpx;
|
|
height: 130rpx;
|
|
}
|
|
&--name{
|
|
display: block;
|
|
text-align: center;
|
|
font-size: 24rpx;
|
|
margin: 10rpx 0 40rpx;
|
|
color: #333;
|
|
}
|
|
}
|
|
|
|
</style>
|
|
|