修改和删除
修改需要进入一个新的页面操作，删除就在详情页操作就行了,删除只需要一个提示框
给删除按钮一个点击事件，通过点击事件调用删除云函数进行操作，所以还需要新建一个删除云函数art_remove_row
删除功能云函数
const db = uniCloud.database()
exports.main = async (event, context) => {
let {id} = event;
return await db.collection("article").doc(id).remove()
};
前端删除方法： 1.将调用删除云函数的方法封装起来，在删除方法中进行判断，用户点击了确定删除才删，删除方法的then方法里也要进行跳转，删除成功后跳转到首页 2.需要对错误进行捕获，之前都没做过，这个功能在删除内容后在详情页刷新，由于已经没有这条数据了，就会产生报错，所以要用catch对错误进行捕获后，可以写一个弹出框提示用户 3.弹框消失后，跳转到首页
<script>
let id;
export default {
data() {
return {
detail: {},
// 加载更多组件,默认初始值为false
loadState: false
};
},
onLoad(e) {
id = e.id;
this.getDetail();
},
methods: {
// 删除一条新闻详情方法
// 因为在上面定义了全局变量id，可以在当前页面随时拿到ID,所以这里就不用传参了
onRemove(){
// 1.先要有一个删除的提示框再删,防止误操作
// 2.将调用删除云函数的方法封装起来,用户确认删除后就调用
uni.showModal({
content:"是否确认删除？",
success:res=>{
if(res.confirm){
this.removeFun()
}
}
})
},
removeFun(){
// 2.调用云函数删除内容
uniCloud.callFunction({
name:"art_remove_row",
data:{
// id:id
id
}
}).then(res=>{
uni.showToast({
title:"删除成功"
})
// 弹窗显示完成后,跳转到首页
setTimeout(()=>{
uni.reLaunch({
url:"/pages/index/index"
})
},800)
})
},
// 获取详情数据的方法,调用云函数，传递id
// then里面的res就是通过传递的id返回的返回值
getDetail() {
uniCloud.callFunction({
name: "art_get_row",
data: {
// id:id
id
}
}).then(res => {
console.log(res);
// 返回值是一个数组,里面只有一个值
this.detail = res.result.data[0],
// 拿到数据后,将正在加载组件的状态置为true
this.loadState = true,
// 动态设置标题栏为新闻title
uni.setNavigationBarTitle({
title:this.detail.title
})
}).catch(()=>{
uni.showToast({
icon:"error",
title:"参数有误"
})
// 弹窗显示完成后,跳转到首页
setTimeout(()=>{
uni.reLaunch({
url:"/pages/index/index"
})
},800)
});
}
}
}
</script>
