526 lines
11 KiB
Vue
526 lines
11 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">关</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">
|
|||
|
|
<view class="name">
|
|||
|
|
店门配置
|
|||
|
|
</view>
|
|||
|
|
<view class="menbj">
|
|||
|
|
<view class="top">
|
|||
|
|
<view class="lt">
|
|||
|
|
<text style="font-weight: 600;">店门</text> <text>设备离线</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="rt">
|
|||
|
|
<text></text> 已关闭
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="bot">
|
|||
|
|
<view class="lt">
|
|||
|
|
有当前订单才能进入门店
|
|||
|
|
</view>
|
|||
|
|
<view class="rt">
|
|||
|
|
<image src="https://api.ccttiot.com/smartmeter/img/static/u4Btme5ARjeAyvvTjgBF" mode=""></image>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="damen">
|
|||
|
|
<view class="name">
|
|||
|
|
房间
|
|||
|
|
</view>
|
|||
|
|
<view class="fjlist">
|
|||
|
|
<view class="fj_item" v-for="(itemr,index) in 3" :key="index">
|
|||
|
|
<view class="name">
|
|||
|
|
<text>房间</text> <text style="font-size: 28rpx;font-weight: 400;color: #969696;">有设备离线</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="zt">
|
|||
|
|
运营中
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="damen">
|
|||
|
|
<view class="name">
|
|||
|
|
大厅
|
|||
|
|
</view>
|
|||
|
|
<view class="menbj">
|
|||
|
|
<view class="top">
|
|||
|
|
<view class="lt">
|
|||
|
|
<text style="font-weight: 600;">1号桌</text> <text>设备离线</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="rt">
|
|||
|
|
<text></text> 已关闭
|
|||
|
|
</view>
|
|||
|
|
<view class="rt" style="color: #48893B;" v-if="false">
|
|||
|
|
<text style="background-color: #48893B;"></text> 已开启
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="bot">
|
|||
|
|
<view class="lt">
|
|||
|
|
SN：2234681537
|
|||
|
|
</view>
|
|||
|
|
<view class="rt">
|
|||
|
|
<image src="https://api.ccttiot.com/smartmeter/img/static/u4Btme5ARjeAyvvTjgBF" mode=""></image>
|
|||
|
|
<image src="https://api.ccttiot.com/smartmeter/img/static/ua6R9hsgQZTfahcpaA8G" mode="" v-if="false"></image>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="damen">
|
|||
|
|
<view class="name">
|
|||
|
|
卫生间配置
|
|||
|
|
</view>
|
|||
|
|
<view class="menbj">
|
|||
|
|
<view class="top">
|
|||
|
|
<view class="lt">
|
|||
|
|
<text style="font-weight: 600;">卫生间</text> <text>设备离线</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="rt" v-if="false">
|
|||
|
|
<text></text> 已关闭
|
|||
|
|
</view>
|
|||
|
|
<view class="rt" style="color: #48893B;" >
|
|||
|
|
<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="false"></image>
|
|||
|
|
<image src="https://api.ccttiot.com/smartmeter/img/static/ua6R9hsgQZTfahcpaA8G" mode="" ></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)">
|
|||
|
|
店门
|
|||
|
|
</view>
|
|||
|
|
<view class="changj_item" @click="btnshop(2)">
|
|||
|
|
房间
|
|||
|
|
</view>
|
|||
|
|
<view class="changj_item" @click="btnshop(3)">
|
|||
|
|
大厅
|
|||
|
|
</view>
|
|||
|
|
<view class="changj_item" @click="btnshop(4)">
|
|||
|
|
卫生间
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="anniu">
|
|||
|
|
<view class="xinjian" @click="btnadd">
|
|||
|
|
设置
|
|||
|
|
</view>
|
|||
|
|
<view class="queren" @click="btnroom">
|
|||
|
|
门店配置
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
export default {
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
bgc: {
|
|||
|
|
backgroundColor: "#fff",
|
|||
|
|
},
|
|||
|
|
storeId: '',
|
|||
|
|
roomList: [],
|
|||
|
|
list: [],
|
|||
|
|
show: false,
|
|||
|
|
roomId: '',
|
|||
|
|
xuanzeflag:false
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
onLoad(option) {
|
|||
|
|
this.storeId = option.storeId
|
|||
|
|
this.getxq()
|
|||
|
|
this.getsb()
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
btnroom(){
|
|||
|
|
this.xuanzeflag = true
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
btntcadd(roomId) {
|
|||
|
|
let data = {
|
|||
|
|
"mode": 2,
|
|||
|
|
"hours": 3,
|
|||
|
|
"price": 58,
|
|||
|
|
"minHours": 1,
|
|||
|
|
"explain": "1小时28元",
|
|||
|
|
"roomId": roomId
|
|||
|
|
}
|
|||
|
|
this.$u.post(`/app/rule`,data).then(res => {
|
|||
|
|
if (res.code == 200) {
|
|||
|
|
uni.showToast({
|
|||
|
|
title: `房间${roomId}添加套餐`,
|
|||
|
|
icon: 'success',
|
|||
|
|
duration: 2000
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
getsb() {
|
|||
|
|
this.$u.get(`/app/device/list?pageNum=1&pageSize=999`).then(res => {
|
|||
|
|
if (res.code == 200) {
|
|||
|
|
this.list = res.rows.map(item => ({
|
|||
|
|
value: item.deviceId,
|
|||
|
|
label: item.sn
|
|||
|
|
}))
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
getxq() {
|
|||
|
|
this.$u.get(`/app/room/getRoomListByStoreId?storeId=${this.storeId}`).then(res => {
|
|||
|
|
if (res.code == 200) {
|
|||
|
|
this.roomList = res.data
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
btntf(roomId) {
|
|||
|
|
this.roomId = roomId
|
|||
|
|
this.getsb()
|
|||
|
|
this.show = true
|
|||
|
|
},
|
|||
|
|
// 投放设备
|
|||
|
|
confirm(e) {
|
|||
|
|
console.log(e[0].value);
|
|||
|
|
this.$u.post(`/app/device/placement/${this.roomId}/${e[0].value}`).then(res => {
|
|||
|
|
if (res.code == 200) {
|
|||
|
|
uni.showToast({
|
|||
|
|
title: '投放成功',
|
|||
|
|
icon: 'success',
|
|||
|
|
duration: 2000
|
|||
|
|
})
|
|||
|
|
} else {
|
|||
|
|
uni.showToast({
|
|||
|
|
title: res.msg,
|
|||
|
|
icon: 'none',
|
|||
|
|
duration: 2000
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
// 新建房间
|
|||
|
|
btnadd() {
|
|||
|
|
let data = {
|
|||
|
|
roomId: null,
|
|||
|
|
roomName: "2222",
|
|||
|
|
storeId: this.storeId,
|
|||
|
|
storeName: '新房间',
|
|||
|
|
type: "1",
|
|||
|
|
picture: "https://lxnapi.ccttiot.com/Fm-lU215GQdiHbxIq2WtBSmILyM3",
|
|||
|
|
tags: null,
|
|||
|
|
specification: null,
|
|||
|
|
status: null,
|
|||
|
|
merchantId: null
|
|||
|
|
}
|
|||
|
|
this.$u.post(`/app/room`, data).then(res => {
|
|||
|
|
if (res.code == 200) {
|
|||
|
|
uni.showToast({
|
|||
|
|
title: '成功',
|
|||
|
|
icon: 'success',
|
|||
|
|
duration: 2000
|
|||
|
|
})
|
|||
|
|
this.getxq()
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss">
|
|||
|
|
/deep/ .u-iconfont,
|
|||
|
|
/deep/ .u-title{
|
|||
|
|
padding-bottom: 20rpx;
|
|||
|
|
}
|
|||
|
|
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{
|
|||
|
|
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>
|