zdsz_WeChatApplet/pages/noLogin/list.vue

<template>
	<view class="list_s">
		<view class="header_s">
			<u-popup v-model="show" mode="top">
				<view class="popup">
					<view style="margin-top: 120rpx;">
						<view>
							<view class="font-fifty-six SourceHanSansCN choose" @click="openHouse('xiaoqu')">
								{{house ? house :'选择小区'}}
								<u-popup v-model="pop" mode="top" height="1000rpx">
									<view style="margin: 20rpx;">
										<u-search placeholder="请输入搜索内容" v-model="keyword" :action-style="{'font-size':'40rpx'}" @custom="searchinfo(selectType)"></u-search>
									</view>
									<view>
										<scroll-view scroll-y="true" style="height: 600rpx; text-align: center;">
											<view v-for="(item,index) in chooseHouseList" :key="item.value" >
												<view :class="current === index ? 'active' : '' " style="color: #000000;" @click="active(item,index)">
													{{item.label}}
												</view>
											</view>
										</scroll-view>
										<view class="">
											<button type="default" class="font-fifty-six" @click="search(selectType)">确定</button>
										</view>
										<view class="">
											<button type="default" @click="pop = false;"  class="font-fifty-six">取消</button>
										</view>
									</view>
								</u-popup>
							</view>
						</view>
						
						<view>
							<view class="font-fifty-six SourceHanSansCN choose" @click="openHouse('louyu')">
								{{bulid ? bulid : '选择楼宇'}}
							</view>
					
						</view>
						<view>
							<view class="font-fifty-six SourceHanSansCN choose" @click="openHouse('danyuan')">
								{{unit ? unit : '选择单元'}}
							</view>
					
						</view>
						<view>
							<view class="font-fifty-six SourceHanSansCN choose" @click="openHouse('menpai')">
								{{houseNumber ? houseNumber  : '选择门牌'}}
							</view>
						</view>
						<view>
						<!-- <view class="font-fifty-six SourceHanSansCN choose" @click="openType('shows')">
							上门类型 <text class="font-fifty-six SourceHanSansCN" style="color: #232146;">
								{{type ? '----' +  type : ''}}</text>
							<u-select v-model="shows" :list="mounicipalList" @confirm="confirm"></u-select>
						</view> -->
						<view>
							<view class="font-fifty-six SourceHanSansCN choose" @click="showStart = true">
								{{form.starTime ? form.starTime  : '开始时间'}}
								<u-picker v-model="showStart" mode="time" @confirm="confirmStart"></u-picker>
							</view>
						</view>
						<view>
							<view class="font-fifty-six SourceHanSansCN choose" @click="showEnd = true">
								{{form.endTime ? form.endTime  : '结束时间'}}
								<u-picker v-model="showEnd" mode="time" @confirm="confirmEnd"></u-picker>
							</view>
						</view>
						<view style="display: flex;">
							<view style="height: 100rpx; font-size: 64rpx; width: 180rpx; font-weight: 600;">工号</view>
							<u-input
								style="font-size: 64rpx!important; font-weight: 600; width: 400rpx!important;"
								placeholder="请输入工号"
								placeholder-style="font-size: 64rpx;"
								v-model="form.jobNum"
								maxlength = '4'
								:type='numberType'
								:border="border" />
						</view>
						<view class="font-fifty-six SourceHanSansCN total background-color1" @click="submit()">
							提交数据
						</view>
					</view>
					</view>
				</view>
			</u-popup>
			<view style="display: flex;">
				<view class="btn_s" @click="show = true">查询</view>
				<view class="btn_s" @click="kong">重置</view>
			</view>
		</view>
		<view class="footer_s" v-if="list.length > 0">
			<view class="footer-item" v-for="(item, index) in list">
				<view class="item-title">地址: {{item.house}}</view>
				<view class="item-title">职工: {{item.userName}}</view>
				<view class="item-title">时间: {{item.time}}</view>
				<view class="item-title">备注: 
					<text class="" v-if="item.remark != null">
						{{item.remark}}
					</text>
					<text class="" v-else>
						无
					</text>
				</view>
				<view class="item-img">
					<view class="img-view"  v-for="img in item.picUrl">
						<image :src="img" mode="" @tap="preAvatar(img)" v-if="img.substring(img.length - 3) == 'png' || img.substring(img.length - 3) == 'jpg' "></image>
						<video :src="img" controls v-else ></video>
					</view>
					<!-- <image v-for="img in item.picUrl" :src="img" @tap="preAvatar(img)"></image> -->
					
				</view>
				<view class="main-list-icon"></view>
			</view>
		</view>
		<view class="footer_s" style="padding-top: 100rpx;" v-else>
			<u-empty text="暂无数据" mode="list"></u-empty>
		</view>
	</view>
