代码示例：
- 在 wxml 文件中添加以下代码：
<view class="container">
<view class="title">物品回收</view>
<form bindsubmit="submitForm">
<view class="form-group">
<view>物品名称：</view>
<input type="text" class="input" name="itemName" placeholder="请输入物品名称" />
</view>
<view class="form-group">
<view>物品图片：</view>
<button type="button" class="choose-img" bindtap="chooseImage">选择图片</button>
<image src="{
{imageUrl}}" mode="aspectFill" class="preview-img" />
</view>
<view class="form-group">
<view>联系电话：</view>
<input type="tel" class="input" name="phoneNumber" placeholder="请输入联系电话" />
</view>
<view class="form-group">
<view>物品描述：</view>
<textarea class="textarea" name="description" placeholder="请输入物品描述"></textarea>
</view>
<button type="submit" class="submit-btn">确认提交</button>
</form>
</view>
- 在 wxss 文件中添加以下代码：
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin-top: 20px;
}
.title {
font-size: 28px;
font-weight: bold;
margin-bottom: 20px;
}
.form-group {
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 20px;
}
.form-group view {
margin-bottom: 10px;
}
.input {
width: 80%;
height: 40px;
padding: 10px;
border-radius: 4px;
border: 1px solid #ccc;
}
.choose-img {
width: 80%;
height: 40px;
padding: 10px;
margin-bottom: 10px;
background-color: #eee;
border: none;
border-radius: 4px;
text-align: center;
line-height: 1.5;
}
.preview-img {
width: 80%;
height: 200px;
margin-bottom: 10px;
}
.textarea {
width: 80%;
height: 80px;
padding: 10px;
border-radius: 4px;
border: 1px solid #ccc;
resize: none;
}
.submit-btn {
width: 80%;
height: 40px;
background-color: #007aff;
color: #fff;
border: none;
border-radius: 4px;
text-align: center;
line-height: 1.5;
margin-top: 20px;
font-size: 16px;
}
- 在 js 文件中添加以下代码：
Page({
data: {
imageUrl: ''
},
chooseImage: function () {
var that = this
wx.chooseImage({
count: 1,
sizeType: ['original', 'compressed'],
sourceType: ['album', 'camera'],
success: function (res) {
that.setData({
imageUrl: res.tempFilePaths[0]
})
}
})
},
submitForm: function (e) {
var itemName = e.detail.value.itemName
var phoneNumber = e.detail.value.phoneNumber
var description = e.detail.value.description
var imageUrl = this.data.imageUrl
wx.showModal({
title: '确认提交',
content: '是否提交回收信息？',
success: function (res) {
if (res.confirm) {
console.log('用户点击确定')
console.log('物品名称：' + itemName)
console.log('联系电话：' + phoneNumber)
console.log('物品描述：' + description)
console.log('物品图片：' + imageUrl)
wx.showToast({
title: '提交成功',
icon: 'success',
duration: 2000,
success: function () {
setTimeout(function () {
wx.navigateBack({
delta: 1
})
}, 2000)
}
})
} else if (res.cancel) {
console.log('用户点击取消')
}
}
})
}
})
这样就完成了一个简单的微信小程序的物品回收页面，用户在该页面可以填写物品信息、上传图片和联系方式，点击确认提交后，信息将会被提交到后台处理，同时弹出提示框表示提交成功。
以上代码仅供参考，具体实现细节和样式可以根据需求自行调整。
源码获取方法：
需要完整源码的朋友，希望你能点赞+收藏+评论，然后私信我即可~
会员学习群：【一对一答疑】
如果私信未回复，可添加学习会员小助手咨询（微信：mifankeji77）