微信小程序宠物论坛2
微信小程序宠物论坛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) // 获取用户openid wx.cloud.callFunction({ name: "getopenid", success: res => { this.setData({ openid: res.result.openid }) var openid = res.result.openid console.log(openid) }, fail(res) { console.log("获取openid失败") } }) const openid = this.data.openid console.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.value this.data.title = value this.data.titleCount = value.length $digest(this) }, handleContentInput(e) { const value = e.detail.value this.data.content = value this.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.idx const images = this.data.images wx.previewImage({ current: images[idx],//当前显示出的http链接 urls: images,//需要预览的http链接列表 }) }, submit(e){ const images = this.data.images if(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) { // 返回文件 ID image.push(res.fileID) that.setData({ image: image }) wx.showToast({ title: '确认图片成功', icon: 'success', mask: true, duration: 1000, }) }, fail: console.error }) } const image = that.data.image this.data.image = image } console.log(this.data.image) }, // 保存数据到数据库 submitForm(e) { // 图片返回地址 const image = this.data.image console.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: '请输入内容', }) } })
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230WXML部分
<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>
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647WXSS部分
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; }
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061相关知识
微信小程序 宠物论坛1[通俗易懂]
微信小程序宠物论坛6
计算机毕业设计:基于微信小程序的宠物服务交流系统(思路)
宠托师微信小程序
基于微信小程序的宠物寄养小程序，附源码
兽语翻译微信小程序
基于微信小程序同城宠物服务平台的设计与实现
小程序。#微信小程序 #小程序 #宠物 全端云DIY系统行
制作库存表小程序(教你微信小程序制作的流程)
神奇萌宠集结微信小程序
网址: 微信小程序宠物论坛2 https://m.mcbbbk.com/newsview370444.html
| 上一篇: 猫只吃肉吗？为什么猫粮里要放谷物 |
下一篇: 宠物联盟的论坛 |
