zdsz_WeChatApplet/pages/historyConstruction/historyConstruction.vue

<template>
	<view>
		<view class="title-text" style="margin-top: 80rpx;">
			历史施工
		</view>
		
		<view :class="(kgName == '展开搜索') ? 'hei_vie2':'hei_vie'">
			<view class="justify-content select">
				<view class="thirsty gray border" v-for="item in type" :key="item.value"
					:class="{active: show === item.value}" @click="active(item),getListAll()">
					{{item.name}}
				</view>
			</view>
			<!-- <u-search placeholder="请输入搜索内容" v-model="nameValue" :action-style="{'font-size':'40rpx'}" @custom="getListAll()"></u-search> -->
			<view class="inp_vie">
				<input type="text" value="" placeholder="小区名称搜索" class="search-text" v-model="areaName"/>
				<input type="text" value="" placeholder="楼栋名称搜索" class="search-text" v-model="buildingName"/>
				<input type="text" value="" placeholder="单元名称搜索" class="search-text" v-model="unitName"/>
				<input type="text" value="" placeholder="房间名称搜索" class="search-text" v-model="houseName"/>
				<button @click="getListAll()" class="btn_vie">搜索</button>
			</view>
		</view>
		<view>
			<button class="p_zk" @click="p_zk()">{{kgName}}</button>
		</view>
				
		<view v-for="(item,index) in list" :key="index">
			<view @click="gotopage(`/pages/historyConstruction/historyDetail?id=${item.id}`)">
				<view class="type">
					<view class="justify-content">
						<view class="font-forty blue" v-if="item.serviceType != '004'">
							类别：{{item.serviceType}}
						</view>
						<view class="font-forty blue" v-else>
							类别：安检
						</view>
						<view class="font-twenty-eight gray">
							{{item.time}}
						</view>
					</view>
					<view class="font-thirty-six black" style="margin: 30rpx 0;" v-if="show === '002' || item.serviceType=='正常施工'">
						状态：{{item.status}}
					</view>
					<view class="font-thirty-six black" style="margin: 30rpx 0;" v-if="show === '002' || item.serviceType=='正常施工'">
						审核意见：
						<text class="" v-if="item.reason != null || item.reason != undefined">
							{{item.reason}}
						</text>
						<text class="" v-else>
							无
						</text>
					</view>
					<view class="font-thirty-six black" style="margin: 30rpx 0;">
						{{item.house}}
					</view>
					<button v-if="show === '002' && item.status == '待审核'" style="background-color: #007AFF; color: #FFFFFF;" @click.stop="gotoUpdate(item)">修改</button>
				</view>
			</view>
		</view>
		<view class="font-forty total">
			合计： <text class="font-fifty-six SourceHanSansCN red">{{list.length}}</text>
		</view>
	</view>
</template>

<script>
	import service from '@/api/index.js'
	export default {
		data() {
			return {
				show: '001',
				index: 0,
				list: [],
				type: [],
				
				areaName: '',
				buildingName: '',
				unitName: '',
				houseName: '',
				pop: false,
				kgName: '展开搜索',
			}
		},
		onShow() {
			// this.show = '001';
			this.getListAll();
			this.select();
		},
		methods: {
			getListAll() {
				service.getListAll({serviceType: this.show,
				areaName:this.areaName,
				buildingName:this.buildingName,
				unitName:this.unitName,
				houseName:this.houseName}).then(res => {
					this.list = res
				})
			},
			gotopage(url) {
				uni.navigateTo({
					url
				})
			},
			select() {
				service.getDic({dicType: 'service_type'}).then(res => {
					// console.log('service_type', res)
					const shenhe = {};
					shenhe.value='es002';
					shenhe.name='不合格';
					res.push(shenhe);
					this.type = res;
				})
			},
			active(item) {
				this.show = item.value;
			},
			gotoUpdate(item){
				uni.navigateTo({
					url:`/pages/historyConstruction/updateInfo?id=${item.id}&&house=${item.house}`,
				})				
			},
			p_zk(){
				if(this.kgName == '收起搜索'){
					this.kgName = '展开搜索';
				}else{
					this.kgName = '收起搜索';
				}
			}
		}
	}
	
	
	
	
</script>

<style lang="scss" scoped>
	.select {
		margin: 50rpx 20rpx 0;
		height: 105px;
		display: block;
		.border {
				width: 48%;
			    text-align: center;
			    padding: 20rpx 10rpx;
			    border-radius: 48rpx;
			    display: block;
			    float: left;
			    border: 2rpx solid #9dc9ff;
			    margin: 1%;
				background: #f5f7ff;
		}
	}
	.active {
	    background: #3857F3!important;
	    color: #FFFFFF;
	}

	.type {
		margin: 20rpx;
		padding: 20rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 8rpx 17rpx 0rpx rgba(0, 0, 0, 0.04);
		border-radius: 10rpx;
	}

	.text {
		border-left: 15rpx solid #3857F3;
		padding-left: 20rpx;
	}

	.total {
		width: 100%;
		padding: 40rpx 30rpx;
		border: 1rpx solid #727272;
		background: #FFFFFF;
	}

	.active {
		background: #3857F3;
		color: #FFFFFF;
	}
	.choose {
		text-align: center;
		padding: 20rpx;
		margin: 30rpx;
		color: #FFFFFF;
		background: #43CEB1;
		border-radius: 64rpx;
	}
	.search-text{
		float: left;
	    border-style:solid;
		border-width: 1rpx;
		height: 50rpx;
		width: 90%;
		border-radius: 24rpx;
	}
	.inp_vie{
		padding: 1% 3.5%;
	}
	.inp_vie input{
		float: none;
		    width: 98%;
		    padding-left: 1.5%;
		    height: 40px;
		    margin-bottom: 1.5%;
		    /* border-bottom: 1px solid #ccc!important; */
		    border: 1px solid #c7c7c7;
		    border-radius: 5px;
			
	}
	.btn_vie{
		background: #3857F3;
		color: #fff;
	}
	.btn_vie:active{
		background: #0925b3;
	}
	.p_zk{
		height: 40px;
		line-height: 40px;
		text-align: center;
		// background: #eee;
		margin: 1% auto;
		width: 93%;
		font-size: 15px;
	}
	.hei_vie{
		height: 350px;
	}
	.hei_vie2{
		height: 130px!important;
		overflow: hidden;
	}
</style>