xinyi/tearoom
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
tx
tearoom/page_shanghu/bangding.vue

374 lines
7.8 KiB
Vue
Raw Permalink Normal View History

1
2024-12-20 09:02:40 +08:00
<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="gn">店门</view>
<image src="https://api.ccttiot.com/smartmeter/img/static/uZNimi3DEsGWsjfJm2Bg" mode=""></image>
</view>
<view class="xian"></view>
<view class="one">
<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="gn">大厅</view>
<image src="https://api.ccttiot.com/smartmeter/img/static/uZNimi3DEsGWsjfJm2Bg" mode=""></image>
</view>
<view class="xian"></view>
<view class="one">
<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;font-size: 32rpx;">店门</text>
</view>
<view class="rt">
<text></text> 已绑定
</view>
</view>
<view class="bot">
<view class="lt">
有当前订单才能进入门店
</view>
<view class="rt">
SN：12154522544
</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;color: #3D3D3D;"> <text style="margin-bottom: 6rpx;"></text> 已绑定</text>
</view>
<view class="zt">
SN：22451254
</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>
</view>
<view class="rt">
<text></text> 已绑定
</view>
</view>
<view class="bot">
<view class="lt">
SN：2234681537
</view>
<view class="rt">
</view>
</view>
</view>
</view>
<view class="damen">
<view class="name">
卫生间配置
</view>
<view class="menbj" style="background-color: #DEF1DA;">
<view class="top">
<view class="lt">
<text style="font-weight: 600;color: #48893B;">卫生间</text>
</view>
<view class="rt" style="color: #48893B;" >
<text style="background-color: #48893B;"></text> 未绑定
</view>
</view>
</view>
<view class="menbj" v-if="false">
<view class="top">
<view class="lt">
<text style="font-weight: 600;">卫生间</text>
</view>
<view class="rt" style="color: #48893B;" >
<text style="background-color: #48893B;"></text> 未绑定
</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>
</view> -->
</view>
</template>
<script>
export default {
data() {
return {
bgc: {
backgroundColor: "#fff",
},
storeId: '',
xuanzeflag:false
}
},
onLoad(option) {
this.storeId = option.storeId
this.getxq()
},
methods: {
// 获取门店详情
getxq(){
this.$u.get(`app/store/mch/${this.storeId}`).then(res => {
if (res.code == 200) {
}
})
}
}
}
</script>
<style lang="scss">
/deep/ .u-iconfont,
/deep/ .u-title{
padding-bottom: 20rpx;
}
page {
background: #F6F6F6;
}
.box{
width: 100%;
height: 88vh;
overflow: scroll;
padding-bottom: 60rpx;
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: 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;
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: 26rpx;
display: flex;
align-items: center;
.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>
Reference in New Issue Copy Permalink