no message

App.vue

@@ -1,32 +1,32 @@
 <script>
-	export default {
-		onLaunch: function() {
-			console.warn('当前组件仅支持 uni_modules 目录结构 ，请升级 HBuilderX 到 3.1.0 版本以上！')
-			console.log('App Launch')
-		},
-		onShow: function() {
-			console.log('App Show')
-		},
-		onHide: function() {
-			console.log('App Hide')
-		}
+export default {
+	onLaunch: function () {
+		console.warn('当前组件仅支持 uni_modules 目录结构 ，请升级 HBuilderX 到 3.1.0 版本以上！')
+		console.log('App Launch')
+	},
+	onShow: function () {
+		console.log('App Show')
+	},
+	onHide: function () {
+		console.log('App Hide')
 	}
+}
 </script>
 
 <style lang="scss">
-	/*每个页面公共css */
-	@import '@/uni_modules/uni-scss/index.scss';
-	/* #ifndef APP-NVUE */
-	@import '@/static/customicons.css';
-	// 设置整个项目的背景色
-	page {
-		background-color: #f5f5f5;
-	}
+/*每个页面公共css */
+@import '@/uni_modules/uni-scss/index.scss';
+/* #ifndef APP-NVUE */
+@import '@/static/customicons.css';
+// 设置整个项目的背景色
+page {
+	background-color: #fff;
+}
 
-	/* #endif */
-	.example-info {
-		font-size: 14px;
-		color: #333;
-		padding: 10px;
-	}
+/* #endif */
+.example-info {
+	font-size: 14px;
+	color: #333;
+	padding: 10px;
+}
 </style>

pages.json

@@ -122,6 +122,15 @@
 				}
 			}
 		]
