<template>
|
<view class="article">
|
<u-toast ref="uToast" />
|
<view class="article-title">{{question.title}}</view>
|
<uni-list :border="false">
|
<uni-list-item thumbSize="lg" :thumb="question.avatar?question.avatar:avatar">
|
<!-- 通过body插槽定义作者信息内容 -->
|
<view slot="body" class="header-content">
|
<view class="uni-title">{{question.user.nickname||'未知'}}</view>
|
</view>
|
<view slot="footer" class="footer">
|
<view class="uni-note">更新于 <text>{{question._add_time|timeFrom}}</text>
|
</view>
|
</view>
|
</uni-list-item>
|
</uni-list>
|
<view class="article-content">
|
<u-read-more ref="uReadMore" :toggle="true" show-height="600">
|
<u-parse :html="question.content" @load="parseLoaded" :tag-style="style"></u-parse>
|
</u-read-more>
|
</view>
|
|
<view class="comment-list">
|
<view class="box">
|
<view class="selection">
|
{{comments.length}}个回答
|
</view>
|
<view class="list-box">
|
<view class="comment-item" v-for="(item,index) in comments" :key="item._id">
|
<uni-list :border="false">
|
<uni-list-item thumbSize="lg" :thumb="item.avatar?question.avatar:avatar">
|
<!-- 通过body插槽定义作者信息内容 -->
|
<view slot="body" class="header-content">
|
<view class="uni-title">{{item.user.nickname||'未知'}}</view>
|
</view>
|
<view slot="footer" class="footer">
|
<view class="uni-note"> <text>{{item._add_time|timeFrom}}</text>
|
</view>
|
</view>
|
</uni-list-item>
|
</uni-list>
|
<view class="comment-text">
|
<mp-html :content="item.content"></mp-html>
|
</view>
|
<view class="wait-confirm" @click="acceptAnswer(item._id)"
|
v-if="question.bbs_status!=2&&question.uid==userInfo._id&&item.comment_status!=2">
|
采纳回答
|
</view>
|
<view class="has-confirm" v-if="item.comment_status==2">
|
已采纳
|
</view>
|
<view class="del-comment" @click="delAnswer(item._id)"
|
v-if="item.uid==userInfo._id&&item.comment_status!=2">
|
删除
|
</view>
|
</view>
|
</view>
|
</view>
|
|
</view>
|
|
<view class="make-comment">
|
<view class="box">
|
<view class="selection">
|
撰写答案
|
</view>
|
<u-alert-tips type="warning" :show-icon="true" :title="'请登陆后再发布回答'" v-if="!hasLogin"></u-alert-tips>
|
<vk-data-input-editor ref="vk_editor" v-model="content" placeholder="请输入回答内容"></vk-data-input-editor>
|
<view class="button-box">
|
<u-button type="primary" :custom-style="btnCustomStyle" @click="submit">发布答案</u-button>
|
</view>
|
</view>
|
|
</view>
|
</view>
|
</template>
|
|
<script>
|
var that
|
export default {
|
data() {
|
return {
|
userInfo: getApp().globalData.userInfo,
|
avatar: require('../../../../static/member/avatra.png'),
|
question: {
|
title: '',
|
content: '',
|
user: {
|
name: "未知"
|
}
|
},
|
content: "",
|
style: {
|
p: "text-indent: 0;"
|
},
|
hasLogin: uni.vk.callFunctionUtil.checkToken(),
|
btnCustomStyle: {
|
width: "670rpx",
|
height: "80rpx",
|
background: "#1663ff",
|
borderRadius: "8rpx",
|
letterSpacing: "2rpx"
|
},
|
comments: []
|
};
|
},
|
onLoad(event) {
|
that = this
|
//获取真实新闻id，通常 id 来自上一个页面
|
if (event.id) {
|
this.id = event.id
|
}
|
this.loadComments()
|
},
|
onReady() {
|
if (this.id) { // ID 不为空，则发起查询
|
this.loadData()
|
} else {
|
uni.showToast({
|
icon: 'none',
|
title: '出错了，ID为空'
|
})
|
}
|
},
|
methods: {
|
delAnswer(cid) {
|
uni.showModal({
|
title: "提示",
|
content: "确认删除？",
|
success(res) {
|
if (res.confirm) {
|
uni.vk.callFunction({
|
url: 'client/bbs/kh/del_comment',
|
data: {
|
id: cid
|
},
|
success(data) {
|
that.$refs.uToast.show({
|
title: '删除成功！'
|
})
|
that.loadComments()
|
},
|
fail(e) {
|
uni.vk.alert(e.msg)
|
}
|
});
|
}
|
}
|
})
|
|
},
|
acceptAnswer(cid) {
|
uni.showModal({
|
title: "提示",
|
content: "确认采纳？",
|
success(res) {
|
if (res.confirm) {
|
uni.vk.callFunction({
|
url: 'client/bbs/kh/accept_answer',
|
data: {
|
aid: that.id,
|
cid: cid
|
},
|
success(data) {
|
that.$refs.uToast.show({
|
title: '采纳成功'
|
})
|
that.loadComments()
|
},
|
fail(e) {
|
uni.vk.alert(e.msg)
|
}
|
});
|
}
|
}
|
})
|
|
},
|
submit() {
|
if (this.content.length < 2) {
|
uni.showToast({
|
icon: "none",
|
title: "内容长度太短啦~"
|
})
|
return
|
}
|
|
uni.showModal({
|
title: "提示",
|
content: "确认提交？",
|
success(res) {
|
if (res.confirm) {
|
uni.vk.callFunction({
|
url: 'client/bbs/kh/add_comment',
|
data: {
|
aid: that.id,
|
content: that.content
|
},
|
success(data) {
|
that.content = ""
|
that.$refs.vk_editor.clear()
|
that.$refs.uToast.show({
|
title: '提交成功'
|
})
|
that.loadComments()
|
},
|
fail(e) {
|
uni.vk.alert(e.msg)
|
}
|
});
|
}
|
}
|
})
|
},
|
loadComments() {
|
uni.vk.callFunction({
|
url: 'client/bbs/pub/comments',
|
data: {
|
aid: this.id
|
},
|
success(data) {
|
that.comments = data.rows
|
uni.hideLoading()
|
},
|
fail() {
|
uni.hideLoading()
|
}
|
});
|
},
|
loadData() {
|
uni.showLoading({
|
title: "加载中..."
|
})
|
uni.vk.callFunction({
|
url: 'client/bbs/pub/detail',
|
data: {
|
_id: this.id
|
},
|
success(data) {
|
that.question = data.data.rows[0]
|
uni.hideLoading()
|
},
|
fail() {
|
uni.hideLoading()
|
}
|
});
|
},
|
parseLoaded() {
|
this.$refs.uReadMore.init();
|
}
|
}
|
}
|
</script>
|
<style lang="scss" scoped>
|
page {
|
background: rgb(244, 246, 248);
|
}
|
|
.header-content {
|
flex: 1;
|
display: flex;
|
flex-direction: column;
|
justify-content: center;
|
font-size: 14px;
|
}
|
|
/* 标题 */
|
.uni-title {
|
display: flex;
|
/* margin-bottom: 5px; */
|
font-size: 14px;
|
font-weight: bold;
|
color: #3b4144;
|
}
|
|
/* 描述 额外文本 */
|
.uni-note {
|
color: #999;
|
font-size: 12px;
|
|
/* #ifndef APP-NVUE */
|
display: flex;
|
/* #endif */
|
flex-direction: row;
|
align-items: center;
|
}
|
|
.footer {
|
display: flex;
|
align-items: center;
|
}
|
|
.article-title {
|
padding: 20px 15px;
|
padding-bottom: 0;
|
font-weight: bold;
|
font-size: 18px;
|
background: #FFFFFF;
|
}
|
|
|
.article-content {
|
background: #FFFFFF;
|
padding: 15px;
|
font-size: 15px;
|
overflow: hidden;
|
}
|
|
.make-comment {
|
padding: 20rpx;
|
|
.box {
|
background: #FFFFFF;
|
|
.selection {
|
font-weight: bold;
|
color: #333333;
|
font-size: 38rpx;
|
padding: 20rpx;
|
}
|
}
|
|
|
}
|
|
.comment-list {
|
padding: 20rpx;
|
|
.box {
|
background: #FFFFFF;
|
|
.selection {
|
font-weight: bold;
|
color: #333333;
|
font-size: 32rpx;
|
padding: 20rpx;
|
}
|
|
.comment-item {
|
border-top: 1px solid #efefef;
|
padding-bottom: 20rpx;
|
|
.comment-text {
|
padding: 20rpx;
|
|
}
|
}
|
|
.wait-confirm {
|
display: inline-block;
|
padding: 10rpx 20rpx;
|
margin-left: 20rpx;
|
border-radius: 5rpx;
|
width: 160rpx;
|
text-align: center;
|
background-color: #f3f3f3;
|
border-color: #f3f3f3;
|
color: #7b7b7b;
|
}
|
|
.has-confirm {
|
display: inline-block;
|
padding: 10rpx 20rpx;
|
margin-left: 20rpx;
|
border-radius: 5rpx;
|
width: 160rpx;
|
text-align: center;
|
color: #0084ff;
|
background: rgba(0, 132, 255, 0.1);
|
border-color: transparent;
|
}
|
|
.del-comment {
|
display: inline-block;
|
padding: 10rpx 20rpx;
|
margin-left: 20rpx;
|
border-radius: 5rpx;
|
width: 160rpx;
|
text-align: center;
|
background-color: #fef0f0;
|
color: #fa3534;
|
border: 1px solid #fab6b6;
|
}
|
|
}
|
|
|
}
|
|
.button-box {
|
padding: 20rpx;
|
}
|
</style>
|
