ufutx_love_mp/src/components/dynamicDiscuss.wpy

<style lang="less">
.ui-discuss-box{
  padding-bottom: 240rpx;
}

.operation_mask{
  width: 100vw;
  height: 100vh;
  background: rgba(255, 255, 255, 0);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2222;
}

.ui-no-data{
  text-align: center;
  padding-top: 200rpx;
}

.activeItem{
  background: #f5f5f5;
}

.operation_box {
  padding: 6rpx 20rpx 9rpx 20rpx;
  border-radius: 8rpx;
  background: #454545;
  position: absolute;
  top: -68rpx;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
}

.operation_box:before {
  content: "";
  width: 0;
  height: 0;
  position: absolute;
  top: 54rpx;
  left: 50%;
  transform: translateX(-50%);
  border-top: solid 12rpx #454545;
  border-left: solid 12rpx transparent;
  border-right: solid 12rpx transparent;
  border-bottom: solid 12rpx transparent;
}

.ui-user-pic {
  width: 60rpx;
  min-width: 60rpx;
  height: 60rpx;
  border-radius: 50%;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.ui-name {
  width: auto;
  max-width: 300rpx;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  height: 40rpx;
  font-size: 30rpx;
  font-weight: 600;
  color: #333333;
  line-height: 40rpx;
}

.ui-sex-icon{
  width: 28rpx;
  height: 28rpx;
  display: block;
}

.referencesIcon {
  width: 124rpx;
  height: 36rpx;
  display: block;
  margin-left: 16rpx;
  margin-top: 2rpx;
}

.ui-content{
  word-break: break-all;
}

.ui-like-icon-box{
  position: absolute;
  right: 0;
  top: 0;

  .ui-like-icon{
    width: 30rpx;
    height: 30rpx;
    margin-right: 8rpx;
    display: block;
  }

  .ui-like-icon-v2{
    width: 32rpx;
    height: 32rpx;
    margin-right: 6rpx;
    margin-top: -2rpx;
    display: block;
  }

  .ui-img2_gif {
    position: relative;
    left: 6rpx;
    top: -18rpx;
    width: 64rpx;
    height: 64rpx;
    margin-left: -20rpx;
  }
}

.ui-bottom-input-box {
  width: 100vw;
  padding: 24rpx 30rpx 52rpx 30rpx;
  box-sizing: border-box;
  background: #ffffff;
  border-radius: 42rpx 42rpx 0 0;
  box-shadow: 0 -1rpx 6rpx rgba(0, 0, 0, 0.1);
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 999;

  .replyView{
    width: 100vw;
    position: fixed;
    bottom: 180rpx;
    left: 0;
    padding: 32rpx;
    z-index: 9999999;

    .replyContent{
      border-radius: 32rpx;
      max-height: 78vh;
      overflow: auto;
      padding: 16rpx 26rpx;
      background: #f8f8f8;
      line-height: 42rpx;
      letter-spacing: 4rpx;
      word-break: break-all;
    }

    .main-content-box {
      display: inline-block;
      white-space: pre-line;
      vertical-align: center;
      align-items: center;
      margin-top: 4rpx;
      word-break: break-all; // 纯数字、单词换行

      .m_rich {
        margin-right: -4rpx;
      }

      .emoji_text {
        align-items: center;
        padding: 4rpx;
        line-height: 40rpx;

        .emoji_small {
          width: 42rpx;
          height: 42rpx;
          vertical-align: middle;
        }
      }
    }
  }
}

.ui-input-box {
  width: 78vw;
  height: 72rpx;
  line-height: 72rpx;
  padding: 20rpx 76rpx 20rpx 26rpx;
  margin-right: 20rpx;
  background: #f5f5f7;
  border-radius: 100rpx;
  position: relative;

  .ui-input {
    width: 100%;
    position: relative;
    z-index: 3;
    background: initial;
    word-break: break-all;
  }
}

.ui-send-box {
  .ui-send-icon{
    width: 80rpx;
    height: 80rpx;
    color: white;
    border-radius: 12rpx;
  }
}
</style>
<template>
  <view class="~ui-pl-30 ~ui-pr-30 ~ui-pt-20">
    <view class="~font_32 ~color333">评论 · {{ list.length || 0 }}</view>
    <view class="operation_mask" v-if="showOperation" @tap="hiddenOperation"></view>
    <view v-if="list && list.length == 0" class="ui-no-data">
      <view class="color333">还没有人<span @tap="handlsInput" class="~color-theme">评论</span>，快来抢沙发吧</view>
    </view>
    <view v-else class="ui-discuss-box">
      <block v-for="(item,index) in list" :key="index">
        <view @longpress="commentsOperation(item.comment_id)" class="~ui-relative ~ui-mt-36 {{operationId == item.comment_id ? 'activeItem' : ''}}">
          <view class="operation_box ~font_26 ~color-999" v-if="operationId == item.comment_id">
            <view class="~f-fcc">
              <view class="~font_28 ~white" @tap="copy(item.comment)">复制</view>
              <block v-if="item.publish == 1">
                <view class="~white" style="margin: -2rpx 20rpx 0 20rpx">|</view>
                <view class="~font_28 ~white" @tap="deteleComment(item,index)">删除</view>
              </block>
              <block v-else-if="is_owner">
                <view class="~white" style="margin: -2rpx 20rpx 0 20rpx">|</view>
                <view class="~font_28 ~white" @tap="deteleComment(item,index)">删除</view>
              </block>
            </view>
          </view>
          <view class="~f-fl">
            <view class="ui-user-pic" style="{{'background-image:url(' + (item.photo || 'https://image.fulllinkai.com/202203/09/cc1c73eb1a4941fef25a15cd1ff2f9df.png') + ');'}}" @tap="jumpPath(`/pages/home/information?id=${item.id}`)"></view>
            <view class="~ui-pl-16" @tap="changeReply(item)">
              <view class="~f-fcl">
                <view class="ui-name">{{ item.nickname || '未设置名称' }}</view>
                <image v-if="item.sex == 1" class="ui-sex-icon ~ui-ml-10" src="https://images.ufutx.com/202103/23/3e7ac93e7bff26a9b62fe3232c776a96.png" lazy-load="false"></image>
                <image v-else class="ui-sex-icon ~ui-ml-10" src="https://images.ufutx.com/202103/23/4fd7a85e7073152fde91190b8957910e.png" lazy-load="false"></image>
<!--                <image class="referencesIcon" src="https://image.fulllinkai.com/202207/19/7e78a1dd367f1250d4cba4e85bfd60f1.png" mode="widthFix" v-if="item.user.type != 'single'"></image>-->
              </view>
              <view class="~color999 ~font_24 ~f-fb ~ui-pt-4">{{ item.created_at }}</view>
              <view class="~color333 ~font_30 ui-content">
                <span v-if="item.reply_id">回复 {{item.reply_nickname}}：</span>
                {{ item.comment }}
              </view>
            </view>
            <view class="ui-like-icon-box" @tap.stop="commentLiker(item,index)">
              <view class="~f-fcr" v-if="!item.is_liker">
                <image lazy-load="true" class="ui-like-icon-v2" src="https://images.ufutx.com/202106/10/a97c7c76f3aaf7065e7f7a5fe2abc081.png"></image>
                {{  item.liker_count  }}
              </view>
              <view class="~f-fr" v-else>
                <image class="ui-img2_gif" src="{{item.likeGif}}"></image>
                {{  item.liker_count  }}
              </view>
            </view>
          </view>
        </view>
      </block>
    </view>
  </view>
  <view class="ui-bottom-input-box">
    <!--输入文本加表情预览信息-->
    <view class="replyView ~f-fcc ~animation-slide-bottom" v-if="inputVal.length > 17 && showReplyView" style="bottom: {{inputBoxH}}px;">
      <view class="replyContent main-content-box" @longpress="copy(inputVal)">{{name ? '回复@' + name + '：' : ''}}{{inputVal}}</view>
    </view>
    <view class="~f-fbc">
      <view class="ui-input-box ~f-fcl">
        <input class="ui-input ~font_28 ~color3 ~text-left" confirm-hold="{{true}}" v-model="inputVal" type="text" maxlength="-1" :placeholder="name ? '回复@' + name : '想说...'" confirm-type="send" cursorSpacing="26" bindinput="changeMsg" bindenter="changeMsg" bindfocus="InputFocus" @confirm="send">
      </view>
      <view class="ui-send-box ~f-fcr">
        <image class="~font_32 ui-send-icon ~f-fcc" @tap="send" src="https://image.fulllinkai.com/202305/05/4a47a0db6e60853dedfcfdf08a5ca249.png" mode="aspectFit" lazy-load="false"></image>
      </view>
    </view>
  </view>
</template>
<script>
  import wepy from '@wepy/core'
  import base from '../mixins/base'
  import https from '../mixins/https'
  import {service} from '../config'

  wepy.component({
    props: {
      list: {
        type: Array,
        default: []
      },
      detail: {
        type: Object,
        default: {}
      },
      type: {
        type: String,
        default: ''
      }
    },
    data: {
      operationId: null,
      throttle: true,
      showOperation: false,
      defaultAvatar: 'https://images.ufutx.com/202007/01/e0de60525143427d4dd19515a5b387ba.png',
      gifurl: 'https://images.ufutx.com/202106/11/d40b92e053a693f30eb197bf6374af95.gif',
      name: '',
      replyId: 0,
      inputVal: '',
      showReplyView: true,
      inputBoxH: 86
    },
    mixins: [https, base],
    methods: {
      // 评论
      send() {
        let vm = this
        let comment = vm.replyId ? vm.inputVal.split(`回复@${vm.name}：`)[1] : vm.inputVal
        let data = {
          reply_id: vm.replyId || 0,
          comment: vm.replyId ? vm.inputVal.split(`回复@${vm.name}：`)[1] : vm.inputVal
        }
        if (!comment) {
          vm.$showToast('请输入评论内容')
          return
        }
        let url = ''
        if (vm.type == 'vote') {
          // 投票动态评论
          url = `${service.host}/vote/${vm.detail.id}/comment`
        } else {
          // 正常动态评论
          url = `${service.host}/moment/${vm.detail.id}/comment`
        }
        if (vm.throttle) {
          vm.throttle = false
          vm.$post({url: url, data}).then(({code}) => {
            wx.hideLoading()
            if (code == 0) {
              vm.$emit('getList')
              vm.replyContent = ''
              vm.name = ''
              vm.inputVal = ''
              vm.replyId = 0
            }
            vm.throttle = true
          }).catch(() => {
            vm.throttle = true
            wx.hideLoading()
          })
        }
      },
      // 评论点赞
      commentLiker(e, index) {
        let vm = this
        if (vm.throttle) {
          vm.throttle = false
          vm.$post({url: `${service.host}/moment/comment/${e.comment_id}/like`}).then(({code, data}) => {
            if (code == 0) {
              vm.$emit('changLiker', index)
            }
            wx.hideLoading()
            vm.throttle = true
          }).catch(() => {
            vm.throttle = true
            wx.hideLoading()
          })
        }
      },
      // 点击评论内容回复
      changeReply(e) {
        let vm = this
        vm.replyId = e.id
        vm.name = e.nickname
        vm.inputVal = `回复@${e.nickname}：`
      },
      // 长按评论内容弹框复制等操作
      commentsOperation(id) {
        let vm = this
        vm.showOperation = true
        vm.operationId = id
      },
      hiddenOperation() {
        let vm = this
        vm.showOperation = false
        vm.operationId = null
      },
      // 输入框聚焦事件
      InputFocus() {
        let vm = this
        vm.showReplyView = false
        setTimeout(() => {
          vm.changeInputHeight()
          vm.showReplyView = true
        }, 500)
      },
      // 监听输入框内容
      changeMsg(e) {
        let vm = this
        vm.replyContent = e.$wx.detail.value
        if (!vm.replyContent || vm.replyContent == `回复@${vm.name}`) {
          vm.replyContent = ''
          vm.name = ''
          vm.inputVal = ''
          vm.replyId = 0
        }
        vm.changeInputHeight()
      },
      // 监听底部输入框的高度
      changeInputHeight() {
        let vm = this
        let query = wx.createSelectorQuery()
        query.select('.ui-bottom-input-box').boundingClientRect((res) => {
          if (res) {
            vm.inputBoxH = res.height
          }
        }).exec()
      },
      copy(e) {
        let vm = this
        let textRepkace = e.replace(/<[^<>]+>/g, '').replace(/&nbsp;/gi, '')
        wx.setClipboardData({
          data: textRepkace,
          success: function (res) {
            wx.hideLoading()
            vm.$showToast('复制成功')
          }
        })
      },
      jumpPath(url) {
        wx.navigateTo({url: url})
      }
    },
    created() {}
  })
</script>