列表页代码 list.vue
<template> <view> <view v-for="(item,index) in dataList"> <text @click="jump(item)">ID:{{item.id}}</text> <text class="margin-left-lg" @click="toggleLike(item)">点赞状态:{{item.is_praise}}</text> <text class="margin-left-lg">点赞数量:{{item.praise_num}}</text> </view> </view> </template> <script> export default { data() { return { dataList: [], } }, async onLoad(option){ }, onShow() { }, onLoad(){ this.postslist(); }, onUnload() { }, mounted() { // 监听全局事件,接收详情页点赞状态更新 uni.$on('updateLikeStatus', (postId, liked) => { const post = this.dataList.find(p => p.id === postId); if (post) { post.is_praise = liked; if (liked == 1) { //增加点赞数量 post.praise_num = post.praise_num + 1; } else if (liked == 0) { //减少点赞数量 if (post.praise_num > 0) { post.praise_num = post.praise_num - 1; } } } }); }, beforeDestroy(){ console.log("移除"); uni.$off('updateLikeStatus'); }, methods: { //点赞 toggleLike(item) { var posts_id = item.id; var arr = { posts_id: posts_id, } this.$api.post('api/postspraise', arr, {show : 1}).then((result)=>{ var res = result.data; var code = res.code; var msg = res.msg; uni.showToast({ icon: "success", title: msg, }) if (item.is_praise == 0) { // 发送全局事件,通知详情页点赞状态更新 uni.$emit('updateLikeStatus', posts_id, 1); //item.is_praise = 1; } else { //item.is_praise = 0; uni.$emit('updateLikeStatus', posts_id, 0); } }).catch(err =>{ uni.showToast({ icon: "error", title: err, }) }) }, //列表 postslist(page_num = 1){ var arr = { page: page_num, } this.$api.post('api/postslist', arr, {show : 1}).then((result)=>{ var res = result.data; var code = res.code; var msg = res.msg; uni.showToast({ icon: "success", title: msg, }) this.dataList = res.response.data; }).catch(err =>{ uni.showToast({ icon: "error", title: err, }) }) }, jump(item){ uni.navigateTo({ url: "/pages/other/info?id="+item.id, }) }, } } </script>
详情页代码 info.vue
<template> <view> <view><text>ID:{{ data.id }}</text></view> <view><text @click="postspraise()">点赞状态:{{ data.is_praise }}</text></view> <view><text @click="postspraise()">点赞数量:{{ data.praise_num }}</text></view> </view> </template> <script> export default { data() { return { data: { id: "", is_praise: 0, praise_num: 0, } } }, async onLoad(option){ }, onLoad(options) { this.data.id = options.id; this.getpostsinfo(); }, mounted(){ // 监听全局事件,接收详情页点赞状态更新 uni.$on('updateLikeStatus', (postId, liked) => { if (this.data.id === postId) { this.data.is_praise = liked; if (liked == 1) { //增加点赞数量 this.data.praise_num = this.data.praise_num + 1; } else if (liked == 0) { //减少点赞数量 if (this.data.praise_num > 0) { this.data.praise_num = this.data.praise_num - 1; } } } }); }, beforeDestroy() { //uni.$off('updateLikeStatus'); }, onShow() { }, methods: { //详情 getpostsinfo(){ var arr = { posts_id: this.data.id, } this.$api.post('api/postsinfo', arr, {show : 1}).then((result)=>{ var res = result.data; var code = res.code; var msg = res.msg; uni.showToast({ icon: "success", title: msg, }) this.data = res.response; }).catch(err =>{ uni.showToast({ icon: "error", title: err, }) }) }, //帖子点赞 postspraise(){ var id = this.data.id; var arr = { posts_id: id, } this.$api.post('api/postspraise', arr, {show : 1}).then((result)=>{ var res = result.data; var code = res.code; var msg = res.msg; uni.showToast({ icon: "success", title: msg, }) if (code == 200) { //this.data.is_praise = 1; uni.$emit('updateLikeStatus', id, 1); } else if (code == 202) { //this.data.is_praise = 0; uni.$emit('updateLikeStatus', id, 0); } }).catch(err =>{ uni.showToast({ icon: "error", title: err, }) }) }, } } </script>