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>
相关推荐
阿伟来咯~4 分钟前
一些 uniapp相关bug
uni-app·bug
嚣张农民1 小时前
推荐3个实用的760°全景框架
前端·vue.js·程序员
落魄小二2 小时前
el-table 表格索引不展示问题
javascript·vue.js·elementui
neter.asia2 小时前
vue中如何关闭eslint检测?
前端·javascript·vue.js
十一吖i2 小时前
前端将后端返回的文件下载到本地
vue.js·elementplus
光影少年2 小时前
vue2与vue3的全局通信插件,如何实现自定义的插件
前端·javascript·vue.js
熊的猫3 小时前
JS 中的类型 & 类型判断 & 类型转换
前端·javascript·vue.js·chrome·react.js·前端框架·node.js
瑶琴AI前端4 小时前
uniapp组件实现省市区三级联动选择
java·前端·uni-app
mosen8684 小时前
Uniapp去除顶部导航栏-小程序、H5、APP适用
vue.js·微信小程序·小程序·uni-app·uniapp
别拿曾经看以后~5 小时前
【el-form】记一例好用的el-input输入框回车调接口和el-button按钮防重点击
javascript·vue.js·elementui