当前位置: 首页 > news >正文

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

主要功能实现 

  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>

相关文章:

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

主要功能实现 完成发生时间选择功能&#xff0c;用户可以通过日期选择器选择事件发生的时间。实现事件类型选择功能&#xff0c;用户可以通过下拉选择框选择事件的类型。添加子养殖场编号输入框&#xff0c;用户可以输入与事件相关的子养殖场编号。完成事件描述输入功能&#…...

面试题 17.16.按摩师

​​题目来源&#xff1a; leetcode题目&#xff0c;网址&#xff1a;面试题 17.16. 按摩师 - 力扣&#xff08;LeetCode&#xff09; 解题思路&#xff1a; 动态规划&#xff0c;对于第 i 个预约&#xff0c;若接下&#xff0c;其最大值为不接上一个时的最大值与当前值之和&a…...

vscode里配置C#环境并运行.cs文件

vscode是一款跨平台、轻量级、开源的IDE, 支持C、C、Java、C#、R、Python、Go、Nodejs等多种语言的开发和调试。下面介绍在vscode里配置C#环境。这里以配置.Net SDK v5.0&#xff0c;语言版本为C#9.0&#xff0c;对应的开发平台为VS2019&#xff0c;作为案例说明。 1、下载vsc…...

uniapp配置添加阿里巴巴图标icon流程步骤

文章目录 下载复制文件到项目文件夹里项目配置目录结构显示图标 下载 阿里巴巴icon官网 https://www.iconfont.cn/ 复制文件到项目文件夹里 项目配置目录结构 显示图标...

大模型基础02:GPT家族与提示学习

大模型基础&#xff1a;GPT 家族与提示学习 从 GPT-1 到 GPT-3.5 GPT(Generative Pre-trained Transformer)是 Google 于2018年提出的一种基于 Transformer 的预训练语言模型。它标志着自然语言处理领域从 RNN 时代进入 Transformer 时代。GPT 的发展历史和技术特点如下: GP…...

算法基础课——基础算法(模板整理)

快速排序 快速排序 #include <iostream> #include <algorithm> using namespace std; int n; int s[100000]; int main() {cin>>n;for(int i0;i<n;i){cin>>s[i];}sort(s,sn);for(int i0;i<n;i){cout<<s[i]<<" ";}cout<…...

如何解决使用npm出现Cannot find module ‘XXX\node_modules\npm\bin\npm-cli.js’错误

遇到问题&#xff1a;用npm下载组件时出现Cannot find module ‘D&#xff1a;software\node_modules\npm\bin\npm-cli.js’ 问题&#xff0c;导致下载组件不能完成。 解决方法&#xff1a;下载缺少的npm文件即可解决放到指定node_modules目录下即可解决。 分析问题&#xff1…...

【华为认证数通高级证书实验-分享篇2】

实验拓扑 注&#xff1a;代码块为各交换机路由器中的配置命令 配置拓扑文件 实验要求 实现全网通 实验配置 SW3 [SW3]v b 10 20 [SW3]int e0/0/1 [SW3-Ethernet0/0/1]po link-t a [SW3-Ethernet0/0/1]po de v 10 [SW3-Ethernet0/0/1]int e0/0/2 [SW3-Ethernet0/0/2]po li…...

ui设计需要学编程吗难不难学习 优漫动游

ui设计需要学编程吗难不难学习&#xff0c;对于基础小白来说学习编程确实有一定难度&#xff0c;所以很想知道零基础学习ui设计需要学编程吗&#xff0c;需不需要写代码呢&#xff0c;这些问题小编来简单的分析分析解决零基础小白的一些困惑&#xff0c;希望对你有帮助。 ui…...

什么是线程优先级?Java中的线程优先级是如何定义和使用的?

线程优先级是指在多线程环境中&#xff0c;通过给线程分配不同的优先级来决定线程获取CPU时间片的顺序。优先级较高的线程会更有可能被调度执行&#xff0c;而优先级较低的线程可能会获得较少的CPU时间。 在Java中&#xff0c;线程优先级是通过整数表示的&#xff0c;范围从1到…...

无涯教程-TensorFlow - XOR实现

