357 lines
9.7 KiB
Plaintext
357 lines
9.7 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.comment_count }}</view>
|
|||
|
|
<view class="operation_mask" v-if="showOperation" @tap="hiddenOperation"></view>
|
|||
|
|
<view v-if="detail.comment_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.id)" class="~ui-relative ~ui-mt-36 {{operationId == item.id ? 'activeItem' : ''}}">
|
|||
|
|
<view class="operation_box ~font_26 ~color-999" v-if="operationId == item.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" v-if="item.user.avatar" style="{{'background-image:url(' + item.user.avatar + ');'}}"></view>
|
|||
|
|
<view class="ui-user-pic" v-else style="background-image:url(https://image.fulllinkai.com/202203/09/cc1c73eb1a4941fef25a15cd1ff2f9df.png);"></view>
|
|||
|
|
<view class="~ui-pl-16">
|
|||
|
|
<view class="~f-fcl">
|
|||
|
|
<view class="ui-name">{{ item.user.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">{{ item.comment }}</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="ui-like-icon-box">
|
|||
|
|
<view class="~f-fcr" v-if="item.isLker == false">
|
|||
|
|
<image lazy-load="true" class="ui-like-icon-v2" src="https://images.ufutx.com/202106/10/a97c7c76f3aaf7065e7f7a5fe2abc081.png"></image>
|
|||
|
|
{{ item.likerCount }}
|
|||
|
|
</view>
|
|||
|
|
<view class="~f-fr" v-else>
|
|||
|
|
<image class="ui-img2_gif" src="{{item.isLker ? gifurl : 'https://images.ufutx.com/202106/07/b227f3ecf9cbd080fb814450b667b5ce.gif'}}"></image>
|
|||
|
|
{{ item.likerCount }}
|
|||
|
|
</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'
|
|||
|
|
|
|||
|
|
wepy.component({
|
|||
|
|
props: {
|
|||
|
|
list: {
|
|||
|
|
type: Array,
|
|||
|
|
default: []
|
|||
|
|
},
|
|||
|
|
detail: {
|
|||
|
|
type: Object,
|
|||
|
|
default: {}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
data: {
|
|||
|
|
operationId: '',
|
|||
|
|
showOperation: false,
|
|||
|
|
defaultAvatar: 'https://images.ufutx.com/202007/01/e0de60525143427d4dd19515a5b387ba.png',
|
|||
|
|
gifurl: 'https://images.ufutx.com/202106/11/d40b92e053a693f30eb197bf6374af95.gif',
|
|||
|
|
name: '',
|
|||
|
|
inputVal: '',
|
|||
|
|
showReplyView: true,
|
|||
|
|
inputBoxH: 86
|
|||
|
|
},
|
|||
|
|
mixins: [https, base],
|
|||
|
|
methods: {
|
|||
|
|
commentsOperation(id) {
|
|||
|
|
let vm = this
|
|||
|
|
vm.showOperation = true
|
|||
|
|
vm.operationId = id
|
|||
|
|
},
|
|||
|
|
hiddenOperation() {
|
|||
|
|
let vm = this
|
|||
|
|
vm.showOperation = false
|
|||
|
|
vm.operationId = ''
|
|||
|
|
},
|
|||
|
|
// 输入框聚焦事件
|
|||
|
|
InputFocus() {
|
|||
|
|
let vm = this
|
|||
|
|
vm.showReplyView = false
|
|||
|
|
setTimeout(() => {
|
|||
|
|
vm.changeInputHeight()
|
|||
|
|
vm.showReplyView = true
|
|||
|
|
}, 500)
|
|||
|
|
},
|
|||
|
|
// 监听输入框内容
|
|||
|
|
changeMsg(e) {
|
|||
|
|
console.log(e, '8888')
|
|||
|
|
let vm = this
|
|||
|
|
if (/\[[^\]]+\]/.test(e.$wx.detail.value)) {
|
|||
|
|
vm.replyContent = vm.transitionMsg(e.$wx.detail.value)
|
|||
|
|
} else {
|
|||
|
|
vm.replyContent = e.$wx.detail.value
|
|||
|
|
}
|
|||
|
|
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('复制成功')
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
created() {}
|
|||
|
|
})
|
|||
|
|
</script>
|