Uni app wechat applet - Mall (4) - merchants

The last article introduced the content of the mall homepage , The home page of the mall is also the home page of the default applet , It mainly introduces the types of commodities and commodity display . This article will introduce some information about businesses , The specific content has not been improved , Just show different categories of businesses , There is no specific content introduction to the business , The follow-up will gradually improve , Then update the content of this chapter

The effect is shown below ：

The specific code is as follows ：

<template>
	<view class="shopContent">
		<view class="header">
			<van-row>
				<!--  Search box  -->
				<van-col span="24">
					<van-search :value="searchValue" shape="round" placeholder=" Please enter search keywords " 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: '',
				// List of shops 
				shopList:[],
				mainActive:0,
				activeId:0,
			}
		},
		onLoad() {
			// Obtain shop information 
			this.getShopData();

		},
		methods: {
			/*  Search for onChange */
			onChange(e) {
				this.value = e.detail
			},
			/*  Search for onSearch */
			onSearch() {
			
			},
			// Obtain shop information 
			getShopData(){
				var data = {
					"shops": [{
							"activeId": 0,
							"text": " All shops ",
							"children":[{
								"id":1,
								"text":" The daily optimal fresh 0",
							},
							{
								"id":2,
								"text":" Fruit shop 0",
							},
							{
								"id":3,
								"text":" Don't give up your clothes 0",
							}]
						},
						{
							"activeId":1,
							"text": " Popularity ranking ",
							"children":[{
								"id":11,
								"text":" The daily optimal fresh 1",
							},
							{
								"id":12,
								"text":" Fruit shop 1",
							},
							{
								"id":13,
								"text":" Don't give up your clothes 1",
							}]
						},
						{
							"activeId": 2,
							"text": " Rating ranking ",
							"children":[{
								"id":21,
								"text":" The daily optimal fresh 2",
							},
							{
								"id":22,
								"text":" Fruit shop 2",
							},
							{
								"id":23,
								"text":" Don't give up your clothes 2",
							}]
						},
					]
				};
				this.shopList = data.shops
				console.log(this.shopList)
			},
			// Left navigation click event 
			onNavClick({ detail = {} }) {
				console.log(detail.index)
				this.mainActive = detail.index
			},
			// Select the event on the right 
			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>

Although the page is relatively simple , There are few functions , But the specific business process is still implemented , In the future, I will improve this function module in detail , Add the details page of the merchant, etc

This page mainly uses Vant Weapp Medium van-tree-select Components , Category selection , To realize the classification of different types of stores .

This chapter will be written here first , If there is any deficiency , Still hope more , thank you ~