zd_wechatApp/pages/noLogin/WarningPileList.vue

<template>
	<view>
		<image src="/static/icon/background-from.png" mode="" class="background"></image>
		<view>
			<view class="sousuo">
				<u-search  placeholder="请输入阀井名称" @click="showName=true" v-model="userName"  :show-action="false"@search="getProjectList()" ></u-search>
				<!-- <u-select v-model="showName" :list="workList"  label-name="name" value-name="id" @confirm="worker()" @cancel="cancelWorker()"></u-select>
					<u-search placeholder="请输入巡检柱名称" v-model="name"  :show-action="false" :action-style="{'font-size':'40rpx'}" 
						@search="getProjectList()"></u-search> -->
                <u-search  placeholder="请输入阀井位置" @click="showName=true" v-model="userId"  :show-action="false" @search="getProjectList()"></u-search>
			</view>

			<view v-for="(item,index) in list" :key="index">
				<view class="project-content houseList" @click="gotoindex(item)">
					<view class="font-forty-eight houseList_in">
						<span>{{item.valveWellName}}<span style="font-size: 20rpx;">({{item.position}})</span></span>
						<u-icon name="arrow-right"></u-icon>
					</view>
				</view>
			</view>
		</view>
	</view>
	</view>
</template>

<script>
	import service from '@/api/index.js'
	export default {
		data() {
			return {
				params: {
					year: true,
					month: true,
					day: true,
					hour: true,
					minute: false,
					second: false
				},
				showName:false,
				showTime: false,
				list: [],
				workList: [],
				value: '',
				nameValue: '',
				name:'',
				userName:'',
				civilPower: '',
				form:{},
				userId:''
			}
			
		},
		onLoad() {
			this.getProjectList();
			this.getUserName();
			//this.getWorker();
			uni.setNavigationBarColor({
			    frontColor: '#ffffff',
			    backgroundColor: '#2d95f4',
			})
		},
		methods: {
			getWorker()
			{
				service.getWorker({type:'1',name:''}).then(res => {
					this.workList=res
				})
			},
			worker(e)
			{
				this.userName=e[0].label
				this.userId=e[0].value
				this.getProjectList()
			},
			cancelWorker()
			{
				this.userName=''
				this.userId=''
			},
			time(e)
			{
				 this.form.time=e
			},
			gotoindex(item) {
				console.log(item)
				uni.navigateTo({
					url:`/pages/noLogin/valveWellInspection/valveWellInspection?valveWellName=${item.valveWellName}&position=${item.position}&id=${item.id}&type=2`
				})
			},
			topage(url) {
				uni.navigateTo({
					url
				})
			},
			getProjectList() {
				this.list=[]
				service.getvalveWellPositionlist({valveWellName:this.userName,position:this.userId}).then(res => {
					console.log('getwarningPileList', res)
					if (res.length == 0) {
						this.$UTILS.showPrompt('暂无项目!')
					}
					this.list = res;
				})
			},
			getUserName() {
				service.getUserName().then(res => {
					this.civilPower = res.civilPower;
				})
			},
		},
	}
</script>

<style lang="scss" scoped>
	.background {
		z-index: -1;
		position: fixed;
		width: 100%;
		height: 100%;
		background-size: 100% 100%;
	}

	.project {
		border-radius: 72rpx;
		padding: 25rpx 0;
		text-align: center;
		margin: 170rpx 55rpx 0;
	}

	.project-content {
		width: 90%;
		margin: 40rpx auto;
		padding: 30rpx 20rpx;
		border-radius: 20rpx;
		background: #edf5ff;
		box-shadow: 0rpx 6rpx 8rpx #d3e6ff;
	}
	.houseList_in{
		display: flex;
		justify-content:space-between;
		align-items:center;
		color: #cbcbcb;
		font-size: 38rpx;
	}
	.houseList_in span{
		font-size: 36rpx;
		color: #333;
	}
	.sousuo{
		display: flex;
		justify-content:space-between;
		align-items:center;
	}
	.position {
		position: absolute;
		bottom: 100rpx;
		right: 50rpx;

		.arrow {
			width: 152rpx;
			height: 152rpx;
			border-radius: 50%;
			padding: 25rpx;
			margin-left: 20rpx;
		}
	}

</style>