yixiang/pageA/pinglun-list.vue

<template>
	<view class="content">
		<view class="list-item" v-for="(item,index) in list" :key="index">
			<view class="top hflex acenter jbetween">
				<view class="user hflex acenter" v-if="item.user">
					<image :src="item.user.avatar" mode="aspectFill"></image>
					<view class="user-name vflex">
						<text>{{item.user.username}}</text>
						<text>{{item.created_at}}</text>
					</view>
				</view>
				<view class="reply-btn" @click="toreply(item)">回复</view>
			</view>
			<view class="text">{{item.content}}</view>
			<view class="vflex item">
				<view class="pinglun" v-if="item.parent">{{item.parent_user.username}}:<span
						style="color: #444444;padding-left: 8rpx;">{{item.parent.content}}</span></view>
				<view class="hflex acenter">
					<image :src="item.source.image" mode="aspectFill"></image>
					<text class="text_hide2">{{item.source.title}}</text>
				</view>
			</view>
		</view>
		<view class="huifu hflex acenter jbetween" v-if="show">
			<!-- <image :src="user.avatar" mode="aspectFill"></image> -->
			<u-input v-model="content" placeholder="添加新评论" border="none" adjustPosition focus></u-input>
			<text @click="reply">发送</text>
		</view>
	</view>
</template>

<script>
	import $api from '@/static/js/api.js'
	export default {
		data() {
			return {
				list: [],
				page: 1,
				last_page: 1,
				user_id: '',
				content: '',
				data: {},
				show: false
			}
		},
		onLoad() {
			this.user_id = uni.getStorageSync('userid')
			this.getlist()
		},
		onShow() {

		},
		onPullDownRefresh() {

		},
		onReachBottom() {

		},
		methods: {
			toreply(item) {
				this.data = item
				this.show = true
			},
			reply() {
				let item = this.data
				var that = this
				$api.req({
					url: 'comment',
					method: 'post',
					data: {
						source_type: item.source_type,
						source_id: item.source_id,
						content: this.content,
						parent_id: item.parent_id
						
					}
				}, function(res) {
					$api.info(res.msg)
					that.content = ''
					that.show = false
					setTimeout(()=> {
						that.getlist()
					})
				})
			},
			getlist() {
				var that = this
				$api.req({
					url: 'comment/my-list',
					data: {
						limit: 10,
						is_page: 1,
						page: that.page
					}
				}, function(res) {
					that.list = that.list.concat(res.data.list)
					that.last_page = res.data.last_page

				})
			},
		}
	}
</script>

<style lang="scss">
	.content {

		background: #F5F5F5;

		.list-item {
			padding: 0 0 20rpx;
			margin: 0 0 20rpx;
			background: #FFFFFF;

			.top {
				padding: 26rpx 28rpx;

				.user {

					// padding: 20rpx 0 0 ;
					image {
						width: 80rpx;
						height: 80rpx;
						border-radius: 50%;
						margin-right: 20rpx;
					}

					.user-name {
						text:first-child {
							font-size: 28rpx;
							font-family: PingFangSC, PingFang SC;
							font-weight: 500;
							color: #333333;
						}

						text:last-child {
							font-size: 22rpx;
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							color: #666666;
							padding-top: 4rpx;
						}
					}
				}

				.reply-btn {
					width: 104rpx;
					height: 52rpx;
					border-radius: 26rpx;
					border: 1rpx solid #979797;
					font-size: 24rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					color: #222222;
					line-height: 52rpx;
					text-align: center;
				}
			}

			.text {
				padding: 0 28rpx 20rpx;
				font-size: 28rpx;
				font-family: SFPro, SFPro;
				font-weight: 400;
				color: #333333;
			}

			.item {
				background: #F5F5F5;
				padding: 20rpx 28rpx;
				box-sizing: border-box;

				.pinglun {
					font-size: 26rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					color: #00B0B0;
					padding: 0 0 20rpx;
				}

				image {
					width: 160rpx;
					height: 90rpx;
				}

				text {
					font-size: 24rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					color: #222222;
					// background: #FFFFFF;
					// height: 90rpx;
					// box-sizing: border-box;
					padding: 10rpx 20rpx;
				}
			}
		}
		.huifu {
			position: fixed;
			bottom: 0;
			left: 0;
			height: 160rpx;
			z-index: 999;
			background: #FFFFFF;
			// box-shadow: 0rpx 0rpx 0rpx 0rpx rgba(0,0,0,0.1);
			padding: 20rpx 28rpx;
			box-sizing: border-box;
			width: 100%;
		
			image {
				width: 56rpx !important;
				height: 56rpx;
				border-radius: 50%;
				margin: 0 20rpx 0 0;
			}
		
			text {
				font-size: 32rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				color: #999999;
			}
		}
		
	}
</style>