uniapp 列表和详情,列表有点赞,点进详情,点赞和取消点赞,返回列表,列表点赞数据也要更新。
原创 uniapp 2024-01-25 11:05:29
1 收藏 0 浏览257 评论0
琴朗
已发33篇
有侵犯版权请及时联系我们,我们将在24小时内删除文章。
投诉举报

列表页代码 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>




评论(0) 我要评论