微信小程序——校园服务小程序（三）校园论坛加预约理发服务

微信小程序——校园服务小程序（三）校园论坛加预约理发服务

上一篇写到了我的界面，由于这个界面中有很多功能需要与其他功能配合，在其他功能还未实现时是处理不了的，所以暂时告一段落，在其他功能写完之后在来说。

现在先来看一下发送界面（论坛功能发送帖子的地方）

首先要来说一下数据库的构成，我也是第一次写，不对的地方清大家热心指出。

我想实现四个分类，所以就建了四个表，每一个表储存着一个分类，所以我这里有一个按钮让用户选择一个表去上传帖子。

下面大致由富文本编辑框和发送按钮组成。

富文本编辑框时使用小程序自带的

//wxml
<view class="q-quill ">
	    <view class="toolbar" catchtouchend="format1" style="bottom: {{isIOS ? keyboardHeight : 0}}px">
	      <i class="iconfont icon-tupian" catchtouchend="insertImage1"></i>
	      <i class="iconfont icon-h2 {{formats.header === 2 ? 'ql-active' : ''}}" data-name="header" data-value="{{2}}"></i>
	      <i class="iconfont icon-H3 {{formats.header === 3 ? 'ql-active' : ''}}" data-name="header" data-value="{{3}}"></i>
	      <i class="iconfont icon-zitijiacu {{formats.bold ? 'ql-active' : ''}}" data-name="bold"></i>
	      <i class="iconfont icon-zitixieti {{formats.italic ? 'ql-active' : ''}}" data-name="italic"></i>
	      <i class="iconfont icon-zitixiahuaxian {{formats.underline ? 'ql-active' : ''}}" data-name="underline"></i>
	      <i class="iconfont icon-danxuankuang" data-name="list" data-value="check"></i>
	      <i class="iconfont icon-paixu {{formats.list === 'ordered' ? 'ql-active' : ''}}" data-name="list" data-value="ordered"></i>
	      <i class="iconfont icon-paixu {{formats.list === 'bullet' ? 'ql-active' : ''}}" data-name="list" data-value="bullet"></i>
	      <i class="iconfont icon-juzhong {{formats.align === 'center' ? 'ql-active' : ''}}" data-name="align" data-value="center"></i>
				</view>
</view>

	  <view class="container" >
	  	<!-- 这个editor 是微信提供的组件 -->
	    <editor id="editor1" class="ql-container" value="{{articleContent}}" placeholder="{{placeholder}}" bindstatuschange="onStatusChange1" bindready="onEditorReady1"  bindinput="getEditorValue" show-img-size	="{{true}}" show-img-resize	="{{true}}" show-img-toolbar	="{{true}}">
	    </editor>
	  </view>

// 富文本相关的函数
  onEditorReady1() { //1
    const that = this
    this.createSelectorQuery().select('#editor1').context(function (res) {
      console.log(res,"1")
      that.editorCtx1 = res.context
      if (that.data.richContent == "" || that.data.richContent == null) {
      } else {
        that.editorCtx1.setContents({ html: that.data.richContent }) // 注意：插入的是对象
        console.log(that.data.richContent,'从输入框中得到的值');
      }
    }).exec()
  },
  //富文本失焦的事件
  // blur(e) { //1
  //   // var that=this
  //   // html = e.detail.html
  //   // let delta = e.detail.delta
  //   // console.log(html,'2')
  //   // console.log(delta,'3')
  //   // console.log(e,'p');
  //   // console.log(this.data.param.content,'u');
  //   // that.data.param.content = html
  //   // that.setData({
  //   //   param: this.data.param
  //   // })
  //   this.editorCtx1.blur()
  // },
  getEditorValue(e) {
    this.setData({
      articleContent: e.detail.html
    })
    
    console.log(e.detail.html)
  },
  //样式设置的部分
  format1(e) { //1
    console.log(e,'4')
    let { name, value } = e.target.dataset
    if (!name) return
     console.log('format', name, value,'5')
    console.log(this,'6')
    this.editorCtx1.format(name, value)

  },
  //富文本编辑器状态改变
  onStatusChange1(e) { //1
    console.log(this.editorCtx1,'8')
    const formats = e.detail
    this.setData({ formats })
    console.log(formats,'9');
  },

然后是一个标题就不多说了，就是一个input，然后bindinput获取它的值。

这里还有一个保存按钮，是防止失焦函数报错，我在做这个项目的时候，这里总是报错。

