📖 File Reader
<?php /*a:2:{s:75:"/www/wwwroot/haote.jiboshimr.cn/app/admin/view/article/article_preview.html";i:1714374004;s:62:"/www/wwwroot/haote.jiboshimr.cn/app/admin/view/public/vue.html";i:1677287074;}*/ ?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<script src="/public/admin/js/jquery-2.2.0.min.js"></script>
<script src="/public/vue/vue.js"></script>
<script src="/public/vue/axios.min.js"></script>
<script src="/public/vue/vue-resource.min.js"></script>
<script src="/public/vue/request_admin.js"></script>
<style>
.art_box1{width: 96%;margin: 10px auto;}
.art_box1_title{font-size: 16px;}
.art_box1_1{display: flex;align-items: center;justify-content: space-between;margin-top: 5px;}
.art_box1_1_1{font-size: 14px;color: #999999;}
.art_box1_1_2{font-size: 14px;color: #999999;}
.xiang_nei{margin-top: 6px;}
.xiang_nei img{width:100% !important;}
.xiang_nei video{width:100% !important;height: auto!important;}
/*附件下载*/
.fujian{ display: flex; width: 100%; padding-top: 20px; border-top: 1px solid #eee; margin-top: 20px}
.fujian h1{ font-size: 14px; }
.fujian>div{width: calc( 100% - 3em);font-size: 14px; display: flex; flex-wrap: wrap;}
.fujian>div span{ display: block; box-sizing: border-box; padding: 10px; text-align: center;}
.fujian>div span img{ display: block; width: 40px;margin: 0 auto; margin-bottom: 10px;}
</style>
<body>
<div class="art_box1" id="vue">
<div class="art_box1_title">{{article_info.title}}</div>
<div class="art_box1_1">
<div class="art_box1_1_1">{{article_info.add_time}}</div>
<div class="art_box1_1_2">阅读：{{article_info.browse_sum}}</div>
</div>
<!--内容-->
<div class="xiang_nei" v-html="article_info.content"></div>
<!--附件下载-->
<!-- <div class="fujian">-->
<!-- <h1>附件：</h1>-->
<!-- <div>-->
<!-- <span v-for="item in file_data_regroup">-->
<!-- <img v-if="item.type == 'zip' || item.type == 'rar' || item.type == 'gz'" src="/extend/adminCreate/form/static/img/zip.png">-->
<!-- <img v-if="item.type == 'docx' || item.type == 'doc'" src="/extend/adminCreate/form/static/img/wps.png">-->
<!-- <img v-if="item.type == 'xlsx' || item.type == 'xls'" src="/extend/adminCreate/form/static/img/xlsx.png">-->
<!-- <img v-if="item.type == 'pdf'" src="/extend/adminCreate/form/static/img/pdf.png">-->
<!-- <a href="javascript:void(0)" @click="Download(item.url)">下载</a>-->
<!-- </span>-->
<!-- </div>-->
<!-- </div>-->
</div>
</body>
<script>
var vm = new Vue({
el: '#vue',
data: {
article_id:0,//文章id
article_info:{},//文章详情
file_data_regroup:[],//下载附件
},
methods: {
/*文章详情*/
ArticleInfo(){
var that = this;
req_post('/admin/Article/article_info',{'id':that.article_id}).then(res=>{
if (res.code == 200){
that.article_info = res.data.article_info;
}
});
},
/*下载处理*/
Download(downUrl){
const now = new Date();
const year = now.getFullYear();
const month = ('0' + (now.getMonth() + 1)).slice(-2);
const day = ('0' + now.getDate()).slice(-2);
const hours = ('0' + now.getHours()).slice(-2);
const minutes = ('0' + now.getMinutes()).slice(-2);
const seconds = ('0' + now.getSeconds()).slice(-2);
const formattedTime = year + month + day + hours + minutes + seconds;
var arr = downUrl.split('.');
var leixing = arr[arr.length - 1];
var fileName = formattedTime+'.'+ leixing;
let a = document.createElement("a");// 创建a标签
if ('download' in a) {
a.download = fileName;// 设置下载文件的文件名
}
(document.body || document.documentElement).appendChild(a);
a.href = downUrl;// downUrl为后台返回的下载地址
a.target = '_parent';
a.click();// 设置点击事件
a.remove(); // 移除a标签
},
},
created() {
var that = this;
that.article_id = "<?php echo htmlentities($id); ?>";
that.ArticleInfo();
}
})
</script>