【页面案例汇总】微信小程序物品回收页面

代码示例：

1. 在 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>

2. 在 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;
}

3. 在 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）