|
@@ -0,0 +1,289 @@
|
|
|
+<template>
|
|
|
+ <view class="content2">
|
|
|
+ <view style="height: 72px;"></view>
|
|
|
+ <view class="top">
|
|
|
+ <view class="topline" @click="goIndex">首页</view>
|
|
|
+ <view class="topjt">></view>
|
|
|
+ <view class="topline" :class="{'c999':!twoName}" @click="goList()">{{topName}}</view>
|
|
|
+ <view class="topjt" v-if="twoName">></view>
|
|
|
+ <view class="topline" :class="{'c999':twoName}">{{twoName}}</view>
|
|
|
+ </view>
|
|
|
+ <view class="htmlBox">
|
|
|
+ <view class="htmlTitle">{{detailData.name}}</view>
|
|
|
+ <view class="time">{{detailData.publishTime}}</view>
|
|
|
+ <view class="html" v-html="detailData.contents"></view>
|
|
|
+ </view>
|
|
|
+ <view class="itemArr" v-if="itemArr.length>0">
|
|
|
+ <view class="itemArrLine" :class="{'itemArrLineBottom':itemArr.length!=(index+1)}" v-for="(item,index) in itemArr">
|
|
|
+ <view class="itemArrLeft" >
|
|
|
+ <image src="../../static/pcimg/icon_fujian@2x.png" mode="" class="fileIcon"></image>
|
|
|
+ <view class="fileName" @click="gofile(item.fileUrl)">{{item.fileName}}</view>
|
|
|
+ </view>
|
|
|
+ <!-- <view class="dload">
|
|
|
+ <a class="dloadbtn" :href="item.fileUrl" target='_blank' >下载</a>
|
|
|
+ </view> -->
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="lbel" v-if="topName">
|
|
|
+ <view class="topName" @click="goList">{{topName}}</view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+
|
|
|
+ export default {
|
|
|
+ props: ['newid','data'],
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ id: '',
|
|
|
+ detailData: {},
|
|
|
+ couContent: '',
|
|
|
+ itemArr: [],
|
|
|
+ topName:'',
|
|
|
+ twoName:'',
|
|
|
+ comment:'',
|
|
|
+ parentCode:'',
|
|
|
+ }
|
|
|
+ },
|
|
|
+ watch:{
|
|
|
+ newid(newValue, oldValue){
|
|
|
+ console.log(newValue);
|
|
|
+ console.log(this.data)
|
|
|
+ this.id = newValue
|
|
|
+ this.topName=this.data.categoryName;
|
|
|
+ this.twoName=this.data.twoName;
|
|
|
+ this.comment=this.data.comment;
|
|
|
+ this.parentCode=this.data.code
|
|
|
+ this.getDetailData()
|
|
|
+ // uni.setNavigationBarTitle({
|
|
|
+ // title: this.topName
|
|
|
+ // })
|
|
|
+ uni.pageScrollTo({
|
|
|
+ scrollTop: 0, duration: 100
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onLoad(opt) {
|
|
|
+ console.log('opt', opt);
|
|
|
+ /* this.id = opt.id
|
|
|
+ this.topName=opt.topName;
|
|
|
+ this.twoName=opt.twoName;
|
|
|
+ this.comment=opt.comment;
|
|
|
+ this.parentCode=opt.parentCode
|
|
|
+ this.getDetailData() */
|
|
|
+ // uni.setNavigationBarTitle({
|
|
|
+ // title: this.topName
|
|
|
+ // })
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.newidfn()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ newidfn(){
|
|
|
+ this.id = this.data.id
|
|
|
+ this.topName=this.data.categoryName;
|
|
|
+ this.twoName=this.data.twoName;
|
|
|
+ this.comment=this.data.comment;
|
|
|
+ this.parentCode=this.data.code
|
|
|
+ this.getDetailData()
|
|
|
+ uni.pageScrollTo({
|
|
|
+ scrollTop: 0, duration: 100
|
|
|
+ });
|
|
|
+ },
|
|
|
+ test(){
|
|
|
+ console.log(55)
|
|
|
+ },
|
|
|
+ gofile(url){
|
|
|
+ window.location.href=url
|
|
|
+ },
|
|
|
+ goList(){
|
|
|
+ /* var code=this.parentCode.substring(0,3)
|
|
|
+ uni.navigateTo({
|
|
|
+ url:'list?code='+code+'&topName='+this.topName+'&comment='+this.comment
|
|
|
+ }) */
|
|
|
+ console.log(this.parentCode)
|
|
|
+ var code=this.parentCode.substring(0,3)
|
|
|
+ var data={
|
|
|
+ code:code,
|
|
|
+ name:this.topName,
|
|
|
+ comment:this.comment
|
|
|
+ }
|
|
|
+ this.$emit("getChildList",data)
|
|
|
+ },
|
|
|
+ goIndex(){
|
|
|
+ this.$emit("getIndexList")
|
|
|
+ },
|
|
|
+ getDetailData() {
|
|
|
+ uni.showLoading({
|
|
|
+ title: '加载中'
|
|
|
+ })
|
|
|
+ let url = '/trainingOpenApiV3/articleDetail',
|
|
|
+ params = {
|
|
|
+ id: this.id,
|
|
|
+ }
|
|
|
+ this.$http(url, params, 'GET').then(res => {
|
|
|
+ uni.hideLoading();
|
|
|
+ var data = res.data
|
|
|
+ // 处理 undefined和null转为空白字符串
|
|
|
+ for (const key in data) {
|
|
|
+ data[key] = this.$praseStrEmpty(data[key])
|
|
|
+ }
|
|
|
+
|
|
|
+ this.detailData = data;
|
|
|
+ uni.setNavigationBarTitle({
|
|
|
+ title: this.detailData.title
|
|
|
+ });
|
|
|
+ console.log()
|
|
|
+ if (this.detailData.contents) {
|
|
|
+ var replaceStr = "application/x-shockwave-flash"
|
|
|
+ this.detailData.contents=this.detailData.contents.replace(new RegExp(replaceStr,'gm'),'video/webm')//(/''/g,"video/webm")
|
|
|
+ this.detailData.contents=this.detailData.contents.replace(/<embed([\s\w"-=\/\.:;]+)/ig, '<embed style="width: 100%;height:500px;" $1');
|
|
|
+ }
|
|
|
+
|
|
|
+ if (this.detailData.contents) {
|
|
|
+ this.detailData.contents = this.detailData.contents.replace(
|
|
|
+ /<p([\s\w"=\/\.:;]+)((?:(style="[^"]+")))/ig, '<p')
|
|
|
+ .replace(/<p>/ig, '<p style="font-size: 15px; line-height: 25px;">')
|
|
|
+ .replace(/<img([\s\w"-=\/\.:;]+)((?:(height="[^"]+")))/ig, '<img$1')
|
|
|
+ .replace(/<img([\s\w"-=\/\.:;]+)((?:(width="[^"]+")))/ig, '<img$1')
|
|
|
+ .replace(/<img([\s\w"-=\/\.:;]+)((?:(style="[^"]+")))/ig, '<img$1')
|
|
|
+ .replace(/<img([\s\w"-=\/\.:;]+)((?:(alt="[^"]+")))/ig, '<img$1')
|
|
|
+ .replace(/<img([\s\w"-=\/\.:;]+)/ig, '<img style="width: 100%;" $1');
|
|
|
+
|
|
|
+ this.detailData.contents = this.detailData.contents.replace(
|
|
|
+ /<p([\s\w"=\/\.:;]+)((?:(style="[^"]+")))/ig, '<p')
|
|
|
+ .replace(/<p>/ig, '<p style="font-size: 15px; line-height: 25px;">')
|
|
|
+ .replace(/<iframe([\s\w"-=\/\.:;]+)((?:(width="[^"]+")))/ig, '<iframe$1')
|
|
|
+ .replace(/<iframe([\s\w"-=\/\.:;]+)((?:(style="[^"]+")))/ig, '<iframe$1')
|
|
|
+ .replace(/<iframe([\s\w"-=\/\.:;]+)((?:(alt="[^"]+")))/ig, '<iframe$1')
|
|
|
+ .replace(/<iframe([\s\w"-=\/\.:;]+)/ig, '<iframe style="width: 100%;height:500px;" $1');
|
|
|
+ }
|
|
|
+
|
|
|
+ this.itemArr = this.detailData.fileList
|
|
|
+ console.log(this.itemArr)
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ // }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+ .top{
|
|
|
+ width: 1200px;
|
|
|
+ margin: 0 auto;
|
|
|
+ display: flex;
|
|
|
+ padding: 30px 0;
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+ .content2{
|
|
|
+ font-family: PingFangSC-Regular, PingFang SC;background: #FFFFFF;
|
|
|
+ min-height: 100vh;
|
|
|
+ }
|
|
|
+ .htmlBox{
|
|
|
+ width: 720px;
|
|
|
+ margin: 0 auto;
|
|
|
+ }
|
|
|
+ .topline{
|
|
|
+ padding-right: 10px;
|
|
|
+ cursor: pointer;
|
|
|
+ color: #3C3C3C;
|
|
|
+ }
|
|
|
+ .topjt{
|
|
|
+ color: #AAAAAA;
|
|
|
+ padding-right: 10px;
|
|
|
+ }
|
|
|
+ .htmlTitle{
|
|
|
+ font-size: 24px;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #3C3C3C;
|
|
|
+ line-height: 33px;
|
|
|
+ font-family: PingFangSC-Medium, PingFang SC;
|
|
|
+ }
|
|
|
+ .time{
|
|
|
+ font-size: 14px;
|
|
|
+ padding-top: 16px;
|
|
|
+ color: #999999;
|
|
|
+ line-height: 20px;
|
|
|
+ border-bottom: 1px solid #EEEEEE;
|
|
|
+ padding-bottom: 19px;
|
|
|
+ }
|
|
|
+ .html{
|
|
|
+ padding-top: 18px;
|
|
|
+ }
|
|
|
+ .fileIcon{
|
|
|
+ width: 14px;
|
|
|
+ height: 14px;
|
|
|
+ margin-top: 4px;
|
|
|
+ margin-right: 4px;
|
|
|
+ }
|
|
|
+ .itemArrLeft{
|
|
|
+ display: flex;
|
|
|
+ }
|
|
|
+ .itemArrLine{
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 16px 0;
|
|
|
+
|
|
|
+ color: #333333;
|
|
|
+ line-height: 22px;
|
|
|
+ font-size: 16px;
|
|
|
+ width: 720px;
|
|
|
+ }
|
|
|
+ .itemArrLineBottom{
|
|
|
+ border-bottom: 1px solid #EEEEEE;
|
|
|
+ }
|
|
|
+ .itemArr{
|
|
|
+ width: 686px;
|
|
|
+ margin: 0 auto;
|
|
|
+ margin-top: 30px;
|
|
|
+ border-radius: 6px;
|
|
|
+ border: 1px solid #EEEEEE;
|
|
|
+ padding: 0 16px;
|
|
|
+
|
|
|
+ }
|
|
|
+ .dloadbtn{
|
|
|
+ display: block;
|
|
|
+ width: 68px;
|
|
|
+ height: 28px;
|
|
|
+ background: #3F90F7;
|
|
|
+ border-radius: 6px;
|
|
|
+ color: #FFFFFF;
|
|
|
+ text-align: center;
|
|
|
+ line-height:28px ;
|
|
|
+ font-size: 14px;
|
|
|
+ text-decoration:none;
|
|
|
+ }
|
|
|
+ .lbel{
|
|
|
+ width: 720px;
|
|
|
+ margin: 0 auto;
|
|
|
+ margin-top: 30px;
|
|
|
+ padding-bottom: 30px;
|
|
|
+ display: flex;
|
|
|
+ }
|
|
|
+ .topName{
|
|
|
+ /* width: 84px; */
|
|
|
+ height: 24px;
|
|
|
+ background: rgba(63, 144, 247, 0.1);
|
|
|
+ border-radius: 14px;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #3F90F7;
|
|
|
+ line-height: 24px;
|
|
|
+ text-align: center;
|
|
|
+ cursor: pointer;
|
|
|
+ padding: 0 20rpx;
|
|
|
+ }
|
|
|
+ .fileName{
|
|
|
+ text-decoration:underline;
|
|
|
+ color: #3F90F7;
|
|
|
+ }
|
|
|
+ .c999{
|
|
|
+ color: #999999;
|
|
|
+ }
|
|
|
+</style>
|