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>