用layui写一个节日鲜花特殊定制页面,除了基本信息,还有购买按钮
时间: 2023-10-01 09:11:24 浏览: 46
好的,以下是一个基于layui的节日鲜花特殊定制页面的代码示例:
HTML部分:
```html
<div class="layui-container">
<div class="layui-row">
<div class="layui-col-md12">
<form class="layui-form" action="">
<div class="layui-form-item">
<label class="layui-form-label">收件人姓名</label>
<div class="layui-input-inline">
<input type="text" name="receiver_name" required lay-verify="required" placeholder="请输入收件人姓名" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">收件人电话</label>
<div class="layui-input-inline">
<input type="tel" name="receiver_tel" required lay-verify="required|phone" placeholder="请输入收件人电话" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">配送地址</label>
<div class="layui-input-inline">
<input type="text" name="delivery_address" required lay-verify="required" placeholder="请输入配送地址" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">鲜花名称</label>
<div class="layui-input-inline">
<input type="text" name="flower_name" required lay-verify="required" placeholder="请输入鲜花名称" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">鲜花数量</label>
<div class="layui-input-inline">
<input type="number" name="flower_quantity" required lay-verify="required|number" placeholder="请输入鲜花数量" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-submit lay-filter="submit">立即购买</button>
</div>
</div>
</form>
</div>
</div>
</div>
```
JavaScript部分:
```javascript
layui.use(['form', 'layer'], function(){
var form = layui.form,
layer = layui.layer;
// 监听提交
form.on('submit(submit)', function(data){
// 这里可以提交表单数据到后台进行处理
layer.alert(JSON.stringify(data.field), {
title: '提交成功',
icon: 1
});
return false; // 阻止表单跳转
});
});
```
说明:
1. 代码中使用了layui的容器、栅格系统和表单组件。
2. 表单中包含了收件人姓名、收件人电话、配送地址、鲜花名称和鲜花数量等基本信息。
3. 表单中的购买按钮使用了layui的按钮组件。
4. JavaScript部分使用了layui的form模块和layer模块,其中form模块用于监听表单提交事件,layer模块用于弹出提交成功的提示框。
5. 在表单提交事件中,可以将表单数据提交到后台进行处理。这里为了演示,直接使用layer弹出了表单数据的JSON字符串。