vue3评论

<template>
	<div class="comment-list">
		<div class="top">
			{{ info.length }}条评论
			<span class="zy_cross" @click="guan"></span>
		</div>
		<div class="comment-item-wrap">
			<div style="transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); transition-duration: 0ms; transform: translate(0px, 0px) scale(1) translateZ(0px);">
				<div class="comment-item" v-for="item, index in info" ref="commentItem" :key="index">
					<img :src="'http://43.138.15.137:3000' + item.Comment.userAvatar" class="avatar">
					<div class="main">
						<p class="name">@{{ item.Comment.userNickname }}</p>
						<p class="content">{{ item.Comment.commentContent }}</p>
						<p class="time">{{ toTime(item.Comment.createdAt) }}</p>
					</div>
					<div class="like">
						<i class="iconfont icon-aixin_shixin" @click="zy(item, index)" ref="uers">
						</i>
						<p class="like-desc">{{ item.likeNum }}</p>
					</div>
				</div>
				<div class="no-more">暂时没有更多了</div>
			</div>
		</div>
		<div class="input-bar">
			<input type="text" placeholder="  有爱评论，说点儿好听的~（长按评论回复）" class="input" v-model="msgs">
			<span class="  iconfont icon-gps gps" @click="suoyin"></span>
			<span class=" iconfont icon-duihao dui" @click="fabu(item)"></span>
		</div>
		<Transition name="routede">
			<Asyncsuoyin v-if="suoxian"></Asyncsuoyin>
		</Transition>
	</div>
</template>
<script setup>
import { ref, defineProps, defineAsyncComponent, onMounted } from 'vue'
import { getdianzanplAPI } from '../api/dianzan'
import { postfabuplAPI } from '../api/fabupinglun.js'
const Asyncsuoyin = defineAsyncComponent({
	loader: () => (new Promise((resolve, reject) =>
		resolve(import('../components/suyinlan.vue'))

	))
})
let dis = ref(null);
let msgs = ref('');
let dq = ref('');
let shipid = ref('')
const emits = defineEmits()
const guan = () => {
	emits("guan")
}
let { info, spid } = defineProps(['info', 'spid'])
console.log(spid, 'wdfs');
let suoxian = ref(false)
let uers = ref(null);

function toTime(timestamp) {
	var date = new Date(timestamp);
	var Y = (date.getFullYear() + '').padStart(2, 0) + '-';
	var M = Number((date.getMonth() + '').padStart(2, 0)) + 1 + '-';
	var D = (date.getDate() + '').padStart(2, 0) + ' ';
	var h = (date.getHours() + '').padStart(2, 0) + ':';
	var m = (date.getMinutes() + '').padStart(2, 0) + ':';
	var s = (date.getSeconds() + '').padStart(2, 0);
	return Y + M + D + h + m + s
}
async function zy(item, index) {
	let reslyt = await getdianzanplAPI({ userId: item.Comment.userId, videoId: item.Comment.videoId, commentId: item.Comment.commentId });

	if (reslyt.data.data == '喜欢评论成功') {
		uers.value[index].style = 'color:red;'
		item.likeNum++
	} else {
		uers.value[index].style = 'color:#505052;'
		item.likeNum--
	}
}
let userId = localStorage.getItem('userId');
async function fabu() {
	if (msgs.value !== '') {
		let pinglun = postfabuplAPI({
			fromUserId: localStorage.getItem('userId'),
			replyId: '',
			content: msgs.value,
			toVideoId: spid
		})

		guan()
	} else {
		alert('qingshuru')
	}

}
function suoyin() {
	suoxian.value = true
}
</script>
<style scoped lang="scss">
.routede-enter-active {
	animation: jin 1s;
}

.routede-leave-active {
	animation: chu 1s;
}

@keyframes jin {
	from {
		transform: translateY(100%);
	}

	to {
		transform: translateY(0);
	}

}

@keyframes chu {
	from {
		transform: translateY(0);
	}

	to {
		transform: translateY(100%);
	}

}

.comment-list {
	position: fixed;
	bottom: 0;
	height: 70%;
	width: 100%;
	background: rgba(22, 24, 35, 0.98);
	border-top-left-radius: 8px;
	border-top-right-radius: 8px;
	z-index: 1455;

	.top {
		position: relative;
		text-align: center;
		padding: 10px 0;
		color: #626260;
		font-size: 12px;
		font-weight: 600;

		.zy_cross {
			position: absolute;
			right: 10px;
			width: 16px;
			height: 16px;

			&::before,
			&::after {
				content: '';
				position: absolute;
				width: 100%;
				height: 1.5px;
				background-color: #e8e8e9;
				top: 50%;
				left: 0;
				transform: translateY(-50%);
			}
		}

		.zy_cross::before {
			transform: rotate(45deg);
		}

		.zy_cross::after {
			transform: rotate(-45deg);
		}
	}

	.comment-item-wrap {
		position: absolute;
		top: 32px;
		bottom: 44px;
		overflow: auto;
		width: 100%;
		// overflow-y: scroll;

		div {
			.no-more {
				text-align: center;
				font-size: 12px;
				color: #65676e;
				padding-bottom: 12px;
			}

			.comment-item {
				display: flex;
				padding: 0 0 0 10px;

				.avatar {
					margin-top: 10px;
					border-radius: 50%;
					width: 40px;
					height: 40px;
				}

				.main {
					padding: 10px;
					flex: 1;
					border-bottom: 1px solid rgba(41, 40, 37, 0.8);

					.name {
						color: #a6a5a4;
						font-size: 12px;
					}

					.content {
						padding: 5px 0;
						color: #e8e8e9;
						font-size: 14px;
					}

					.time {
						color: #626260;
						font-size: 12px;
					}
				}

				.like {
					width: 44px;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					color: #505052;

					.like-desc {
						margin-top: 5px;
						font-size: 12px;
					}

					.zy_heart-fill {
						position: relative;
						width: 8px;
						height: 8px;
						transform: rotate(45deg);
						background: #505052;
						display: inline-block;

						.before,
						.after {
							position: absolute;
							display: block;
							width: 8px;
							height: 8px;
							border-radius: 100%;
							background: #505052;
						}

						.before {
							left: -50%;
							top: 0;
						}

						.after {
							left: 0;
							top: -50%;
						}
					}
				}
			}
		}
	}

	.input-bar {
		width: 100%;
		display: flex;
		height: 44px;
		position: absolute;
		bottom: 0;
		background: #1a1b20;

		.input {
			background: #1a1b20;
			flex: 1;
			font-size: 14px;
			color: #e8e8e9;
			padding-left: 10px;
			caret-color: #face15;
		}

		span {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 44px;
		}

		.zy_check {
			position: relative;

			&::before,
			&::after {
				content: '';
				position: absolute;
				background-color: #fff;
			}
		}

		.zy_check::before {
			width: 1.5px;
			height: 14px;
			top: 11px;
			left: 18.5px;
			transform: rotate(45deg);
			transform-origin: bottom left;
		}

		.zy_check::after {
			width: 1.5px;
			height: 8px;
			top: 18px;
			left: 18px;
			transform: rotate(-45deg);
			transform-origin: bottom right;
		}

		.zy_at {
			font-size: 16px;
		}

		.dui {
			font-size: 20px;
			color: white;
		}

		.gps {
			font-size: 20px;
			color: white;
		}
	}
}
</style>