发布按钮则是通过add往用户选择的表里添加一条记录。

这里还要强调一下上传图片的操作

通过chooseImage选择图片

通过uploadFile上传图片

通过insertImage插入图片

最后就是发送教师贴了，普通用户发的帖子身份认证都是学生，教师可以通过专用的账号密码，发送教师贴（就是身份认证是教师的帖子）

怎么实现呢，

在发送界面的data中设置一个变量newstatus，初始化为“学生“，点击之后跳转的教师认证界面中，通过查询（where）看看教师表中有没有用户输入的这个账户和账户对应的密码是否正确，错误的话返回密码或账户错误，正确的话直接返回发送界面，并往缓存中存入一个内容为”教师”的变量oldstatus，在发送界面的onload中获取缓存中的oldstatus，将他的值赋给newstatus，将newstatus通过add存入库中。然后在用户点击保存按钮时将“学生”再次赋给newstatus。这个功能就实现啦。

这个界面比较单一，没有过多的页间交互，（事实上除了“我的”界面，其他界面的交互都是通过库实现的。）

所以附上全部的源码，

//wxml
<!--pages/sendin/sendin.wxml-->
<view class="fontstyle">
	<view class="send_vw1">
		<view class="send_vw2">
			<view class="send_vw3">
				<button class="send_vw_5" bindtap="xuanze1">
					<image src="../../icons/xiaoyuanquanzi.png" class="xiaoqu"></image>
					<text class="xiaoqucolor">校园趣事</text></button>
				<button class="send_vw_5" bindtap="xuanze2">
					<image src="../../icons/xiaogaobai.png" class="xiaoqu"></image>
					<text class="gaibaicolor">告白墙</text></button>
				<button class="send_vw_5" bindtap="xuanze3">
					<image src="../../icons/ershoushichang.png" class="xiaoqu"></image>
					<text class="ershoucolor">旧物市场</text></button>
				<button class="send_vw_5" bindtap="xuanze4">
					<image src="../../icons/shiwuzhaoling.png" class="xiaoqu"></image>
					<text class="shiwucolor">失物招领</text></button>
			</view>
		</view>
	</view>
</view>
<view  class="page-top {{open ? ['c-state','cover'] : ''}} fontstyle ">
	<view class="">
<button bindtap="bindleft" class="send_but1"><text class="xuanzhecolor">选择一个圈子</text><image src="../../icons/quanzhi.png" class="quanzhi"></image></button>

</view>
<!--pages/editor.wxml-->
<view class="q-quill ">
	    <view class="toolbar" catchtouchend="format1" style="bottom: {{isIOS ? keyboardHeight : 0}}px">
	      <i class="iconfont icon-tupian" catchtouchend="insertImage1"></i>
	      <i class="iconfont icon-h2 {{formats.header === 2 ? 'ql-active' : ''}}" data-name="header" data-value="{{2}}"></i>
	      <i class="iconfont icon-H3 {{formats.header === 3 ? 'ql-active' : ''}}" data-name="header" data-value="{{3}}"></i>
	      <i class="iconfont icon-zitijiacu {{formats.bold ? 'ql-active' : ''}}" data-name="bold"></i>
	      <i class="iconfont icon-zitixieti {{formats.italic ? 'ql-active' : ''}}" data-name="italic"></i>
	      <i class="iconfont icon-zitixiahuaxian {{formats.underline ? 'ql-active' : ''}}" data-name="underline"></i>
	      <i class="iconfont icon-danxuankuang" data-name="list" data-value="check"></i>
	      <i class="iconfont icon-paixu {{formats.list === 'ordered' ? 'ql-active' : ''}}" data-name="list" data-value="ordered"></i>
	      <i class="iconfont icon-paixu {{formats.list === 'bullet' ? 'ql-active' : ''}}" data-name="list" data-value="bullet"></i>
	      <i class="iconfont icon-juzhong {{formats.align === 'center' ? 'ql-active' : ''}}" data-name="align" data-value="center"></i>
				</view>
</view>

	  <view class="container" >
	  	<!-- 这个editor 是微信提供的组件 -->
	    <editor id="editor1" class="ql-container" value="{{articleContent}}" placeholder="{{placeholder}}" bindstatuschange="onStatusChange1" bindready="onEditorReady1"  bindinput="getEditorValue" show-img-size	="{{true}}" show-img-resize	="{{true}}" show-img-toolbar	="{{true}}">
	    </editor>
	  </view>
	<!-- <view style="color:#e8e8e8">点其他任意地方添加文字</view> -->
	<!-- 这是对应解析富文本的组件 -->
