uni-app的Vue.js实现微信小程序的紧急事件登记页面功能

news2024/12/26 2:11:59

主要功能实现 

  1. 完成发生时间选择功能,用户可以通过日期选择器选择事件发生的时间。
  2. 实现事件类型选择功能,用户可以通过下拉选择框选择事件的类型。
  3. 添加子养殖场编号输入框,用户可以输入与事件相关的子养殖场编号。
  4. 完成事件描述输入功能,用户可以通过文本输入框描述事件的详细情况。
  5. 增加上传图片功能,用户可以选择并上传相关图片。
  6. 增加上传视频功能,用户可以选择并上传相关视频。
  7. 实现处理结果输入功能,用户可以通过文本输入框记录事件的处理结果。
  8. 添加是否已解决选择功能,用户可以通过单选按钮选择事件是否已经解决。

大概有两个样子的版本,一个是用内置组件完成的,另一个是用uni-ui扩展组件完成的,都在下面

未加样式版本

稍微加了点样式的样子

这是简陋的代码

<template>
	<view class="mainCSS">
		<view class="column">1. 发生时间</view>
		<picker class="input" mode="date" :end="endDate" @change="bindDateChange">
			<view>{{date}}</view>
		</picker>

		<view class="column">2. 事件类型</view>
		<picker class="input" :range="kind" :value="kindIndex" @change="bingKindChange">
			<view>{{kind[kindIndex]}}</view>
		</picker>

		<view class="column">3. 子养殖场编号</view>
		<input class="input" placeholder="二号区③" @confirm="bindFarmCode"/>

		<view class="column">4. 事件描述</view>
		<textarea class="input" @confirm="bindTextDetail" placeholder="请输入"></textarea>

		<view class="column">5. 上传图片</view>
		<view v-for="(imageName, index) in imageNames" :key="index">
			<text>{{imageName}}</text>
		</view>
		<button type="primary" size="mini" @click="loadImage">选择图片</button>

		<view class="column">6. 上传视频</view>
		<view v-for="(videoName, index) in videoNames" :key="index">
			<text>{{videoName}}</text>
		</view>
		<button type="primary" size="mini" @click="loadVideo">选择视频</button>

		<view class="column">7. 处理结果</view>
		<textarea class="input" placeholder="是如何处理的?" @confirm="bindResult"></textarea>

		<view class="column">8. 是否已经解决了</view>
		<radio-group @change="bindDoneChange">
			<label>
				<radio value="false" checked="checked">未解决</radio>
				<radio value="true">已解决</radio>
			</label>
		</radio-group>

		<button class="column" type="primary">提交</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				date: this.getDate(),
				kind: ['养殖物异常', '设备异常', '偷盗', '野生动物', '灾害', '其他异常'],
				kindIndex: 0,
				farmCode:"",
				detail: {},
				imageNames: [],
				videoNames: [],
				result:"",
				done:false
			}
		},
		computed: {
			endDate() {
				return this.getDate();
			}
		},
		methods: {
			getDate() {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			bindDateChange: function(e) {
				this.date = e.detail.value;
			},
			bingKindChange: function(e) {
				this.kindIndex = e.detail.value;
			},
			bindFarmCode:function(e){
				this.farmCode=e.detail.value;
			},
			bindTextDetail: function(e) {
				this.detail = e.detail.value;
			},
			bindResult:function(e){
				this.result=e.detail.value;
			},
			bindDoneChange: function(e) {
				this.done = e.detail.value;
			},
			loadImage() {
				uni.chooseImage({
					success: (response) => {
						for (let file of response.tempFiles) {
							let imageName = file.name.substring(file.name.lastIndexOf('/') + 1);
							this.imageNames.push(imageName);
						}
					}
				})
			},
			loadVideo() {
				uni.chooseVideo({
					success: (response) => {
						let videoName = response.tempFile.name;
						videoName = videoName.substring(videoName.lastIndexOf('/') + 1);
						this.videoNames.push(videoName);
					}
				})
			}
		}
	}
</script>

<style>
	.mainCSS {
		margin: 30rpx;
	}
	.input{
		margin: 15rpx;
		border: 1rpx solid #cbd5de;
		width: 100%;
	}
	.column{
		margin: 30rpx;
		font-weight: bold;
	}
</style>

然后是用了uni-ui扩展组件大改了一下样式

 

 主要就是样式通过uni-ui组件完成

