第八章:简单留言模板

实现代码

1.index

.js

// pages/index1/index1.js
var Bmob = require('../../utils/bmob');
var common = require('../../utils/common');
var app = getApp();
var that;
var url = '';

Page({
  data: {
    writeDiary: false,
    loading: false,
    windowHeight: 0,
    windowWidth: 0,
    limit: 10,
    diaryList: [],
    modifyDiarys: false
  },
  // 获取并显示留言数据
  onShow: function () {
    getList(this);
    wx.getSystemInfo({
      success: (res) => {
        this.setData({
          windowHeight: res.windowHeight,
          windowWidth: res.windowWidth
        })
      }
    })
  },
  // 添加数据
  toAddDiary: function () {
    that.setData({
      writeDiary: true
    })
  },
  uppic : function () {
    var that = this;
    wx.chooseImage({
      count: 9, // 默认值为9
      sizeType: ['compressed'], // 可以指定是原图还是压缩图,默认二者都有 
      sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
      success: function (res) {
        var tempFilePaths = res.tempFilePaths;
        if (tempFilePaths.length > 0) {
          var newDate = new Date();
          var newDateStr = newDate.toLocaleDateString(); // 获取当前日期为文件主名   
          var tempFilePath = [tempFilePaths[0]];
          var extension = /\.([^.]*)$/.exec(tempFilePath[0]); // 获取文件扩展名
          if (extension) {
            extension = extension[1].toLowerCase();
          }
          var name = newDateStr + "." + extension; // 上传的图片的别名
          var file = new Bmob.File(name, tempFilePaths);
          file.save().then(function (res) {
            console.log(res.url);
            var url = res.url;
            that.setData({
              url: url
            })
          }, function (error) {
            console.log(error);
          })
        }
      }
    })
  },
  addDiary:function(event){
    var title = event.detail.value.title;
    var content = event.detail.value.content;
    var formId = event.detail.value.formId;
    console.log("event",event)
    if(!title){
      common.showTip("标题不能为空","loading");
    }else if(!content){
      common.showTip("内容不能为空","loading")
    }else{
      that.setData({
        loading:true
      })
      var currentUser = Bmob.User.current();
      var User = Bmob.Object.extend("_User");
      var UserModel = new User();
      var Diary = Bmob.Object.extend("test");
      var diary = new Diary();
      diary.set("title",title);
      diary.set("formId",formId);
      diary.set("content",content);
      diary.set("image",url);
      diary.set("count",1)
      if(currentUser){
        UserModel.id = currentUser.id;
        diary.set("own",UserModel);
      }
      diary.save(null,{
        success:function(result){
          common.showTip('添加日记成功');
          that.setData({
            writeDiary:false,
            loading:false
          })
          var currentUser = Bmob.User.current();
          that.onShow();
        },
        error:function(result,error){
          common.showTip('添加留言失败,请重新发布','loading')
        }
      })
    }
  },
  deleteDiary:function(event){
    var that = this;
    var objectId = event.target.dataset.id;
    wx.showModal({
      title: '操作提示',
      content: '确定要删除留言?',
      success: function(res){
        if (res.confirm) {
          var Diary = Bmob.Object.extend("test");
          var query = new Bmob.Query(Diary);
          query.get(objectId,{
            success:function(object){
              object.destroy({
                success:function(deleteObject){
                  console.log('删除留言成功')
                  getList(that)
                },
                error:function(object,error){
                  console.log('删除留言失败')
                }
              })
            },
            error:function(object,error){
              console.log("query object fail");
            }
          })
        }
      }
    })
  },
  toModifyDiary:function(event){
    var nowTile = event.target.dataset.title;
    var nowContent = event.target.dataset.content;
    var nowId = event.target.dataset.id;
    that.setData({
      modifyDiarys:true,
      nowTile:nowTile,
      nowContent:nowContent,
      nowId:nowId
    })
  },
  modifyDiarys:function(e){
    var t=this;
    modify(t,e)
  }
});
// 定义获取留言数据的函数
function getList(t,k) {
  that = t;
  var Diary = Bmob.Object.extend("test"); // 数据表 test
  var query = new Bmob.Query(Diary);
  var query1 = new Bmob.Query(Diary);
  query.descending('createdAt');
  query.include("own");
  query.limit(that.data.limit);
  var mainQuery = Bmob.Query.or(query,query1);
  mainQuery.find({
    success: function (results) {
      // 循环处理查询到的数据
      console.log(results);
      that.setData({
        diaryList: results
      })
    },
    error: function (error) {
      console.log("查询失败:" + error.code + " " + error.message);
    }
  });
}

