uni-app 需要一个预约模板

在uni-app中实现一个预约模板，可以通过结合页面布局、数据绑定、表单验证和API请求等功能来完成。以下是一个简单的示例，展示如何创建一个预约页面，包括基础布局、数据绑定和表单提交功能。

1. 创建预约页面

首先，在pages目录下创建一个新的页面，比如reserve。

reserve.vue

<template>
  <view class="container">
    <view class="title">预约模板</view>
    <form @submit.prevent="handleSubmit">
      <view class="form-item">
        <label>姓名：</label>
        <input type="text" v-model="formData.name" placeholder="请输入姓名" />
      </view>
      <view class="form-item">
        <label>电话：</label>
        <input type="tel" v-model="formData.phone" placeholder="请输入电话" />
      </view>
      <view class="form-item">
        <label>预约时间：</label>
        <picker mode="datetime" v-model="formData.time">
          <view class="picker">{{ formData.time }}</view>
        </picker>
      </view>
      <button type="primary" formType="submit">提交预约</button>
    </form>
  </view>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        name: '',
        phone: '',
        time: ''
      }
    };
  },
  methods: {
    handleSubmit() {
      if (!this.formData.name || !this.formData.phone || !this.formData.time) {
        uni.showToast({ title: '请填写完整信息', icon: 'none' });
        return;
      }
      // 发起API请求提交预约信息
      uni.request({
        url: 'https://your-api-endpoint.com/reserve', // 替换为你的API地址
        method: 'POST',
        data: this.formData,
        success: (res) => {
          if (res.data.success) {
            uni.showToast({ title: '预约成功', icon: 'success' });
          } else {
            uni.showToast({ title: '预约失败', icon: 'none' });
          }
        },
        fail: () => {
          uni.showToast({ title: '请求失败', icon: 'none' });
        }
      });
    }
  }
};
</script>

<style>
.container {
  padding: 20px;
}
.title {
  font-size: 24px;
  font-weight: bold;
  text-align: center;
  margin-bottom: 20px;
}
.form-item {
  margin-bottom: 15px;
}
label {
  display: inline-block;
  width: 80px;
  vertical-align: top;
}
input, .picker {
  width: calc(100% - 90px);
  padding: 10px;
  box-sizing: border-box;
}
button {
  width: 100%;
  padding: 10px;
  background-color: #1aad19;
  color: #fff;
  border: none;
  border-radius: 5px;
}
</style>

2. 配置页面路径

在pages.json中配置新页面的路径：

{
  "pages": [
    {
      "path": "pages/reserve/reserve",
      "style": {
        "navigationBarTitleText": "预约"
      }
    }
    // 其他页面配置...
  ]
}

以上代码展示了如何在uni-app中创建一个简单的预约模板，包括表单布局、数据绑定和表单提交功能。你可以根据实际需求进一步扩展和美化页面。