微信小程序写一个订单收获地址
时间: 2023-07-13 18:09:09 浏览: 107
好的,下面是一个简单的微信小程序订单收货地址页面的代码示例:
```
<view class="container">
<view class="title">收货地址</view>
<form bindsubmit="formSubmit">
<view class="form-item">
<view class="label">姓名</view>
<input name="name" placeholder="请输入姓名" />
</view>
<view class="form-item">
<view class="label">手机号码</view>
<input type="number" name="phone" placeholder="请输入手机号码" />
</view>
<view class="form-item">
<view class="label">所在地区</view>
<picker mode="region" name="region" bindchange="bindRegionChange">
<view class="picker-text">{{region[0]}} {{region[1]}} {{region[2]}}</view>
</picker>
</view>
<view class="form-item">
<view class="label">详细地址</view>
<textarea name="address" placeholder="请输入详细地址"></textarea>
</view>
<button formType="submit">保存</button>
</form>
</view>
```
在上面的代码中,我们使用了`form`组件来包含表单元素,并为表单元素绑定了`name`属性,方便后续的表单提交处理。具体表单元素如下:
- 姓名:使用`input`组件,并设置`name="name"`属性。
- 手机号码:使用`input`组件,并设置`type="number"`和`name="phone"`属性。
- 所在地区:使用`picker`组件,设置`mode="region"`和`name="region"`属性,并为`picker`组件绑定了`bindchange`事件,用于获取用户选择的地区信息。
- 详细地址:使用`textarea`组件,并设置`name="address"`属性。
最后我们在页面中添加一个`button`按钮,使用`formType="submit"`属性将该按钮指定为表单提交按钮。
为了方便处理表单提交,我们还需要在页面中定义一个`formSubmit`函数来处理表单提交事件,并在该函数中获取表单数据并进行处理:
```javascript
Page({
data: {
region: ['请选择', '请选择', '请选择'],
},
formSubmit: function(e) {
var formData = e.detail.value;
console.log('form发生了submit事件,携带数据为:', formData)
// TODO: 处理表单数据,提交到服务器或本地存储等操作
},
bindRegionChange: function(e) {
this.setData({
region: e.detail.value
})
}
})
```
在上面的代码中,我们定义了一个`data`对象,用于存储用户选择的地区信息。同时,我们定义了一个`formSubmit`函数,用于处理表单提交事件,其中使用`e.detail.value`获取表单数据。最后,我们还定义了一个`bindRegionChange`函数,用于更新用户选择的地区信息。
当用户点击保存按钮时,表单将会被提交,并触发`formSubmit`函数。该函数中可以进行表单数据的处理和提交操作。
阅读全文