
<template>
	<view class="uni-padding-wrap">
		<view class="" style="position:fixed;bottom: 0rpx;left: 0;width: 100%;">
			<form @submit="commitComments">
				<view style="display: flex;">
					<input class="contentTextArea" name="commentContent" v-model="commentContent" placeholder="请输入"></input>
					<button class="commitButton" formType="submit">发送</button>
				</view>
			</form>
		</view>
				
		<view class="uni-comment">
			<view class="uni-comment-list" v-for="(commentsList,index) in commentsList" :key="index">
				<view class="uni-comment-face">
					<image src="../../components/canvasShow/static/images/product/kefu.png" mode="widthFix"></image>
				</view>
				<view class="uni-comment-body">
					<view class="uni-comment-top">
						<text>{{commentsList.nickname==''||commentsList.nickname==null?'匿名':commentsList.nickname}}</text>
						<text class="uni-comment-date">{{commentsList.created_at}}</text>
					</view>				
					<text class="uni-comment-content">{{commentsList.content}}</text>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
	data(){
		return{
			commentsList:[
				{created_at:'2024-8-13 14:43:20',content:'wode',nickname:'娃娃店铺'},
				{created_at:'2024-8-13 14:43:20',content:'wode',nickname:'小羊'}
				
			],
			index:'',
			nickname:'',
			created_user_id:'',
			commentContent:'',
		}
	},
	mounted() {
	},
	methods:{
		
	}
}
</script>
    <style lang="scss" scoped>  
 .uni-padding-wrap{
	 height: calc(100vh - 100px);
	 position: relative;
 }
	view {
		font-size: 28upx;
	}
 
	.uni-comment {
		padding: 30upx;
		display: flex;
		flex-grow: 1;
		flex-direction: column;
	}
 
	.uni-comment-list {
		flex-wrap: nowrap;
		padding: 10rpx 0;
		margin: 10rpx 0;
		width: 100%;
		display: flex;
	}
 
	.uni-comment-face {
		width: 70upx;
		height: 70upx;
		border-radius: 100%;
		margin-right: 20upx;
		flex-shrink: 0;
		overflow: hidden;
	}
 
	.uni-comment-face image {
		width: 100%;
		border-radius: 100%;
	}
 
	.uni-comment-body {
		margin-top: 10rpx;
		width: 100%;
	}
 
	.uni-comment-top {
		display: flex;
		justify-content: flex-start;
		line-height: 1.5em;
		
	}
 
	.uni-comment-top text {
		color: #0A98D5;
		margin-right: 20rpx;
		font-size: 24upx;
	}
 
	.uni-comment-top{
		.uni-comment-date {
				color: #666666	
		}
	}
 
	.uni-comment-content {
		line-height: 1.6em;
		font-size: 28upx;
		padding: 8rpx 0;
	}
 
	.uni-comment-replay-btn {
		background: #FFF;
		font-size: 24upx;
		line-height: 28upx;
		padding: 5rpx 20upx;
		border-radius: 30upx;
		color: #333 !important;
		margin: 0 10upx;
	}
	.commitButton{
		height: 64rpx;
		color: white;
		width: 20%;
		margin: 0rpx auto;
		font-size: 27rpx;
		color: #000;
		background: #fff;
	}
	.contentTextArea{
		font-size: 30rpx;
		background-color: #fff;
		border:1rpx solid #e9e7ef;
		border-right: 0px solid transparent;
		width: 80%;
		height: 40rpx;
		margin: 0rpx auto;
		padding: 10rpx 0 10rpx 20rpx;
		border-radius: 6rpx;
	}
</style>