edit

pages.json

@@ -30,6 +30,16 @@
 				}
 			}
 		},
+		{
+			"path": "pages/dream/comment",
+			"style": {
+				"app-plus": {
+					"titleNView": false,
+					"bounce": "none",
+					"navigationStyle": "custom"
+				}
+			}
+		},
         {
             "path" : "pages/dream/view",
             "style": {

pages/dream/comment.vue

@@ -0,0 +1,153 @@
+<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>

pages/dream/view/dream.vue

@@ -177,10 +177,12 @@ export default {
 
 .comment {
   bottom: 220rpx;
+  background-color: #ff5500;
 }
 
 .select {
   bottom: 130rpx;
+  background-color: #3688ff;
 }
 
 </style>