用 uniapp 写一个申请的表单页面

使用 UniApp 创建一个申请表单页面非常方便。UniApp 是一个使用 Vue.js 语法的多端框架，可以一套代码编译到多个平台（如微信小程序、H5、App等）。

创建申请表单页面的步骤

1. 安装并创建项目：
   首先，需要安装 HBuilderX（推荐的开发工具），然后新建一个 UniApp 项目。

2. 设计表单页面：
   在 pages 文件夹下创建一个新的页面文件夹，例如 applicationForm，并在其中创建 applicationForm.vue。

3. 编写表单页面的代码：
   在 applicationForm.vue 中编写申请表单的页面。

示例代码

applicationForm.vue

<template>
  <view class="container">
    <view class="form-item">
      <label>姓名</label>
      <input v-model="form.name" placeholder="请输入姓名" />
    </view>
    <view class="form-item">
      <label>邮箱</label>
      <input v-model="form.email" type="email" placeholder="请输入邮箱" />
    </view>
    <view class="form-item">
      <label>电话</label>
      <input v-model="form.phone" type="number" placeholder="请输入电话" />
    </view>
    <view class="form-item">
      <label>申请理由</label>
      <textarea v-model="form.reason" placeholder="请输入申请理由"></textarea>
    </view>
    <button type="primary" @click="submitForm">提交申请</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      form: {
        name: '',
        email: '',
        phone: '',
        reason: ''
      }
    };
  },
  methods: {
    submitForm() {
      if (this.validateForm()) {
        uni.showToast({
          title: '提交成功',
          icon: 'success'
        });
        // 这里可以添加提交表单的逻辑，例如调用API接口
      } else {
        uni.showToast({
          title: '请填写完整信息',
          icon: 'none'
        });
      }
    },
    validateForm() {
      return this.form.name && this.form.email && this.form.phone && this.form.reason;
    }
  }
};
</script>

<style>
.container {
  padding: 20rpx;
}
.form-item {
  margin-bottom: 20rpx;
}
label {
  display: block;
  margin-bottom: 10rpx;
  font-weight: bold;
}
input,
textarea {
  width: 100%;
  padding: 10rpx;
  border: 1px solid #ccc;
  border-radius: 5rpx;
}
button {
  width: 100%;
  padding: 10rpx;
  background-color: #007aff;
  color: white;
  text-align: center;
  border: none;
  border-radius: 5rpx;
}
</style>

详细说明

1. 表单布局：

   • 使用 view 标签创建表单的布局。
   • 使用 label 标签来显示每个输入字段的名称。
   • 使用 input 和 textarea 标签来获取用户输入。

2. 数据绑定：

   • 使用 Vue.js 的 v-model 指令来双向绑定表单数据。
   • 表单数据存储在 data 对象的 form 属性中。

3. 表单验证和提交：

   • submitForm 方法用于提交表单。
   • 在提交前，通过 validateForm 方法验证表单是否填写完整。
   • 如果表单验证通过，显示提交成功的提示；否则，提示用户填写完整信息。

4. 样式：

   • 使用 CSS 进行简单的样式调整，使表单看起来更美观。

运行项目

1. 打开 HBuilderX，选择你的项目，然后运行项目。
2. 你可以选择不同的平台进行预览，例如 H5、微信小程序、App 等。

这样，一个基本的申请表单页面就完成了。你可以根据实际需求进一步扩展和美化表单。