<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="serch"> <view class="lt"> <image src="https://api.ccttiot.com/smartmeter/img/static/uaG7R4JLfYOzBhWfDN0j" mode=""></image><input type="text" v-model="keyword" placeholder="搜索"/> <view class="sousuo" @click="btnsousuo">搜索</view> </view> </view> --> <view class="list"> <view class="list_item" v-for="(item,index) in shoplist" :key="index" :id="activeindex == index ? 'active' : ''" @click="btnitem(index,item.storeId)"> <view class="top"> <view class="lt"> <image src="https://api.ccttiot.com/smartmeter/img/static/uz2aEARAue12h0Z9e9YH" mode=""></image> {{item.name}} <text v-if="item.typeTags.some(tag => tag == 2)">棋牌</text> <text v-if="item.typeTags.some(tag => tag == 1)">茶室</text> <text v-if="item.typeTags.some(tag => tag == 3)">台球</text> <text v-if="item.typeTags.some(tag => tag == 4)">其他</text> </view> <view class="rt" v-if="item.status == 1"> <text></text> 运营中 </view> <view style="color: #ccc;" class="rt" v-if="item.status == 0"> <text style="background-color: #ccc;"></text> 歇业中 </view> <view style="color: #ccc;" class="rt" v-if="item.status == 8"> <text style="background-color: #ccc;"></text> 下线维护 </view> </view> <view class="yingye"> <image src="https://api.ccttiot.com/smartmeter/img/static/uDbFGJTcwd049NgBi8Oh" mode=""></image> <text>营业时间:</text>{{item.businessTimeStart}}-{{item.businessTimeEnd}} </view> <view class="yingye"> <view class="" style="width: 202rpx;display: flex;align-items: center;"> <image src="https://api.ccttiot.com/smartmeter/img/static/usdjNfgrhBfMfpIq3Ap1" mode=""></image> <text>详细地址:</text> </view> <text>{{item.address.length > 12 ? item.address.slice(0,12) + '...' : item.address}}</text> </view> </view> <view class="" style="width: 100%;text-align: center;margin-top: 30rpx;font-size: 34rpx;color: #ccc;"> 没有更多门店啦... </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", }, activeindex:-1, shoplist:[], storeId:'', sn:'', deviceId:'' } }, onLoad(option) { this.deviceId = option.deviceId }, onShow() { this.getshop() }, methods: { // 点击跳转到选择房间 // btnroom(){ // uni.navigateTo({ // url:'/page_shanghu/shoproom?storeId='+ this.storeId + '&deviceId=' + this.deviceId // }) // }, // 点击新建门店 btnadd(){ uni.navigateTo({ url:'/page_shanghu/mendianadd' }) }, // 点击选择门店 btnitem(index,storeId){ // this.activeindex = index this.storeId = storeId uni.navigateTo({ url:'/page_shanghu/bangding?storeId=' + storeId + '&deviceId=' + this.deviceId }) }, // 请求本人所有门店 getshop(){ this.$u.get(`/app/store/list`).then(res => { if (res.code == 200) { this.shoplist = res.rows } }) } } } </script> <style lang="scss"> page { background: #F6F6F6; } #active{ border: 4rpx solid #48893B !important; } /deep/ .u-iconfont, /deep/ .u-title{ padding-bottom: 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; 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; } } .list{ width: 100%; height: 87vh; overflow: scroll; padding-bottom: 30rpx; box-sizing: border-box; .list_item{ border: 4rpx solid #fff; width: 680rpx; max-height: 290rpx; background: #FFFFFF; border-radius: 20rpx 20rpx 20rpx 20rpx; margin: auto; margin-top: 30rpx; padding: 20rpx 40rpx; box-sizing: border-box; .yingye{ display: flex; align-items: center; font-size: 24rpx; color: #3D3D3D; margin-top: 28rpx; text{ color: #808080; font-size: 28rpx; } image{ width: 32rpx; height: 32rpx; margin-right: 10rpx; } } .top{ display: flex; justify-content: space-between; border-bottom: 1px solid #D8D8D8; padding-bottom: 22rpx; box-sizing: border-box; .lt{ font-weight: 600; font-size: 30rpx; color: #3D3D3D; display: flex; align-items: center; text{ border: 1px solid #48893B; color: #48893B; margin-left: 10rpx; text-align: center; font-weight: 400; font-size: 24rpx; border-radius: 10rpx; padding: 4rpx; } image{ width: 28rpx; height: 28rpx; margin-right: 10rpx; } } .rt{ color: #48893B; font-size: 28rpx; display: flex; align-items: center; text{ margin-right: 10rpx; width: 10rpx; height: 10rpx; border-radius: 50%; background-color: #48893B; } } } } } .serch{ display: flex; justify-content: space-between; align-items: center; padding: 0 40rpx; box-sizing: border-box; padding-top: 40rpx; background-color: #fff; padding-bottom: 30rpx; .lt{ display: flex; align-items: center; width: 100%; 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: 430rpx; margin-left: 30rpx; height: 68rpx; line-height: 68rpx; } } } </style>