function modify(t,e){
  var that = t;
  var modyTitle = e.detail.value.title;
  var modyContent = e.detail.value.content;
  var objectId = e.detail.value.content;
  var thatTitle = that.data.nowTile;
  var thatContent = that.data.nowContent;
  if ((modyTitle!=thatTitle||modyContent!=thatContent)) {
    if (modyTitle==""||modyContent=="") {
      common.showTip('标题或内容不能为空','loading')
    }else{
      console.log(modyContent)
      var Diary = Bmob.Object.extend("test");
      var query = new Bmob.Query(Diary);
      query.get(that.data.nowId,{
        success:function(result){
          result.set('title',modyTitle);
          result.set('content',modyContent);
          result.save();
          common.showTip('留言修改成功','success',function(){
            that.onShow();
            that.setData({
              modifyDiarys:false
            })
          })
        },
        error:function(object,error){

        }
      })
    }
  }else if (modyTitle==""||modyContent=="") {
    common.showTip('标题或内容不能为空','loading')
  }else{
    that.setData({
      modifyDiarys:false
    })
    common.showTip('修改成功','loading')
  }
}

.wxml

<view><image class="toWrite" bind:tap="toAddDiary" src="/pages/image/add.png"></image></view>
<view class="page">
  <scroll-view lower-threshold="800" bindscrolltolower="pullUpLoad" upper-threshold="0" scroll-y="true" style="height: {{windowHeight}}px;">
    <view class="page_bd">
      <view class="weui-panel_hd">留言列表</view>
    <view>
    <block wx:if="{{diaryList.length>0}}">
      <navigator class="weui-media-box weui-media-box_text" wx:for="{{diaryList}}" wx:key="diaryItem" url="/pages/detail/detail?objectId={{item.objectId}}&count={{item.count}}">
        <view class="title">主题:{{item.attributes.title}}</view>
        <view class="content">留言内容:{{item.attributes.content}}</view>
        <view class="info">
          <view class="tiem">时间:{{item.updatedAt}}</view>
          <view class="count">浏览:{{item.attributes.count}}</view>
          <view class="operate">
            <icon type="cancel dels" size="16"/>
            <text class="del" catch:tap="deleteDiary" data-id="{{item.attributes.objectId}}">删除</text>
            <icon type="success edits" size="16"/>
            <text catch:tap="toModifyDiary" data-id="{{item.id}}" data-content="{{item.content}}" data-title="{{item.attributes.title}}">编辑</text>
          </view>
        </view>
      </navigator>
    </block>
    </view>
   </view>
  </scroll-view>
</view>
<view class="js_dialog" id="androidDialog1" style="opacity: 1;" wx:if="{{writeDiary}}">
  <view class="weui-mask"></view>
  <view class="weui-dialog weui-skin_android">
    <view class="weui-dialog_hd">
      <strong class="weui-dialog_title">添加留言</strong>
    </view>
    <form bindsubmit="toAddDiary" >
      <view class="weui-dialog_bd">
        <view class="weui-cells_title">标题</view>
        <view class="weui-cells weui-cells_after-title">
          <view class="weui-cells weui-cell_input">
            <view class="weui-cell_bd">
              <input class="weui-input" name="title" placeholder="请输入标题"/>
            </view>
          </view>
        </view>
        <view class="weui-cells_title">留言内容</view>
        <view class="weui-cells weui-cells_after-title">
          <view class="weui-cell">
            <view class="weui-cells_bd">
              <textarea class="weui-textarea" name="content" placeholder="请输入留言内容" style="height:3.3em"></textarea>
              <view class="weui-textarea-counter">0/200</view>
            </view>
          </view>
        </view>
      </view>
      <view class="weui-dialog_ft">
        <view class="weui-dialog_btn weui-dialog_btn_default" bind:tap="noneWindows">取消</view>
        <button loading="{{loading}}" class="weui-dialog_btn weui-dialog_btn_primary" form-type="submit">提交</button>
      </view>
    </form>
  </view>
</view>

 2.index2

.js

// pages/index1/index1.js
var Bmob = require('../../utils/bmob');
var common = require('../../utils/common');
var app = getApp();
var that;
var url = '';

