<template>
|
<div class="subnvue flex" @click.stop="">
|
<div class="mask" @click="hide()"></div>
|
<div class="content flex" ref="content">
|
<div class="top flex">
|
<div class="title">{{comment}}</div>
|
<div @click="hide()" class="hideBtn flex">
|
<text class="iconfont"></text>
|
</div>
|
</div>
|
<scroll-view scroll-y class="srcoll-view">
|
|
<div v-for="(item,index) in dataList" class="card" :key="index">
|
<div class="card-left">
|
<image class="card-image" src="../../static/logo.png"></image>
|
<div class="card-content">
|
<div class="card-top">
|
<text class="card-name size-14" @click="replyName(item.name)">{{item.name}}</text>
|
<text class="color-grey">{{item.time}}</text>
|
</div>
|
<div class="card-message">
|
<text class="margin-right size-14" v-if="item.reply">回复</text>
|
<text class="color-bule margin-right size-14" v-if="item.reply"
|
@click="replyName(item.reply)">{{item.reply}}:</text>
|
<text class="card-text size-14"
|
:style="{height:`${Math.ceil(item.message.length/15)*30}upx`}">{{item.message}}</text>
|
</div>
|
<!-- <div class="card-bottom">
|
<text class="color-grey">查看7条回复></text>
|
</div> -->
|
</div>
|
|
</div>
|
|
<div class="card-right">
|
<text class="iconfont card-icon color-gray"></text>
|
<text class="color-gray">赞</text>
|
<text class="iconfont card-icon color-gray"></text>
|
<text class="color-gray">踩</text>
|
</div>
|
</div>
|
|
</scroll-view>
|
<div class="bottom flex" @click="showInput">
|
<div class="input" v-if="flag">
|
<text class="color-gray" style="color: #9C9C9C;">{{placeholder}}</text>
|
</div>
|
<!-- <input v-if="flag" class="input" @click="showInput" disabled v-model="message" :placeholder="placeholder"/>
|
-->
|
</div>
|
|
</div>
|
</div>
|
</template>
|
|
<script>
|
//#ifdef APP-NVUE
|
const animation = weex.requireModule('animation')
|
const modal = weex.requireModule('modal');
|
//#endif
|
export default {
|
data() {
|
return {
|
flag: true,
|
canHide: false,
|
message: '',
|
comment: '评论',
|
placeholder: '发表评论',
|
reply: '',
|
article: '',
|
dataList: [{
|
name: '张三',
|
time: '04-03',
|
message: '下载来试试喀喀喀喀喀喀喀喀喀酷酷酷酷酷酷酷酷',
|
reply: ''
|
},
|
{
|
name: '张三',
|
time: '04-03',
|
message: '下载来试试',
|
reply: ''
|
}
|
]
|
}
|
},
|
beforeCreate() {
|
// #ifdef APP-NVUE
|
var domModule = weex.requireModule('dom');
|
domModule.addRule('fontFace', {
|
'fontFamily': "iconfont",
|
'src': "url('../../static/subnvue/iconfont.ttf')"
|
});
|
// #endif
|
},
|
created() {
|
uni.$on('showComment', this.showComment)
|
uni.$on('sendComment', this.sendComment)
|
},
|
destroyed() {
|
uni.$off('showComment')
|
uni.$off('sendComment')
|
},
|
methods: {
|
replyName(name) {
|
this.reply = name
|
this.placeholder = `回复 ${name} :`
|
},
|
//发送评论
|
sendComment(val) {
|
var that = this;
|
var userid = this.$store.state.UserData.user_id;
|
var name = this.$store.state.UserData.real_name;
|
uni.request({
|
url: that.$store.state.piAPI + '/comment/comment/submit',
|
method: 'POST',
|
data: {
|
article: that.article,
|
content: val,
|
userId: userid,
|
},
|
success: (res) => {
|
uni.showToast({
|
title: '评论成功，请等待审核',
|
icon: 'none',
|
duration: 2000
|
});
|
}
|
});
|
|
// this.dataList.push({
|
// name: '春雷',
|
// time: '04-03',
|
// message: val,
|
// reply: this.reply,
|
// })
|
this.reply = ''
|
},
|
//显示评论
|
showComment(val) {
|
// console.log(val.userid)
|
var that = this;
|
if (typeof val != "undefined") {
|
that.article = val.id; //保存新闻id
|
uni.request({
|
url: that.$store.state.piAPI + '/comment/comment/page',
|
method: 'GET',
|
data: {
|
article: val.id,
|
current: 1,
|
size: 99999,
|
},
|
success: (res) => {
|
var data = res.data.data.records;
|
that.dataList = [];
|
if (data.length == 0) {
|
that.comment = "暂无评论";
|
} else {
|
that.comment = "评论";
|
for (var i = 0; i < data.length; i++) {
|
that.dataList.push({
|
name: data[i].name,
|
time: data[i].time,
|
message: data[i].content,
|
reply: ''
|
});
|
}
|
}
|
}
|
});
|
}
|
|
this.flag = true
|
this.canHide = false
|
let content = this.$refs.content;
|
animation.transition(content, {
|
styles: {
|
transform: `translate(0px, 0px)`,
|
},
|
duration: 200, //ms
|
timingFunction: 'ease-in-out',
|
delay: 0 //ms
|
}, () => {
|
this.canHide = true
|
})
|
},
|
hide() {
|
if (!this.canHide) return
|
let content = this.$refs.content;
|
animation.transition(content, {
|
styles: {
|
transform: `translate(0px, 1000rpx)`,
|
},
|
duration: 200, //ms
|
timingFunction: 'ease-in-out',
|
delay: 0 //ms
|
}, () => {
|
uni.getSubNVueById('comment').hide()
|
})
|
},
|
showInput() {
|
uni.getSubNVueById('input-box').show('none', 0, () => {
|
this.flag = false
|
uni.$emit('showInput', "2222")
|
});
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
/* #ifndef APP-PLUS-NVUE */
|
@font-face {
|
font-family: "iconfont";
|
src: url('~@/static/subnvue/iconfont.ttf') format('truetype');
|
}
|
|
/* #endif*/
|
.iconfont {
|
font-family: "iconfont";
|
font-family: iconfont;
|
font-size: 16px;
|
}
|
|
.color-gray {
|
color: #515352;
|
font-size: 14px;
|
}
|
|
.color-grey {
|
color: #A8ACAF;
|
font-size: 12px;
|
}
|
|
.color-bule {
|
color: #55ADDF;
|
|
}
|
|
.margin-right {
|
margin-right: 20rpx;
|
}
|
|
|
.subnvue {
|
flex-direction: column;
|
flex: 1;
|
background-color: transparent;
|
position: relative;
|
}
|
|
.mask {
|
flex-direction: column;
|
background-color: #000;
|
opacity: 0.4;
|
flex: 1;
|
}
|
|
.content {
|
position: absolute;
|
background-color: #fff;
|
width: 750rpx;
|
bottom: 0;
|
height: 1000rpx;
|
transform: translateY(1000rpx);
|
flex-direction: column;
|
justify-content: space-between;
|
border-top-left-radius: 30rpx;
|
border-top-right-radius: 30rpx;
|
}
|
|
.top {
|
padding: 20rpx;
|
flex-direction: row;
|
justify-content: space-between;
|
}
|
|
.size-14 {
|
font-size: 14px;
|
}
|
|
.title {
|
flex: 1;
|
align-items: center;
|
}
|
|
.hideBtn {
|
padding: 10rpx;
|
justify-content: center;
|
align-items: center;
|
}
|
|
/* 底部输入框 */
|
.bottom {
|
align-items: center;
|
flex-direction: row;
|
background-color: red;
|
justify-content: space-between;
|
}
|
|
.input {
|
box-shadow: 0 -1px 4px 1px rgba(0, 0, 0, 0.1);
|
font-size: 16px;
|
flex-direction: row;
|
align-items: center;
|
flex: 1;
|
height: 100rpx;
|
padding: 30rpx;
|
background-color: #fff;
|
}
|
|
.bottomBtn {
|
padding: 5rpx 15rpx;
|
border-radius: 10rpx;
|
margin-left: 30rpx;
|
}
|
|
.bottom-text {
|
color: #fff;
|
}
|
|
/* 评论滚动区 */
|
.srcoll-view {
|
flex: 1;
|
}
|
|
.card {
|
position: relative;
|
flex-direction: row;
|
justify-content: space-between;
|
padding: 30rpx;
|
}
|
|
.card-left {
|
flex-direction: row;
|
}
|
|
/* 中 */
|
.card-content {
|
flex: 1;
|
|
}
|
|
.card-image {
|
height: 70rpx;
|
width: 70rpx;
|
border-radius: 50%;
|
margin-right: 35rpx;
|
}
|
|
.card-top {
|
height: 80rpx;
|
justify-content: space-between;
|
}
|
|
.card-message {
|
|
padding: 20rpx 0;
|
flex-direction: row;
|
width: 600rpx;
|
|
}
|
|
.card-text {
|
flex: 1;
|
}
|
|
|
/* 右 */
|
.card-right {
|
position: absolute;
|
right: 30rpx;
|
top: 30rpx;
|
flex-direction: row;
|
|
}
|
|
.card-icon {
|
margin-left: 40rpx;
|
margin-right: 20rpx;
|
}
|
</style>
|
