|
|
@@ -0,0 +1,150 @@
|
|
|
+<template>
|
|
|
+ <view class="article">
|
|
|
+ <image class="header-bg" :src="url" />
|
|
|
+ <div class="content">
|
|
|
+ <rich-text :nodes="content" />
|
|
|
+ </div>
|
|
|
+ <div class="list">
|
|
|
+ <view class="title">全部评论</view>
|
|
|
+ <view v-for="item in tableData" :key="item.commentId" style="margin-bottom: 48rpx">
|
|
|
+ <view flex between>
|
|
|
+ <view flex center>
|
|
|
+ <img class="avatar" :src="item.userAvatar" />
|
|
|
+ <view style="opacity: 0.7; margin-left: 20rpx">
|
|
|
+ <view style="fontSize: 26rpx">{{ item.userName }}</view>
|
|
|
+ <view style="fontSize: 22rpx">{{ item.createTime }}</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view flex center style="opacity: 0.7">
|
|
|
+ <uni-icons type="hand-up" size="20" color="#FFF" />
|
|
|
+ <view>{{ item.likeNum }}</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="item-content">
|
|
|
+ <view style="fontSize:28rpx">
|
|
|
+ {{ item.content }}
|
|
|
+ </view>
|
|
|
+ <view class="sub-content" v-if="item.replyList.length > 0">
|
|
|
+ <view v-for="i in item.replyList.slice(0, 2)" :key="i.replyId" style="margin-bottom: 10rpx">
|
|
|
+ <view v-if="i.replyType === 0">
|
|
|
+ <span style="color:#A4D099">
|
|
|
+ {{ i.fromUserName }}：
|
|
|
+ </span>{{ i.content }}
|
|
|
+ </view>
|
|
|
+ <view v-else>
|
|
|
+ <span style="color:#A4D099">
|
|
|
+ {{ i.fromUserName }}</span>回复
|
|
|
+ <span style="color:#A4D099">
|
|
|
+ {{ i.toUserName }}：</span>
|
|
|
+ {{ i.content }}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view v-if="item.replyList.length > 2" style="color:#A4D099">共{{ item.replyTotal }}条回复 ></view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </div>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { detail, list } from '@/api/article.js'
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ // 表单
|
|
|
+ form: {
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 10
|
|
|
+ },
|
|
|
+ // 背景图
|
|
|
+ url: '',
|
|
|
+ // 内容
|
|
|
+ content: '',
|
|
|
+ // 列表
|
|
|
+ tableData: [],
|
|
|
+ // 是否还有下一页
|
|
|
+ hasMore: false,
|
|
|
+ // 只触发一次
|
|
|
+ only: true
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onLoad(e) {
|
|
|
+ if (e) {
|
|
|
+ this.form.articleId = e.articleId
|
|
|
+ detail({
|
|
|
+ articleId: e.articleId
|
|
|
+ }).then(res => {
|
|
|
+ if (res.data.code === 0) {
|
|
|
+ this.url = res.data.data.pic
|
|
|
+ this.content = res.data.data.content
|
|
|
+ }
|
|
|
+ })
|
|
|
+ this.getList()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 页面触底
|
|
|
+ onReachBottom() {
|
|
|
+ if (this.hasMore) {
|
|
|
+ this.form.pageNum++
|
|
|
+ this.getList()
|
|
|
+ } else {
|
|
|
+ if (this.only) {
|
|
|
+ uni.showToast({
|
|
|
+ icon: 'none',
|
|
|
+ title: '暂无更多评论'
|
|
|
+ })
|
|
|
+ this.only = false
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ getList() {
|
|
|
+ list(this.form).then(res => {
|
|
|
+ if (res.data.code === 0) {
|
|
|
+ res.data.data.records.map(i => {
|
|
|
+ this.tableData.push(i)
|
|
|
+ })
|
|
|
+ this.hasMore = res.data.data.hasMore
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.header-bg {
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+.content {
|
|
|
+ padding: 48rpx 32rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.title {
|
|
|
+ margin-bottom: 32rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.list {
|
|
|
+ padding: 32rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.avatar {
|
|
|
+ width: 80rpx;
|
|
|
+ height: 80rpx;
|
|
|
+ border-radius: 50%;
|
|
|
+}
|
|
|
+
|
|
|
+.item-content {
|
|
|
+ margin-left: 100rpx;
|
|
|
+ margin-top: 22rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.sub-content {
|
|
|
+ background: #232323;
|
|
|
+ padding: 16rpx;
|
|
|
+ font-size: 26rpx;
|
|
|
+ margin-top: 10rpx;
|
|
|
+}
|
|
|
+</style>
|
