帮我用vue和elementui写一个洗脚的前端页面的详细代码
时间: 2024-05-11 21:17:40 浏览: 12
好的,下面是洗脚的前端页面的详细代码:
```
<template>
<div class="foot-washing">
<el-form :model="form" ref="form" label-width="80px" class="demo-ruleForm">
<el-form-item label="姓名" prop="name" :rules="[ {required: true, message: '请输入姓名', trigger: 'blur'}]">
<el-input v-model="form.name" placeholder="请输入姓名"></el-input>
</el-form-item>
<el-form-item label="电话" prop="phone" :rules="[ {required: true, message: '请输入电话', trigger: 'blur'}, {pattern: /^1\d{10}$/, message: '手机号格式不正确', trigger: 'blur'}]">
<el-input v-model="form.phone" placeholder="请输入电话"></el-input>
</el-form-item>
<el-form-item label="性别" prop="gender" :rules="[ {required: true, message: '请选择性别', trigger: 'blur'}]">
<el-radio-group v-model="form.gender">
<el-radio label="male">男</el-radio>
<el-radio label="female">女</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="服务类型" prop="serviceType" :rules="[ {required: true, message: '请选择服务类型', trigger: 'blur'}]">
<el-select v-model="form.serviceType" placeholder="请选择服务类型">
<el-option label="足疗" value="foot-massage"></el-option>
<el-option label="泡脚" value="foot-soak"></el-option>
<el-option label="换脚面" value="foot-skin-change"></el-option>
</el-select>
</el-form-item>
<el-form-item label="服务日期" prop="serviceDate" :rules="[ {required: true, message: '请选择服务日期', trigger: 'blur'}]">
<el-date-picker v-model="form.serviceDate" type="date" placeholder="请选择服务日期"></el-date-picker>
</el-form-item>
</el-form>
<div class="button-group">
<el-button type="primary" @click="submitForm('form')">提交</el-button>
<el-button>取消</el-button>
</div>
</div>
</template>
<script>
export default {
name: 'FootWashing',
data() {
return {
form: {
name: '',
phone: '',
gender: '',
serviceType: '',
serviceDate: ''
}
}
},
methods: {
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
alert('提交成功')
} else {
alert('提交失败,请输入正确信息')
return false;
}
})
}
}
}
</script>
<style scoped>
.foot-washing {
margin: 20px auto;
width: 60%;
}
.button-group {
margin-top: 20px;
text-align: center;
}
</style>
```
这是一个基于 Vue 和 ElementUI 框架的简单洗脚预约前端页面,包含姓名、电话、性别、服务类型、服务日期等信息的输入和提交功能。
注意:以上代码仅供参考,具体实现可能需要根据业务需求进行调整。