共享
This commit is contained in:
parent
aafdfa9913
commit
c397c56f68
345
page_moban/addsheshi.vue
Normal file
345
page_moban/addsheshi.vue
Normal file
|
|
@ -0,0 +1,345 @@
|
|||
<template>
|
||||
<view class="page">
|
||||
<u-navbar title="设施信息" :border-bottom="false" :background="bgc" back-icon-color="#262B37" title-color='#262B37'
|
||||
title-size='36' height='48' id="navbar">
|
||||
</u-navbar>
|
||||
<view class="box">
|
||||
<view class="ulbox">
|
||||
<view class="one">
|
||||
设施名称
|
||||
</view>
|
||||
<view class="two">
|
||||
一号桌 <image src="https://api.ccttiot.com/smartmeter/img/static/uS5JydUQDmvbMyg4nsdo" mode=""></image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="ulbox">
|
||||
<view class="one">
|
||||
设施类型
|
||||
</view>
|
||||
<view class="two">
|
||||
茶室
|
||||
</view>
|
||||
</view>
|
||||
<view class="ulbox">
|
||||
<view class="one">
|
||||
设施绑定
|
||||
</view>
|
||||
<view class="two">
|
||||
22155221
|
||||
</view>
|
||||
</view>
|
||||
<view class="ulbox" style="border-bottom: none;">
|
||||
<view class="one">
|
||||
收费方式
|
||||
</view>
|
||||
<view class="two">
|
||||
套餐1
|
||||
</view>
|
||||
</view>
|
||||
<view class="shichang">
|
||||
<view class="stop">
|
||||
<view class="">
|
||||
套餐时长
|
||||
</view>
|
||||
<view class="">
|
||||
套餐价格(元)
|
||||
</view>
|
||||
</view>
|
||||
<view class="stop" v-for="(item,index) in 2" :key="index" style="background-color: #F9F9F9;">
|
||||
<view class="">
|
||||
3小时
|
||||
</view>
|
||||
<view class="">
|
||||
99.9
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="wz">
|
||||
注：订单提前结束剩余消费时长、金额不返还
|
||||
</view>
|
||||
<view class="anniu">
|
||||
<view class="tougang" @click="btnshop">
|
||||
确定
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
bgc: {
|
||||
backgroundColor: "#fff",
|
||||
},
|
||||
}
|
||||
},
|
||||
onLoad(option) {
|
||||
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
/deep/ .u-iconfont,
|
||||
/deep/ .u-title{
|
||||
padding-bottom: 20rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.jieb{
|
||||
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;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
.bt{
|
||||
width: 680rpx;
|
||||
height: 104rpx;
|
||||
background: #48893B;
|
||||
margin: auto;
|
||||
margin-top: 24rpx;
|
||||
border-radius: 24rpx;
|
||||
font-weight: 600;
|
||||
font-size: 36rpx;
|
||||
color: #FFFFFF;
|
||||
text-align: center;
|
||||
line-height: 104rpx;
|
||||
}
|
||||
}
|
||||
.lianwang{
|
||||
width: 680rpx;
|
||||
height: 112rpx;
|
||||
background: #FFFFFF;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin: auto;
|
||||
margin-top: 22rpx;
|
||||
border-radius: 24rpx;
|
||||
padding: 36rpx 32rpx;
|
||||
box-sizing: border-box;
|
||||
.two{
|
||||
font-size: 32rpx;
|
||||
color: #7C7C7C;
|
||||
}
|
||||
.thr{
|
||||
font-size: 32rpx;
|
||||
color: #3D3D3D;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
image{
|
||||
width: 12rpx;
|
||||
height: 34rpx;
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.jichuxx{
|
||||
width: 680rpx;
|
||||
max-height: 458rpx;
|
||||
background: #FFFFFF;
|
||||
box-sizing: border-box;
|
||||
padding: 44rpx 34rpx;
|
||||
box-sizing: border-box;
|
||||
margin: auto;
|
||||
margin-top: 22rpx;
|
||||
border-radius: 20rpx;
|
||||
.top{
|
||||
border-left: 14rpx solid #48893B;
|
||||
font-weight: 600;
|
||||
font-size: 36rpx;
|
||||
color: #3D3D3D;
|
||||
padding-left: 24rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.one{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-top: 28rpx;
|
||||
.two{
|
||||
font-size: 32rpx;
|
||||
color: #7C7C7C;
|
||||
}
|
||||
.thr{
|
||||
font-size: 32rpx;
|
||||
color: #3D3D3D;
|
||||
}
|
||||
}
|
||||
}
|
||||
.toufangbox{
|
||||
width: 680rpx;
|
||||
height: 284rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 24rpx 24rpx 24rpx 24rpx;
|
||||
margin: auto;
|
||||
margin-top: 22rpx;
|
||||
padding: 44rpx 34rpx;
|
||||
box-sizing: border-box;
|
||||
.shebeibj{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.lt{
|
||||
.name{
|
||||
font-weight: 600;
|
||||
font-size: 40rpx;
|
||||
color: #262B37;
|
||||
}
|
||||
.zt{
|
||||
font-size: 28rpx;
|
||||
color: #5B5B5B;
|
||||
margin-top: 12rpx;
|
||||
text{
|
||||
color: #00BA88;
|
||||
}
|
||||
}
|
||||
}
|
||||
.rt{
|
||||
image{
|
||||
width: 196rpx;
|
||||
height: 196rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.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;
|
||||
}
|
||||
.anniu{
|
||||
width: 100%;
|
||||
height: 152rpx;
|
||||
background: #FFFFFF;
|
||||
box-shadow: 0rpx 8rpx 20rpx 0rpx rgba(0,0,0,0.3);
|
||||
border-radius: 0rpx 0rpx 0rpx 0rpx;
|
||||
display: flex;
|
||||
padding: 24rpx 36rpx;
|
||||
box-sizing: border-box;
|
||||
justify-content: space-between;
|
||||
text-align: center;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
.tougang{
|
||||
width: 680rpx;
|
||||
height: 104rpx;
|
||||
margin: auto;
|
||||
background: #48893B;
|
||||
font-size: 36rpx;
|
||||
color: #FFFFFF;
|
||||
line-height: 104rpx;
|
||||
border-radius: 20rpx;
|
||||
}
|
||||
}
|
||||
.box{
|
||||
width: 680rpx;
|
||||
max-height: 1708rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 20rpx;
|
||||
margin: auto;
|
||||
margin-top: 28rpx;
|
||||
padding: 0 30rpx;
|
||||
box-sizing: border-box;
|
||||
.wz{
|
||||
height: 80rpx;
|
||||
line-height: 80rpx;
|
||||
}
|
||||
.shichang{
|
||||
.stop{
|
||||
display: flex;
|
||||
width: 618rpx;
|
||||
height: 76rpx;
|
||||
line-height: 76rpx;
|
||||
background: #F0F0F0;
|
||||
view{
|
||||
width: 50%;
|
||||
text-align: center;
|
||||
font-size: 28rpx;
|
||||
color: #3D3D3D;
|
||||
}
|
||||
}
|
||||
}
|
||||
.ulbox{
|
||||
width: 100%;
|
||||
height: 118rpx;
|
||||
line-height: 118rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
border-bottom: 1px solid #D8D8D8;
|
||||
.one{
|
||||
font-size: 32rpx;
|
||||
color: #3D3D3D;
|
||||
}
|
||||
.two{
|
||||
font-size: 32rpx;
|
||||
color: #7C7C7C;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
image{
|
||||
width: 14rpx;
|
||||
height: 42rpx;
|
||||
margin-left: 20rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
page {
|
||||
background: #F6F6F6;
|
||||
}
|
||||
|
||||
</style>
|
||||
477
page_moban/datingxq.vue
Normal file
477
page_moban/datingxq.vue
Normal file
|
|
@ -0,0 +1,477 @@
|
|||
<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="boxmask" v-if="flag"></view>
|
||||
<view class="box" v-if="flag">
|
||||
<view class="name">
|
||||
<view class="lt">
|
||||
名称
|
||||
</view>
|
||||
<view class="rt">
|
||||
<input type="text" placeholder="请输入大厅名称"/> <image src="https://api.ccttiot.com/smartmeter/img/static/uCta8cp7uXd1lGjZS6sc" mode=""></image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="name" style="border: none;">
|
||||
<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="but">
|
||||
<view class="quxiao" @click="flag = false">
|
||||
取消
|
||||
</view>
|
||||
<view class="queding">
|
||||
确定
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="liebiao">
|
||||
<view class="top">
|
||||
<view class="lt">
|
||||
设施列表
|
||||
</view>
|
||||
<view class="rt" @click="flag = true">
|
||||
添加
|
||||
</view>
|
||||
</view>
|
||||
<view class="list">
|
||||
<view class="item_list">
|
||||
<view class="lt">
|
||||
<view class="name">
|
||||
2号桌
|
||||
</view>
|
||||
<view class="sn">
|
||||
SN：2234681537
|
||||
</view>
|
||||
</view>
|
||||
<view class="rt">
|
||||
<view class="name">
|
||||
<text></text> 已关闭
|
||||
</view>
|
||||
<view class="img">
|
||||
<image src="https://api.ccttiot.com/smartmeter/img/static/uvqVahRyvBHooSDLQfED" mode=""></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="item_list" @click="btnwbd">
|
||||
<view class="lt">
|
||||
<view class="name">
|
||||
2号桌
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<view class="rt">
|
||||
<view class="name">
|
||||
<text></text> 未绑定
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</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>
|
||||
|
||||
<u-select v-model="show" :list="list" @confirm="confirm"></u-select>
|
||||
<view class="anniu">
|
||||
<view class="xinjian" @click="btndt">
|
||||
全关
|
||||
</view>
|
||||
<view class="queren" @click="btnmd">
|
||||
全开
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
bgc: {
|
||||
backgroundColor: "#fff",
|
||||
},
|
||||
leixing:'请选择类型',
|
||||
show:false,
|
||||
list:[
|
||||
{
|
||||
value: '2',
|
||||
label: '棋牌'
|
||||
},
|
||||
{
|
||||
value: '1',
|
||||
label: '茶室'
|
||||
},
|
||||
{
|
||||
value: '3',
|
||||
label: '台球'
|
||||
},
|
||||
],
|
||||
type:'',
|
||||
flag:false,
|
||||
addmenflag:false,
|
||||
storeId:''
|
||||
}
|
||||
},
|
||||
onLoad(option) {
|
||||
this.storeId = option.storeId
|
||||
},
|
||||
methods: {
|
||||
// 确认选择类型
|
||||
confirm(e){
|
||||
this.type = e[0].value
|
||||
this.leixing =e[0].label
|
||||
},
|
||||
// 点击确定新建大厅
|
||||
btnmd(){
|
||||
console.log(1);
|
||||
},
|
||||
// 点击取消
|
||||
btndt(){
|
||||
uni.navigateBack()
|
||||
},
|
||||
//点击的时候判断是否绑定
|
||||
btnwbd(){
|
||||
this.addmenflag = true
|
||||
},
|
||||
// 设施点击扫码添加
|
||||
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
|
||||
}
|
||||
uni.navigateTo({
|
||||
url:'/page_moban/addsheshi'
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
// 点击新建设施并生成二维码
|
||||
btntouf(){
|
||||
uni.navigateTo({
|
||||
url:'/page_moban/addsheshi'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
/deep/ .u-iconfont,
|
||||
/deep/ .u-title{
|
||||
padding-bottom: 20rpx;
|
||||
}
|
||||
.liebiao{
|
||||
padding: 46rpx 36rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
page {
|
||||
background: #F6F6F6;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
.top{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
.lt{
|
||||
font-weight: 600;
|
||||
font-size: 36rpx;
|
||||
color: #3D3D3D;
|
||||
}
|
||||
.rt{
|
||||
width: 126rpx;
|
||||
height: 58rpx;
|
||||
background: #48893B;
|
||||
border-radius: 6rpx 6rpx 6rpx 6rpx;
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
line-height: 58rpx;
|
||||
font-size: 28rpx;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
.list{
|
||||
margin-top: 42rpx;
|
||||
.item_list{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 18rpx;
|
||||
max-height: 184rpx;
|
||||
.rt{
|
||||
.name{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text{
|
||||
width: 10rpx;
|
||||
height: 10rpx;
|
||||
background: #7C7C7C;
|
||||
border-radius: 50%;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
}
|
||||
.img{
|
||||
text-align: right;
|
||||
margin-top: 20rpx;
|
||||
image{
|
||||
width: 50rpx;
|
||||
height: 50rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.lt{
|
||||
.name{
|
||||
font-weight: 600;
|
||||
font-size: 32rpx;
|
||||
color: #3D3D3D;
|
||||
}
|
||||
.sn{
|
||||
font-size: 26rpx;
|
||||
color: #3D3D3D;
|
||||
margin-top: 26rpx;
|
||||
}
|
||||
}
|
||||
padding: 32rpx 30rpx;
|
||||
box-sizing: border-box;
|
||||
width: 680rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 20rpx 20rpx 20rpx 20rpx;
|
||||
}
|
||||
}
|
||||
.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;
|
||||
z-index: -1;
|
||||
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;
|
||||
}
|
||||
}
|
||||
.mask,
|
||||
.boxmask{
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
background-color: #000;
|
||||
opacity: .3;
|
||||
z-index: 2;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
.box{
|
||||
position: fixed;
|
||||
z-index: 2;
|
||||
top: 500rpx;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 580rpx;
|
||||
max-height: 408rpx;
|
||||
background: #FFFFFF;
|
||||
margin: auto;
|
||||
margin-top: 22rpx;
|
||||
padding-top: 20rpx;
|
||||
box-sizing: border-box;
|
||||
border-radius: 20rpx;
|
||||
.but{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border-top:1px solid #D8D8D8;
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
.quxiao{
|
||||
border-right: 1px solid #D8D8D8;
|
||||
}
|
||||
view{
|
||||
width: 50%;
|
||||
height: 100rpx;
|
||||
line-height: 100rpx;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
.name{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin: auto;
|
||||
height: 80rpx;
|
||||
padding: 0 30rpx;
|
||||
margin-bottom: 10rpx;
|
||||
box-sizing: border-box;
|
||||
.lt{
|
||||
font-size: 32rpx;
|
||||
color: #3D3D3D;
|
||||
}
|
||||
.rt{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
input{
|
||||
text-align: right;
|
||||
width: 200rpx;
|
||||
}
|
||||
image{
|
||||
width: 14rpx;
|
||||
height: 42rpx;
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
197
page_moban/shoufei.vue
Normal file
197
page_moban/shoufei.vue
Normal file
|
|
@ -0,0 +1,197 @@
|
|||
<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="list">
|
||||
<view class="item_list">
|
||||
<view class="shoufei">
|
||||
<view class="shang">
|
||||
<view class="">
|
||||
收费方式1 (套餐收费)
|
||||
</view>
|
||||
</view>
|
||||
<view class="shichang">
|
||||
<view class="stop">
|
||||
<view class="">
|
||||
套餐时长
|
||||
</view>
|
||||
<view class="">
|
||||
套餐价格(元)
|
||||
</view>
|
||||
</view>
|
||||
<view class="stop" v-for="(item,index) in 4" :key="index" style="background-color: #F9F9F9;">
|
||||
<view class="">
|
||||
3小时
|
||||
</view>
|
||||
<view class="">
|
||||
99.9
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="wz">
|
||||
注：订单提前结束剩余消费时长、金额不返还
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="item_list">
|
||||
<view class="shoufei">
|
||||
<view class="shang">
|
||||
<view class="">
|
||||
收费方式2 (单价收费)
|
||||
</view>
|
||||
</view>
|
||||
<view class="price">
|
||||
5元/小时，最低消费2小时，押金金额100元
|
||||
</view>
|
||||
<view class="shuom">
|
||||
(订单结束30分钟内退还)注：订单提前结束剩余消费时 长、金额不返还
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="anniu">
|
||||
<view class="queren" @click="btnqd">
|
||||
确定
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
bgc: {
|
||||
backgroundColor: "#fff",
|
||||
},
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
/deep/ .u-iconfont,
|
||||
/deep/ .u-title{
|
||||
padding-bottom: 20rpx;
|
||||
}
|
||||
page {
|
||||
background: #F6F6F6;
|
||||
}
|
||||
.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;
|
||||
.queren{
|
||||
width: 680rpx;
|
||||
margin: auto;
|
||||
height: 104rpx;
|
||||
background: #48893B;
|
||||
text-align: center;
|
||||
line-height: 104rpx;
|
||||
font-weight: 600;
|
||||
font-size: 36rpx;
|
||||
color: #FFFFFF;
|
||||
border-radius: 20rpx;
|
||||
}
|
||||
}
|
||||
.list{
|
||||
width: 100%;
|
||||
height: 80vh;
|
||||
padding-bottom: 80rpx;
|
||||
box-sizing: border-box;
|
||||
overflow: scroll;
|
||||
margin-top: 28rpx;
|
||||
.item_list{
|
||||
width: 680rpx;
|
||||
max-height: 1600rpx;
|
||||
margin: auto;
|
||||
margin-top: 28rpx;
|
||||
background: #FFFFFF;
|
||||
border: 4rpx solid #fff;
|
||||
border-radius: 24rpx;
|
||||
padding-bottom: 26rpx;
|
||||
box-sizing: border-box;
|
||||
.shoufei{
|
||||
margin-top: 30rpx;
|
||||
.wz{
|
||||
font-size: 24rpx;
|
||||
color: #3D3D3D;
|
||||
margin-top: 24rpx;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
.shichang{
|
||||
margin-top: 34rpx;
|
||||
.stop{
|
||||
display: flex;
|
||||
width: 618rpx;
|
||||
margin: auto;
|
||||
height: 76rpx;
|
||||
line-height: 76rpx;
|
||||
background: #F0F0F0;
|
||||
view{
|
||||
width: 50%;
|
||||
text-align: center;
|
||||
font-size: 28rpx;
|
||||
color: #3D3D3D;
|
||||
}
|
||||
}
|
||||
}
|
||||
.price{
|
||||
font-size: 28rpx;
|
||||
color: #3D3D3D;
|
||||
margin-top: 22rpx;
|
||||
padding-left: 30rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.shuom{
|
||||
font-size: 24rpx;
|
||||
color: #3D3D3D;
|
||||
margin-top: 20rpx;
|
||||
padding-left: 30rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.shang{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
view{
|
||||
padding-left: 30rpx;
|
||||
box-sizing: border-box;
|
||||
font-size: 32rpx;
|
||||
color: #3D3D3D;
|
||||
font-weight: 600;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
image{
|
||||
width: 14rpx;
|
||||
height: 42rpx;
|
||||
margin-top: 0;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
|
|
@ -3,33 +3,140 @@
|
|||
<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="box">
|
||||
<view class="name">
|
||||
<view class="lt">
|
||||
名称
|
||||
</view>
|
||||
<view class="rt">
|
||||
<input type="text" placeholder="请输入房间名称"/> <image src="https://api.ccttiot.com/smartmeter/img/static/uCta8cp7uXd1lGjZS6sc" mode=""></image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="name" style="border: none;">
|
||||
<view class="lt">
|
||||
类型
|
||||
<view class="dalist">
|
||||
<view class="box">
|
||||
<view class="name">
|
||||
<view class="lt">
|
||||
名称
|
||||
</view>
|
||||
<view class="rt">
|
||||
<input type="text" 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" style="border: none;">
|
||||
<view class="lt">
|
||||
是否开启保洁功能
|
||||
</view>
|
||||
<view class="rt">
|
||||
<u-switch size="32" v-model="checked" active-color="#48893B" inactive-color="#eee"></u-switch>
|
||||
</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(index) }">
|
||||
{{ 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" 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="">
|
||||
<text>套餐1 </text> <image src="https://api.ccttiot.com/smartmeter/img/static/u0rIwef50qNN4aaeqSfl" mode=""></image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="shichang">
|
||||
<view class="stop">
|
||||
<view class="">
|
||||
套餐时长
|
||||
</view>
|
||||
<view class="">
|
||||
套餐价格(元)
|
||||
</view>
|
||||
</view>
|
||||
<view class="stop" v-for="(item,index) in 4" :key="index" style="background-color: #F9F9F9;">
|
||||
<view class="">
|
||||
3小时
|
||||
</view>
|
||||
<view class="">
|
||||
99.9
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="wz">
|
||||
注：订单提前结束剩余消费时长、金额不返还
|
||||
</view>
|
||||
<view class="rt" @click="show = true">
|
||||
{{leixing}} <image src="https://api.ccttiot.com/smartmeter/img/static/uCta8cp7uXd1lGjZS6sc" mode=""></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<u-select v-model="show" :list="list" @confirm="confirm"></u-select>
|
||||
<view class="anniu">
|
||||
<view class="xinjian" @click="btndt">
|
||||
取消
|
||||
</view>
|
||||
<view class="queren" @click="btnmd">
|
||||
确认新建
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- <view class="shoufei" @click="btnguize">
|
||||
<view class="shang">
|
||||
<view class="">
|
||||
取消规则
|
||||
</view>
|
||||
<view class="">
|
||||
<text>取消规则1 </text> <image src="https://api.ccttiot.com/smartmeter/img/static/u0rIwef50qNN4aaeqSfl" mode=""></image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="shichang">
|
||||
<view class="stop">
|
||||
<view class="">
|
||||
取消时长
|
||||
</view>
|
||||
<view class="">
|
||||
违约金
|
||||
</view>
|
||||
<view class="">
|
||||
说明
|
||||
</view>
|
||||
</view>
|
||||
<view class="stop" v-for="(item,index) in 4" :key="index" style="background-color: #F9F9F9;">
|
||||
<view class="">
|
||||
开始前30分钟外
|
||||
</view>
|
||||
<view class="">
|
||||
不收取
|
||||
</view>
|
||||
<view class="">
|
||||
无
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view> -->
|
||||
</view>
|
||||
|
||||
|
||||
<u-select v-model="show" :list="list" @confirm="confirm"></u-select>
|
||||
<view class="anniu">
|
||||
<view class="xinjian" @click="btndt">
|
||||
取消
|
||||
</view>
|
||||
<view class="queren" @click="btnmd">
|
||||
确认新建
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
|
|
@ -42,6 +149,7 @@
|
|||
},
|
||||
leixing:'请选择类型',
|
||||
show:false,
|
||||
checked:false,
|
||||
list:[
|
||||
{
|
||||
value: '2',
|
||||
|
|
@ -57,13 +165,89 @@
|
|||
},
|
||||
],
|
||||
type:'',
|
||||
biaoqianlist:[],
|
||||
selectedIndices:[],
|
||||
token:'',
|
||||
url:'',
|
||||
imgurl:''
|
||||
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
|
||||
|
||||
},
|
||||
onShow() {
|
||||
this.getbiaoqian()
|
||||
this.getQiniuToken()
|
||||
},
|
||||
methods: {
|
||||
// 点击选择收费
|
||||
btnshoufei(){
|
||||
uni.navigateTo({
|
||||
url:'/page_moban/shoufei'
|
||||
})
|
||||
},
|
||||
// 点击选择标签
|
||||
btnbq(dictValue,index) {
|
||||
const indexExists = this.selectedIndices.includes(index);
|
||||
if (indexExists) {
|
||||
this.selectedIndices = this.selectedIndices.filter(i => i !== index);
|
||||
} else {
|
||||
this.selectedIndices.push(index);
|
||||
}
|
||||
},
|
||||
isSelected(index) {
|
||||
return this.selectedIndices.includes(index);
|
||||
},
|
||||
// 获取标签
|
||||
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]
|
||||
console.log(this.url);
|
||||
}
|
||||
})
|
||||
},
|
||||
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
|
||||
|
|
@ -83,9 +267,99 @@
|
|||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.active{
|
||||
background-color: #48893B !important;
|
||||
color: #fff !important;
|
||||
}
|
||||
page {
|
||||
background: #F6F6F6;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
.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;
|
||||
|
|
@ -125,7 +399,7 @@
|
|||
}
|
||||
.box{
|
||||
width: 680rpx;
|
||||
max-height: 228rpx;
|
||||
max-height: 408rpx;
|
||||
background: #FFFFFF;
|
||||
margin: auto;
|
||||
margin-top: 22rpx;
|
||||
|
|
|
|||
|
|
@ -6,7 +6,8 @@
|
|||
<view class="box">
|
||||
<view class="tongji">
|
||||
<view class="one">
|
||||
<view class="kg">关</view>
|
||||
<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>
|
||||
|
|
@ -29,84 +30,92 @@
|
|||
<image src="https://api.ccttiot.com/smartmeter/img/static/uZNimi3DEsGWsjfJm2Bg" mode=""></image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="damen">
|
||||
<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>设备离线</text>
|
||||
<text style="font-weight: 600;">店门</text> <text v-if="gateSnobj.onlineStatus == 0">设备离线</text>
|
||||
</view>
|
||||
<view class="rt">
|
||||
<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 src="https://api.ccttiot.com/smartmeter/img/static/u4Btme5ARjeAyvvTjgBF" mode=""></image>
|
||||
<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">
|
||||
<view class="damen" v-if="roomList != ''">
|
||||
<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 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">
|
||||
<view class="damen" v-if="datingobj.deviceList">
|
||||
<view class="name">
|
||||
大厅
|
||||
</view>
|
||||
<view class="menbj">
|
||||
<view class="menbj" v-for="(item,index) in datingobj.deviceList" :key="index">
|
||||
<view class="top">
|
||||
<view class="lt">
|
||||
<text style="font-weight: 600;">1号桌</text> <text>设备离线</text>
|
||||
<text style="font-weight: 600;">{{datingobj.roomName}}</text> <text v-if="item.onlineStatus == 0">设备离线</text>
|
||||
</view>
|
||||
<view class="rt">
|
||||
<view class="rt" v-if="item.powerStatus == 0">
|
||||
<text></text> 已关闭
|
||||
</view>
|
||||
<view class="rt" style="color: #48893B;" v-if="false">
|
||||
<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：2234681537
|
||||
SN：{{item.sn}}
|
||||
</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>
|
||||
<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">
|
||||
<view class="damen" v-if="cesuolist != ''">
|
||||
<view class="name">
|
||||
卫生间配置
|
||||
</view>
|
||||
<view class="menbj">
|
||||
<view class="menbj" v-for="(item,index) in cesuolist" :key="index">
|
||||
<view class="top">
|
||||
<view class="lt">
|
||||
<text style="font-weight: 600;">卫生间</text> <text>设备离线</text>
|
||||
<text style="font-weight: 600;">{{item.roomName}}</text> <text v-if="hasOfflineDevice(item.deviceList)">设备离线</text>
|
||||
</view>
|
||||
<view class="rt" v-if="false">
|
||||
<view class="rt" v-if="item.powerStatus == 0">
|
||||
<text></text> 已关闭
|
||||
</view>
|
||||
<view class="rt" style="color: #48893B;" >
|
||||
<view class="rt" style="color: #48893B;" v-if="item.powerStatus == 1">
|
||||
<text style="background-color: #48893B;"></text> 已开启
|
||||
</view>
|
||||
</view>
|
||||
|
|
@ -115,8 +124,8 @@
|
|||
无条件进入卫生间
|
||||
</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>
|
||||
<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>
|
||||
|
|
@ -126,21 +135,21 @@
|
|||
<view class="mask" v-if="xuanzeflag"></view>
|
||||
<view class="xuanze" v-if="xuanzeflag">
|
||||
<view class="top">
|
||||
<view>选择使用场景</view>
|
||||
<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>
|
||||
|
|
@ -153,6 +162,51 @@
|
|||
门店配置
|
||||
</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>
|
||||
|
||||
|
|
@ -165,109 +219,120 @@
|
|||
},
|
||||
storeId: '',
|
||||
roomList: [],
|
||||
datingobj:{},
|
||||
cesuolist:[],
|
||||
list: [],
|
||||
show: false,
|
||||
roomId: '',
|
||||
xuanzeflag:false
|
||||
xuanzeflag:false,
|
||||
addmenflag:false,
|
||||
gateSnobj:{},
|
||||
gateSnflag:false
|
||||
}
|
||||
},
|
||||
onLoad(option) {
|
||||
this.storeId = option.storeId
|
||||
this.getxq()
|
||||
this.getsb()
|
||||
},
|
||||
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
|
||||
},
|
||||
|
||||
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 => {
|
||||
this.$u.get(`app/store/mch/${this.storeId}`).then(res => {
|
||||
if (res.code == 200) {
|
||||
this.roomList = res.data
|
||||
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
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
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>
|
||||
|
|
@ -277,6 +342,72 @@
|
|||
/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;
|
||||
}
|
||||
|
|
@ -367,9 +498,10 @@
|
|||
margin-top: 8rpx;
|
||||
}
|
||||
.name{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
// display: flex;
|
||||
// justify-content: space-between;
|
||||
text{
|
||||
display: block;
|
||||
font-weight: 600;
|
||||
font-size: 36rpx;
|
||||
color: #3D3D3D;
|
||||
|
|
|
|||
|
|
@ -328,6 +328,7 @@
|
|||
border: 1px solid #48893B;
|
||||
color: #48893B;
|
||||
padding: 10rpx;
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
image{
|
||||
width: 226rpx;
|
||||
|
|
|
|||
431
page_shanghu/toufsb.vue
Normal file
431
page_shanghu/toufsb.vue
Normal file
|
|
@ -0,0 +1,431 @@
|
|||
<template>
|
||||
<view class="page">
|
||||
<u-navbar title="设备信息" :border-bottom="false" :background="bgc" back-icon-color="#262B37" title-color='#262B37'
|
||||
title-size='36' height='48' id="navbar">
|
||||
</u-navbar>
|
||||
<view class="box">
|
||||
<view class="ulbox">
|
||||
<view class="one">
|
||||
设备名称
|
||||
</view>
|
||||
<view class="two">
|
||||
{{xxobj.deviceName == null ? '--' : xxobj.deviceName}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="ulbox" @click="showone = true">
|
||||
<view class="one">
|
||||
开锁方式
|
||||
</view>
|
||||
<view class="two">
|
||||
{{ksfs}} <image src="https://api.ccttiot.com/smartmeter/img/static/uS5JydUQDmvbMyg4nsdo" mode=""></image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="ulbox" @click="showtwo = true">
|
||||
<view class="one">
|
||||
开锁时长
|
||||
</view>
|
||||
<view class="two">
|
||||
{{kstime == '' ? '' : kstime + '秒'}} <image src="https://api.ccttiot.com/smartmeter/img/static/uS5JydUQDmvbMyg4nsdo" mode=""></image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="ulbox" style="border: none;" @click="showthr = true">
|
||||
<view class="one">
|
||||
开锁条件
|
||||
</view>
|
||||
<view class="two">
|
||||
{{kstj}} <image src="https://api.ccttiot.com/smartmeter/img/static/uS5JydUQDmvbMyg4nsdo" mode=""></image>
|
||||
</view>
|
||||
</view>
|
||||
<u-select v-model="showone" :list="listone" @confirm="btnone"></u-select>
|
||||
<u-picker mode="time" v-model="showtwo" :params="params" @confirm="btntwo"></u-picker>
|
||||
<u-select v-model="showthr" :list="listthr" @confirm="btnthr"></u-select>
|
||||
|
||||
<view class="anniu">
|
||||
<view class="tougang" @click="btnshop">
|
||||
确认投放
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="box">
|
||||
<view class="ulbox">
|
||||
<view class="one">
|
||||
设备型号
|
||||
</view>
|
||||
<view class="two">
|
||||
{{xxobj.model == null ? '--' : xxobj.model}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="ulbox">
|
||||
<view class="one">
|
||||
设备编号
|
||||
</view>
|
||||
<view class="two">
|
||||
{{xxobj.sn == null ? '--' : xxobj.sn}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="ulbox">
|
||||
<view class="one">
|
||||
设备状态
|
||||
</view>
|
||||
<view class="two">
|
||||
<view class="two" v-if="xxobj.placementStatus == 1">
|
||||
已投放
|
||||
</view>
|
||||
<view class="two" v-if="xxobj.placementStatus == 2">
|
||||
未投放
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="ulbox">
|
||||
<view class="one">
|
||||
版本号
|
||||
</view>
|
||||
<view class="two">
|
||||
{{xxobj.version == null ? '--' : xxobj.version}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="ulbox" style="border-bottom: none;">
|
||||
<view class="one">
|
||||
联网状态
|
||||
</view>
|
||||
<view class="two">
|
||||
{{xxobj.onlineStatus == 1 ? '在线' : '离线'}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
bgc: {
|
||||
backgroundColor: "#fff",
|
||||
},
|
||||
listone:[{
|
||||
value: '1',
|
||||
label: '通电开锁'
|
||||
},{
|
||||
alue: '2',
|
||||
label: '断电开锁'
|
||||
}],
|
||||
listthr:[
|
||||
{
|
||||
value: '1',
|
||||
label: '有当前订单可进入'
|
||||
},{
|
||||
value: '2',
|
||||
label: '有历史订单可进入'
|
||||
},{
|
||||
value: '3',
|
||||
label: '无条件'
|
||||
}],
|
||||
params: {
|
||||
year: false,
|
||||
month: false,
|
||||
day: false,
|
||||
hour: false,
|
||||
minute: false,
|
||||
second: true
|
||||
},
|
||||
showone:false,
|
||||
showtwo:false,
|
||||
showthr:false,
|
||||
xxobj:{},
|
||||
storeId:'',
|
||||
sn:'',
|
||||
ksfs:'',
|
||||
kstime:'',
|
||||
kstj:'',
|
||||
ksfsid:'',
|
||||
kstjid:''
|
||||
}
|
||||
},
|
||||
onLoad(option) {
|
||||
this.storeId = option.storeId
|
||||
this.sn = option.sn
|
||||
this.getxx()
|
||||
},
|
||||
methods: {
|
||||
// 点击选择门店
|
||||
btnshop(){
|
||||
let that = this
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '您确认要投放吗？',
|
||||
success: function(res) {
|
||||
if (res.confirm) {
|
||||
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
// 确认选择开锁方式
|
||||
btnone(e){
|
||||
this.ksfs = e[0].label
|
||||
this.ksfsid = e[0].value
|
||||
},
|
||||
// 确认选择开锁时间
|
||||
btntwo(e){
|
||||
this.kstime = e.second
|
||||
},
|
||||
// 确认开锁条件
|
||||
btnthr(e){
|
||||
this.kstj = e[0].label
|
||||
this.kstjid = e[0].value
|
||||
},
|
||||
// 获取设备信息
|
||||
getxx(){
|
||||
this.$u.get(`/app/device/${this.sn}/bySn`).then(res => {
|
||||
if (res.code == 200) {
|
||||
this.xxobj = res.data
|
||||
}
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
/deep/ .u-iconfont,
|
||||
/deep/ .u-title{
|
||||
padding-bottom: 20rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.jieb{
|
||||
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;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
.bt{
|
||||
width: 680rpx;
|
||||
height: 104rpx;
|
||||
background: #48893B;
|
||||
margin: auto;
|
||||
margin-top: 24rpx;
|
||||
border-radius: 24rpx;
|
||||
font-weight: 600;
|
||||
font-size: 36rpx;
|
||||
color: #FFFFFF;
|
||||
text-align: center;
|
||||
line-height: 104rpx;
|
||||
}
|
||||
}
|
||||
.lianwang{
|
||||
width: 680rpx;
|
||||
height: 112rpx;
|
||||
background: #FFFFFF;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin: auto;
|
||||
margin-top: 22rpx;
|
||||
border-radius: 24rpx;
|
||||
padding: 36rpx 32rpx;
|
||||
box-sizing: border-box;
|
||||
.two{
|
||||
font-size: 32rpx;
|
||||
color: #7C7C7C;
|
||||
}
|
||||
.thr{
|
||||
font-size: 32rpx;
|
||||
color: #3D3D3D;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
image{
|
||||
width: 12rpx;
|
||||
height: 34rpx;
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.jichuxx{
|
||||
width: 680rpx;
|
||||
max-height: 458rpx;
|
||||
background: #FFFFFF;
|
||||
box-sizing: border-box;
|
||||
padding: 44rpx 34rpx;
|
||||
box-sizing: border-box;
|
||||
margin: auto;
|
||||
margin-top: 22rpx;
|
||||
border-radius: 20rpx;
|
||||
.top{
|
||||
border-left: 14rpx solid #48893B;
|
||||
font-weight: 600;
|
||||
font-size: 36rpx;
|
||||
color: #3D3D3D;
|
||||
padding-left: 24rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.one{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-top: 28rpx;
|
||||
.two{
|
||||
font-size: 32rpx;
|
||||
color: #7C7C7C;
|
||||
}
|
||||
.thr{
|
||||
font-size: 32rpx;
|
||||
color: #3D3D3D;
|
||||
}
|
||||
}
|
||||
}
|
||||
.toufangbox{
|
||||
width: 680rpx;
|
||||
height: 284rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 24rpx 24rpx 24rpx 24rpx;
|
||||
margin: auto;
|
||||
margin-top: 22rpx;
|
||||
padding: 44rpx 34rpx;
|
||||
box-sizing: border-box;
|
||||
.shebeibj{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.lt{
|
||||
.name{
|
||||
font-weight: 600;
|
||||
font-size: 40rpx;
|
||||
color: #262B37;
|
||||
}
|
||||
.zt{
|
||||
font-size: 28rpx;
|
||||
color: #5B5B5B;
|
||||
margin-top: 12rpx;
|
||||
text{
|
||||
color: #00BA88;
|
||||
}
|
||||
}
|
||||
}
|
||||
.rt{
|
||||
image{
|
||||
width: 196rpx;
|
||||
height: 196rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.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;
|
||||
}
|
||||
.anniu{
|
||||
width: 100%;
|
||||
height: 152rpx;
|
||||
background: #FFFFFF;
|
||||
box-shadow: 0rpx 8rpx 20rpx 0rpx rgba(0,0,0,0.3);
|
||||
border-radius: 0rpx 0rpx 0rpx 0rpx;
|
||||
display: flex;
|
||||
padding: 24rpx 36rpx;
|
||||
box-sizing: border-box;
|
||||
justify-content: space-between;
|
||||
text-align: center;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
.tougang{
|
||||
width: 680rpx;
|
||||
margin: auto;
|
||||
height: 104rpx;
|
||||
background: #48893B;
|
||||
font-size: 36rpx;
|
||||
color: #FFFFFF;
|
||||
line-height: 104rpx;
|
||||
border-radius: 20rpx;
|
||||
}
|
||||
}
|
||||
.box{
|
||||
width: 680rpx;
|
||||
max-height: 708rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 20rpx;
|
||||
margin: auto;
|
||||
margin-top: 28rpx;
|
||||
padding: 0 30rpx;
|
||||
box-sizing: border-box;
|
||||
.ulbox{
|
||||
width: 100%;
|
||||
height: 118rpx;
|
||||
line-height: 118rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
border-bottom: 1px solid #D8D8D8;
|
||||
.one{
|
||||
font-size: 32rpx;
|
||||
color: #3D3D3D;
|
||||
}
|
||||
.two{
|
||||
font-size: 32rpx;
|
||||
color: #7C7C7C;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
image{
|
||||
width: 14rpx;
|
||||
height: 42rpx;
|
||||
margin-left: 20rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
page {
|
||||
background: #F6F6F6;
|
||||
}
|
||||
|
||||
</style>
|
||||
294
page_shanghu/weishebei.vue
Normal file
294
page_shanghu/weishebei.vue
Normal file
|
|
@ -0,0 +1,294 @@
|
|||
<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="list"
|
||||
@touchstart="onTouchStart"
|
||||
@touchend="onTouchEnd">
|
||||
<view class="list_item" v-for="(item,index) in list" :key="index" @click="btnedit(item.sn)">
|
||||
<view class="top">
|
||||
<view class="sn">SN:{{item.sn}}</view>
|
||||
<view class="zt" style="color: #48893B;" v-if="item.onlineStatus == 1">
|
||||
<text></text>在线
|
||||
</view>
|
||||
<view class="zt" style="color: #808080;" v-else>
|
||||
<text style="background-color: #808080;"></text>离线
|
||||
</view>
|
||||
</view>
|
||||
<view class="cen">
|
||||
<image :src="item.picture" mode=""></image>
|
||||
<view class="sbxx">
|
||||
<view class="">
|
||||
门店名称：{{item.storeName == null ? '--' : item.storeName}}
|
||||
</view>
|
||||
<view class="">
|
||||
投放位置：--
|
||||
</view>
|
||||
<view class="">
|
||||
设备状态：<text style="color: #48893B;" v-if="item.placementStatus == 1">已投放</text>
|
||||
<text style="color: #F39B18;" v-if="item.placementStatus == 2">待投放</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="sbm">
|
||||
<text></text>
|
||||
<view class="">
|
||||
设备码
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="" style="width: 100%;text-align: center;margin-top: 100rpx;font-size: 34rpx;color: #ccc;">
|
||||
没有更多设备啦...
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
bgc: {
|
||||
backgroundColor: "#fff",
|
||||
},
|
||||
list:[],
|
||||
tfshow: false,
|
||||
ztshow:false,
|
||||
status:'',
|
||||
keyword:'',
|
||||
pagesum:1,
|
||||
pagesize:10,
|
||||
touchStartX: 0, // 触屏起始点x
|
||||
touchStartY: 0, // 触屏起始点y
|
||||
xiaflag:true,
|
||||
total:'',
|
||||
qingqiuflag:true,
|
||||
storeId:''
|
||||
}
|
||||
},
|
||||
onLoad(option) {
|
||||
this.storeId = option.storeId
|
||||
},
|
||||
onShow() {
|
||||
this.status ='',
|
||||
this.keyword ='',
|
||||
this.pagesum = 1
|
||||
this.list = []
|
||||
this.getsb()
|
||||
},
|
||||
methods: {
|
||||
// 点击跳转到设备信息页
|
||||
btnedit(sn){
|
||||
uni.navigateTo({
|
||||
url:'/page_shanghu/toufsb?storeId=' + this.storeId + '&sn=' + sn
|
||||
})
|
||||
},
|
||||
// 请求所有设备列表
|
||||
getsb(){
|
||||
this.$u.get(`/app/device/list?status=${this.status}&pageNum=${this.pagesum}&pageSize=${this.pagesize}&keyword=${this.keyword}&placementStatus=2`).then(res => {
|
||||
if (res.code == 200) {
|
||||
this.xiaflag = true
|
||||
this.total = res.total
|
||||
if (this.pagesum > 1) {
|
||||
this.pagesum++
|
||||
this.list = this.list.concat(res.rows)
|
||||
this.qingqiuflag = true
|
||||
} else {
|
||||
this.pagesum++
|
||||
this.list = res.rows
|
||||
this.qingqiuflag = true
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
// 按下滑动
|
||||
onTouchStart(e) {
|
||||
this.imgflag = false
|
||||
this.touchStartX = e.touches[0].clientX;
|
||||
this.touchStartY = e.touches[0].clientY;
|
||||
},
|
||||
// 松开滑动
|
||||
onTouchEnd(e) {
|
||||
this.imgflag = true
|
||||
let deltaX = e.changedTouches[0].clientX - this.touchStartX;
|
||||
let deltaY = e.changedTouches[0].clientY - this.touchStartY;
|
||||
if (Math.abs(deltaX) > 50 && Math.abs(deltaX) > Math.abs(deltaY)) {
|
||||
if (deltaX >= 0) {
|
||||
// console.log("左滑")
|
||||
} else {
|
||||
// console.log("右滑")
|
||||
}
|
||||
} else if (Math.abs(deltaY) > 50 && Math.abs(deltaX) < Math.abs(deltaY)) {
|
||||
if (deltaY < 100) {
|
||||
if(this.qingqiuflag == true){
|
||||
let sum = (this.pagesum - 1) * this.pagesize
|
||||
console.log(sum,this.total);
|
||||
if (this.total > sum) {
|
||||
this.qingqiuflag = false
|
||||
this.getsb()
|
||||
}
|
||||
}
|
||||
} else {
|
||||
console.log("下滑")
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
/deep/ .u-iconfont,
|
||||
/deep/ .u-title{
|
||||
padding-bottom: 20rpx;
|
||||
}
|
||||
page {
|
||||
background: #F6F6F6;
|
||||
}
|
||||
.list{
|
||||
width: 100%;
|
||||
height: 1230rpx;
|
||||
overflow: scroll;
|
||||
padding-bottom: 50rpx;
|
||||
box-sizing: border-box;
|
||||
.list_item{
|
||||
width: 750rpx;
|
||||
height: 422rpx;
|
||||
background: #FFFFFF;
|
||||
margin-top: 20rpx;
|
||||
.sbm{
|
||||
margin-top: 18rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding-right: 38rpx;
|
||||
box-sizing: border-box;
|
||||
view{
|
||||
width: 152rpx;
|
||||
height: 64rpx;
|
||||
border-radius: 14rpx 14rpx 14rpx 14rpx;
|
||||
border: 2rpx solid #48893B;
|
||||
text-align: center;
|
||||
line-height: 62rpx;
|
||||
font-size: 32rpx;
|
||||
color: #48893B;
|
||||
}
|
||||
}
|
||||
.cen{
|
||||
display: flex;
|
||||
padding-left: 30rpx;
|
||||
box-sizing: border-box;
|
||||
margin-top: 28rpx;
|
||||
.sbxx{
|
||||
view{
|
||||
margin-top: 30rpx;
|
||||
}
|
||||
}
|
||||
image{
|
||||
width: 196rpx;
|
||||
height: 196rpx;
|
||||
margin-right: 40rpx;
|
||||
}
|
||||
}
|
||||
.top{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
border-bottom: 1px solid #D8D8D8;
|
||||
padding: 0 32rpx;
|
||||
height: 94rpx;
|
||||
line-height: 94rpx;
|
||||
.zt{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text{
|
||||
width: 14rpx;
|
||||
height: 14rpx;
|
||||
background: #48893B;
|
||||
margin-right: 12rpx;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
.sn{
|
||||
font-weight: 600;
|
||||
font-size: 30rpx;
|
||||
color: #3D3D3D;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.shaixuan{
|
||||
width: 100%;
|
||||
padding: 0 112rpx;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
background-color: #fff;
|
||||
padding-top: 32rpx;
|
||||
padding-bottom: 24rpx;
|
||||
box-sizing: border-box;
|
||||
.lt{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 32rpx;
|
||||
color: #3D3D3D;
|
||||
}
|
||||
.rt{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 32rpx;
|
||||
color: #3D3D3D;
|
||||
}
|
||||
image{
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
}
|
||||
.serch{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0 40rpx;
|
||||
box-sizing: border-box;
|
||||
padding-top: 40rpx;
|
||||
background-color: #fff;
|
||||
.rt{
|
||||
width: 56rpx;
|
||||
height: 56rpx;
|
||||
margin-top: 4rpx;
|
||||
}
|
||||
.lt{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 596rpx;
|
||||
height: 68rpx;
|
||||
border: 2rpx solid #48893B;
|
||||
border-radius: 24rpx;
|
||||
padding-left: 30rpx;
|
||||
box-sizing: border-box;
|
||||
.sousuo{
|
||||
width: 140rpx;
|
||||
height: 66rpx;
|
||||
text-align: center;
|
||||
line-height: 66rpx;
|
||||
font-size: 32rpx;
|
||||
color: #FFFFFF;
|
||||
background: #48893B;
|
||||
border: 2rpx solid #48893B;
|
||||
border-radius: 0 20rpx 20rpx 0;
|
||||
}
|
||||
image{
|
||||
width: 46rpx;
|
||||
height: 46rpx;
|
||||
}
|
||||
input{
|
||||
width: 380rpx;
|
||||
margin-left: 30rpx;
|
||||
height: 68rpx;
|
||||
line-height: 68rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
40
pages.json
40
pages.json
|
|
@ -307,6 +307,46 @@
|
|||
"enablePullDownRefresh": false,
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},{
|
||||
"path": "weishebei",
|
||||
"style": {
|
||||
"navigationBarTitleText": "上传",
|
||||
"enablePullDownRefresh": false,
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},{
|
||||
"path": "toufsb",
|
||||
"style": {
|
||||
"navigationBarTitleText": "上传",
|
||||
"enablePullDownRefresh": false,
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
}
|
||||
]
|
||||
}, {
|
||||
"root": "page_moban",
|
||||
"pages": [
|
||||
{
|
||||
"path": "shoufei",
|
||||
"style": {
|
||||
"navigationBarTitleText": "上传",
|
||||
"enablePullDownRefresh": false,
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},{
|
||||
"path": "datingxq",
|
||||
"style": {
|
||||
"navigationBarTitleText": "上传",
|
||||
"enablePullDownRefresh": false,
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},{
|
||||
"path": "addsheshi",
|
||||
"style": {
|
||||
"navigationBarTitleText": "上传",
|
||||
"enablePullDownRefresh": false,
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
}
|
||||
]
|
||||
}, {
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user