updated

src/main/java/com/caimei/www/controller/unlimited/ProductController.java

@@ -60,6 +60,11 @@ public class ProductController extends BaseController {
      */
     private static final String QUICK_OPERATION = "quickOperation/index";
 
+    /**
+     * 商品详情文件预览
+     */
+    private static final String PRODUCT_FILE_PREVIEW = "product/filePreview";
+
     private ProductService productService;
 
     private SinglePageService singlePageService;
@@ -136,6 +141,14 @@ public class ProductController extends BaseController {
         return PRODUCT_DETAIL_PATH;
     }
 
+    /**
+     * 商品详情资料预览
+     */
+    @GetMapping("/product/filePreview.html")
+    public String productFilePreview() {
+        return PRODUCT_FILE_PREVIEW;
+    };
+
     /**
      * 仪器页
      */

src/main/resources/static/css/article/article.css

@@ -84,14 +84,14 @@ dl,dd,dt{zoom:1}
 	.header{position:sticky;width:100%;top:0;left:0;z-index:9999;background: white;}
 	/*返回首页*/
 	.H5-info-logo, .H5-info-menu {display: none;}
-	.head-back {width: 100%;height: 40px;background: #F7F7F7;}
+	.head-back {width: 100%;height: 40px;background: #F7F7F7;cursor: pointer;}
 	.head-back .head {width: 1185px; height: 100%; margin: 0 auto;display: flex;align-items: center;}
-	.head-back .head .head-logo {width: 16px;height: 16px;box-sizing: border-box;border: 1px solid;margin-right: 5px;}
+	.head-back .head .head-logo {width: 20px;height: 18px;box-sizing: border-box;margin-right: 5px;background: url(/img/article/PC.png) -180px -747px;}
 	.head-back .head .text {font-size: 14px; color: #909090;}
 
 	/* 信息中心更新搜索头 */
 	.header .search-top{display:flex;width:1185px;margin:0 auto; height: 100px;align-items: center;}
-	.search-top .info-logo-content {width: 168px; border: 1px solid;height: 76px;}
+	.search-top .info-logo-content {width: 168px;height: 76px;background: url(/img/article/h5-logo.png);background-size: contain;}
 	.search-top .search{position:relative;display:flex;width:685px;margin-left:134px;flex-direction: column;}
 	.search-top .search .search-info {width: 100%;height: 44px;border:2px solid #FF5B00;box-sizing: border-box;border-radius:2px;overflow: hidden;}
 	.search-top .search .keyword{width:100%;height:100%;border: none;color:#B2B2B2;font-size:14px; padding: 0 80px 0 16px;}
@@ -125,9 +125,15 @@ dl,dd,dt{zoom:1}
 	.search .keyword::-moz-placeholder{color:#fff}
 	.search .keyword:-ms-input-placeholder{color:#fff}
 	/* .content.sea-top{margin-top:110px} */
-	.foot{width:100%;height:130px;background:#262626;}
-	.footer{width:1185px;margin:0 auto;text-align:center;height: 130px;box-sizing: border-box;padding: 39px 0;}
+	.foot{width:100%;height:174px;background:#262626;}
+	.footer{width:1185px;margin:0 auto;text-align:center;height: 174px;box-sizing: border-box;padding: 39px 0;}
 	.footer p{line-height: 30px;color: #FFFFFF;}
+
+	/*友情链接*/
+	.footer .back-link {display: flex;justify-content: center;align-items: center;margin-bottom: 25px;font-size: 14px;}
+	.footer .back-link a {color: #FFF;}
+	.footer .back-link a:hover{color: #E15621;}
+
 	.footer p span{margin:0 5px}
 	.footer p span a{color: #FFFFFF;}
 	.footer p span a:hover{color: #E15621;}
@@ -499,7 +505,9 @@ dl,dd,dt{zoom:1}
 	.dataRousce .handleMore {width: 100%;border-top: 1px solid #CCCCCC;margin: 0 auto;display: flex;}
 	.dataRousce .handleMore .more {margin: 7.3vw auto 5.3vw auto;}
 
-	.footer{width:100%;padding:4vw 0;background:#262626;text-align:center}
+	.footer{width:100%;padding:4vw 0;background:#262626;text-align:center;padding: 5vw;line-height: 6.4vw;}
+	.footer .back-link {margin-bottom: 4vw;font-size: 3.4vw;}
+	.footer .back-link a {color: #fff;}
 	.footer .logo img{width:9.2vw;height:8vw;vertical-align:middle}
 	.footer .dizhi{display:inline-table;color:#ccc;font-size:3.1vw;line-height:4.8vw;vertical-align:super}
 	.xinxi .write:before{width:4vw;height:4vw;vertical-align:top;background-position:-22.5vw -17.5vw;margin-right:1vw}

src/main/resources/static/css/product/filePreview.css

@@ -0,0 +1,59 @@
+@media screen and (min-width: 776px) {
+    #file {
+        margin: 2vh auto;
+        width: 1185px;
+        min-height: 600px;
+        background: #fff;
+        position: relative;
+    }
+    .afterHidden:after {
+        content: " ";
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        width: 100%;
+        border: 0.5px solid rgba(255,255,255,0.2);
+        box-shadow: 0 -12px 26px #d00;
+    }
+    #file .more {
+        position: absolute;
+        z-index: 1;
+        bottom: 0;
+        left: 50%;
+        font-size: 20px;
+        color: red;
+        transform: translateX(-50%);
+        cursor: pointer;
+    }
+}
+
+
+@media screen and (max-width: 776px) {
+    #supplierLogin { display: none; }
+    #file {
+        margin: 2vh auto;
+        width: 90vw;
+        min-height: 600px;
+        background: #fff;
+        position: relative;
+    }
+    .afterHidden:after {
+        content: " ";
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        width: 100%;
+        border: 0.5px solid rgba(255,255,255,0.2);
+        box-shadow: 0 -12px 26px #d00;
+    }
+    #file .more {
+        position: absolute;
+        z-index: 1;
+        bottom: 0;
+        left: 50%;
+        font-size: 5.2vw;
+        color: red;
+        transform: translateX(-50%);
+        cursor: pointer;
+    }
+}

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

@@ -4,7 +4,7 @@ var beautyArchiveDetailMixin = {
     data: {
         listLoading: false,
         //用户信息相关
-        permission: 5, //用户权限  0可查看，1未登录，2需升级会员机构，3需升级医美会员机构，4需要抵扣采美豆，5无权限查看
+        permission: 1, //用户权限  0可查看，1未登录，2需升级会员机构，3需升级医美会员机构，4需要抵扣采美豆，5无权限查看
         //页面配置
         archiveId: '',  //资料列表id
         currentVideoUrl: '', //正在播放的视频链接（上一个播放的的视频）
@@ -49,12 +49,9 @@ var beautyArchiveDetailMixin = {
     methods: {
         // 图片点击事件
         handleShowImage: function (i, imageList) {
-            // this.initPreviewImage()
-            console.log(this.permission, )
             if (this.permission === 2 || this.permission === 4 || this.permission === 1) {
                 if (imageList && imageList.length >= 5) {
                     if (i < 2) {
-                        console.log(111)
                         this.initPreviewImage()
                     } else {
                         if (this.checkPermission() !== 0) return;
@@ -65,37 +62,6 @@ var beautyArchiveDetailMixin = {
             } else {
                 if (this.checkPermission() !== 0) return;
             }
-                        // CAIMEI.Popup({
-                        //     content: this.TipStatus.text,
-                        //     confitmBtnText: this.TipStatus.btn,
-                        //     cancelBtnText: '取消',
-                        //     closeIcon:true
-                        // }, function () {
-                        //     // 确认 执行 下一步  链接跳转 支付支付采美豆
-                        //     this.handleClickToPage(this.TipStatus.redirect);
-                        // }, function () {
-                        // });
-                    //     this.initPreviewImage()
-                    // } else {
-                    //     CAIMEI.Popup({
-                    //         content: this.TipStatus.text,
-                    //         confitmBtnText: this.TipStatus.btn,
-                    //         cancelBtnText: '取消',
-                    //         closeIcon:true
-                    //     }, function () {
-                    //         // 确认 执行 下一步  链接跳转 支付支付采美豆
-                    //         this.handleClickToPage(this.TipStatus.redirect);
-                    //     }, function () {
-                    //     });
-                    //     if (this.checkPermission() !== 0) return;
-                    // }
-            //     }else {
-            //         if (this.checkPermission() !== 0) return;
-            //     }
-            // } else {
-            //     if (this.checkPermission() !== 0) return;
-            // }
-            // if (this.checkPermission() !== 0) return;
         },
         //初始化预览图片配置
         initPreviewImage: function () {
@@ -111,19 +77,12 @@ var beautyArchiveDetailMixin = {
         handleShowPlayer: function (url, dom) {
             if (this.permission === 2 || this.permission === 4 || this.permission === 1) {
                 let _self = this;
-
                 //暂停上一个正在播放的播放器
                 this.currentVideoUrl = url;
                 this.isPlayer = true;
                 this.showVideoDialog = true;
-                console.log(url)
                 setTimeout(function(){
-                    // var video = this.$refs.videoRef;
                     _self.currentVideo = document.querySelector('#realPlayer');
-                    // _self.currentVideo.oncanplay = function () {
-                    //     console.log(parseInt((_self.currentVideo.duration % 3600)/60))
-                    // }
-                    // console.log(_self.duration)
                     if(_self.permission === 2 || _self.permission === 4 || _self.permission === 1) {
                         _self.currentVideo.oncanplay = function () {
                             console.log(_self.currentVideo.duration)
@@ -148,22 +107,6 @@ var beautyArchiveDetailMixin = {
                         }
 
                     }
-                        // _self.currentVideo.addEventListener('pause', function () {
-                        //     _self.isPlayer = false;
-                        //     console.log('暂停播放');
-                        // });
-                        // _self.currentVideo.addEventListener('ended', function () {
-                        //     _self.isPlayer = false;
-                        //     console.log('播放结束');
-                        // });
-                        // _self.currentVideo.addEventListener('error', function () {
-                        //     _self.isPlayer = false;
-                        //     console.log('播放错误');
-                        // });
-                        // _self.currentVideo.addEventListener('play', function () {
-                        //     _self.isPlayer = true;
-                        //     console.log('开始播放');
-                        // })
                 })
             } else {
                 let _self = this;
@@ -172,7 +115,6 @@ var beautyArchiveDetailMixin = {
                 this.currentVideoUrl = url;
                 this.isPlayer = true;
                 this.showVideoDialog = true;
-                console.log(url)
                 setTimeout(function(){
                     _self.currentVideo = document.querySelector('#realPlayer');
                     _self.currentVideo.addEventListener('pause', function () {
@@ -230,6 +172,15 @@ var beautyArchiveDetailMixin = {
                 });
             }
         },
+        //文件预览跳转页面
+        fileContentPreview(str) {
+            if (window.localStorage.getItem('filePreviewInfo')) {
+                window.localStorage.removeItem('filePreviewInfo')
+            }
+            window.localStorage.setItem('filePreviewInfo', JSON.stringify(str))
+            window.location.href = "/product/filePreview.html"
+        },
+
         openFile: function(url){
             var a = document.createElement('a');
             a.href = url + '&random=' + Math.random();

src/main/resources/static/js/product/filePreview.js

@@ -0,0 +1,16 @@
+var FilePreview = new Vue({
+    el: "#file",
+    mixins: [beautyArchiveDetailMixin],
+    data: {
+        fileInfo: {}
+    },
+    mounted() {
+        this.fileInfo = JSON.parse(window.localStorage.getItem('filePreviewInfo'));
+    },
+    methods: {
+    //    查看更多
+        readMore() {
+            this.handlePreviewOffice(this.fileInfo)
+        },
+    },
+})

src/main/resources/templates/article/components/article-footer.html

@@ -1,6 +1,9 @@
 <!--底部内容-->
 <div class="foot">
     <div class="footer">
+        <div class="back-link">
+            <a href="/index.html">友情链接：采美商城</a>
+        </div>
         <p>
            <span>
                 <img class="icp" src="/img/base/icon-icp@2x.png" alt="粤B1-20160129 备案号 ">

src/main/resources/templates/article/components/article-header.html

@@ -2,14 +2,14 @@
     <div class="head-back">
         <div class="head">
             <div class="head-logo"></div>
-            <div class="text">采美商城首页</div>
+            <div class="text">
+                <a href="/index.html">采美商城首页</a>
+            </div>
         </div>
     </div>
 <!--    搜索头-->
     <div class="search-top" :class="(show || right_drawer) ? 'search-top-shadow' : '' ">
-        <div class="info-logo-content">
-            <div class="info-logo"></div>
-        </div>
+        <div class="info-logo-content"></div>
         <div class="search auto-input" id="topSearch">
             <div class="search-info">
                 <label>
@@ -53,24 +53,10 @@
 
 <!--   导航栏弹窗-->
     <van-popup class="navPopup" v-model="right_drawer" position="right" v-cloak>
-<!--        <div th:each="type,status: *{articleType}" th:typeId="${type.id}" style="position:relative;">-->
-<!--            <div class="nav-popup-item">-->
-<!--                <a class="nav-popup-link" th:text="${type.name}" th:href="'/info/center-'+${type.id}+'-1.html'"></a>-->
-<!--                <div class="select-nav" ></div>-->
-<!--            </div>-->
-<!--            <div class="nav-popup-child">-->
-<!--                <div th:onclick="|handlerClick(${type.id}, this)|" th:text="${type.name}"></div>-->
-<!--                <div>132456</div>-->
-<!--                <div>132456</div>-->
-<!--                <div>132456</div>-->
-<!--            </div>-->
-<!--        </div>-->
         <van-collapse accordion v-model="activeNames">
             <van-collapse-item th:title="${type.name}" th:name="${type.id}" th:each="type,status: *{articleType}" th:typeId="${type.id}">
                 <a th:href="'/info/center-'+${type.id}+'-1.html'" th:text="${type.name}" class="van-collapse-nav"></a>
-                <a class="van-collapse-nav">132456</a>
-                <a class="van-collapse-nav">132456</a>
-                <a class="van-collapse-nav">132456</a>
+                <a class="van-collapse-nav" th:each="link: *{type.linkList}" th:text="${link.name}" th:href="'/info/center-'+${link.id}+'-1.html'"></a>
             </van-collapse-item>
         </van-collapse>
     </van-popup>
@@ -89,11 +75,9 @@
                 <!-- <a class="home" href="/" target="_blank">商城</a> -->
                 <div class="type-item" th:each="type,status: *{articleType}" th:typeId="${type.id}" th:class="${typeId==type.id}?'type-item current':'type-item'">
                     <a class="typeBtn" th:text="${type.name}" th:href="'/info/center-'+${type.id}+'-1.html'"></a>
-                    <div class="type-item-link"></div>
+                    <div class="type-item-link" th:if="${type.linkList}"></div>
                     <div class="nav-menu">
-                        <a>美博会</a>
-                        <a>年终大促</a>
-                        <a>美博会专题</a>
+                        <a th:each="link: *{type.linkList}" th:href="'/info/center-'+${link.id}+'-1.html'" th:text="${link.name}"></a>
                     </div>
                 </div>
                 <a class="typeBtn" href="/document/beauty-archive.html" target="_blank">美业资料</a>
@@ -112,9 +96,3 @@
     <input type="hidden" th:value="${coreServer}" id="coreServer">
     <input type="hidden" th:value="${agent}" id="userAgent">
 </header>
-
-<script type="text/javascript">
- const handlerClick = (e, t) => {
-
- }
-</script>

src/main/resources/templates/article/list.html

@@ -52,7 +52,7 @@
                 <div class="h5-notice">公告：</div>
                 <div class="h5-notice-title">
                     <ul>
-                        <li @click="hanldDetails(newsList[0].id)">{{ newsList[0].title }}</li>
+                        <li @click="hanldDetails(newsList[0].id)" v-if="newsList[0].title">{{ newsList[0].title }}</li>
                     </ul>
                 </div>
                 <div class="h5-notice-more"><a href="/info/articlerecommendation-3-1.html?isNotice">更多 ></a></div>

src/main/resources/templates/product/detail.html

@@ -717,7 +717,8 @@
                                         <div class="cm-title" v-html="item.title"></div>
                                         <div class="cm-row clear">
                                             <span class="cm-time">{{ item.addTime | formatTime }}</span>
-                                            <span class="cm-view" @click="handlePreviewOffice(item)">预览文件</span>
+                                            <span class="cm-view" v-if="permission === 0" @click="handlePreviewOffice(item)">预览文件</span>
+                                            <span class="cm-view" v-else  @click="fileContentPreview(item)">预览文件</span>
                                         </div>
                                     </div>
                                 </div>

src/main/resources/templates/product/filePreview.html

@@ -0,0 +1,33 @@
+<!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>
+  <meta charset="UTF-8">
+  <meta name="referrer" content="no-referrer">
+  <title>文件预览</title>
+  <template th:replace="components/head-link"></template>
+  <template th:replace="components/analysis"></template>
+  <link th:href="@{/css/product/filePreview.css(v=${version})}" rel="stylesheet" type="text/css">
+</head>
+<body>
+<!-- 引用头部 -->
+<template th:replace="components/header"></template>
+<div id="file" v-cloak class="afterHidden">
+  <div v-html="fileInfo.content || '无文件资源'">
+    文件预览
+  </div>
+  <span class="more" @click="readMore">
+    查看更多~
+  </span>
+</div>
+
+<!-- 引入底部 -->
+<template th:replace="components/footer"></template>
+<template th:replace="components/foot-link"></template>
+<script src="/lib/datapicker/moment-2.29.min.js"></script>
+<script charset="utf-8" type="text/javascript" src="/lib/magnifier.js"></script>
+<script charset="utf-8" type="text/javascript" src="/lib/viewer.min.js"></script>
+<script charset="utf-8" type="text/javascript" th:src="@{/js/document/beautyArchiveDetailMixin.js(v=${version})}"></script>
+<script charset="utf-8" type="text/javascript" th:src="@{/js/product/filePreview.js(v=${version})}"></script>
+</body>
+</html>