<!--pages/write/write.wxml-->
{{test}}
<form bindsubmit="submitArticle">
<view class="writebox">
<view class="form-item">
<input maxlength="30" placeholder="输入标题" name="title" class="art-title" placeholder-class="inputHolder" bindfocus="titleFocus" bindblur="titleBlur" bindinput="titleInput" />
<!-- <view class="icon-pen" wx:if="{{inputFocus}}" ></view> -->
<text class="tips" wx:if="{{inputFocus}}">(30字内)</text>
</view>
<view class="form-item">
<textarea placeholder="输入正文内容" name="content" class="art-con" maxlength="-1" placeholder-class="textareaHolder" />
</view>
<view class="form-item">
<!-- 上传列表预览 -->
<view class="upload-list" wx:for="{{imgList}}" wx:key="this">
<image src="{{item}}"></image>
</view>
<view class="upload-icon" bindtap='chooseImgs'>
<image src="upimg_icon.png"></image>
</view>
</view>
</view>
<button type="default" hover-class="none" form-type="submit" class="submit-btn">发布</button>
<view class='explain'>
<text>发布前请注意 :</text>
</view>
</form>
// pages/write/write.js
Page({
/**
* 页面的初始数据
*/
data: {
inputFocus: true,
imgList: [],
},
/**
* 获取焦点
*/
titleFocus: function (e) {
if (e.detail.value.length > 0) {
this.setData({
inputFocus: false
})
}
},
/**
* 输入中
*/
titleInput: function (e) {
if (e.detail.value.length > 0) {
this.setData({
inputFocus: false
})
} else {
this.setData({
inputFocus: true
})
}
},
/**
* 是去焦点
*/
titleBlur: function (e) {
if (e.detail.value.length > 0) {
this.setData({
inputFocus: false
})
} else {
this.setData({
inputFocus: true
})
}
},
/**
* 选择图片
*/
chooseImgs: function () {
wx.chooseImage({
sizeType: ['compressed'],
sourceType: ['album', 'camera'],
success: (res) => {
this.setData({
imgList: res.tempFilePaths
});
}
})
},
uploadImgs: function (filePath, index, title,content,id) {
let otherInfo = [];
if (index + 1 == filePath.length){
otherInfo.push(title,content,wx.getStorageSync('token'))
}
wx.uploadFile({
url: '',
filePath: filePath[index],
name: 'file',
formData: {
article_id : id
// otherInfo:otherInfo
},
header: {
'content-type': 'multipart/form-data'
},
success: (res)=> {
console.log(JSON.parse(res.data));
if (index + 1 < filePath.length) {
this.uploadImgs(filePath, index + 1, title,content,id)
} else {
//图片全部提交了
wx.hideLoading();
wx.navigateTo({
url: 'writesuccess?&title=' + title
})
}
}
})
},
/**
* 提交文章
* */
submitArticle: function (e) {
let title = e.detail.value.title;
let content = e.detail.value.content;
let cur = 0;
let fileLength = this.data.imgList.length;
if (title == "") {
wx.showModal({
title: '提示',
content: '标题不能为空',
})
} else if (content.length < 10) {
wx.showModal({
title: '提示',
content: '内容不能少于10个字',
})
} else if (fileLength == 0) {
wx.showModal({
title: '提示',
content: '请添加图片'
})
} else {
wx.showLoading({
title: '提交中',
mask: true
});
wx.request({
url: '',
method:'POST',
data:{
token:wx.getStorageSync('token'),
title:title,
content: content
},
success:(res) => {
let {errcode,article_id} = res.data
if(errcode == 0){
this.uploadImgs(this.data.imgList, cur, title, content, article_id);
}
}
})
}
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})