124 lines
2.7 KiB
Vue
124 lines
2.7 KiB
Vue
<template>
|
|
<ai-detail>
|
|
<template slot="title">
|
|
<ai-title title="详情" isShowBack isShowBottomBorder @onBackClick="cancel(false)">
|
|
</ai-title>
|
|
</template>
|
|
<template slot="content">
|
|
<ai-card title="问答信息">
|
|
<template #content>
|
|
<p class="title">{{info.content}}</p>
|
|
<div class="title-text">{{info.createUserName}}发布于{{info.createTime}} <span>已有{{info.answerCount || 0}}个回答</span></div>
|
|
<div class="item" v-for="(item, index) in info.answers" :key="index">
|
|
<div class="flex">
|
|
<img :src="item.createUserAvatar" alt="">
|
|
<div class="user-info">
|
|
<h3>{{item.createUserName}}</h3>
|
|
<p>{{item.createUserDeptName}}</p>
|
|
</div>
|
|
</div>
|
|
<div class="content" v-html="item.content"></div>
|
|
<ai-uploader :instance="instance" disabled v-model="item.files"></ai-uploader>
|
|
<p class="time"><span>发布于 </span>{{item.createTime}}</p>
|
|
</div>
|
|
<ai-empty v-if="!info.answers.length">暂无回答</ai-empty>
|
|
</template>
|
|
</ai-card>
|
|
</template>
|
|
</ai-detail>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'Detail',
|
|
props: {
|
|
instance: Function,
|
|
dict: Object,
|
|
params: Object
|
|
},
|
|
data () {
|
|
return {
|
|
info: {}
|
|
}
|
|
},
|
|
created () {
|
|
this.getInfo()
|
|
},
|
|
methods: {
|
|
getInfo () {
|
|
this.instance.post(`/app/applearningquestion/queryDetailById?id=${this.params.id}`).then(res => {
|
|
if (res.code == 0) {
|
|
if (res.data) {
|
|
this.info = {...res.data}
|
|
}
|
|
}
|
|
})
|
|
},
|
|
cancel () {
|
|
this.$emit('change', {
|
|
type: 'List',
|
|
isRefresh: true
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.title {
|
|
font-size: 22px;
|
|
font-weight: 700;
|
|
line-height: 44px;
|
|
word-break: break-all;
|
|
}
|
|
.title-text {
|
|
color: #999!important;
|
|
margin-bottom: 24px;
|
|
font-size: 14px;
|
|
span {
|
|
margin-left: 8px;
|
|
}
|
|
}
|
|
.item {
|
|
margin-bottom: 32px;
|
|
border-bottom: 1px solid #eee;
|
|
.flex {
|
|
display: flex;
|
|
img {
|
|
width: 60px;
|
|
height: 60px;
|
|
margin-right: 16px;
|
|
border-radius: 50%;
|
|
}
|
|
h3 {
|
|
line-height: 20px;
|
|
font-size: 20px;
|
|
font-weight: 400;
|
|
margin-bottom: 10px;
|
|
}
|
|
}
|
|
.content {
|
|
margin: 16px 0;
|
|
}
|
|
p {
|
|
line-height: 30px;
|
|
color: #999;
|
|
font-size: 14px;
|
|
}
|
|
.time {
|
|
margin-bottom: 16px;
|
|
}
|
|
.img-list {
|
|
img {
|
|
width: 300px;
|
|
height: 300px;
|
|
margin: 0 8px 8px 0;
|
|
}
|
|
}
|
|
}
|
|
.item:nth-last-of-type(1) {
|
|
border-bottom: 0;
|
|
margin-bottom: 0;
|
|
}
|
|
</style>
|