实现代码
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"
}