+	}, {
+		"root": "pagesWarning",
+		"pages": [{
+			"path": "home/home",
+			"style": {
+				"navigationBarTitleText": "校园预警",
+				"enablePullDownRefresh": false
+			}
+		}]
 	}],
 	"globalStyle": {
 		"navigationBarTextStyle": "black",

pages/home/home.vue

@@ -152,11 +152,12 @@ const list = ref([
 	// 	title: '课后作业',
 	// 	url: '../../static/images/icon.png'
 	// },
-	// {
-	// 	id: 10,
-	// 	title: '留言',
-	// 	url: '../../static/images/icon.png'
-	// },
+	{
+		id: 10,
+		title: '校园预警',
+		url: '../../static/images/icon.png',
+		path: '/pagesWarning/home/home'
+	},
 	{
 		id: 11,
 		title: '通讯录',

pagesWarning/home/home.vue

@@ -0,0 +1,282 @@
+<template>
+	<view class="container">
+		<!-- 头部筛选区域 -->
+		<view class="search">
+			<picker style="width: 50%" :value="typeIndex" :range="typeList" range-key="text" @change="bindTypeChange">
+				<view class="search-left">
+					{{ typeList[typeIndex].text }}
+					<view class="search-img">
+						<img class="img" src="@/static/images/bottom2.png" />
+					</view>
+				</view>
+			</picker>
+
+			<picker style="width: 50%" mode="date" :value="date" @change="bindDateChange">
+				<view class="search-right">
+					{{ date }}
+					<view class="search-img">
+						<img class="img" src="@/static/images/bottom2.png" />
+					</view>
+				</view>
+			</picker>
+		</view>
+
+		<!-- 每一个预警信息 -->
+		<view class="container-item" v-for="item in listData" :key="item.id">
+			<!-- 标题区域 -->
+			<view class="item-title">
+				<view class="title-info">{{ item.warningType }}</view>
+				<view class="title-state">待处理</view>
+			</view>
+			<!-- 告警时间区域 -->
+			<view class="item-box">
+				<view class="box-key">告警时间</view>
+				<view class="box-value">{{ time_format(item.dateTime) }}</view>
+			</view>
+			<!-- 姓名区域 -->
+			<view class="item-box">
+				<view class="box-key">姓名</view>
+				<view v-if="item.name" class="box-value">{{ item.name }}</view>
+				<view v-else class="box-value">陌生人</view>
+			</view>
+			<!-- 地点区域 -->
+			<view class="item-box">
+				<view class="box-key">地点</view>
+				<view class="box-value">{{ item.address }}</view>
+			</view>
+			<!-- 图片区域 -->
+			<view class="item-box2">
+				<view class="box-key">图片</view>
+				<view class="box-img" @click="handleBigImg(item.pictureUrl)"><img :src="item.pictureUrl" /></view>
+			</view>
+			<!-- 按钮区域 -->
+			<view class="item-button">
+				<view class="button-finish" @click="handleFinish(item.id)">处理完成</view>
+				<view class="button-err" @click="handleErr(item.id)">误报</view>
+			</view>
+		</view>
+
+		<!-- 无数据时展示的区域 -->
+		<view class="list-noData" v-if="listData.length === 0">
+			<img mode="aspetcFill" class="img" src="@/static/images/noData.png" />
+			<view>暂无数据</view>
+		</view>
+	</view>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { onLoad, onPullDownRefresh, onReachBottom } from '@dcloudio/uni-app'
+// 导入时间相关函数
+import { time_format, getNowDate } from '@/utils/formatTime.js'
+
+// 状态筛选框数组当前索引
+const typeIndex = ref(0)
+
+// 状态筛选框数组
+const typeList = ref([
+	{
+		text: '全部',
+		value: 0
+	},
+	{
+		text: '越界预警',
+		value: 1
+	},
+	{
+		text: '区域入侵预警',
+		value: 2
+	},
+	{
+		text: '进入区域',
+		value: 3
+	},
+	{
+		text: '离开区域',
+		value: 4
+	}
+])
+
+// 状态筛选框改变数据时的回调
+const bindTypeChange = (e) => {
+	typeIndex.value = e.detail.value
+}
+
+// 日期筛选框绑定日期
+const date = ref(getNowDate())
+
+// 日期筛选框改变数据时的回调
+const bindDateChange = (e) => {
+	date.value = e.detail.value
+}
+
+// 预警列表数据
+const listData = ref([])
+
+onLoad(() => {})
+
+// 点击图片回调
+const handleBigImg = (imgUrl) => {
+	console.log(imgUrl)
+}
+// 处理完成按钮回调
+const handleFinish = () => {}
+
+// 误报按钮回调
+const handleErr = () => {}
+</script>
+
+<style lang="scss" scoped>
+.container {
+	background-color: #f2f2f2;
+
+	.search {
+		margin-bottom: 20rpx;
+		display: flex;
+		align-items: center;
+		height: 100rpx;
+		background-color: #fff;
+
+		.search-left {
+			display: flex;
+			justify-content: center;
+			border-right: 1rpx solid #ccc;
+
+			.search-img {
+				margin-left: 27rpx;
+				margin-top: -5rpx;
+				width: 17rpx;
+				height: 12rpx;
+
+				.img {
+					width: 100%;
+					height: 100%;
+				}
+			}
+		}
+
+		.search-right {
+			display: flex;
+			justify-content: center;
+
+			.search-img {
+				margin-left: 27rpx;
+				margin-top: -5rpx;
+				width: 17rpx;
+				height: 12rpx;
+
+				.img {
+					width: 100%;
+					height: 100%;
+				}
+			}
+		}
+	}
+
+	.container-item {
+		padding: 0 30rpx;
+		margin-bottom: 20rpx;
+		height: 601rpx;
+		background-color: #fff;
+
+		.item-title {
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+			height: 92rpx;
+			border-bottom: 1rpx solid #e6e6e6;
+
+			.title-info {
+				font-size: 34rpx;
+				font-weight: bold;
+			}
+
+			.title-state {
+				font-size: 28rpx;
+				color: #5a61f4;
+			}
+		}
+
+		.item-box {
+			display: flex;
+			align-items: center;
+			height: 80rpx;
+			font-size: 28rpx;
+
+			.box-key {
+				margin-right: 60rpx;
+				width: 120rpx;
+				color: #999999;
+				text-align-last: justify;
+			}
+
+			.box-value {
+			}
+		}
+
+		.item-box2 {
+			display: flex;
+			align-items: center;
+			height: 98rpx;
+			font-size: 28rpx;
+
+			.box-key {
+				margin-right: 60rpx;
+				width: 120rpx;
+				color: #999999;
+				text-align-last: justify;
+			}
+			.box-img {
+				height: 100%;
+
+				img {
+					height: 100%;
+				}
+			}
+		}
+
+		.item-button {
+			display: flex;
+			justify-content: flex-end;
+			align-items: center;
+			height: 170rpx;
+
+			.button-finish {
+				display: flex;
+				justify-content: center;
+				align-items: center;
+				width: 170rpx;
+				height: 70rpx;
+				color: #fff;
+				font-size: 32rpx;
+				border-radius: 15rpx;
+				background: linear-gradient(180deg, #8684ff 0%, #3c50e8 100%);
+			}
+
+			.button-err {
+				margin-left: 30rpx;
+				display: flex;
+				justify-content: center;
+				align-items: center;
+				width: 170rpx;
+				height: 70rpx;
+				color: #d43030;
+				font-size: 32rpx;
+				border-radius: 15rpx;
+				background-color: #e6e6e6;
+			}
+		}
+	}
+
+	.list-noData {
+		padding-top: 150rpx;
+		background-color: #fff;
+		text-align: center;
+		color: #999999;
+
+		.img {
+			width: 600rpx;
+		}
+	}
+}
+</style>

unpackage/dist/dev/mp-weixin/app.js

@@ -19,6 +19,7 @@ if (!Math) {
   "./pagesReservation/record/record.js";
   "./pagesReservation/backlog/backlog.js";
   "./pagesReservation/QRCode/QRCode.js";
+  "./pagesWarning/home/home.js";
 }
 const _sfc_main = {
   onLaunch: function() {

unpackage/dist/dev/mp-weixin/app.json

@@ -23,6 +23,12 @@
         "backlog/backlog",
         "QRCode/QRCode"
       ]
+    },
+    {
+      "root": "pagesWarning",
+      "pages": [
+        "home/home"
+      ]
     }
   ],
   "window": {

unpackage/dist/dev/mp-weixin/app.wxss

@@ -2353,7 +2353,7 @@
   border-color: #e9e9eb;
 }
 page {
-  background-color: #f5f5f5;
+  background-color: #fff;
 }
 .example-info {
   font-size: 14px;

unpackage/dist/dev/mp-weixin/common/vendor.js

@@ -1508,8 +1508,8 @@ function populateParameters(fromRes, toRes) {
     appVersion: "1.0.0",
     appVersionCode: "100",
     appLanguage: getAppLanguage(hostLanguage),
-    uniCompileVersion: "3.98",
-    uniRuntimeVersion: "3.98",
+    uniCompileVersion: "3.99",
+    uniRuntimeVersion: "3.99",
     uniPlatform: "mp-weixin",
     deviceBrand,
     deviceModel: model,
@@ -7165,5 +7165,6 @@ exports.s = s;
 exports.sr = sr;
 exports.t = t;
 exports.toRaw = toRaw;
+exports.unref = unref;
 exports.useCssVars = useCssVars;
 exports.wx$1 = wx$1;

unpackage/dist/dev/mp-weixin/pages/home/home.js

@@ -90,11 +90,12 @@ const _sfc_main = {
       // 	title: '课后作业',
       // 	url: '../../static/images/icon.png'
       // },
-      // {
-      // 	id: 10,
-      // 	title: '留言',
-      // 	url: '../../static/images/icon.png'
-      // },
+      {
+        id: 10,
+        title: "校园预警",
+        url: "../../static/images/icon.png",
+        path: "/pagesWarning/home/home"
+      },
       {
         id: 11,
         title: "通讯录",

utils/formatTime.js

@@ -0,0 +1,27 @@
+// 将13位时间戳转化为YYYY-MM-dd HH:mm:ss
+export const time_format = (time) => {
+	if (time.toString().length === 13) {
+		var date, y, m, d, h, mm, s
+		date = new Date(time)
+		y = date.getFullYear()
+		m = (date.getMonth() + 1).toString().padStart(2, 0)
+		d = date.getDate().toString().padStart(2, 0)
+		h = date.getHours().toString().padStart(2, 0)
+		mm = date.getMinutes().toString().padStart(2, 0)
+		s = date.getSeconds().toString().padStart(2, 0)
+
+		date = y + "-" + m + "-" + d + " " + h + ":" + mm + ":" + s
+		return date
+	} else {
+		return '格式不正确'
+	}
+}
+
+// 获取当前日期
+export const getNowDate = () => {
+	const date = new Date()
+	let year = date.getFullYear()
+	let month = (date.getMonth() + 1).toString().padStart(2, 0)
+	let day = date.getDate()
+	return `${year}-${month}-${day}`
+}