<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>