<template>
	<view class="mainCSS">
		<view class="column">1. 发生时间</view>
		<uni-datetime-picker type="date" :end="endDate" @change="bindDateChange"></uni-datetime-picker>

		<view class="column">2. 事件类型</view>
		<uni-data-select :localdata="kind" v-model="kindIndex" @change="bindKindChange"></uni-data-select>

		<view class="column">3. 子养殖场编号</view>
		<uni-easyinput placeholder="二号区③" @confirm="bindFarmCode"></uni-easyinput>

		<view class="column">4. 事件描述</view>
		<uni-easyinput type="textarea" autoHeight placeholder="请描述紧急事件的具体情况" @confirm="bindTextDetail"></uni-easyinput>

		<view class="column">5. 上传图片</view>
		<uni-file-picker title="最多选择九张图片" :list-styles="listStyles"></uni-file-picker>

		<view class="column">6. 上传视频</view>
		<uni-file-picker file-mediatype="video"></uni-file-picker>

		<view class="column">7. 处理结果</view>
		<uni-easyinput type="textarea" autoHeight placeholder="请描述事件是如何处理的" @confirm="bindResult"></uni-easyinput>

		<view class="column">8. 是否已经解决了</view>
		<radio-group @change="bindDoneChange">
			<label>
				<radio value="false" checked="checked">未解决</radio>
				<radio value="true">已解决</radio>
			</label>
		</radio-group>

		<button class="column" type="primary">提交</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				date: this.getDate(),
				kind: [{
						value: 0,
						text: '养殖物异常'
					},
					{
						value: 0,
						text: '设备异常'
					},
					{
						value: 0,
						text: '偷盗'
					},
					{
						value: 0,
						text: '野生动物'
					},
					{
						value: 0,
						text: '灾害'
					},
					{
						value: 0,
						text: '其他异常'
					},
				],
				kindIndex: 0,
				farmCode: "",
				detail: {},
				result: "",
				done: false
			}
		},
		computed: {
			endDate() {
				return this.getDate();
			}
		},
		methods: {
			getDate() {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			bindDateChange: function(e) {
				this.date = e.detail.value;
			},
			bindKindChange: function(e) {
				this.kindIndex = e.detail.value;
			},
			bindFarmCode: function(e) {
				this.farmCode = e.detail.value;
			},
			bindTextDetail: function(e) {
				this.detail = e.detail.value;
			},
			bindResult: function(e) {
				this.result = e.detail.value;
			},
			bindDoneChange: function(e) {
				this.done = e.detail.value;
			}
		}
	}
</script>

<style lang="scss">
	.mainCSS {
		padding: 25rpx;
		background-color: white;
	}

	.column {
		margin-top: 30rpx;
		margin-bottom: 15rpx;
		font-weight: bold;
		font-size: 30rpx;
	}

	button {
		border-radius: 20rpx;
		margin-left: 20rpx;
	}
</style>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/900057.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

C++笔记之条件变量(Condition Variable)与cv.wait 和 cv.wait_for的使用

C笔记之条件变量&#xff08;Condition Variable&#xff09;与cv.wait 和 cv.wait_for的使用 参考博客&#xff1a;C笔记之各种sleep方法总结 code review! 文章目录 C笔记之条件变量&#xff08;Condition Variable&#xff09;与cv.wait 和 cv.wait_for的使用1.条件变量&…

msf和cs联动

cs设置外部监听器 在vps上执行 vim /etc/ssh/sshd_config AllowTcpForwarding yes GatewayPorts yes TCPKeepAlive yes PasswordAuthentication yes systemctl restart sshd.service 在kali上执行&#xff0c;进行端口转发 ssh -C -f -N -g -R 0.0.0.0:1234:192.168.1.30:…

STM32开关输入控制220V灯泡亮灭源代码(附带PROTEUSd电路图)

//main.c文件 /* USER CODE BEGIN Header */ /********************************************************************************* file : main.c* brief : Main program body************************************************************************…

525. 连续数组

525. 连续数组 原题链接&#xff1a;完成情况&#xff1a;解题思路&#xff1a;参考代码&#xff1a; 原题链接&#xff1a; 525. 连续数组 https://leetcode.cn/problems/contiguous-array/description/ 完成情况&#xff1a; 解题思路&#xff1a; 参考代码&#xff1a; …

奇舞周刊第503期:图解串一串 webpack 的历史和核心功能

记得点击文章末尾的“ 阅读原文 ”查看哟~ 下面先一起看下本期周刊 摘要 吧~ 奇舞推荐 ■ ■ ■ 图解串一串 webpack 的历史和核心功能 提到打包工具&#xff0c;可能你会首先想到 webpack。那没有 webpack 之前&#xff0c;都是怎么打包的呢&#xff1f;webpack 都有哪些功能&…

喜讯?宁德时代首个零碳工厂成功建立,碳中和“任重道远”

8月19日消息&#xff0c;据宁德时代消息&#xff0c;广东瑞庆时代新能源科技有限公司宣布获得国际认可机构SGS颁发的PAS2060碳中和认证证书&#xff0c;从而正式成为一家零碳工厂。这标志着宁德时代首个储能电池为主的零碳工厂成功建立&#xff0c;也是公司继四川时代宜宾工厂之…

编程练习(3)

一.选择题 第一题&#xff1a; 函数传参的两个变量都是传的地址&#xff0c;而数组名c本身就是地址&#xff0c;int型变量b需要使用&符号&#xff0c;因此答案为A 第二题&#xff1a; 本题考察const修饰指针变量&#xff0c;答案为A,B,C,D 第三题&#xff1a; 注意int 型变…

速通蓝桥杯嵌入式省一教程:(五)用按键和屏幕实现嵌入式交互系统

