uniapp商家入驻提交表单代码
时间: 2023-10-06 12:08:59 浏览: 222
平台商家入驻协议
这里是一个基本的uniapp商家入驻提交表单的代码示例:
1. 创建一个表单页面,包含商家名称、联系人、联系电话、地址、介绍等表单项。
2. 在表单页面的methods中添加一个submitForm方法,用于提交表单数据。
```javascript
methods: {
submitForm() {
// 获取表单数据
const formData = {
name: this.name,
contact: this.contact,
phone: this.phone,
address: this.address,
intro: this.intro
}
// 调用后端API,提交表单数据
uni.request({
url: 'http://example.com/api/merchant',
method: 'POST',
data: formData,
success: (res) => {
uni.showToast({
title: '提交成功',
icon: 'success',
duration: 2000
})
},
fail: (res) => {
uni.showToast({
title: '提交失败',
icon: 'error',
duration: 2000
})
}
})
}
}
```
3. 在表单页面的template中,添加表单项的输入框和提交按钮。
```html
<template>
<view class="form-container">
<view class="form-item">
<text class="form-label">商家名称:</text>
<input class="form-input" v-model="name" placeholder="请输入商家名称" />
</view>
<view class="form-item">
<text class="form-label">联系人:</text>
<input class="form-input" v-model="contact" placeholder="请输入联系人姓名" />
</view>
<view class="form-item">
<text class="form-label">联系电话:</text>
<input class="form-input" v-model="phone" placeholder="请输入联系电话" />
</view>
<view class="form-item">
<text class="form-label">地址:</text>
<input class="form-input" v-model="address" placeholder="请输入地址" />
</view>
<view class="form-item">
<text class="form-label">介绍:</text>
<textarea class="form-input" v-model="intro" placeholder="请输入商家介绍"></textarea>
</view>
<view class="form-item">
<button class="form-submit" @tap="submitForm">提交</button>
</view>
</view>
</template>
```
4. 根据实际需求,添加表单项的验证和提示功能。
以上是一个简单的uniapp商家入驻提交表单的代码示例,希望对你有所帮助。
阅读全文