guanmao-wxapp/pages/goods/classify.vue

<template>
	<view class="app-container">
		<view class="search-container">
			<view class="search">
				<image src="/static/icon/search.png" class=""></image>
				<input type="text" confirm-type="search" placeholder="输入分类名称进行搜索" v-model="keyword" @confirm="searchSubmit">
			</view>
		</view>
		
		<view class="main-container">
			<view class="left">
				<block v-for="(item, index) in leftList" :key='index'>
					<view class="item ellipsis" :class="leftCurrent == item.categoryId ? 'current':''" @tap="changeLeft(item.categoryId)">{{item.name}}</view>
				</block>
			</view>
			<view class="right">
				<block v-for="(item, index) in rightList" :key='index'>
					<view class="item" @tap="toList(item.categoryId, item.name)">
						<image :src="item.imgUrl" mode="aspectFill"></image>
						<text class="name ellipsis">{{item.name}}</text>
					</view>
				</block>
				<no-data v-if="!rightList.length" :showText="'暂无数据'"  style="width: 100%;"></no-data>
			</view>
		</view>
		
		<drag-button :isDock="true" :customBar="true" ref="dragButton"></drag-button>
	</view>
</template>

<script>
	import dragButton from '@/components/drag-button.vue';
	
	export default {
		components:{
			dragButton
		},
		data() {
			return {
				keyword: '',
				leftList: [],
				leftCurrent: 0,
				rightList: [],
			}
		},
		
		onShow() {
			if(uni.getStorageSync('categoryId')) {
				this.getLeftList();
			}
			
			this.$refs.dragButton.init();
		},
		
		onLoad() {
			if(!uni.getStorageSync('categoryId')) {
				this.getLeftList();
			}
		},
		
		methods: {
			// 获取一级菜单
			getLeftList() {
				this.$axios({
					url: '/goods/category/list',
					method: 'get',
					params: {}
				}).then(res => {
					this.leftList = res.data;
					if(uni.getStorageSync('categoryId')) {
						this.leftCurrent = uni.getStorageSync('categoryId');
						uni.setStorageSync('categoryId', 0);
					}else {
						this.leftCurrent = res.data.length > 0 ? res.data[0].categoryId : 0;
					}
					this.getRightList();
				})
			},
			
			// 获取二级菜单
			getRightList() {
				this.$axios({
					url: '/goods/category/list',
					method: 'get',
					params: {
						parentId: this.leftCurrent,
						name: this.keyword
					}
				}).then(res => {
					this.rightList = res.data;
				})
			},
			
			// 切换一级菜单
			changeLeft(pid) {
				this.leftCurrent = pid;
				this.getRightList();
			},
			
			// 搜索
			searchSubmit() {
				this.getRightList();
			},
			
			toList(cid, cname) {
				uni.navigateTo({
					url: '/packageGoods/pages/list?cid=' + cid + '&cname=' + cname
				})
			}
		}
	}
</script>

<style lang="scss">
	.app-container {
		background: #F4F2F2;
	}
	.search-container {
		background: #FFFFFF;
		padding: 12rpx 20rpx;
		border-bottom: 1px solid #F4F2F2;
		.search {
			height: 64rpx;
			display: flex;
			align-items: center;
			background: #F0F0F0;
			border-radius: 64rpx;
			padding: 0 20rpx;
			image {
				width: 28rpx;
				height: 28rpx;
			}
			input {
				width: 100%;
				padding-left: 15rpx;
			}
		}
	}
	.main-container {
		display: flex;
		height: calc(100vh - 88rpx);
		.left {
			width: 220rpx;
			height: 100%;
			overflow-y: scroll;
			background: #FFFFFF;
			box-sizing: border-box;
			padding: 30rpx 20rpx;
			flex-shrink: 0;
			.item {
				margin-bottom: 40rpx;
				font-size: 28rpx;
				color: #333333;
				line-height: 48rpx;
				border-radius: 48rpx;
				text-align: center;
				&.current {
					color: #FFFFFF;
					background: #FF3F42;
				}
			}
		}
		.right {
			width: 500rpx;
			margin: 20rpx 20rpx auto 10rpx;
			background: #FFFFFF;
			border-radius: 10rpx;
			display: flex;
			flex-wrap: wrap;
			padding: 0 20rpx 20rpx 20rpx;
			max-height: calc(100% - 20rpx);
			overflow-y: scroll;
			box-sizing: border-box;
			.item {
				display: flex;
				flex-direction: column;
				align-items: center;
				margin-right: 20rpx;
				margin-top: 20rpx;
				width: 140rpx;
				font-size: 24rpx;
				image {
					width: 140rpx;
					height: 140rpx;
					margin-bottom: 5rpx;
				}
				.name {
					width: 150rpx;
					text-align: center;
				}
				&:nth-child(3n) {
					margin-right: 0;
				}
			}
		}
	}
</style>