具有价值的建网站,网站建设发布,qq开放平台网站开发申请不通过的原因,中国菲律宾关系为什么不好一、报修管理
报修管理是为方便业主联系维修师傅的一个服务#xff0c;业主确认需要维修的房到后#xff0c;再指定维修项目以及上门的时间待待师傅联系上门服务即可。
1.1 在线报修
业主通过在线的方式填写报修的信息#xff0c;包括房屋信息、维修项目、联系电话、上门…一、报修管理
报修管理是为方便业主联系维修师傅的一个服务业主确认需要维修的房到后再指定维修项目以及上门的时间待待师傅联系上门服务即可。
1.1 在线报修
业主通过在线的方式填写报修的信息包括房屋信息、维修项目、联系电话、上门时间等信息。
在本页面中展示房屋列表和选择时间分别用到了 Vant 的组件 van-action-sheet、van-popup、van-datetimepicker 关于这3个组件详细的使用参见官方文档。
首先来获取提交表单所需要的数据要求用户必须保持登录状态。 获取房屋列表的数据 接口文档地址 // repair_pkg/pages/form/index.js
Page({data: {// ...houseList: []},// 获取房屋列表必须是通过审核的房屋async getHouseList() {// 调用接口const { code, data: houseList } await wx.http.get(/house)// 检测接口是否调用成功if (code ! 10000) return wx.utils.toast()// 渲染数据this.setData({ houseList })},
})通过监听 select 事件获取组件 van-action-sheet 组件数据事件对象中包含了用户选择的数据 van-action-sheetbind:closecloseHouseLayerbind:cancelcloseHouseLayerbind:selectselectHouseInforoundshow{{houseLayerVisible}}actions{{houseList}}cancel-text取消title选择报修房屋
/上述代码中 actions 属性用来指定组件 van-action-sheet 的列表数据 // repair_pkg/pages/form/index.js
Page({data: {houseId: ,houseName: },async getHouseList() {// ...},// 获用户选择的房屋selectHouseInfo(ev) {// 数据渲染this.setData({houseId: ev.detail.id,houseName: ev.detail.name,})},
})将选择的房屋数据展示到页面中通过 Vant 组件提供好的外部样式类来修改文字的颜色 van-cell-group border{{false}} title报修房屋van-cellvalue{{houseName || 请选择报修房屋}}value-class{{houseName active-cell}}bind:clickopenHouseLayeris-linkborder{{false}}/
/van-cell-group获取报修项目列表的数据调用接口获取到列表数据后通过 van-action-sheet 进行渲染。 接口文档地址 // repair_pkg/pages/form/index.js
Page({data: {repairItem: [],},onLoad() {// 获取维修项目this.getRepairItem()},// 获取维修项目async getRepairItem() {// 调用接口const { code, data: repairItem } await wx.http.get(/repairItem)// 检测接口是否调用成功if (code ! 10000) return wx.utils.toast()// 渲染数据this.setData({ repairItem })},
})与房屋列表一样监听 select 事件来获取 van-action-sheet 组件的数据通过事件对象来攻取 van-action-sheetbind:closecloseRepairLayerbind:cancelcloseRepairLayerbind:selectselectRepairItemInforoundshow{{repairLayerVisible}}actions{{repairItem}}cancel-text取消title选择维修项目
/// repair_pkg/pages/form/index.js
Page({data: {repairItemId: ,repairItemName: },onLoad() {// 获取维修项目this.getRepairItem()},// 获取待修改的报修信息async getRepairDetail(id) {// ...},// 获取用户选择的维修项目selectRepairItemInfo(ev) {this.setData({repairItemId: ev.detail.id,repairItemName: ev.detail.name,})},
})将用户选择的报修项目展示到页面中通过 Vant 提供的外部样式类来修改文件的颜色 van-celltitle-width100title维修项目value-class{{repairItemName active-cell}}bind:clickopenRepairLayervalue{{repairItemName || 请选择维修项目}}is-link
/指定上门维修时间监听 van-datepicker 组件的 confirm 事件获取用户选择的日期 van-popupbind:closecloseDateLayerroundshow{{dateLayerVisible}}positionbottom
van-datetime-pickerbind:cancelcloseDateLayerbind:confirmselectDateInfotypedatevalue{{currentDate}}min-date{{currentDate}}/
/van-popup// repair_pkg/pages/form/index.js
Page({data: {appointment: ,dateLayerVisible: false},onLoad() {// ...},// 获取用户选择的预约日期selectDateInfo(ev) {// console.log(ev)// 渲染数据this.setData({appointment: wx.utils.dataFormat(ev.detail),dateLayerVisible: false,})},
})用户上传附件上传图片使用到了 Vant 的组件 van-uploader该组件的详细使用请查看官方文档。 van-uploaderbind:after-readuploadPicturemax-count6preview-size100file-list{{attachment}}
/上述代码中 file-list 用来记录已经上传成功的图片会把结果展示到页面中max-count 限定最多上传几张图片preview-size 预览区域的宽高尺寸bind:after-read 用户选择图片后调用的回调函数 接下来调用 wx.uploadFile 来实现图片的上传 参考示例代码如下所示 // repair_pkg/pages/form/index.js
Page({// 上传文件uploadPicture(ev) {// 上传文件的信息const { file } ev.detail// 调用 API 实现文件上传wx.uploadFile({url: wx.http.baseURL /upload,filePath: file.url,name: file,header: {Authorization: Bearer getApp().token,},success: (result) {// 处理返回的 json 数据const data JSON.parse(result.data)// 检测接口是否调用成功if (data.code ! 10000) return wx.utils.toast(文件上传失败!)// 先获取原来已经上传的图片const { attachment } this.data// 追加新的上传的图片attachment.push(data.data)// 渲染数据this.setData({ attachment })},})},
})上传成功的图片地址追加到 file-list 中则组件内部分自动将结果渲染出来剩下的表单数据手机号码、问题描述通过 model:value 获取即可。
其次需要对表单数据的合法性进行校验使用 wechat-validate 插件进行验证
// repair_pkg/pages/form/index.js
// 导入表单验证插件
import wxValidate from wechat-validate
Page({behaviors: [wxValidate],data: {houseId: ,repairItemId: ,mobile: ,appointment: ,description: ,attachment: []},rules: {houseId: [{required: true, message: 请选择报修房屋!}],repairItemId: [{required: true, message: 请选择维修的项目!}],mobile: [{required: true, message: 请填写手机号码!},{pattern: /^1[3-8]\d{9}$/, message: 请填写正确的手机号码!},],appointment: [{required: true, message: 请选择预约日期!}],description: [{required: true, message: 请填写问题描述!}],},
})验证数据时上传的附件图片不是必填项因此可不必对其进行校验。
最后就可以调用接口提交表单数据了
接口文档地址
参考示例代码如下所示
// repair_pkg/pages/form/index.js
// 导入表单验证插件
import wxValidate from wechat-validate
Page({behaviors: [wxValidate],data: {houseId: ,repairItemId: ,mobile: ,appointment: ,description: ,attachment: []},// ...rules: {// ...},async submitForm() {// 验证表单数据if (!this.validate()) return// 提取接口需要的数据const {houseId, repairItemId, mobile, appointment, description, attachment} this.data// 调用接口const {code} await wx.http.post(/repair, {houseId,repairItemId,mobile,appointment,description,attachment,})// 检测接口是否调用成功if (code ! 10000) return wx.utils.toast(在线报修失败!)// 跳转到报修列表页面wx.redirectTo({url: /repair_pkg/pages/list/index,})},
})在线报修成功后会跳转到报修列表页面中查看报修的数据。
1.2 报修列表
调用接口获取报修列表要求用户保持登录状态。
接口文档地址
参考示例代码如下
// repqir_pkg/pages/list/index.js
Page({data: {repairList: []},onLoad() {// 获取报修列表数据this.getRepairList()},// 报修列表接口async getRepairList() {// 调用接口const {code,data: { rows: repairList },} await wx.http.get(/repair, { current: 1, pageSize: 10 })// 检测接口是否用成功if (code ! 10000) return wx.utils.toast()// 渲染数据this.setData({repairList,isEmpty: repairList.length 0,})},
})渲染接口返回的报修列表数据
authorizationblock wx:if{{!isEmpty}}scroll-view show-scrollbar{{false}} enhanced scroll-yview classrepairsview classrepairs-title我的报修/viewview classrepairs-listvan-cell-groupwx:for{{repairList}}wx:keyidborder{{false}}mark:id{{item.id}}bind:tapgoDetailvan-cell sizelarge title{{item.houseInfo}}text wx:if{{item.status 0}} classtag cancel已取消/texttext wx:if{{item.status 1}} classtag info受理中/texttext wx:if{{item.status 2}} classtag success上门中/texttext wx:if{{item.status 3}} classtag complete已完成/text/van-cellvan-cell title报修项目 border{{false}} value{{item.repairItemName}} /van-cell title预约时间 border{{false}} value{{item.appointment}} /van-cell title电话号码 border{{false}} value{{item.mobile}} //van-cell-group/view/view/scroll-viewview classtoolbar bind:tapaddRepairtext classenjoy-icon icon-repair/texttext classbutton-text在线报修/text/view/blockview wx:else classblank您还没有报修记录请点击navigator hover-classnone classlink url/repair_pkg/pages/form/index添加/navigator/view
/authorization
在进行数据渲染时要注意报修列表为空时要给用户展示一段提示内容通过 isEmpty 数据进行判断另外在线报修有4种状态
0 表示已取消对应的类名为 cancel1 表示受理中对应的类名为 info2 表示上门中对应的类名为 success3 表示已完成对应的类名为 complete
1.3 报修详情
根据报修 ID 获取在线报修的数据报修 ID 是通过地址参数据来传递的。
// repair_pkg/pages/detail/index.js
Page({data: {repairDetail: {}},onLoad({ id }) {// 获取报修详情的数据this.getRepairDetail(id)},// 报修详情接口async getRepairDetail(id) {if (!id) return wx.utils.toast(参数有误!)// 调用接口const { code, data: repairDetail } await wx.http.get(/repair/ id)// 检测接口是否调用成功if (code ! 10000) return wx.utils.toast()// 渲染数据this.setData({ repairDetail })},
})把获取的房屋详情的数据渲染到页面中
scroll-view scroll-y enhanced show-scrollbar{{false}}view classrepair-detailview wx:if{{repairDetail.status 2}} classpolylinemapstylewidth: 100%; height: 100%;scale15latitude{{latitude}}longitude{{longitude}}/map/viewvan-cell-group border{{false}} title房屋信息van-cell title{{repairDetail.houseInfo}}text wx:if{{repairDetail.status 0}} classtag cancel已取消/texttext wx:if{{repairDetail.status 1}} classtag info受理中/texttext wx:if{{repairDetail.status 2}} classtag success上门中/texttext wx:if{{repairDetail.status 3}} classtag complete已完成/text/van-cell/van-cell-groupvan-cell-group title报修信息 border{{false}}van-cell title-width200rpx title维修项目 value{{repairDetail.repairItemName}} /van-cell title-width200rpx title手机号码 value{{repairDetail.mobile}} /van-cell title-width200rpx title预约日期 value{{repairDetail.appointment}} /van-cell title问题描述 label{{repairDetail.description}} //van-cell-groupview classattachmentview classtitle问题附件/viewscroll-view scroll-ximage wx:for{{repairDetail.attachment}} wx:keyid src{{item.url}}/image/scroll-view/view/view
/scroll-view
view classtoolbarview bind:tapeditRepair classbutton-text active修改信息/viewview wx:if{{repairDetail.status 1}} classbutton-text取消报修/view
/view
在渲染报修详情数据时要注意当报修状态为上门中时即 status 值为2时才会展示地图组件另外当在线报修状态为受理中即 status值为1时才允许取消报修。
1.4 路线规划
路线规划是比常见的一个功能它用来在地图上展示两点间路线要使用这个功能需要用到两部分的知识
小程序提供的 map 组件用来在页面渲染地图腾讯位置服务计算两点路线的所有坐标点经纬度
首先来看小程序提供的地图组件 map
latitude 指定地图中心点的纬度longitude 指定地图中心点的经功scale 指定地图初始的缩放比例取值范围 3 - 20markers 地图上的标记点polyline 地图上的路线
latitude、longitude、scale 相对容易理解重点来看一下 markers 的使用
// repqir_pkg/pages/detail/index.js
Page({data: {markers: [{id: 1,latitude: 40.22077,longitude: 116.23128,width: 24,height: 30,},{id: 2,latitude: 40.225857999999995,longitude: 116.23246699999999,iconPath: /static/images/marker.png,width: 40,height: 40,},],}
})在定义标记点时每个标记点必须要指定 ID 属性否则会有错误产生通过 iconPath 可以自定义标记点的图片width/height 定义标记点的大小尺寸。
polyline 用来在在图上展示两点间的行进路线需要传递给它路线对应的坐标点很多个点组成的线获取这些坐标点需要通过位置服务计算得到。
计算两点间路线的坐标点需要用到位置服务的路线规划方法
// repqir_pkg/pages/detail/index.js
Page({data: {},onLoad() {// 生成路线this.getPolyline()},// 调用位置服务路线规划getPolyline() {qqMap.direction({mode: bicycling,from: 40.227978,116.22998,to: 40.22077,116.23128,success: ({ result }) {const coors result.routes[0].polylineconst points []//坐标解压返回的点串坐标通过前向差分进行压缩for (let i 2; i coors.length; i) {coors[i] Number(coors[i - 2]) Number(coors[i]) / 1000000}// 获取经纬度for (let i 0; i coors.length; i 2) {points.push({ latitude: coors[i], longitude: coors[i 1] })}// 渲染数据this.setData({latitude: points[30].latitude,longitude: points[30].longitude,polyline: [{points, color: #5591af, width: 4},],})},})},
})计算出来的坐标点是经过压缩的需要按着官方指定的方式对数据进行解压才可以获取真正的坐标点并且为了适应小程序地图组件的用法还需要对数据进行二次的加工。
关于数据的处理大家只需要参考文档来实现就可以可以说之所这么操作是腾讯位置服务规订好的做为开发者按着官方提从的方法来应用即可。
注在真实的企业项目中关于路线的起点和终点是由接口提供给我们的但是在课堂项目咱们稍微信了一些简化自已定义了起点和终点离自已位置近一些容易观察结果对于本知识点的掌握没有影响。
1.5 修改报修
允许用户对在线报修的部分内容进行修改先根据报修的 ID 获取原有的在线报修数据然后再将修改后的在线报个数据重新提交。
在获取在线报修原有数据前需要对之前的代码作一些调整修改一个数据的名称将 houseName 改成 houseInfo 不修改这个数据的话将不会展示报修房屋的默认值。
这个名称的修改涉及到 4 个位置大家参考着视频修改一下。
在线报修 ID 是通过 URL 进行传递的获取到 ID 后调接口获取原有的在线报修数据
// repair_pkg/pages/form/index.js
Page({data: {},onLoad({id}) {// ...// 如果有id表明是修改操作if (id) this.getRepairDetail(id)},// 获取待修改的报修信息async getRepairDetail(id) {// 调用接口const { code, data: repairDetail } await wx.http.get(/repair/ id)// 检测是否调用成功if (code ! 10000) return wx.utils.toast()// 渲染数据this.setData({ ...repairDetail })},
})本页面与添加在线报修是同一个页面当获取到数据后就自动的展示到表单当中了。
在原数据基础上修改后再次提交数据接口与逻辑同添加在线报修是一致的后端接口会根据提交的数据中是否包含 ID 来区分提交的数据是添加报修还是修改报修需要在提交数据的时个添加 ID 参数
// repair_pkg/pages/form/index.js
Page({data: {},onLoad() {},getRepairDetail(id) {// ...},async submitForm() {// 验证表单数据if (!this.validate()) return// 提取接口需要的数据const {id, houseId, repairItemId, mobile, appointment, description, attachment} this.data// 调用接口const { code } await wx.http.post(/repair, {id,houseId,repairItemId,mobile,appointment,description,attachment,})// 检测接口是否调用成功if (code ! 10000) return wx.utils.toast(在线报修失败!)// 跳转到报修列表页面wx.redirectTo({url: /repair_pkg/pages/list/index,})},
})1.6 取消报修
当在线报修处于受理中时允许取消本次报修。
接口文档地址
参考示例代码如下
view classtoolbarviewmark:id{{repairDetail.id}}bind:tapeditRepairclassbutton-text active修改信息/viewviewwx:if{{repairDetail.status 1}}mark:id{{repairDetail.id}}bind:tapcancelRepairclassbutton-text取消报修/view
/view// repair_pkg/pages/detail/index.js
Page({data: {},onLoad() {},// 取消报修async cancelRepair(ev) {// 调用接口const { code } await wx.http.put(/cancel/repaire/ ev.mark.id)// 检测接口是否调用成功if (code ! 10000) return wx.utils.toast()// 跳转到报修列表页面wx.navigateTo({url: /repair_pkg/pages/list/index,})},
})取消报修成功后会跳转到报修列表页面。
