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

Ye-Maolin2023-08-20 19:48

主要功能实现

  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>
相关推荐
ZBY5203139 分钟前
【Vue】 npm install amap-js-api-loader指南
javascript·vue.js·npm
计算机毕设指导61 小时前
基于 SpringBoot 的作业管理系统【附源码】
java·vue.js·spring boot·后端·mysql·spring·intellij-idea
木子02042 小时前
前端VUE项目启动方式
前端·javascript·vue.js
运维-大白同学3 小时前
将django+vue项目发布部署到服务器
服务器·vue.js·django
星星会笑滴4 小时前
vue+node+Express+xlsx+emements-plus实现导入excel,并且将数据保存到数据库
vue.js·excel·express
Backstroke fish5 小时前
Token刷新机制
前端·javascript·vue.js·typescript·vue
临枫5415 小时前
Nuxt3封装网络请求 useFetch & $fetch
前端·javascript·vue.js·typescript
RAY_CHEN.5 小时前
vue3 pinia 中actions修改状态不生效
vue.js·typescript·npm
酷酷的威朗普5 小时前
医院绩效考核系统
javascript·css·vue.js·typescript·node.js·echarts·html5
_Legend_King5 小时前
vue3 + elementPlus 日期时间选择器禁用未来及过去时间
javascript·vue.js·elementui
热门推荐
01(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明02PyTorch机器学习实现液态神经网络03【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总04玄机平台应急响应—webshell查杀05Coze扣子平台完整体验和实践（附国内和国际版对比）06Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO07【目标跟踪】相机运动补偿08Unity中PICO实现 隔空取物 和 接触抓取物体09RAG 实践- Ollama+RagFlow 部署本地知识库10怎样让音频速度变慢？请跟随以下方法进行操作