<template><view class="classify"><!-- 分类部分 --><view class="cate-left"><view :class="['cate-item',activeIndex==index?'active':'']" v-for="(item,index) in cateList" :key="index"@click="changeActive(index)">{{item.classifyName}}</view></view><view class="cate-right"><view class="cate-content" v-for="(it,id) in 30" :key="id"  @click="getto(it)"><image src="../../static/images/userinfo.jpg" mode=""></image><view class="cate-text">好东西</view></view></view></view>
</template><script>export default {data() {return {scrollTop: 0,// 初始化的分类列表cateList: [{classifyName: '女装',id: 1}, {classifyName: '洗护',id: 2}, {classifyName: '内衣',id: 3}, {classifyName: '百货',id: 4}, {classifyName: '饰品',id: 5}, {classifyName: '母婴',id: 6}, {classifyName: '数码',id: 7}, {classifyName: '食品',id: 8}, {classifyName: '电器',id: 9}, {classifyName: '进口',id: 10}, {classifyName: '手机',id: 11}, {classifyName: '家装',id: 12}, {classifyName: '美妆',id: 13}],// 当前点击项的索引号activeIndex: 0,// 分类下的商品信息goodList: []};},methods: {async getcateList() {const res = await uni.$http.get('/classify')console.log(res)const {data: {classify,code}} = resif (code != 200) {return uni.showToast({title: '加载数据失败',duration: 1000,icon: 'none'})} else {this.cateList = classify// 获取第一个分类下的商品this.goodList = classify[0].children}},//更改点击项的索引号changeActive(i) {this.activeIndex = i// 已经获取到索引号this.goodList = this.cateList[i].children},//点击搜索框跳转到搜索页面getto(it) {console.log(it,123)uni.navigateTo({url: '/pages-zzfw/productDisplay-detail/productDisplay-detail'})},},onLoad() {// this.getcateList()}}
</script><style lang="scss" scoped>.classify {background-color: #fff;width: 100%;height: 100%;display: flex;justify-content: space-between;.cate-left {width: 200rpx;height: 100vh;overflow: auto;background-color: #F6F6F6;.cate-item {width: 100%;height: 100rpx;line-height: 100rpx;padding-left: 40rpx;box-sizing: border-box;}.active {background-color: #FFFFFF;position: relative;padding-left: 40rpx;box-sizing: border-box;&::before {content: '';display: block;width: 5rpx;border-radius: 6rpx;height: 50rpx;background-color: #FC4353;position: absolute;left: 5rpx;top: 30rpx;}}}.cate-right {width: 80%;height: 100vh;overflow: auto;.cate-content {float: left;width: 28%;height: 185rpx;text-align: center;margin: 20rpx 0 0 15rpx;padding: 5rpx;background: #f1f1f1;border-radius: 20rpx;image {width: 100rpx;height: 100rpx;}.cate-text {font-size: 34rpx;}}}}
</style>