美业医疗美容院小程序，预约会员管理养生馆诊所肌护肤理疗系统，附源码交付

预约会员小程序代码示例

前端页面代码 (WXML)

html 复制代码

<view class="container">
  <picker mode="selector" range="{{services}}" range-key="name" bindchange="selectService">
    <view class="picker">选择服务：{{selectedService.name || '请选择'}}</view>
  </picker>

  <picker mode="date" start="{{today}}" end="{{maxDate}}" bindchange="selectDate">
    <view class="picker">选择日期：{{selectedDate || '请选择'}}</view>
  </picker>

  <picker mode="time" start="09:00" end="21:00" bindchange="selectTime">
    <view class="picker">选择时间：{{selectedTime || '请选择'}}</view>
  </picker>

  <input type="text" placeholder="请输入姓名" bindinput="inputName"/>
  <input type="number" placeholder="请输入手机号" bindinput="inputPhone"/>

  <button type="primary" bindtap="submitReservation" disabled="{{!formValid}}">提交预约</button>
</view>

逻辑层代码 (JS)

javascript 复制代码

Page({
  data: {
    services: [
      { id: 1, name: '基础护理' },
      { id: 2, name: '深度清洁' },
      { id: 3, name: '专业理疗' }
    ],
    selectedService: {},
    today: new Date().toISOString().split('T')[0],
    maxDate: new Date(Date.now() + 30*24*60*60*1000).toISOString().split('T')[0],
    selectedDate: '',
    selectedTime: '',
    name: '',
    phone: '',
    formValid: false
  },

  selectService(e) {
    const index = e.detail.value
    this.setData({
      selectedService: this.data.services[index]
    })
    this.checkForm()
  },

  selectDate(e) {
    this.setData({
      selectedDate: e.detail.value
    })
    this.checkForm()
  },

  selectTime(e) {
    this.setData({
      selectedTime: e.detail.value
    })
    this.checkForm()
  },

  inputName(e) {
    this.setData({
      name: e.detail.value
    })
    this.checkForm()
  },

  inputPhone(e) {
    this.setData({
      phone: e.detail.value
    })
    this.checkForm()
  },

  checkForm() {
    const valid = this.data.selectedService.id && 
                 this.data.selectedDate && 
                 this.data.selectedTime && 
                 this.data.name && 
                 /^1[3-9]\d{9}$/.test(this.data.phone)
    this.setData({
      formValid: valid
    })
  },

  submitReservation() {
    wx.request({
      url: 'https://your-api-domain.com/reservations',
      method: 'POST',
      data: {
        serviceId: this.data.selectedService.id,
        date: this.data.selectedDate,
        time: this.data.selectedTime,
        name: this.data.name,
        phone: this.data.phone
      },
      success(res) {
        wx.showToast({
          title: '预约成功',
          icon: 'success'
        })
      },
      fail() {
        wx.showToast({
          title: '预约失败',
          icon: 'none'
        })
      }
    })
  }
})

样式代码 (WXSS)

css 复制代码

.container {
  padding: 20px;
}

.picker {
  margin: 15px 0;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

input {
  margin: 15px 0;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

button {
  margin-top: 20px;
}

功能说明

服务选择：通过picker组件提供可选择的会员服务列表
时间选择：限制可预约日期范围为当天至30天后，时间限制在9:00-21:00
表单验证：实时检查表单完整性，包括手机号格式验证
数据提交：通过wx.request将预约信息提交至后端API

后端接口建议

需要配套的后端接口支持，建议包含以下功能：

接收预约请求并存储到数据库
检查时间冲突
发送预约确认通知
会员积分管理

代码可根据实际需求进行调整，如增加会员等级判断、优惠券使用等功能。