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