Uni app product classification

<template>
	<view class="classify">
		<!--  The classification part  -->
		<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"> good thing </view>
			</view>
		</view>
	</view>
</template>

<script> export default {
       data() {
       return {
       scrollTop: 0, //  Initialized classification list  cateList: [{
       classifyName: ' Women's wear ', id: 1 }, {
       classifyName: ' Wash and protect ', id: 2 }, {
       classifyName: ' Underwear ', id: 3 }, {
       classifyName: ' department ', id: 4 }, {
       classifyName: ' Ornaments ', id: 5 }, {
       classifyName: ' Maternal and infant ', id: 6 }, {
       classifyName: ' Digital ', id: 7 }, {
       classifyName: ' food ', id: 8 }, {
       classifyName: ' Electrical appliances ', id: 9 }, {
       classifyName: ' import ', id: 10 }, {
       classifyName: ' mobile phone ', id: 11 }, {
       classifyName: ' Home decoration ', id: 12 }, {
       classifyName: ' Beauty makeup ', id: 13 }], //  The index number of the currently clicked item  activeIndex: 0, //  Commodity information under classification  goodList: [] }; }, methods: {
       async getcateList() {
       const res = await uni.$http.get('/classify') console.log(res) const {
       data: {
       classify, code } } = res if (code != 200) {
       return uni.showToast({
       title: ' Failed to load data ', duration: 1000, icon: 'none' }) } else {
       this.cateList = classify //  Get the goods under the first category  this.goodList = classify[0].children } }, // Change the index number of the clicked item  changeActive(i) {
       this.activeIndex = i //  Index number obtained  this.goodList = this.cateList[i].children }, // Click the search box to jump to the search page  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>