1.send.js文件,添加数据及方法
// pages/send/send.js
Page({
/**
* 页面的初始数据
*/
data: {
tabs1: [
{
text: '首页',
},
{
text: '发布',
},
{
text: '查询',
},
{
text: '我的',
},
],
items: [
{ name: '1', value: '证件' },
{ name: '2', value: '书籍' },
{ name: '3', value: '服饰' },
{ name: '4', value: '食品' },
{ name: '5', value: '其他' }
],
images: [],
category:"",
content:""
},
//单选框选择事件
radioChange: function (e) {
console.log('radio发生change事件,携带value值为:', e.detail.value);
this.setData({
category: e.detail.value
})
},
//上传图片
chooseImage() {
var that = this;
if (this.data.images.length < 3) {
wx.chooseImage({
sizeType: ['original', 'compressed'],
success: function (res) {
that.setData({
images: that.data.images.concat(res.tempFilePaths)
})
}
})
} else {
wx.showToast({
title: '最多上传三张图片',
icon: 'loading',
duration: 3000
});
}
},
// 删除图片
deleteImg: function (e) {
var imgs = this.data.images;
var index = e.currentTarget.dataset.index;
imgs.splice(index, 1);
this.setData({
images: imgs
});
},
//失去焦点时获取输入框内容
bindTextAreaBlur: function (e) {
console.log(e.detail.value)
this.setData({
content: e.detail.value,
})
},
//失物招领表单的提交
lostandfoundMsgFormSubmit(e){
var category = this.data.category;
var content=this.data.content;
//test
console.log("category:"+category);
console.log("content:"+content);
var images=this.data.images;
for(var i=0;i<images.length;i++){
console.log("图片地址:"+images[i]);
}
this.setData({
images:[]
});
wx.showToast({
title: '发布成功',
duration:2000
})
},
//菜单导航栏的跳转
handleChange(e) {
const index = e.detail.value;
console.log(e);
console.log("value: " + e.detail.value);
switch (index) {
case 0:
wx.redirectTo({
url: '/pages/lostandfound/lostandfound',
})
break;
case 1:
// wx.navigateTo({
// url: '/pages/send/send',
// })
break;
case 2:
wx.redirectTo({
url: '/pages/find/find',
})
break;
case 3:
wx.redirectTo({
url: '/pages/userMsg/userMsg',
})
break;
}
},
handleSelected() {
this.setData({
index: 2,
});
},
handleClick(e) {
const { index, title } = e.detail;
console.log('点击了tab:' + index, title);
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
2.send.json文件中引入相应的UI组件
{
"usingComponents": {
"w-button": "/dist/w-button/index",
"w-tabs": "/dist/w-tabs/index",
"w-cell": "/dist/w-cell/index",
"w-cell-group": "/dist/w-cell-group/index",
"w-input": "/dist/w-input/index"
}
}
3.send.wxss文件
/* pages/send/send.wxss */
.tabs{
position: fixed;
width: 100%;
bottom: 0;
}
.big-logos {
float: left;
margin-top: 10rpx;
margin-bottom: 10rpx;
width: 100%;
height: 200rpx;
border: 1px solid #ccc;
}
.big-logos .big-logos_img {
float: left;
width: 100%;
height: 200rpx;
}
.big-logos .big-logos_img image {
float: left;
width: 250rpx;
height: 200rpx;
}
.big-logos .logoinfo {
float: left;
width: 250rpx;
height: 200rpx;
margin-top: -196rpx;
}
.big-logos .logoinfo image {
float: left;
width: 250rpx;
height: 200rpx;
}
.delete-btn{
width: 10%;
height: 50rpx;
}
.submit-btn-view{
margin-top: 50rpx;
}
.submit-btn{
background-color: green;
color: white;
}
.space{
width: 100%;
height: 80rpx;
}
4.send.wxml文件
<!--pages/send/send.wxml-->
<view>
<form bindreset="lostandfoundMsgFormSubmit">
<label>1.选择类别</label>
<radio-group class="radio-group" bindchange="radioChange">
<label class="radio" wx:for="{{items}}">
<radio value="{{item.name}}" checked="{{item.checked}}"/>{{item.value}}
</label>
</radio-group>
<!-- 留下距离-->
<view class='space'></view>
<label>2.输入内容</label>
<w-cell-group>
<!-- <w-input clear count="200" type="textarea" placeholder="输入" bindblur='bindTextAreaBlur'/> -->
<textarea placeholder="请输入200字以内" bindblur='bindTextAreaBlur' maxlength='200'></textarea>
</w-cell-group>
<!-- 留下距离-->
<view class='space'></view>
<label>3.上传图片</label>
<!-- 图片上传-->
<view class="big-logos">
<view class='big-logos_img'>
<image bindtap="chooseImage" src='/images/wx_app_add.jpg'></image>
<image bindtap="chooseImage" src='/images/wx_app_add.jpg'></image>
<image bindtap="chooseImage" src='/images/wx_app_add.jpg'></image>
</view>
<block wx:for="{{images}}" wx:key="{{index}}">
<view class='logoinfo'>
<image src='{{item}}' catchtap='deleteImg'></image>
</view>
</block>
</view>
<!-- 图片上传-->
<!-- 留下距离-->
<view class='space'></view>
<view class='submit-btn-view'>
<button formType="reset" class='submit-btn' >发布</button>
</view>
</form>
</view>
<view class='tabs'>
<w-tabs bind:onChange="handleChange" currentIndex="1" options="{{ tabs1 }}" />
</view>
获取源码:https://github.com/yangxuechen/LostAndFound/tree/master/wx_app