资料库bug修改

src/main/resources/static/css/document/beauty-archive-detail.css

@@ -45,16 +45,18 @@ p{margin: 0}
 
 /*图片预览背景*/
 .viewer-backdrop{z-index:13140 !important;background:#000 !important}
-
+.loading{display: flex;justify-content: center;align-items: center;width: 100%; height: 100%;padding:80px 0;box-sizing: border-box; background: #fff;position: absolute;z-index: 99999;top: 0}
 /*PC端样式*/
 @media screen and (min-width: 768px){
 body::-webkit-scrollbar{width:10px;height:10px;background-color:#F6F6F6;}
 body::-webkit-scrollbar-track{-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,0.1);border-radius:2px;background-color:#F6F6F6}
 body::-webkit-scrollbar-thumb{border-radius:2px;-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.1);background-color:#93979F}
 body{padding-top: 72px;padding-bottom: 60px;}
-.cm-container{ width: 1200px;margin: 0 auto;}
+.loading{height: 90vh}
+.cm-container{ width: 1200px;margin: 0 auto;position: relative;}
 .mobile-bar{display: none;}
 .jconfirm-content{overflow: hidden !important;}
+#beautyArchiveDetail{position: relative}
 /*顶部区域*/
 .cm-topbar{background:#E15616;height:72px;position: fixed;width: 100%;top: 0;z-index: 9999}
 .cm-topbar .cm-title{font-size:24px;line-height:72px;color:#FFFFFF}
@@ -116,6 +118,8 @@ body{padding-top: 72px;padding-bottom: 60px;}
 /*移动端样式*/
 @media screen and (max-width: 768px) {
 body{padding-bottom: 12vw}
+#beautyArchiveDetail{position: relative}
+.loading{background: #F5F5F5}
 .cm-topbar{display: none;}
 /*资料样式*/
 .cm-database{width:100vw;text-align:initial;background:#F7F7F7;overflow:hidden}

src/main/resources/static/css/document/beauty-archive.css

@@ -42,15 +42,16 @@ p{margin: 0}
 .cm-fr{float: right}
 .cm-clearfix::after{content: "";display: block;clear: both}
 .cm-fixed-bottom{position: fixed;width: 100%;bottom: 0;left: 0}
+.loading{display: flex;justify-content: center;align-items: center;width: 100%; height: 100%;padding:80px 0;box-sizing: border-box; background: #fff;position: absolute;z-index: 99999;top: 0}
 /*pc端样式*/
 @media screen and (min-width: 768px) {
 ::-webkit-scrollbar{width:10px;height:10px;background-color:#F6F6F6;}
 ::-webkit-scrollbar-track{-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,0.1);border-radius:2px;background-color:#F6F6F6}
 ::-webkit-scrollbar-thumb{border-radius:2px;-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.1);background-color:#93979F}
 body{background:#F5F5F5;color: #4A4F58;padding-top: 72px;}
-.cm-container{width:1200px;margin:0 auto}
+.cm-container{width:1200px;margin:0 auto;position: relative}
 /*顶部区域*/
-.cm-topbar{background:#E15616;height:72px;position: fixed;width: 100%;top: 0;}
+.cm-topbar{background:#E15616;height:72px;position: fixed;width: 100%;top: 0;z-index: 999;}
 .cm-topbar .cm-title{font-size:24px;line-height:72px;color:#FFFFFF}
 .cm-topbar .cm-search{position:relative;display:table-cell;vertical-align:top;width:280px;height:32px;margin-left:39px}
 .cm-topbar .cm-search .cm-keyword{width:280px;height:32px;line-height:32px;margin:22px 0 16px 0;padding:0 32px 0 10px;border:none;border-radius:16px;background:#eb7941;color:#fff;font-size:14px}
@@ -106,6 +107,7 @@ body{background:#F5F5F5;color: #4A4F58;padding-top: 72px;}
 @media screen and (max-width: 768px){
 body{color:#4A4F58;background:#fff;padding-top: 26vw;}
 #meiye{margin:0 3.2vw;}
+.cm-container{position: relative}
 /*顶部区域*/
 .cm-mobile-fixed{position: fixed;width: 100%;top: 0;background: #fff;}
 .cm-topbar{padding:4vw 0 3vw}

src/main/resources/static/js/document/beauty-archive.js

@@ -9,7 +9,7 @@ $(window).on('resize', function () {
 var beautyArchive = new Vue({
     el: '#beautyArchive',
     data: {
-        isLoading: false,
+        listLoading: false,
         total: 0, // 商品总数
         totalPage: 0,// 分页数
         jumpPageSize: '',
@@ -91,7 +91,7 @@ var beautyArchive = new Vue({
         //获取商品列表
         getList: function () {
             const _that = this;
-            _that.isLoading = true;
+            _that.listLoading = true;
             BeautyArchiveApi.GetArchiveProduct(this.listQuery, function (res) {
                 if (res.code !== 0) return console.log('请求失败');
                 console.log(res.data);
@@ -106,7 +106,7 @@ var beautyArchive = new Vue({
                     _that.productList = _that.productList.concat(res.data.results);
                     console.log(_that.productList);
                 }
-                _that.isLoading = false;
+                _that.listLoading = false;
                 _that.windowScroll();
             })
         },

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

@@ -2,7 +2,7 @@
 
 var beautyArchiveDetailMixin = {
     data: {
-        isRequest: false,
+        listLoading: false,
         //用户信息相关
         permission: 5, //用户权限  0可查看，1未登录，2需升级会员机构，3需升级医美会员机构，4需要抵扣采美豆，5无权限查看
         //页面配置
@@ -201,7 +201,7 @@ var beautyArchiveDetailMixin = {
         //获取资料列表
         getProdcutArchiveDetails: function () {
             const _self = this;
-            _self.isRequest = true;
+            _self.listLoading = true;
             if (this.archiveId === 0) return;
             BeautyArchiveApi.GetProdcutArchiveDetails({
                 userId: GLOBAL_USER_ID,
@@ -216,7 +216,7 @@ var beautyArchiveDetailMixin = {
                 _self.archiveProductInfo.productName = res.data.productName;
                 _self.archiveProductInfo.productType = res.data.productType;
                 _self.archiveProductInfo.shopName = res.data.shopName;
-                _self.isRequest = false;
+                _self.listLoading = false;
                 // 只有当前用户权限为0时初始化图片预览
                 if (_self.permission === 0) {
                     setTimeout(function () {

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

@@ -396,9 +396,6 @@ var productDetail = new Vue({
             var _self = this;
             _self.tabsIndex = index;
             if (index !== 4) return;
-            setTimeout(function () {
-                _self.initPreviewImage()
-            })
         }
     },
     created: function () {

src/main/resources/templates/document/beauty-archive-detail.html

@@ -14,19 +14,23 @@
     <template th:replace="components/header"></template>
 </div>
 <div id="beautyArchiveDetail" v-cloak>
-    <template v-if="!isRequest || isRequest">
-        <!-- 顶部tab -->
-        <div class="cm-topbar" v-if="isPC">
-            <div class="cm-container cm-clearfix">
-                <div class="cm-fl cm-title">美业资料</div>
-                <div class="cm-fr">
-                    <!--                <div class="cm-search">-->
-                    <!--                    <input class="cm-keyword" v-model="keyword" placeholder="请输入商品名称/供应商名" type="text"/>-->
-                    <!--                    <a href="javascript:void(0)" @click="handleSearch(keyword)" class="cm-search-btn icon"></a>-->
-                    <!--                </div>-->
-                </div>
+    <!--listLoaidng动画-->
+    <div v-if="listLoading" class="loading">
+        <img src="/img/base/loading.gif">
+    </div>
+    <!-- 顶部tab -->
+    <div class="cm-topbar" v-if="isPC">
+        <div class="cm-container cm-clearfix">
+            <div class="cm-fl cm-title">美业资料</div>
+            <div class="cm-fr">
+                <!--                <div class="cm-search">-->
+                <!--                    <input class="cm-keyword" v-model="keyword" placeholder="请输入商品名称/供应商名" type="text"/>-->
+                <!--                    <a href="javascript:void(0)" @click="handleSearch(keyword)" class="cm-search-btn icon"></a>-->
+                <!--                </div>-->
             </div>
         </div>
+    </div>
+    <template v-if="!listLoading">
         <!--顶部产品介绍-->
         <div class="cm-header cm-container cm-clearfix">
             <div class="cm-cover">

src/main/resources/templates/document/beauty-archive.html

@@ -12,6 +12,7 @@
 <input type="hidden" th:value="${coreServer}" id="coreServer">
 
 <div id="beautyArchive" v-cloak>
+
     <!--顶部-->
     <div class="cm-mobile-fixed">
         <div class="cm-topbar">
@@ -57,7 +58,7 @@
         </div>
         <!-- H5加载更多 -->
         <div class="cm-loading" v-if="!isPC">
-            <span class="cm-action" v-if="isLoading"></span>
+            <span class="cm-action" v-if="listLoading"></span>
             <span class="cm-text" v-else>{{ loadingText }}</span>
         </div>
         <!-- PC分页 -->
@@ -76,6 +77,10 @@
             <span>页</span>&nbsp;
             <a class="btn" href="javascript:void(0);" @click="toPagination(jumpPageSize)">点击跳转</a>
         </div>
+        <!--listLoaidng动画-->
+        <div v-if="listLoading" class="loading">
+            <img src="/img/base/loading.gif">
+        </div>
     </div>
 
     <div :class="{'cm-fixed-bottom':productList.length <= 2 }">