uni-app的Vue.js实现微信小程序的紧急事件登记页面功能
主要功能实现
- 完成发生时间选择功能，用户可以通过日期选择器选择事件发生的时间。
- 实现事件类型选择功能，用户可以通过下拉选择框选择事件的类型。
- 添加子养殖场编号输入框，用户可以输入与事件相关的子养殖场编号。
- 完成事件描述输入功能，用户可以通过文本输入框描述事件的详细情况。
- 增加上传图片功能，用户可以选择并上传相关图片。
- 增加上传视频功能，用户可以选择并上传相关视频。
- 实现处理结果输入功能，用户可以通过文本输入框记录事件的处理结果。
- 添加是否已解决选择功能，用户可以通过单选按钮选择事件是否已经解决。
大概有两个样子的版本，一个是用内置组件完成的，另一个是用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>