Page({
  data: {
    writeDiary: false,
    loading: false,
    windowHeight: 0,
    windowWidth: 0,
    limit: 10,
    diaryList: [],
    modifyDiarys: false
  },
  // 获取并显示留言数据
  onShow: function () {
    getList(this);
    wx.getSystemInfo({
      success: (res) => {
        this.setData({
          windowHeight: res.windowHeight,
          windowWidth: res.windowWidth
        })
      }
    })
  },
  // 添加数据
  toAddDiary: function () {
    that.setData({
      writeDiary: true
    })
  },
  uppic : function () {
    var that = this;
    wx.chooseImage({
      count: 9, // 默认值为9
      sizeType: ['compressed'], // 可以指定是原图还是压缩图,默认二者都有 
      sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
      success: function (res) {
        var tempFilePaths = res.tempFilePaths;
        if (tempFilePaths.length > 0) {
          var newDate = new Date();
          var newDateStr = newDate.toLocaleDateString(); // 获取当前日期为文件主名   
          var tempFilePath = [tempFilePaths[0]];
          var extension = /\.([^.]*)$/.exec(tempFilePath[0]); // 获取文件扩展名
          if (extension) {
            extension = extension[1].toLowerCase();
          }
          var name = newDateStr + "." + extension; // 上传的图片的别名
          var file = new Bmob.File(name, tempFilePaths);
          file.save().then(function (res) {
            console.log(res.url);
            var url = res.url;
            that.setData({
              url: url
            })
          }, function (error) {
            console.log(error);
          })
        }
      }
    })
  },
  addDiary:function(event){
    var title = event.detail.value.title;
    var content = event.detail.value.content;
    var formId = event.detail.value.formId;
    console.log("event",event)
    if(!title){
      common.showTip("标题不能为空","loading");
    }else if(!content){
      common.showTip("内容不能为空","loading")
    }else{
      that.setData({
        loading:true
      })
      var currentUser = Bmob.User.current();
      var User = Bmob.Object.extend("_User");
      var UserModel = new User();
      var Diary = Bmob.Object.extend("test");
      var diary = new Diary();
      diary.set("title",title);
      diary.set("formId",formId);
      diary.set("content",content);
      diary.set("image",url);
      diary.set("count",1)
      if(currentUser){
        UserModel.id = currentUser.id;
        diary.set("own",UserModel);
      }
      diary.save(null,{
        success:function(result){
          common.showTip('添加日记成功');
          that.setData({
            writeDiary:false,
            loading:false
          })
          var currentUser = Bmob.User.current();
          that.onShow();
        },
        error:function(result,error){
          common.showTip('添加留言失败,请重新发布','loading')
        }
      })
    }
  },
  deleteDiary:function(event){
    var that = this;
    var objectId = event.target.dataset.id;
    wx.showModal({
      title: '操作提示',
      content: '确定要删除留言?',
      success: function(res){
        if (res.confirm) {
          var Diary = Bmob.Object.extend("test");
          var query = new Bmob.Query(Diary);
          query.get(objectId,{
            success:function(object){
              object.destroy({
                success:function(deleteObject){
                  console.log('删除留言成功')
                  getList(that)
                },
                error:function(object,error){
                  console.log('删除留言失败')
                }
              })
            },
            error:function(object,error){
              console.log("query object fail");
            }
          })
        }
      }
    })
  },
  toModifyDiary:function(event){
    var nowTile = event.target.dataset.title;
    var nowContent = event.target.dataset.content;
    var nowId = event.target.dataset.id;
    that.setData({
      modifyDiarys:true,
      nowTile:nowTile,
      nowContent:nowContent,
      nowId:nowId
    })
  },
  modifyDiarys:function(e){
    var t=this;
    modify(t,e)
  }
});
// 定义获取留言数据的函数
function getList(t,k) {
  that = t;
  var Diary = Bmob.Object.extend("test"); // 数据表 test
  var query = new Bmob.Query(Diary);
  var query1 = new Bmob.Query(Diary);
  query.descending('createdAt');
  query.include("own");
  query.limit(that.data.limit);
  var mainQuery = Bmob.Query.or(query,query1);
  mainQuery.find({
    success: function (results) {
      // 循环处理查询到的数据
      console.log(results);
      that.setData({
        diaryList: results
      })
    },
    error: function (error) {
      console.log("查询失败:" + error.code + " " + error.message);
    }
  });
}

function modify(t,e){
  var that = t;
  var modyTitle = e.detail.value.title;
  var modyContent = e.detail.value.content;
  var objectId = e.detail.value.content;
  var thatTitle = that.data.nowTile;
  var thatContent = that.data.nowContent;
  if ((modyTitle!=thatTitle||modyContent!=thatContent)) {
    if (modyTitle==""||modyContent=="") {
      common.showTip('标题或内容不能为空','loading')
    }else{
      console.log(modyContent)
      var Diary = Bmob.Object.extend("test");
      var query = new Bmob.Query(Diary);
      query.get(that.data.nowId,{
        success:function(result){
          result.set('title',modyTitle);
          result.set('content',modyContent);
          result.save();
          common.showTip('留言修改成功','success',function(){
            that.onShow();
            that.setData({
              modifyDiarys:false
            })
          })
        },
        error:function(object,error){

        }
      })
    }
  }else if (modyTitle==""||modyContent=="") {
    common.showTip('标题或内容不能为空','loading')
  }else{
    that.setData({
      modifyDiarys:false
    })
    common.showTip('修改成功','loading')
  }
}

3.logo

.js

// logs.js
const util = require('../../utils/util.js')

Page({
  data: {
    logs: []
  },
  onLoad() {
    this.setData({
      logs: (wx.getStorageSync('logs') || []).map(log => {
        return {
          date: util.formatTime(new Date(log)),
          timeStamp: log
        }
      })
    })
  }
})

 .wxml

<!--logs.wxml-->
<scroll-view class="scrollarea" scroll-y type="list">
  <block wx:for="{{logs}}" wx:key="timeStamp" wx:for-item="log">
    <view class="log-item">{{index + 1}}. {{log.date}}</view>
  </block>
</scroll-view>

4.app.json

{
  "pages": [
    "pages/index1/index1",
    "pages/datail/datail",
    "pages/logs/logs"
  ],
  "window": {
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "小小留言板",
    "navigationBarBackgroundColor": "#ffffff"
  },
  "style": "v2",
  "componentFramework": "glass-easel",
  "sitemapLocation": "sitemap.json",
  "lazyCodeLoading": "requiredComponents"
}

5.运行结果

  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值