pay-video-applet-uniapp-24-8-22/components/content/contentControls.vue

<template>
	<view class="controls">
		<view class="bell"
		@click="bell">
			<uv-icon size="35rpx" name="bell"></uv-icon>
			举报
		</view>
		<view class=""
		@click="thumbUp">
			<uv-icon size="35rpx" 
			color="#f40"
			name="thumb-up"
			v-if="up"></uv-icon>
			<uv-icon v-else size="35rpx" name="thumb-up"></uv-icon>
			点赞
		</view>
		<view class="">
			<button
			border="none"
			open-type="share" class="share">
				<uv-icon size="35rpx" name="share"></uv-icon>
				分享
			</button>
		</view>
		<view class=""
		v-if="!isWork"
		@click="thumbDown">
			<uv-icon 
			v-if="down"
			color="#f40"
			size="35rpx" name="thumb-down"></uv-icon>
			<uv-icon 
			v-else
			size="35rpx" name="thumb-down"></uv-icon>
			踩
		</view>
	</view>
</template>

<script>
	export default {
		name:"contentControls",
		props : {
			type : {
				default : 0
			},
			detail : {
				default : {}
			},
			up : {
				default : false,
			},
			down : {
				default : false,
			},
			isWork : {
				default : false,
			}
		},
		data() {
			return {
				
			};
		},
		methods : {
			// 举报
			bell(){
				this.$api('infoReport', {
					type : this.type,
					id : this.detail.id,
				}, res => {
					if(res.code == 200){
						this.$emit('loadData')
						uni.showToast({
							title: res.message
						})
					}
				})
			},
			// 点赞
			thumbUp(){
				this.$api('infoLike', {
					type : this.type,
					id : this.detail.id,
				}, res => {
					if(res.code == 200){
						this.$emit('loadData')
						uni.showToast({
							title: res.message
						})
					}
				})
			},
			// 分享
			share(){
				
			},
			// 踩
			thumbDown(){
				this.$api('infoDislike', {
					type : this.type,
					id : this.detail.id,
				}, res => {
					if(res.code == 200){
						this.$emit('loadData')
						uni.showToast({
							title: res.message
						})
						
					}
				})
			},
		},
	}
</script>

<style lang="scss" scoped>
.controls {
	display: flex;
	&>view {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-right: 40rpx;
	}
	.share{
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.share::after{
		border: none;
	}
}
</style>