From cc61f4a42e135360133f7715376e029b5904f001 Mon Sep 17 00:00:00 2001
From: MrShi <1878285526@qq.com>
Date: 星期五, 13 二月 2026 09:51:04 +0800
Subject: [PATCH] 合并
---
mini-program/pages/article-details/article-details.vue | 344 ++++++++++++++++++++++++++++++++++++++++++++++++--------
1 files changed, 293 insertions(+), 51 deletions(-)
diff --git a/mini-program/pages/article-details/article-details.vue b/mini-program/pages/article-details/article-details.vue
index d9478ca..b87b75a 100644
--- a/mini-program/pages/article-details/article-details.vue
+++ b/mini-program/pages/article-details/article-details.vue
@@ -8,85 +8,87 @@
<view class="xian"></view>
<view class="pl">
<view class="pl-title">璇勮 {{info.commentCount || 0}}</view>
- <view class="pl-wu">
+ <view class="pl-wu" v-if="commentList.length === 0">
<image src="/static/images/default_nocomment@2x.png" mode="widthFix"></image>
</view>
- <!-- <view class="pl-item">
+ <view class="pl-item" v-for="(item, index) in commentList" :key="item.id" v-else @click="openTwo(item.id, item)">
<view class="pl-item-tx">
- <image src="/static/logo.png" mode="widthFix"></image>
+ <image :src="item.memberImgUrl" mode="widthFix"></image>
</view>
<view class="pl-item-info">
- <view class="pl-item-info-name">鏉庝竾鏁�</view>
- <view class="pl-item-info-content">
- 褰撳墠鎸栨帢鏈烘妧鏈鏈濈潃鐢靛姩鍖栥�佹櫤鑳藉寲鍜岀豢鑹茬幆淇濈殑鏂瑰悜蹇�熷彂灞�
+ <view class="pl-item-info-name">{{item.nikeName}}</view>
+ <view class="pl-item-info-content" v-if="item.content">
+ {{item.content}}
</view>
- <view class="pl-item-info-list">
- <view class="pl-item-info-list-image">
- <image src="/static/logo.png" mode="widthFix"></image>
- </view>
- <view class="pl-item-info-list-image">
- <image src="/static/logo.png" mode="widthFix"></image>
+ <view class="pl-item-info-list" v-if="item.multifileList && item.multifileList.length > 0">
+ <view class="pl-item-info-list-image" v-for="(child, i) in item.multifileList" :key="i" @click="yulan(child.fileFullUrl, item.multifileList)">
+ <image :src="child.fileFullUrl" mode="widthFix"></image>
</view>
<view style="width: 132rpx; height: 0;"></view>
<view style="width: 132rpx; height: 0;"></view>
</view>
<view class="pl-item-info-data">
- <view class="pl-item-info-data-time">30鍒嗛挓鍓�</view>
+ <view class="pl-item-info-data-time">{{$u.timeFormat(new Date(item.createDate).getTime())}}</view>
<view class="pl-item-info-data-list">
- <view class="pl-item-info-data-list-item">
+ <view class="pl-item-info-data-list-item" @click="sendChild(item.id, index)">
<image src="/static/icon/ic_reply2@2x.png" mode="widthFix"></image>
</view>
- <view class="pl-item-info-data-list-item">
- <image src="/static/icon/dianzan.png" mode="widthFix"></image>
- <text>3</text>
+ <view class="pl-item-info-data-list-item" @click.stop="dianzanpl(item)">
+ <image src="/static/icon/dianzan.png" mode="widthFix" v-if="!item.zanStatus || item.zanStatus == 0"></image>
+ <image src="/static/icon/detail_ic_zan_sel@2x.png" mode="widthFix" v-else></image>
+ <text :style="{color: (!item.zanStatus || item.zanStatus == 0) ? '#AAAAAA' : '#004096'}">{{item.zanCount}}</text>
</view>
</view>
</view>
-
- <view class="pl-item" style="border: none;">
+ <view class="pl-item" style="border: none;" v-for="(child, a) in item.childern" :key="child.id" @click="openTwo(item.id, child)">
<view class="pl-item-tx">
- <image src="/static/logo.png" mode="widthFix"></image>
+ <image :src="child.memberImgUrl" mode="widthFix"></image>
</view>
<view class="pl-item-info">
- <view class="pl-item-info-name">鏉庝竾鏁�</view>
- <view class="pl-item-info-content">
- 褰撳墠鎸栨帢鏈烘妧鏈鏈濈潃鐢靛姩鍖栥�佹櫤鑳藉寲鍜岀豢鑹茬幆淇濈殑鏂瑰悜蹇�熷彂灞�
+ <view class="pl-item-info-name">{{child.nikeName}}</view>
+ <view class="pl-item-info-content" v-if="child.content">
+ {{child.content}}
</view>
- <view class="pl-item-info-list">
- <view class="pl-item-info-list-image">
- <image src="/static/logo.png" mode="widthFix"></image>
- </view>
- <view class="pl-item-info-list-image">
- <image src="/static/logo.png" mode="widthFix"></image>
+ <view class="pl-item-info-list" v-if="child.multifileList && child.multifileList.length > 0">
+ <view class="pl-item-info-list-image" v-for="(child1, i) in child.multifileList" :key="i">
+ <image :src="child1.fileFullUrl" mode="widthFix"></image>
</view>
<view style="width: 132rpx; height: 0;"></view>
<view style="width: 132rpx; height: 0;"></view>
</view>
<view class="pl-item-info-data">
- <view class="pl-item-info-data-time">30鍒嗛挓鍓�</view>
+ <view class="pl-item-info-data-time">{{child.createDate}}</view>
<view class="pl-item-info-data-list">
<view class="pl-item-info-data-list-item">
<image src="/static/icon/ic_reply2@2x.png" mode="widthFix"></image>
</view>
- <view class="pl-item-info-data-list-item">
- <image src="/static/icon/dianzan.png" mode="widthFix"></image>
- <text>3</text>
+ <view class="pl-item-info-data-list-item" @click.stop="dianzanpl(child)">
+ <image src="/static/icon/dianzan.png" mode="widthFix" v-if="!child.zanStatus || child.zanStatus == 0"></image>
+ <image src="/static/icon/detail_ic_zan_sel@2x.png" mode="widthFix" v-else></image>
+ <text :style="{color: (!child.zanStatus || child.zanStatus == 0) ? '#AAAAAA' : '#004096'}">{{child.zanCount}}</text>
</view>
</view>
</view>
</view>
</view>
+ <view class="pl-more" v-if="item.childern.length > 0">灞曞紑2鏉″洖澶�</view>
</view>
- </view> -->
+ </view>
</view>
<view style="width: 100%; height: calc(100rpx + env(safe-area-inset-bottom));"></view>
<view class="footer">
<view class="footer-box">
- <input type="text" placeholder="蹇潵璇寸偣浠�涔堝惂锝�">
+ <input type="text" placeholder="蹇潵璇寸偣浠�涔堝惂锝�" disabled @click="show1 = true" />
<view class="footer-box-images">
- <image src="/static/icon/ic_like@2x.png" mode="widthFix"></image>
- <image src="/static/icon/ic_collect@2x.png" mode="widthFix"></image>
- <image src="/static/icon/ic_share@2x.png" mode="widthFix"></image>
+ <image src="/static/icon/ic_like_sel@2x.png" mode="widthFix" @click="dianzan(1)" v-if="info.zanStatus == 1"></image>
+ <image src="/static/icon/ic_like@2x.png" mode="widthFix" @click="dianzan(2)" v-else></image>
+ <image src="/static/icon/ic_collect_sel@2x.png" mode="widthFix" @click="shoucang(1)" v-if="info.collectStatus === 1"></image>
+ <image src="/static/icon/ic_collect@2x.png" mode="widthFix" @click="shoucang(2)" v-else></image>
+ <view class="fenxiang">
+ <button open-type="share">鍒嗕韩</button>
+ <image src="/static/icon/ic_share@2x.png" mode="widthFix"></image>
+ </view>
+
</view>
</view>
<view style="width: 100%; height: env(safe-area-inset-bottom);"></view>
@@ -100,16 +102,16 @@
</view>
</u-popup>
<!-- 鍙戝竷璇勮 -->
- <u-popup :show="show1" round="5" mode="bottom">
+ <u-popup :show="show1" round="5" mode="bottom" @close="closePush">
<view class="pus">
<view class="pus-content">
- <textarea placeholder="璇寸偣浠�涔堝惂锝�"></textarea>
- <view class="pus-content-list">
- <view class="pus-content-list-item" v-for="(item, index) in 1" :key="index">
- <view class="shanchu">
+ <textarea placeholder="璇寸偣浠�涔堝惂锝�" v-model="value"></textarea>
+ <view class="pus-content-list" v-if="multifileList.length > 0">
+ <view class="pus-content-list-item" v-for="(item, index) in multifileList" :key="index">
+ <view class="shanchu" @click.stop="deleImg(index)">
<image src="/static/icon/ic_delete2@2x.png" mode="widthFix"></image>
</view>
- <image src="/static/logo.png" mode="widthFix"></image>
+ <image :src="item.fileFullUrl" mode="widthFix"></image>
</view>
<view style="width: 100rpx; height: 0;"></view>
<view style="width: 100rpx; height: 0;"></view>
@@ -117,8 +119,8 @@
</view>
</view>
<view class="pus-cz">
- <image src="/static/icon/ic_pic@2x.png" mode="widthFix"></image>
- <view class="pus-cz-btn">鍙戦��</view>
+ <image src="/static/icon/ic_pic@2x.png" mode="widthFix" @click="uploadFile"></image>
+ <view class="pus-cz-btn" @click="sendComment">鍙戦��</view>
</view>
</view>
</u-popup>
@@ -126,28 +128,238 @@
</template>
<script>
+ import { mapState } from 'vuex'
+ import { dateConversion } from '@/utils/utils.js'
export default {
+ computed: {
+ ...mapState(['userInfo', 'token'])
+ },
data() {
return {
id: null,
show: false,
show1: false,
info: null,
- content: ''
+ content: '',
+ commentList: [],
+ page: 1,
+ next: true,
+ value: '',
+ multifileList: [],
+
+ commentId: null,
+ item: null
}
},
onLoad(option) {
this.id = option.id
this.getDetails()
},
+ onShareAppMessage(e) {
+ if (e.from === 'button') {
+ return {
+ title: this.info.name,
+ path: '/pages/article-details/article-details?id=' + this.info.id
+ }
+ }
+ },
methods: {
- getDetails() {
- this.$u.api.getArticleDetail({
- id: this.id
+ // 鐐硅禐
+ dianzanpl(item) {
+ if (!item.zanStatus || item.zanStatus == 0) {
+ this.$u.api.zanCreate({
+ objId: item.id,
+ objType: 1
+ }).then(res => {
+ if (res.code === 200) {
+ item.zanStatus = 1
+ item.zanCount += 1
+ }
+ })
+ } else {
+ this.$u.api.zanCancel({
+ objId: item.id,
+ objType: 1
+ }).then(res => {
+ if (res.code === 200) {
+ item.zanStatus = 0
+ item.zanCount -= 1
+ }
+ })
+ }
+ },
+ // 浜岀骇璇勮
+ openTwo(commentId, item) {
+ this.item = item
+ this.commentId = commentId
+ this.show1 = true
+ },
+ // 鍒犻櫎鍥剧墖
+ deleImg(index) {
+ this.multifileList.splice(index, 1)
+ },
+ // 棰勮璇勮鍥剧墖
+ yulan(current, arr) {
+ uni.previewImage({
+ urls: arr.map(item => item.fileFullUrl),
+ current
+ })
+ },
+ // 涓婁紶鍥剧墖
+ uploadFile() {
+ var that = this;
+ uni.chooseImage({
+ count: 9,
+ sizeType: ['compressed'],
+ success: function (res) {
+ let total = res.tempFilePaths.length;
+ let index = 0
+ let down = async () => {
+ if (res.tempFilePaths[index]) {
+ uni.uploadFile({
+ url: `${that.$baseUrl}public/upload`,
+ filePath: res.tempFilePaths[index],
+ name: 'file',
+ fileType: 'image',
+ header: { 'token': that.token },
+ formData: { folder: 'commet' },
+ success: (uploadFileRes) => {
+ let result = JSON.parse(uploadFileRes.data)
+ that.multifileList.push({
+ fileFullUrl: result.data.url,
+ fileurl: result.data.imgaddr
+ })
+ index++
+ if (index !== total) {
+ down()
+ }
+ }
+ });
+ }
+ }
+ down()
+ }
+ });
+ },
+ closePush() {
+ this.item = null
+ this.commentId = null
+ this.value = ''
+ this.multifileList = []
+ this.show1 = false
+ },
+ // 璇勮
+ sendComment() {
+ if (!this.value && this.multifileList.length === 0) return uni.showToast({
+ title: '璇勮鍐呭涓嶈兘涓虹┖',
+ icon: 'none'
+ })
+ this.$u.api.commentApply({
+ activityId: this.info.id,
+ content: this.value,
+ multifileList: this.multifileList,
+ commentId: this.commentId,
+ replyId: this.item ? this.item.id : null
}).then(res => {
if (res.code === 200) {
- console.log(res)
+ res.data.createDate = dateConversion(res.data.createDate)
+ res.data.activityReplyCommentDTO = []
+ // 瀛愮骇鎻掓暟鎹�
+ if (this.commentId) {
+ this.commentList.forEach(item => {
+ if (item.id === this.commentId) {
+ item.commentList.childern.unshift(res.data)
+ }
+ })
+ } else {
+ this.commentList.unshift(res.data)
+ }
+ this.multifileList = []
+ this.value = ''
+ this.show1 = false
+ }
+ })
+ },
+ // 涓�绾ц瘎璁哄垪琛�
+ getList() {
+ if (!this.next) return;
+ this.$u.api.findActivityCommentDTOPage({
+ capacity: 10,
+ page: this.page,
+ model: {
+ activityId: this.info.id,
+ status: 0,
+ type: 0,
+ memberId: this.userInfo ? this.userInfo.id : null
+ }
+ }).then(res => {
+ if (res.code === 200) {
+ res.data.records.forEach(item => {
+ item.createDate = dateConversion(item.createDate)
+ item.childern = []
+ if (item.activityReplyCommentDTO) {
+ item.activityReplyCommentDTO.createDate = dateConversion(item.activityReplyCommentDTO.createDate)
+ item.childern.push(item.activityReplyCommentDTO)
+ }
+ })
+ this.page++
+ this.commentList.push(...res.data.records)
+ if (this.commentList.length === res.data.total) {
+ this.next = false
+ }
+ }
+ })
+ },
+ shoucang(type) {
+ if (type === 1) {
+ this.$u.api.cancelbatch({
+ ids: this.info.id,
+ objType: 0
+ }).then(res => {
+ if (res.code === 200) {
+ this.info.collectStatus = 0
+ }
+ })
+ } else {
+ this.$u.api.saveCollect({
+ objId: this.info.id,
+ type: 0
+ }).then(res => {
+ if (res.code === 200) {
+ this.info.collectStatus = 1
+ }
+ })
+ }
+ },
+ dianzan(type) {
+ if (type === 1) {
+ this.$u.api.zanCancel({
+ objId: this.info.id,
+ objType: 0
+ }).then(res => {
+ if (res.code === 200) {
+ this.info.zanStatus = 0
+ }
+ })
+ } else {
+ this.$u.api.zanCreate({
+ objId: this.info.id,
+ objType: 0
+ }).then(res => {
+ if (res.code === 200) {
+ this.info.zanStatus = 1
+ }
+ })
+ }
+ },
+ getDetails() {
+ this.$u.api.getArticleDetail({
+ id: this.id,
+ memberId: this.userInfo.id
+ }).then(res => {
+ if (res.code === 200) {
this.info = res.data
+ this.getList()
}
})
}
@@ -283,7 +495,30 @@
}
.footer-box-images {
flex-shrink: 0;
+ display: flex;
+ align-items: center;
margin-left: 40rpx;
+ .fenxiang {
+ width: 48rpx;
+ height: 48rpx;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ overflow: hidden;
+ margin-right: 30rpx;
+ position: relative;
+ button {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ opacity: 0;
+ }
+ image {
+ width: 100%;
+ }
+ }
image {
width: 48rpx;
height: 48rpx;
@@ -318,6 +553,13 @@
margin-top: 50rpx;
}
}
+ .pl-more {
+ padding-left: 92rpx;
+ box-sizing: border-box;
+ font-weight: 400;
+ font-size: 28rpx;
+ color: #557593;
+ }
.pl-item {
width: 100%;
padding: 24rpx 0;
--
Gitblit v1.9.3