<template> <view class="page"> <u-navbar title="编辑大厅设施" :border-bottom="false" :background="bgc" back-icon-color="#262B37" title-color='#262B37' title-size='36' height='40' id="navbar"> </u-navbar> <view class="dalist"> <view class="box"> <view class="name"> <view class="lt"> 名称 </view> <view class="rt"> <input type="text" v-model="nametxt" placeholder="请输入大厅设施名称"/> <image src="https://api.ccttiot.com/smartmeter/img/static/uCta8cp7uXd1lGjZS6sc" mode=""></image> </view> </view> <view class="name"> <view class="lt"> 类型 </view> <view class="rt" @click="show = true"> {{leixing}} <image src="https://api.ccttiot.com/smartmeter/img/static/uCta8cp7uXd1lGjZS6sc" mode=""></image> </view> </view> <view class="name" @click="btnewm"> <view class="lt"> 生成二维码 </view> <view class="rt"> <image src="https://api.ccttiot.com/smartmeter/img/static/uCta8cp7uXd1lGjZS6sc" mode=""></image> </view> </view> <view class="name" style="border: none;" @click="dtflags = true"> <view class="lt"> 设备绑定 </view> <view class="rt"> {{obj.sn == null ? '' : obj.sn}} <image src="https://api.ccttiot.com/smartmeter/img/static/uCta8cp7uXd1lGjZS6sc" mode=""></image> </view> </view> </view> <view class="biaoqian"> <view class="name"> 标签设置 </view> <view class="bqliat"> <view class="bqitem" v-for="(item, index) in biaoqianlist" :key="index" @click="btnbq(item.dictValue,index)" :class="{ 'active': isSelected(item.dictValue) }"> {{ item.dictLabel }} </view> </view> </view> <view class="biaoqian"> <view class="name"> 大厅设施照片 </view> <image v-if="imgurl == ''" @click="getImage" src="https://api.ccttiot.com/smartmeter/img/static/uRBDOOtzMZgSbCcXQPGH" mode=""></image> <image v-else :src="imgurl" @click="getImage" mode=""></image> <ksp-cropper mode="free" :width="150" :height="150" :maxWidth="1024" :maxHeight="1024" :url="url" @cancel="oncancel" @ok="onok"></ksp-cropper> </view> <view class="biaoqian"> <view class="name"> 价格设置 </view> <view class="shoufei" @click="btnshoufei"> <view class="shang"> <view class=""> 收费方式 </view> <view class=""> <image src="https://api.ccttiot.com/smartmeter/img/static/u0rIwef50qNN4aaeqSfl" mode=""></image> </view> </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> </view> <u-select v-model="show" :list="list" @confirm="confirm"></u-select> <view class="anniu"> <view class="xinjian" @click="btndt"> {{txtdel}} </view> <view class="queren" @click="btnmd"> 确认编辑 </view> </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", }, leixing:'请选择类型', show:false, checked:false, list:[ { value: '1', label: '麻将桌' }, { value: '2', label: '台球桌' } ], type:'', biaoqianlist:[], selectedIndices:[], token:'', url:'', imgurl:'', roomId:'', roomobj:{}, nametxt:'', namelist:[], ruleIdlist:[], txtdel:'', obj:{}, dtflags: false, } }, onLoad(option) { this.roomId = option.roomId }, onShow() { this.namelist = [] this.getbiaoqian() this.getQiniuToken() this.getroomxq() if(uni.getStorageSync('namelist')){ 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: { // 点击生成二维码 btnewm(){ if(this.obj.code == null){ uni.showToast({ title: '请添加大厅码', icon: 'none', duration: 2000 }) }else{ uni.navigateTo({ url:'/page_shanghu/erwm?roomId=' + this.obj.code }) } }, // 点击未投列表放选择 btntouf(){ this.dtflags = false uni.navigateTo({ url: '/page_shanghu/weishebei?equipmentId=' + this.obj.equipmentList[0].equipmentId + '&type=' + this.obj.equType }) }, // 大厅设施点击扫码投放 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 = { sn: id, objId: that.obj.equipmentList[0].equipmentId, type: that.obj.equType } that.$u.post(`/app/device/placement`, data).then(res => { if (res.code == 200) { uni.showToast({ title: '绑定成功', icon: 'success', duration: 2000 }) that.dtflags = false this.namelist = [] this.ruleIdlist = [] this.getroomxq() } else { uni.showToast({ title: res.msg, icon: 'none', duration: 2000 }) } }) } }) }, // 获取大厅设施信息 getroomxq(){ this.$u.get(`/app/room/mch/${this.roomId}`).then((res) => { if (res.code == 200) { this.obj = res.data this.nametxt = res.data.roomName if(res.data.deviceId == null){ this.txtdel = '删除' }else{ this.txtdel = '解绑' } this.imgurl = res.data.pictures[0] if(!uni.getStorageSync('namelist')){ if(res.data.feeRules != null){ res.data.feeRules.forEach(item =>{ this.namelist.push(item.explain) }) } } if(!uni.getStorageSync('ruleIdlist')){ this.ruleIdlist = res.data.ruleIds } this.selectedIndices = res.data.tags if(res.data.equType == 1){ this.leixing = '麻将桌' this.type = 1 }else if(res.data.equType == 2){ this.leixing = '台球桌' this.type = 2 } } }) }, // 点击选择收费 btnshoufei(){ uni.navigateTo({ url:'/page_moban/shoufei' }) }, // 点击选择标签 btnbq(dictValue,index) { const indexExists = this.selectedIndices.includes(dictValue) if (indexExists) { this.selectedIndices = this.selectedIndices.filter(i => i !== dictValue) } else { this.selectedIndices.push(dictValue) } }, isSelected(dictValue) { return this.selectedIndices.includes(dictValue) }, // 获取标签 getbiaoqian(){ this.$u.get(`/appVerify/getDictData?dictType=ss_room_tags`).then((res) => { if (res.code == 200) { this.biaoqianlist = res.data } }) }, // 点击上传图片 getImage() { uni.chooseImage({ count: 1, success: (rst) => { this.url = rst.tempFilePaths[0] } }) }, onok(ev) { this.url = "" this.path = ev.path let _this = this let math = 'static/' + _this.$u.guid(20) wx.uploadFile({ url: 'https://up-z2.qiniup.com', name: 'file', filePath: _this.path, formData: { token: _this.token, //后端返回的token key: 'smartmeter/img/' + math }, success: function(res) { let str = JSON.parse(res.data) _this.imgurl = 'https://lxnapi.ccttiot.com/' + str.key } }) }, oncancel() { // url设置为空,隐藏控件 this.url = "" }, // 获取上传七牛云token getQiniuToken() { this.$u.get("/common/qiniu/uploadInfo").then((res) => { if (res.code == 200) { this.token = res.token } }) }, // 确认选择类型 confirm(e){ this.type = e[0].value this.leixing =e[0].label }, // 点击确定新建大厅设施 btnmd(){ let data = { roomId:this.roomId, roomName:this.nametxt, equType:this.type, picture:this.imgurl, tags:this.selectedIndices, ruleIds:this.ruleIdlist } this.$u.put(`/app/room`,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 }) } }) }, // 点击删除大厅设施 btndt(){ if(this.txtdel == '删除'){ let that = this uni.showModal({ title: '温馨提示', content: '您确定要删除此大厅设施吗?', success: function (res) { if (res.confirm) { that.$u.delete(`/app/room/${that.roomId}`).then((res) => { if (res.code == 200) { uni.showToast({ title: '删除成功', icon: 'success', duration:2000 }) setTimeout(()=>{ uni.navigateBack({ delta:2 }) },1000) }else{ uni.showToast({ title: res.msg, icon: 'none', duration:2000 }) } }) } else if (res.cancel) { } } }) }else if(this.txtdel == '解绑'){ let that = this uni.showModal({ title: '温馨提示', content: '您确定要解绑此大厅设施设备吗?', success: function (res) { if (res.confirm) { that.$u.post(`/app/device/offline/${that.obj.deviceId}`).then((res) => { if (res.code == 200) { uni.showToast({ title: '解绑成功', icon: 'success', duration:2000 }) setTimeout(()=>{ uni.navigateBack({ delta:2 }) },1000) }else{ uni.showToast({ title: res.msg, icon: 'none', duration:2000 }) } }) } else if (res.cancel) { } } }) } } } } </script> <style lang="scss"> .active{ background-color: #48893B !important; color: #fff !important; } /deep/ .panel{ position: fixed; left: 0; } page { background: #F6F6F6; } .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; } } } .dalist{ width: 100%; height: 80vh; overflow: scroll; padding-bottom: 40rpx; box-sizing: border-box; } .biaoqian{ width: 680rpx; max-height: 1624rpx; background: #FFFFFF; padding: 44rpx 34rpx; box-sizing: border-box; margin: auto; margin-top: 22rpx; border-radius: 20rpx; .shoufei{ margin-top: 30rpx; .wz{ font-size: 24rpx; color: #3D3D3D; margin-top: 24rpx; margin-bottom: 20rpx; } .shichang{ margin-top: 34rpx; .stop{ display: flex; width: 618rpx; height: 76rpx; line-height: 76rpx; background: #F0F0F0; view{ width: 50%; text-align: center; font-size: 28rpx; color: #3D3D3D; } } } .shang{ display: flex; justify-content: space-between; align-items: center; width: 100%; view{ font-size: 32rpx; color: #3D3D3D; display: flex; align-items: center; image{ width: 14rpx; height: 42rpx; margin-top: 0; margin-right: 10rpx; } } } } image{ width: 144rpx; height: 144rpx; // margin-top: 30rpx; } .name{ font-weight: 600; font-size: 36rpx; color: #3D3D3D; margin-bottom: 30rpx; } .bqliat{ margin-top: 30rpx; display: flex; flex-wrap: wrap; .bqitem{ margin-right: 10rpx; border: 1px solid #48893B; color: #48893B; padding: 10rpx; margin-top: 10rpx; } image{ width: 226rpx; height: 58rpx; } } } .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; display: flex; justify-content: space-between; padding: 0 36rpx; box-sizing: border-box; padding-top: 24rpx; .queren{ width: 314rpx; height: 104rpx; background: #48893B; text-align: center; line-height: 104rpx; font-weight: 600; font-size: 36rpx; color: #FFFFFF; border-radius: 20rpx; } .xinjian{ width: 314rpx; height: 104rpx; border: 2rpx solid #48893B; border-radius: 20rpx; text-align: center; line-height: 104rpx; font-weight: 600; font-size: 36rpx; color: #48893B; } } .box{ width: 680rpx; max-height: 470rpx; background: #FFFFFF; margin: auto; margin-top: 22rpx; border-radius: 20rpx; .name{ display: flex; justify-content: space-between; align-items: center; width: 618rpx; margin: auto; height: 110rpx; border-bottom: 1px solid #D8D8D8; .lt{ font-size: 32rpx; color: #3D3D3D; } .rt{ display: flex; align-items: center; input{ text-align: right; } image{ width: 14rpx; height: 42rpx; margin-left: 10rpx; } } } } </style>