mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-mobile.git
synced 2025-12-09 02:46:46 +08:00
2022年5月29日 从svn移到git
This commit is contained in:
daihh
611
pages/resource/articeDetail.vue
Normal file
611
pages/resource/articeDetail.vue
Normal file
@@ -0,0 +1,611 @@
|
||||
<template>
|
||||
<!--文章详细页面-->
|
||||
<view><watermark></watermark><u-toast ref="articleToast"></u-toast>
|
||||
<page-title :showBack="true">文章详细信息</page-title>
|
||||
<view class="adetail content">
|
||||
<!--文章内容-->
|
||||
<view class="adetail-title">{{ detail.title }}</view>
|
||||
<view class="adetail-info">
|
||||
<view style="display: flex;">
|
||||
<!-- <author-info :name="detail.sysCreateBy" :avatar="detail.avatar"></author-info> -->
|
||||
<author v-if="detail" :showInfo="true" :data="detail" ></author>
|
||||
</view>
|
||||
<view style="padding: 10upx 10upx 10upx 40upx; font-size: 24rpx;"> {{ detail.sysCreateTime }}</view>
|
||||
</view>
|
||||
<view class="adetail-body">
|
||||
<!-- class="ql-container" -->
|
||||
<view class="ql-container">
|
||||
<!-- class="ql-editor" -->
|
||||
<u-parse class="ql-editor" :content="detail.content" :tagStyle="style"></u-parse>
|
||||
</view>
|
||||
<!-- <view v-if="userInfo.aid==detail.sysCreateAid" style="display: flex;justify-content: flex-end;color: #b1b1b1;padding-top: 10px;">
|
||||
<u-icon @click="toEdit" name="edit-pen-fill" label="编辑"></u-icon>
|
||||
<u-icon @click="del" style="margin-left: 20px;" name="trash" label="删除"></u-icon>
|
||||
</view> -->
|
||||
</view>
|
||||
</view>
|
||||
<comments ref="comComments" v-if="id!=''" :objType="2" :objId="id" ></comments>
|
||||
<interact-fixed v-if="detail.id" :type="2" @comment-success="commentSuccess" :comments="false" :data="detail"></interact-fixed>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import apiArticle from '@/api/modules/article.js'
|
||||
import apiUser from '@/api/system/user.js'
|
||||
|
||||
import { mapGetters } from 'vuex';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
id:'',
|
||||
detail:{avatar:'',sex:null,},
|
||||
loadStatus:'more',
|
||||
page:1,//当前页数
|
||||
pagesize:10, //总页数
|
||||
fileUrl:this.$config.fileUrl,
|
||||
style: {
|
||||
// 字符串的形式
|
||||
p: 'word-break:break-all;font-size: 30rpx;letter-spacing:1rpx; line-height: 1.6;margin-bottom:25px',
|
||||
span: 'word-break:break-all;font-size: 30rpx;letter-spacing:1rpx; line-height: 1.6'
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
onLoad (options) {
|
||||
//console.log(options.id);
|
||||
this.id = options.id;
|
||||
this.getDetail();
|
||||
},
|
||||
onReachBottom(){
|
||||
this.getDetail()
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['userInfo'])
|
||||
},
|
||||
methods: {
|
||||
getDetail(){
|
||||
uni.showLoading({title:'加载中...'});
|
||||
let $this=this;
|
||||
apiArticle.detail(this.id,true).then(res=>{
|
||||
if(res.status == 200){
|
||||
apiUser.getByIds([res.result.sysCreateAid]).then(rs=>{
|
||||
setTimeout(function(){ uni.hideLoading() },100);
|
||||
if(rs.status==200){
|
||||
|
||||
this.detail.sex = null;
|
||||
if(rs.result!='' && rs.result.length>0){
|
||||
let author=rs.result[0];
|
||||
if(author.avatar != '') {
|
||||
res.result.avatar=$this.fileUrl+author.avatar;
|
||||
} else {
|
||||
res.result.avatar='';
|
||||
}
|
||||
// res.result.avatar=$this.fileUrl+author.avatar;
|
||||
res.result.orgInfo=author.orgInfo;
|
||||
res.result.ucode=author.code;
|
||||
res.result.sex=author.sex;
|
||||
|
||||
}
|
||||
console.log(res.result)
|
||||
$this.detail = res.result;
|
||||
}else{
|
||||
$this.detail = res.result;
|
||||
}
|
||||
})
|
||||
}else{
|
||||
setTimeout(function(){ uni.hideLoading() },1);
|
||||
this.$refs.articleToast.show({message:'加载内容失败',type:'error'});
|
||||
console.log(res.message+res.error);
|
||||
}
|
||||
|
||||
}).catch(err=>{
|
||||
setTimeout(function(){ uni.hideLoading() },100);
|
||||
})
|
||||
},
|
||||
commentSuccess(rs){
|
||||
//console.log(rs,'success');
|
||||
this.$refs.comComments.loadData(false);
|
||||
},
|
||||
toEdit(){
|
||||
uni.navigateTo({
|
||||
url:'/pages/plus/editArticle?id='+this.id
|
||||
})
|
||||
},
|
||||
del(){
|
||||
let $this=this;
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '您确定要删除此文章吗？',
|
||||
success: function (res) {
|
||||
if (res.confirm) {
|
||||
//$this.del();
|
||||
apiArticle.del($this.id).then(res=>{
|
||||
if(res.status=200){
|
||||
$this.$refs.articleToast.show({message:'删除成功',type:'success'});
|
||||
//
|
||||
let pages =getCurrentPages();
|
||||
//console.log(pages);
|
||||
const prevPage=pages[pages.length-2];
|
||||
if(!prevPage){
|
||||
uni.switchTab({
|
||||
url:'/pages/index/index'
|
||||
})
|
||||
}else{
|
||||
uni.navigateBack();
|
||||
}
|
||||
}else{
|
||||
$this.$refs.articleToast.show({message:'删除失败，请稍后再试',type:'error'});
|
||||
}
|
||||
})
|
||||
} else if (res.cancel) {
|
||||
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
.adetail{
|
||||
padding: 15upx 30upx;
|
||||
.adetail-title{
|
||||
font-weight: 610;
|
||||
font-size: 32rpx;
|
||||
letter-spacing: 0.5px;
|
||||
padding: 10upx;
|
||||
word-break:break-all;
|
||||
width: 100%;
|
||||
color: #040404;
|
||||
}
|
||||
.adetail-info{
|
||||
padding-top: 12upx;
|
||||
line-height: 50upx;
|
||||
padding-bottom: 10px;
|
||||
color: #7e7e7e;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.adetail-body{
|
||||
padding: 10upx;
|
||||
line-height: 55upx;
|
||||
|
||||
background-color: #FFFFFF;
|
||||
>div{
|
||||
text-indent:24px;
|
||||
font-size: 30rpx;
|
||||
|
||||
}
|
||||
p{
|
||||
font-size: 30rpx;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
.comments{
|
||||
margin-top: 10px;
|
||||
background-color: #FFFFFF;
|
||||
.comments-top{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding-bottom:30upx;
|
||||
border-bottom: 1px solid #f4f4f4;
|
||||
font-weight: 500;
|
||||
font-size: 1.1em;
|
||||
}
|
||||
.comments-items{
|
||||
padding-top: 20upx;
|
||||
.comments-item{
|
||||
padding-bottom: 15px;
|
||||
}
|
||||
.comments-avatar{
|
||||
height: 60upx;
|
||||
width: 60upx;
|
||||
border-radius: 10%;
|
||||
border: 1px solid #f3f3f3;
|
||||
}
|
||||
}
|
||||
}
|
||||
.ql-container {
|
||||
display: block;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
-webkit-user-select: text;
|
||||
user-select: text;
|
||||
outline: none;
|
||||
overflow: hidden;
|
||||
height:auto;
|
||||
width: 100%;
|
||||
}
|
||||
.ql-container[hidden] {
|
||||
display: none;
|
||||
}
|
||||
.ql-container .ql-editor {
|
||||
position: relative;
|
||||
font-size: inherit;
|
||||
line-height: inherit;
|
||||
font-family: inherit;
|
||||
min-height: inherit;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
.ql-container .ql-editor::-webkit-scrollbar {
|
||||
width: 0 !important;
|
||||
}
|
||||
.ql-container .ql-editor.scroll-disabled {
|
||||
overflow: hidden;
|
||||
}
|
||||
.ql-container .ql-image-overlay {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
box-sizing: border-box;
|
||||
border: 1px dashed #ccc;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
.ql-container .ql-image-overlay .ql-image-size {
|
||||
position: absolute;
|
||||
padding: 4px 8px;
|
||||
text-align: center;
|
||||
background-color: #fff;
|
||||
color: #888;
|
||||
border: 1px solid #ccc;
|
||||
box-sizing: border-box;
|
||||
opacity: 0.8;
|
||||
right: 4px;
|
||||
top: 4px;
|
||||
font-size: 12px;
|
||||
display: inline-block;
|
||||
width: auto;
|
||||
}
|
||||
.ql-container .ql-image-overlay .ql-image-toolbar {
|
||||
position: relative;
|
||||
text-align: center;
|
||||
box-sizing: border-box;
|
||||
background: #000;
|
||||
border-radius: 5px;
|
||||
color: #fff;
|
||||
font-size: 0;
|
||||
min-height: 24px;
|
||||
z-index: 100;
|
||||
}
|
||||
.ql-container .ql-image-overlay .ql-image-toolbar span {
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
padding: 5px;
|
||||
font-size: 12px;
|
||||
border-right: 1px solid #fff;
|
||||
}
|
||||
.ql-container .ql-image-overlay .ql-image-toolbar span:last-child {
|
||||
border-right: 0;
|
||||
}
|
||||
.ql-container .ql-image-overlay .ql-image-toolbar span.triangle-up {
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
top: -12px;
|
||||
left: 50%;
|
||||
transform: translatex(-50%);
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-width: 6px;
|
||||
border-style: solid;
|
||||
border-color: transparent transparent black transparent;
|
||||
}
|
||||
.ql-container .ql-image-overlay .ql-image-handle {
|
||||
position: absolute;
|
||||
height: 12px;
|
||||
width: 12px;
|
||||
border-radius: 50%;
|
||||
border: 1px solid #ccc;
|
||||
box-sizing: border-box;
|
||||
background: #fff;
|
||||
}
|
||||
.ql-container .img {
|
||||
display: inline-block;
|
||||
max-width: 100%;
|
||||
}
|
||||
.ql-clipboard p {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.ql-editor {
|
||||
box-sizing: border-box;
|
||||
height: 100%;
|
||||
outline: none;
|
||||
overflow-y: auto;
|
||||
tab-size: 4;
|
||||
-moz-tab-size: 4;
|
||||
text-align: left;
|
||||
white-space: pre-wrap;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
.ql-editor > * {
|
||||
cursor: text;
|
||||
}
|
||||
.ql-editor p,
|
||||
.ql-editor ol,
|
||||
.ql-editor ul,
|
||||
.ql-editor pre,
|
||||
.ql-editor blockquote,
|
||||
.ql-editor h1,
|
||||
.ql-editor h2,
|
||||
.ql-editor h3,
|
||||
.ql-editor h4,
|
||||
.ql-editor h5,
|
||||
.ql-editor h6 {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
counter-reset: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
|
||||
}
|
||||
.ql-editor p{
|
||||
margin-bottom: 20px;
|
||||
font-size: 32rpx;
|
||||
line-height: 1.2em;
|
||||
}
|
||||
.ql-editor ol > li,
|
||||
.ql-editor ul > li {
|
||||
list-style-type: none;
|
||||
}
|
||||
.ql-editor ul > li::before {
|
||||
content: '\2022';
|
||||
}
|
||||
.ql-editor ul[data-checked=true],
|
||||
.ql-editor ul[data-checked=false] {
|
||||
pointer-events: none;
|
||||
}
|
||||
.ql-editor ul[data-checked=true] > li *,
|
||||
.ql-editor ul[data-checked=false] > li * {
|
||||
pointer-events: all;
|
||||
}
|
||||
.ql-editor ul[data-checked=true] > li::before,
|
||||
.ql-editor ul[data-checked=false] > li::before {
|
||||
color: #777;
|
||||
cursor: pointer;
|
||||
pointer-events: all;
|
||||
}
|
||||
.ql-editor ul[data-checked=true] > li::before {
|
||||
content: '\2611';
|
||||
}
|
||||
.ql-editor ul[data-checked=false] > li::before {
|
||||
content: '\2610';
|
||||
}
|
||||
.ql-editor li::before {
|
||||
display: inline-block;
|
||||
white-space: nowrap;
|
||||
width: 2em;
|
||||
}
|
||||
.ql-editor ol li {
|
||||
counter-reset: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
|
||||
counter-increment: list-0;
|
||||
}
|
||||
.ql-editor ol li:before {
|
||||
content: counter(list-0, decimal) '. ';
|
||||
}
|
||||
.ql-editor ol li.ql-indent-1 {
|
||||
counter-increment: list-1;
|
||||
}
|
||||
.ql-editor ol li.ql-indent-1:before {
|
||||
content: counter(list-1, lower-alpha) '. ';
|
||||
}
|
||||
.ql-editor ol li.ql-indent-1 {
|
||||
counter-reset: list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
|
||||
}
|
||||
.ql-editor ol li.ql-indent-2 {
|
||||
counter-increment: list-2;
|
||||
}
|
||||
.ql-editor ol li.ql-indent-2:before {
|
||||
content: counter(list-2, lower-roman) '. ';
|
||||
}
|
||||
.ql-editor ol li.ql-indent-2 {
|
||||
counter-reset: list-3 list-4 list-5 list-6 list-7 list-8 list-9;
|
||||
}
|
||||
.ql-editor ol li.ql-indent-3 {
|
||||
counter-increment: list-3;
|
||||
}
|
||||
.ql-editor ol li.ql-indent-3:before {
|
||||
content: counter(list-3, decimal) '. ';
|
||||
}
|
||||
.ql-editor ol li.ql-indent-3 {
|
||||
counter-reset: list-4 list-5 list-6 list-7 list-8 list-9;
|
||||
}
|
||||
.ql-editor ol li.ql-indent-4 {
|
||||
counter-increment: list-4;
|
||||
}
|
||||
.ql-editor ol li.ql-indent-4:before {
|
||||
content: counter(list-4, lower-alpha) '. ';
|
||||
}
|
||||
.ql-editor ol li.ql-indent-4 {
|
||||
counter-reset: list-5 list-6 list-7 list-8 list-9;
|
||||
}
|
||||
.ql-editor ol li.ql-indent-5 {
|
||||
counter-increment: list-5;
|
||||
}
|
||||
.ql-editor ol li.ql-indent-5:before {
|
||||
content: counter(list-5, lower-roman) '. ';
|
||||
}
|
||||
.ql-editor ol li.ql-indent-5 {
|
||||
counter-reset: list-6 list-7 list-8 list-9;
|
||||
}
|
||||
.ql-editor ol li.ql-indent-6 {
|
||||
counter-increment: list-6;
|
||||
}
|
||||
.ql-editor ol li.ql-indent-6:before {
|
||||
content: counter(list-6, decimal) '. ';
|
||||
}
|
||||
.ql-editor ol li.ql-indent-6 {
|
||||
counter-reset: list-7 list-8 list-9;
|
||||
}
|
||||
.ql-editor ol li.ql-indent-7 {
|
||||
counter-increment: list-7;
|
||||
}
|
||||
.ql-editor ol li.ql-indent-7:before {
|
||||
content: counter(list-7, lower-alpha) '. ';
|
||||
}
|
||||
.ql-editor ol li.ql-indent-7 {
|
||||
counter-reset: list-8 list-9;
|
||||
}
|
||||
.ql-editor ol li.ql-indent-8 {
|
||||
counter-increment: list-8;
|
||||
}
|
||||
.ql-editor ol li.ql-indent-8:before {
|
||||
content: counter(list-8, lower-roman) '. ';
|
||||
}
|
||||
.ql-editor ol li.ql-indent-8 {
|
||||
counter-reset: list-9;
|
||||
}
|
||||
.ql-editor ol li.ql-indent-9 {
|
||||
counter-increment: list-9;
|
||||
}
|
||||
.ql-editor ol li.ql-indent-9:before {
|
||||
content: counter(list-9, decimal) '. ';
|
||||
}
|
||||
.ql-editor .ql-indent-1:not(.ql-direction-rtl) {
|
||||
padding-left: 2em;
|
||||
}
|
||||
.ql-editor li.ql-indent-1:not(.ql-direction-rtl) {
|
||||
padding-left: 2em;
|
||||
}
|
||||
.ql-editor .ql-indent-1.ql-direction-rtl.ql-align-right {
|
||||
padding-right: 2em;
|
||||
}
|
||||
.ql-editor li.ql-indent-1.ql-direction-rtl.ql-align-right {
|
||||
padding-right: 2em;
|
||||
}
|
||||
.ql-editor .ql-indent-2:not(.ql-direction-rtl) {
|
||||
padding-left: 4em;
|
||||
}
|
||||
.ql-editor li.ql-indent-2:not(.ql-direction-rtl) {
|
||||
padding-left: 4em;
|
||||
}
|
||||
.ql-editor .ql-indent-2.ql-direction-rtl.ql-align-right {
|
||||
padding-right: 4em;
|
||||
}
|
||||
.ql-editor li.ql-indent-2.ql-direction-rtl.ql-align-right {
|
||||
padding-right: 4em;
|
||||
}
|
||||
.ql-editor .ql-indent-3:not(.ql-direction-rtl) {
|
||||
padding-left: 6em;
|
||||
}
|
||||
.ql-editor li.ql-indent-3:not(.ql-direction-rtl) {
|
||||
padding-left: 6em;
|
||||
}
|
||||
.ql-editor .ql-indent-3.ql-direction-rtl.ql-align-right {
|
||||
padding-right: 6em;
|
||||
}
|
||||
.ql-editor li.ql-indent-3.ql-direction-rtl.ql-align-right {
|
||||
padding-right: 6em;
|
||||
}
|
||||
.ql-editor .ql-indent-4:not(.ql-direction-rtl) {
|
||||
padding-left: 8em;
|
||||
}
|
||||
.ql-editor li.ql-indent-4:not(.ql-direction-rtl) {
|
||||
padding-left: 8em;
|
||||
}
|
||||
.ql-editor .ql-indent-4.ql-direction-rtl.ql-align-right {
|
||||
padding-right: 8em;
|
||||
}
|
||||
.ql-editor li.ql-indent-4.ql-direction-rtl.ql-align-right {
|
||||
padding-right: 8em;
|
||||
}
|
||||
.ql-editor .ql-indent-5:not(.ql-direction-rtl) {
|
||||
padding-left: 10em;
|
||||
}
|
||||
.ql-editor li.ql-indent-5:not(.ql-direction-rtl) {
|
||||
padding-left: 10em;
|
||||
}
|
||||
.ql-editor .ql-indent-5.ql-direction-rtl.ql-align-right {
|
||||
padding-right: 10em;
|
||||
}
|
||||
.ql-editor li.ql-indent-5.ql-direction-rtl.ql-align-right {
|
||||
padding-right: 10em;
|
||||
}
|
||||
.ql-editor .ql-indent-6:not(.ql-direction-rtl) {
|
||||
padding-left: 12em;
|
||||
}
|
||||
.ql-editor li.ql-indent-6:not(.ql-direction-rtl) {
|
||||
padding-left: 12em;
|
||||
}
|
||||
.ql-editor .ql-indent-6.ql-direction-rtl.ql-align-right {
|
||||
padding-right: 12em;
|
||||
}
|
||||
.ql-editor li.ql-indent-6.ql-direction-rtl.ql-align-right {
|
||||
padding-right: 12em;
|
||||
}
|
||||
.ql-editor .ql-indent-7:not(.ql-direction-rtl) {
|
||||
padding-left: 14em;
|
||||
}
|
||||
.ql-editor li.ql-indent-7:not(.ql-direction-rtl) {
|
||||
padding-left: 14em;
|
||||
}
|
||||
.ql-editor .ql-indent-7.ql-direction-rtl.ql-align-right {
|
||||
padding-right: 14em;
|
||||
}
|
||||
.ql-editor li.ql-indent-7.ql-direction-rtl.ql-align-right {
|
||||
padding-right: 14em;
|
||||
}
|
||||
.ql-editor .ql-indent-8:not(.ql-direction-rtl) {
|
||||
padding-left: 16em;
|
||||
}
|
||||
.ql-editor li.ql-indent-8:not(.ql-direction-rtl) {
|
||||
padding-left: 16em;
|
||||
}
|
||||
.ql-editor .ql-indent-8.ql-direction-rtl.ql-align-right {
|
||||
padding-right: 16em;
|
||||
}
|
||||
.ql-editor li.ql-indent-8.ql-direction-rtl.ql-align-right {
|
||||
padding-right: 16em;
|
||||
}
|
||||
.ql-editor .ql-indent-9:not(.ql-direction-rtl) {
|
||||
padding-left: 18em;
|
||||
}
|
||||
.ql-editor li.ql-indent-9:not(.ql-direction-rtl) {
|
||||
padding-left: 18em;
|
||||
}
|
||||
.ql-editor .ql-indent-9.ql-direction-rtl.ql-align-right {
|
||||
padding-right: 18em;
|
||||
}
|
||||
.ql-editor li.ql-indent-9.ql-direction-rtl.ql-align-right {
|
||||
padding-right: 18em;
|
||||
}
|
||||
.ql-editor .ql-direction-rtl {
|
||||
direction: rtl;
|
||||
text-align: inherit;
|
||||
}
|
||||
.ql-editor .ql-align-center {
|
||||
text-align: center;
|
||||
}
|
||||
.ql-editor .ql-align-justify {
|
||||
text-align: justify;
|
||||
}
|
||||
.ql-editor .ql-align-right {
|
||||
text-align: right;
|
||||
}
|
||||
.ql-editor.ql-blank::before {
|
||||
color: rgba(0, 0, 0, 0.6);
|
||||
content: attr(data-placeholder);
|
||||
font-style: italic;
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
}
|
||||
.ql-container.ql-disabled .ql-editor ul[data-checked] > li::before {
|
||||
pointer-events: none;
|
||||
}
|
||||
.ql-clipboard {
|
||||
left: -100000px;
|
||||
height: 1px;
|
||||
overflow-y: hidden;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
}
|
||||
</style>
|
||||
832
pages/resource/courseDetail.vue
Normal file
832
pages/resource/courseDetail.vue
Normal file
@@ -0,0 +1,832 @@
|
||||
<template>
|
||||
<!--录播课详情页-->
|
||||
<view>
|
||||
<watermark></watermark>
|
||||
<u-toast ref="messager"></u-toast>
|
||||
<page-title :showBack="true">{{courseInfo.name}}</page-title>
|
||||
<!--课程目录-->
|
||||
<view class="tabbar">
|
||||
<view class="tabbar-item" @click="clicktab(0)" :class="{ active: tabIndex == 0 }">简介</view>
|
||||
<view class="tabbar-item" @click="clicktab(1)" :class="{ active: tabIndex == 1 }">大纲</view>
|
||||
<view class="tabbar-item" @click="clicktab(2)" :class="{ active: tabIndex == 2 }">评论</view>
|
||||
</view>
|
||||
<!-- 课程简介 -->
|
||||
<view v-if="tabIndex == 0">
|
||||
<view>
|
||||
<view>
|
||||
<!--课程图片-->
|
||||
<view style="position: relative;">
|
||||
<view style="width: 100%;height: 450upx;background-color: #ffffff;">
|
||||
<course-image v-if="courseInfo.id != ''" :course="courseInfo" style="height: 450upx;min-height: 450rpx;">
|
||||
</course-image>
|
||||
</view>
|
||||
<!-- <view v-if="studyId == ''" style="position: absolute;top: 0rpx;z-index: 90;width: 100%;">
|
||||
<view class="bm-button" style="text-align: center;">
|
||||
<u-button class="u-but" @click="submitSignup" text="报名后即刻开始学习" type="warning">
|
||||
</u-button>
|
||||
</view>
|
||||
</view> -->
|
||||
</view>
|
||||
</view>
|
||||
<view class="content">
|
||||
<view class="content-tit" style="padding: 20upx 0;">{{ courseInfo.name }}</view>
|
||||
<view class="content_top"style="display: flex;flex-wrap: wrap;">
|
||||
<!-- <view v-for="(item, idx) in teachers" :key="idx" style="display: flex;"> -->
|
||||
<!-- <view> -->
|
||||
<!-- <u-avatar v-if="item.authorInfo.avatar && item.authorInfo.avatar!=''" shape="square" :size="25"
|
||||
:src="$config.fileUrl+item.authorInfo.avatar"></u-avatar> -->
|
||||
<!-- <u-avatar v-else :size="25" icon="account" shape="square"></u-avatar> -->
|
||||
<!-- <view class="uavatar">
|
||||
<view class="uavatar-scale"> {{avatarText(item.teacherName)}}</view>
|
||||
</view> -->
|
||||
<!-- </view> -->
|
||||
<view v-for="(item, idx) in teachers" :key="idx">
|
||||
<!-- <text style="margin-left: 16upx;font-size: 26upx;color: #444444;">授课老师</text> -->
|
||||
<text style="font-size: 32upx;color: #6c6c6c;padding-right: 20upx;">{{ item.teacherName }}</text>
|
||||
</view>
|
||||
<!-- </view> -->
|
||||
<!-- <view class="top_top"> -->
|
||||
<!-- <view class="item-author" style="display: flex;"> -->
|
||||
<!-- <view><u-avatar :size="25" :src="avatar"></u-avatar></view> -->
|
||||
<!-- <view style="padding-left: 10upx;padding-top: 6upx;display: flex;line-height: 45upx;">
|
||||
<u-avatar v-if="authorInfo.avatar == ''" :size="25" shape="square" icon="account"></u-avatar>
|
||||
<u-avatar v-else :size="25" shape="square" :src="authorInfo.avatar"></u-avatar>
|
||||
<text style="margin-left: 10upx;">{{ courseInfo.sysCreateBy }}</text>
|
||||
<text style="margin-left: 10upx;">{{ authorInfo.orgInfo }}</text>
|
||||
</view> -->
|
||||
<!-- <author v-if="authorInfo" :showInfo="true" :data="authorInfo"></author> -->
|
||||
<!-- </view> -->
|
||||
<!-- </view> -->
|
||||
<view>
|
||||
<!-- <view class="share-btn" @click="openShare">
|
||||
<view class="share-btn-icon"><image style="width: 30upx;height: 30upx;" :src="'/static/images/icon/share.png'" alt=""></image></view>
|
||||
<view class="share-btn-name">分享</view>
|
||||
</view> -->
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!--属性-->
|
||||
<view>
|
||||
<view class="content" style="">
|
||||
<!-- <view class="content-tit">{{ courseInfo.name }}</view> -->
|
||||
<!-- <view class="tags" v-if="tags.length>0">
|
||||
<view v-for="(tag, tidx) in tags" :key="tidx" class="tags-item">{{ tag }}</view>
|
||||
</view> -->
|
||||
<view class="c-score">
|
||||
<view class="c-score-lable">{{ courseInfo.studys }}人学习</view>
|
||||
<text class="c-score-value">{{changeScore(courseInfo.score)}}分</text>
|
||||
<!-- <text class="c-score-unit"></text> -->
|
||||
</view>
|
||||
<!-- <view style="display: flex;justify-content: space-between;margin-left: 20upx;">
|
||||
<view class="cfield">
|
||||
<view class="cfield-lable">资源归属:
|
||||
<text class="cfield-value">{{courseInfo.resOwner1}}</text>
|
||||
<text class="cfield-value">/{{courseInfo.resOwner2}}</text>
|
||||
<text v-if="courseInfo.resOwner3!==''" class="cfield-value">/{{courseInfo.resOwner3}}</text>
|
||||
</view>
|
||||
<view class="cfield-lable">{{courseInfo.studys}}人学习</view>
|
||||
</view>
|
||||
<view class="cscore">
|
||||
<text class="cscore-value">5</text>
|
||||
<text class="cscore-unit">分</text>
|
||||
</view>
|
||||
</view> -->
|
||||
</view>
|
||||
<view class="bottom" style="min-height: 800upx;">
|
||||
<view class="consultant">
|
||||
<view class="particulars">目标人群</view>
|
||||
<view class="matter">{{ courseInfo.forUsers }}</view>
|
||||
</view>
|
||||
<view v-if="courseInfo.value!=''" class="consultant">
|
||||
<view class="particulars">课程价值</view>
|
||||
<view class="matter">{{ courseInfo.value }}</view>
|
||||
</view>
|
||||
<view v-if="courseInfo.summary!=''" class="consultant">
|
||||
<view class="particulars">课程详情</view>
|
||||
<view class="matter">
|
||||
<u-parse :content="courseInfo.summary"></u-parse>
|
||||
</view>
|
||||
</view>
|
||||
<view style="height: 100upx;"></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 大纲 -->
|
||||
<view v-if="tabIndex == 1">
|
||||
<view class="catalog">
|
||||
<view v-for="(cata, catIdx) in catalogTree" :key="catIdx" style="border-bottom: 1px solid #ebebeb;">
|
||||
<view class="catalog-sec">
|
||||
<view class="catalog-sec-name">
|
||||
<!-- <text>{{ catIdx + 1 }}</text> -->
|
||||
<text>{{ cata.section.name }}</text>
|
||||
</view>
|
||||
<view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
<view>
|
||||
<view v-for="(con, conIdx) in cata.children" :key="conIdx" class="catalog-con">
|
||||
<view class="catalog-con-name">
|
||||
<!-- <text>{{ catIdx + 1 }}.{{ conIdx + 1 }}</text> -->
|
||||
<text class="square-border">{{ getConType(con.contentType) }}</text>
|
||||
<text style="padding-top: 10rpx;">{{ con.contentName }}</text>
|
||||
<!-- <view :class="statusClass(co.status)">
|
||||
|
||||
</view> -->
|
||||
<!-- <text v-if="con.status==0" class="status-tag" :class="statusClass(con.status)">未开始</text>
|
||||
<text v-if="con.status==1" class="status-tag" :class="statusClass(con.status)">进行中</text>
|
||||
<text v-if="con.status==9" class="status-tag" :class="statusClass(con.status)">已完成</text> -->
|
||||
</view>
|
||||
<view>
|
||||
<!-- <text v-if="con.status==0" class="status-tag nostart">未开始</text>
|
||||
<text v-if="con.status==1" class="status-tag studying">进行中</text>
|
||||
<text v-if="con.status==9" class="status-tag finish">已完成</text> -->
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!--评论-->
|
||||
<view v-if="tabIndex == 2">
|
||||
<comments v-if="courseId != ''" ref="comments" :objType="1" :objId="courseId"></comments>
|
||||
</view>
|
||||
<!--底部-->
|
||||
<!--底部-->
|
||||
<interact-fixed v-if="courseInfo.id != ''" ref="fiexdbar" :type="1" :users="teachers" :data="courseInfo" :comments="isComments" @handle-comment="handleComment" @comment-success="refreshComments" :praises="false">
|
||||
<view class="" v-if="tabIndex !== 2">
|
||||
<view v-if="studyId == ''">
|
||||
<!-- 立即报名 -->
|
||||
<!-- btn-default -->
|
||||
<view class="btn btn-active" @click="submitSignup()">{{studyName}}</view>
|
||||
</view>
|
||||
<!--评论-->
|
||||
<view v-else>
|
||||
<view class="btn btn-active" @click="toStudy()">{{studyName}}</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</interact-fixed>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import apiCoursePortal from '@/api/modules/coursePortal.js';
|
||||
import apiCourseStudy from '@/api/modules/courseStudy.js';
|
||||
import apiCourseGrade from '@/api/modules/courseGrade.js';
|
||||
import apiUser from '@/api/system/user.js';
|
||||
import apiResOwner from '@/api/modules/resowner.js';
|
||||
import apiPraises from '@/api/modules/praises.js';
|
||||
import apiTrample from '@/api/modules/trample.js';
|
||||
import {
|
||||
getContentType,
|
||||
toScore
|
||||
} from '@/utils/tools.js';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
isComments:true,
|
||||
courseId: '',
|
||||
studyId: '',
|
||||
studyName:'开始学习',
|
||||
contentType: 1,
|
||||
tabIndex: 0,
|
||||
fileBaseUrl: this.$config.fileUrl,
|
||||
getConType: getContentType,
|
||||
courseInfo: {
|
||||
id: '',
|
||||
coverImg: '',
|
||||
name: '',
|
||||
type: 2,
|
||||
score: 0,
|
||||
answers: 123,
|
||||
favorites: 123,
|
||||
comments: 23,
|
||||
shares: 123,
|
||||
praises: 123,
|
||||
views: 2312
|
||||
},
|
||||
authorInfo: {
|
||||
aid: '',
|
||||
name: '',
|
||||
code: '',
|
||||
orgInfo: ''
|
||||
},
|
||||
tags: [],
|
||||
teachers: [],
|
||||
sectionList: [],
|
||||
contentList: []
|
||||
};
|
||||
},
|
||||
onReady() {
|
||||
this.videoPlayer = uni.createVideoContext('myVideo', this);
|
||||
},
|
||||
onLoad(options) {
|
||||
this.courseId = options.id;
|
||||
uni.setNavigationBarTitle({ title:'\u200E' })
|
||||
if (!this.courseId) {
|
||||
//this.$refs.messager.show({message:'未指定课程参数',type:'error'});
|
||||
//在这个阶段中，上面的代码不起作用
|
||||
uni.showToast({
|
||||
title: '未指定课程'
|
||||
});
|
||||
} else {
|
||||
this.loadDetail(this.courseId);
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
catalogTree() {
|
||||
let treeList = [];
|
||||
let $this = this;
|
||||
$this.sectionList.forEach(sec => {
|
||||
let treeNode = {
|
||||
section: sec,
|
||||
children: []
|
||||
};
|
||||
let finish = true;
|
||||
$this.contentList.forEach(c => {
|
||||
if (c.csectionId == sec.id) {
|
||||
if (c.status < 9) {
|
||||
finish = false;
|
||||
}
|
||||
treeNode.children.push(c);
|
||||
}
|
||||
});
|
||||
if (finish) {
|
||||
sec.status = 9;
|
||||
}
|
||||
treeList.push(treeNode);
|
||||
});
|
||||
return treeList;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
refreshComments(){
|
||||
this.$refs.comments.loadData(false);
|
||||
},
|
||||
handleComment() {
|
||||
this.tabIndex=2;
|
||||
this.isComments = false;
|
||||
},
|
||||
avatarText(name) {
|
||||
let text = name;
|
||||
if (text) {
|
||||
let len = text.length;
|
||||
if (text.length > 2) {
|
||||
text = text.substring(len - 2);
|
||||
}
|
||||
}
|
||||
return text;
|
||||
},
|
||||
changeScore(score) {
|
||||
return toScore(score);
|
||||
},
|
||||
loadDetail(id) {
|
||||
let $this = this;
|
||||
uni.showLoading({
|
||||
title: '加载中...'
|
||||
});
|
||||
apiCoursePortal.detail(id).then(rs => {
|
||||
setTimeout(function() {
|
||||
uni.hideLoading();
|
||||
}, 100);
|
||||
if (rs.status == 200) {
|
||||
this.courseInfo = rs.result.course;
|
||||
this.teachers = rs.result.teachers;
|
||||
// this.loadUserInfo(this.courseInfo.sysCreateAid);
|
||||
if (rs.result.teachers && rs.result.teachers.length > 0) {
|
||||
let userIds = [];
|
||||
let ctoUsers = [];
|
||||
rs.result.teachers.forEach(item => {
|
||||
item.authorInfo = {
|
||||
aid: '',
|
||||
name: '',
|
||||
orgInfo: '',
|
||||
avatar: '',
|
||||
code: ''
|
||||
};
|
||||
userIds.push(item.teacherId);
|
||||
ctoUsers.push({
|
||||
aid: item.teacherId,
|
||||
name: item.teacherName
|
||||
});
|
||||
});
|
||||
// this.toUsers = ctoUsers;
|
||||
$this.loadAuthorInfo(rs.result.teachers, userIds);
|
||||
}
|
||||
this.loadResOwner();
|
||||
if (this.courseInfo.tags != '') {
|
||||
this.tags = this.courseInfo.tags.split(',');
|
||||
}
|
||||
//设置必须的字段
|
||||
rs.result.sections.forEach(sec => {
|
||||
sec.status = 0; //加入状态表未开始
|
||||
rs.result.contents.forEach(c => {
|
||||
c.status = 0; //初始化状态 ，未开始
|
||||
c.studyItemId = ''; //初始化字段，学习条目id
|
||||
});
|
||||
});
|
||||
this.contentList = rs.result.contents;
|
||||
this.sectionList = rs.result.sections;
|
||||
//study info
|
||||
this.loadStudyInfo();
|
||||
} else {
|
||||
this.$refs.messager.show({
|
||||
message: rs.message,
|
||||
type: 'error'
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
loadAuthorInfo(list, ids) {
|
||||
//加载作者信息，头像，机构信息
|
||||
if (ids.length == 0) {
|
||||
return;
|
||||
}
|
||||
apiUser.getByIds(ids).then(res => {
|
||||
if (res.status == 200) {
|
||||
list.forEach((item, index) => {
|
||||
res.result.some(author => {
|
||||
if (author.aid == item.teacherId) {
|
||||
item.authorInfo = author;
|
||||
return true;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
});
|
||||
});
|
||||
} else {
|
||||
//console.log('加载课程信息失败:'+res.error);
|
||||
//this.$message.error(res.message);
|
||||
}
|
||||
});
|
||||
},
|
||||
loadStudyInfo() {
|
||||
//获取学习信息
|
||||
let $this = this;
|
||||
apiCourseStudy.studyInfo(this.courseId).then(res => {
|
||||
if (res.status == 200) {
|
||||
if (res.result.signup) {
|
||||
this.studyId = res.result.studyId; //设置学习id
|
||||
if(res.result.progress){
|
||||
this.studyName='继续学习';
|
||||
}
|
||||
//需要判断此内容是否已学习完成，如果已学习完成，不需要再请不说了
|
||||
}else{
|
||||
this.submitSignup();//直接报名
|
||||
}
|
||||
} else {
|
||||
this.$message.error(res.message);
|
||||
}
|
||||
});
|
||||
},
|
||||
loadResOwner() {
|
||||
let c = this.courseInfo;
|
||||
apiResOwner.list(1, '').then(rs => {
|
||||
rs.result.forEach(item => {
|
||||
if (item.code == c.resOwner1) {
|
||||
c.resOwner1 = item.name;
|
||||
}
|
||||
if (item.code == c.resOwner2) {
|
||||
c.resOwner2 = item.name;
|
||||
}
|
||||
if (item.code == c.resOwner3) {
|
||||
c.resOwner3 = item.name;
|
||||
}
|
||||
});
|
||||
});
|
||||
},
|
||||
loadUserInfo(uid) {
|
||||
apiUser.getByIds([uid]).then(res => {
|
||||
if (res.status == 200) {
|
||||
this.authorInfo = res.result[0];
|
||||
}
|
||||
});
|
||||
},
|
||||
submitSignup() {
|
||||
//报名
|
||||
let pamars = {
|
||||
courseId: this.courseId,
|
||||
courseName: this.courseInfo.name,
|
||||
courseType: this.courseInfo.type,
|
||||
signType: 1,
|
||||
signInfo: '自主报名'
|
||||
};
|
||||
let $this = this;
|
||||
apiCourseStudy.signup(pamars).then(res => {
|
||||
if (res.status == 200) {
|
||||
// this.$refs.messager.show({
|
||||
// message: '报名成功',
|
||||
// type: 'success'
|
||||
// });
|
||||
this.studyId = res.result.studyId; //设置学习id
|
||||
this.tabIndex = 1;
|
||||
} else {
|
||||
this.$refs.messager.show({
|
||||
message: res.message,
|
||||
type: 'error'
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
openComment() {
|
||||
//打开评论窗口，调用组件内事件
|
||||
this.$refs.fiexdbar.openInput();
|
||||
},
|
||||
openShare() {
|
||||
this.$refs.fiexdbar.addShare();
|
||||
},
|
||||
clicktab(idx) {
|
||||
if (this.studyId == '') {
|
||||
uni.showToast({
|
||||
title: '学习后可以查看'
|
||||
});
|
||||
return;
|
||||
}
|
||||
this.tabIndex = idx;
|
||||
if(idx == 2) {
|
||||
this.isComments = false;
|
||||
} else {
|
||||
this.isComments = true;
|
||||
}
|
||||
},
|
||||
toStudy() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/study/onlineCourse?id=' + this.courseInfo.id + '&studyId=' + this.studyId
|
||||
});
|
||||
},
|
||||
toTestList() {
|
||||
uni.navigateTo({
|
||||
url: 'examList'
|
||||
});
|
||||
},
|
||||
startTest() {
|
||||
//考试直接重定赂
|
||||
uni.redirectTo({
|
||||
url: 'exam'
|
||||
});
|
||||
},
|
||||
statusClass(status) {
|
||||
let statusObj = {
|
||||
0: 'nostart',
|
||||
1: 'studying',
|
||||
9: 'finish',
|
||||
}
|
||||
return statusObj[status]
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
/deep/ .interact-bar-item {
|
||||
width: 50px;
|
||||
.interact-bar-icon{
|
||||
text-align: center;
|
||||
img{
|
||||
width: 30upx;
|
||||
height: 30upx;
|
||||
}
|
||||
}
|
||||
.interact-bar-txt{
|
||||
font-size: 12px;
|
||||
color: #343434;
|
||||
text-align: center;
|
||||
|
||||
}
|
||||
}
|
||||
.field{
|
||||
width: 200px;
|
||||
height: 40px;
|
||||
line-height: 30px;
|
||||
background: rgb(247,247,249);
|
||||
border-radius: 10upx;
|
||||
display: flex;
|
||||
.field-icon{
|
||||
margin-top: 2px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
.wenz{
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
margin-left: 2px;
|
||||
margin-top: 6px;
|
||||
}
|
||||
}
|
||||
.uavatar {
|
||||
border: 1px solid #73adfe;
|
||||
background-color: #d9e9ff;
|
||||
color: #73adfe;
|
||||
font-size: 12px;
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.uavatar-scale {
|
||||
transform: scale(0.8);
|
||||
}
|
||||
}
|
||||
|
||||
.bm-button {
|
||||
text-align: center;
|
||||
|
||||
.u-but {
|
||||
width: 320rpx;
|
||||
height: 64rpx;
|
||||
background-color: #2F2F2F;
|
||||
opacity: 0.4;
|
||||
border-radius: 10rpx;
|
||||
border-color: #2F2F2F;
|
||||
margin: 158rpx auto;
|
||||
}
|
||||
}
|
||||
|
||||
.tabbar {
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
//background-color: #FFFFFF;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
color: #575757;
|
||||
|
||||
.tabbar-item {
|
||||
text-align: center;
|
||||
line-height: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.active {
|
||||
border-bottom: 2px solid #00aaff;
|
||||
color: #00aaff;
|
||||
font-size: 36rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.toptitle {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
line-height: 50upx;
|
||||
border-bottom: 1px solid #e8e8e8;
|
||||
padding: 5px 10px;
|
||||
background-color: #ffffff;
|
||||
|
||||
.inner {
|
||||
padding: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.cfield {
|
||||
line-height: 50upx;
|
||||
font-size: 28upx;
|
||||
|
||||
.cfield-lable {
|
||||
color: #767676;
|
||||
}
|
||||
|
||||
.cfield-value {
|
||||
color: #343434;
|
||||
margin-left: 10upx;
|
||||
}
|
||||
}
|
||||
|
||||
.cscore {
|
||||
.cscore-value {
|
||||
font-size: 60upx;
|
||||
color: #ffb30f;
|
||||
}
|
||||
|
||||
.cscore-unit {}
|
||||
}
|
||||
|
||||
.btn {
|
||||
width: 100px;
|
||||
height: 40px;
|
||||
font-size: 14px;
|
||||
color: #ffffff;
|
||||
text-align: center;
|
||||
line-height: 40px;
|
||||
border-radius: 20px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.btn-default {
|
||||
background: #5ba2fc;
|
||||
}
|
||||
|
||||
.btn-active {
|
||||
background: #ffb30f;
|
||||
//background: #5ba2fc;
|
||||
}
|
||||
|
||||
.tags {
|
||||
padding: 30upx 0;
|
||||
|
||||
.tags-item {
|
||||
display: inline-block;
|
||||
background: #f6fafd;
|
||||
border-radius: 14px;
|
||||
padding: 8upx 20upx;
|
||||
margin-right: 12upx;
|
||||
// margin: 6upx;
|
||||
color: #6d99fc;
|
||||
font-size: 28upx;
|
||||
}
|
||||
}
|
||||
|
||||
.c-score {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-end;
|
||||
// padding-top: 20upx;
|
||||
padding-bottom: 10upx;
|
||||
|
||||
.c-score-lable {
|
||||
color: #767676;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.c-score-value {
|
||||
margin-left: auto;
|
||||
color: #ffb30f;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.c-score-unit {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
border-radius: 0px;
|
||||
padding:0 20px 10px 15px;;
|
||||
margin-top: 0upx;
|
||||
}
|
||||
|
||||
.content-tit {
|
||||
font-size: 18px;
|
||||
font-weight: bolder;
|
||||
word-break:break-all;
|
||||
// margin-left: 10px;
|
||||
}
|
||||
|
||||
.content_top {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.teaters {
|
||||
display: flex;
|
||||
|
||||
.top_top {
|
||||
font-size: 18px;
|
||||
color: #696969;
|
||||
margin-top: 12px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.top_bot {
|
||||
font-size: 15px;
|
||||
color: #787878;
|
||||
margin-top: 15px;
|
||||
font-weight: bold;
|
||||
margin-left: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.studying {
|
||||
background-color: #FDF1D7;
|
||||
color: #FFB30F;
|
||||
}
|
||||
|
||||
.finish {
|
||||
background-color: #BED2F8;
|
||||
color: #3C7EFF;
|
||||
}
|
||||
|
||||
.nostart {
|
||||
background-color: #FFC8C8;
|
||||
color: #EE474A;
|
||||
}
|
||||
|
||||
.status-tag {
|
||||
width: 88upx;
|
||||
height: 38upx;
|
||||
line-height: 38upx;
|
||||
}
|
||||
|
||||
|
||||
.bottom {
|
||||
background: #ffffff;
|
||||
padding: 0 40upx;
|
||||
margin-top: 10px;
|
||||
|
||||
.consultant {
|
||||
border-bottom: 2px solid #fafafa;
|
||||
padding: 20upx 0;
|
||||
|
||||
.particulars {
|
||||
font-size: 32upx;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #444444;
|
||||
margin-top: 30upx;
|
||||
}
|
||||
|
||||
.matter {
|
||||
font-size: 28upx;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #787878;
|
||||
line-height: 33upx;
|
||||
// text-indent: 1em;
|
||||
margin-top: 20upx;
|
||||
word-break:break-all;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.status-tag {
|
||||
width: 120upx;
|
||||
height: 50upx;
|
||||
display: inline-block;
|
||||
font-size: 24upx;
|
||||
text-align: center;
|
||||
line-height: 50upx;
|
||||
border-radius: 14upx;
|
||||
}
|
||||
|
||||
.studying {
|
||||
background: #fdf1d7;
|
||||
color: #ffb30f;
|
||||
}
|
||||
|
||||
.finish {
|
||||
background: #f3f9ff;
|
||||
color: #00aaff;
|
||||
}
|
||||
|
||||
.nostart {
|
||||
background: #ffe8e7;
|
||||
color: #ff0000;
|
||||
}
|
||||
|
||||
.catalog {
|
||||
background: #ffffff;
|
||||
padding: 20upx;
|
||||
|
||||
.catalog-sec {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
border-bottom: 2upx solid #fafafa;
|
||||
padding: 20upx;
|
||||
line-height: 40upx;
|
||||
|
||||
.catalog-sec-name {
|
||||
max-width: 90%;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
|
||||
.catalog-con {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 20upx;
|
||||
line-height: 40upx;
|
||||
|
||||
.square-border {
|
||||
// width: 56rpx;
|
||||
// height: 32rpx;
|
||||
text-align: center;
|
||||
|
||||
display: inline-block;
|
||||
border: 1px solid;
|
||||
// line-height: 32rpx;
|
||||
padding: 0upx 4upx;
|
||||
font-size: 19rpx;
|
||||
margin: 0upx 10upx;
|
||||
}
|
||||
|
||||
.catalog-con-name {
|
||||
padding-left: 40upx;
|
||||
color: #696969;
|
||||
font-size: 28rpx;
|
||||
word-break:break-all;
|
||||
|
||||
|
||||
// text {
|
||||
// line-height: 40rpx;
|
||||
// }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// /deep/
|
||||
// .interact-bar{
|
||||
// justify-content: flex-start;
|
||||
// }
|
||||
</style>
|
||||
1054
pages/resource/index.vue
Normal file
1054
pages/resource/index.vue
Normal file
File diff suppressed because it is too large
Load Diff
1618
pages/resource/microDetail.vue
Normal file
1618
pages/resource/microDetail.vue
Normal file
File diff suppressed because it is too large
Load Diff
782
pages/resource/qaDetail.vue
Normal file
782
pages/resource/qaDetail.vue
Normal file
@@ -0,0 +1,782 @@
|
||||
<template>
|
||||
<!--问答详细页面--------需要改-->
|
||||
<!--从点击进入问答详情那一刻开始，哪些人有哪些权限
|
||||
比如发起问题的人有所有权限（同用户登录id判断）
|
||||
我不是问题发起人，但是我仍然有权限更改我发布的消息
|
||||
这一块的判断还是有些问题，在pc端进行理清逻辑
|
||||
-->
|
||||
<view class="big_box"><watermark></watermark>
|
||||
<page-title :showBack="true">问答详情</page-title>
|
||||
<u-toast ref="messager"></u-toast>
|
||||
<view class="adetail content">
|
||||
<!--文章内容-->
|
||||
<view class="adetail-title" v-if="detailData.id" style="word-break: break-all;">
|
||||
<text class="qa-basic qa-solve" v-if="detailData.isResolve">[已解决]</text>
|
||||
<text class="qa-basic qa-unSolve" v-else>[待解决]</text>
|
||||
{{ detailData.title }}
|
||||
</view>
|
||||
<view class="adetail-info">
|
||||
<view style="display: flex;line-height: 40upx;">
|
||||
<author-info :name="detailData.sysCreateBy" :avatar="detailData.avatar" :sex="detailData.sex" :info="detailData.ucode" :showInfo="true"></author-info>
|
||||
</view>
|
||||
<view style="padding: 20upx 0upx 10upx 40upx; font-size: 24rpx; ">{{ detailData.sysCreateTime }}</view>
|
||||
</view>
|
||||
<view class="adetail-body">
|
||||
<u-parse :content="detailData.content"></u-parse>
|
||||
<view v-for="(img,idx) in images" :key="idx"><image :src="img" mode="aspectFit"></image> </view>
|
||||
</view>
|
||||
</view>
|
||||
<view>
|
||||
<view class="comments">
|
||||
<view class="comments-top">
|
||||
<view v-if="detailData.id">回答<text style="color: #818181;margin-left: 5px;">{{ answers }}</text></view>
|
||||
<!-- <view class="share-btn" @click="openShare">
|
||||
<view class="share-btn-icon"><img src="../../static/images/icon/share.png" alt="" /></view>
|
||||
<view class="share-btn-name">分享</view>
|
||||
</view> -->
|
||||
</view>
|
||||
<view class="comments-items">
|
||||
<!--内容确定了，这部分样式要移到class中-->
|
||||
<view v-for="(an, anidx) in answerList" :key="anidx" class="comments-item">
|
||||
<view style="display: flex;justify-content: space-between;align-items: center;">
|
||||
<view class="one-wrap">
|
||||
<author v-if="an" :showInfo="true" :data="an"></author>
|
||||
<view v-if="detailData.isResolve" style="margin-left: auto"><text v-if="an.isBest" style="color:#FFB30F;">最佳答案</text></view>
|
||||
<view v-if="userInfo.aid==an.sysCreateAid" style="display: flex;"><u-icon @click="openBtns(an,anidx)" name="more-dot-fill" color="#979797" size="20"></u-icon></view>
|
||||
<!-- <author-info :name="an.sysCreateBy" :avatar="an.avatar" :info="an.orgInfo" :showInfo="true"></author-info> -->
|
||||
</view>
|
||||
<view v-if="!detailData.isResolve && userInfo.aid==detailData.sysCreateAid">
|
||||
<!-- <u-button v-if="!detailData.isResolve" text="设为最佳" @click="setBest(an)" type="warning" size="small"></u-button> -->
|
||||
</view>
|
||||
</view>
|
||||
<view style="padding: 20upx 0upx 10upx 50upx;color: #4e4e4e;word-break: break-all;white-space: pre-wrap;">
|
||||
{{ displayAll(an) }}
|
||||
<text style="color: #00aaff; " v-if="an.content.length>minTextLen" @click="changeIsAll(an)">{{an.isAll?' 收起':' 全文'}}</text>
|
||||
</view>
|
||||
<view style="display: flex;justify-content: space-between;color: rgb(153, 153, 153);padding-left: 50upx;">
|
||||
<time-show :time="an.sysCreateTime"></time-show>
|
||||
<!-- <view style="padding-left: 50upx;padding-top: 20upx;color: #878787;font-size: 0.9em;">{{ an.sysCreateTime }}</view> -->
|
||||
<view>
|
||||
<!-- <view class="interact-bar-icon" v-if="isPraise"><image style="width:40upx;height: 40upx;" src="/static/images/icon/artice-praise-active.png" alt="" ></view> -->
|
||||
<image @click="openReply(an,{})" style="width:30upx;height: 30upx;margin-right: 40upx;" src="/static/images/icon/comment.png" alt=""/>
|
||||
<image v-if="an.isPraise" @click="removePraise(anidx)" style="width:30upx;height: 30upx;" src="/static/images/icon/artice-praise-active.png" alt=""/>
|
||||
<image v-else @click="addPraise(anidx)" style="width:30upx;height: 30upx;" src="/static/images/icon/artice-praise.png" alt=""/>
|
||||
<!-- <view class="interact-bar-txt">0</view> -->
|
||||
<text style="margin-left: 8upx">{{an.praises}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="twoLevelReply" v-if="an.answers && an.answers.length!=0">
|
||||
<view v-for="(ele, replyIndex) in an.answers" :key="replyIndex" class="comments-item" style="border-bottom: 1px solid #e9e9e9; ">
|
||||
<view style="display: flex;justify-content: space-between;align-items: center;">
|
||||
<view class="one-wrap">
|
||||
<view style="display: flex;">
|
||||
<author v-if="ele" :showInfo="true" :data="ele"></author>
|
||||
<text style="padding-left: 16upx;padding-top: 6upx;color: #979797;">评论</text>
|
||||
<text style="padding-left: 16upx;padding-top: 6upx;font-size: 26upx;">{{ele.replayName}}</text>
|
||||
</view>
|
||||
<view v-if="userInfo.aid==ele.sysCreateAid" style="display: flex;"><u-icon @click="openBtns(ele,replyIndex)" name="more-dot-fill" color="#979797" size="20"></u-icon></view>
|
||||
<!-- <author-info :name="an.sysCreateBy" :avatar="an.avatar" :info="an.orgInfo" :showInfo="true"></author-info> -->
|
||||
</view>
|
||||
<!-- <view v-if="detailData.isResolve"><text v-if="an.isBest" style="color:#FFB30F;">最佳答案</text></view> -->
|
||||
<!-- <view v-if="!detailData.isResolve && userInfo.aid==detailData.sysCreateAid">
|
||||
<u-button v-if="!detailData.isResolve" text="设为最佳" @click="setBest(an)" type="warning" size="small"></u-button>
|
||||
</view> -->
|
||||
</view>
|
||||
<view style="padding: 20upx 0upx 10upx 50upx;color: #4e4e4e;word-break: break-all;white-space: pre-wrap;">
|
||||
{{ displayAll(ele) }}
|
||||
<text style="color: #00aaff; white-space: nowrap;" v-if="ele.content.length>minTextLen" @click="changeIsAll(ele)">{{ele.isAll?' 收起':' 全文'}}</text>
|
||||
</view>
|
||||
<view style="display: flex;justify-content: space-between;color: rgb(153, 153, 153);padding-left: 50upx;">
|
||||
<time-show :time="an.sysCreateTime"></time-show>
|
||||
<!-- <view style="padding-left: 50upx;padding-top: 20upx;color: #878787;font-size: 0.9em;">{{ an.sysCreateTime }}</view> -->
|
||||
<view>
|
||||
<!-- <view class="interact-bar-icon" v-if="isPraise"><image style="width:40upx;height: 40upx;" src="/static/images/icon/artice-praise-active.png" alt="" ></view> -->
|
||||
<image @click="openReply(ele,an)" style="width:30upx;height: 30upx;margin-right: 40upx;" src="/static/images/icon/comment.png" alt=""/>
|
||||
<!-- <image v-if="an.isPraise" style="width:30upx;height: 30upx;" src="/static/images/icon/artice-praise-active.png" alt=""/>
|
||||
<image v-else style="width:30upx;height: 30upx;" src="/static/images/icon/artice-praise.png" alt=""/> -->
|
||||
<!-- <view class="interact-bar-txt">0</view> -->
|
||||
<!-- <text style="margin-left: 8upx">{{an.praises}}</text> -->
|
||||
</view>
|
||||
</view>
|
||||
<!--评论的二级显示-->
|
||||
<view class="twoLevelReply" v-if="ele.answers && ele.answers.length!=0">
|
||||
<view v-for="(row, rowIdx) in ele.answers" :key="rowIdx" class="comments-item">
|
||||
<view style="display: flex;justify-content: space-between;align-items: center;">
|
||||
<view class="one-wrap">
|
||||
<view style="display: flex;">
|
||||
<author v-if="row" :showInfo="true" :data="row"></author>
|
||||
<text style="padding-left: 16upx;padding-top: 6upx;color: #979797;">评论</text>
|
||||
<text style="padding-left: 16upx;padding-top: 6upx;font-size: 26upx;">{{row.replayName}}</text>
|
||||
</view>
|
||||
<view v-if="userInfo.aid==row.sysCreateAid" style="display: flex;"><u-icon @click="openBtns(row,rowIdx)" name="more-dot-fill" color="#979797" size="20"></u-icon></view>
|
||||
</view>
|
||||
</view>
|
||||
<view style="padding: 20upx 0upx 10upx 50upx;color: #4e4e4e;word-break: break-all;white-space: pre-wrap;">
|
||||
{{ displayAll(row) }}
|
||||
<text style="color: #00aaff; white-space: nowrap;" v-if="row.content.length>minTextLen" @click="changeIsAll(row)">{{row.isAll?' 收起':' 全文'}}</text>
|
||||
</view>
|
||||
<view style="display: flex;justify-content: space-between;color: rgb(153, 153, 153);padding-left: 50upx;">
|
||||
<time-show :time="an.sysCreateTime"></time-show>
|
||||
<view>
|
||||
<image @click="openReply(row,ele)" style="width:30upx;height: 30upx;margin-right: 40upx;" src="/static/images/icon/comment.png" alt=""/>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view><uni-load-more :status="loadStatus"></uni-load-more></view>
|
||||
</view>
|
||||
<!-- 下方的点赞 -->
|
||||
<interact-fixed :data="detailData" ref="fiexdbar" :comments="false" :answers="true" :type="4">
|
||||
<view class="field" @click="openAnswerInput()">
|
||||
<u-icon name="edit-pen-fill" size="18" class="field-icon"></u-icon>
|
||||
<text class="wenz">我来回答..</text>
|
||||
</view>
|
||||
</interact-fixed>
|
||||
<!--弹出回答的窗口-->
|
||||
<u-popup :show="replyShow" @close="closeReply">
|
||||
<view>
|
||||
<view style="display: flex;justify-content: space-around;">
|
||||
<view style="padding: 20rpx;flex: 1; white-space: pre-wrap; word-break: break-all;">
|
||||
<u--textarea :height="120" v-model="answercontent" placeholder="请写下您的答案(200字以内),可以@提问者哦～" count maxlength="200"></u--textarea>
|
||||
</view>
|
||||
<view style="padding: 20px 10px">
|
||||
<view style="line-height: 82upx;text-align: center;margin-bottom: 20upx" @click="askQuestioner">@</view>
|
||||
<u-button style="height: 60px;" @click="submitReply" type="primary" size="small" text="提交回答"></u-button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</u-popup>
|
||||
<u-popup :show="answerEdit.show" @close="closeAnswerEdit" @open="openAnswerEdit">
|
||||
<view>
|
||||
<view style="display: flex;justify-content: space-around;">
|
||||
<view style="padding: 20rpx;flex: 1;">
|
||||
<u--textarea :height="120" v-model="curItem.content" placeholder="请输入5-1000个字" count maxlength="1000"></u--textarea>
|
||||
</view>
|
||||
<view style="padding: 40px 10px"><u-button style="height: 60px;" @click="editSubmitAnswer" type="primary" size="small" text="提交回答"></u-button></view>
|
||||
</view>
|
||||
</view>
|
||||
</u-popup>
|
||||
<!--编辑处理-->
|
||||
<u-popup :show="btnsShow" @close="closeBtns">
|
||||
<view>
|
||||
<view class="big-button" v-if="!detailData.isResolve" @click="setBest()">设置为最佳答案</view>
|
||||
<view @click="editAnswer()" class="big-button">编辑</view>
|
||||
<view @click="delAnswer()" class="big-button" style="color: #db0000;">删除</view>
|
||||
<view @click="closeBtns()" class="big-button">取消</view>
|
||||
</view>
|
||||
</u-popup>
|
||||
<u-toast ref="interactToast"></u-toast>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import apiQa from '@/api/modules/qa.js';
|
||||
import apiUser from '@/api/system/user.js'
|
||||
import apiPraises from '@/api/modules/praises.js'
|
||||
import apiMessage from '@/api/system/message.js'
|
||||
import { mapGetters } from 'vuex';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
detailData: {}, //问题详情数据
|
||||
answers:0,
|
||||
images:[],
|
||||
answerList: [], //回答列表数据
|
||||
questionId:'',
|
||||
answercontent:'',
|
||||
fileUrl:this.$config.fileUrl,
|
||||
loadStatus: 'more', //more,loading,noMore
|
||||
minTextLen:100,
|
||||
pageSize: 20,
|
||||
pageIndex: 1,
|
||||
replyShow: false,
|
||||
replyValue: '',
|
||||
isShow: null,
|
||||
bestId: '',
|
||||
btnsShow: false,
|
||||
curItem: {},//当前条目
|
||||
curItemIndex: -1,//当前索引值
|
||||
curParent:{},//当前输入的上级的对象，用于往answers中追加回复的内容
|
||||
curParentId:'',//当前回复的内容的id
|
||||
answerEdit:{
|
||||
show:false
|
||||
},
|
||||
replyLevel:'one',//one代表一级回复，two代表二级回复,
|
||||
loading: false,//控制点赞按钮是否可以点击
|
||||
firstIndex:0,
|
||||
type:4,
|
||||
};
|
||||
},
|
||||
onLoad(option) {
|
||||
this.questionId=option.id
|
||||
this.getData(this.questionId);
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['userInfo'])
|
||||
},
|
||||
onReachBottom(){
|
||||
this.loadStatus='loading';
|
||||
if(this.answerList.length==this.answers||this.answerList.length>this.answers){
|
||||
this.loadStatus='nomore';
|
||||
}else{
|
||||
this.pageIndex++;
|
||||
this.getAnswerList(this.questionId)
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
answercontent(newVal,oldVal){
|
||||
if(!oldVal&&newVal==='@'){
|
||||
if(this.replyLevel=='one'){
|
||||
this.answercontent+=this.detailData.sysCreateBy
|
||||
}
|
||||
if(this.replyLevel=='two'){
|
||||
this.answercontent='@'+this.answerList[this.firstIndex].sysCreateBy
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
closeAnswerEdit(){
|
||||
this.answerEdit.show=false;
|
||||
},
|
||||
openAnswerEdit(){
|
||||
this.answerEdit.show=true;
|
||||
},
|
||||
//获取问题详情数据
|
||||
getData(id) {
|
||||
uni.showLoading({title:'加载中...'})
|
||||
let $this=this;
|
||||
apiQa.detail(id).then(res => {
|
||||
if (res.status == 200) {
|
||||
//处理图片
|
||||
let imgArray=[];
|
||||
if(res.result.images!=''){
|
||||
let array=res.result.images.split(',');
|
||||
array.forEach(imgpath=>{
|
||||
imgArray.push($this.fileUrl+imgpath);
|
||||
});
|
||||
this.images=imgArray;
|
||||
}
|
||||
this.answers=res.result.answers;
|
||||
this.answerList=[]
|
||||
this.getAnswerList(id);
|
||||
apiUser.getByIds([res.result.sysCreateAid]).then(rs=>{
|
||||
setTimeout(function(){ uni.hideLoading() },100);
|
||||
if(rs.status==200){
|
||||
if(rs.result!='' && rs.result.length>0){
|
||||
let author=rs.result[0];
|
||||
if(author.avatar != '') {
|
||||
res.result.avatar=$this.fileUrl+author.avatar;
|
||||
} else {
|
||||
res.result.avatar='';
|
||||
}
|
||||
res.result.sex = author.sex;
|
||||
res.result.orgInfo=author.orgInfo;
|
||||
res.result.ucode=author.code;
|
||||
}
|
||||
$this.detailData = res.result;
|
||||
}else{
|
||||
$this.detailData = res.result;
|
||||
}
|
||||
})
|
||||
setTimeout(function(){ uni.hideLoading() },100);
|
||||
}
|
||||
})
|
||||
.catch(err => {
|
||||
uni.showToast({
|
||||
icon: 'none',
|
||||
title:"获取数据失败"
|
||||
})
|
||||
});
|
||||
},
|
||||
//获取回答列表数据
|
||||
getAnswerList(id) {
|
||||
let params={
|
||||
qid:id,
|
||||
pageSize:this.pageSize,
|
||||
pageIndex:this.pageIndex
|
||||
}
|
||||
apiQa.page(params).then(res => {
|
||||
if (res.status == 200) {
|
||||
let allList=[];
|
||||
this.answerList = [];
|
||||
this.answers= res.result.count;
|
||||
let uids=[];
|
||||
let level3ParentIds=[];
|
||||
res.result.list.forEach(item=>{
|
||||
item.avatar='';
|
||||
item.orgInfo='';
|
||||
item.sex=null;
|
||||
item.isAll=false;
|
||||
uids.push(item.sysCreateAid);
|
||||
allList.push(item);
|
||||
level3ParentIds.push(item.id);
|
||||
if(item.answers && item.answers.length!=0){
|
||||
item.answers.forEach(answers=>{
|
||||
answers.avatar='';
|
||||
answers.orgInfo='';
|
||||
answers.sex=null;
|
||||
answers.isAll=false;
|
||||
uids.push(answers.sysCreateAid);
|
||||
allList.push(answers);
|
||||
level3ParentIds.push(answers.id);
|
||||
})
|
||||
}
|
||||
});
|
||||
this.loadUserInfos(allList,uids);
|
||||
this.answerList.push(...res.result.list);
|
||||
this.loadLevel3Data(level3ParentIds);
|
||||
}
|
||||
}).catch(err => {
|
||||
uni.showToast({icon: 'none',title:"获取数据失败"})
|
||||
});
|
||||
},
|
||||
//加载第三级的数据
|
||||
loadLevel3Data(commentIdArray){
|
||||
let $this=this;
|
||||
if(commentIdArray && commentIdArray.length>0){
|
||||
apiQa.replayClevel3(commentIdArray).then(rs=>{
|
||||
if(rs.status==200){
|
||||
//先处理头像
|
||||
let aids=[];
|
||||
rs.result.forEach(item=>{
|
||||
item.avatar = "";
|
||||
item.sex=null;
|
||||
item.isAll=false;
|
||||
aids.push(item.sysCreateAid);
|
||||
});
|
||||
$this.loadUserInfos(rs.result,aids);
|
||||
$this.answerList.forEach(one1=>{
|
||||
if(one1.answers.length>0){
|
||||
one1.answers.forEach(one2=>{
|
||||
one2.answers=one2.answers? one2.answers:[];
|
||||
rs.result.forEach(rsRow=>{
|
||||
if(rsRow.commentId==one2.id){
|
||||
one2.answers.push(rsRow);
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
displayAll(item) {
|
||||
if(!item.isAll && item.content.length > this.minTextLen) {
|
||||
return item.content.slice(0, this.minTextLen) + "...";
|
||||
}
|
||||
return item.content;
|
||||
},
|
||||
changeIsAll(item) {
|
||||
//console.log(item,'isall');
|
||||
item.isAll=!item.isAll;
|
||||
},
|
||||
messageSave(refId,title,sendName,acceptName,acceptId,typeText){
|
||||
let content='评论';
|
||||
let conType;
|
||||
content=sendName+typeText+content+'-'+title
|
||||
let message={
|
||||
content,
|
||||
refId,
|
||||
refType:this.type,
|
||||
sendName,
|
||||
acceptName,
|
||||
acceptId,
|
||||
title:'系统消息',
|
||||
sendType:1,
|
||||
conType,
|
||||
content,
|
||||
}
|
||||
apiMessage.save(message).then(res=>{
|
||||
if(res.status==200){
|
||||
}
|
||||
})
|
||||
},
|
||||
//设置最佳答案接口
|
||||
setBest() {
|
||||
//userInfo.aid == an.sysCreateAid因为身份信息为空，所以为了接接口没有加这个判断，但是实际上要加的
|
||||
apiQa.isBest(this.curItem.id).then(res => {
|
||||
if (res.status == 200) {
|
||||
this.$set(this.detailData, 'isResolve', true);
|
||||
uni.showToast({title:"设置成功" ,duration: 2000})
|
||||
this.btnsShow=false
|
||||
this.answerList=[]
|
||||
//console.log("我经过这里面美哟")
|
||||
this.getAnswerList(this.questionId)
|
||||
}
|
||||
})
|
||||
.catch(err => {
|
||||
uni.showToast({icon: 'none',title:"设置失败"})
|
||||
});
|
||||
},
|
||||
|
||||
openAnswerInput(){
|
||||
this.answercontent='';
|
||||
this.replyShow = true;
|
||||
this.replyLevel='one';//就是回答
|
||||
this.curParent={};//没有上级数据
|
||||
this.curParentId='';
|
||||
this.curItem={};
|
||||
this.curItemIndex=-1;
|
||||
},
|
||||
//发布回答
|
||||
publishAnswer() {
|
||||
// if (this.answercontent.length < 5 || this.answercontent.length > 1000) {
|
||||
// return uni.showToast({
|
||||
// icon: 'none',
|
||||
// title:"请输入5-200个字"
|
||||
// })
|
||||
// }
|
||||
let answercontent=''
|
||||
if (this.answercontent.length < 1 ||this.answercontent.trim()=='@'+this.detailData.sysCreateBy) {
|
||||
return uni.showToast({icon: 'none',title:"请输入回答"});
|
||||
}
|
||||
// if(this.answercontent.indexOf('@'+this.detailData.sysCreateBy)!=-1){
|
||||
// answercontent=this.answercontent.slice(this.detailData.sysCreateBy.length+1)
|
||||
// }
|
||||
else{
|
||||
answercontent=this.answercontent
|
||||
}
|
||||
apiQa.saveAnswer({
|
||||
qid: this.questionId,
|
||||
content: answercontent
|
||||
}).then(res => {
|
||||
if (res.status == 200) {
|
||||
uni.showToast({
|
||||
title:"发布成功" ,
|
||||
duration: 2000
|
||||
})
|
||||
this.answerList=[]
|
||||
this.getAnswerList(this.questionId);
|
||||
this.answercontent = '';
|
||||
this.replyShow = false;
|
||||
} else {
|
||||
uni.showToast({icon: 'none',title:"发布失败"})
|
||||
}
|
||||
}).catch(err => {
|
||||
uni.showToast({icon: 'none',title:"发布失败"})
|
||||
});
|
||||
},
|
||||
loadUserInfos(list,userIds){
|
||||
let $this=this;
|
||||
const noReapetIds=[...new Set(userIds)]
|
||||
if(userIds.length>0){
|
||||
apiUser.getByIds(noReapetIds).then(res=>{
|
||||
if(res.status==200){
|
||||
list.forEach(item=>{
|
||||
res.result.some(author=>{
|
||||
if(author.aid==item.sysCreateAid){
|
||||
if(author.avatar!=''){
|
||||
item.avatar=$this.fileUrl+author.avatar;
|
||||
}
|
||||
item.sex=author.sex;
|
||||
item.ucode=author.code;
|
||||
item.orgInfo=author.orgInfo;
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
})
|
||||
})
|
||||
}
|
||||
this.loadStatus='more';
|
||||
})
|
||||
}
|
||||
|
||||
},
|
||||
openBtns(item,itemIdx) {
|
||||
this.btnsShow = true;
|
||||
this.curItem = item;
|
||||
this.curItemIndex=itemIdx;
|
||||
},
|
||||
closeBtns() {
|
||||
this.btnsShow = false;
|
||||
this.curItem = {};
|
||||
},
|
||||
delAnswer() {
|
||||
this.btnsShow=false;
|
||||
//不能删除最佳答案
|
||||
if(this.curItem.isBest){
|
||||
this.$refs.messager.show({message:'最佳答案不能删除',type:'error'});
|
||||
return;
|
||||
}
|
||||
let $this=this;
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '您确定要删除所选内容吗？',
|
||||
success: function (res) {
|
||||
if (res.confirm) {
|
||||
apiQa.delAnswer($this.curItem.id).then(rs=>{
|
||||
if(rs.status==200){
|
||||
this.answerList=[]
|
||||
$this.$refs.messager.show({message:'删除成功',type:'success'});
|
||||
$this.getAnswerList($this.questionId);//questionId要移出去
|
||||
}else{
|
||||
$this.$refs.messager.show({message:'删除失败:'+rs.message,type:'error'});
|
||||
}
|
||||
})
|
||||
} else if (res.cancel) {
|
||||
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
editAnswer() {
|
||||
this.btnsShow=false;
|
||||
this.answerEdit.show=true;
|
||||
},
|
||||
editSubmitAnswer(){
|
||||
// 修改后提交
|
||||
if (this.curItem.content.length < 5 || this.curItem.content.length > 200) {
|
||||
return uni.showToast({
|
||||
icon: 'none',
|
||||
title:"请输入5-200个字"
|
||||
})
|
||||
}
|
||||
let d={
|
||||
id:this.curItem.id,
|
||||
sysCreateAid:this.curItem.sysCreateAid,
|
||||
content:this.curItem.content
|
||||
}
|
||||
apiQa.updateAnswer(d).then(rs=>{
|
||||
if(rs.status==200){
|
||||
this.answerEdit.show=false;
|
||||
this.$refs.messager.show({message:'提交成功',type:'success'});
|
||||
}else{
|
||||
this.$refs.messager.show({message:rs.message,type:'error'});
|
||||
}
|
||||
})
|
||||
},
|
||||
openReply(item,parent) {
|
||||
this.answercontent='';
|
||||
this.replyShow = true;
|
||||
this.replyLevel=''
|
||||
this.curParentId=item.id;//回复的parentId
|
||||
this.curParent=parent;//回复的上级数据，用于追加answers
|
||||
this.curItem=item;
|
||||
},
|
||||
closeReply() {
|
||||
this.answercontent='';
|
||||
this.curParentId='';
|
||||
this.curParent={};
|
||||
this.curItem={};
|
||||
this.replyShow = false;
|
||||
},
|
||||
openShare() {
|
||||
this.$refs.fiexdbar.addShare();
|
||||
},
|
||||
submitReply() {
|
||||
if(this.replyLevel=='one'){
|
||||
this.publishAnswer();
|
||||
return;
|
||||
}
|
||||
let answercontent=''
|
||||
if (this.answercontent.length < 1 ||this.answercontent.trim()=='@'+this.curItem.sysCreateBy) {
|
||||
return uni.showToast({icon: 'none',title:"请输入回答"});
|
||||
}
|
||||
let postData={
|
||||
replayAid: this.curItem.sysCreateAid,
|
||||
replayName: this.curItem.sysCreateBy,
|
||||
content: this.answercontent,
|
||||
parentId: this.curItem.id,
|
||||
commentId: "",
|
||||
clevel: 2
|
||||
}
|
||||
if(this.curItem.clevel==2){ //当前是一级评论
|
||||
postData.commentId=this.curItem.id;
|
||||
postData.clevel=3;
|
||||
}else if(this.curItem.clevel>2){
|
||||
postData.commentId=this.curItem.commentId;
|
||||
postData.clevel=3;
|
||||
}
|
||||
|
||||
apiQa.saveComment(postData).then(res=>{
|
||||
if(res.status==200){
|
||||
res.result.avatar = "";
|
||||
res.result.sex = null;
|
||||
res.result.isAll = false;
|
||||
this.curParentId='';
|
||||
this.curParent={};
|
||||
this.answercontent='';
|
||||
this.loadUserInfos([res.result],[res.result.sysCreateAid]);
|
||||
if(this.curItem.clevel<3){
|
||||
if(!this.curItem.answers){
|
||||
this.curItem.answers=[];
|
||||
}
|
||||
this.curItem.answers.push(res.result);
|
||||
}else{
|
||||
this.curParent.answers.push(res.result);
|
||||
}
|
||||
uni.showToast({icon: 'none',title:"回复成功"});
|
||||
this.replyShow = false;
|
||||
}
|
||||
})
|
||||
|
||||
},
|
||||
askQuestioner(){
|
||||
if(this.replyLevel=='one'){
|
||||
this.answercontent='@'+this.detailData.sysCreateBy
|
||||
}else{
|
||||
if(this.curItem.sysCreateBy){
|
||||
this.answercontent='@'+this.curItem.sysCreateBy
|
||||
}
|
||||
}
|
||||
},
|
||||
addPraise(index){
|
||||
if(this.loading){
|
||||
return
|
||||
}
|
||||
this.loading=true;
|
||||
let postData={
|
||||
objType:5,
|
||||
objId:this.answerList[index].id,
|
||||
title:'',
|
||||
}
|
||||
apiPraises.save(postData).then(res=>{
|
||||
this.loading=false;
|
||||
if(res.status==200){
|
||||
|
||||
// if(res.result){
|
||||
this.answerList[index].praises++;
|
||||
this.answerList[index].isPraise=true;
|
||||
this.$refs.interactToast.show({message:'点赞成功',type:'success'});
|
||||
console.log(this.answerList[index],'content)')
|
||||
this.messageSave(this.answerList[index].id,this.answerList[index].content,this.userInfo.name,this.answerList[index].sysCreateBy,this.answerList[index].sysCreateAid,'点赞了我的');
|
||||
// }
|
||||
}else{
|
||||
this.$refs.interactToast.show({message:'点赞失败',type:'error'});
|
||||
}
|
||||
})
|
||||
},
|
||||
removePraise(index){
|
||||
if(this.loading){
|
||||
return
|
||||
}
|
||||
this.loading=true;
|
||||
apiPraises.remove(5,this.answerList[index].id).then(res=>{
|
||||
this.loading=false;
|
||||
if(res.status==200){
|
||||
// if(res.result){
|
||||
this.answerList[index].praises--;
|
||||
this.answerList[index].isPraise=false
|
||||
this.$refs.interactToast.show({message:'取消点赞成功',type:'success'});
|
||||
// }
|
||||
// this.messageSave(this.answerList[index].id,this.answerList[index].title,this.userInfo.name,this.answerList[index].sysCreateBy,this.answerList[index].sysCreateAid,'点赞了我的');
|
||||
}else{
|
||||
this.$refs.interactToast.show({message:'取消点赞失败',type:'error'});
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.one-wrap {
|
||||
// width: 80%;
|
||||
flex:1;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
span{
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
line-height: 32px;
|
||||
}
|
||||
// display: flex;
|
||||
// justify-content: flex-start;
|
||||
// align-items: center;
|
||||
}
|
||||
.adetail {
|
||||
padding: 15upx 30upx;
|
||||
.adetail-title {
|
||||
// font-weight: 700;
|
||||
font-weight: bold;
|
||||
//font-weight: 610;
|
||||
font-size: 32rpx;
|
||||
letter-spacing: 0.5px;
|
||||
|
||||
.qa-basic{
|
||||
font-size: 32rpx;
|
||||
|
||||
}
|
||||
}
|
||||
.adetail-info {
|
||||
display: flex;
|
||||
padding-top: 20upx;
|
||||
line-height: 55upx;
|
||||
color: #7e7e7e;
|
||||
}
|
||||
.adetail-body {
|
||||
//padding-top: 15px;
|
||||
line-height: 55upx;
|
||||
white-space: normal;
|
||||
word-break: break-all;
|
||||
background-color: #ffffff;
|
||||
> div {
|
||||
text-indent: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.field {
|
||||
width: 200px;
|
||||
height: 40px;
|
||||
line-height: 30px;
|
||||
background: rgb(247,247,249);
|
||||
border-radius: 10upx;
|
||||
display: flex;
|
||||
.field-icon{
|
||||
margin-top: 2px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
.wenz{
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
margin-left: 2px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.comments {
|
||||
margin-top: 10px;
|
||||
background-color: #ffffff;
|
||||
padding: 15upx 30upx;
|
||||
.comments-top {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding-bottom: 30upx;
|
||||
border-bottom: 1px solid #f4f4f4;
|
||||
font-weight: 500;
|
||||
font-size: 30upx;
|
||||
}
|
||||
.comments-items {
|
||||
padding-top: 20upx;
|
||||
.comments-item {
|
||||
padding-bottom: 5px;
|
||||
padding-top: 15upx;
|
||||
}
|
||||
.comments-avatar {
|
||||
height: 60upx;
|
||||
width: 60upx;
|
||||
border-radius: 10%;
|
||||
border: 1px solid #f3f3f3;
|
||||
}
|
||||
.twoLevelReply{
|
||||
padding-left: 40upx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.big-button {
|
||||
text-align: center;
|
||||
line-height: 80upx;
|
||||
border-top: 1px solid #ebebeb;
|
||||
}
|
||||
</style>
|
||||
1243
pages/resource/search.vue
Normal file
1243
pages/resource/search.vue
Normal file
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user