jp-youdian-Inspection/pages/station/stationList.vue

<template>
	<view>
		<u-navbar title="地锁列表"></u-navbar>
		<view class="main">
			<view class="top">
				<view class="search">
					<view class="searchBox">
						<u-search shape="square" placeholder="使用站点名称/编号搜索" maxlength="12" v-model="testName"
							:show-action="false" :animation="true"></u-search>
						<u-button type="primary" size="mini" @click="testBtn">搜素</u-button>
					</view>
				</view>
			</view>

			<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="tabsclass" v-if="0">
				<u-tabs :list="tabslist" active-color="#333" inactive-color="#777" :current="current"
					@change="change"></u-tabs>
			</view>
			<view class="list">
				<view class="line" v-for="(item,i) in list" :key="i"
					@click="gotoUrl('/pages/station/stationInfo?id='+item.id)">
					<view class="body">
						<view class="imgclass">
							<image class="img" src="@/assets/img/station/index0.svg" mode=""></image>
						</view>
						<view class="item">
							<view class="name">
								
								 {{item.stationNo}}<span  style="margin: 0 8rpx;color:rgba(119, 119, 119, 1);" >|</span>
								{{item.name}}
							</view>
							<view class="value">
								<span class="span span1">在用{{item.gunWorkNum}}</span> /
								<span class="span span2">空闲{{item.gunFreeNum}}</span>/
								<span class="span span3">故障{{item.gunFaultNum}}</span>/
								<span class="span span4">离线{{item.gunOfflineNum}}</span>/
								<span class="span span5">共{{item.gunNum}}台</span>
							</view>
						</view>
					</view>
					<view class="goto">

						<u-icon name="arrow-right" size="24" color="#BBBBBB"></u-icon>
					</view>
				</view>



			</view>

			


		</view>
		<u-divider :isnone="list.length==0" nonetext="没有找到相关内容" border-color="#CFD2D5">已经到底了</u-divider>


	</view>
</template>

<script>
	import * as API from '@/apis/pagejs/pagesStation.js'


	export default {

		data() {
			return {
				testName: "",
				queryName: "",
				list: [],
				listForm: {
					pageIndex: 1,
					pageSize: 20,
					recordsTotal: 1,
				},
				title: "场站列表",
				tabslist: [{
					name: '待处理',
					code: "geterrList0"

				}, {
					name: '已处理',
					code: "geterrList1"
				}],
				current: 0,
				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: {
			
			change(e) {
				this.current = e


			},
			testBtn() {
				this.queryName=this.testName
				this.listForm.queryContent=this.queryName
				
				this.getList(1)
			},
			
			myLoadmore() {
				this.listForm.pageIndex += 1;
				this.getList()
			},
			getList(bl) {
				if (bl) {
					this.listForm.pageIndex = 1
				}
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				
				this.listForm.queryContent=this.queryName
				
				
				API.stationList(this.listForm).then((res) => {
					var list =this.list

					if (this.listForm.pageIndex == 1) {
						list = res.data.data;
					} else {
						list = [
							...list,
							...res.data.data
						];
					}
					this.list = res.data.data
					uni.hideLoading();

				}).catch(error => {

					uni.hideLoading();
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.search {

		padding: 16rpx 32rpx;
		background: #fff;

		.searchBox {
			display: flex;
			align-items: center;
			background: #F2F2F2;
			padding: 2rpx 16rpx;
			border-radius: 16rpx;
			justify-content: space-between;
		}
	}

	.main {
		background-color: #fff;

		.line {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 32rpx;
			border-bottom: 2rpx 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: 8rpx;
					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;
						font-weight: bold;

						.tag {
							border-radius: 8rpx;
							background-color: rgba(22, 119, 255, 1);
							color: rgba(255, 255, 255, 1);
							font-size: 22rpx;
							padding: 2rpx 8rpx;
							margin-left: 8rpx;
						}

						.type2 {
							background-color: #8161ff;
						}
					}

					.value {
						color: #777777;
						font-size: 24rpx;

						.span {
							margin: 0 8rpx;
						}

						.span1 {
							color: #00B962;
							margin-left: 0px;

						}

						.span2 {
							color: #777777
						}

						.span3 {
							color: #FF3D00
						}

						.span4 {
							color: #FF9600
						}

						.span5 {}

					}
				}

			}
		}

		.img {
			width: 48rpx;
			height: 48rpx;
		}
	}

	.tabs {
		border-bottom: 2rpx solid rgba(232, 232, 232, 1);
		height: 96rpx;
		line-height: 96rpx;
		background-color: #fff;
		border-top: 2rpx solid rgba(241, 241, 241, 1);
		display: flex;
		justify-content: space-around;

		.tabsItem {
			color: rgba(51, 51, 51, 1);
			font-size: 28rpx;

		}

	}

	.floating-button {
		z-index: 999;
		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;
			}
		}
	}

	.tabsclass {
		border-bottom: 2rpx solid rgba(232, 232, 232, 1);
	}
</style>