【微信小程序】访客管理

一、访客管理

访客管理是当有朋友到家里做客时，通过在线填写申请单的方式向门卫进行报备，并请求门卫放行。

1.1 访客邀请

填写访客邀请单，需要用户保持登录的状态。

首先来获取表单的数据

1. 获取到访的房屋信息，仍然用到了 van-action-sheet 组件，获取数据通过坚挺 select 实现：

   // visitor_pkg/pages/form/index.js
   Page({
        
        
   	data: {
        
        
       houseList: []
     },
     onLoad() {
        
        
       // 获取房屋列表
       this.getHouseList()
     },
     // 获取房屋列表
     async getHouseList() {
        
        
       // 调用接口
       const {
        
         code, data: houseList } = await wx.http.get('/house')
       // 检测接口是否调用成功
       if (code !== 10000) return wx.utils.toast()
       // 渲染数据
       this.setData({
        
        houseList})
     },
     // 获取用户选择的房屋
     selectHouseInfo(ev) {
        
        
       // 记录获取的数据
       this.setData({
        
        
         houseId: ev.detail.id,
         houseInfo: ev.detail.name,
       })
     },
   })
   

2. 获取到访日期，仍然用到了 van-datepicker 组件，通过监听 confirm 事件获取选择的时间：

   // visitor_pkg/pages/form/index.js
   Page({
        
        
   	data: {
        
        
       currentDate: Date.now(),
       maxDate: Date.now() + 1000 * 3600 * 24 * 3,
     },
     // 获取用户选择的日期
     selectDateInfo(ev) {
        
        
       // 记录获取的时间并隐藏弹层
       this.setData({
        
        
         visitDate: wx.utils.dataFormat(ev.detail),
         dateLayerVisible: false,
       })
     },
   })
   

   在选择时间的时候要求只能提前3天进行申请，即时间的最大值距离今天不能超过 3 天。

其次对表单的数据进行验证：

// visitor_pkg/pages/form/index.js
// 导入验证插件
import wxValidate from 'wechat-validate'
Page({
   
   
  behaviors: [wxValidate],
  data: {
   
   
    name: '',
    gender: 1,
    mobile: '',
    houseId: '',
    visitDate: '',
  },
  rules: {
   
   
    name: [
      {
   
   required: true, message: '访客姓名不能为空!'},
      {
   
   pattern: /[\u4e00-\u9fa5]{2,5}/, message: '访客姓名只能为中文!'},
    ],
    mobile: [
      {
   
   required: true, message: '访客手机号不能为空!'},
      {
   
   pattern: /^1[3-8]\d{9}$/, message: '请填写正确的手机号码!'},
    ],
    houseId: [
      {
   
   required: true, message: '请选择到访的房屋!'}
    ],
    visitDate: [
      {
   
   required: true, message: '请选择到访的日期!'}
    ],
  },
})

最后提交表单的数据

// visitor_pkg/pages/form/index.js
// 导入验证插件
import wxValidate from 'wechat-validate'
Page({
   
   
  behaviors: [wxValidate],
  data: {
   
   
    // ...
  },
  rules: {
   
   
    // ...
  },
  onLoad() {
   
   },
  getHouseList() {
   
   },
  // 提交表单数据
  async goPassport() {
   
   
    // 验证表单数据
    if (!this.validate()) return
    // 获取接口需要的数据
    const {
   
    name, gender, mobile, houseId, visitDate } = this.data
    // 调用接口
    const {
   
   
      code,
      data: {
   
    id },
    } = await wx.http.post('/visitor', {
   
    name, gender, mobile, houseId, visitDate })
    // 检测接口是否调用成功
    if (code !== 10000) return wx.utils.toast()
    // 跳转到访客详情页面
    wx.reLaunch({
   
   
      url: '/visitor_pkg/pages/passport/index?id=' + id,
    })