dreamland/pages/dream/comment.vue

<template>
	<gracePage :customHeader="false" footerBg="#FFFFFF">
		<!-- 页面主体 -->
		<view slot="gBody" class="grace-body">
			<view class="grace-margin-top">
				<text class="grace-title">静态演示</text>
			</view>
			<view class="grace-comments">
				<view class="grace-comments-items">
					<image src="https://graceui.oss-cn-beijing.aliyuncs.com/faces/1.png" class="grace-comments-face"></image>
					<view class="grace-comments-body">
						<view class="grace-comments-header">
							<text class="grace-comments-header-text">刘美丽</text>
							<text class="grace-comments-info-text">08/10 08:12</text>
						</view>
						<text class="grace-comments-content">上天呀！我渴望与你相知相惜，长存此心永不褪减。</text>
						<text class="grace-comments-replay">某某回复 : 回复文本</text>
						<view class="grace-comments-info">
							<text class="grace-comments-replay-btn">回复</text>
							<text class="grace-comments-header-text grace-icons icon-zan"> 999</text>
						</view>
					</view>
				</view>
				<view class="grace-comments-items">
					<image src="https://graceui.oss-cn-beijing.aliyuncs.com/faces/2.png" class="grace-comments-face"></image>
					<view class="grace-comments-body">
						<view class="grace-comments-header">
							<text class="grace-comments-header-text">王小宝</text>
						</view>
						<text class="grace-comments-content">上天呀！我渴望与你相知相惜，长存此心永不褪减。</text>
						<view class="grace-comments-imgs">
							<view class="grace-comments-image"><image src="https://graceui.oss-cn-beijing.aliyuncs.com/scollimgs/4.png" class="grace-comments-img"></image></view>
							<view class="grace-comments-image"><image src="https://graceui.oss-cn-beijing.aliyuncs.com/scollimgs/3.png" class="grace-comments-img"></image></view>
							<view class="grace-comments-image"><image src="https://graceui.oss-cn-beijing.aliyuncs.com/scollimgs/2.png" class="grace-comments-img"></image></view>
							<view class="grace-comments-image"><image src="https://graceui.oss-cn-beijing.aliyuncs.com/scollimgs/1.png" class="grace-comments-img"></image></view>
							<view class="grace-comments-image"><image src="https://graceui.oss-cn-beijing.aliyuncs.com/scollimgs/4.png" class="grace-comments-img"></image></view>
							<view class="grace-comments-image"><image src="https://graceui.oss-cn-beijing.aliyuncs.com/scollimgs/3.png" class="grace-comments-img"></image></view>
						</view>
						<view class="grace-comments-info">
							<text class="grace-comments-info-text">08/10 08:1208/10 08:12</text>
							<text class="grace-comments-info-text grace-icons icon-zan"> 999</text>
						</view>
					</view>
				</view>
			</view>
			
			<view class="grace-margin-top">
				<text class="grace-title">动态数据演示</text>
			</view>
			<view class="grace-comments">
				<view class="grace-comments-items" v-for="(item, index) in commentContents" :key="index">
					<image  :src="item.face" class="grace-comments-face"></image>
					<view class="grace-comments-body">
						<view class="grace-comments-header">
							<text class="grace-comments-header-text">{{item.name}}</text>
							<text class="grace-comments-header-text grace-icons">&#xe6ea; {{item.zan}}</text>
						</view>
						<text class="grace-comments-content">{{item.content}}</text>
						<view class="grace-comments-imgs" v-if="item.imgs">
							<view class="grace-comments-image" v-for="(img, indexImg) in item.imgs" :key="indexImg">
								<image :src="img" mode="widthFix" class="grace-comments-img" @click.stop="showImgs(index, indexImg)"></image>
							</view>
						</view>
						<view v-if="item.Reply">
							<text v-for="(itemRe, indexRe) in item.Reply" :key="indexRe" class="grace-comments-replay">{{itemRe.name}} : {{itemRe.content}}</text>
						</view>
						<view class="grace-comments-info">
							<text class="grace-comments-replay-btn">回复</text>
							<text class="grace-comments-info-text">{{item.date}}</text>
						</view>
					</view>
				</view>
			</view>
			<!-- 占位视图 用于避开底部遮盖 -->
			<view style="height:120rpx;"></view>
		</view>
		<!-- 底部提交输入框 -->
		<view class="grace-nowrap grace-flex-vcenter grace-bg-white" slot="gFooter">
			<view class="grace-footer-input-body">
				<text class="grace-footer-input-icon grace-icons icon-write"></text>
				<input type="text" value="" v-model="commentContent" placeholder="说点什么吧..." class="grace-footer-input" />
			</view>
			<text class="grace-footer-subtext grace-blue" @tap="submitCommnets">提交</text>
		</view>
	</gracePage>
</template>
<script>
import gracePage from "@/lib/graceUI/components/gracePage.vue";
export default {
    data() {
		return {
			// 模拟评论数据 (实际项目来自api请求)
			commentContents : [
				{
					"content":"故国三千里，深宫二十年。一声何满子，双泪落君前。",
					"name":"graceUI - 小码",
					"face":"https://graceui.oss-cn-beijing.aliyuncs.com/faces/1.png",
					"date":"08/10 08:00",
					"zan" : 188,
					"Reply" : [
						{'name' : "张晓曦", "content":"不错不错"},
						{'name' : "王大陆", "content":"赞了~"},
					]
				},
				{
					"content":"而今渐行渐远，渐觉虽悔难追。漫寄消寄息，终久奚为。也拟重论缱绻，争奈翻覆思维。纵再会，只恐恩情，难似当时。",
					"name":"路过繁华",
					"face":"https://graceui.oss-cn-beijing.aliyuncs.com/faces/2.png",
					"date":"02/10 18:00",
					"zan" : 288
				},
				{
					"content":"图片回复，点击图片可以预览......",
					"name":"林夕阳",
					"imgs" : [
						"https://graceui.oss-cn-beijing.aliyuncs.com/scollimgs/4.png",
						"https://graceui.oss-cn-beijing.aliyuncs.com/scollimgs/3.png",
						"https://graceui.oss-cn-beijing.aliyuncs.com/scollimgs/1.png",
					],
					"face":"https://graceui.oss-cn-beijing.aliyuncs.com/faces/2.png",
					"date":"08/12 09:00",
					"zan" : 955
				}
			],
			commentContent : ''
		}
	},
	methods:{
		submitCommnets : function(){
			uni.showToast({
				title:"评论内容 : " + this.commentContent,
				icon:"none"
			});
		},
		showImgs : function(commentsIndex, imgIndex){
			console.log(commentsIndex, imgIndex);
			uni.previewImage({
				urls:this.commentContents[commentsIndex].imgs,
				current:this.commentContents[commentsIndex].imgs[imgIndex]
			})
		}
	},
	components:{
		gracePage
	}
}
</script>
<style>
/* 请根据项目来规划自己的图片大小，请对图片进行等比缩放 
.grace-comments-image{width:190rpx; height:138rpx; margin:5rpx; font-size:0; overflow:hidden;}
.grace-comments-img{width:190rpx; height:138rpx; border-radius:3rpx;}
*/
</style>