<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 dianpulist" :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.type == 2">棋牌</text> <text v-if="item.type == 1">茶室</text> <text v-if="item.type == 3">台球</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="shouru"> <view class="one"> <view class="shang"> 今日订单 </view> <view class="xia"> <text>29</text> 笔 </view> </view> <view class="one"> <view class="shang"> 今日收入 </view> <view class="xia"> <text>1078</text> 元 </view> </view> <view class="one"> <view class="shang"> 上月收入 </view> <view class="xia"> <text>5891</text> 元 </view> </view> <view class="one"> <view class="shang"> 设备状态 </view> <view class="xia"> <text style="color: #48893B;">0/</text><text>0</text> </view> </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: 100rpx;font-size: 34rpx;color: #ccc;"> 没有更多门店啦... </view> </view> <view class="anniu"> <view class="queren" @click="btnadd"> 新建门店 </view> </view> </view> </template> <script> export default { data() { return { bgc: { backgroundColor: "#fff", }, dianpulist:[] } }, onLoad() { }, onShow() { this.getlist() }, methods: { // 请求门店列表 getlist(){ this.$u.get(`/app/store/list`).then(res => { if (res.code == 200) { this.dianpulist = res.rows } }) }, // 点击新建门店 btnadd(){ uni.navigateTo({ url:'/page_shanghu/mendianadd' }) }, btnitem(index,storeId){ uni.navigateTo({ url:'/page_shanghu/dianpuroomadd?storeId=' + storeId }) } } } </script> <style lang="scss"> page { background: #F6F6F6; } /deep/ .u-iconfont, /deep/ .u-title{ padding-bottom: 20rpx; } .list{ width: 100%; height: 80vh; overflow: scroll; padding-bottom: 30rpx; box-sizing: border-box; .list_item{ border: 4rpx solid #fff; width: 680rpx; max-height: 440rpx; background: #FFFFFF; border-radius: 20rpx 20rpx 20rpx 20rpx; margin: auto; margin-top: 30rpx; padding: 20rpx 40rpx; box-sizing: border-box; .shouru{ display: flex; justify-content: space-between; margin-top: 28rpx; text-align: center; .one{ .shang{ font-size: 24rpx; color: #808080; } .xia{ margin-top: 10rpx; font-size: 24rpx; color: #808080; text{ font-weight: 600; font-size: 32rpx; color: #3D3D3D; } } } } .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; } } } } } .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: 680rpx; height: 104rpx; background: #48893B; text-align: center; line-height: 104rpx; font-weight: 600; font-size: 36rpx; color: #FFFFFF; border-radius: 20rpx; } } .serch{ display: flex; justify-content: space-between; align-items: center; padding: 0 36rpx; box-sizing: border-box; padding-top: 40rpx; padding-bottom: 22rpx; background-color: #fff; .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: 460rpx; margin-left: 30rpx; height: 68rpx; line-height: 68rpx; } } } </style>