You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
343 lines
10 KiB
343 lines
10 KiB
<template>
|
|
<view class="container">
|
|
<view class="content">
|
|
<view class="item" v-for="(item,index) in datalist" :key='index' @click="toDetail(item)">
|
|
<view class="left flex1">
|
|
<view class="l_left" style="width: 80rpx;">
|
|
<image :src="item.headimg" mode=""></image>
|
|
</view>
|
|
<view class="l_right" style="width: 500rpx;">
|
|
<view class="p1">
|
|
{{item.nickname}}
|
|
</view>
|
|
<view class="p2">
|
|
<text>{{item.title}}</text>
|
|
<text>{{item.create_time}}</text>
|
|
</view>
|
|
<view class="p3" style="word-break: break-all; word-wrap: break-word;" v-html='item.content'>
|
|
</view>
|
|
<view class="p4">
|
|
<view class="left" @click.stop="commentClick(item)">
|
|
<text class="iconfont icon-xiaoxi"></text>
|
|
回复{{item.type ==1 || item.type ==2?'笔记':'视频' }}
|
|
</view>
|
|
<view class="right" @click.stop="zanFn(item)">
|
|
<text v-if="!item.iszan" class="iconfont icon-aixin"></text>
|
|
<text v-else style="color:red;" class="iconfont icon-aixin_shixin"></text>
|
|
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="right" style="width: 80rpx;">
|
|
<image :src="item.coverimg" mode=""></image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<nomore v-if="nomore"></nomore>
|
|
<nodata v-if="nodata"></nodata>
|
|
<view class="plbox-show-mk" v-if="showcomment" @touchmove.stop.prevent="moveHandle">
|
|
<view class="plbox" :style="menuindex > -1 ? 'bottom:110rpx':''">
|
|
<view class="plbox_title"><text class="plbox_title-t1">回复评论</text><text class="plbox_title-t2"></text></view>
|
|
<image :src="event_rul + '/static/img/static/img/close.png'" class="plbox-close" @tap.stop="commentClick"/>
|
|
<!-- <loading v-if="loading"></loading> -->
|
|
<view style="height:160rpx"></view>
|
|
<!-- <view class="plbox-replyshadow" v-if="hfid!=0" @tap.stop="replyshadowClick"></view> -->
|
|
<view class="pinglun">
|
|
<image @tap="toggleFaceBox" class="pinglun-faceicon" :src="event_rul + '/static/img/static/img/face-icon.png'"></image>
|
|
<input @confirm="sendMessage" @focus="onInputFocus" @input="messageChange" class="pinglun-input" confirmHold="true" confirmType="send" cursorSpacing="20" type="text" :value="message" :placeholder="messageholder"/>
|
|
<view class="pinglun-buybtn" @tap="sendcomment(item)"><text class="pinglun-buybtn-txt">发表</text></view>
|
|
</view>
|
|
<wxface v-if="faceshow" @selectface="selectface"></wxface>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
var app = getApp();
|
|
export default{
|
|
data(){
|
|
return {
|
|
item:'',
|
|
loading:false,
|
|
isload: false,
|
|
nomore:false,
|
|
nodata:false,
|
|
pagenum: 1,
|
|
datalist:[],
|
|
showcomment:false,
|
|
message:'',
|
|
trimMessage:'',
|
|
faceshow:false,
|
|
|
|
event_rul: app.globalData.event_url,
|
|
}
|
|
},
|
|
onLoad(){
|
|
this.getList();
|
|
},
|
|
onReachBottom: function () {
|
|
if (!this.nodata && !this.nomore) {
|
|
this.pagenum = this.pagenum + 1;
|
|
this.getList()
|
|
}
|
|
},
|
|
methods:{
|
|
toDetail(item){
|
|
let url = '/activity/luntan/detail'
|
|
if(item.type == 3 || item.type == 4){
|
|
url = '/activity/shortvideo/detail'
|
|
}
|
|
uni.navigateTo({url:url+'?id='+item.ref_id})
|
|
|
|
},
|
|
|
|
messageChange: function (e) {
|
|
this.message = e.detail.value;
|
|
this.trimMessage = e.detail.value.trim();
|
|
},
|
|
zanFn(item){
|
|
let url ='/ApiShortvideo/pzan'
|
|
if(item.type == 1 ||item.type == 2 ){
|
|
url = 'ApiLuntan/pzan'
|
|
}
|
|
app.post(url,{id:item.comment_id},(res)=>{
|
|
|
|
if(item.type == 1 ||item.type == 2 ){
|
|
item.iszan = res.type
|
|
console.log(item)
|
|
|
|
}else{
|
|
item.iszan = res.type
|
|
}
|
|
|
|
})
|
|
},
|
|
// 发表评论
|
|
sendcomment(){
|
|
|
|
let message = this.message;
|
|
app.showLoading('提交中');
|
|
// console.log(;为什么)
|
|
let url = 'ApiShortvideo/subpinglun';
|
|
let data = {id:this.item.ref_id,hfid:this.item.comment_id,content:message,type:1}
|
|
if(this.item.type == 1 || this.item.type == 2 ){
|
|
url = 'ApiLuntan/subpinglun'
|
|
data = {
|
|
content:message,
|
|
hfid:this.item.comment_id,
|
|
userId:app.globalData.mid,
|
|
id:this.item.ref_id,
|
|
type:1
|
|
}
|
|
}
|
|
app.post(url,data, res => {
|
|
app.showLoading(false)
|
|
if(res.msg == '发表评论成功') {
|
|
uni.showToast({
|
|
title:res.msg,
|
|
icon:'none'
|
|
})
|
|
this.message = '';
|
|
this.showcomment = false;
|
|
// this.followNoteList = []
|
|
// this.followNotePages = 1
|
|
// this.getFollowNote()
|
|
// this.message = '';
|
|
// this.hfid = 0;
|
|
// this.messageholder = '发表评论';
|
|
// this.faceshow = false;
|
|
// this.showcomment = false
|
|
// this.isData = true
|
|
// uni.showToast({
|
|
// title: '发表成功',
|
|
// duration:2000
|
|
// })
|
|
|
|
// let id = '#city' + this.pinlunIdx
|
|
// uni.pageScrollTo({
|
|
// selector: id,
|
|
// duration: 300
|
|
// }, 1000)
|
|
}else {
|
|
uni.showModal({
|
|
title: '提示',
|
|
content: res.msg,
|
|
showCancel: false,
|
|
});
|
|
}
|
|
|
|
// console.log(res,'gagallllfabbb6666-----' )
|
|
})
|
|
},
|
|
commentClick:function(item){
|
|
var that = this;
|
|
// this.pinlunIdx = num
|
|
if(item){
|
|
that.item = item
|
|
}
|
|
this.showcomment = !this.showcomment;
|
|
// if(this.showcomment){
|
|
// this.getcommentlist();
|
|
// }
|
|
},
|
|
selectface: function (face) {
|
|
this.message = "" + this.message + face;
|
|
this.trimMessage = this.message.trim();
|
|
},
|
|
onInputFocus: function (e) {
|
|
this.faceshow = false
|
|
},
|
|
// 表情显示
|
|
toggleFaceBox: function () {
|
|
this.faceshow = !this.faceshow
|
|
},
|
|
getList(){
|
|
var that = this;
|
|
var pagenum = that.pagenum;
|
|
that.loading = true;
|
|
that.nomore = false;
|
|
that.nodata = false;
|
|
app.post('ApiMy/commentList', {pagenum: pagenum}, function (res) {
|
|
that.loading = false;
|
|
var data = res.datalist;
|
|
if (pagenum == 1) {
|
|
that.datalist = data;
|
|
if (data.length == 0) {
|
|
that.nodata = true;
|
|
}
|
|
}else{
|
|
if (data.length == 0) {
|
|
that.nomore = true;
|
|
} else {
|
|
var datalist = that.datalist;
|
|
var newdata = datalist.concat(data);
|
|
that.datalist = newdata;
|
|
}
|
|
}
|
|
that.loaded();
|
|
});
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.pinglun{width:750rpx;padding:0 20rpx;margin:0 auto;display:flex;flex-direction:row;align-items:center;position:absolute;bottom:0;left:0;right:0;height:100rpx;background:#fff;z-index:8;border-top:1px solid #f7f7f7}
|
|
.pinglun-faceicon { width:46rpx;height:46rpx; margin-left: 10rpx;margin-right:18rpx}
|
|
.pinglun-input{flex:1;color:#000;font-size:32rpx;padding:0;line-height:100rpx}
|
|
.pinglun-buybtn{margin-left:0.08rpx;background:#FD4A46;height:60rpx;line-height:60rpx;padding:0 30rpx;border-radius:6rpx}
|
|
.pinglun-buybtn-txt{color:#fff;font-size:28rpx;height:60rpx;line-height:60rpx;}
|
|
|
|
.plbox{width:750rpx;height:rpx;padding:20rpx 20rpx;background:#fff;z-index:6;position:fixed;z-index: 33;left: 0;bottom: 0;}
|
|
.plbox-show-mk {width: 100%; height: 100%;position: fixed;top: 0;left: 0;background-color: rgba(0, 0, 0, .4);z-index: 9999999;}
|
|
.plbox-replyshadow{position:absolute;z-index:7;background:rgba(0,0,0,0.4);width:750rpx;flex:1;left:0;right:0;top:0;bottom:0;}
|
|
.plbox-close{position:absolute;top:10rpx;right:10rpx;z-index:7;width:50rpx;height:50rpx;padding:10rpx;}
|
|
.plbox_title{height:60rpx;line-height:60rpx;margin-bottom:20rpx;display:flex;flex-direction:row}
|
|
.plbox_title-t1{font-size:28rpx;color:#000;font-weight:bold}
|
|
.plbox_title-t2{font-size:28rpx;color:#000;font-weight:bold}
|
|
.plbox_content{height:500rpx;overflow:scroll;display:flex;}
|
|
.plbox_content-plcontent{display:flex;flex-direction:row;vertical-align: middle;color:#111}
|
|
.plbox_content-plcontent-text{ color:#111;font-size:28rpx}
|
|
.plbox_content-plcontent-image{ width:44rpx;height:44rpx;vertical-align: inherit;}
|
|
.plbox_content-item{flex:1;margin-bottom:20rpx;display:flex;flex-direction:row}
|
|
.plbox_content-item-f1{width:80rpx;}
|
|
.plbox_content-item-f1-img{width:60rpx;height:60rpx;border-radius:50%}
|
|
.plbox_content-item-f2{flex:1}
|
|
.plbox_content-item-f2-t1{font-size:28rpx}
|
|
.plbox_content-item-f2-t2{color:#000;margin:10rpx 0;line-height:60rpx;}
|
|
.plbox_content-item-f2-t3{display:flex;flex-direction:row;flex:1}
|
|
.plbox_content-item-f2-t3-x1{color:#999;font-size:26rpx;}
|
|
.plbox_content-item-f2-t3-x2{flex:1;display:flex;flex-direction:row;}
|
|
.plbox_content-item-f2-pzan{display:flex;flex-direction:row}
|
|
.plbox_content-item-f2-pzan-img{width:32rpx;height:32rpx;margin-right:10rpx}
|
|
.plbox_content-item-f2-pzan-txt{font-size:28rpx;color:#666}
|
|
.plbox_content-item-f2-phuifu{margin-left:6px;color:#507DAF;font-size:26rpx}
|
|
.plbox_content-relist{flex:1;background:#f5f5f5;padding:20rpx 20rpx 10rpx 20rpx;margin-bottom:20rpx}
|
|
.plbox_content-relist-item2{font-size:24rpx;margin-bottom:10rpx}
|
|
.plbox_content-relist-headimg{width:30rpx;height:30rpx;border-radius:15rpx;margin-right:8rpx}
|
|
.plbox_content-relist-nickname{color:#333;font-size:24rpx}
|
|
.plbox_content-relist-f2{margin-top:10rpx}
|
|
.container{
|
|
background-color: #fff;
|
|
min-height: 100vj;
|
|
}
|
|
.content{
|
|
padding: 30rpx 40rpx;
|
|
.item{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-bottom: 20rpx;
|
|
|
|
.left{
|
|
display: flex;
|
|
.l_left{
|
|
image{
|
|
width: 60rpx;
|
|
height: 60rpx;
|
|
border-radius: 60rpx;
|
|
border: 1px solid #ccc;
|
|
margin-right: 20rpx;
|
|
}
|
|
}
|
|
.l_right{
|
|
.p1{
|
|
font-weight: bold;
|
|
font-size: 28rpx;
|
|
margin-bottom: 10rpx;
|
|
}
|
|
.p2{
|
|
color: #666;
|
|
margin-bottom: 10rpx;
|
|
text{
|
|
margin-right: 20rpx;
|
|
font-size: 24rpx;
|
|
}
|
|
}
|
|
.p3{
|
|
margin-bottom: 10rpx;
|
|
}
|
|
.p4{
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 20rpx;
|
|
.left{
|
|
display: flex;
|
|
align-items: center;
|
|
height: 40rpx;
|
|
border-radius: 40rpx;
|
|
background-color: #f2f2f4;
|
|
padding: 0 20rpx;
|
|
margin-right: 10rpx;
|
|
.iconfont{
|
|
margin-right: 6rpx;
|
|
font-size: 34rpx;
|
|
}
|
|
}
|
|
.right{
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
border-radius: 40rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background-color: #f2f2f4;
|
|
.iconfont{
|
|
// font-size: 2rpx;
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
}
|
|
.right{
|
|
image{
|
|
width: 80rpx;
|
|
height: 80rpx;
|
|
border-radius: 10rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
|