uniapp新增收货地址代码
时间: 2023-08-03 13:08:44 浏览: 58
以下是一个简单的示例代码,用于在 Uniapp 中新增收货地址:
1. 在页面中引入 `uni-form` 和 `uni-list` 组件:
```
<template>
<view class="content">
<uni-form>
<uni-list>
<uni-list-item title="姓名">
<uni-input v-model="name" placeholder="请输入姓名"></uni-input>
</uni-list-item>
<uni-list-item title="电话">
<uni-input type="number" v-model="phone" placeholder="请输入电话号码"></uni-input>
</uni-list-item>
<uni-list-item title="地址">
<picker mode="region" :value="region" @change="onRegionChange">
<view class="picker">{{ region.join(' ') }}</view>
</picker>
</uni-list-item>
<uni-list-item title="详细地址">
<uni-input v-model="address" placeholder="请输入详细地址"></uni-input>
</uni-list-item>
</uni-list>
<uni-button type="primary" @click="submitForm">保存</uni-button>
</uni-form>
</view>
</template>
```
2. 在 `data` 中定义需要提交的地址信息:
```
<script>
export default {
data() {
return {
name: '',
phone: '',
region: [],
address: ''
}
},
methods: {
onRegionChange(e) {
this.region = e.detail.value
},
submitForm() {
uni.showToast({
title: '保存中...',
icon: 'loading',
duration: 2000
})
// 调用接口提交表单数据
uni.request({
url: 'http://your-api-url',
method: 'POST',
data: {
name: this.name,
phone: this.phone,
region: this.region,
address: this.address
},
success(res) {
uni.hideToast()
uni.showToast({
title: '保存成功',
icon: 'success',
duration: 2000
})
// 返回上一页
uni.navigateBack({
delta: 1
})
},
fail(res) {
uni.hideToast()
uni.showToast({
title: '保存失败,请重试',
icon: 'none',
duration: 2000
})
}
})
}
}
}
</script>
```
以上代码实现了一个简单的收货地址新增页面,当用户填写完地址信息并点击保存按钮时,会向后端接口提交数据,并在保存成功后返回上一页。需要注意的是,这里的后端接口需要根据自己的实际情况进行调整。