</template>

<script>
	import service from '@/api/index.js'
	export default {
		data() {
			return {
				id: 0,
				numberType: 'number',
				name: '',
				address: '',
				keyword:'',
				selectType:'',
				pop: false,
				show: false,
				border: false,
				typeValue: '',
				current:-1,
				labelPosition: 'left',
				errorType: ['message'],
				list: [],
				chooseHouseList: [],
				typeList: [],
				showStart: false,
				showEnd: false,
				form: {
					starTime: '',
					endTime: '',
					jobNum: '',
				},
				params: {
					pageNum: 1,
					pageSize: 10,
				},
				listTypeShow: false,
				tubeTypeShow: false,
				tubeLongShow: false,
				house: '选择小区',
				bulid: '选择楼宇',
				unit: '选择单元',
				houseNumber: '选择门牌',
				shows: false,
				// mounicipalList: [],
				tubeTypeLongList: [],
				tubeTypeList: [],
				houseid:'',
				type: '',
				buildid:'',
				unitid:'',
				numberid:'',
			}
		},
		onLoad(e) {
			this.id = e.id;
			this.name = e.name;
			this.address = e.address
			this.getListFn();
			this.getArea();
			// this.select();
			this.getProjectType();
			this.getTubeType();
			this.getTubeLong();
		},
		onReachBottom() {
			this.getNextListFn()
		},
		onPullDownRefresh() {
			this.getListFn();
			setTimeout(function () {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		methods:{
			kong(){
				this.houseid = '';
				this.buildid = '';
				this.unitid = '';
				this.numberid = '';
				this.form.starTime = '';
				this.form.endTime = '';
				this.form.jobNum = '';
				this.getListFn();
			},
			confirmStart(e){
				console.log(e)
				this.form.starTime = `${e.year}-${e.month}-${e.day}`
			},
			confirmEnd(e){
				console.log(e)
				this.form.endTime = `${e.year}-${e.month}-${e.day}`
			},
			openUnit() {
				this.unitShow = !this.unitShow
			},
			//选择门牌
			open() {
				this.houseNumberShow = !this.houseNumberShow
			},
			//选择上门类型
			confirm(e) {
				this.type = e[0].label
				this.typeValue = e[0].value
			
				this.imgArr = [];
				this.tubeType = null;
				this.tubeLong = null;
				this.valueType = null;
			},
			//选择类型
			// select() {
			// 	service.getDic({
			// 		dicType: 'service_type'
			// 	}).then(res => {
			// 		res.forEach(item => {
			// 			this.mounicipalList.push({
			// 				value: item.value,
			// 				label: item.name
			// 			})
			// 		})
			// 	})
			// },
			openType(type) {
				if (type === 'shows') {
					this.shows = !this.shows
				} else if (type === 'tubeType') {
					this.tubeTypeShow = !this.tubeTypeShow
				} else {
					this.tubeLongShow = !this.tubeLongShow
				}
			
			},
			tubeTypeConfirm(e) {
				this.tubeType = e[0].label
			},
			listType(e) {
				this.valueType = e[0].label
			},
			tubeLongConfirm(e) {
				this.tubeLong = e[0].label
			},
			getTubeType() {
				service.getPipeType().then(res => {
					res.forEach(item => {
						this.tubeTypeList.push({
							value: item.id,
							label: item.pipeType
						})
					})
				})
			},
			getTubeLong() {
				service.getPipeLength().then(res => {
					res.forEach(item => {
						this.tubeTypeLongList.push({
							value: item.id,
							label: item.pipeLength
						})
					})
				})
			},
			getProjectType() {
				service.getProject().then(res => {
					console.log('getProjectType', res)
					this.typeList = [];
					res.forEach(item => {
						this.typeList.push({
							value: item.id,
							label: item.valveType
						})
					})
			
				})
			},
			projectType() {
				this.listTypeShow = !this.listTypeShow
			},
			search(selectType){
				console.log('this.housename', this.housename)
				console.log('this.selectType', this.selectType)
				if(selectType == 'xiaoqu'){
					this.house = this.housename;	
					service.getBuilding({areaId: this.houseid}).then(res => {
						this.chooseHouseList = [];
						res.forEach(item => {
							this.chooseHouseList.push({
								value: item.id,
								label: item.name,
								selectType:'louyu'
							})
						})
					})
					this.current = -1;
					this.bulid = null;
					this.unit = null;
					this.houseNumber = null;
				}else if(selectType == 'louyu'){
					this.bulid = this.housename;
					service.getUnit({buildingId: this.buildid}).then(res => {
						this.chooseHouseList = [];
						res.forEach(item => {
							this.chooseHouseList.push({
								value: item.id,
								label: item.name,
								selectType:'danyuan'
							})
						})
					})
					this.unit = null;
					this.houseNumber = null;
					this.current = -1;
				}else if(selectType == 'danyuan'){
					this.unit = this.housename;
					service.getAllHouse({unitId: this.unitid}).then(res => {
						this.chooseHouseList = [];
						res.forEach(item => {
							this.chooseHouseList.push({
								value: item.id,
								label: item.name,
								selectType:'menpai'
							})
						})
					})
					this.houseNumber = null;
					this.current = -1;
					
				}else if(selectType == 'menpai'){
					this.houseNumber = this.housename;
					this.housedata = this.numberid;
					this.current = -1;
				}
				this.pop = false;
			},
			openHouse(selectType) {
				if(selectType === 'xiaoqu'){
					//选择小区
					this.selectType = 'xiaoqu';
					this.getArea();
				}else if(selectType === 'louyu'){
					//选择楼宇
					this.selectType = 'louyu'
					service.getBuilding({areaId: this.houseid}).then(res => {
						this.chooseHouseList = [];
						res.forEach(item => {
							this.chooseHouseList.push({
								value: item.id,
								label: item.name,
								selectType:'louyu'
							})
						})
					})
				}else if(selectType === 'danyuan'){
					//选择单元
					this.selectType = 'danyuan'
					service.getUnit({buildingId: this.buildid}).then(res => {
						this.chooseHouseList = [];
						res.forEach(item => {
							this.chooseHouseList.push({
								value: item.id,
								label: item.name,
								selectType:'danyuan'
							})
						})
					})
				}else if(selectType === 'menpai'){
					//选择门牌
					this.selectType = 'menpai'
					service.getAllHouse({unitId: this.unitid}).then(res => {
						this.chooseHouseList = [];
						res.forEach(item => {
							this.chooseHouseList.push({
								value: item.id,
								label: item.name,
								selectType:'menpai'
							})
						})
					})
				}
				this.pop = !this.pop;
			},
			searchinfo(selectType){
				if(selectType == 'xiaoqu'){
					console.log('ssss',this.selectType)
					service.getArea({name:this.keyword}).then(res => {
						this.chooseHouseList = [];
						res.forEach((item, index) => {
							this.chooseHouseList.push({
								value: item.id,
								label: item.name,
								selectType:'xiaoqu'
							})
						})
					})	
					this.keyword = '';
				}else if(selectType == 'louyu'){
					console.log('ssss',this.selectType)
					service.getBuilding({areaId: this.houseid,name:this.keyword}).then(res => {
						this.chooseHouseList = [];
						res.forEach((item, index) => {
							this.chooseHouseList.push({
								value: item.id,
								label: item.name,
								selectType:'louyu'
							})
						})
					})
					this.keyword = '';
				}else if(selectType == 'danyuan'){
					console.log('ssss',this.selectType)
					service.getUnit({buildingId: this.buildid,name:this.keyword}).then(res => {
						this.chooseHouseList = [];
						res.forEach((item, index) => {
							this.chooseHouseList.push({
								value: item.id,
								label: item.name,
								selectType:'danyuan'
							})
						})
					})
					this.keyword = '';
				}else if(selectType == 'menpai'){
					console.log('ssss',this.selectType)
					service.getAllHouse({unitId: this.unitid,name:this.keyword}).then(res => {
						this.chooseHouseList = [];
						res.forEach((item, index) => {
							this.chooseHouseList.push({
								value: item.id,
								label: item.name,
								selectType:'menpai'
							})
						})
					})
					this.keyword = '';
				}
				
			},
			active(item,index){
				this.current = index;
				this.housename = item.label;
				if(item.selectType == 'xiaoqu'){
					this.houseid = item.value;
				}else if(item.selectType == 'louyu'){
					this.buildid = item.value;
				}else if(item.selectType == 'danyuan'){
					this.unitid = item.value;
				}else if(item.selectType == 'menpai'){
					this.numberid = item.value
				}
				this.selectType = item.selectType;
			},
			//获取小区
			getArea() {
				service.getArea().then(res => {
					this.chooseHouseList = [];
					res.forEach((item, index) => {
						this.chooseHouseList.push({
							value: item.id,
							label: item.name,
							selectType:'xiaoqu'
						})
					})
				})
			},
			getListFn(){
				let that = this;
				let params ={
					areaId: this.houseid,
					buildingId: this.buildid,
					unitId: this.unitid,
					houseId: this.numberid,
					starTime: this.form.starTime,
					endTime: this.form.endTime,
					jobNum: this.form.jobNum,
					pageSize: 10,
					pageNum: 1,
					serviceType: this.id
				}
				console.log('params', params)
				service.getOtherList(params).then(res =>{
					console.log("999", res)
					that.list = res.records;
					that.total = res.total || 0;
					that.params.pageNum = res.current + 1;
				})
			},
			getNextListFn(){
				let that = this;
				let params={
					areaId: this.houseid,
					buildingId: this.buildid,
					unitId: this.unitid,
					houseId: this.numberid,
					starTime: this.form.starTime,
					endTime: this.form.endTime,
					jobNum: this.form.jobNum,
					pageSize: this.params.pageSize,
					pageNum: this.params.pageNum,
					serviceType: this.id
				}
				if (this.list.length < this.total) {
					service.getOtherList(params).then(response => {
						that.params.pageNum = response.current + 1
						response.records.forEach(item =>{
							that.list.push(item)
						})
					})
				}
			},
			// 预览图片
			preAvatar(url) {
				console.log('url', url)
				wx.previewImage({
					current: url, // 当前显示图片的 http 链接
					urls: [url] ,// 需要预览的图片 http 链接列表
				})
			},
			submit() {
				console.log('submit',this.houseid,this.buildid,this.unitid,this.numberid);
				this.show = false;
				this.getListFn()
			}
		}
	}
</script>

<style lang="scss" scoped>
	/deep/ .u-input__input{
		font-size: 64rpx!important;
		color: #303133;
		width: calc(100% - 200rpx)!important;
	}
	/deep/ .u-column-item{
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		font-size: 64rpx!important;
		color: #303133;
		padding: 8rpx;
	}
	/deep/ .u-btn-picker.data-v-70102400 {
	    padding: 16rpx;
	    box-sizing: border-box;
	    text-align: center;
	    text-decoration: none;
	    font-size: 64rpx!important;
	}
	.list_s{
		min-height: 100vh;
		background-color: #F9F9F9;
	}
	.header_s{
		padding: 30rpx 30rpx 0rpx 30rpx;
		.popup{
			padding: 0rpx 30rpx;
		}
		.btn_s{
			margin: 0 15rpx;
			width: calc(50% - 15px);
			height: 100rpx;
			line-height: 100rpx;
			text-align: center;
			background-color: #3857F3;
			color: #fff;
			font-size: 64rpx;
			border-radius: 16rpx;
		}
	}
	.footer_s{
		padding: 30rpx;
		.footer-item{
			background: #FFFFFF;
			height: auto;
			border-radius: 8rpx;
			margin-bottom: 30rpx;
			padding: 20rpx 0rpx 20rpx 66rpx;
			position: relative;
			.item-title{
				font-size: 48rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #333333;
				padding-bottom: 20rpx;
			}
			.main-list-icon{
				position: absolute;
				top: 43rpx;
				left: 30rpx;
				width: 16rpx;
				height: 16rpx;
				background: #3857F3;
				border-radius: 2rpx;
			}
			.item-img{
				display: flex;
				justify-content: flex-start;
				flex-wrap: wrap;
				.img-view{
					width: calc(50% - 20rpx);
					height: 200rpx;
					padding-bottom: 20rpx;
					padding-right: 20rpx;
					image{
						width: 100%;
						height: 100%;
					}
					video{
						width: 100%;
						height: 100%;
					}
				}
			}
		}
	}
	.choose {
		text-align: center;
		padding: 20rpx;
		margin: 30rpx;
		color: #FFFFFF;
		background: #43CEB1;
		border-radius: 64rpx;
	}
	.active{
	   background-color: #1890FF;
	}
	.select-type {
		border: 2rpx solid #3857F3;
		text-align: center;
		padding: 20rpx;
		margin: 30rpx;
		color: #3857F3;
		border-radius: 64rpx;
	}
	.total {
		width: 100%;
		padding: 40rpx 30rpx;
		text-align: center;
		color: #FFFFFF;
	}
</style>