大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。
Jetbrains全系列IDE稳定放心使用
微信小程序宠物论坛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: '请输入内容',
})
}
})
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;
}
发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/184978.html原文链接:https://javaforall.cn
【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛
【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...