令狐冲111
令狐冲111

微信小程序宠物论坛2

微信小程序宠物论坛2

发帖模块

界面展示
微信小程序宠物论坛2_第1张图片
填写标题、内容和选择图片之后，点击确定图片，然后点击发布即可。

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部分



  

    
    
      
      {{titleCount}}/15