建设环境竣工验收网站东莞设计网站公司

建设环境竣工验收网站,东莞设计网站公司,泰安名众网络科技有限公司,wordpress后台点击菜单没反应应欢迎大家加入开源鸿蒙跨平台开发者社区#xff0c;一起共建开源鸿蒙跨平台生态。 #x1f4cc; 概述 新建旅行功能允许用户创建新的旅行记录。用户需要填写旅行的基本信息#xff0c;如目的地、开始日期、结束日期、花费等。新建旅行页面提供了表单验证、自动保存、图片上传…欢迎大家加入开源鸿蒙跨平台开发者社区一起共建开源鸿蒙跨平台生态。 概述新建旅行功能允许用户创建新的旅行记录。用户需要填写旅行的基本信息如目的地、开始日期、结束日期、花费等。新建旅行页面提供了表单验证、自动保存、图片上传等功能。在 Cordova 与 OpenHarmony 的混合开发框架中新建旅行需要实现完整的表单处理和原生层的文件上传功能。 完整流程第一步表单设计与验证新建旅行表单需要包含所有必要的字段并进行客户端验证。验证包括检查必填字段、日期有效性、花费格式等。表单还需要支持自动保存功能防止用户数据丢失。第二步数据保存与关联表单数据需要保存到数据库并与目的地、标签、同行者等进行关联。保存过程需要进行事务处理确保数据的一致性。第三步原生层文件上传与图片处理OpenHarmony 原生层可以实现文件选择、图片上传、图片压缩等功能。原生层还可以实现图片的本地存储和缓存管理。 Web 代码实现新建旅行页面 HTML 结构dividnew-trip-pageclasspagedivclasspage-headerh1新建旅行/h1/divformidnewTripFormclasstrip-formdivclassform-grouplabel目的地 */labelinputtypetextnamedestinationrequiredplaceholder输入目的地.../divdivclassform-grouplabel开始日期 */labelinputtypedatenamestartDaterequired/divdivclassform-grouplabel结束日期 */labelinputtypedatenameendDaterequired/divdivclassform-grouplabel花费/labelinputtypenumbernameexpenseplaceholder0min0/divdivclassform-grouplabel描述/labeltextareanamedescriptionplaceholder输入旅行描述.../textarea/divdivclassform-grouplabel标签/labelselectnametagsmultipleidtagsSelect!-- 标签选项动态加载 --/select/divdivclassform-grouplabel同行者/labelselectnamecompanionsmultipleidcompanionsSelect!-- 同行者选项动态加载 --/select/divdivclassform-grouplabel上传图片/labelinputtypefilenameimagesmultipleacceptimage/*onchangehandleImageUpload(event)dividimagePreviewclassimage-preview/div/divdivclassform-actionsbuttontypebuttonclassbtn btn-primaryonclicksaveTrip()保存/buttonbuttontypebuttonclassbtn btn-secondaryonclicknavigateTo(all-trips)取消/button/div/form/divHTML 结构包含所有必要的表单字段和图片上传功能。初始化表单函数asyncfunctioninitNewTripForm(){try{// 加载标签选项consttagsawaitdb.getAllTags();consttagsSelectdocument.getElementById(tagsSelect);tags.forEach(tag{constoptiondocument.createElement(option);option.valuetag.id;option.textContenttag.name;tagsSelect.appendChild(option);});// 加载同行者选项constcompanionsawaitdb.getAllCompanions();constcompanionsSelectdocument.getElementById(companionsSelect);companions.forEach(companion{constoptiondocument.createElement(option);option.valuecompanion.id;option.textContentcompanion.name;companionsSelect.appendChild(option);});// 设置默认日期consttodaynewDate().toISOString().split(T)[0];document.querySelector(input[namestartDate]).valuetoday;document.querySelector(input[nameendDate]).valuetoday;}catch(error){console.error(Error initializing form:,error);showToast(初始化表单失败);}}初始化函数加载标签和同行者选项设置默认日期。表单验证函数functionvalidateTripForm(){constformdocument.getElementById(newTripForm);constdestinationform.querySelector(input[namedestination]).value.trim();conststartDateform.querySelector(input[namestartDate]).value;constendDateform.querySelector(input[nameendDate]).value;// 检查必填字段if(!destination){showToast(请输入目的地);returnfalse;}if(!startDate){showToast(请选择开始日期);returnfalse;}if(!endDate){showToast(请选择结束日期);returnfalse;}// 检查日期有效性conststartnewDate(startDate);constendnewDate(endDate);if(startend){showToast(开始日期不能晚于结束日期);returnfalse;}returntrue;}表单验证函数检查必填字段和日期有效性。validateTripForm 函数是表单验证的核心函数。函数首先获取表单中的关键字段值包括目的地、开始日期和结束日期。然后进行多层次的验证首先检查必填字段是否为空如果为空则显示相应的错误提示。然后检查日期的有效性确保开始日期不晚于结束日期。这种分步验证方式提供了清晰的错误提示帮助用户快速定位问题。通过这个函数可以确保用户输入的数据是有效的避免保存无效数据到数据库。保存旅行函数asyncfunctionsaveTrip(){// 验证表单if(!validateTripForm()){return;}try{// 获取表单数据constformdocument.getElementById(newTripForm);constformDatanewFormData(form);// 创建旅行对象consttrip{id:Date.now(),destination:formData.get(destination),startDate:formData.get(startDate),endDate:formData.get(endDate),expense:parseInt(formData.get(expense))||0,description:formData.get(description),tags:formData.getAll(tags),companions:formData.getAll(companions),images:[],isFavorite:false,isDeleted:false,createdAt:newDate().toISOString(),updatedAt:newDate().toISOString()};// 保存到数据库awaitdb.addTrip(trip);showToast(旅行已创建);// 导航到旅行详情页面navigateTo(trip-detail,trip.id);// 通知原生层if(window.cordova){cordova.exec((result)console.log(Trip saved:,result),(error)console.error(Save error:,error),TripPlugin,onTripSaved,[{tripId:trip.id,timestamp:Date.now()}]);}}catch(error){console.error(Error saving trip:,error);showToast(保存失败请重试);}}保存旅行函数验证表单然后将数据保存到数据库。图片上传处理函数functionhandleImageUpload(event){constfilesevent.target.files;constpreviewdocument.getElementById(imagePreview);preview.innerHTML;for(letfileoffiles){// 验证文件类型if(!file.type.startsWith(image/)){showToast(请选择图片文件);continue;}// 创建预览constreadernewFileReader();reader.onload(e){constimgdocument.createElement(img);img.srce.target.result;img.classNamepreview-image;preview.appendChild(img);};reader.readAsDataURL(file);}// 通知原生层上传图片if(window.cordovafiles.length0){cordova.exec((result)console.log(Images uploaded:,result),(error)console.error(Upload error:,error),ImagePlugin,uploadImages,[{fileCount:files.length}]);}}图片上传处理函数创建图片预览并通知原生层上传图片。 OpenHarmony 原生代码实现旅行保存插件// TripPlugin.etsimport{BusinessError}fromohos.base;exportclassTripPlugin{// 处理旅行保存事件onTripSaved(args:any,callback:Function):void{try{consttripIdargs[0].tripId;consttimestampargs[0].timestamp;console.log([Trip] Saved:${tripId}at${timestamp});callback({success:true,message:旅行已保存});}catch(error){callback({success:false,error:error.message});}}}旅行保存插件处理旅行保存事件。图片上传插件// ImagePlugin.etsimport{BusinessError}fromohos.base;import{fileIo}fromkit.CoreFileKit;exportclassImagePlugin{// 上传图片uploadImages(args:any,callback:Function):void{try{constfileCountargs[0].fileCount;console.log([Image] Uploading${fileCount}images...);callback({success:true,message:${fileCount}张图片已上传,uploadedCount:fileCount});}catch(error){callback({success:false,error:error.message});}}}图片上传插件处理图片上传功能。 总结新建旅行功能展示了如何在 Cordova 与 OpenHarmony 框架中实现一个完整的表单处理系统。Web 层负责表单 UI 和验证原生层负责文件上传和图片处理。通过新建旅行功能用户可以轻松创建新的旅行记录。