Files
learning-system-mobile/pages/resource/articeDetail.vue
2023-11-20 17:12:50 +08:00

715 lines
19 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<template>
<!--文章详细页面-->
<view><watermark></watermark><u-toast ref="articleToast"></u-toast>
<page-title :showBack="true">文章详情</page-title>
<view class="adetail content" style="border-radius: 0;">
<!--文章内容-->
<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: 24upx;"> {{ 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="articleMore && detail.content.length>200" @click="showMore" style="text-align: center;color: #387DF7;"><text>查看更多</text> </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 apiStat from '@/api/phase2/stat.js'
import { mapGetters } from 'vuex';
export default {
data() {
return {
id:'',
detail:{avatar:'',sex:null,},
loadStatus:'more',
page:1,//当前页数
pagesize:10, //总页数
fileUrl:this.$config.fileUrl,
articleMore:true,
style: {
// 字符串的形式
p: 'word-break:break-all;font-size: 28upx;letter-spacing:1rpx; line-height: 1.6;margin-bottom:25px',
span: 'word-break:break-all;font-size: 28upx;letter-spacing:1rpx; line-height: 1.6'
},
secondTime: 15,//默认时长
cumulativeDuration: 0,
setTime: null,
defaultMaxTime: 1800,//最大时长
}
},
onLoad (options) {
//console.log(options.id);
this.id = options.id;
this.getDetail();
},
mounted() {
let event = {
key: "ViewArticle",//后台的事件key 发布文章且审核通过
title: "查看文章",//事件的标题
parameters:"",//用户自定义参数 name:value,name:value
content: "查看了文章",//事件的内容
source:'page',
objId: this.id,//关联的id
objType: "2",//关联的类型
objInfo: this.detail.title,
aid: this.userInfo.aid, //当前登录人的id
aname: this.userInfo.name,//当前人的姓名
status: 1 ,//状态直接写1
source:"h5",
}
apiStat.sendEvent(event);
this.sendEventData()
// this.$store.dispatch("userTrigger", event);
// this.setTime = setTimeout(()=>{
// event.key = 'ReadArticle';
// event.title = "阅读文章";
// event.parameters='second:60';//增加60秒的学习时长
// event.content = "阅读了文章"
// apiStat.sendEvent(event);
// // $this.$store.dispatch("userTrigger", event);
// },61000);//1分钟后记录
},
destroyed() {
this.setTime && clearTimeout(this.setTime);
},
onReachBottom(){
this.getDetail()
},
computed: {
...mapGetters(['userInfo'])
},
methods: {
// 发送计时
sendEventData(){
this.setTime && clearTimeout(this.setTime);
let startTime = new Date().getTime();
this.setTime = setTimeout(()=>{
let endTime = new Date().getTime();
let totalTime = Math.round((endTime - startTime) / 1000);
this.cumulativeDuration += totalTime;
console.log(this.cumulativeDuration,'时间');
if(this.cumulativeDuration <= this.defaultMaxTime){
this.sendStudyTime(totalTime)
this.secondTime = 60
this.sendEventData()
}else{
this.cumulativeDuration = 0
clearTimeout(this.setTime);
this.setTime = null
}
},this.secondTime * 1000);//15秒记录一次之后1分钟后记录
},
//发送学习时间
sendStudyTime(totalTime){
apiStat.sendEvent({
key: "ReadArticle",//后台的事件key 发布文章且审核通过
title: "阅读文章",//事件的标题
parameters:"second:" + totalTime,//用户自定义参数 name:value,name:value
content: "阅读了文章",//事件的内容
source:'page',
objId: this.id,//关联的id
objType: "2",//关联的类型
objInfo: this.detail.title,
aid: this.userInfo.aid, //当前登录人的id
aname: this.userInfo.name,//当前人的姓名
status: 1 ,//状态直接写1
source:"h5",
});
},
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);
})
},
showMore(){
this.articleMore=false;
},
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>
/deep/ .comments{
margin-top: 0;
.comments-top{
border-bottom: none;
}
}
::v-deep .uavatar{
width: 72upx !important;
height: 72upx !important;
}
.adetail{
padding: 15upx 30upx;
.adetail-title{
font-weight: 610;
font-weight: 500;
font-size: 36upx;
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;
}
}
}
.more-info{overflow: hidden; position: relative;}
.more-info::after{
content: '';
position: absolute;
width: 100%;
height: 30px;
background: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(255, 255, 255, 0)), to(rgba(255, 255, 255, 1)));
background: -moz-linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
background: -o-linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
background: linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#0ff, endColorstr=#fff, GradientType=0);
bottom: 0;
left: 0;
}
.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;
}
::v-deep .ql-container .ql-editor {
position: relative;
font-size: 28upx !important;
color: #666666;
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: 28upx;
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>