Table of contents:
Code example:
- Add the following code in the wxml file:
<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>
- Add the following code in the wxss file:
.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;
}
- Add the following code in the js file:
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('用户点击取消')
}
}
})
}
})
In this way, a simple WeChat applet item recycling page is completed. On this page, the user can fill in item information, upload pictures and contact information. After clicking to confirm the submission, the information will be submitted to the background for processing, and a prompt box will pop up to indicate submission. success.
The above code is for reference only, and the specific implementation details and styles can be adjusted according to needs.
How to obtain source code:
Friends who need the complete source code, I hope you can like + favorite + comment, and then send me a private message~
Member learning group: [One-to-one Q&A]
If there is no reply to the private message, you can add a learning member assistant for consultation (WeChat: mifankeji77)