1. Toy模板网首页
  2. > Toy博客

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

9月前 作者：Ye-Maolin 分类：Toy博客 阅读(60) 违法举报

这篇具有很好参考价值的文章主要介绍了uni-app的Vue.js实现微信小程序的紧急事件登记页面功能。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

主要功能实现 

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

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

未加样式版本

uni-app的Vue.js实现微信小程序的紧急事件登记页面功能,腾讯-智慧养殖-前端组,uni-app,uni-app,vue.js

稍微加了点样式的样子

uni-app的Vue.js实现微信小程序的紧急事件登记页面功能,腾讯-智慧养殖-前端组,uni-app,uni-app,vue.js

这是简陋的代码

<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-app的Vue.js实现微信小程序的紧急事件登记页面功能,腾讯-智慧养殖-前端组,uni-app,uni-app,vue.jsuni-app的Vue.js实现微信小程序的紧急事件登记页面功能,腾讯-智慧养殖-前端组,uni-app,uni-app,vue.jsuni-app的Vue.js实现微信小程序的紧急事件登记页面功能,腾讯-智慧养殖-前端组,uni-app,uni-app,vue.js

 uni-app的Vue.js实现微信小程序的紧急事件登记页面功能,腾讯-智慧养殖-前端组,uni-app,uni-app,vue.js

 主要就是样式通过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 placeholder="请选择事件类型" :localdata="kind" :value="kindValue" @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="最多选择九张图片"></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" @click="submit">提交</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				date: this.getDate(),
				kindValue: 0,
				kind: [{
						value: 0,
						text: '养殖物异常'
					},
					{
						value: 1,
						text: '设备异常'
					},
					{
						value: 2,
						text: '偷盗'
					},
					{
						value: 3,
						text: '野生动物'
					},
					{
						value: 4,
						text: '灾害'
					},
					{
						value: 5,
						text: '其他异常'
					}
				],
				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.kindValue = e;
			},
			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;
			},
			submit(){
				uni.showModal({
					content:"紧急事件登记提交成功",
					title:"提示",
					showCancel:false,
					success: (response) => {
						if(response.confirm){
							uni.switchTab({
								url:'/pages/WorkOrder/WorkOrder'
							})
						}
					}
				})
			}
		}
	}
</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: 30rpx;
	}
</style>

后面加上了和后端对接的请求发送，以及修复了一些bug的改版代码，后端也是我写的对接起来十分轻松 文章来源地址https://www.toymoban.com/news/detail-659682.html

<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 placeholder="请选择事件类型" :localdata="kind" :value="kindValue"
			@change="bindKindChange"></uni-data-select>

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

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

		<view class="column">5. 上传图片</view>
		<uni-file-picker title="最多选择九张图片" ref="files" @select="bindSelect" @delete="bindDelete"></uni-file-picker>

		<view class="column">6. 上传视频</view>
		<uni-file-picker file-mediatype="video" @select="bindVideoSelect" @delete="bindVideoDelete"
			limit="1"></uni-file-picker>

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

		<view class="column">8. 是否已经解决了</view>
		<uni-data-checkbox :value="doneValue" :localdata="done" @change="bindDoneChange"></uni-data-checkbox>

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

