|
@@ -0,0 +1,304 @@
|
|
|
+<template>
|
|
|
+ <view>
|
|
|
+ <u-navbar title="地锁列表" ></u-navbar>
|
|
|
+ <view class="main">
|
|
|
+ <view class="tabs" v-if="0">
|
|
|
+ <u-picker v-model="tabsFrom.show1"
|
|
|
+ :default-selector="[tabsFrom.show1Index]"
|
|
|
+ mode="selector" :range="tabsFrom.selector1" range-key="label" @confirm="selector1confirm" ></u-picker>
|
|
|
+ <u-picker-select title="日期选择" v-model="tabsFrom.show2"
|
|
|
+ :defaultTime="tabsFrom.show2Index" :endYear="endYear"
|
|
|
+ mode="time" :params="params" @confirm="selector2confirm" @reset="selector2reset" ></u-picker-select>
|
|
|
+
|
|
|
+ <view class="tabsItem" @click="tabsFrom.show1=!tabsFrom.show1">{{tabsFrom.show1Text}} <u-icon name="arrow-up"
|
|
|
+ v-if="tabsFrom.show1"></u-icon><u-icon v-else name="arrow-down"></u-icon></view>
|
|
|
+ <view class="tabsItem" @click="tabsFrom.show2=!tabsFrom.show2">{{tabsFrom.show2Text}} <u-icon name="arrow-up"
|
|
|
+ v-if="tabsFrom.show2"></u-icon><u-icon v-else name="arrow-down"></u-icon></view>
|
|
|
+
|
|
|
+ <view class="tabsItem" @click="tabsFrom.show3=!tabsFrom.show3">{{tabsFrom.show3Text}} <u-icon name="arrow-up"
|
|
|
+ v-if="tabsFrom.show3"></u-icon><u-icon v-else name="arrow-down"></u-icon></view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="list">
|
|
|
+ <view class="line" v-for="(item,i) in list" :key="i"
|
|
|
+ @click="gotoUrl('/pages/lockTab/dataLock?id='+item.id)" >
|
|
|
+ <view class="body">
|
|
|
+ <view class="imgclass">
|
|
|
+ <image class="img" src="@/assets/img/deviceTab/index2-1.svg" mode=""></image>
|
|
|
+ </view>
|
|
|
+ <view class="item">
|
|
|
+ <view class="name">
|
|
|
+ <view class="text">{{item.name}}</view>
|
|
|
+ <view class="tag" :class="'type'+item.type">{{item.typeN}}</view>
|
|
|
+ </view>
|
|
|
+ <view class="value">
|
|
|
+ {{item.parkingName}}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="goto">
|
|
|
+ <view class="dian" :class="'status'+item.status"></view>
|
|
|
+ <view class="text" :class="'statusText'+item.status" >{{item.status==1?'在线':'离线'}}</view>
|
|
|
+ <u-icon name="arrow-right" size="24" color="#BBBBBB"></u-icon>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="floating-button"
|
|
|
+ @click="gotoBind" v-if="0" >
|
|
|
+ <view class="button">
|
|
|
+ <img class="img" src="@/assets/img/deviceTab/index2-2.svg" alt="">
|
|
|
+
|
|
|
+ 绑定新地锁
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <u-divider :isnone="list.length==0" nonetext="没有找到相关内容" border-color="#CFD2D5">已经到底了</u-divider>
|
|
|
+
|
|
|
+
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import * as API from '@/apis/pagejs/deviceTab.js'
|
|
|
+
|
|
|
+
|
|
|
+ export default {
|
|
|
+
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ list:[],
|
|
|
+ listForm:{
|
|
|
+ pageIndex: 1,
|
|
|
+ pageSize: 20,
|
|
|
+ recordsTotal: 1,
|
|
|
+ },
|
|
|
+ title:"场站列表",
|
|
|
+ tabsFrom: {
|
|
|
+ show1: false,
|
|
|
+ show1Index:0,
|
|
|
+ show2Index:'',
|
|
|
+ show2: false,
|
|
|
+ show1Text: "全部场站",
|
|
|
+ show2Text: "全部类型",
|
|
|
+ show3Text: "全部状态",
|
|
|
+ selector1:[
|
|
|
+ {
|
|
|
+ label: '全部类型',
|
|
|
+ value: '',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '线上充值',
|
|
|
+ value: '1',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '线下充值',
|
|
|
+ value: '2',
|
|
|
+ },
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ };
|
|
|
+ },
|
|
|
+ onLoad(op) {
|
|
|
+ if(op.companyId){
|
|
|
+ this.listForm.companyId=op.companyId
|
|
|
+ }
|
|
|
+ if(op.parkingId){
|
|
|
+ this.listForm.parkingId=op.parkingId
|
|
|
+ }
|
|
|
+ this.getList()
|
|
|
+ },
|
|
|
+ onReachBottom() {
|
|
|
+ if (this.list.length < this.listForm.recordsTotal) {
|
|
|
+ this.myLoadmore();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ gotoBind(){
|
|
|
+ uni.navigateTo({
|
|
|
+ url: '/pages/deviceTab/bindLock?parkingId='+this.listForm.parkingId,
|
|
|
+ events: {
|
|
|
+ // 为指定事件添加一个监听器,获取被打开页面传送到当前页面的数据
|
|
|
+ acceptDataFromOpenerPage: (item)=>{
|
|
|
+
|
|
|
+ this.getList(1)
|
|
|
+ },
|
|
|
+
|
|
|
+ }
|
|
|
+ // ,
|
|
|
+ // success: function(res) {
|
|
|
+ // // 通过eventChannel向被打开页面传送数据
|
|
|
+ //
|
|
|
+ // }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ myLoadmore(){
|
|
|
+ this.listForm.pageIndex += 1;
|
|
|
+ this.getList()
|
|
|
+ },
|
|
|
+ getList(bl) {
|
|
|
+ if(bl){
|
|
|
+ this.listForm.pageIndex = 1
|
|
|
+ }
|
|
|
+ uni.showLoading({
|
|
|
+ title: "加载中",
|
|
|
+ mask: true,
|
|
|
+ })
|
|
|
+
|
|
|
+ API.findFloorLock(this.listForm).then((res) => {
|
|
|
+ var list=[]
|
|
|
+
|
|
|
+ if (this.listForm.pageIndex == 1) {
|
|
|
+ list = res.data.data;
|
|
|
+ } else {
|
|
|
+ list = [
|
|
|
+ ...list,
|
|
|
+ ...res.data.floorlockInfoList
|
|
|
+ ];
|
|
|
+ }
|
|
|
+ this.list = res.data.floorlockInfoList
|
|
|
+ uni.hideLoading();
|
|
|
+
|
|
|
+ }).catch(error => {
|
|
|
+
|
|
|
+ uni.hideLoading();
|
|
|
+ uni.showToast({
|
|
|
+ title: error,
|
|
|
+ icon: "none"
|
|
|
+ })
|
|
|
+ })
|
|
|
+ },
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang="scss">
|
|
|
+ .main{
|
|
|
+ background-color: #fff;
|
|
|
+ .line{
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ padding: 32rpx;
|
|
|
+ border-bottom: 1px solid rgba(245,245,245,1);
|
|
|
+ .goto{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ .dian{
|
|
|
+ width: 16rpx;
|
|
|
+ height: 16rpx;
|
|
|
+ border-radius: 50px;
|
|
|
+ background-color: rgba(184,184,184,1);
|
|
|
+ margin-right: 16rpx;
|
|
|
+ }
|
|
|
+ .status1{
|
|
|
+ background-color: #4CAF50;
|
|
|
+ color:#4CAF50;
|
|
|
+ }
|
|
|
+ .statusText1{
|
|
|
+
|
|
|
+ color:#4CAF50;
|
|
|
+ }
|
|
|
+ .text{
|
|
|
+ margin-right: 16rpx;
|
|
|
+ font-size: 24rpx;
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .body{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .imgclass{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ width: 72rpx;
|
|
|
+ height: 72rpx;
|
|
|
+ border-radius: 4px;
|
|
|
+ background-color: rgba(219,234,255,1);
|
|
|
+ }
|
|
|
+ .item{
|
|
|
+ margin-left: 16rpx;
|
|
|
+
|
|
|
+ .name{
|
|
|
+ color: rgba(51,51,51,1);
|
|
|
+ font-size: 28rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ .tag{
|
|
|
+ border-radius: 4px;
|
|
|
+ background-color: rgba(22,119,255,1);
|
|
|
+ color: rgba(255,255,255,1);
|
|
|
+ font-size: 22rpx;
|
|
|
+ padding:1px 8rpx;
|
|
|
+ margin-left: 8rpx;
|
|
|
+ }
|
|
|
+ .type2{
|
|
|
+ background-color: #8161ff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .value{
|
|
|
+ color: rgba(119,119,119,1);
|
|
|
+ font-size: 24rpx;
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .img{
|
|
|
+ width: 48rpx;
|
|
|
+ height: 48rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .tabs{
|
|
|
+ border-bottom: 1px solid rgba(232,232,232,1);
|
|
|
+ height: 96rpx;
|
|
|
+ line-height: 96rpx;
|
|
|
+ background-color: #fff;
|
|
|
+ border-top: 1px solid rgba(241,241,241,1);
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-around;
|
|
|
+ .tabsItem{
|
|
|
+ color: rgba(51,51,51,1);
|
|
|
+ font-size: 14px;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .floating-button {
|
|
|
+ position: fixed;
|
|
|
+ bottom: 120rpx;
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+
|
|
|
+ justify-content: center;
|
|
|
+
|
|
|
+ .button {
|
|
|
+ border-radius: 50px;
|
|
|
+ background-color: rgba(49, 51, 52, 1);
|
|
|
+ color: rgba(255, 255, 255, 1);
|
|
|
+ font-size: 28rpx;
|
|
|
+ width: 240rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ padding: 12rpx;
|
|
|
+
|
|
|
+ .img {
|
|
|
+ width: 40rpx;
|
|
|
+ height: 40rpx;
|
|
|
+ margin-right: 8rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|