在本章中&#xff0c;无涯教程将学习使用TensorFlow的XOR实现&#xff0c;在TensorFlow中开始XOR实施之前&#xff0c;看一下XOR表值。这将帮助了解加密和解密过程。 A B A XOR B 0 0 0 0 1 1 1 0 1 1 1 0 XOR密码加密方法基本上用于加密&#xff0c;即通过生成与适当密钥匹配…...

计算机组成与设计 Patterson Hennessy 笔记(二)MIPS 指令集

计算机的语言&#xff1a;汇编指令集 也就是指令集。本书主要介绍 MIPS 指令集。 汇编指令 算数运算&#xff1a; add a,b,c # abc sub a,b,c # ab-cMIPS 汇编的注释是 # 号。 由于MIPS中寄存器大小32位&#xff0c;是基本访问单位&#xff0c;因此也被称为一个字 word。M…...

【设计模式】模板方法模式(Template Method Pattern)

23种设计模式之模板方法模式&#xff08;Template Method Pattern&#xff09; 基本概念 模板方法模式是一种行为型设计模式&#xff0c;它定义了一个算法骨架&#xff0c;将某些算法步骤的实现延迟到子类中。 这样可以使得算法的框架不被修改&#xff0c;但是具体的实现可以…...

【潮州饶平】联想 IBM x3850 x6 io主板故障 服务器维修

哈喽 最近比较忙也好久没有更新服务器维修案例了&#xff0c;这次分享一例潮州市饶平县某企业工厂一台IBM System x3850 x6服务器亮黄灯告警且无法正常开机的服务器故障问题。潮州饶平ibm服务器维修IO主板故障问题 故障如下图所示&#xff1a; 故障服务器型号&#xff1a;IBM 或…...

【AIGC】 国内版聊天GPT

国内版聊天GPT 引言一、国内平台二、简单体验2.1 提问2.2 角色扮演2.3 总结画图 引言 ChatGPT是OpenAI发开的聊天程序&#xff0c;功能强大&#xff0c;可快速获取信息&#xff0c;节省用户时间和精力&#xff0c;提供个性化的服务。目前国产ChatGPT&#xff0c;比如文心一言&a…...

如何在Vue中进行单元测试?什么是Vue的模块化开发?

1、如何在Vue中进行单元测试&#xff1f; 在Vue中进行单元测试可以提高代码的可维护性和可读性&#xff0c;同时也能够帮助开发者更快地找到代码中的问题和潜在的错误。下面是一些在Vue中进行单元测试的步骤&#xff1a; 安装单元测试工具 首先需要安装一个单元测试工具&…...

Matlab编程示例3:Matlab求二次积分的编程示例

1.在MATLAB中&#xff0c;可以使用符号计算工具箱(Symbolic Math Toolbox)中的int函数来求解二次积分。 2.下面是一个简单的MATLAB程序示例&#xff0c;演示二次函数f (x,y) x^2 y^2&#xff0c;在x∈[0 1]和y∈[0 1]的积分区间上&#xff0c;计算积分结果&#xff1a; syms…...

【Linux】线程同步和死锁

目录 死锁 什么是死锁 构成死锁的四个必要条件 如何避免死锁 线程同步 同步的引入 同步的方式 条件变量 条件变量的使用 整体代码 死锁 什么是死锁 死锁是指在一组进程中的各个进程均占有不会释放的资源&#xff0c;但因互相申请被其他进程所占用不会释放 的资源而处…...

Matplotlib数据可视化(二)

目录 1.rc参数设置 1.1 lines.linestype取值 1.2 lines.marker参数的取值 1.3 绘图中文预设 1.4 示例 1.4.1 示例1 1.4.2 示例2 1.rc参数设置 利用matplotlib绘图时为了让绘制出的图形更加好看&#xff0c;需要对参数进行设置rc参数设置。可以通过以下代码查看matplotli…...

图像去雨-雨线清除-图像处理-(计算机作业附代码)

背景 多年来&#xff0c;图像去雨已经被广泛研究&#xff0c;使用传统方法和基于学习的方法。然而&#xff0c;传统方法如高斯混合模型和字典学习方法耗时&#xff0c;并且无法很好地处理受到严重雨滴影响的图像块。 算法 通过考虑雨滴条状特性和角度分布&#xff0c;这个问…...

