miniwx/pages/appointment/appointment.js

// appointment.js
const { formatDate, appointmentDB } = require('../../utils/api')
const app = getApp()

// 订阅消息模板ID
const SUBSCRIBE_TEMPLATE_ID = 'EF5CDtuZwrGbt8iyOoi-sY7J6hZamX0AbWPLoK-qnEw'

Page({
  data: {
    form: {
      name: '',
      phone: '',
      company: '',
      reason: '',
      date: '',
      time: '',
      hostName: '',
      area: '',
      plateNumber: ''
    },
    areaOptions: [],
    selectedAreas: {},
    selectedAreasDisplay: '',
    showAreaDropdown: false,
    today: '',
    timeStart: '',
    timeEnd: '',
    submitting: false,
    fieldErrors: {}
  },

  onLoad() {
    this._awaitLoginAndInit()
  },

  async _awaitLoginAndInit() {
    const userInfo = await app.waitLogin(true)
    if (userInfo) {
      this.initPage()
    } else {
      this.showLoginTipAndGoBack()
    }
  },

  initPage() {
    const today = formatDate(new Date())
    this.setData({ today })
    this.loadAreaOptions()
  },

  async loadAreaOptions() {
    try {
      const list = await appointmentDB.getDepartmentSelector()
      const areaOptions = list.map(item => item.departmentName)
      this.setData({ areaOptions })
    } catch (err) {
      console.error('获取拜访区域列表失败', err)
      wx.showToast({ title: '获取拜访区域失败', icon: 'none' })
    }
  },

  showLoginTipAndGoBack() {
    wx.showToast({ title: '请先登录', icon: 'none', complete: () => {
      const pages = getCurrentPages()
      if (pages.length > 1) {
        wx.navigateBack()
      } else {
        wx.redirectTo({ url: '/pages/index/index' })
      }
    }})
  },

  onNameInput(e) {
    this.setData({ 'form.name': e.detail.value })
    this._clearFieldError('name')
  },
  onPhoneInput(e) {
    this.setData({ 'form.phone': e.detail.value })
    this._clearFieldError('phone')
  },
  onCompanyInput(e) {
    this.setData({ 'form.company': e.detail.value })
    this._clearFieldError('company')
  },
  onReasonInput(e) {
    this.setData({ 'form.reason': e.detail.value })
    this._clearFieldError('reason')
  },
  onHostNameInput(e) {
    this.setData({ 'form.hostName': e.detail.value })
  },
  onPlateNumberChange(e) {
    this.setData({ 'form.plateNumber': e.detail.value })
  },

  onNameBlur() {
    if (!this.data.form.name.trim()) {
      this.setData({ 'fieldErrors.name': '姓名不能为空' })
    }
  },
  onPhoneBlur() {
    if (!this.data.form.phone.trim()) {
      this.setData({ 'fieldErrors.phone': '手机号不能为空' })
    }
  },
  onCompanyBlur() {
    if (!this.data.form.company.trim()) {
      this.setData({ 'fieldErrors.company': '公司不能为空' })
    }
  },
  onReasonBlur() {
    if (!this.data.form.reason.trim()) {
      this.setData({ 'fieldErrors.reason': '来访事由不能为空' })
    }
  },

  _clearFieldError(field) {
    if (this.data.fieldErrors[field]) {
      this.setData({ ['fieldErrors.' + field]: '' })
    }
  },

  toggleAreaDropdown() {
    this.setData({ showAreaDropdown: !this.data.showAreaDropdown })
  },

  toggleArea(e) {
    const value = e.currentTarget.dataset.value
    const selectedAreas = { ...this.data.selectedAreas }
    selectedAreas[value] = !selectedAreas[value]
    const display = Object.keys(selectedAreas).filter(k => selectedAreas[k]).join('、')
    this.setData({
      selectedAreas,
      selectedAreasDisplay: display,
      'form.area': display
    })
    this._clearFieldError('area')
  },

  onDateChange(e) {
    this.setData({ 'form.date': e.detail.value })
  },

  onTimeStartChange(e) {
    this.setData({ timeStart: e.detail.value }, this._updateTimeRange)
  },

  onTimeEndChange(e) {
    this.setData({ timeEnd: e.detail.value }, this._updateTimeRange)
  },

  _updateTimeRange() {
    const { timeStart, timeEnd } = this.data
    if (timeStart && timeEnd) {
      if (timeEnd <= timeStart) {
        this.setData({ 'form.time': '', 'fieldErrors.timeRange': '结束时间必须晚于开始时间' })
        wx.showToast({ title: '结束时间必须晚于开始时间', icon: 'none' })
        return
      }
      this.setData({ 'form.time': timeStart + '-' + timeEnd, 'fieldErrors.timeRange': '' })
    } else {
      this.setData({ 'form.time': '' })
    }
  },

  validateForm() {
    const { name, phone, company, reason, date, time, area } = this.data.form
    if (!name.trim()) {
      wx.showToast({ title: '请输入访客姓名', icon: 'none' })
      return false
    }
    if (!phone.trim() || !/^1\d{10}$/.test(phone)) {
      wx.showToast({ title: '请输入正确的手机号', icon: 'none' })
      return false
    }
    if (!company.trim()) {
      wx.showToast({ title: '请输入所属公司', icon: 'none' })
      return false
    }
    if (!reason.trim()) {
      wx.showToast({ title: '请输入来访事由', icon: 'none' })
      return false
    }
    if (!date) {
      wx.showToast({ title: '请选择来访日期', icon: 'none' })
      return false
    }
    if (!time) {
      wx.showToast({ title: '请选择来访时间', icon: 'none' })
      return false
    }
    if (!area) {
      wx.showToast({ title: '请选择拜访区域', icon: 'none' })
      return false
    }
    return true
  },

  async onSubmit() {
    if (!this.validateForm()) return
    if (this.data.submitting) return

    // 先请求订阅消息授权，再提交预约
    try {
      await wx.requestSubscribeMessage({
        tmplIds: [SUBSCRIBE_TEMPLATE_ID]
      })
    } catch (e) {
      // 用户拒绝授权也允许继续提交，只是收不到通知
      console.warn('订阅消息授权失败或用户拒绝', e)
    }

    this.setData({ submitting: true })

    try {
      const openid = app.globalData.userInfo.openid
      await appointmentDB.create({ ...this.data.form, openid })

      this.setData({ submitting: false })

      wx.showModal({
        title: '提交成功',
        content: '您的预约已提交，请等待审核',
        showCancel: false,
        confirmText: '查看记录',
        confirmColor: '#1890ff',
        success: () => {
          wx.redirectTo({
            url: '/pages/records/records'
          })
        }
      })
    } catch (err) {
      this.setData({ submitting: false })
      console.error('提交预约失败', err)
      wx.showToast({ title: '提交失败，请重试', icon: 'none' })
    }
  },

  onShareAppMessage(res) {
    return {
      title: '访客预约',
      path: '/pages/index/index'
    }
  },

  onShareTimeline() {
    return {
      title: '访客预约'
    }
  }
})