Merge remote-tracking branch 'origin/master'

doum

11 小时以前 8dfc59832df6e86f1840857a5b497faa9061a2af

 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_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) {
                  console.log(res)
                     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) {
                  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;