shuju_ui/test/pages/home/resident.vue

<template>
	<view class="resident">
		<view class="resident_box">
			<view  class="resbox_tit">截至<text class="ctit">{{getTimeNow ()}}</text>的常住人口统计</view>
			<view class="resbox_list">
				<view class="listc">
					<view class="resboxl_tit">当前单位</view>
					<view class="resboxl_txt">{{dataobj.dqdw||'暂无'}}</view>
				</view>
				<view class="listc">
					<view class="resboxl_tit">村(个)</view>
					<view class="resboxl_txt">{{dataobj.cun||0}}</view>
				</view>
				<view class="listc">
					<view class="resboxl_tit">组(个)</view>
					<view class="resboxl_txt">{{dataobj.zu||0}}</view>
				</view>
				<view class="listc" @click="getCzFn">
					<view class="resboxl_tit">常住人口(人)</view>
					<view class="resboxl_txt">{{dataobj.czzrs||0}}</view>
				</view>
				<view class="listc" @click="getList('add','cz')">
					<view class="resboxl_tit">新增(人)</view>
					<view class="resboxl_txt c09">{{dataobj.czxz||0}}</view>
				</view>
				<view class="listc" @click="getList('reduce','cz')">
					<view class="resboxl_tit">减少(人)</view>
					<view class="resboxl_txt cfa">{{dataobj.czjs||0}}</view>
				</view>
				
				<!-- <view class="listc" @click="getCzFn">
					<view class="resboxl_tit">户籍人口(人)</view>
					<view class="resboxl_txt">{{dataobj.hjzrs}}</view>
				</view>
				<view class="listc" @click="getList('add','hj')">
					<view class="resboxl_tit">新增(人)</view>
					<view class="resboxl_txt c09">{{dataobj.hjxz}}</view>
				</view>
				<view class="listc" @click="getList('reduce','hj')">
					<view class="resboxl_tit">减少(人)</view>
					<view class="resboxl_txt cfa">{{dataobj.hjjs}}</view>
				</view> -->
				
			</view>
		</view>
		
		
		<view class="resbox_t"><text class="cfa">*</text>点击可查看详情信息</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				dataobj:{
					cun: 0,
					czrk: 0,
					dqdw: "暂无",
					js: 0,
					xz: 0,
					zhen: 0,
					zu: 0,
				}
			}
		},
		onLoad() {
			this.getDataFn()
		},
		methods:{
			getList(e,id){
				uni.navigateTo({
					url:'/pages/resident/resident?type='+e+'&query='+id
				})
			},
			getCzFn(){
				uni.navigateTo({
					url:'/home/pages/recordthree/recordpeople'
				})
			},
			getDataFn(){
				var that=this;
				this.$http.get('boman-web-core/core/czrk/stsByCzrk').then(res=>{
					if(res.code == 200 ) {
						this.dataobj=res.data
					}else{
						uni.showToast({
							title: res.msg,
							icon: "none"
						})
					}
				})
			},
			/* 获取当前时间 */
			getTimeNow () {
				// console.log(Date.now())
				let re = this.h_util.getDateTime('yyyy年MM月dd日hh时',new Date())
				
				// console.log(re)
				return re
			}
		}
	}
</script>

<style scoped lang="scss">
.resident{min-height: 100vh;background: #f2f2f2;padding: 40rpx 34rpx;box-sizing: border-box;
	.resident_box{width:100%;background: #FFFFFF;border-radius: 6rpx;min-height: 430rpx;padding: 28rpx 28rpx 0 22rpx;box-sizing: border-box;
		.resbox_tit{font-size: 24rpx;font-weight: bold;color: #343434;
		padding: 12rpx 0;
			.ctit{color: #009FE8;}
		}
		.resbox_list{
			// padding: 20rpx 0;
			display: flex;flex-wrap: wrap;
			.list{
				display: flex;flex-wrap: nowrap;
			&.lista{background: #EAF0F3;}
			&.listb{background: #FFFFFF;}
			}
			.resboxl_tit{font-size: 26rpx;font-weight: bold;color: #343434;text-align: center;padding: 12rpx 0;line-height: 36rpx;}
			.resboxl_txt{font-size: 30rpx;
color: #00B034;text-align: center;padding: 24rpx 0;
				&.c09{color: #009FE8;}
				&.cfa{color: #FA2323;}
}
		}
		
	}
	.resbox_t{text-align: right;font-size: 24rpx;color: #666666;padding: 20rpx;
		.cfa{color: #FA2323;}
	}
	.listc{
		width: 33.33%;
		padding: 20rpx 0;
		.resboxl_tit{
			background: #EAF0F3;
		}
	}

}
</style>