用uniapp写一个申领物品的表单,把表单里的字段改为申领人姓名、联系方式、申领物品、数量
时间: 2023-05-23 10:06:07 浏览: 129
A:好的,以下是用uniapp写的申领物品的表单,表单里的字段改为申领人姓名、联系方式、申领物品、数量:
<template>
<view class="container">
<form bindsubmit="onSubmit">
<view class="input-group">
<text>申领人姓名:</text>
<input type="text" placeholder="请输入申领人姓名" name="name" />
</view>
<view class="input-group">
<text>联系方式:</text>
<input type="text" placeholder="请输入联系方式" name="contact" />
</view>
<view class="input-group">
<text>申领物品:</text>
<input type="text" placeholder="请输入申领物品" name="item" />
</view>
<view class="input-group">
<text>数量:</text>
<input type="number" placeholder="请输入数量" name="quantity" />
</view>
<button form-type="submit">提交申请</button>
</form>
</view>
</template>
<script>
export default {
methods: {
onSubmit(e) {
const name = e.detail.value.name
const contact = e.detail.value.contact
const item = e.detail.value.item
const quantity = e.detail.value.quantity
console.log(name, contact, item, quantity)
// 在这里处理表单提交逻辑
// 如:发送表单数据到后端进行处理
},
},
}
</script>
<style>
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.input-group {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
}
input {
flex: 1;
margin-left: 10px;
border: none;
border-bottom: 1px solid #999;
font-size: 16px;
height: 30px;
outline: none;
}
button {
width: 200px;
height: 40px;
background-color: #0080ff;
color: white;
border: none;
border-radius: 4px;
font-size: 16px;
margin-top: 20px;
}
</style>
阅读全文