用uniapp写一个发红包界面
时间: 2024-03-20 17:39:24 浏览: 144
好的,以下是一个简单的发红包界面的代码示例,使用uniapp框架和vue语法:
```
<template>
<view class="container">
<view class="form-group">
<text class="label">金额:</text>
<input class="input" type="number" v-model="money" placeholder="请输入金额" />
</view>
<view class="form-group">
<text class="label">个数:</text>
<input class="input" type="number" v-model="count" placeholder="请输入个数" />
</view>
<view class="form-group">
<text class="label">备注:</text>
<textarea class="textarea" v-model="remark" placeholder="请输入备注"></textarea>
</view>
<view class="button-group">
<button class="button" @click="sendRedPacket">发红包</button>
</view>
</view>
</template>
<script>
export default {
data() {
return {
money: '',
count: '',
remark: ''
}
},
methods: {
sendRedPacket() {
// 发送红包请求的逻辑代码
// ...
}
}
}
</script>
<style>
.container {
padding: 20rpx;
background-color: #fff;
}
.form-group {
display: flex;
align-items: center;
margin-bottom: 20rpx;
}
.label {
font-size: 32rpx;
margin-right: 20rpx;
}
.input {
flex: 1;
font-size: 32rpx;
border: 1rpx solid #ccc;
border-radius: 5rpx;
padding: 10rpx;
}
.textarea {
flex: 1;
font-size: 32rpx;
border: 1rpx solid #ccc;
border-radius: 5rpx;
padding: 10rpx;
height: 150rpx;
resize: none;
}
.button-group {
display: flex;
justify-content: center;
}
.button {
font-size: 32rpx;
background-color: #f00;
color: #fff;
padding: 10rpx 30rpx;
border-radius: 5rpx;
}
</style>
```
该界面包含了三个输入框,分别是金额、个数和备注,以及一个“发红包”按钮。当用户填写完以上信息并点击“发红包”按钮时,会触发 `sendRedPacket` 函数,你需要在该函数中编写发送红包请求的逻辑代码。由于我不知道你发送红包的具体逻辑,因此这里只是留下了一个注释,你需要根据实际情况编写该函数的代码。
阅读全文