<script>
	export default {
		data() {
			return {
				date: '',
				kindValue: 0,
				kind: [{
						value: 0,
						text: '养殖物异常'
					},
					{
						value: 1,
						text: '设备异常'
					},
					{
						value: 2,
						text: '偷盗'
					},
					{
						value: 3,
						text: '野生动物'
					},
					{
						value: 4,
						text: '灾害'
					},
					{
						value: 5,
						text: '其他异常'
					}
				],
				farmCode: "未填写",
				detail: '未填写',
				images: '',
				imagesPaths: [],
				video: '',
				videoPath: '',
				result: "未填写",
				doneValue: 0,
				done: [{
					text: '未解决',
					value: 0
				}, {
					text: '已解决',
					value: 1
				}]
			}
		},
		computed: {
			endDate() {
				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}`;
			}
		},
		methods: {
			bindDateChange: function(e) {
				this.date = e;
			},
			bindKindChange: function(e) {
				this.kindValue = e;
			},
			bindFarmCode: function(e) {
				this.farmCode = e;
			},
			bindTextDetail: function(e) {
				this.detail = e;
			},
			bindResult: function(e) {
				this.result = e;
			},
			bindDoneChange: function(e) {
				this.doneValue = e.detail.value;
			},
			submit() {
				if (this.imagesPaths.length != 0) {
					var uploadTask = uni.uploadFile({
						url: 'http://192.168.6.128:8080', // 上传图片的接口地址
						files: this.imagesPaths,
						success: (response) => {
							this.images = response.data;
						},
						fail: (response) => {
							console.log(response)
						}
					})
					uploadTask.onProgressUpdate((response) => {
						// console.log(response.progress)
					})
				}
				if (this.videoPath != '') {
					var uploadTask = uni.uploadFile({
						url: 'http://192.168.6.128:8080', // 上传视频的接口地址
						filePath: this.videoPath,
						name: 'file',
						success: (response) => {
							this.video = response.data;
						},
						fail: (response) => {
							console.log(response)
						}
					})
					uploadTask.onProgressUpdate((response) => {
						// console.log(response.progress)
					})
				}
				this.sendRequstToServer();
			},
			bindSelect(e) {
				for (let file of e.tempFiles) {
					this.imagesPaths.push({
						uri: file.path
					})
				}
			},
			bindDelete(e) {
				this.imagesPaths.splice(this.imagesPaths.indexOf({
					uri: e.tempFilePath
				}), 1)
			},
			bindVideoSelect(e) {
				this.videoPath = e.tempFilePaths[0] // 限制一个视频
			},
			bindVideoDelete(e) {
				this.videoPath = ''
			},
			sendRequstToServer() {
				uni.request({
					url: 'http://192.168.6.128:8080', // 紧急事件登记的接口地址
					method: 'POST',
					data: {
						date: this.date,
						kind: this.kind[this.kindValue].text,
						farmCode: this.farmCode,
						detail: this.detail,
						images: this.images,
						video: this.video,
						result: this.result,
						done: this.doneValue==1
					},
					header: {
						'content-type': 'application/json' // 自定义请求头信息
					},
					success: (response) => {
						if (response.statusCode == 200) {
							uni.showToast({
								title: '提交成功'
							});
							setTimeout(() => {
								uni.switchTab({
									url: '/pages/WorkOrder/WorkOrder',
								})
							}, 2000)
						} else {
							console.log('提交失败：', response);
							uni.showToast({
								title: '提交失败',
								icon: 'error'
							})
						}
					},
					fail: (response) => {
						console.log('请求后端失败：', response);
						uni.showToast({
							title: '提交失败',
							icon: 'error'
						})
					}
				})
			}
		}
	}
</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: 30rpx;
	}
</style>

到了这里，关于uni-app的Vue.js实现微信小程序的紧急事件登记页面功能的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处： 如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：
领支付宝红包 赞助服务器费用

相关文章

  • WebStorm开发uni-app ,用vue2实现手机APP(apk) + 微信小程序多端项目开发方案

    WebStorm开发uni-app ,用vue2实现手机APP(apk) + 微信小程序多端项目开发方案

    我们主要分析了如下小程序开发框架，主要包括： 框架 技术栈 案例 微信小程序 支付宝小程序 百度小程序 头条小程序 H5 App uni-app Vue 丰富 ⭕ ⭕️ ⭕️ ⭕ ⭕️ ⭕ Taro React 丰富 ⭕ ⭕ ⭕ ⭕ ⭕ ⭕ wepy Vue 丰富 ⭕ ❌ ❌ ❌ ❌ ❌ mpvue Vue 丰富 ⭕ ❌ ❌ ❌ ⭕️ ❌  首先，就要排

    2024年02月08日
    浏览(81)

  • uni-app+vue3微信小程序切换主题皮肤

    思路来源： https://blog.csdn.net/qq_42611074/article/details/128236458 引用store做全局css变量替换； store.js 添加全局的监听函数 common/themeMixin.js main.js 给要切换的页面加上css变量 login.vue 升级版 在base.css写好主题配色； 引用store做全局css变量替换； store.js 添加全局的监听函数 common/themeM

    2024年02月12日
    浏览(65)

  • uni-app：vue3 + uni-app 在微信小程序中无法使用app.component全局注册组件

    按上文中的代码执行后，会发现在微信小程序开发中全局注册的组件是无法显示的，这是uniapp的一个未解决bug， 在uniapp中出了可以通过vue实例的component方法注册全局组件外，uniapp支持另一种全局注册的方式，就是通过 easycom 扫描注册，步骤如下 easycom 的扫描流程是：通过代码

    2024年02月16日
    浏览(98)
  • uni-app 微信小程序vendor.js 过大的处理方式和分包优化

    uni-app 微信小程序vendor.js 过大的处理方式和分包优化

    小程序工具提示vendor.js过大，已经跳过es6向es5转换。这个转换问题本身不用理会，因为vendor.js已经是es5的了。 关于体积控制，参考如下： 使用运行时代码压缩 HBuilderX创建的项目勾选运行–运行到小程序模拟器–运行时是否压缩代码 cli创建的项目可以在 package.json 中添加参数

    2024年02月11日
    浏览(76)
  • uni-app Vue3实现一个酷炫的多功能音乐播放器支持微信小程序后台播放

    uni-app Vue3实现一个酷炫的多功能音乐播放器支持微信小程序后台播放

    本文存在多张gif演示图，建议在 wifi 环境下阅读📖 最近在做网易云音乐微信小程序开源项目的时候，关于 播放器功能 参考了一些成熟的微信小程序，如 网易云音乐小程序 和 QQ音乐小程序 ，但是发现这些 小程序端 的播放器相对于 APP端 来说较简单，只支持一些基础功能，

    2024年01月24日
    浏览(72)

  • 【uni-app微信小程序】实现支付功能

    实现微信支付功能需要在小程序后台配置支付相关信息，并且在前端代码中调用微信支付API进行支付操作。好的， uni-app微信小程序实现支付功能整体流程 大致如下： 注册微信公众平台，并完成开发者资质认证； 在微信商户平台注册商户账号，并完成商户资质认证； 在商户

    2024年02月13日
    浏览(99)
  • uni-app微信小程序分享微信好友与分享到朋友圈功能【vue3+ts+uni-app+vite】

    uni-app微信小程序分享微信好友与分享到朋友圈功能【vue3+ts+uni-app+vite】

    微信小程序开发结束之后，点击右上角三个点显示： 1、创建share.ts文件 2、全局使用, 在 main.ts 里面 添加全局的 mixin 这样配置结束之后整个小程序所有页面点击右上角转发分享都走的这个文件，如果需要单个页面可以转发，可以看第三点 3、在需要的页面进行调用就行啦 a.

    2024年02月14日
    浏览(76)
  • 摇骰子设计与实现（uni-app微信小程序）

    摇骰子设计与实现（uni-app微信小程序）

    手机摇一摇可以摇骰子，上划可查看结果，震动加声音等功能。 本章底部会贴出所有代码 ，图片资源以及音频资源很简单，自己找一下就行了。 已经上线小程序，可以扫码直接预览效果。 新建一个项目，将已经准备好的资源，放入到项目中。下面是需要资源图片的示例。

    2024年02月12日
    浏览(78)
  • 在 WebStorm 中开发 uni-app - 用vue2实现手机APP(apk) + 微信小程序项目开发方案 webstorm开发的uniapp + hbuilderx进行app 小程序打包

    在 WebStorm 中开发 uni-app - 用vue2实现手机APP(apk) + 微信小程序项目开发方案 webstorm开发的uniapp + hbuilderx进行app 小程序打包

    我们主要分析了如下小程序开发框架，主要包括： 框架 技术栈 案例 微信小程序 支付宝小程序 百度小程序 头条小程序 H5 App uni-app Vue 丰富 ⭕ ⭕️ ⭕️ ⭕ ⭕️ ⭕ Taro React 丰富 ⭕ ⭕ ⭕ ⭕ ⭕ ⭕ wepy Vue 丰富 ⭕ ❌ ❌ ❌ ❌ ❌ mpvue Vue 丰富 ⭕ ❌ ❌ ❌ ⭕️ ❌  首先，就要排

    2024年02月05日
    浏览(97)
  • 在 WebStorm 中开发 uni-app - 用vue2实现手机APP(apk) + 微信小程序项目开发方案 webstorm开发的uniapp + hbuilderx进行app 小程序打包

    在 WebStorm 中开发 uni-app - 用vue2实现手机APP(apk) + 微信小程序项目开发方案 webstorm开发的uniapp + hbuilderx进行app 小程序打包

    我们主要分析了如下小程序开发框架，主要包括： 框架 技术栈 案例 微信小程序 支付宝小程序 百度小程序 头条小程序 H5 App uni-app Vue 丰富 ⭕ ⭕️ ⭕️ ⭕ ⭕️ ⭕ Taro React 丰富 ⭕ ⭕ ⭕ ⭕ ⭕ ⭕ wepy Vue 丰富 ⭕ ❌ ❌ ❌ ❌ ❌ mpvue Vue 丰富 ⭕ ❌ ❌ ❌ ⭕️ ❌  首先，就要排

    2023年04月15日
    浏览(81)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包，优惠每天领

二维码1

领取红包

二维码2

领红包