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>
相关推荐
H5开发新纪元8 分钟前
Vue 项目中 Loading 状态管理及页面切换 Bug 分析
前端·vue.js
icefiresong242 小时前
如何让 Vue 组件自动清理 EventBus 监听器?告别内存泄漏!
vue.js
tjh00014 小时前
vue3+TS 手动实现表格滚动
前端·javascript·vue.js
章若楠圈外男友4 小时前
修改了Element UI中组件的样式,打包后样式丢失
前端·vue.js
thigh_d4 小时前
uniapp 安卓离线本地打包,Android Studio生成apk包
android·uni-app·android studio
珎珎啊5 小时前
uniapp+vue3移动端实现输入验证码
前端·javascript·uni-app
前端无涯5 小时前
uniapp跨平台开发---switchTab:fail page `/undefined` is not found
uni-app
老李不敲代码5 小时前
榕壹云预约咨询系统:基于ThinkPHP+MySQL+UniApp打造的灵活预约小程序解决方案
mysql·微信小程序·小程序·uni-app·php
86Eric5 小时前
Vue 中 使用 Mixins 解决 多页面共用相同组件的相关问题
前端·javascript·vue.js·mixins·公用组件
fakaifa5 小时前
【最新版】西陆健身系统源码全开源+uniapp前端
前端·小程序·uni-app·开源·php·约课小程序·健身小程序