zd_wechatApp/pages/noLogin/list.vue

<template>
	<view class="list_s">
		<view class="header_s">
			<u-popup v-model="show" mode="top">
				<scroll-view scroll-y="true" style="height: 100vh; text-align: center" class="popup">
						<view>
							<view class="font-fifty-six SourceHanSansCN choose" @click="openHouse('district')">
								{{districtName ? districtName :'选择行政区'}}
							</view>
						</view>

						<view>
							<view class="font-fifty-six SourceHanSansCN choose" @click="openHouse('xiaoqu')">
								{{house ? house : '选择小区'}}
							</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="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>
							<!-- <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 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>
					
				</scroll-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>
		
		
		<u-popup v-model="pop" mode="top">
			<view style="margin: 20rpx;">
				<u-search v-show="inputShow" 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;font-size: 56rpx;" @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>
</template>

<script>
	import service from '@/api/index.js'
	export default {
		data() {
			return {
				id: 0,
				numberType: 'number',
				name: '',
				address: '',
				keyword: '',
				selectType: '',
				inputShow: false,
				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,
				districtId: 0,
				districtName: '选择行政区',
				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 == 'district') {
					this.districtName = this.housename;
					service.getArea({
						district: this.districtId
					}).then(res => {
						this.chooseHouseList = [];
						res.forEach(item => {
							this.chooseHouseList.push({
								value: item.dictValue,
								label: item.dictLabel,
								selectType: 'xiaoqu'
							})
						})
					})
					this.current = -1;
					this.house = null;
					this.bulid = null;
					this.unit = null;
					this.houseNumber = null;
				
					this.houseid = 0;
					this.buildid = 0;
					this.unitid = 0;
					this.housedata = 0;
				
				
				} else 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;

					this.buildid = 0;
					this.unitid = 0;
					this.housedata = 0;
				} 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;

					this.unitid = 0;
					this.housedata = 0;
				} 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;

					this.housedata = 0;
				} else if (selectType == 'menpai') {
					this.houseNumber = this.housename;
					this.housedata = this.numberid;
					this.current = -1;
				}
				this.pop = false;
			},
			openHouse(selectType) {
				if (selectType === 'district') {
					this.inputShow = false
					//选择行政区
					this.housename = null;
					this.selectType = 'district'
					service.getDistrict().then(res => {
						// console.log(res);
						this.chooseHouseList = [];
						res.forEach((item, index) => {
							this.chooseHouseList.push({
								value: item.dictValue,
								label: item.dictLabel,
								selectType: 'district'
							})
						})
					})
				} else if (selectType === 'xiaoqu') {
					this.inputShow = false
					//选择小区
					this.selectType = 'xiaoqu';
					service.getArea({
						district: this.districtId
					}).then(res => {
						this.chooseHouseList = [];
						res.forEach((item, index) => {
							this.chooseHouseList.push({
								value: item.id,
								label: item.name,
								selectType: 'xiaoqu'
							})
						})
					})
				} else if (selectType === 'louyu') {
					this.inputShow = false
					//选择楼宇
					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.inputShow = false
					//选择单元
					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.inputShow = false
					//选择门牌
					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 == 'district') { //行政区
					this.districtId = item.value;
				} else 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>