如上,数据修改涉及两个页面。
在我的发布页面,点击修改按钮,跳转到修改发布页面,用户此时修改数据,点击确认修改,返回我的发布页面,显示的同步修改的数据
我的发布页面 HTML部分:
<!-- 搜索框 -->
<view class="all-lost">
<input type="text" name="text" class="search" placeholder="饭卡 雨伞 表白 脱单 ..." value="{{inputValue}}" bindinput="inputSearch"></input>
<view class="search-btn" bindtap="search">{{text}}</view>
</view>
<!-- 校园动态列表展示 -->
<block wx:for="{{allList}}" wx:key="index">
<!-- data-xx xx是自定义的属性名 属性值以e.currentTarget.dataset.xx的方式取出 -->
<view class="wall-item">
<!-- 头像昵称 -->
<view class="item-image">
<image bindtap='previewImage' id="{{item.poster.avatar}}" src="{{item.poster.avatar}}" wx:if="{{item.private == 0}}"></image>
<image bindtap='previewImage' src="/images/boy.png" wx:elif="{{item.private == 1 && item.poster.gender == 1}}"></image>
<image bindtap='previewImage' src="/images/girl.png" wx:else></image>
<view wx:if="{{item.private == 1}}" class="user-name">匿名</view>
<view wx:if="{{item.private == 0}}" class="user-name">{{item.poster.nickname}}</view>
<!-- 修改 -->
<image data-itemid="{{item._id}}" bindtap="amend" class="amend" src="/images/amend.png"></image>
<!-- 删除 -->
<image data-id="{{item._id}}" bindtap="delete" class="delete" src="/images/delete.png"></image>
</view>
<!-- 内容 -->
<view class="content common" style='color:#43CD80;'>#{{item.category}}#</view>
<view class="text common">{{item.desc}}</view>
<view class="imgRoot common">
<block class="imgList" wx:for="{{item.fileIDs}}" wx:for-item="itemImg" wx:key="index">
<image class="img" src='{{itemImg}}' mode='aspectFill' data-img='{{[itemImg,item.fileIDs]}}' bindtap="previewImg"></image>
</block>
</view>
<!-- 发布时间 -->
<view class="post-time common">{{item.date}}</view>
</view>
</block>
我的发布页面 JS部分:
// 获取应用实例
var app = getApp()
const db = wx.cloud.database({
env: "panda-8p4lj"
})
const _ = db.command //后面多字段查询要用到的
Page({
data: {
// 定义一个空数组,用来接收从云数据库获取的数据
allList: [],
inputValue: "",
text: '搜索',
},
// 修改
amend: function(e) {
var itemid = e.currentTarget.dataset.itemid
// console.log('111'+e.currentTarget.dataset.itemid)
wx.showModal({
title: '编辑',
content: '确定要修改已发布的信息吗?',
success(res) {
if(res.confirm) {
wx.navigateTo({
url: '/pages/personal/amend/amend?itemid='+itemid,
})
}else if(res.cancel) {
console.log('用户点击了取消')
}
}
})
},
// 删除
delete: function(e) {
var that = this
var id = e.currentTarget.dataset.id
wx.showModal({
title: '提示',
content: '确定永久删除本条信息吗?',
success(res) {
if(res.confirm) {
db.collection('posts').doc(id).remove({
success(res) {
wx.showToast({
title: '删除成功',
})
that.onLoad(); //刷新页面
}
})
console.log('用户点击了确定')
}else if(res.cancel) {
console.log('用户点击了取消')
}
}
})
},
// 预览图片
previewImg: function(e) {
let imgData = e.currentTarget.dataset.img;
console.log("eeee", imgData[0])
console.log("图片s", imgData[1])
wx.previewImage({
//当前显示图片
current: imgData[0],
//所有图片
urls: imgData[1]
})
},
// 获取用户输入搜索框的内容
inputSearch: function(e) {
this.setData({
inputValue: e.detail.value
})
},
// 点击搜索,实现模糊查询
search: function() {
// 数据库正则对象
var that = this
if(this.data.text == '搜索') {
const db = wx.cloud.database()
db.collection('posts').where(
_.or([
// {
// _openid: app.globalData.openid //where和doc
// },
{
// 使用正则查询,实现多字段模糊查询
desc: db.RegExp({
regexp: this.data.inputValue, //this.data.inputValue作为关键字进行匹配
option: 'i' //大小写不区分
}),
},
{
category: db.RegExp({
regexp: this.data.inputValue, //this.data.inputValue作为关键字进行匹配
option: 'i' //大小写不区分
})
}
])).orderBy('createTime', 'desc').get({
success: res => {
if(res.data.length != 0) {
console.log(res)
that.setData({
allList: res.data,
text: '取消'
})
} else {
wx.showModal({
title: '暂无数据...'
})
that.setData({
inputValue: ''
})
}
},
})
}else if(this.data.text == '取消') {
that.setData({
inputValue: '',
text: '搜索',
allList: wx.getStorageSync('search') //获取缓存的内容
})
}
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
var that = this;
db.collection('posts').where({
_openid: app.globalData.openid
}).orderBy('createTime', 'desc').get({
success(res) {
console.log("请求成功", res)
// 将查询返回的结果赋值给本地数组
that.setData({
// 给空数组loveList赋值
allList: res.data,
})
var searchData = that.data.allList
wx.setStorageSync('search', searchData)
},
fail(res) {
console.log("请求失败", res)
}
})
}
})
修改页面 HTML部分:
<!-- 用户自行修改数据的页面 -->
<view class="wall-item">
<!-- 内容 -->
<view class="content common" style='color:#43CD80;'>#{{amendList.category}}#</view>
<input bindinput="change" value="{{amendList.desc}}" placeholder="{{change}}" class="text common"></input>
</view>
<!-- 确认修改 -->
<button class="publish" bindtap="sure">确认修改</button>
修改页面 JS部分:
var app = getApp()
Page({
data: {
id: '',
amendList: [],
change: ''
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (option) {
var that = this
// console.log(option.itemid)
const db = wx.cloud.database({
env: "panda-8p4lj"
})
db.collection('posts').doc(option.itemid).get({
success(res) {
// console.log("请求成功", res.data)
// 将查询返回的结果赋值给本地数组
that.setData({
id: option.itemid,
amendList: res.data,
})
},
fail(res) {
console.log("请求失败", res)
}
})
},
// 获取修改后的内容
change: function(e) {
this.setData({
change: e.detail.value
})
// console.log(this.data.change)
},
// 提交修改
sure: function() {
var that = this
// 调用云函数
wx.cloud.callFunction({
name: 'amend',
// 传给云函数的参数
data: {
// _openid: app.globalData.openid,
_id: that.data.id,
desc: that.data.change,
},
success: function(res) {
console.log(res)
wx.showLoading({
title: '修改成功...',
})
wx.navigateTo({
url: '/pages/personal/mypublish/mypublish',
})
wx.hideLoading()
},
fail: console.error
})
},
})