tearoom/page_shanghu/bangding.vue
2025-03-05 17:42:13 +08:00

618 lines
17 KiB
Vue
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<view class="page">
<u-navbar title="设备绑定" :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="tongji">
<view class="one" @click="btngundong('section1',0)">
<view class="gn">店门</view>
<image v-if="tabindex == 0" src="https://api.ccttiot.com/smartmeter/img/static/uZNimi3DEsGWsjfJm2Bg" mode=""></image>
</view>
<view class="xian"></view>
<view class="one" @click="btngundong('section2',1)">
<view class="gn">房间</view>
<image v-if="tabindex == 1" src="https://api.ccttiot.com/smartmeter/img/static/uZNimi3DEsGWsjfJm2Bg" mode=""></image>
</view>
<view class="xian"></view>
<view class="one" @click="btngundong('section3',2)">
<view class="gn">大厅</view>
<image v-if="tabindex == 2" src="https://api.ccttiot.com/smartmeter/img/static/uZNimi3DEsGWsjfJm2Bg" mode=""></image>
</view>
<view class="xian"></view>
<view class="one" @click="btngundong('section4',3)">
<view class="gn">卫生间</view>
<image v-if="tabindex == 3" src="https://api.ccttiot.com/smartmeter/img/static/uZNimi3DEsGWsjfJm2Bg" mode=""></image>
</view>
</view>
<!-- 店门 --><!-- 店门 --><!-- 店门 --><!-- 店门 --><!-- 店门 --><!-- 店门 --><!-- 店门 --><!-- 店门 --><!-- 店门 --><!-- 店门 --><!-- 店门 --><!-- 店门 -->
<view class="damen" id="section1" style="margin-top: 10vh;">
<view class="name">
店门
</view>
<view class="menbj" :id="gateSnobj.gateSn == null ? 'active' : ''" @click="btnmendian">
<view class="top">
<view class="lt">
<text style="font-weight: 600;font-size: 32rpx;" :id="gateSnobj.gateSn == null ? 'active' : ''">店门</text>
</view>
<view class="rt" :id="gateSnobj.gateSn == null ? 'active' : ''">
<text :id="gateSnobj.gateSn == null ? 'active' : ''"></text> {{gateSnobj.gateSn == null ? '未绑定' : '已绑定'}}
</view>
</view>
<view class="bot" v-if="gateSnobj.gateSn != null">
<view class="lt" style="color: #ccc;font-size: 24rpx;" v-if="gateSnobj.unlockCondition == 1">
开门条件:有当前订单才能进入门店
</view>
<view class="lt" style="color: #ccc;font-size: 24rpx;" v-if="gateSnobj.unlockCondition == 2">
开门条件:有历史订单才能进入门店
</view>
<view class="lt" style="color: #ccc;font-size: 24rpx;" v-if="gateSnobj.unlockCondition == 3">
开门条件:无条件
</view>
<view class="lt" style="color: #ccc;font-size: 24rpx;" v-if="gateSnobj.unlockCondition == null">
开门条件:--
</view>
<view class="rt">
SN{{gateSnobj.gateSn}}
</view>
</view>
</view>
</view>
<!-- 房间 --><!-- 房间 --><!-- 房间 --><!-- 房间 --><!-- 房间 --><!-- 房间 --><!-- 房间 --><!-- 房间 --><!-- 房间 --><!-- 房间 --><!-- 房间 --><!-- 房间 -->
<view class="" id="section2">
<view style="font-weight: 600;
font-size: 36rpx;
color: #3D3D3D;
margin-left: 30rpx;margin-top: 20rpx;">
房间
</view>
<view class="damen" style="padding: 20rpx; background-color: #fff;" v-for="(item,index) in roomList" :key="index">
<view class="name">
{{item.roomName}}
</view>
<view class="fjlist">
<view class="fj_item" v-for="(val,indexs) in item.equipmentList" :key="indexs" @click="btnfj(indexs,item)" :id="val.device.sn == null ? 'active' : ''">
<view class="name">
<text :id="val.device.sn == null ? 'active' : ''">{{val.name}}</text> <text style="font-size: 28rpx;color: #3D3D3D;" :id="val.device.sn == null ? 'active' : ''">
<text style="margin-bottom: 6rpx;" :id="val.device.sn == null ? 'active' : ''"></text> {{val.device.sn == null ? '未绑定' : '已绑定'}}</text>
</view>
<view class="zt" v-if="val.device.sn != null">
SN{{val.device.sn}}
</view>
</view>
</view>
</view>
</view>
<!-- 大厅 --><!-- 大厅 --><!-- 大厅 --><!-- 大厅 --><!-- 大厅 --><!-- 大厅 --><!-- 大厅 --><!-- 大厅 --><!-- 大厅 --><!-- 大厅 --><!-- 大厅 --><!-- 大厅 -->
<view class="damen" id="section3">
<view class="name">
大厅
</view>
<view class="menbj" v-for="(item,index) in datingobj" :key="index" :id="item.equipmentList[0].device.sn == null ? 'active' : ''" @click="btndating(index)">
<view class="top">
<view class="lt" :id="item.equipmentList[0].device.sn == null ? 'active' : ''">
<text style="font-weight: 600;" :id="item.equipmentList[0].device.sn == null ? 'active' : ''">{{item.roomName}}</text>
</view>
<view class="rt" :id="item.equipmentList[0].device.sn == null ? 'active' : ''">
<text :id="item.equipmentList[0].device.sn == null ? 'active' : ''"></text> {{item.equipmentList[0].device.sn == null ? '未绑定' : '已绑定'}}
</view>
</view>
<view class="bot" v-if="item.equipmentList[0].device.sn != null">
<view class="lt" :id="item.equipmentList[0].device.sn == null ? 'active' : ''">
SN{{item.equipmentList[0].device.sn}}
</view>
<view class="rt">
</view>
</view>
</view>
</view>
<!-- 厕所 --><!-- 厕所 --><!-- 厕所 --><!-- 厕所 --><!-- 厕所 --><!-- 厕所 --><!-- 厕所 --><!-- 厕所 --><!-- 厕所 -->
<view class="damen" id="section4">
<view class="name">
卫生间配置
</view>
<view class="" v-for="(item,index) in cesuolist" :key="index">
<view class="menbj" :id="item.device.sn == null ? 'active' : ''" @click="btncesuo(index)">
<view class="top">
<view class="lt" :id="item.device.sn == null ? 'active' : ''">
<text style="font-weight: 600;" :id="item.device.sn == null ? 'active' : ''">{{item.name}}</text>
</view>
<view class="rt" :id="item.device.sn == null ? 'active' : ''">
<text :id="item.device.sn == null ? 'active' : ''"></text> {{item.device.sn == null ? '未绑定' : '已绑定'}}
</view>
</view>
<view class="bot" v-if="item.device.sn != null">
<view class="lt" :id="item.device.sn == null ? 'active' : ''">
SN{{item.device.sn}}
</view>
<view class="rt">
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
bgc: {
backgroundColor: "#fff",
},
storeId: '',
xuanzeflag:false,
roomList: [],
datingobj:[],
cesuolist:[],
list: [],
show: false,
roomId: '',
gateSnobj:{},
objxq:{},
deviceId:'',
tabindex:0
}
},
onLoad(option) {
this.storeId = option.storeId
this.deviceId = option.deviceId
this.getxq()
},
methods: {
// 点击tab进行滚动查找
btngundong(section,index) {
this.tabindex = index
const query = uni.createSelectorQuery().in(this);
query.select(`#${section}`).boundingClientRect((rectObj) => {
if (rectObj) {
uni.pageScrollTo({
scrollTop: rectObj.top - 180,
duration: 300
})
} else {
console.error('Element with ID ' + section + ' not found, but this should not happen if the callback is executed.')
}
}).exec()
},
// 点击门店是否绑定
btnmendian(){
if(this.gateSnobj.gateSn == null){
let that = this
uni.showModal({
title: '温馨提示',
content: '您确定要绑定到该店门上吗?',
success: function (res) {
if (res.confirm) {
let data = {
objId:that.storeId,
deviceId:that.deviceId,
type:6
}
//put /app/store/bandGate
that.$u.post(`/app/device/placement`,data).then(res => {
if(res.code == 200){
uni.showToast({
title: '绑定成功',
icon: 'success',
duration:2000
})
that.getxq()
setTimeout(()=>{
uni.navigateBack({
delta:3
})
},1000)
}else{
uni.showToast({
title: res.msg,
icon: 'none',
duration:2000
})
}
})
} else if (res.cancel) {
}
}
})
}else{
uni.showToast({
title: '该店门已被绑定',
icon: 'none',
duration:2000
})
}
},
// 点击房间是否绑定
btnfj(index,item){
let deviceIds = this.roomList?.[0]?.equipmentList?.[index]?.deviceList?.[0]?.deviceId ?? null
let equipmentId = item.equipmentList[index].equipmentId
console.log(equipmentId)
if(deviceIds == null){
let that = this
uni.showModal({
title: '温馨提示',
content: '您确定要绑定到该房间设施上吗?',
success: function (res) {
if (res.confirm) {
let data = {
objId:equipmentId,
deviceId:that.deviceId,
type:1
}
that.$u.post(`/app/device/placement`,data).then(res => {
if(res.code == 200){
uni.showToast({
title: '绑定成功',
icon: 'success',
duration:2000
})
that.getxq()
setTimeout(()=>{
uni.navigateBack({
delta:3
})
},1000)
}else{
uni.showToast({
title: res.msg,
icon: 'none',
duration:2000
})
}
})
} else if (res.cancel) {
}
}
})
}else{
uni.showToast({
title: '该房间设施已被绑定',
icon: 'none',
duration:2000
})
}
},
// 点击大厅是否绑定
btndating(index){
let deviceIds = this.datingobj[index].equipmentList[0].deviceId
let equipmentId = this.datingobj[index].equipmentList[0].equipmentId
console.log(deviceIds,equipmentId,'大厅');
if(deviceIds == null){
let that = this
uni.showModal({
title: '温馨提示',
content: '您确定要绑定到该大厅设施上吗?',
success: function (res) {
if (res.confirm) {
let data = {
objId:equipmentId,
deviceId:that.deviceId,
type:1
}
that.$u.post(`/app/device/placement`,data).then(res => {
if(res.code == 200){
uni.showToast({
title: '绑定成功',
icon: 'success',
duration:2000
})
that.getxq()
setTimeout(()=>{
uni.navigateBack({
delta:3
})
},1000)
}else{
uni.showToast({
title: res.msg,
icon: 'none',
duration:2000
})
}
})
} else if (res.cancel) {
}
}
})
}else{
uni.showToast({
title: '该大厅设施已被绑定',
icon: 'none',
duration:2000
})
}
},
// 点击厕所是否绑定
btncesuo(index){
let deviceIds = this.cesuolist[index].deviceId
let equipmentId = this.cesuolist[index].toiletId
console.log(deviceIds,equipmentId,'厕所');
if(deviceIds == null){
let that = this
uni.showModal({
title: '温馨提示',
content: '您确定要绑定到该卫生间上吗?',
success: function (res) {
if (res.confirm) {
let data = {
objId:equipmentId,
deviceId:that.deviceId,
type:5
}
that.$u.post(`/app/device/placement`,data).then(res => {
if(res.code == 200){
uni.showToast({
title: '绑定成功',
icon: 'success',
duration:2000
})
that.getxq()
setTimeout(()=>{
uni.navigateBack({
delta:3
})
},1000)
}else{
uni.showToast({
title: res.msg,
icon: 'none',
duration:2000
})
}
})
} else if (res.cancel) {
}
}
})
}else{
uni.showToast({
title: '该卫生间已被绑定',
icon: 'none',
duration:2000
})
}
},
// 获取门店详情
getxq(){
this.$u.get(`app/store/mch/${this.storeId}`).then(res => {
if (res.code == 200) {
this.objxq = res.data
this.roomList = []
this.cesuolist = []
this.datingobj = []
this.gateSnobj = res.data.gate
this.roomList = res.data.roomList
this.datingobj = res.data.hallEquList
this.cesuolist = res.data.toiletList
}
})
}
}
}
</script>
<style lang="scss">
/deep/ .u-iconfont,
/deep/ .u-title{
padding-bottom: 20rpx;
}
#active{
background-color: #DEF1DA !important;
color: #48893B !important;
}
page {
background: #F6F6F6;
}
.box{
width: 100%;
// height: 88vh;
// overflow: scroll;
padding-bottom: 210rpx;
box-sizing: border-box;
}
.damen{
padding: 0 30rpx;
box-sizing: border-box;
margin-top: 38rpx;
.fjlist{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin-top: 16rpx;
width: 100%;
max-height: 1408rpx;
background: #FFFFFF;
padding: 16rpx;
padding-top: 0;
box-sizing: border-box;
border-radius: 20rpx 20rpx 20rpx 20rpx;
.fj_item{
margin-top: 16rpx;
width: 318rpx;
max-height: 178rpx;
background: #F9F9F9;
padding: 26rpx;
box-sizing: border-box;
.zt{
font-size: 28rpx;
margin-top: 24rpx;
}
.name{
display: flex;
justify-content: space-between;
align-items: center;
text{
font-weight: 600;
font-size: 36rpx;
color: #3D3D3D;
text{
width: 10rpx;
height: 10rpx;
background-color: #3D3D3D;
border-radius: 50%;
margin-right: 10rpx;
display: inline-block;
}
}
}
}
}
.name{
font-weight: 600;
font-size: 36rpx;
color: #3D3D3D;
text-align: left;
}
.menbj{
width: 686rpx;
max-height: 170rpx;
background: #FFFFFF;
border-radius: 20rpx 20rpx 20rpx 20rpx;
padding: 30rpx;
box-sizing: border-box;
margin-top: 28rpx;
.bot{
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 20rpx;
.lt{
font-size: 28rpx;
color: #3D3D3D;
}
.rt{
image{
width: 50rpx;
height: 50rpx;
}
}
}
.top{
display: flex;
justify-content: space-between;
.lt{
text{
font-size: 28rpx;
color: #3D3D3D;
margin-right: 54rpx;
}
}
.rt{
display: flex;
align-items: center;
font-size: 28rpx;
color: #3D3D3D;
font-weight: 600;
text{
width: 10rpx;
height: 10rpx;
background-color: #3D3D3D;
border-radius: 50%;
margin-right: 10rpx;
}
}
}
}
}
.tongji{
width: 750rpx;
height: 150rpx;
background: #FFFFFF;
border-radius: 0rpx 0rpx 0rpx 0rpx;
box-sizing: border-box;
margin-top: 14rpx;
display: flex;
align-items: center;
position: fixed;
top: 10vh;
.one{
width: 188rpx;
text-align: center;
.kg{
font-weight: 600;
font-size: 24rpx;
color: #3D3D3D;
text{
color: #48893B;
margin-left: 4rpx;
}
}
.gn{
font-weight: 600;
font-size: 32rpx;
color: #3D3D3D;
margin-top: 10rpx;
}
image{
width: 58rpx;
height: 14rpx;
}
}
.xian{
width: 1px;
height: 62rpx;
background-color: #3D3D3D;
}
}
.list {
margin-top: 30rpx;
height: 70vh;
overflow: scroll;
.list_item {
width: 100%;
height: 200rpx;
line-height: 100rpx;
text-align: center;
border: 1px solid;
}
}
.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: 330rpx;
height: 104rpx;
background: #48893B;
text-align: center;
line-height: 104rpx;
font-weight: 600;
font-size: 36rpx;
color: #FFFFFF;
border-radius: 20rpx;
}
.xinjian{
width: 330rpx;
height: 104rpx;
border: 2rpx solid #48893B;
border-radius: 20rpx;
text-align: center;
line-height: 104rpx;
font-weight: 600;
font-size: 36rpx;
color: #48893B;
}
}
</style>