<template> <view class="page"> <u-navbar title="大厅设施信息" :border-bottom="false" :background="bgc" back-icon-color="#262B37" title-color='#262B37' title-size='36' height='48' id="navbar"> </u-navbar> <view class="box"> <view class="ulbox"> <view class="one"> 设施名称 </view> <view class="two"> <input type="text" v-model="name" style="text-align: right;" placeholder="输入设施名称"/> </view> </view> <view class="ulbox" @click="showone = true"> <view class="one"> 设施类型 </view> <view class="two"> {{ksfs}} <image src="https://api.ccttiot.com/smartmeter/img/static/uS5JydUQDmvbMyg4nsdo" mode=""></image> </view> </view> <view class="ulbox" @click="dtflags = true"> <view class="one"> 设备绑定 </view> <view class="two"> {{obj.device.sn == null ? '' : obj.device.sn}} <image src="https://api.ccttiot.com/smartmeter/img/static/uS5JydUQDmvbMyg4nsdo" mode=""></image> </view> </view> <view class="ulbox" style="border: none;" @click="btnshoufei"> <view class="one"> 收费方式 </view> <view class="two"> <image src="https://api.ccttiot.com/smartmeter/img/static/uS5JydUQDmvbMyg4nsdo" mode=""></image> </view> </view> <view class="" style="margin-top: 10rpx;"> <text style="margin-right: 20rpx;color: #48893B;" v-for="(item,index) in namelist" :key="index">{{item}}</text> </view> <u-select v-model="showone" :list="listone" @confirm="btnone"></u-select> </view> <view class="anniu"> <view class="tougang" @click="btndel"> 删除 </view> <view class="tougang" @click="btnshop"> 修改 </view> </view> <view class="mask" style="z-index: 3;" v-if="dtflags"></view> <view class="addmen" v-if="dtflags"> <view class="top"> <view class="cha" @click="dtflags = false"> × </view> <view class="name"> 请选择投放设备方式 </view> </view> <view class="one" @click="btnsaoma"> <view class="lt"> <view class="saoma"> 扫码投放 </view> <view class="saomas"> 扫描设备上的二维码 </view> <view class="saomas"> 投放设施 </view> </view> <view class="rt"> <image src="https://api.ccttiot.com/smartmeter/img/static/ukzEfdUUjPKUUOxonIgm" mode=""></image> </view> </view> <view class="one" @click="btntouf"> <view class="lt"> <view class="saoma"> 未投放设备列表投放 </view> <view class="saomas"> 选择未投放列表中的设备 </view> <view class="saomas"> 投放设施 </view> </view> <view class="rt"> <image src="https://api.ccttiot.com/smartmeter/img/static/ukzEfdUUjPKUUOxonIgm" mode=""></image> </view> </view> </view> </view> </template> <script> export default { data() { return { bgc: { backgroundColor: "#fff", }, listone:[{ value: '2', label: '麻将桌' },{ value: '3', label: '台球桌' }], showone:false, ksfs:'', equipmentId:'', name:'', type:'', obj:{}, namelist:[], ruleIdlist:[], dtflags: false, } }, onLoad(option) { this.equipmentId = option.equipmentId }, onShow() { this.getxx() this.namelist = [] if(uni.getStorageSync('namelist') && uni.getStorageSync('ruleIdlist')){ this.namelist = uni.getStorageSync('namelist') this.ruleIdlist = uni.getStorageSync('ruleIdlist') } }, onHide() { // 移除存储中的数据 uni.removeStorageSync('namelist') uni.removeStorageSync('ruleIdlist') }, onUnload() { // 移除存储中的数据 uni.removeStorageSync('namelist') uni.removeStorageSync('ruleIdlist') }, methods: { // 点击未投列表放选择 btntouf(){ this.dtflags = false uni.navigateTo({ url: '/page_shanghu/weishebei?equipmentId=' + this.obj.equipmentId }) }, // 大厅设施点击扫码投放 btnsaoma() { uni.scanCode({ onlyFromCamera: true, scanType: ['qrCode'], success: res => { function getQueryParam(url, paramName) { let regex = new RegExp(`[?&]${paramName}=([^&]*)`) let results = regex.exec(url); return results ? decodeURIComponent(results[1].replace(/\+/g, ' ')) : null } console.log(res); let sceneValue = res.result let decodedValue = decodeURIComponent(sceneValue) let id = getQueryParam(decodedValue, 'sn') let that = this let data = { deviceId: id, equipmentId: this.obj.equipmentId } that.$u.put(`/app/store/bandGate`, data).then(res => { if (res.code == 200) { uni.showToast({ title: '绑定成功', icon: 'success', duration: 2000 }) that.dtflags = false this.getxx() } else { uni.showToast({ title: res.msg, icon: 'none', duration: 2000 }) } }) } }) }, // 点击删除大厅设施 btndel(){ let that = this uni.showModal({ title: '温馨提示', content: '您确定要删除此设施吗?', success: function (res) { if (res.confirm) { that.$u.delete(`/app/equipment/${that.equipmentId}`).then((res) => { if (res.code == 200) { uni.showToast({ title: '删除成功', icon: 'success', duration:2000 }) setTimeout(()=>{ uni.navigateBack({ delta:1 }) },1000) }else{ uni.showToast({ title: res.msg, icon: 'none', duration:2000 }) } }) } else if (res.cancel) { } } }) }, // 点击编辑大厅 btnshop(){ let data = { equipmentId:this.equipmentId, name:this.name, type:this.ksfsid, ruleIds:this.ruleIdlist } this.$u.put(`/app/equipment`,data).then(res =>{ if(res.code == 200){ uni.showToast({ title: '修改成功', icon: 'success', duration:2000 }) setTimeout(()=>{ uni.navigateBack() },1000) }else{ uni.showToast({ title: res.msg, icon: 'none', duration:2000 }) } }) }, // 点击选择收费 btnshoufei(){ uni.navigateTo({ url:'/page_moban/shoufei' }) }, // 确认选择类型 btnone(e){ this.ksfs = e[0].label this.ksfsid = e[0].value }, // 获取设备信息 getxx(){ this.$u.get(`/app/equipment/${this.equipmentId}`).then(res => { if (res.code == 200) { this.name = res.data.name this.type = res.data.type this.ksfsid = res.data.type if(res.data.feeRuleVOS != null){ res.data.feeRuleVOS.forEach(item =>{ this.namelist.push(item.explain) }) } if(res.data.type == 2){ this.ksfs = '麻将桌' }else if(res.data.type == 3){ this.ksfs = '棋牌桌' } this.obj = res.data } }) }, } } </script> <style lang="scss"> /deep/ .u-iconfont, /deep/ .u-title{ padding-bottom: 20rpx; box-sizing: border-box; } .mask{ width: 100%; height: 100vh; background-color: #000; opacity: .3; position: fixed; top: 0; left: 0; } .addmen { width: 694rpx; height: 702rpx; background: linear-gradient(180deg, #DEF1DA 0%, #FFFFFF 100%, #FFFFFF 100%); border-radius: 36rpx 36rpx 36rpx 36rpx; position: fixed; top: 464rpx; left: 50%; transform: translateX(-50%); z-index: 3; box-shadow: 1px 2px 4px -3px; .one { display: flex; align-items: center; justify-content: space-between; width: 100%; .rt { image { width: 60rpx; height: 60rpx; } } .saoma { font-weight: 600; font-size: 36rpx; color: #48893B; margin-top: 10rpx; } .saomas { font-size: 28rpx; color: #48893B; margin-top: 10rpx; } width: 584rpx; height: 224rpx; border: 2rpx solid #48893B; border-radius: 20rpx; margin: auto; margin-top: 48rpx; padding: 38rpx 44rpx; box-sizing: border-box; } .top { display: flex; flex-wrap: wrap; padding: 0 26rpx; box-sizing: border-box; .name { font-weight: 600; font-size: 44rpx; color: #48893B; width: 100%; text-align: center; position: absolute; top: 56rpx; left: 50%; transform: translateX(-50%); } .cha { font-size: 68rpx; font-weight: 600; width: 100%; text-align: right; } } } .wz{ font-size: 24rpx; color: #3D3D3D; margin-top: 24rpx; margin-bottom: 20rpx; height: 50rpx; } .shichang{ .stop{ display: flex; width: 618rpx; height: 76rpx; line-height: 76rpx; background: #F0F0F0; view{ width: 50%; text-align: center; font-size: 28rpx; color: #3D3D3D; } } } .jieb{ 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; bottom: 0; left: 0; .bt{ width: 680rpx; height: 104rpx; background: #48893B; margin: auto; margin-top: 24rpx; border-radius: 24rpx; font-weight: 600; font-size: 36rpx; color: #FFFFFF; text-align: center; line-height: 104rpx; } } .lianwang{ width: 680rpx; height: 112rpx; background: #FFFFFF; display: flex; align-items: center; justify-content: space-between; margin: auto; margin-top: 22rpx; border-radius: 24rpx; padding: 36rpx 32rpx; box-sizing: border-box; .two{ font-size: 32rpx; color: #7C7C7C; } .thr{ font-size: 32rpx; color: #3D3D3D; display: flex; align-items: center; image{ width: 12rpx; height: 34rpx; margin-left: 10rpx; } } } .jichuxx{ width: 680rpx; max-height: 458rpx; background: #FFFFFF; box-sizing: border-box; padding: 44rpx 34rpx; box-sizing: border-box; margin: auto; margin-top: 22rpx; border-radius: 20rpx; .top{ border-left: 14rpx solid #48893B; font-weight: 600; font-size: 36rpx; color: #3D3D3D; padding-left: 24rpx; box-sizing: border-box; } .one{ display: flex; justify-content: space-between; align-items: center; margin-top: 28rpx; .two{ font-size: 32rpx; color: #7C7C7C; } .thr{ font-size: 32rpx; color: #3D3D3D; } } } .toufangbox{ width: 680rpx; height: 284rpx; background: #FFFFFF; border-radius: 24rpx 24rpx 24rpx 24rpx; margin: auto; margin-top: 22rpx; padding: 44rpx 34rpx; box-sizing: border-box; .shebeibj{ display: flex; justify-content: space-between; .lt{ .name{ font-weight: 600; font-size: 40rpx; color: #262B37; } .zt{ font-size: 28rpx; color: #5B5B5B; margin-top: 12rpx; text{ color: #00BA88; } } } .rt{ image{ width: 196rpx; height: 196rpx; } } } } .xuanze{ width: 750rpx; height: 494rpx; background: #FFFFFF; border-radius: 40rpx 40rpx 0 0; position: fixed; left: 0; bottom: 0; z-index: 1; padding: 42rpx 62rpx; box-sizing: border-box; .changj{ display: flex; justify-content: space-between; flex-wrap: wrap; .changj_item{ width: 302rpx; height: 110rpx; background: #F0F0F0; border-radius: 6rpx 6rpx 6rpx 6rpx; font-weight: 600; text-align: center; line-height: 110rpx; font-size: 36rpx; margin-top: 40rpx; color: #3D3D3D; } } .top{ display: flex; justify-content: space-between; view{ font-weight: 600; font-size: 36rpx; color: #3D3D3D; image{ width: 50rpx; height: 50rpx; } } } } .mask{ width: 100%; height: 100vh; background-color: #000; opacity: .3; position: fixed; top: 0; left: 0; } .anniu{ width: 100%; height: 152rpx; background: #FFFFFF; box-shadow: 0rpx 8rpx 20rpx 0rpx rgba(0,0,0,0.3); border-radius: 0rpx 0rpx 0rpx 0rpx; display: flex; padding: 24rpx 36rpx; box-sizing: border-box; justify-content: space-between; text-align: center; position: fixed; left: 0; bottom: 0; .tougang{ width: 300rpx; margin: auto; height: 104rpx; background: #48893B; font-size: 36rpx; color: #FFFFFF; line-height: 104rpx; border-radius: 20rpx; } } .box{ width: 680rpx; max-height: 2708rpx; background: #FFFFFF; border-radius: 20rpx; margin: auto; margin-top: 28rpx; padding: 0 30rpx; box-sizing: border-box; padding-bottom: 30rpx; .ulbox{ width: 100%; height: 118rpx; line-height: 118rpx; display: flex; justify-content: space-between; border-bottom: 1px solid #D8D8D8; .one{ font-size: 32rpx; color: #3D3D3D; } .two{ font-size: 32rpx; color: #7C7C7C; display: flex; align-items: center; image{ width: 14rpx; height: 42rpx; margin-left: 20rpx; } } } } page { background: #F6F6F6; } </style>