MinNan/components/likeComponent/likeComponent.vue

<template>
	<view>
		<view
			class=""
			style="display: flex; align-items: center; justify-content: space-evenly; height: 40rpx; width: 100rpx; border-radius: 30rpx; background-color: rgb(253 0 0 / 60%)"
			@click="likeBtn"
		>
			<uni-icons v-if="list.is_like > 0" type="heart-filled" color="red" size="20"></uni-icons>
			<uni-icons v-else type="heart-filled" color="#f8f8f8" size="20"></uni-icons>
			<text style="font-size: 28rpx">{{ list.likes }}</text>
		</view>
	</view>
</template>

<script>
import { like, unLike } from '@/config/api.js';
let that;
export default {
	name: 'likeComponent',
	props: {
		list: {
			type: [Object, Array],
			default: null
		}
	},
	data() {
		return {
			main_body_id: ''
		};
	},
	created() {
		that = this;
		this.main_body_id = this.$db.get('main_body_id');
	},
	onLoad(e) {},
	methods: {
		// 点赞
		async likeBtn(i) {
			if (this.list.is_like == 0) {
				await like(
					{
						main_body_id: this.main_body_id,
						content_id: this.list.id
					},
					function (res) {
						that.$nextTick(() => {
							that.list.is_like = 1;
							that.list.likes++;
						});
						that.$common.successToShow('成功点赞');
					}
				);
			} else {
				await unLike(
					{
						main_body_id: that.main_body_id,
						content_ids: that.list.id
					},
					function (res) {
						that.$nextTick(() => {
							that.list.is_like = 0;
							that.list.likes--;
						});

						that.$common.successToShow('取消点赞');
					}
				);
			}
			this.$emit('price', this.list);
		}
	}
};
</script>

<style></style>