微信小程序宠物论坛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;
}

微信小程序宠物论坛2相关推荐

微信小程序宠物论坛6
微信小程序宠物论坛6 个人主页页面 JS部分 const db = wx.cloud.database()Page({data:{openid:"",nickname:" ...
微信小程序宠物论坛4
微信小程序宠物论坛4 帖子详情模块界面图 JS部分 // 初始化数据化 const db = wx.cloud.database(); const cont = db.collection('com ...
微信小程序校园论坛系统丨安卓也可以用
<微信小程序校园论坛+后台管理系统|前后分离VUE>该项目含有源码.论文等资料.配套开发软件.软件安装教程.项目发布教程等本系统包含微信小程序前台和Java做的后台管理系统,该后台采用前 ...
最新WordPress微信小程序社区论坛源码多端应用
WordPress多端应用 WordPress作为后端生成多端小程序.快应用及APP,可用于资讯.新闻.博客.企业官网等后端使用开源博客建站系统wordpress和微慕小程序开源版插件前端使用u ...
微信小程序校园论坛+后台管理系统|前后分离VUE
<微信小程序校园论坛+后台管理系统|前后分离VUE>该项目含有源码.论文等资料.配套开发软件.软件安装教程.项目发布教程等本系统包含微信小程序前台和Java做的后台管理系统,该后台采用前 ...
微信小程序宠物商城项目源码来了~
微信小程序蒙服汇项目源码来了~ 微信小程序垃圾分类项目源码来了~ 微信小程序校园社团管理系统项目源码来了~ 团队承接各类小程序定制,需要加微 code_gg_boy .小商城,购物,公司的一些管理,流 ...
基于微信小程序校内论坛系统设计与实现.rar(含毕业设计论文+数据库文件+源码+答辩ppt模板)
摘要:论坛作为一种新的生活上方式,工作方式和学习方式已经被大众所接受.并且在改变着人们的网络社交方式.随着越来越多的人在写论坛,论坛也正在影响着我们的生活.因此,开发一款简洁而功能强大的论坛系统,将来 ...
阿拉丁微信小程序创新论坛“上海站”成功举办携多位业界专家探讨小程序创投机会...
1月15日下午,阿拉丁在上海长宁区明基广场国际会议室成功举办小程序创新论坛第三站-上海站.小程序从1月9号正式上线到现在已经过去近一周的时间了,这段时间里关于小程序的话题从未中断过.小程序的性感似乎被 ...
WordPress微信小程序社区论坛源码
简介: 后端使用开源博客建站系统wordpress和微慕小程序开源版插件前端使用uniapp本项目可以直接同步wordpress的内容并生成H5.微信小程序.QQ小程序.宝小程序.百度小程序.头条抖音 ...
基于微信小程序在线论坛bbs交流系统设计springboot后端
程序开发软件:Idea + 微信开发者工具 + mysql 开发技术:Springboot后端,小程序客户端,bootstrap后端界面为了方便朋友们在手机端微信交流问题,开发了这个小程序论坛app ...

微信小程序宠物论坛2

微信小程序宠物论坛2

发帖模块

微信小程序宠物论坛2相关推荐

最新文章

热门文章