658 lines
16 KiB
Vue
658 lines
16 KiB
Vue
<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">
|
||
<view class="kg" v-if="gateSnflag == false">无</view>
|
||
<view class="kg" v-else>关</view>
|
||
<view class="gn">店门</view>
|
||
<image src="https://api.ccttiot.com/smartmeter/img/static/uZNimi3DEsGWsjfJm2Bg" mode=""></image>
|
||
</view>
|
||
<view class="xian"></view>
|
||
<view class="one">
|
||
<view class="kg">空闲 <text>4</text> </view>
|
||
<view class="gn">房间</view>
|
||
<image src="https://api.ccttiot.com/smartmeter/img/static/uZNimi3DEsGWsjfJm2Bg" mode=""></image>
|
||
</view>
|
||
<view class="xian"></view>
|
||
<view class="one">
|
||
<view class="kg">空闲 <text>11</text> </view>
|
||
<view class="gn">大厅</view>
|
||
<image src="https://api.ccttiot.com/smartmeter/img/static/uZNimi3DEsGWsjfJm2Bg" mode=""></image>
|
||
</view>
|
||
<view class="xian"></view>
|
||
<view class="one">
|
||
<view class="kg" style="color: #FC902A;">暂无设置</view>
|
||
<view class="gn">卫生间</view>
|
||
<image src="https://api.ccttiot.com/smartmeter/img/static/uZNimi3DEsGWsjfJm2Bg" mode=""></image>
|
||
</view>
|
||
</view>
|
||
<view class="damen" v-if="gateSnflag">
|
||
<view class="name">
|
||
店门配置
|
||
</view>
|
||
<view class="menbj">
|
||
<view class="top">
|
||
<view class="lt">
|
||
<text style="font-weight: 600;">店门</text> <text v-if="gateSnobj.onlineStatus == 0">设备离线</text>
|
||
</view>
|
||
<view class="rt" v-if="gateSnobj.powerStatus == 0">
|
||
<text></text> 已关闭
|
||
</view>
|
||
<view class="rt" style="color: #48893B;" v-if="gateSnobj.powerStatus == 1">
|
||
<text style="background-color: #48893B;"></text> 已开启
|
||
</view>
|
||
</view>
|
||
<view class="bot">
|
||
<view class="lt">
|
||
有当前订单才能进入门店
|
||
</view>
|
||
<view class="rt">
|
||
<image v-if="gateSnobj.powerStatus == 0" src="https://api.ccttiot.com/smartmeter/img/static/u4Btme5ARjeAyvvTjgBF" mode=""></image>
|
||
<image v-if="gateSnobj.powerStatus == 1" src="https://api.ccttiot.com/smartmeter/img/static/ua6R9hsgQZTfahcpaA8G" mode="" ></image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="damen" v-if="roomList != ''">
|
||
<view class="name">
|
||
房间
|
||
</view>
|
||
<view class="fjlist">
|
||
<view class="fj_item" v-for="(item, index) in roomList" :key="item.id">
|
||
<view class="name">
|
||
<text>{{item.roomName}}</text>
|
||
<text v-if="hasOfflineDevice(item.deviceList)" style="font-size: 28rpx;font-weight: 400;color: #969696;margin-top: 10rpx;">有设备离线</text>
|
||
</view>
|
||
<view class="zt" v-if="item.status == 1">
|
||
<text>运营中</text>
|
||
</view>
|
||
<view style="color: #ccc;" class="zt" v-if="item.status == 0">
|
||
<text style="background-color: #ccc; display: inline-block; width: 0; height: 0;"></text> 歇业中
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="damen" v-if="datingobj.deviceList">
|
||
<view class="name">
|
||
大厅
|
||
</view>
|
||
<view class="menbj" v-for="(item,index) in datingobj.deviceList" :key="index">
|
||
<view class="top">
|
||
<view class="lt">
|
||
<text style="font-weight: 600;">{{datingobj.roomName}}</text> <text v-if="item.onlineStatus == 0">设备离线</text>
|
||
</view>
|
||
<view class="rt" v-if="item.powerStatus == 0">
|
||
<text></text> 已关闭
|
||
</view>
|
||
<view class="rt" style="color: #48893B;" v-if="item.powerStatus == 1">
|
||
<text style="background-color: #48893B;"></text> 已开启
|
||
</view>
|
||
</view>
|
||
<view class="bot">
|
||
<view class="lt">
|
||
SN：{{item.sn}}
|
||
</view>
|
||
<view class="rt">
|
||
<image src="https://api.ccttiot.com/smartmeter/img/static/u4Btme5ARjeAyvvTjgBF" mode="" v-if="item.powerStatus == 0"></image>
|
||
<image src="https://api.ccttiot.com/smartmeter/img/static/ua6R9hsgQZTfahcpaA8G" mode="" v-if="item.powerStatus == 1"></image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="damen" v-if="cesuolist != ''">
|
||
<view class="name">
|
||
卫生间配置
|
||
</view>
|
||
<view class="menbj" v-for="(item,index) in cesuolist" :key="index">
|
||
<view class="top">
|
||
<view class="lt">
|
||
<text style="font-weight: 600;">{{item.roomName}}</text> <text v-if="hasOfflineDevice(item.deviceList)">设备离线</text>
|
||
</view>
|
||
<view class="rt" v-if="item.powerStatus == 0">
|
||
<text></text> 已关闭
|
||
</view>
|
||
<view class="rt" style="color: #48893B;" v-if="item.powerStatus == 1">
|
||
<text style="background-color: #48893B;"></text> 已开启
|
||
</view>
|
||
</view>
|
||
<view class="bot">
|
||
<view class="lt">
|
||
无条件进入卫生间
|
||
</view>
|
||
<view class="rt">
|
||
<image src="https://api.ccttiot.com/smartmeter/img/static/u4Btme5ARjeAyvvTjgBF" mode="" v-if="item.powerStatus == 0"></image>
|
||
<image src="https://api.ccttiot.com/smartmeter/img/static/ua6R9hsgQZTfahcpaA8G" mode="" v-if="item.powerStatus == 1"></image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="mask" v-if="xuanzeflag"></view>
|
||
<view class="xuanze" v-if="xuanzeflag">
|
||
<view class="top">
|
||
<view>添加门店配置</view>
|
||
<view @click="xuanzeflag = false"><image src="https://api.ccttiot.com/smartmeter/img/static/uAd1csWlbqF423arI5b6" mode=""></image></view>
|
||
</view>
|
||
<view class="changj">
|
||
<view class="changj_item" @click="btnshop(1)">
|
||
<image src="https://api.ccttiot.com/smartmeter/img/static/uh1K6Blj2rD2ZI12TsP8" mode=""></image>
|
||
</view>
|
||
<view class="changj_item" @click="btnshop(2)">
|
||
<image src="https://api.ccttiot.com/smartmeter/img/static/uMeIwTENsMFpPSxGsEox" mode=""></image>
|
||
</view>
|
||
<view class="changj_item" @click="btnshop(3)">
|
||
<image src="https://api.ccttiot.com/smartmeter/img/static/uay155Dhu3aokS6H6ZC2" mode=""></image>
|
||
</view>
|
||
<view class="changj_item" @click="btnshop(4)">
|
||
<image src="https://api.ccttiot.com/smartmeter/img/static/uq9FKP1ubw5gG5cCPE0S" mode=""></image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="anniu">
|
||
<view class="xinjian" @click="btnadd">
|
||
设置
|
||
</view>
|
||
<view class="queren" @click="btnroom">
|
||
门店配置
|
||
</view>
|
||
</view>
|
||
|
||
<view class="mask" style="z-index: 3;" v-if="addmenflag"></view>
|
||
<view class="addmen" v-if="addmenflag">
|
||
<view class="top">
|
||
<view class="cha" @click="addmenflag = 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",
|
||
},
|
||
storeId: '',
|
||
roomList: [],
|
||
datingobj:{},
|
||
cesuolist:[],
|
||
list: [],
|
||
show: false,
|
||
roomId: '',
|
||
xuanzeflag:false,
|
||
addmenflag:false,
|
||
gateSnobj:{},
|
||
gateSnflag:false
|
||
}
|
||
},
|
||
onLoad(option) {
|
||
this.storeId = option.storeId
|
||
this.getxq()
|
||
},
|
||
methods: {
|
||
// 检查 deviceList 中是否至少有一个设备的 onlineStatus 为 0
|
||
hasOfflineDevice(deviceList) {
|
||
if(deviceList == !null){
|
||
return deviceList.some(device => device.onlineStatus == 0)
|
||
}
|
||
},
|
||
// 点击大门 房间等
|
||
btnshop(num){
|
||
if(num == 1){
|
||
this.addmenflag = true
|
||
}else if(num == 2){
|
||
uni.navigateTo({
|
||
url:'/page_shanghu/addtoom?storeId=' + this.storeId
|
||
})
|
||
}else if(num == 3){
|
||
uni.navigateTo({
|
||
url:'/page_moban/datingxq?storeId=' + this.storeId
|
||
})
|
||
}
|
||
},
|
||
// 点击选择未投放设备
|
||
btntouf(){
|
||
uni.navigateTo({
|
||
url:'/page_shanghu/weishebei?storeId=' + this.storeId
|
||
})
|
||
},
|
||
// 大门配置点击扫码配置
|
||
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,
|
||
storeId:this.storeId
|
||
}
|
||
that.$u.put(`/app/store/bandGate`,data).then(res => {
|
||
if (res.code == 200) {
|
||
uni.showToast({
|
||
title: '绑定成功',
|
||
icon: 'success',
|
||
duration: 2000
|
||
})
|
||
that.xuanzeflag = false
|
||
that.addmenflag = false
|
||
that.getxq()
|
||
} else{
|
||
uni.showToast({
|
||
title: res.msg,
|
||
icon: 'none',
|
||
duration: 2000
|
||
})
|
||
}
|
||
})
|
||
}
|
||
})
|
||
},
|
||
// 点击门店配置
|
||
btnroom(){
|
||
this.xuanzeflag = true
|
||
},
|
||
// 请求门店详情
|
||
getxq() {
|
||
this.$u.get(`app/store/mch/${this.storeId}`).then(res => {
|
||
if (res.code == 200) {
|
||
res.data.roomList.forEach(item => {
|
||
if (item.type2 == 1) {
|
||
this.roomList.push(item)
|
||
} else if (item.type2 == 2) {
|
||
this.datingobj = item
|
||
} else if (item.type2 == 3) {
|
||
this.cesuolist.push(item)
|
||
}
|
||
})
|
||
if(res.data.gateSn != null || res.data.gateSn != ''){
|
||
this.gateSnflag = true
|
||
this.$u.get(`/app/device/${res.data.gateSn}/bySn`).then(res => {
|
||
if(res.code == 200){
|
||
this.gateSnobj = res.data
|
||
}
|
||
})
|
||
}else{
|
||
this.gateSnflag = false
|
||
}
|
||
}
|
||
})
|
||
},
|
||
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
/deep/ .u-iconfont,
|
||
/deep/ .u-title{
|
||
padding-bottom: 20rpx;
|
||
}
|
||
.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;
|
||
}
|
||
}
|
||
}
|
||
page {
|
||
background: #F6F6F6;
|
||
}
|
||
.box{
|
||
width: 100%;
|
||
height: 80vh;
|
||
overflow: scroll;
|
||
padding-bottom: 60rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
.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;
|
||
}
|
||
.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: 686rpx;
|
||
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;
|
||
height: 178rpx;
|
||
background: #F9F9F9;
|
||
padding: 26rpx;
|
||
box-sizing: border-box;
|
||
.zt{
|
||
font-size: 28rpx;
|
||
color: #FC902A;
|
||
margin-top: 8rpx;
|
||
}
|
||
.name{
|
||
// display: flex;
|
||
// justify-content: space-between;
|
||
text{
|
||
display: block;
|
||
font-weight: 600;
|
||
font-size: 36rpx;
|
||
color: #3D3D3D;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.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: #969696;
|
||
margin-right: 54rpx;
|
||
}
|
||
}
|
||
.rt{
|
||
display: flex;
|
||
align-items: center;
|
||
font-size: 28rpx;
|
||
color: #7C7C7C;
|
||
font-weight: 600;
|
||
text{
|
||
width: 10rpx;
|
||
height: 10rpx;
|
||
background-color: #7C7C7C;
|
||
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: 26rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
.one{
|
||
width: 188rpx;
|
||
text-align: center;
|
||
.kg{
|
||
font-weight: 600;
|
||
font-size: 24rpx;
|
||
color: #7C7C7C;
|
||
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: #7C7C7C;
|
||
}
|
||
}
|
||
.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> |