uniapp表白界面并且能提交成功代码
时间: 2023-08-06 11:03:32 浏览: 63
以下是一个简单的uniapp表白界面并能成功提交的代码示例:
```html
<template>
<view class="container">
<view class="title">表白</view>
<view class="form">
<view class="form-item">
<view class="label">表白对象:</view>
<input class="input" type="text" placeholder="请输入表白对象" v-model="toName" />
</view>
<view class="form-item">
<view class="label">表白内容:</view>
<textarea class="textarea" placeholder="请输入表白内容" v-model="content"></textarea>
</view>
<button class="submit-btn" @click="submit">提交</button>
</view>
</view>
</template>
<script>
export default {
data() {
return {
toName: '',
content: ''
}
},
methods: {
submit() {
uni.request({
url: 'http://your-backend-api.com/submit-confession',
method: 'POST',
data: {
toName: this.toName,
content: this.content
},
success: res => {
uni.showToast({
title: '提交成功',
icon: 'success'
})
},
fail: err => {
uni.showToast({
title: '提交失败',
icon: 'none'
})
}
})
}
}
}
</script>
<style>
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
}
.title {
font-size: 24px;
margin-bottom: 20px;
}
.form {
display: flex;
flex-direction: column;
align-items: center;
}
.form-item {
display: flex;
align-items: center;
margin-bottom: 20px;
}
.label {
font-size: 16px;
margin-right: 10px;
}
.input,
.textarea {
flex: 1;
border: 1px solid #ccc;
border-radius: 4px;
padding: 10px;
font-size: 14px;
}
.submit-btn {
width: 100px;
height: 40px;
background-color: #f00;
color: #fff;
border: none;
border-radius: 4px;
font-size: 16px;
cursor: pointer;
}
</style>
```
这个界面和上面的示例基本相同,只是在 submit 方法中增加了调用后端接口的代码。当用户点击提交按钮时,会向后端发送请求,请求成功后会弹出提交成功的提示框,如果请求失败则会弹出提交失败的提示框。具体的后端接口实现需要根据具体的需求进行调整。