遂溪 网站上海网络seo

微信小程序宠物论坛2

发帖模块

界面展示

填写标题、内容和选择图片之后，点击确定图片，然后点击发布即可。

JS部分

// import { promisify } from '../../utils/promise.util'
import { $init, $digest } from '../../utils/common.util'
//  const wxUploadFile = promisify(wx.cloud.uploadFile)const db = wx.cloud.database()Page({data: {titleCount: 0,//标题字数contentCount: 0,//内容字数searchinput:'请输入标题',contentinput:'请输入内容',nickname:'',heads:'',title:'',content:'',images:[],image:[],image1:[],time:'',},onLoad(options) {$init(this)// 获取用户openidwx.cloud.callFunction({name: "getopenid",success: res => {this.setData({openid: res.result.openid})var openid = res.result.openidconsole.log(openid)},fail(res) {console.log("获取openid失败")}})const openid = this.data.openidconsole.log(openid)db.collection('user').where({_openid: openid}).get({success: res => {this.setData({nickname: res.data[0].nickname,heads: res.data[0].heads})console.log(this.data.nickname)console.log(this.data.heads)}})},handleTitleInput(e) {const value = e.detail.valuethis.data.title = valuethis.data.titleCount = value.length$digest(this)},handleContentInput(e) {const value = e.detail.valuethis.data.content = valuethis.data.contentCount = value.length$digest(this)},// 选择图片chooseImage(e) {wx.chooseImage({count: 9,sizeType: ['original', 'compressed'],sourceType: ['album', 'camera'],success: res => {const images = this.data.images.concat(res.tempFilePaths)this.data.images = images.length <= 9 ? images : images.slice(0, 9)$digest(this)}})},//  预览handleImagePreview(e) {const idx = e.target.dataset.idxconst images = this.data.imageswx.previewImage({current: images[idx],//当前显示出的http链接urls: images,//需要预览的http链接列表})},submit(e){const images = this.data.imagesif(images==''){wx.showModal({title: '提示',content: '请先选中图片',success(res) {if (res.confirm) {console.log('用户点击确定')} else if (res.cancel) {console.log('用户点击取消')}}})}else{var that = this//上传图片到云存储，获取图片返回地址for (var i = 0; i < images.length; i++) {var imageUrl = images[i].split("/");var name = imageUrl[imageUrl.length - 1];wx.cloud.uploadFile({cloudPath: name, // 上传至云端的路径filePath: images[i], // 小程序临时文件路径success(res) {// 返回文件 IDimage.push(res.fileID)that.setData({image: image})wx.showToast({title: '确认图片成功',icon: 'success',mask: true,duration: 1000,})},fail: console.error})}const image = that.data.imagethis.data.image = image}console.log(this.data.image)},// 保存数据到数据库submitForm(e) {// 图片返回地址const image = this.data.imageconsole.log(image)// 标题const title = this.data.title// 内容const content = this.data.content// 昵称const nickname = this.data.nickname// console.log(nickname)// 头像const heads = this.data.heads// 获取当前时间var util = require('../../utils/util.js');const time = util.formatTime(new Date());this.setData({time: time});if(image==''){wx.showModal({title: '提示',content: '请先确认图片',success(res) {if (res.confirm) {console.log('用户点击确定')} else if (res.cancel) {console.log('用户点击取消')}}})}else{if (image == '' || title == '' || content == '') {wx.showModal({title: '提示',content: '请确保标题，内容，图片完整',success(res) {if (res.confirm) {console.log('用户点击确定')} else if (res.cancel) {console.log('用户点击取消')}}})}else {// 上传到数据库中db.collection('post').add({data: {nickname: nickname,heads: heads,time: time,title: title,content: content,images: image,review:'1',},success: function (res) {wx.showToast({title: '发布成功,请等待管理员的审核',icon: 'success',mask: true,duration: 1000,})},})}}this.setData({titleCount: 0,contentCount: 0,nickname: '',heads: '',title: '',content: '',images: [],image: [],image1: [],time: '',searchinput: '请输入标题',contentinput: '请输入内容',})}
})

WXML部分

<view class="question-form"><view class="question-input-area"><!-- 问题标题  --><view class="question-title-wrap"><input class="question-title" placeholder="{{searchinput}}" maxlength="15" placeholder-style="color:#b3b3b3;font-size:18px;" bindinput="handleTitleInput"></input><view class="title-input-counter">{{titleCount}}/15</view></view><!-- 问题正文  --><view class="weui-cells weui-cells_after-title"><view class="weui-cell"><view class="weui-cell__bd"><textarea class="weui-textarea"placeholder="{{contentinput}}" maxlength="500" placeholder-style="color:#b3b3b3;font-size:14px;" style="height: 12rem" bindinput="handleContentInput" /><view class="weui-textarea-counter">{{contentCount}}/500</view></view></view></view></view><view class="question-images-area"><!-- 添加图片按钮  --><view class="question-images-tool"><button type="default" size="mini" bindtap="chooseImage" wx:if="{{images.length < 9}}">添加图片</button></view><!-- 图片缩略图  --><view class="question-images"><block wx:for="{{images}}" wx:key="*this"><view class="q-image-wrap"><image class="q-image" src="{{item}}" mode="aspectFill" data-idx="{{index}}" bindtap="handleImagePreview"></image></view></block></view></view><!-- 提交表单按钮  -->
<button class="weui-btn" type="primary" bindtap="submit">确定图片</button><button class="weui-btn" type="primary" bindtap="submitForm">发布</button></view>

WXSS部分

page {background: #f6f7f8;
}.question-form {margin: 25rpx;
}.question-input-area {background-color: #fff;border: 1rpx solid #f2f2f2;border-radius: 4rpx;
}.question-title-wrap {display: flex;align-items: center;border-bottom: 1rpx solid #ccc;margin: 10rpx 30rpx;padding: 20rpx 0;
}.question-title {flex: 1;
}.weui-cell::before, .weui-cells::before, .weui-cell::after, .weui-cells::after {border: none;
}.question-images-area {padding: 40rpx 0;
}.question-images-tool {display: flex;align-items: center;
}.question-images {display: flex;align-items: center;margin-top: 40rpx;
}.q-image-wrap {width: 31%;margin-right: 10rpx;
}.q-image {flex: 1;height: 200rpx;width: 100%;
}.q-image-remover {text-align: center;
}