project/project2/pages/type/type.vue

<template>
	<view class="type">
		<!-- 搜索框 -->
		<van-search :value="value" placeholder="请输入搜索关键词" />
		<!-- 分类选择 -->
		<van-tree-select
		  :items="categoryList"
		  :main-active-index="active"
			height="100vh"
			@click-nav="seleectMain"
		>
		<!--  v-slot="content" -->
			<template #content>
				<image :src="categoryList[active].pic" mode="" class="pictures"></image>
				<van-card
					v-for="(item,index) in pageProdList" :key="index"
					@click.native="goDetail(item)"
				  :num="item.totalStocks"
				  :price="item.price"
				  :desc="item.brief"
				  :title="item.prodName"
				  :thumb="item.pic"
				></van-card>
			</template>
		</van-tree-select>
	</view>
</template>

<script>
	import {
		categoryInfo,
		pageProd
	} from '@/api/type.js'
	export default {
		data() {
			return {
				value: "",
				categoryList:[],
				active: 0,
				pageProdList:[]
			}
		},
		async	onLoad() {
			this.categoryList = await categoryInfo();
			console.log(this.categoryList,'categoryList')
			this.categoryList.map((item) => {
				item.text = item.categoryName;
			})
			this.getList();
		},
		methods: {
			seleectMain(event) {
				console.log(event,'选择');
				this.active = event.detail.index;
				this.getList(this.active)
			},
			getList(event) {
				let index = event ? event : this.active;
				pageProd({
					categoryId: this.categoryList[index].categoryId
				}).then(res => {
					this.pageProdList = res.records;
				})
			},
			goDetail(event) {
				console.log(event,'事件')
				uni.navigateTo({
					url:`/pages/detail/detail?id=${event.prodId}`
				})
			}
		}
	}
</script>

<style lang="less">
	.van-card__img {
		margin-top: -4rpx;
	}
	.pictures {
		height: 200rpx;
	}
</style>