微信小程序宠物论坛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: '请输入内容',
   })
  }
})

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分享到此就结束了，感谢您的阅读，如果确实帮到您，您可以动动手指转发给其他人。