433 lines
12 KiB
Plaintext
433 lines
12 KiB
Plaintext
<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">评论 · {{ detail.commenter_count }}</view>
|
||
<view class="operation_mask" v-if="showOperation" @tap="hiddenOperation"></view>
|
||
<view v-if="detail.commenter_count == 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.user.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(/ /gi, '')
|
||
wx.setClipboardData({
|
||
data: textRepkace,
|
||
success: function (res) {
|
||
wx.hideLoading()
|
||
vm.$showToast('复制成功')
|
||
}
|
||
})
|
||
},
|
||
jumpPath(url) {
|
||
wx.navigateTo({url: url})
|
||
}
|
||
},
|
||
created() {}
|
||
})
|
||
</script>
|