uniapp仿美团左侧菜单栏

uniapp仿美团左侧菜单栏
实现仿美团菜单页，效果图如下

主题内容

<template>
	<view class="deviceList">
		<!-- 左侧菜单 -->
		<view class="findRoom-l">
			<scroll-view scroll-y="true" style="background: #fff;">
				<view class="scroll-item" @click="onScroll(item,index)" v-for="(item,index) in leixingList" :ket='index'
					:class="index==ind-1?'per-btn':index == ind+1 ?'next-btn':index== ind?'scr':'scroll-item'">
					{{item.textWithCount}}
				</view>
			</scroll-view>
		</view>
		<!-- 右侧内容区 -->
		<view class="findRoom-r">
			<scroll-view scroll-y="true" class=" ">
				<view class="findRoom-c" v-if="indx == typeID">
					<view style="color: #8C8C8C;margin-top: 24rpx;margin-left: 38rpx;">{{typeName}}</view>
					<view class="findRoom-c-l" v-for="(item,index) in deviceList" :key='index'>
						<view class="findRoom-state">{{item.dev.stateText}}</view>
						<view class="findRoom-c-l-t">
							<view class="findRoom-data">
								<view class="findRoom-room-icon">
									<image src="../static/room-icon.png"></image>
								</view>
								<view class="findRoom-room-text">{{item.dev.typeText}}</view>
							</view>
							<view class="findRoom-c-r" style="width: 32rpx;height: 32rpx;">
								<image src="../static/key.png"></image>
							</view>
						</view>
						<view class="findRoom-c-l-d">
							<view class="findRoom-c-l-name">名称：{{item.dev.name}}</view>
							<view class="findRoom-c-l-code">编号：{{item.dev.code}}</view>
						</view>
						<view class="findRoom-c-l-b">
							<view class="findRoom-c-icon">
								<view class="findRoom-c-icon-fun" @click="onRoomFun(item.dev)">
									<view style="width: 28rpx;height: 30rpx;margin-right: 8rpx;">
										<image src="../static/room-fun-b.png"></image>
									</view>
									<view>功能</view>
								</view>
								<view class="findRoom-c-icon-edit" @click="onDeviceEdit(item.dev)">
									<view style="width: 28rpx;height: 30rpx;margin-right: 8rpx;">
										<image src="../static/room-edit.png"></image>
									</view>
									<view>编辑</view>
								</view>
							</view>
							<view class="findRoom-c-icon-delete" @click="onDeviceDelete(item.dev.id)">
								<image src="../static/room-delete.png"></image>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import caller from '@/request/call.js';
	import apiCompany from '@/request/apiCompany.js';
	import throttle from "@/request/throttle.js"
	import utils from '@/utils/api/company/building.js'
	export default {
		data() {
			return {
				ind: '',
				indx: 1,
				typeID: '',
				typeName: '',
				parentNames:'',
				leixingList: [],
				deviceList: [],
			}
		},
		methods: {
			// 获取设备列表
			onDeviceList(id) {
				utils.device.gets.groupByType({
					id: this.roomID,
					building:true
				}).then((_res) => {
					console.log(_res);
					this.leixingList = _res
					this.deviceList = _res[0].devs
					this.typeName = _res[0].text
					this.typeID = _res[0].id
					console.log(789, this.deviceList, 11, this.typeName, 222, this.typeID)
				}).catch(utils.device.gets.doCatch)
			},

			// 点击左侧菜单
			onScroll: throttle(function(dev, inx) {
				this.ind = inx
				this.indx = Number(inx) + 1
				this.deviceList = dev.devs
				this.typeName = dev.text
				this.typeID = dev.id
				console.log("this.deviceList", this.deviceList)
			}),
			// 添加设备
			onAddDevice: throttle(function() {
				uni.navigateTo({
					url: "/packageA/pages/facilities/adddevice?roomID=" + this.roomID +
						'&parentNames=' + this.parentNames
				})
			}),
			// 扫描添加设备
			onScanDevice: throttle(function() {


			}),
			// 功能页
			onRoomFun: throttle(function(item) {
				if (item.type == 1) {
					uni.navigateTo({
						url: "/packageD/pages/ljkjOne/ljkjOne?deviceID=" + item.id
					})
				} else if (item.type == 9) {
					uni.navigateTo({
						url: "/packageD/pages/ljkjtwo/HomePage?device=" + item.id
					})
				} else {
					uni.showToast({
						title: '暂未开放',
						duration: 2000,
						icon: 'error'
					});
				}

			}),
			// 编辑设备
			onDeviceEdit: throttle(function(item) {
				uni.navigateTo({
					url: '/packageA/pages/facilities/editdevice?parentNames=' + this.parentNames +'&deviceData=' + encodeURIComponent(JSON.stringify(item))
				})
			}),
			// 删除设备
			onDeviceDelete: throttle(function(id) {
				let that = this
				uni.showModal({
					title: '删除设备',
					content: '是否删除该设备',
					success: function(res) {
						if (res.confirm) {
							that.onDeleteDevApi(id)
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			}),
			// 删除设备api
			onDeleteDevApi(id) {
				caller
					.call(apiCompany.device.deletedevice, {
						id: id
					})
					.then(_res => {
						this.onDeviceList(this.roomID);
					})
					.catch(caller.doCatch);
			}
		},
		onShow() {
			this.onDeviceList(this.roomID)
		},
		onLoad(option) {
			this.roomID = option.roomID
			this.parentNames = option.parentNames
			console.log("this.roomID", this.roomID)
		}
	}
</script>

<style lang="less" scoped>
	.deviceList {
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: space-between;
	}

	.findRoom-l {
		width: calc(288rpx - 32rpx);
		height: 100%;
		background: #F4F4F4;
		overflow-y: auto;
		position: absolute;
		padding-bottom: 40rpx;

		.scroll-item {
			width: 100%;
			height: 92rpx;
			line-height: 92rpx;
			color: #171717;
			background: #F4F4F4;
			padding-left: 32rpx;
		}

		.per-btn {
			border-bottom-right-radius: 20rpx !important;
			overflow: hidden !important;
		}

		.next-btn {
			border-top-right-radius: 20rpx !important;
			overflow: hidden !important;
		}

		.scr {
			color: #2D91F0;
			font-weight: bold;
			background: #fff !important;
			border-radius: 0;
		}
	}

	.findRoom-r {
		width: calc(100% - 288rpx);
		// width: 462rpx;
		height: 100%;
		background: #fff;
		overflow-y: auto;
		padding-bottom: 140rpx;
		position: absolute;
		right: 0;

		.findRoom-c-l:nth-child(1) {
			width: 100%;
			height: 144rpx !important;
			padding-left: 38rpx;
			border-bottom: 1rpx solid #F4F4F4;
		}

		.findRoom-c-l {
			width: 100%;
			// height: 216rpx;
			padding-left: 38rpx;
			padding-bottom: 20rpx;
			border-bottom: 1rpx solid #F4F4F4;

			.findRoom-state {
				width: 80rpx;
				height: 46rpx;
				font-size: 24rpx;
				text-align: center;
				line-height: 46rpx;
				// padding: 10rpx;
				margin-top: 32rpx;
				color: #568DC1;
				background: #EAF4FD;
			}

			.findRoom-c-l-t {
				display: flex;
				justify-content: space-between;
				height: 64rpx;
				margin-top: 16rpx;

				.findRoom-data {
					height: 64rpx;
					// margin-top: 32rpx;
					line-height: 64rpx;
					display: flex;
					justify-content: space-between;

					.findRoom-room-icon {
						width: 64rpx;
						height: 64rpx;
					}

					.findRoom-room-text {
						font-size: 34rpx;
						margin-left: 24rpx;
					}
				}

				.findRoom-c-r {
					width: 14rpx;
					height: 26rpx;
					margin-right: 34rpx;
					margin-top: 20rpx;
				}
			}

			.findRoom-c-l-d {

				.findRoom-c-l-name,
				.findRoom-c-l-code {
					color: #8C8C8C;
					width: calc(100% - 34rpx);
					margin-top: 16rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
			}

			.findRoom-c-l-b {
				width: 100%;
				height: 30rpx;
				line-height: 30rpx;
				margin-top: 38rpx;
				display: flex;
				justify-content: space-between;

				.findRoom-c-icon {
					display: flex;
					justify-content: space-between;

					.findRoom-c-icon-fun,
					.findRoom-c-icon-edit {
						display: flex;
						justify-content: space-between;
					}

					.findRoom-c-icon-edit {
						display: flex;
						justify-content: space-between;
						margin-left: 48rpx;
					}

				}

				.findRoom-c-icon-delete {
					width: 28rpx;
					height: 28rpx;
					margin-right: 32rpx;
				}
			}
		}
	}

	.addDev_btn {
		width: 590rpx;
		position: fixed;
		left: 50%;
		margin-left: -295rpx;
		bottom: 32rpx;
		display: flex;
		justify-content: space-between;

		.formDev {
			width: 338rpx;
			height: 92rpx;
			line-height: 92rpx;
			display: flex;
			justify-content: space-between;
			background: #4C4C4C;
			border-top-left-radius: 40rpx;
			border-bottom-left-radius: 40rpx;
		}

		.scanDev {
			width: 252rpx;
			height: 92rpx;
			line-height: 92rpx;
			display: flex;
			justify-content: space-between;
			background: #2D91F0;
			border-top-right-radius: 40rpx;
			border-bottom-right-radius: 40rpx;
		}
	}
</style>