conda相比python好处

Conda 作为 Python 的环境和包管理工具&#xff0c;相比原生 Python 生态&#xff08;如 pip 虚拟环境&#xff09;有许多独特优势&#xff0c;尤其在多项目管理、依赖处理和跨平台兼容性等方面表现更优。以下是 Conda 的核心好处&#xff1a; 一、一站式环境管理&#xff1a…...

将对透视变换后的图像使用Otsu进行阈值化,来分离黑色和白色像素。这句话中的Otsu是什么意思?

Otsu 是一种自动阈值化方法&#xff0c;用于将图像分割为前景和背景。它通过最小化图像的类内方差或等价地最大化类间方差来选择最佳阈值。这种方法特别适用于图像的二值化处理&#xff0c;能够自动确定一个阈值&#xff0c;将图像中的像素分为黑色和白色两类。 Otsu 方法的原…...

postgresql|数据库|只读用户的创建和删除(备忘)

CREATE USER read_only WITH PASSWORD 密码 -- 连接到xxx数据库 \c xxx -- 授予对xxx数据库的只读权限 GRANT CONNECT ON DATABASE xxx TO read_only; GRANT USAGE ON SCHEMA public TO read_only; GRANT SELECT ON ALL TABLES IN SCHEMA public TO read_only; GRANT EXECUTE O…...

微服务商城-商品微服务

数据表 CREATE TABLE product (id bigint(20) UNSIGNED NOT NULL AUTO_INCREMENT COMMENT 商品id,cateid smallint(6) UNSIGNED NOT NULL DEFAULT 0 COMMENT 类别Id,name varchar(100) NOT NULL DEFAULT COMMENT 商品名称,subtitle varchar(200) NOT NULL DEFAULT COMMENT 商…...

代理篇12|深入理解 Vite中的Proxy接口代理配置

在前端开发中,常常会遇到 跨域请求接口 的情况。为了解决这个问题,Vite 和 Webpack 都提供了 proxy 代理功能,用于将本地开发请求转发到后端服务器。 什么是代理(proxy)? 代理是在开发过程中,前端项目通过开发服务器,将指定的请求“转发”到真实的后端服务器,从而绕…...

IP如何挑?2025年海外专线IP如何购买?

你花了时间和预算买了IP&#xff0c;结果IP质量不佳&#xff0c;项目效率低下不说&#xff0c;还可能带来莫名的网络问题&#xff0c;是不是太闹心了&#xff1f;尤其是在面对海外专线IP时&#xff0c;到底怎么才能买到适合自己的呢&#xff1f;所以&#xff0c;挑IP绝对是个技…...

免费数学几何作图web平台

光锐软件免费数学工具&#xff0c;maths,数学制图&#xff0c;数学作图&#xff0c;几何作图&#xff0c;几何&#xff0c;AR开发,AR教育,增强现实,软件公司,XR,MR,VR,虚拟仿真,虚拟现实,混合现实,教育科技产品,职业模拟培训,高保真VR场景,结构互动课件,元宇宙http://xaglare.c…...

如何通过git命令查看项目连接的仓库地址?

要通过 Git 命令查看项目连接的仓库地址&#xff0c;您可以使用以下几种方法&#xff1a; 1. 查看所有远程仓库地址 使用 git remote -v 命令&#xff0c;它会显示项目中配置的所有远程仓库及其对应的 URL&#xff1a; git remote -v输出示例&#xff1a; origin https://…...

算法250609 高精度

加法 #include<stdio.h> #include<iostream> #include<string.h> #include<math.h> #include<algorithm> using namespace std; char input1[205]; char input2[205]; int main(){while(scanf("%s%s",input1,input2)!EOF){int a[205]…...

Python第七周作业

Python第七周作业 文章目录 Python第七周作业 1.使用open以只读模式打开文件data.txt&#xff0c;并逐行打印内容 2.使用pathlib模块获取当前脚本的绝对路径&#xff0c;并创建logs目录&#xff08;若不存在&#xff09; 3.递归遍历目录data&#xff0c;输出所有.csv文件的路径…...