网页下载网站,一份完整的营销策划书,wordpress中国能用吗,宁波 seo整体优化主要功能实现 完成发生时间选择功能#xff0c;用户可以通过日期选择器选择事件发生的时间。实现事件类型选择功能#xff0c;用户可以通过下拉选择框选择事件的类型。添加子养殖场编号输入框#xff0c;用户可以输入与事件相关的子养殖场编号。完成事件描述输入功能#…主要功能实现 完成发生时间选择功能用户可以通过日期选择器选择事件发生的时间。实现事件类型选择功能用户可以通过下拉选择框选择事件的类型。添加子养殖场编号输入框用户可以输入与事件相关的子养殖场编号。完成事件描述输入功能用户可以通过文本输入框描述事件的详细情况。增加上传图片功能用户可以选择并上传相关图片。增加上传视频功能用户可以选择并上传相关视频。实现处理结果输入功能用户可以通过文本输入框记录事件的处理结果。添加是否已解决选择功能用户可以通过单选按钮选择事件是否已经解决。 大概有两个样子的版本一个是用内置组件完成的另一个是用uni-ui扩展组件完成的都在下面
未加样式版本 稍微加了点样式的样子 这是简陋的代码
templateview classmainCSSview classcolumn1. 发生时间/viewpicker classinput modedate :endendDate changebindDateChangeview{{date}}/view/pickerview classcolumn2. 事件类型/viewpicker classinput :rangekind :valuekindIndex changebingKindChangeview{{kind[kindIndex]}}/view/pickerview classcolumn3. 子养殖场编号/viewinput classinput placeholder二号区③ confirmbindFarmCode/view classcolumn4. 事件描述/viewtextarea classinput confirmbindTextDetail placeholder请输入/textareaview classcolumn5. 上传图片/viewview v-for(imageName, index) in imageNames :keyindextext{{imageName}}/text/viewbutton typeprimary sizemini clickloadImage选择图片/buttonview classcolumn6. 上传视频/viewview v-for(videoName, index) in videoNames :keyindextext{{videoName}}/text/viewbutton typeprimary sizemini clickloadVideo选择视频/buttonview classcolumn7. 处理结果/viewtextarea classinput placeholder是如何处理的 confirmbindResult/textareaview classcolumn8. 是否已经解决了/viewradio-group changebindDoneChangelabelradio valuefalse checkedchecked未解决/radioradio valuetrue已解决/radio/label/radio-groupbutton classcolumn typeprimary提交/button/view
/templatescriptexport 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.farmCodee.detail.value;},bindTextDetail: function(e) {this.detail e.detail.value;},bindResult:function(e){this.resulte.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);}})}}}
/scriptstyle.mainCSS {margin: 30rpx;}.input{margin: 15rpx;border: 1rpx solid #cbd5de;width: 100%;}.column{margin: 30rpx;font-weight: bold;}
/style
然后是用了uni-ui扩展组件大改了一下样式 主要就是样式通过uni-ui组件完成
templateview classmainCSSview classcolumn1. 发生时间/viewuni-datetime-picker typedate :endendDate changebindDateChange/uni-datetime-pickerview classcolumn2. 事件类型/viewuni-data-select :localdatakind v-modelkindIndex changebindKindChange/uni-data-selectview classcolumn3. 子养殖场编号/viewuni-easyinput placeholder二号区③ confirmbindFarmCode/uni-easyinputview classcolumn4. 事件描述/viewuni-easyinput typetextarea autoHeight placeholder请描述紧急事件的具体情况 confirmbindTextDetail/uni-easyinputview classcolumn5. 上传图片/viewuni-file-picker title最多选择九张图片 :list-styleslistStyles/uni-file-pickerview classcolumn6. 上传视频/viewuni-file-picker file-mediatypevideo/uni-file-pickerview classcolumn7. 处理结果/viewuni-easyinput typetextarea autoHeight placeholder请描述事件是如何处理的 confirmbindResult/uni-easyinputview classcolumn8. 是否已经解决了/viewradio-group changebindDoneChangelabelradio valuefalse checkedchecked未解决/radioradio valuetrue已解决/radio/label/radio-groupbutton classcolumn typeprimary提交/button/view
/templatescriptexport 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;}}}
/scriptstyle langscss.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
