jp-youdian-Inspection/pages/team/stationMy.vue

<template>
	<view>
		<u-navbar title="关联场站" title-color="#101010"></u-navbar>
		<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="list">
			<view class="item" v-for="(item,index) in list" :key="index">

				<view class="v1">
					{{item.stationNo}}<span class="y">|</span>{{item.name}}
				</view>

				<view class="v2">
					<view class="v21" :class="{
					v3:item.inspectionCycle
				}">
						巡检周期：{{item.inspectionCycle?''+item.inspectionCycle+'天':'未设置'}}

					</view>
					<view class="v22" :class="{
					v3:item.inspectionExamine
				}">
						异常解决时限：{{item.inspectionExamine?''+item.inspectionErrorLimitDuration+'小时':'未设置'}}

					</view>

				</view>

			</view>

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

		<view class="floating-button">


			<view class="button " @click="gotoTask">

				关联场站
			</view>

		</view>

	</view>
</template>

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

	export default {
		data() {
			return {
				list: [],
				listForm: {
					pageIndex: 1,
					pageSize: 20,
					recordsTotal: 1,
					status: 0,
					roleName: "XJ,XJADMIN",

					roleName: "XJ",
				},
				id: "",
				testName: "",
				queryName: "",
			};
		},
		onLoad(op) {
			this.id = op.id
			this.getList()
		},
		onShow() {

		},
		onReachBottom() {
			if (this.list.length < this.listForm.recordsTotal) {
				this.myLoadmore();
			}
		},
		methods: {
			gotoTask() {
				uni.navigateTo({
					url: '/pages/team/stationAdd?id=' + this.id,
					events: {
						// 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
						acceptDataFromOpenerPage: (data) => {
							console.log(data)
							this.getList(1)
						},

					}

				})
			},
			myLoadmore() {
				this.listForm.pageIndex += 1;
				this.getList()
			},
			showqueryName(item) {
				if (this.queryName) {
					var name = item.name
					return name.indexOf(this.queryName) != -1

				} else {
					return true
				}
			},
			testBtn() {

				this.queryName = this.testName
				this.getList(1)
			},

			getList(bl) {
				if (bl) {
					this.listForm.pageIndex = 1
				}
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				this.listForm.id = this.id
				this.listForm.queryContent = this.queryName
				API.teamUserStation(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 = list
					this.listForm.recordsTotal = res.data.recordsTotal
					uni.hideLoading();

				}).catch(error => {

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


		}
	}
</script>

<style lang="scss" scoped>
	.list {
		padding-top: 20rpx;
		padding-bottom: 120rpx;

		.item:not(:last-child) {
			border-bottom: 2rpx solid rgba(232, 232, 232, 1);
		}

		.item {
			padding: 24rpx 32rpx;
			background: #fff;

			.vquery {
				display: flex;
				align-items: center;
			}

			.buildMode {
				font-size: 24rpx;
				border: 2rpx solid #bbbbbb;
				border-radius: 8rpx;
				color: #1677ff;
				padding: 2rpx 8rpx;
				margin: 0 8rpx;

			}

			.buildMode1 {
				color: #1677ff;
				border: 2rpx solid #1677ff;
			}

			.buildMode2 {
				color: #4CAF50;
				border: 2rpx solid #4CAF50;
			}

			.qName {
				color: #FF5100
			}

			.v1 {
				color: rgba(16, 16, 16, 1);
				font-size: 32rpx;
			}

			.y {
				margin: 0 8rpx;
				color: rgba(119, 119, 119, 1);

			}

			.v2 {
				color: red;
				font-size: 24rpx;
				white-space: pre;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
			}

			.v3 {
				color: rgba(119, 119, 119, 1);
				font-size: 24rpx;
			}

		}
	}

	.top {

		border-bottom: 2rpx solid #e8e8e8;

	}

	.search {

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


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


	.floating-button {
		z-index: 999;
		position: fixed;
		bottom: 0;

		width: 100%;
		display: flex;
		height: 120rpx;

		justify-content: space-around;
		background-color: rgba(255, 255, 255, 1);

		.button {
			margin-top: 24rpx;
			border-radius: 50px;
			height: 80rpx;
			width: 80%;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 12rpx;

			background-color: rgba(22, 119, 255, 1);
			color: rgba(255, 255, 255, 1);
			font-size: 32rpx;
		}

	}
</style>