uni-app微信小程序——商城（4）——商家

上一篇文章介绍了商城主页的内容，商城主页也是默认的小程序进入的首页，主要介绍商品的类型和商品展示。本篇文章将会介绍商家一些信息，具体的内容还没有完善，只是对商家不同的类别进行分类展示，没有对商家做具体的内容介绍，后续会逐渐完善，然后再更新本章内容

效果图如下所示：

具体的代码如下：

<template>
	<view class="shopContent">
		<view class="header">
			<van-row>
				<!-- 搜索框 -->
				<van-col span="24">
					<van-search :value="searchValue" shape="round" placeholder="请输入搜索关键词" show-action @change="onChange" @search="onSearch" />
				</van-col>
			</van-row>
		</view>
		<view class="nav">
			<van-tree-select
				:items="shopList"
				:main-active-index.sync="mainActive"
				:active-id="activeId"
				@click-nav="onNavClick" 
				@click-item="onClickItem"
			>
				<template slot="content">
					
				</template>
			</van-tree-select>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				searchValue: '',
				//商铺列表
				shopList:[],
				mainActive:0,
				activeId:0,
			}
		},
		onLoad() {
			//获取商铺信息
			this.getShopData();

		},
		methods: {
			/* 搜索onChange */
			onChange(e) {
				this.value = e.detail
			},
			/* 搜索onSearch */
			onSearch() {
			
			},
			//获取商铺信息
			getShopData(){
				var data = {
					"shops": [{
							"activeId": 0,
							"text": "全部商铺",
							"children":[{
								"id":1,
								"text":"每日优鲜0",
							},
							{
								"id":2,
								"text":"水果商铺0",
							},
							{
								"id":3,
								"text":"衣衣不舍0",
							}]
						},
						{
							"activeId":1,
							"text": "人气排名",
							"children":[{
								"id":11,
								"text":"每日优鲜1",
							},
							{
								"id":12,
								"text":"水果商铺1",
							},
							{
								"id":13,
								"text":"衣衣不舍1",
							}]
						},
						{
							"activeId": 2,
							"text": "评分排名",
							"children":[{
								"id":21,
								"text":"每日优鲜2",
							},
							{
								"id":22,
								"text":"水果商铺2",
							},
							{
								"id":23,
								"text":"衣衣不舍2",
							}]
						},
					]
				};
				this.shopList = data.shops
				console.log(this.shopList)
			},
			//左侧导航点击事件
			onNavClick({ detail = {} }) {
				console.log(detail.index)
				this.mainActive = detail.index
			},
			//右侧选中事件
			onClickItem({detail = {} }){
				console.log(detail)
			}
		}
	}
</script>

<style>
	.shopContent{
		width: 100%;
		height: 100%;
		margin: 0 ;
	}
	.header{
		width: 100%;
		height: 20%;
	}
	.nav{
		width: 100%;
		height: 80%;
	}
	.van-tree-select{
		height: 100% !important;
	}
	.van-tree-select__content{
		-webkit-flex: 3!important;
		flex: 3!important;
	}
</style>

虽然做的页面比较简单，功能也比较少，但是具体的业务流程还是实现的，后续我会一点点具体完善该功能模块，添加商家的详情页面等等

该页面主要使用了Vant Weapp中的van-tree-select组件，分类选择，来实现对商家店铺不同种类的分类。

本章就先写到这里，如有不足，还望斧正，谢谢~