shuju_ui/test/pages/home/home.vue

<template>
	<view>
		<!-- 疫苗 -->
		<view class="con" style="width: 100%;display: none;">
			<!-- 点击查看全民接种疫苗进度 -->
			<view class="imagba">
				<image class="imagb" src="https://qsfy.qs163.cn/statics/shujuju_applet_static_path/1.png"></image>
			</view>
			
			<!-- 点击查看疫苗接种情况登记表 -->
			<view class="imagbox" @click="vacInfo">
				<image :src="peobga" class="nimage"></image>
				<view class="imagboxa">
					<view class="imgl">
						<image  :src="peolimga" mode=""></image>
					</view>
					<view class="">
						<text class="txt">疫苗接种情况统计表</text>
						<view class="txt2" style="color: #05407A;">
							截止至 {{getTimeNow ()}}
						</view>
					</view>
				</view>
				
			</view>
			<!-- 点击添加新增疫苗接种情况 -->
			<view class="imagbox" @click="addVacSitua()">
				<image class="nimage" :src="peobgb" mode=""></image>
				<view class="imagboxa">
					<view class="imgl">
						<image  :src="peolimgb" mode=""></image>
					</view>
					<view class="">
						<text class="txt">新增疫苗接种信息</text>
						<view class="txt2">
							添加疫苗接种情况
						</view>
					</view>
				</view>
			</view>
			<!-- 点击查询疫苗接种情况 -->
			<view class="imagbox " @click="goRecord">
				<image class="nimage" :src="peobgc" mode=""></image>
				<view class="imagboxa">
					<view class="imgl">
						<image  :src="peolimgc" mode=""></image>
					</view>
					<view class="">
						<text class="txt">疫苗接种情况</text>
						<view class="txt2" style="color: #046922;">
							查询/修改人员疫苗接种情况
						</view>
					</view>
				</view>
				
			</view>
			<u-toast ref="uToast" />
		</view>
		<!-- 人口 -->
		<view class="con" style="width: 100%;">
			<!-- 点击查看全市人口信息 -->
			<view class="imagba">
				<image class="imagb" :src="peobg"></image>
				<view class="imagbc">
					<view class="imagbd"><text class="imagbda">电脑端网址：</text>https://qsfy.qs163.cn</view>
					<view class="imagbd"><text class="imagbda">维保热线：</text>0556-8938001</view>
				</view>
			</view>
			
			<!-- 点击查看常住人口统计 -->
			<view class="imagbox" @click="vacInfopro">
				<image class="nimage" :src="peobga" mode=""></image>
				<view class="imagboxa">
					<view class="imgl">
						<image  :src="peolimga" mode=""></image>
					</view>
					<view class="" >
						<text class="txt">常住人口统计</text>
						<view class="txt2" style="color: #05407A;">
							截止至 {{getTimeNow ()}}
						</view>
					</view>
				</view>
				
			</view>
			<!-- 点击新增人口信息 -->
			<view class="imagbox " @click="addVacSituapeo()">
				<image class="nimage" :src="peobgb" mode=""></image>
				<view class=" imagboxa">
					<view class="imgl">
						<image  :src="peolimgb" mode=""></image>
					</view>
					<view class="" >
						<text class="txt">新增人口信息</text>
						<view class="txt2">
							添加人口详细信息
						</view>
					</view>
				</view>
				
			</view>
			<!-- 点击查询人口信息情况 -->
			<view class="imagbox" @click="goRecordpeo">
				<image class="nimage" :src="peobgc" mode=""></image>
				<view class=" imagboxa">
					<view class="imgl">
						<image  :src="peolimgc" mode=""></image>
					</view>
					<view class="" >
						<text class="txt">人口信息情况</text>
						<view class="txt2" style="color: #046922;">
							查询/修改/删除人口信息
						</view>
					</view>
				</view>
				
			</view>
			<!-- 人员状态变更 -->
				<view class="imagbox" @click="goReturnState">
					<image class="nimage" :src="peobgd" mode=""></image>
					<view class=" imagboxa">
						<view class="imgl">
							<image  :src="peolimge" mode=""></image>
						</view>
						<view class="">
							<text class="txt">人员状态变更</text>
							<view class="txt2" style="color: #6A2665;">
								更改人员状态信息
							</view>
						</view>
					</view>
				</view>
			<!-- 核酸情况 -->
			<view class="imagbox" @click="goNuclein">
				<image class="nimage" :src="peobge" mode=""></image>
				<view class=" imagboxa">
					<view class="imgl">
						<image  :src="peolimgf" mode=""></image>
					</view>
					<view class="">
						<text class="txt">人员核酸信息</text>
						<view class="txt2" style="color: #C7110C;">
							查看已核酸人员的核酸详细信息
						</view>
					</view>
				</view>
			</view>
			<view class="imagbox" @click="goAddress">
				<image class="nimage" :src="peobgg" mode=""></image>
				<view class=" imagboxa">
					<view class="imgl">
						<image  :src="peolimgg" mode=""></image>
					</view>
					<view class="">
						<text class="txt">采集点核酸信息</text>
						<view class="txt2" style="color:#0C706F;">
							根据核酸采集地筛选核酸信息
						</view>
					</view>
				</view>
			</view>
			<view class="imagbox" @click="goProblem">
				<image class="nimage" :src="peobgi" mode=""></image>
				<view class=" imagboxa">
					<view class="imgl">
						<image  :src="peolimgi" mode=""></image>
					</view>
					<view class="">
						<text class="txt">常见问题及解答</text>
						<view class="txt2" style="color:#C7110C;">
							查看软件操作使用中可能遇到的问题及解答
						</view>
					</view>
				</view>
			</view>
			
			<!-- 点击查询返乡人员信息 -->
		<!-- 	<view class="imagbox" @click="goReturnpeo">
				<image class="nimage" :src="peobgd" mode=""></image>
				<view class=" imagboxa">
					<view class="imgl">
						<image  :src="peolimgd" mode=""></image>
					</view>
					<view class="">
						<text class="txt">返乡人员信息</text>
						<view class="txt2" style="color: #046922;">
							查询/修改/删除返乡人员信息
						</view>
					</view>
				</view>
			</view> -->
			<!-- <view style="height: 200rpx;"></view> -->
			<u-toast ref="uToast" />
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				peobg:require("@/static/image/peo_bg.png"),
				peobga:require("@/static/image/peo_bga.png"),
				peobgb:require("@/static/image/peo_bgb.png"),
				peobgc:require("@/static/image/peo_bgc.png"),
				peobgd:require("@/static/image/peo_bgd.png"),
				peobge:require("@/static/image/peo_bge.png"),
				peobgg:require("@/static/image/peo_bgg.png"),
				peobgi:require("@/static/image/peo_bgi.png"),
				peolimga:require("@/static/image/peo_a.png"),
				peolimgb:require("@/static/image/peo_b.png"),
				peolimgc:require("@/static/image/peo_c.png"),
				peolimgd:require("@/static/image/peo_d.png"),
				peolimge:require("@/static/image/peo_e.png"),
				peolimgf:require("@/static/image/peo_f.png"),
				peolimgg:require("@/static/image/peo_g.png"),
				peolimgi:require("@/static/image/peo_i.png"),
			}
		},
		methods:{
			checkLogin() {
				var token = uni.getStorageSync('token')
				// var token = "df057579-73c8-4bdd-8312-f64db8efd699"
				if (token == undefined || token == '') {
					uni.navigateTo({
						url: '/pages/login/login'
					})
					return false
				}
				return true
			},
			/* 点击新增疫苗接种情况 */
			addVacSitua () {
				if (!this.checkLogin()) {
					return
				}
				uni.navigateTo({
					 url: "/add/pages/addvacfrom/addvacfrom"
				})
			},
			/* 点击进入疫苗情况 */
			goRecord () {
				if (!this.checkLogin()) {
					return
				}
				uni.navigateTo({
					 url: "/home/pages/recordthree/recordthree"
				})
			},
			vacInfo() {
				if (!this.checkLogin()) {
					return
				}
				uni.navigateTo({
					 url: '/pages/home/statis'
				})
				// this.$refs.uToast.show({
				// 	title: '该功能暂未开放',
				// 	type: 'error'
				// })
			},
			// 常驻人口
			vacInfopro(){
				if (!this.checkLogin()) {
					return
				}
				uni.navigateTo({
					 url: '/pages/home/resident'
				})
			},
			//新增人口信息
			addVacSituapeo(){
				if (!this.checkLogin()) {
					return
				}
				uni.navigateTo({
					 url: "/add/pages/addvacfrom/addpeople"
				})
			},
			// 人口信息情况
			goRecordpeo(){
				if (!this.checkLogin()) {
					return
				}
				uni.navigateTo({
					 url: "/home/pages/recordthree/recordpeople"
				})
			},
			//状态变更
			goReturnState(){
				if (!this.checkLogin()) {
					return
				}
				uni.navigateTo({
					 url: "/home/pages/recordthree/recordstate"
				})
			},
			goNuclein(){
				if (!this.checkLogin()) {
					return
				}
				uni.navigateTo({
					 url: "/home/pages/recordthree/recordnuclein"
				})
			},
			goAddress(){
				if (!this.checkLogin()) {
					return
				}
				uni.navigateTo({
					 url: "/home/pages/recordthree/addressacid"
				})
			},
			goProblem(){
				if (!this.checkLogin()) {
					return
				}
				uni.navigateTo({
					 url: "/home/pages/recordthree/problem"
				})
			},
			//返乡
			goReturnpeo(){
				if (!this.checkLogin()) {
					return
				}
				uni.navigateTo({
					 url: "/home/pages/recordthree/returnpeople"
				})
			},
			/* 获取当前时间 */
			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">
	.imagbox{position: relative;width: 684rpx;height: 140rpx;margin-bottom: 30rpx;}
	.nimage{width: 100%;height: 100%;display: block;}
	.imagboxa{position: absolute;left: 0;right: 0;top: 0;bottom: 0;padding: 0 32rpx;box-sizing: border-box;display: flex;align-items: center;}
	.imgl{width: 88rpx;height: 88rpx;display: flex;align-items: center;justify-content: center;margin-right: 32rpx;margin-top: 20rpx;}
	.imgl image{max-width: 100%;max-height: 100%;}
	.con {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 30rpx 0;
	}
	.imagba{position:relative;width:684rpx;
		height:292upx;
		margin-bottom: 24rpx;}
	.imagbc{position: absolute;left:44rpx;bottom: 4rpx;
		.imagbd{font-size: 24rpx;color: #ffffff;
			.imagbda{display: inline-block;width: 160rpx;text-align: justify;text-align-last: justify;}
		}
	}
	.imagb{
		width:684rpx;
		height:292upx;
	}
	.imagx{
		width:90%;
		height:200upx;
		background-size: 100% 200upx;
		
	}
	.imagy{
		width:90%;
		height:200upx;
		
		background-size: 100% 200upx;
		margin-top: 28upx;
	}
	.imagp{
		width:90%;
		height:200upx;
		// background-image:url("../../static/img");
		background-size: 100% 200upx;
		margin-bottom: 28upx;
	}	
	.txt{
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #FFFFFF;
		line-height: 40rpx;
	}
	.txt2{
		margin-top: 10rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #DA6100;
		line-height: 24rpx;
	}
			
	
</style>