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

<template>
	<view class="controls">
		<view class="bell"
		@click="$refs.confirmationPopup.open('bottom')">
			<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>
		
		
		<confirmationPopup
		ref="confirmationPopup"
		title="举报"
		@confirm="bell(item)"
		confirmText="确认举报">
			<view class="confirmationPopup">
				
				<input type="text" 
				placeholder="请输入举报原因" 
				v-model="text"
				class="confirmationInput"/>
				
			</view>
		</confirmationPopup>
		
		<!-- <uv-popup ref="confirmationPopup" 
		:round="30" 
		:customStyle="{height: '50vh'}">
			<view class="confirmationPopup">
				<view class="list">
					<view
					:key="index"
					@click="bell(item)"
					v-for="(item, index) in ju">
						{{ item.content }}
						<view class="content">
							{{ item.content }}
						</view>
					</view>
				</view>
			</view>
		</uv-popup> -->
	</view>
</template>

<script>
	import confirmationPopup from '@/components/toast/confirmationPopup.vue'
	export default {
		name:"contentControls",
		components : {
			confirmationPopup,
		},
		props : {
			type : {
				default : 0
			},
			detail : {
				default : {}
			},
			up : {
				default : false,
			},
			down : {
				default : false,
			},
			isWork : {
				default : false,
			}
		},
		data() {
			return {
				ju : [
					{
						title : '虚假信息',
					},
					{
						title : '其他原因',
					},
				],
				act : 0,
				text : '',
			};
		},
		created() {
			this.indexGetComplaintReason()
		},
		methods : {
			indexGetComplaintReason(){
				this.$api('indexGetComplaintReason', res => {
					if(res.code == 200){
						this.ju = res.result
					}
				})
			},
			// 举报
			bell(item){
				this.$api('infoReport', {
					type : this.type,
					id : this.detail.id,
					content : this.text
				}, res => {
					this.$refs.confirmationPopup.close()
					if(res.code == 200){
						this.$emit('loadData')
						uni.showToast({
							title: '举报成功',
							// 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
						})
					}
				})
			},
			// 踩
			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;
	}
	.confirmationPopup{
		overflow: auto;
		height: 100%;
		padding: 20rpx;
		padding-bottom: env(safe-area-inset-bottom);
		display: flex;
		justify-content: center;
		align-items: center;
		.confirmationInput{
			width: 80%;
			padding: 20rpx;
			border-radius: 50rpx;
			background-color: #f3f3f3;
		}
		.list{
			padding-bottom: env(safe-area-inset-bottom);
			&>view{
				margin: 20rpx;
				display: flex;
				justify-content: center;
				padding: 20rpx;
				border-radius: 10rpx;
				border: 1px solid #000;
			}
		}
	}
}
</style>