资料库

src/main/java/com/caimei/www/controller/authorized/document/DocumentController.java

@@ -12,6 +12,8 @@ public class DocumentController extends BaseController {
     private static final String DOCUMENT_LIST = "document/list";
     /** 资料详情 */
     private static final String DOCUMENT_DETAILS = "document/details";
+    /** PDF资料详情 */
+    private static final String DOCUMENT_PDFDETAILS = "document/pdfdetails";
     /** 更多资料 */
     private static final String DOCUMENT_MORECONTENT= "document/more-content";
 
@@ -24,16 +26,22 @@ public class DocumentController extends BaseController {
 
     /** 资料列表 */
     @GetMapping("/document/list.html")
-    public String orderList() {
+    public String documentList() {
         return DOCUMENT_LIST;
     }
 
     /** 资料详情 */
     @GetMapping("/document/details.html")
-    public String orderDetail() {
+    public String documentDetails() {
         return DOCUMENT_DETAILS;
     }
 
+    /** pdf资料详情 */
+    @GetMapping("/document/pdfdetails.html")
+    public String documentPdfDetail() {
+        return DOCUMENT_PDFDETAILS;
+    }
+
     /** 更多资料 */
     @GetMapping("/document/more-content.html")
     public String orderSettlement() {

src/main/resources/static/css/document/details.css

@@ -44,6 +44,12 @@ li{list-style:none}
     .document-list .list-item .list-item-top .main .p .name{ float: left;margin-right:10px;font-weight: normal;text-align: left;white-space: normal;word-break: break-all;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;}
     .document-list .list-item .list-item-top .main .p .more{color: #E15616;cursor: pointer;}
     .document-list .list-item .list-item-bot{width: 100%;min-height: 1185px;padding: 20px 0;border-top: 1px solid #CFDBE2;float: left;margin-bottom: 120px;}
+    .document-list .list-item .list-item-bot .pdf-li{width: 100%;height: 30px;line-height: 30px;font-size: 14px;color: #999999;float: left;margin: 5px 0;}
+    .document-list .list-item .list-item-bot .pdf-li .img{width: 18px;height: 20px;display: block;float: left;margin-top: 5px;}
+    .document-list .list-item .list-item-bot .pdf-li .name{float: left;margin-left: 10px;cursor: pointer;}
+    .document-list .list-item .list-item-bot .pdf-li .name:hover{color: #E15616;}
+    .document-list .list-item .list-item-bot .pdf-li .time{float: right;}
+
     iframe{width: 1160px !important;height: 1185px !important;}
     .document-footer{width: 100%;height: 120px;background-color: #F0F0F0;box-sizing: border-box;padding: 30px 0;float: left;}
     .wrap{color: #999999;font-size: 14px;line-height: 30px;}
@@ -90,11 +96,17 @@ li{list-style:none}
     .document-list .list-item .list-item-top .main .p .name{ float: left; width: 45%;font-weight: normal;font-size: 3vw;line-height: 6.5vw;color: #666666;text-align: left;	white-space: normal;word-break: break-all;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;}
     .document-list .list-item .list-item-top .main span{margin-right: 1vw;}
     .document-list .list-item .list-item-top .main .p .more{display: inline-block;float: right;margin-right: 0;color: #E15616;cursor: pointer;width: 15vw;height: 6.5vw;background-color: #FFF5F1;border-radius: 0.5vw;text-align: center;}
-    .document-list .list-item .list-item-bot{width: 100%;min-height: 80vw;padding: 2vw 0;border-top: 1px solid #CFDBE2;float: left;}
+    .document-list .list-item .list-item-bot{width: 100%;min-height: 80vw;padding: 2vw 3vw;border-top: 1px solid #CFDBE2;float: left;box-sizing: border-box;}
+    .document-list .list-item .list-item-bot .pdf-li{width: 100%;height: 10vw;font-size: 3vw;color: #999999;float: left;margin:1vw 0;}
+    .document-list .list-item .list-item-bot .pdf-li .img{width: 7vw;height:8vw;display: block;float: left;margin-top: 0;}
+    .document-list .list-item .list-item-bot .pdf-li .name{float: left;margin-left: 3vw;cursor: pointer;width: 65vw;line-height: 5vw;}
+    .document-list .list-item .list-item-bot .pdf-li .name:hover{color: #E15616;}
+    .document-list .list-item .list-item-bot .pdf-li .time{float: left;margin-left: 3vw;width: 56vw;line-height: 5vw;}
     .document-footer{width: 100%;height: auto;background-color: #F0F0F0;box-sizing: border-box;padding: 30px 0;float: left;}
     .wrap{color: #999999;font-size: 14px;line-height: 30px;}
     .media{width: 100% !important;height: 1000vw !important;}
     iframe{width: 100% !important;height: 100% !important;}
+    .pdfjs .pdfViewer{padding: 0;}
 
 
 }

src/main/resources/static/js/document/details.js

@@ -20,17 +20,6 @@ var documentList = new Vue({
                     var pdfh5 = new Pdfh5('#pdfMedia', {
                             pdfurl:  _self.ossArchivePdf.url
                     });
-                    // if(isPC){
-                    //     setTimeout(function () {
-                    //         $('a.media').media({width:1160, height:1158});
-                    //         $('a.mediase').media({width:1160, height:1158});
-                    //     },0);
-                    // }else{
-                    //     setTimeout(function () {
-                    //         $('a.media').media({width:750, height:900});
-                    //         $('a.mediase').media({width:750, height:900});
-                    //     },0);
-                    // }
                 }else{
                     CAIMEI.Alert(response.msg, '确定', false);
                 }
@@ -48,6 +37,10 @@ var documentList = new Vue({
             var _self = this;
             location.href = '/document/more-content.html?id='+_self.ossArchive.id;
         },
+        // PdfDetails:function(){//跳转
+        //     var _self = this;
+        //     location.href = '/document/pdfdetails.html?id='+_self.ossArchivePdf.id
+        // },
         goPathList:function(){
             location.href = '/document/list.html';
         }

src/main/resources/static/js/document/pdfdetails.js

@@ -0,0 +1,39 @@
+var documentList = new Vue({
+    el: "#documentList",
+    data: {
+        pdfId:0,
+        ossArchive:{},
+        ossArchivePdf: {},
+    },
+    computed: {
+
+    },
+    methods: {
+        GetDocumentDataDetailsInfo:function(){//查询资料详情
+            var _self = this;
+            DocumentApi.GetDocumentDataDetails({pdfId:_self.pdfId},function(response){
+                if(response.code == 0){
+                    var data = response.data;
+                    _self.ossArchive = data.ossArchive;
+                    _self.ossArchivePdf = data.ossArchivePdf;
+                    var pdfh5 = new Pdfh5('#pdfMedia', {
+                        pdfurl:  _self.ossArchivePdf.url
+                    });
+                }else{
+                    CAIMEI.Alert(response.msg, '确定', false);
+                }
+            })
+        },
+        PdfDetails:function(){//跳转
+            var _self = this;
+            location.href = '/document/pdfdetails.html?id='+_self.ossArchivePdf.id
+        }
+    },
+    created: function () {
+
+    },
+    mounted: function () {
+        this.pdfId = CAIMEI.getUrlParam('id');
+        this.GetDocumentDataDetailsInfo();
+    }
+});

src/main/resources/templates/document/details.html

@@ -10,51 +10,50 @@
 <body>
 <!-- 二级页面 -->
 <div id="documentList" v-cloak>
-    <div class="media" id="pdfMedia"></div>
     <!-- 引用头部 -->
-<!--    <div style="display: none;">-->
-<!--        <div class="header document">-->
-<!--            <div class="wrap-header clear">-->
-<!--                <img class="logo" src="/img/document/document_logo.png" alt="采美 生美/医美采购服务平台" @click="goPathList"/>-->
-<!--                <span @click="goPathList">采美资料库</span>-->
-<!--                <div class="search">-->
-<!--                    <input class="input"  v-model="keyWord" type="text" placeholder="请输入商品名/资料库名/资料名">-->
-<!--                    <div class="icon-search" @click="searchKeyWord">-->
-<!--                        <img src="/img/document/icon-search.png" alt="">-->
-<!--                    </div>-->
-<!--                </div>-->
-<!--            </div>-->
-<!--        </div>-->
-<!--        <input type="hidden" th:value="${spiServer}" id="spiServer">-->
-<!--        <input type="hidden" th:value="${agent}" id="userAgent">-->
-<!--    </div>-->
-<!--    <div class="document-content">-->
-<!--        <div class="inner">-->
-<!--            <div class="document-list">-->
-<!--                <div class="list-item">-->
-<!--                    <div class="list-item-top">-->
-<!--                        <div class="image"><img :src="ossArchive.mainImage" alt=""></div>-->
-<!--                        <div class="main">-->
-<!--                            <h1><span>供应商:</span>{{ ossArchive.shopName }}</h1>-->
-<!--                            <div class="p"><span class="label">商品名称:</span>{{ ossArchive.productName }}</div>-->
-<!--                            <div class="p"><span class="label">资料库名称: </span><p class="name"> {{ ossArchive.name }} </p><span @click="MoreDetails()" class="more">更多资料</span></div>-->
-<!--                        </div>-->
-<!--                    </div>-->
-<!--                    <div class="list-item-bot" >-->
-
-<!--                    </div>-->
-<!--                </div>-->
-<!--            </div>-->
-<!--        </div>-->
-<!--    </div>-->
-<!--    <div class="document-footer">-->
-<!--        <div class="wrap copyright clear">-->
-<!--            <div class="item icon mIcon">-->
-<!--                <p><span>Copyright © 2015-2020 CAIMEI365.com All Rights Reserved.</span><span>深圳市采美信息技术有限公司</span></p>-->
-<!--                <p><span>粤B1-20160129 备案号 粤ICP备14019824号</span><span>中华人民共和国增值电信业务经营许可证</span></p>-->
-<!--            </div>-->
-<!--        </div>-->
-<!--    </div>-->
+    <div>
+        <div class="header document">
+            <div class="wrap-header clear">
+                <img class="logo" src="/img/document/document_logo.png" alt="采美 生美/医美采购服务平台" @click="goPathList"/>
+                <span @click="goPathList">采美资料库</span>
+                <div class="search">
+                    <input class="input"  v-model="keyWord" type="text" placeholder="请输入商品名/资料库名/资料名">
+                    <div class="icon-search" @click="searchKeyWord">
+                        <img src="/img/document/icon-search.png" alt="">
+                    </div>
+                </div>
+            </div>
+        </div>
+        <input type="hidden" th:value="${spiServer}" id="spiServer">
+        <input type="hidden" th:value="${agent}" id="userAgent">
+    </div>
+    <div class="document-content">
+        <div class="inner">
+            <div class="document-list">
+                <div class="list-item">
+                    <div class="list-item-top">
+                        <div class="image"><img :src="ossArchive.mainImage" alt=""></div>
+                        <div class="main">
+                            <h1><span>供应商:</span>{{ ossArchive.shopName }}</h1>
+                            <div class="p"><span class="label">商品名称:</span>{{ ossArchive.productName }}</div>
+                            <div class="p"><span class="label">资料库名称: </span><p class="name"> {{ ossArchive.name }} </p><span @click="MoreDetails()" class="more">更多资料</span></div>
+                        </div>
+                    </div>
+                    <div class="list-item-bot" >
+                        <div class="media" id="pdfMedia"></div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="document-footer">
+        <div class="wrap copyright clear">
+            <div class="item icon mIcon">
+                <p><span>Copyright © 2015-2020 CAIMEI365.com All Rights Reserved.</span><span>深圳市采美信息技术有限公司</span></p>
+                <p><span>粤B1-20160129 备案号 粤ICP备14019824号</span><span>中华人民共和国增值电信业务经营许可证</span></p>
+            </div>
+        </div>
+    </div>
 </div>
 <!-- 引入底部 -->
 <template th:replace="components/document-link"></template>

src/main/resources/templates/document/pdfdetails.html

@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="zh-CN" xmlns:th="https://www.thymeleaf.org" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+      xsi:schemaLocation="https://www.thymeleaf.org ">
+<head>
+    <title>采美365网--医疗美容生活美容正品采购平台</title>
+    <template th:replace="components/head-link"></template>
+    <link th:href="@{/css/document/details.css(v=${version})}" rel="stylesheet" type="text/css">
+    <link th:href="@{/lib/css/pdfh5.css(v=${version})}" rel="stylesheet" type="text/css">
+</head>
+<body>
+<!-- 二级页面 -->
+<div id="documentList" v-cloak>
+    <div class="media" id="pdfMedia"></div>
+</div>
+<!-- 引入底部 -->
+<template th:replace="components/document-link"></template>
+<script charset="utf-8" type="text/javascript" th:src="@{/js/common/serviceapi/document.service.js(v=${version})}"></script>
+<script charset="utf-8" type="text/javascript" th:src="@{/lib/js/pdf.js(v=${version})}"></script>
+<script charset="utf-8" type="text/javascript" th:src="@{/lib/js/pdf.worker.js(v=${version})}"></script>
+<script charset="utf-8" type="text/javascript" th:src="@{/lib/js/pdfh5.js(v=${version})}"></script>
+<script charset="utf-8" type="text/javascript" th:src="@{/js/document/pdfdetails.js(v=${version})}"></script>
+</body>
+</html>