<!-- <view wx:if="{{showtext}}"></view> -->
<view class="biaoti">
<input bindinput="gettext" auto-focus placeholder="标题....."/>
</view>
<!-- <block wx:else>
	<rich-text nodes="{{param.content}}"></rich-text>
</block> -->
<!-- <button bindtap="tianjia3">添加视频</button>
<button class="btn" catchtap="upLoad">添加图片</button>
<button bindtap="addtext">添加文字</button> -->
<button bindtap="saveture" class="but_baochun">保存</button>
<view class="sendfabu">
	<button bindtap="addall" class="but_fabu">发布</button>
<button bindtap="teacher" class="but_jiaoshifabu">发送教师贴</button>
</view>
</view>
<loading hidden="{{loadingHidden}}">
 加载中...
</loading>

//js
// pages/sendin/sendin.js
let Text1=''//标题
let html=''//正文
let yunqu=''//图片路径
let sendopenid=''//验证是否登录
let nowtitle=''//传递微信昵称
let nowpages=''//传递微信头像
let ptcreateid=''//创建记录的_id
let savecount=false//检查是否保存
let year=''
let month=''
let day=''
let hour=''
let minutes=''
let second=''
let time9=''
let timeTamp=''//时间戳
const db = wx.cloud.database()
const nowdayCollection = db.collection('nowday')
const marketCollection = db.collection('market')
const lostcomeCollection = db.collection('lostcome')
const loveCollection = db.collection('love')
const _ =db.command
//const peopleCollection = db.collection('people')
let selectSQL
Page({

  /**
   * 页面的初始数据
   */
  data: {
    isShow: false,
    placeholder: '请输入',
    param: {
      content: '',
    },
    richContent: "",
    richJobRemark: "",
    open:false,
    loadingHidden:true,
    articleContent: '',//输入的图文
    nowteacher:'学生'
  },


  
bindleft: function(e){
  if(this.data.open){
    this.setData({
      open:false
    })
  }else{
    this.setData({
      open:true
    })
  }
},

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.data.nowteacher = wx.getStorageSync('oldteacher')
    sendopenid = wx.getStorageSync('stopenid')
    nowtitle = wx.getStorageSync('oldname')
    nowpages = wx.getStorageSync('oldpages')
    year= new Date().getFullYear()// 年
    month= new Date().getMonth()+1// 月 注意＋1
    day= new Date().getDate()// 日
    hour=new Date().getHours()//小时
    minutes=new Date().getMinutes()// 分钟
    second=new Date().getSeconds()// 秒
    time9=year+'-'+month+'-'+day+' '+hour+':'+minutes
    console.log(time9);
    let time3=year+'-'+month+'-'+day+' '+hour+':'+minutes+':'+second
    let repTime = time3.replace(/-/g, '/');
    timeTamp = Date.parse(repTime);
    console.log(timeTamp,"时间戳");
  },
  xuanze1(){
    selectSQL=nowdayCollection
    console.log("校园趣事选择成功");

    
    if(this.data.open){
      this.setData({
        open:false
      })
    }else{
      this.setData({
        open:true
      })
    }
  },
  xuanze2(){
    selectSQL=loveCollection
    console.log("表白墙选择成功");
    if(this.data.open){
      this.setData({
        open:false
      })
    }else{
      this.setData({
        open:true
      })
    }
  },
  xuanze3(){
    selectSQL=marketCollection
    console.log("旧物市场选择成功");
    if(this.data.open){
      this.setData({
        open:false
      })
    }else{
      this.setData({
        open:true
      })
    }
  },
  xuanze4(){
    selectSQL=lostcomeCollection
    console.log("失物招领选择成功");
    if(this.data.open){
      this.setData({
        open:false
      })
    }else{
      this.setData({
        open:true
      })
    }
  },
  gettext(event){
    console.log(event.detail.value);
    Text1=event.detail.value
  },
  addall(){
    if(selectSQL!=''&&selectSQL!=null&&sendopenid!=''&&sendopenid!=null&&this.data.articleContent!=''&&this.data.articleContent!=null&&savecount){
      selectSQL.add({//添加数据
      
        data:{
          text:this.data.articleContent,
          wxtitle:nowtitle,
          wxpages:nowpages,
          title:Text1,
          pages:yunqu,
          time:time9,
          timeone:timeTamp,
          shenfen:this.data.nowteacher,
          view:0,
          good:0,
          sendyou:0
        },
        success:res=>{
          console.log("添加成功",res);
          console.log(res._id);
          ptcreateid=res._id
          wx.showToast({
            title: '发布成功',
            icon:'none'
          })
          wx.reLaunch({
            url:'../home/home'
          })
          wx.setStorageSync('oldteacher','学生')//将数据导入缓存
        }
      })
  }else if(selectSQL==''||selectSQL==null){
    wx.showToast({
      title: '请选择你要发送的圈子',
      icon:'none'
    })
    this.onLoad();
  }
  else if(sendopenid==''||sendopenid==null){
    wx.showToast({
      title: '请登录',
      icon:'none'
    })
    this.onLoad();
  }
  else if(this.data.articleContent==''||this.data.articleContent==null){
    wx.showToast({
      title: '内容为空或为保存',
      icon:'none'
    })
    this.onLoad();
  }
  else{
    wx.showToast({
      title: '未保存',
      icon:'none'
    })
    this.onLoad();
  }
  },
  insertImage1() { //1
    const that = this
    // let user_token = global.state.token;
    wx.chooseImage({//选择本地图片
      count: 9,//一次可以选择的最多数据量
      sizeType: ['compressed'],//压缩图片
      sourceType: ['album', 'camera'],//拍照还是从相册选择
      success (res) {
         // tempFilePath可以作为img标签的src属性显示图片
        const tempFilePaths = res.tempFilePaths
        const filePath=res.tempFilePaths[0];
        const cloudPath="img/" + new Date().getTime() +"-"+ Math.floor(Math.random() * 1000)+filePath.match(/\.[^.]+?$/)[0];//云路径（正则表达式）
        wx.cloud.uploadFile({//存储图片到云数据库
          cloudPath:cloudPath,
          filePath: filePath,
          
          success: function (res) {
            that.setData({
          loadingHidden: false
         });
            //if (res.statusCode == 204) {
              //let data = JSON.parse(res.data,'获取成功');
              //let img = res.fileID//data.result.attachmentUrl;
              console.log(res,'获取陈工')
              yunqu=res.fileID 

              that.editorCtx1.insertImage({
                src: res.fileID,
                width: '80%',
                success: function () {
                  that.setData({
                loadingHidden: true
               });
                  console.log('insert image success')
                }
                
              })
              
            //}
          }
        })
      }
    })
  },
  saveture(){
    savecount=true
    if(this.data.nowteacher==""){
      this.data.nowteacher='学生'
    }
    console.log(Text1);
    wx.showToast({
      title: '保存成功',
      icon:'none'
    })
  },
  //富文本
  // 富文本相关的函数
  onEditorReady1() { //1
    const that = this
    this.createSelectorQuery().select('#editor1').context(function (res) {
      console.log(res,"1")
      that.editorCtx1 = res.context
      if (that.data.richContent == "" || that.data.richContent == null) {
      } else {
        that.editorCtx1.setContents({ html: that.data.richContent }) // 注意：插入的是对象
        console.log(that.data.richContent,'从输入框中得到的值');
      }
    }).exec()
  },
  //富文本失焦的事件
  // blur(e) { //1
  //   // var that=this
  //   // html = e.detail.html
  //   // let delta = e.detail.delta
  //   // console.log(html,'2')
  //   // console.log(delta,'3')
  //   // console.log(e,'p');
  //   // console.log(this.data.param.content,'u');
  //   // that.data.param.content = html
  //   // that.setData({
  //   //   param: this.data.param
  //   // })
  //   this.editorCtx1.blur()
  // },
  getEditorValue(e) {
    this.setData({
      articleContent: e.detail.html
    })
    
    console.log(e.detail.html)
  },
  //样式设置的部分
  format1(e) { //1
    console.log(e,'4')
    let { name, value } = e.target.dataset
    if (!name) return
     console.log('format', name, value,'5')
    console.log(this,'6')
    this.editorCtx1.format(name, value)

  },
  //富文本编辑器状态改变
  onStatusChange1(e) { //1
    console.log(this.editorCtx1,'8')
    const formats = e.detail
    this.setData({ formats })
    console.log(formats,'9');
  },
  teacher(){
    wx.navigateTo({
      url: '../teacherlogin/teacherlogin',
    })
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

      if(typeof this.getTabBar==='function' && this.getTabBar()){
        this.getTabBar().setData({
          selected:2
        })
      }

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

欢迎交流。