project/project1/pages/type/type.vue

<template>
	<view class="type">
		<!-- 搜索框 -->
		<van-search :value="value" placeholder="请输入搜索关键词" />
		<!-- 分类选择 -->
		<van-tree-select :items="categoryInfoList" :main-active-index.sync="active" height="100vh" @click-nav="onClickNav">
			<!-- v-slot="content" => #content -->
			<template #content>
				<!-- 分类类型图片 -->
				<image v-if="categoryInfoList[active]" :src="categoryInfoList[active].pic"></image>
				<!-- 当前分类下的商品 -->
				<van-card
					v-for="(item,index) in prodList" :key="index"
					@click.native = "onClickItem(item)"
				  :num="item.totalStocks"
				  :price="item.price"
				  :desc="item.brief"
				  :title="item.prodName"
				  :thumb="item.pic"
				></van-card>
				<!-- 如果没有商品信息 -->
				<van-empty v-if="prodList < 0" description="当前分类没有商品" />
			</template> 
		</van-tree-select>
	</view>
</template>

<script>
	import {
		pageProd,
		categoryInfo
	} from '../../api/type.js'
	export default {
		data() {
			return {
				value: "",
				active: 0,
				prodList:[],
				categoryInfoList:[]
			}
		},
		onLoad() {
			let menu;
			categoryInfo().then(res => {
				menu = res;
				menu.map((item) => {
					item.text = item.categoryName;
				})
				this.categoryInfoList = menu;
				this.onClickNav();
			}) 
		},
		methods: {
			onClickNav(event) {
				let ind = event ? event.detail.index : 0;
				pageProd({
					categoryId:this.categoryInfoList[ind].categoryId
				}).then(res => {
					this.prodList = res.records;
				})
			},
			onClickItem(event) {
				uni.navigateTo({
					url:`/pages/detail/detail?id=${event.prodId}`
				})
			}
		}
	}
</script>

<style lang="less">
	.van-tree-select__content {
		image {
		height: 200rpx;
		}
	}
</style>