一个完整的嵌入式系统&#xff0c;包括任务执行部分和人机交互部分。在前四节中&#xff0c;我们已经讲解了LED、LCD和按键&#xff0c;用这三者就能够实现一个人机交互系统&#xff0c;也即搭建整个嵌入式系统的框架。在后续&#xff0c;只要将各个功能加入到这个交互系统中&a…

赏味不足:详细来聊下轻资产运作,我从不做重资产

来源&#xff1a;BV1F84y1g7u3 好 大家好&#xff0c;是这样子的 对吧&#xff0c;因为最近聊了也很多&#xff0c;然后我在过程当中也发现&#xff0c;很多人对于不管是创业还是做副业&#xff0c;还是说找一条多种路&#xff0c;就是说可能不是那么清晰&#xff0c;然后我在这…

使用Dockerfile部署java项目

1、移动java包到创建的目录下 2、编写Dockerfile文件 在同一目录下使用如下命令创建文件 touch Dockerfile 文件内容如下&#xff1a; #依赖的父镜像 FROM java:8 #作者 MAINTAINER maxurui #jar包添加到镜像中 ADD springboot3-0.0.1-SNAPSHOT.jar springboot3-0.0.1-SNAPSHO…

射频同轴线阻抗

射频同轴线阻抗 射频同轴线的阻抗与线的绝缘介质的介电常数有关&#xff0c;与线的屏蔽层半径与内部导线半径的比值有关&#xff1a; R 0 1 2 π μ ′ ϵ ′ ln ⁡ ( r 2 r 1 ) \begin{align} R_0\frac{1}{2\pi}\sqrt{\frac{\mu^{}}{\epsilon^{}}}\ln(\frac{r_2}{r_1}) \en…

图数据库_Neo4j中文版_Centos7.9安装Neo4j社区版3.5.9_基于jdk1.8---Neo4j图数据库工作笔记0012

由于我们在国内使用啊,具体还是要用中文版滴,找了好久这个neo4j,原来还是有中文版的, https://we-yun.com/doc/neo4j-chs/ 中文版下载地址在这里: 所有版本都在这里了,需要哪个自己去下载就可以了,要注意下载以后,参考: https://we-yun.com/blog/prod-56.html 在这个位置下载…

Linux系统--进程间通信

文章目录 什么是进程间通信匿名管道命名管道 system V共享内存 system V消息队列 信号量 一、什么是进程间通信 首先由于进程运行是具有独立性的&#xff0c;具有独立的页表&#xff0c;PCB和虚拟地址空间等&#xff0c;父子进程间数据互补干扰。这就让进程间通信难度加大。由…

C语言:字符函数和字符串函数

往期文章 C语言&#xff1a;初识C语言C语言&#xff1a;分支语句和循环语句C语言&#xff1a;函数C语言&#xff1a;数组C语言&#xff1a;操作符详解C语言&#xff1a;指针详解C语言&#xff1a;结构体C语言&#xff1a;数据的存储 目录 往期文章前言1. 函数介绍1.1 strlen1.…

最新觅知扶风视频解析计费系统源码V1.8.2 免授权优化版 附教程

最新觅知扶风视频解析计费系统源码V1.8.2 免授权优化版 附教程 之前有分享过 1.7.1 的扶风计费系统&#xff0c;那个版本很久了之前也一直没有更新&#xff0c;拿到源码之后进行优化&#xff0c;因历史版本的加载和原版的加载速度真的是慢的感人&#xff0c;因此从零开始进行去…

发布一个开源的新闻api(整理后就开源)

目录 说明: 基础说明 其他说明: 通用接口&#xff1a; 登录: 注册: 更改密码(需要token) 更换头像(需要token) 获取用户列表(需要token): 上传文件(5000端口): 获取文件(5000端口)源码文件&#xff0c;db文件均不能获取: 验证token(需要token): 获取系统时间: 文件…

STM32 CubeMX (第一步Freertos任务管理:创建、删除、挂起、恢复)

STM32 CubeMX Freertos STM32 CubeMX &#xff08;Freertos任务&#xff1a;创建、删除、挂起、恢复&#xff09; STM32 CubeMX Freertos前言一、STM32 CubeMX 配置时钟树配置HAL时基选择TIM1&#xff08;不要选择滴答定时器&#xff1b;滴答定时器留给OS系统做时基&#xff09…

Hlang--用Python写个编程语言-判断与循环

文章目录 前言语法描述判断循环词法解析语法解析定义节点生成节点判断节点循环节点解释器处理判断节点循环处理前言 okey,很好,在上一篇文章当中,我们实现了这个基本的逻辑运算,所以的话,在这里,我们将可以实现到我们的这个判断和循环了。由于这里的话,我们的操作其实和…

搭建私有镜像仓库Harbor

目录 系统环境&#xff1a; 安装Docker-Compose 下载并安装Harber 启动Harbor&#xff01;&#xff01;&#xff01; 系统环境&#xff1a; Centos7.9Docker-ce:24 安装Docker-Compose curl -L "https://github.com/docker/compose/releases/download/v2.20…