<template>
<view class="page">
<u-navbar title="WIFI配置" :border-bottom="false" :background="bgc" back-icon-color="#262B37" title-color='#262B37'
title-size='36' height='50' id="navbar">
</u-navbar>
<view class="box">
<view class="orderqx">
<view class="top">
<view class="one">
WIFI设置
</view>
<view class="two" @click="delflag = !delflag">
编辑
</view>
</view>
<view class="toptab">
<view class="">WIFI名称</view>
<view class="">WIFI密码</view>
<view class="" v-if="delflag">操作</view>
</view>
<view class="bottab" v-for="(item,index) in wifilist" :key="index">
<view class="">{{item.wifi == null ? '--' : item.wifi}}</view>
<view class="">{{item.password == null ? '--' : item.password}}</view>
<view class="" v-if="delflag">
<text style="color: #000;" @click="btnxg(item)">编辑</text> <text @click="btndel(item.wifiId)">删除</text>
</view>
</view>
<view class="addpz" @click="flag = true">
添加WIFI
</view>
</view>
<view class="wifilist">
<view class="name">
WIFI配置
</view>
<view class="list_item" v-for="(item,index) in sheshilist" :key="index" @click="btnroom(item.objId)">
<view class="">
{{item.name == null ? '--' : item.name}}
</view>
<view class="">
{{item.wifiName == null ? '--' : item.wifiName}} <u-icon name="arrow-right" color="#7C7C7C" size="28"></u-icon>
</view>
</view>
</view>
</view>
<view class="mask" v-if="flag"></view>
<view class="addwifi" v-if="flag">
<view class="name">
添加WIFI
</view>
<view class="one">
<view class="">
WIFI名称
</view>
<input type="text" v-model="wifiname" placeholder="输入WIFI名称"/>
</view>
<view class="one">
<view class="">
WIFI密码
</view>
<input type="text" v-model="wifipwd" placeholder="输入WIFI密码"/>
</view>
<view class="baocun" @click="btnadd">
保存
</view>
<view class="cha" @click="flag = false">×</view>
</view>
<view class="mask" v-if="editflag"></view>
<view class="addwifi" v-if="editflag">
<view class="name">
修改WIFI
</view>
<view class="one">
<view class="">
WIFI名称
</view>
<input type="text" v-model="wifiname" placeholder="输入WIFI名称"/>
</view>
<view class="one">
<view class="">
WIFI密码
</view>
<input type="text" v-model="wifipwd" placeholder="输入WIFI密码"/>
</view>
<view class="baocun" @click="btnedit">
修改
</view>
<view class="cha" @click="editflag = false">×</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
bgc: {
backgroundColor: "#fff",
},
flag:false,
delflag:false,
editflag:false,
wifilist:[],
wifiname:'',
wifipwd:'',
wifiid:'',
sheshilist:[]
}
},
onLoad() {
},
onShow() {
this.getwifilist()
this.getsheshilist()
},
methods: {
// 获取所有的房间与设施
getsheshilist(){
this.$u.get(`/app/room/getWifiList`).then(res => {
if (res.code == 200) {
this.sheshilist = res.data
}
})
},
// 点击删除wifi
btndel(wifiId){
let that = this
uni.showModal({
title: '温馨提示',
content: '您确定要删除此WiFi吗?',
success: function (res) {
if (res.confirm) {
that.$u.delete(`/app/wifi/${wifiId}`).then(res => {
if (res.code == 200) {
uni.showToast({
title: '删除成功',
icon: 'success',
duration:2000
})
that.getwifilist()
}else{
uni.showToast({
title: res.msg,
icon: 'none',
duration:2000
})
}
})
} else if (res.cancel) {
}
}
})
},
// 新增wifi
btnadd(){
let data = {
wifi:this.wifiname,
password:this.wifipwd
}
this.$u.post(`/app/wifi`,data).then(res => {
if (res.code == 200) {
uni.showToast({
title: '新增成功',
icon: 'success',
duration:2000
})
this.flag = false
this.getwifilist()
}else{
uni.showToast({
title: res.msg,
icon: 'none',
duration:2000
})
}
})
},
// 获取所有wifi列表
getwifilist(){
this.$u.get(`/app/wifi/list`).then(res => {
if (res.code == 200) {
this.wifilist = res.rows
}
})
},
// 点击修改WIFI
btnxg(item){
this.wifiname = item.wifi
this.wifipwd = item.password
this.wifiid = item.wifiId
this.editflag = true
},
// 点击确认修改wifi
btnedit(){
let data = {
wifiId:this.wifiid,
wifi:this.wifiname,
password:this.wifipwd
}
this.$u.put(`/app/wifi`,data).then(res => {
if (res.code == 200) {
uni.showToast({
title: '修改成功',
icon: 'success',
duration:2000
})
this.editflag = false
this.getwifilist()
}else{
uni.showToast({
title: res.msg,
icon: 'none',
duration:2000
})
}
})
},
// 点击房间或者大厅配置WIFI
btnroom(objId){
uni.navigateTo({
url:'/page_fenbaotwo/wifixz?objId=' + objId
})
}
}
}
</script>
<style lang="scss">
/deep/ .uicon-nav-back,
/deep/ .u-title{
padding-bottom: 20rpx;
}
.addwifi{
width: 750rpx;
height: 598rpx;
background: #FFFFFF;
position: fixed;
left: 0;
bottom: 0;
border-radius: 50rpx 50rpx 0 0;
padding: 0 72rpx;
box-sizing: border-box;
.cha{
color: #3D3D3D;
font-size: 50rpx;
font-weight: 600;
position: absolute;
top: 30rpx;
right: 30rpx;
}
.baocun{
width: 680rpx;
height: 104rpx;
background: #48893B;
font-weight: 600;
font-size: 36rpx;
color: #FFFFFF;
margin: auto;
text-align: center;
line-height: 104rpx;
border-radius: 24rpx;
position: fixed;
left: 50%;
transform: translateX(-50%);
bottom: 32rpx;
}
.one{
display: flex;
justify-content: space-between;
padding-bottom: 34rpx;
border-bottom: 1px solid #D8D8D8;
margin-top: 58rpx;
box-sizing: border-box;
font-size: 32rpx;
color: #3D3D3D;
input{
text-align: right;
}
}
.name{
font-weight: 600;
font-size: 36rpx;
color: #3D3D3D;
width: 100%;
text-align: center;
margin-top: 42rpx;
margin-bottom: 86rpx;
}
}
.mask{
width: 100%;
height: 100vh;
position: fixed;
top: 0;
left: 0;
background-color: #000;
opacity: .2;
}
.wifilist{
width: 680rpx;
max-height: 111308rpx;
background: #FFFFFF;
margin: auto;
border-radius: 24rpx;
margin-top: 22rpx;
padding: 36rpx 34rpx;
box-sizing: border-box;
.list_item{
display: flex;
justify-content: space-between;
margin-top: 30rpx;
padding-bottom: 30rpx;
box-sizing: border-box;
border-bottom: 1px solid #D8D8D8;
}
.name{
font-weight: 600;
font-size: 36rpx;
color: #3D3D3D;
}
.list_item{
}
}
.box{
height: 86vh;
overflow: scroll;
padding-bottom: 100rpx;
box-sizing: border-box;
}
.anniu{
width: 750rpx;
height: 152rpx;
background: #FFFFFF;
box-shadow: 0rpx 8rpx 20rpx 0rpx rgba(0,0,0,0.3);
border-radius: 0rpx 0rpx 0rpx 0rpx;
position: fixed;
left: 0;
bottom: 0;
padding-top: 24rpx;
box-sizing: border-box;
view{
width: 680rpx;
height: 104rpx;
background: #48893B;
font-weight: 600;
font-size: 36rpx;
color: #FFFFFF;
margin: auto;
text-align: center;
line-height: 104rpx;
border-radius: 24rpx;
}
}
.addpz{
font-size: 28rpx;
color: #48893B;
text-align: center;
line-height: 66rpx;
width: 100%;
height: 66rpx;
border-radius: 6rpx 6rpx 6rpx 6rpx;
border: 1rpx dashed #48893B;
margin-top: 10rpx;
}
.orderqx{
width: 680rpx;
max-height: 49200rpx;
background: #FFFFFF;
margin: auto;
margin-top: 22rpx;
border-radius: 20rpx;
padding: 36rpx 34rpx;
padding-bottom: 28rpx;
box-sizing: border-box;
.tongzhi{
display: flex;
justify-content: space-between;
margin-top: 34rpx;
padding-bottom: 20rpx;
box-sizing: border-box;
border-bottom: 1px solid #D8D8D8;
}
.bottab{
width: 100%;
height: 76rpx;
line-height: 76rpx;
background: #fff;
border-radius: 6rpx 6rpx 6rpx 6rpx;
display: flex;
view{
width: 50%;
text-align: center;
text{
display: inline-block;
margin-left: 20rpx;
color: red;
}
}
}
.toptab{
margin-top: 24rpx;
width: 100%;
height: 76rpx;
line-height: 76rpx;
background: #F0F0F0;
border-radius: 6rpx 6rpx 6rpx 6rpx;
display: flex;
view{
width: 50%;
text-align: center;
}
}
.top{
display: flex;
justify-content: space-between;
.one{
font-weight: 600;
font-size: 36rpx;
color: #3D3D3D;
}
.two{
font-size: 28rpx;
color: #48893B;
}
}
}
page {
background: #F6F6F6;
}
</style>