jp-youdian-Inspection/pages/task/selectStation.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="body2">
			<view class="item" v-if="isAll"  @click="returnName( {id:''})">
				<view class="v">
					
			
					<view class="v1" style="font-weight: bold;" >
						查询全部
					</view>
					
				</view>
				<u-icon name="arrow-right" size="24" color="#BBBBBB"></u-icon>
			</view>
			<view class="item" v-for="(item,i) in list" :key="i"
				@click="returnName( item)">
				<view class="v">
					

					<view class="v1" >
						{{item.stationNo}}<span class="y">|</span>{{item.name}}
					</view>
					
					<view class="v2" v-if="item.stationAddress" >
						{{item.stationAddress}}
					</view>
				</view>
				<u-icon name="arrow-right" size="24" color="#BBBBBB"></u-icon>
			</view>

			 
		</view>

		<u-divider color="#B6BDC3" :isnone="list.length==0">已经到底了</u-divider>
	</view>
</template>

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

	export default {
		data() {
			return {
				list: [],
				testName: "",
				listForm: {
					pageIndex: 1,
					pageSize: 15,
					recordsTotal: 1,
				
				},
				queryName: "",
				type: 1,
				isAll: 0,
			};
		},
		onLoad(op) {
			if (op.isAll) {
				this.isAll = op.isAll
			}
			if (op.type) {
				this.type = op.type
			}
			this.getList()
		},
		onReachBottom() {
			if (this.list.length < this.listForm.recordsTotal) {
				this.myLoadmore();
			}
		},
		methods: {
			myLoadmore() {
				this.listForm.pageIndex += 1;
				this.getList()
			},
			getList(bl) {
				if (bl) {
					this.listForm.pageIndex = 1
				}
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				this.listForm.id = this.jphelp.getPersonInfo().id
				this.listForm.queryContent=this.queryName
				
			
				API.teamUserStationUpdateList(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"
					})
				})
			},
			returnName(  obj) {
				const eventChannel = this.getOpenerEventChannel();

				eventChannel.emit('acceptDataFromOpenerPage', {
				 
					item: obj
				})
				uni.navigateBack()
			},
			testBtn() {

				this.queryName=this.testName
				this.listForm.queryContent=this.queryName
				
				this.getList(1)
			},
			getInfo() {

			}

		}
	}
</script>
<style>
	page {
		background-color: rgba(242, 244, 246, 1);
	}
</style>
<style lang="scss" scoped>
	::v-deep .u-content {
		width: 380% !important;
	}

	.search {

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

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

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

		.item {
			padding: 24rpx 32rpx;
			background: #fff;
			display: flex;
			justify-content: space-between;

			.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: rgba(119, 119, 119, 1);
				font-size: 24rpx;
			}

		}
	}
</style>