324 lines
8.0 KiB
Vue
324 lines
8.0 KiB
Vue
<style lang="scss" scoped>
|
||
.header-ctn{
|
||
width: 100%;
|
||
position: fixed;
|
||
left: 0;
|
||
top: 0;
|
||
z-index: 10;
|
||
.header-nav{
|
||
width: 100%;
|
||
height: 150rpx;
|
||
background-color: $uni-bg-color-main;
|
||
&-content{
|
||
display: flex;
|
||
align-items: center;
|
||
padding-top: 70rpx;
|
||
position: relative;
|
||
}
|
||
&-title{
|
||
color: #fff;
|
||
position: absolute;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
font-size: 34rpx;
|
||
}
|
||
}
|
||
.header-search{
|
||
display: flex;
|
||
padding: 20rpx;
|
||
align-items: center;
|
||
background-color: #fff;
|
||
&-input{
|
||
width: 460rpx;
|
||
}
|
||
&-text{
|
||
color: $uni-text-color-main;
|
||
margin-left: 40rpx;
|
||
font-size: 32rpx;
|
||
}
|
||
&-arrow-right{
|
||
color: $uni-text-color-main;
|
||
}
|
||
}
|
||
}
|
||
.equipment-main-content{
|
||
// padding-top: 344rpx;
|
||
}
|
||
.equipment-battery-list{
|
||
background-color: #F6F6F6;
|
||
padding: 20rpx;
|
||
min-height: 990rpx;
|
||
}
|
||
.equipment-battery-box{
|
||
background-color: #fff;
|
||
margin-bottom: 20rpx;
|
||
border-radius: 16rpx;
|
||
padding: 20rpx;
|
||
box-shadow: $box-shadow;
|
||
}
|
||
.equipment-battery-info{
|
||
display: flex;
|
||
align-items: center;
|
||
position: relative;
|
||
border-bottom: 1px solid #ddd;
|
||
padding-bottom: 20rpx;
|
||
&-logo{
|
||
width: 140rpx;
|
||
height: 140rpx;
|
||
border-radius: 100%;
|
||
border: 1px solid #ddd;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
&-list{
|
||
font-size: $uni-font-size-sm;
|
||
padding-left: 20rpx;
|
||
}
|
||
&-row{
|
||
padding-bottom: 10rpx;
|
||
}
|
||
&-renew{
|
||
position: absolute;
|
||
right: 0;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
width: 120rpx;
|
||
height: 50rpx;
|
||
line-height: 50rpx;
|
||
background-color: #11BF96;
|
||
color: #fff;
|
||
border-bottom-left-radius: 30rpx;
|
||
border-top-left-radius: 30rpx;
|
||
text-align: center;
|
||
}
|
||
&-detail{
|
||
position: absolute;
|
||
right: 0;
|
||
top: 0;
|
||
|
||
}
|
||
}
|
||
.equipment-battery-function{
|
||
display: flex;
|
||
justify-content: space-between;
|
||
padding: 0 50rpx;
|
||
padding-top: 20rpx;
|
||
&-box{
|
||
text-align: center;
|
||
}
|
||
}
|
||
.orgPopup-header{
|
||
text-align: center;
|
||
padding: 30rpx 0;
|
||
.orgPopup-logo{
|
||
// text-align: center;
|
||
image{
|
||
width: 110rpx;
|
||
height: 110rpx;
|
||
border-radius: 100%;
|
||
|
||
}
|
||
}
|
||
}
|
||
|
||
</style>
|
||
|
||
<template>
|
||
<view class="equipment-ctn">
|
||
<view class="header-ctn">
|
||
<view class="header-nav">
|
||
<view class="header-nav-content">
|
||
<u-icon class="pl20" name="arrow-left" color="#fff" size="40" @click="goBackFn"></u-icon>
|
||
<tui-icon class="pl20" name="zuzhi" color="#fff" size="40" @click="openOrgPopupFn"></tui-icon>
|
||
<text class="header-nav-title">旗盾新能源</text>
|
||
</view>
|
||
</view>
|
||
<view class="header-search">
|
||
<view class="header-search-scan mr30" @click="scanFN">
|
||
<u-icon name="scan" color="#34A5E0" size="50"></u-icon>
|
||
</view>
|
||
<u-input class="header-search-input" v-model="searchValue" type="type" border="" size="mini" />
|
||
<text class="header-search-text" @click="searchFn">搜索</text>
|
||
<u-icon class="header-search-arrow-right pl20" name="arrow-right" size="32"></u-icon>
|
||
</view>
|
||
<u-tabs-swiper ref="uTabs" :list="list" active-color="#0CC191" :current="tabsCurrent" :is-scroll="false" @change="onTabChangeFn"></u-tabs-swiper>
|
||
</view>
|
||
<view class="equipment-main-content">
|
||
<view class="equipment-battery-list">
|
||
<mescroll-body top="344" ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback">
|
||
<view class="equipment-battery-box mt20" v-for="(item,index) in cabinetListArr" :key="index">
|
||
<view class="equipment-battery-info">
|
||
<view class="equipment-battery-info-logo">
|
||
<tui-icon name="diandongche" size="80" color="#11BF96"></tui-icon>
|
||
</view>
|
||
<view class="equipment-battery-info-list">
|
||
<view class="equipment-battery-info-row">名称：{{item.name}}</view>
|
||
<view class="equipment-battery-info-row">编号：{{item.id}}</view>
|
||
<view class="equipment-battery-info-row">状态：{{item.state}}</view>
|
||
<view class="equipment-battery-info-row">时间：{{item.time}}</view>
|
||
</view>
|
||
<view class="equipment-battery-info-renew">续费</view>
|
||
<view class="equipment-battery-info-detail"> <u-icon name="arrow-right"></u-icon> </view>
|
||
</view>
|
||
<view class="equipment-battery-function">
|
||
<view class="equipment-battery-function-box" @click="goLocationFn">
|
||
<view class=""><u-icon name="map" size="50" color="#000000"></u-icon></view>
|
||
<view class="">定位</view>
|
||
</view>
|
||
<view class="equipment-battery-function-box">
|
||
<view class=""><tui-icon name="baojing" size="50" color="#000000"></tui-icon></view>
|
||
<view class="">报警</view>
|
||
</view>
|
||
<view class="equipment-battery-function-box" @tap="goSettingFn">
|
||
<view class=""><tui-icon name="setting" size="50" color="#000000"></tui-icon></view>
|
||
<view class="">设置</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</mescroll-body>
|
||
</view>
|
||
</view>
|
||
|
||
<u-popup v-model="orgPopupFlag" mode="left" width="550">
|
||
<view class="orgPopup-ctn">
|
||
<view class="orgPopup-header">
|
||
<view class="orgPopup-logo">
|
||
<image src="http://static.drgyen.com/app/hc-app-power/images/car.png" mode=""></image>
|
||
</view>
|
||
<view class="orgPopup-text">
|
||
冠城瑞闽
|
||
</view>
|
||
</view>
|
||
|
||
</view>
|
||
</u-popup>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import mescrollMixins from "../../components/mescroll-uni/mescroll-mixins.js"
|
||
export default {
|
||
data(){
|
||
return {
|
||
searchValue:"",
|
||
orgPopupFlag:false,
|
||
list: [{
|
||
name: '全部(5)'
|
||
}, {
|
||
name: '在线(5)'
|
||
}, {
|
||
name: '离线(0)'
|
||
}, {
|
||
name: '到期(0)'
|
||
}],
|
||
tabsCurrent:0,
|
||
upOption:{
|
||
// page:{
|
||
// num : 0 ,
|
||
// size : 10 ,
|
||
// time : null
|
||
// },
|
||
// noMoreSize: 5,
|
||
empty:{
|
||
use : true ,
|
||
tip: '~ 暂无相关数据 ~',
|
||
btnText: '刷新试试'
|
||
},
|
||
textNoMore: '---- 已经到底啦 ----',
|
||
bgColor:"#f5f5f5"
|
||
},
|
||
cabinetListArr:[],
|
||
}
|
||
},
|
||
mixins:[mescrollMixins],
|
||
onLoad() {
|
||
|
||
},
|
||
methods:{
|
||
openOrgPopupFn(){
|
||
this.orgPopupFlag = true;
|
||
},
|
||
// 跳转定位
|
||
goLocationFn(){
|
||
uni.navigateTo({
|
||
url:"../battery/battery-info"
|
||
})
|
||
},
|
||
// 跳转设置
|
||
goSettingFn(){
|
||
uni.navigateTo({
|
||
url:"./equipmentSetting"
|
||
})
|
||
},
|
||
// 左上角返回
|
||
goBackFn(){
|
||
uni.navigateBack();
|
||
},
|
||
// 刷新试试
|
||
emptyClick(){
|
||
console.log("刷新试试 ")
|
||
},
|
||
// 搜索
|
||
searchFn(){
|
||
console.log("搜索");
|
||
},
|
||
// 页签变化
|
||
onTabChangeFn(index){
|
||
this.tabsCurrent = index;
|
||
},
|
||
// 扫码
|
||
scanFN(){
|
||
uni.scanCode({
|
||
success: function (res) {
|
||
console.log('条码内容：' + res.result);
|
||
}
|
||
});
|
||
},
|
||
/*上拉加载的回调*/
|
||
upCallback(page) {
|
||
let pageNum = page.num; // 页码, 默认从1开始
|
||
let pageSize = page.size; // 页长, 默认每页10条
|
||
let obj = {
|
||
pageSize:pageSize,
|
||
pageNum:pageNum,
|
||
search:this.searchValue
|
||
}
|
||
setTimeout(()=>{
|
||
if (true) {
|
||
let curPageData = [{
|
||
name:"QD6040-202007-0270235959110",
|
||
id:"02723590110",
|
||
state:"在线",
|
||
time:"2020年9月27日11:49:30"
|
||
},{
|
||
name:"QD6040-202007-0270235959110",
|
||
id:"02723590110",
|
||
state:"在线",
|
||
time:"2020年9月27日11:49:30"
|
||
},{
|
||
name:"QD6040-202007-0270235959110",
|
||
id:"02723590110",
|
||
state:"在线",
|
||
time:"2020年9月27日11:49:30"
|
||
}];
|
||
// 接口返回的当前页数据长度 (如列表有26个数据,当前页返回8个,则curPageLen=8)
|
||
let curPageLen = curPageData.length;
|
||
//设置列表数据
|
||
if(pageNum == 1) this.cabinetListArr = []; //如果是第一页需手动置空列表
|
||
this.cabinetListArr = this.cabinetListArr.concat(curPageData); //追加新数据
|
||
this.mescroll.endBySize(curPageLen, 3); // 推荐
|
||
} else{
|
||
this.cabinetListArr = [];
|
||
this.mescroll.endErr();
|
||
this.mescroll.showEmpty();
|
||
// this.mescroll.endUpScroll(true);
|
||
// this.isShowNoMore = true;
|
||
}
|
||
},1000);
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|