添加教材下架删除提示

src/views/TextbookDetail.vue

@@ -7,47 +7,55 @@
       <div class="shade"></div>
     </div>
     <HeaderOne text="123" title="教材详情" name="" />
-    <div class="main" v-loading="loading">
-      <div class="bookDetail" v-if="detailSHow">
-        <div class="rightUp">
-          <span>HOT</span>
-        </div>
-        <div class="img">
-          <img :src="TextbookData.picture_url" alt="" />
-        </div>
-        <div class="text">
-          <p class="p1">{{ TextbookData.name }}</p>
-          <p class="p2">{{ TextbookData.org_name }}</p>
-          <p class="p2">{{ TextbookData.author }}</p>
-          <p class="p3">
-            {{ TextbookData.description }}
-          </p>
-          <div class="operation">
-            <span class="price">
-              ￥<span
-                class="price_1"
-                v-html="changePrice(TextbookData.price, 24, 16)"
-              ></span>
-            </span>
-            <button @click="getPurchase" class="get">
-              <!-- Key390-去学习 Key72-购买 -->
-              {{ bookIsBuy == "true" ? this.$t("Key390") : this.$t("Key72") }}
-            </button>
-            <!-- <button   class="acquired">
+    <template v-if="TextbookData.is_deleted == 'false'">
+      <template v-if="bookIsBuy == 'true' || TextbookData.publish_status == 1">
+        <div class="main" v-loading="loading">
+          <div class="bookDetail" v-if="detailSHow">
+            <div class="rightUp">
+              <span>HOT</span>
+            </div>
+            <div class="img">
+              <img :src="TextbookData.picture_url" alt="" />
+            </div>
+            <div class="text">
+              <p class="p1">{{ TextbookData.name }}</p>
+              <p class="p2">{{ TextbookData.org_name }}</p>
+              <p class="p2">{{ TextbookData.author }}</p>
+              <p class="p3">
+                {{ TextbookData.description }}
+              </p>
+              <div class="operation">
+                <span class="price">
+                  ￥<span
+                    class="price_1"
+                    v-html="changePrice(TextbookData.price, 24, 16)"
+                  ></span>
+                </span>
+                <button @click="getPurchase" class="get">
+                  <!-- Key390-去学习 Key72-购买 -->
+                  {{
+                    bookIsBuy == "true" ? this.$t("Key390") : this.$t("Key72")
+                  }}
+                </button>
+                <!-- <button   class="acquired">
               ACQUIRED
             </button> -->
-            <span class="enshrine" @click="enshrineEvent">
-              <img
-                v-if="enshrine == 'false'"
-                src="../assets/textBookDetail/enshrine2.png"
-                alt=""
-              />
-              <img v-else src="../assets/textBookDetail/enshrine1.png" alt="" />
-            </span>
+                <span class="enshrine" @click="enshrineEvent">
+                  <img
+                    v-if="enshrine == 'false'"
+                    src="../assets/textBookDetail/enshrine2.png"
+                    alt=""
+                  />
+                  <img
+                    v-else
+                    src="../assets/textBookDetail/enshrine1.png"
+                    alt=""
+                  />
+                </span>
+              </div>
+            </div>
           </div>
-        </div>
-      </div>
-      <!-- <div class="more"  v-if="detailSHow">
+          <!-- <div class="more"  v-if="detailSHow">
         <div class="moreTitle">更多推荐</div>
         <div class="moreList">
           <div class="moreOne">
@@ -124,112 +132,153 @@
           </div>
         </div>
       </div> -->
-      <div class="cutDownOrimg" v-if="detailSHow">
-        <div class="sele">
-          <div
-            @click="SelectShowEvent('1')"
-            :class="SelectShow == '1' ? 'select' : ''"
-            v-if="SelectFirstShow"
-          >
-            <!-- 目录 -->{{ $t("Key612") }}
+          <div class="cutDownOrimg" v-if="detailSHow">
+            <div class="sele">
+              <div
+                @click="SelectShowEvent('1')"
+                :class="SelectShow == '1' ? 'select' : ''"
+                v-if="SelectFirstShow"
+              >
+                <!-- 目录 -->{{ $t("Key612") }}
+              </div>
+              <!-- 资源 -->
+              <div
+                @click="SelectShowEvent('2')"
+                :class="SelectShow == '1' ? '' : 'select'"
+                v-if="
+                  fileListVideo.length > 0 ||
+                  fileListAudio.length > 0 ||
+                  fileListOtheraudio.length > 0 ||
+                  fileListDoc.length > 0
+                "
+              >
+                {{ $t("Key613") }}
+              </div>
+            </div>
           </div>
-          <!-- 资源 -->
-          <div
-            @click="SelectShowEvent('2')"
-            :class="SelectShow == '1' ? '' : 'select'"
-            v-if="fileListVideo.length>0||fileListAudio.length>0||fileListOtheraudio.length>0||fileListDoc.length>0"
-          >
-            {{ $t("Key613") }}
+          <div v-if="SelectShow == '1'" class="Catalogue">
+            <BookView
+              :bookId="TextBookId"
+              @bookdetailShow="bookdetailShow"
+              :bookIsBuy="bookIsBuy"
+            ></BookView>
           </div>
-        </div>
-      </div>
-      <div v-if="SelectShow == '1'" class="Catalogue">
-        <BookView
-          :bookId="TextBookId"
-          @bookdetailShow="bookdetailShow"
-          :bookIsBuy="bookIsBuy"
-        ></BookView>
-      </div>
-      <div v-else class="Resources">
-        <!--没有数据-->
-        <!-- <div>
+          <div v-else class="Resources">
+            <!--没有数据-->
+            <!-- <div>
           <img src="../assets/textBookDetail/fileType1.png" alt="" />
           <span> 文件名 </span>
           <img src="../assets/textBookDetail/upload.png" alt="" />
         </div> -->
-        <div class="resource-content" v-if="fileListVideo.length>0">
-        <h2 class="video-title">视频资源</h2>
-        <ul class="video-list">
-          <li v-for="(item,index) in fileListVideo" :key="index" @click="handleJumpVideo(index)">
-            <div class="video-img" :style="{'background':'url('+item.preview_image_file_url+') no-repeat','background-size':'cover'}">
-              <img class="video" />
-              <img src="../assets/common/play-one.png" class="play-one" />
-            </div>
-            <p class="video-name">{{item.file_name}}</p>
-          </li>
-        </ul>
-      </div>
-      <div class="resource-content" v-if="fileListAudio.length>0||fileListOtheraudio.length>0">
-        <h2 class="video-title">音频资源</h2>
-        <div class="audio-content" v-if="fileListAudio.length>0">
-          <p class="audio-type">课文资源</p>
-          <div class="audio-line-box">
-            <AudioLine 
-                :audioId="'fileListAudio'"
-                :mp3List="fileListAudio"
-                type="audioLine"
-                ref="audioLine"
-            />
-          </div>
-        </div>
-        <div class="audio-content" v-if="fileListOtheraudio.length>0">
-          <p class="audio-type">自学音频</p>
-          <div class="audio-line-box">
-            <AudioLine 
-                :audioId="'fileListOtheraudio'"
-                :mp3List="fileListOtheraudio"
-                type="audioLine"
-                ref="audioLine"
-            />
-          </div>
-        </div>
-        <div class="audio-content">
-          <p class="audio-type">资源下载</p>
-          <div class="download">
-            <div class="book-open" @click="handleDownloadAudio">
-              <img
-                src="../assets/common/download.png"
-                class="book-open-img"
-              />
-              <span class="book-open-text">音频</span>
+            <div class="resource-content" v-if="fileListVideo.length > 0">
+              <h2 class="video-title">视频资源</h2>
+              <ul class="video-list">
+                <li
+                  v-for="(item, index) in fileListVideo"
+                  :key="index"
+                  @click="handleJumpVideo(index)"
+                >
+                  <div
+                    class="video-img"
+                    :style="{
+                      background:
+                        'url(' + item.preview_image_file_url + ') no-repeat',
+                      'background-size': 'cover',
+                    }"
+                  >
+                    <img class="video" />
+                    <img src="../assets/common/play-one.png" class="play-one" />
+                  </div>
+                  <p class="video-name">{{ item.file_name }}</p>
+                </li>
+              </ul>
             </div>
-            <!-- <div class="book-open">
+            <div
+              class="resource-content"
+              v-if="fileListAudio.length > 0 || fileListOtheraudio.length > 0"
+            >
+              <h2 class="video-title">音频资源</h2>
+              <div class="audio-content" v-if="fileListAudio.length > 0">
+                <p class="audio-type">课文资源</p>
+                <div class="audio-line-box">
+                  <AudioLine
+                    :audioId="'fileListAudio'"
+                    :mp3List="fileListAudio"
+                    type="audioLine"
+                    ref="audioLine"
+                  />
+                </div>
+              </div>
+              <div class="audio-content" v-if="fileListOtheraudio.length > 0">
+                <p class="audio-type">自学音频</p>
+                <div class="audio-line-box">
+                  <AudioLine
+                    :audioId="'fileListOtheraudio'"
+                    :mp3List="fileListOtheraudio"
+                    type="audioLine"
+                    ref="audioLine"
+                  />
+                </div>
+              </div>
+              <div class="audio-content">
+                <p class="audio-type">资源下载</p>
+                <div class="download">
+                  <div class="book-open" @click="handleDownloadAudio">
+                    <img
+                      src="../assets/common/download.png"
+                      class="book-open-img"
+                    />
+                    <span class="book-open-text">音频</span>
+                  </div>
+                  <!-- <div class="book-open">
               <img
                 src="../assets/common/download.png"
                 class="book-open-img"
               />
               <span class="book-open-text">互动课件</span>
             </div> -->
+                </div>
+              </div>
+            </div>
+            <div class="resource-content" v-if="fileListDoc.length > 0">
+              <h2 class="video-title">试读PDF</h2>
+              <ul class="PDF-list">
+                <li
+                  v-for="(item, index) in fileListDoc"
+                  :key="index"
+                  @click="handleJumpPdf(index)"
+                >
+                  <b>{{ index + 1 }}.</b>
+                  <p class="PDF-name">{{ item.file_name }}</p>
+                  <span>{{ item.fileSize }}</span>
+                  <img
+                    src="../assets/common/download.png"
+                    class="book-open-img"
+                    @click="handleDownload(item.file_id)"
+                  />
+                </li>
+              </ul>
+            </div>
           </div>
         </div>
+      </template>
+    </template>
+    <template v-if="TextbookData.is_deleted == 'true'">
+      <div class="noview-msg-box">
+        <div class="noview-msg">无法查看，教材已被删除</div>
       </div>
-        <div class="resource-content" v-if="fileListDoc.length>0">
-            <h2 class="video-title">试读PDF</h2>
-            <ul class="PDF-list">
-                <li v-for="(item,index) in fileListDoc" :key="index" @click="handleJumpPdf(index)">
-                    <b>{{index+1}}.</b>
-                    <p class="PDF-name">{{item.file_name}}</p>
-                    <span>{{item.fileSize}}</span>
-                    <img
-                        src="../assets/common/download.png"
-                        class="book-open-img"
-                        @click="handleDownload(item.file_id)"
-                    />
-                </li>
-            </ul>
-        </div>
+    </template>
+    <template
+      v-if="
+        TextbookData.is_deleted == 'false' &&
+        bookIsBuy == 'false' &&
+        TextbookData.publish_status == 0
+      "
+    >
+      <div class="noview-msg-box">
+        <div class="noview-msg">无法查看，教材已下架</div>
       </div>
-    </div>
+    </template>
     <!-- 商品详情 -->
     <el-dialog
       class="buyWindow"
@@ -266,14 +315,19 @@
 //例如：import 《组件名称》from ‘《组件路径》';
 import Header from "@/components/inputModules/common/Header";
 import HeaderOne from "@/components/inputModules/common/HeaderOne";
-import { TextbookAPI, LearnWebSI, getContent, getContentFile } from "@/api/ajax";
+import {
+  TextbookAPI,
+  LearnWebSI,
+  getContent,
+  getContentFile,
+} from "@/api/ajax";
 import Confirmorder from "@/components/pyment/Confirmorder";
 import Payment from "@/components/pyment/Payment";
 import BookView from "@/views/bookView"; // 教材预览
 import { updateWordPack } from "@/utils/i18n";
 import AudioLine from "@/components/inputModules/common/AudioLine";
 import { getToken } from "@/utils/auth";
-import { Base64 } from 'js-base64';
+import { Base64 } from "js-base64";
 export default {
   //import引入的组件需要注入到对象中才能使用
   components: {
@@ -437,51 +491,50 @@ export default {
         });
       this.handleIsBuy();
       this.handleIsEnshrine();
-      this.getBookSource()
-      this.getBookStructList()
+      this.getBookSource();
+      this.getBookStructList();
     },
     // 教材资源
-    getBookSource(){
-        let MethodNames = "book-resource_manager-GetBookResourceList";
-        let datas = {
-            book_id: this.TextBookId,
-        };
-        getContent(MethodNames, datas)
-            .then((res) => {
-                if(res.status==1){ 
-                    this.fileListVideo = res.video_list
-                    this.fileListAudio = res.audio_list
-                    this.fileListOtheraudio = res.otheraudio_list
-                    this.fileListDoc = res.doc_list
-                    this.fileListDoc.forEach(item => {
-                        if(item.file_size>1024*1024){
-                            if(item.file_size/1024/1024/1024>1){
-                                item.fileSize = (item.file_size/1024/1024/1024).toFixed(2)+'GB'
-                            }else{
-                                item.fileSize = (item.file_size/1024/1024).toFixed(2)+'MB'
-                            }
-                        }else{
-                            item.fileSize = (item.file_size/1024).toFixed(2)+'KB'
-                        }
-                    });
-                }   
-        })
+    getBookSource() {
+      let MethodNames = "book-resource_manager-GetBookResourceList";
+      let datas = {
+        book_id: this.TextBookId,
+      };
+      getContent(MethodNames, datas).then((res) => {
+        if (res.status == 1) {
+          this.fileListVideo = res.video_list;
+          this.fileListAudio = res.audio_list;
+          this.fileListOtheraudio = res.otheraudio_list;
+          this.fileListDoc = res.doc_list;
+          this.fileListDoc.forEach((item) => {
+            if (item.file_size > 1024 * 1024) {
+              if (item.file_size / 1024 / 1024 / 1024 > 1) {
+                item.fileSize =
+                  (item.file_size / 1024 / 1024 / 1024).toFixed(2) + "GB";
+              } else {
+                item.fileSize =
+                  (item.file_size / 1024 / 1024).toFixed(2) + "MB";
+              }
+            } else {
+              item.fileSize = (item.file_size / 1024).toFixed(2) + "KB";
+            }
+          });
+        }
+      });
     },
     // 章节树
-    getBookStructList () {
-        let MethodName = "book-book_manager-GetBookChapterStruct";
-        let data = {
-            'book_id': this.TextBookId
-        }
-        getContent(MethodName, data).then(
-            (res) => {
-                this.SelectFirstShow = res.nodes?true:false
-                this.SelectShow = res.nodes?'1':'2'
-            }
-        )
+    getBookStructList() {
+      let MethodName = "book-book_manager-GetBookChapterStruct";
+      let data = {
+        book_id: this.TextBookId,
+      };
+      getContent(MethodName, data).then((res) => {
+        this.SelectFirstShow = res.nodes ? true : false;
+        this.SelectShow = res.nodes ? "1" : "2";
+      });
     },
     // 打包下载全部音频
-    handleDownloadAudio(){
+    handleDownloadAudio() {
       let _this = this;
       _this.loading = true;
       // 拿到当前课的所有文件id
@@ -502,11 +555,11 @@ export default {
         FileID,
       };
       let arr = [];
-      this.fileListAudio.forEach(item => {
-        arr.push(item.file_id)
+      this.fileListAudio.forEach((item) => {
+        arr.push(item.file_id);
       });
-      this.fileListOtheraudio.forEach(item => {
-        arr.push(item.file_id)
+      this.fileListOtheraudio.forEach((item) => {
+        arr.push(item.file_id);
       });
       let MethodName = "file_store_manager-StartCreateFileCompressPack";
       getContentFile(MethodName, {
@@ -519,7 +572,7 @@ export default {
               file_compress_task_id: res.file_compress_task_id,
             })
               .then((res) => {
-                if (res.is_finish == 'true') {
+                if (res.is_finish == "true") {
                   data.FileID = res.compress_pack_file_id;
                   clearInterval(timer);
                   timer = null;
@@ -539,7 +592,7 @@ export default {
         });
     },
     // 下载单个文件
-    handleDownload(fileId){
+    handleDownload(fileId) {
       let userInfor = JSON.parse(getToken());
       let UserCode = "",
         UserType = "",
@@ -561,12 +614,30 @@ export default {
         `/GCLSFileServer/WebFileDownload?UserCode=${data.UserCode}&UserType=${data.UserType}&SessionID=${data.SessionID}&FileID=${data.FileID}`;
     },
     // 跳转预览PDF
-    handleJumpPdf(index){
-        this.$router.push("/TextbookDetailPdf?id=" + this.TextBookId+'&url='+Base64.encodeURL(this.fileListDoc[index].file_url)+'&invok_module='+this.$route.query.invok_module+'&fileId='+Base64.encodeURL(this.fileListDoc[index].file_id)+'&relativePath='+Base64.encodeURL(this.fileListDoc[index].file_relative_path));
+    handleJumpPdf(index) {
+      this.$router.push(
+        "/TextbookDetailPdf?id=" +
+          this.TextBookId +
+          "&url=" +
+          Base64.encodeURL(this.fileListDoc[index].file_url) +
+          "&invok_module=" +
+          this.$route.query.invok_module +
+          "&fileId=" +
+          Base64.encodeURL(this.fileListDoc[index].file_id) +
+          "&relativePath=" +
+          Base64.encodeURL(this.fileListDoc[index].file_relative_path)
+      );
     },
     // 跳转预览视频
-    handleJumpVideo(index){
-        this.$router.push("/TextbookDetailVideo?id=" + this.TextBookId+'&invok_module='+this.$route.query.invok_module+'&activeIndex='+Base64.encodeURL(index));
+    handleJumpVideo(index) {
+      this.$router.push(
+        "/TextbookDetailVideo?id=" +
+          this.TextBookId +
+          "&invok_module=" +
+          this.$route.query.invok_module +
+          "&activeIndex=" +
+          Base64.encodeURL(index)
+      );
     },
   },
   //生命周期 - 创建完成（可以访问当前this实例）
@@ -966,8 +1037,8 @@ export default {
       margin: 24px auto;
       width: 1240px;
       min-height: 710px;
-    //   background: #ffffff;
-    //   display: flex;
+      //   background: #ffffff;
+      //   display: flex;
       box-sizing: border-box;
       padding: 20px 0;
       div {
@@ -988,140 +1059,160 @@ export default {
     }
   }
   .resource-content {
-      width: 100%;
-      margin: 0 auto;
-      box-sizing: border-box;
-      padding: 26px 24px 8px;
-      background: #ffffff;
-      border-radius: 8px;
-      margin-bottom: 24px;
-      .video-title {
-        font-size: 24px;
-        line-height: 32px;
-        font-weight: 700;
-        margin-bottom: 40px;
-        margin-top: 0;
-      }
-      .video-list {
-        padding: 0 36px;
-        display: flex;
-        flex-wrap: wrap;
-        justify-content: flex-start;
-        list-style: none;
-        > li {
-          margin: 0 12px 16px 12px;
-          cursor: pointer;
-          .video-img {
-            // background: #ff9900;
-            position: relative;
+    width: 100%;
+    margin: 0 auto;
+    box-sizing: border-box;
+    padding: 26px 24px 8px;
+    background: #ffffff;
+    border-radius: 8px;
+    margin-bottom: 24px;
+    .video-title {
+      font-size: 24px;
+      line-height: 32px;
+      font-weight: 700;
+      margin-bottom: 40px;
+      margin-top: 0;
+    }
+    .video-list {
+      padding: 0 36px;
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: flex-start;
+      list-style: none;
+      > li {
+        margin: 0 12px 16px 12px;
+        cursor: pointer;
+        .video-img {
+          // background: #ff9900;
+          position: relative;
+          width: 256px;
+          height: 144px;
+          border-radius: 8px;
+          margin-bottom: 8px;
+          overflow: hidden;
+          .video-bg {
             width: 256px;
             height: 144px;
             border-radius: 8px;
-            margin-bottom: 8px;
-            overflow: hidden;
-            .video-bg {
-              width: 256px;
-              height: 144px;
-              border-radius: 8px;
-            }
-            .play-one {
-              position: absolute;
-              left: 108px;
-              top: 52px;
-              width: 40px;
-              height: 40px;
-              display: block;
-              margin: 0;
-            }
           }
-          .video-name {
-            font-size: 16px;
-            line-height: 150%;
-            color: #000000;
-            word-break: break-all;
-            display: -webkit-box;
-            -webkit-box-orient: vertical;
-            -webkit-line-clamp: 2;
-            text-overflow: ellipsis;
-            overflow: hidden;
+          .play-one {
+            position: absolute;
+            left: 108px;
+            top: 52px;
+            width: 40px;
+            height: 40px;
+            display: block;
+            margin: 0;
           }
         }
+        .video-name {
+          font-size: 16px;
+          line-height: 150%;
+          color: #000000;
+          word-break: break-all;
+          display: -webkit-box;
+          -webkit-box-orient: vertical;
+          -webkit-line-clamp: 2;
+          text-overflow: ellipsis;
+          overflow: hidden;
+        }
       }
-      .PDF-list{
-          width: 1096px;
-          margin: 0 auto;
-          padding-bottom: 90px;
-          li{
-              border: 1px solid rgba(0, 0, 0, 0.1);
-              box-sizing: border-box;
-              border-radius: 8px;
-              display: flex;
-              padding: 8px 12px;
-              align-items: center;
-              margin-bottom: 8px;
-              b{
-                  width: 24px;
-                  font-size: 16px;
-                  line-height: 24px;
-                  font-weight: normal;
-                  margin-right: 16px;
-              }
-              p{
-                  margin: 0;
-                  width: 920px;
-                  cursor: pointer;
-                  font-size: 16px;
-                  line-height: 24px;
-              }
-              span{
-                  width: 80px;
-                  text-align: right;
-              }
-              img{
-                  width: 16px;
-                  margin-left: 16px;
-                  cursor: pointer;
-              }
-          }
-      }
-      .audio-content {
-        padding: 0 28px;
-        margin: 0 auto 24px auto;
-        width: 1152px;
-        .audio-type {
-          margin-bottom: 10px;
+    }
+    .PDF-list {
+      width: 1096px;
+      margin: 0 auto;
+      padding-bottom: 90px;
+      li {
+        border: 1px solid rgba(0, 0, 0, 0.1);
+        box-sizing: border-box;
+        border-radius: 8px;
+        display: flex;
+        padding: 8px 12px;
+        align-items: center;
+        margin-bottom: 8px;
+        b {
+          width: 24px;
+          font-size: 16px;
+          line-height: 24px;
+          font-weight: normal;
+          margin-right: 16px;
+        }
+        p {
+          margin: 0;
+          width: 920px;
+          cursor: pointer;
+          font-size: 16px;
+          line-height: 24px;
+        }
+        span {
+          width: 80px;
+          text-align: right;
+        }
+        img {
+          width: 16px;
+          margin-left: 16px;
+          cursor: pointer;
         }
-        .download {
+      }
+    }
+    .audio-content {
+      padding: 0 28px;
+      margin: 0 auto 24px auto;
+      width: 1152px;
+      .audio-type {
+        margin-bottom: 10px;
+      }
+      .download {
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+        .book-open {
+          width: fit-content;
+          margin-right: 16px;
+          border: 1px solid rgba(0, 0, 0, 0.1);
+          box-sizing: border-box;
+          border-radius: 8px;
+          padding: 8px 16px;
           display: flex;
-          justify-content: flex-start;
           align-items: center;
-          .book-open {
-            width: fit-content;
-            margin-right: 16px;
-            border: 1px solid rgba(0, 0, 0, 0.1);
-            box-sizing: border-box;
-            border-radius: 8px;
-            padding: 8px 16px;
-            display: flex;
-            align-items: center;
-            cursor: pointer;
-            .book-open-text{
-                line-height: 24px;
-            }
+          cursor: pointer;
+          .book-open-text {
+            line-height: 24px;
           }
         }
       }
-      .audio-line-box {
-        width: 100%;
-        height: 56px;
-        box-sizing: border-box;
-        padding: 7px 12px;
-        background: #ffffff;
-        border: 1px solid rgba(0, 0, 0, 0.1);
-        box-sizing: border-box;
-        border-radius: 8px;
-      }
     }
+    .audio-line-box {
+      width: 100%;
+      height: 56px;
+      box-sizing: border-box;
+      padding: 7px 12px;
+      background: #ffffff;
+      border: 1px solid rgba(0, 0, 0, 0.1);
+      box-sizing: border-box;
+      border-radius: 8px;
+    }
+  }
+  .noview-msg-box {
+    width: 100%;
+    position: absolute;
+    top: 200px;
+    left: 0;
+    z-index: 9999;
+  }
+  .noview-msg {
+    width: fit-content;
+    margin: 0 auto;
+    padding: 8px;
+    background: #fcf5f5;
+    border: 1px solid #e65959;
+    box-sizing: border-box;
+    border-radius: 4px;
+    font-weight: 400;
+    font-size: 12px;
+    line-height: 14px;
+    color: #e55959;
+  }
 }
 </style>
 <style lang="scss">

vue.config.js

@@ -4,7 +4,7 @@ const defaultSettings = require('./src/settings.js')
 const CompressionPlugin = require('compression-webpack-plugin');
 
 function resolve(dir) {
-    return path.join(__dirname, dir)
+  return path.join(__dirname, dir)
 }
 
 
@@ -20,141 +20,141 @@ const webpack = require('webpack')
 
 // All configuration item explanations can be find in https://cli.vuejs.org/config/
 module.exports = {
-    /**
-     * You will need to set publicPath if you plan to deploy your site under a sub path,
-     * for example GitHub Pages. If you plan to deploy your site to https://foo.github.io/bar/,
-     * then publicPath should be set to "/bar/".
-     * In most cases please use '/' !!!
-     * Detail: https://cli.vuejs.org/config/#publicpath
-     */
-    publicPath: process.env.NODE_ENV === 'development' ? '/' : '/GCLS-Book',
-    outputDir: 'dist',
-    assetsDir: 'static',
-    lintOnSave: false,
-    productionSourceMap: false,
-    devServer: {
-        port: port,
-        open: true,
-        overlay: {
-            warnings: false,
-            errors: true
-        },
-        proxy: {
-            // change xxx-api/login => mock/login
-            // detail: https://cli.vuejs.org/config/#devserver-proxy
-            [process.env.VUE_APP_BASE_API]: {
-                // target: `http://gcls.utschool.cn/`,
-                target: `http://gcls.helxsoft.cn/`,
-                changeOrigin: true,
-                pathRewrite: {
-                    ['^' + process.env.VUE_APP_BASE_API]: ''
-                }
-            },
-            [process.env.VUE_APP_PDF]: {
-                // target: 'https://file-kf.helxsoft.cn/',
-                target: 'https://file-cs.helxsoft.cn/',
-                changeOrigin: true,
-                pathRewrite: {
-                    ['^' + process.env.VUE_APP_PDF]: ''
-                }
-            },
-            [process.env.VUE_APP_PDF_API]: {
-                target: `https://gcls.helxsoft.cn`,
-                changeOrigin: true,
-                pathRewrite: {
-                    ['^' + process.env.VUE_APP_PDF_API]: '/'
-                }
-            }
-        },
-        after: require('./mock/mock-server.js')
+  /**
+   * You will need to set publicPath if you plan to deploy your site under a sub path,
+   * for example GitHub Pages. If you plan to deploy your site to https://foo.github.io/bar/,
+   * then publicPath should be set to "/bar/".
+   * In most cases please use '/' !!!
+   * Detail: https://cli.vuejs.org/config/#publicpath
+   */
+  publicPath: process.env.NODE_ENV === 'development' ? '/' : '/GCLS-Book',
+  outputDir: 'dist',
+  assetsDir: 'static',
+  lintOnSave: false,
+  productionSourceMap: false,
+  devServer: {
+    port: port,
+    open: true,
+    overlay: {
+      warnings: false,
+      errors: true
     },
-    configureWebpack: {
-        // provide the app's title in webpack's name field, so that
-        // it can be accessed in index.html to inject the correct title.
-        name: name,
-        resolve: {
-            alias: {
-                '@': resolve('src')
-            }
-        },
-        plugins: [
-            new webpack.ProvidePlugin({
-                jQuery: 'jquery',
-                $: 'jquery'
-            }),
-            new CompressionPlugin({
-                algorithm: 'gzip', // 使用gzip压缩
-                test: /\.js$|\.html$|\.css$/, // 匹配文件名
-                minRatio: 0.8, // 压缩率小于0.8才会压缩
-                threshold: 10240, // 对超过10k的数据压缩
-                deleteOriginalAssets: false // 是否删除未压缩的源文件，谨慎设置，如果希望提供非gzip的资源，可不设置或者设置为false（比如删除打包后的gz后还可以加载到原始资源文件）
-            })
-        ]
+    proxy: {
+      // change xxx-api/login => mock/login
+      // detail: https://cli.vuejs.org/config/#devserver-proxy
+      [process.env.VUE_APP_BASE_API]: {
+        // target: `http://gcls.utschool.cn/`,
+        target: `https://gcls.helxsoft.cn/`,
+        changeOrigin: true,
+        pathRewrite: {
+          ['^' + process.env.VUE_APP_BASE_API]: ''
+        }
+      },
+      [process.env.VUE_APP_PDF]: {
+        // target: 'https://file-kf.helxsoft.cn/',
+        target: 'https://file-cs.helxsoft.cn/',
+        changeOrigin: true,
+        pathRewrite: {
+          ['^' + process.env.VUE_APP_PDF]: ''
+        }
+      },
+      [process.env.VUE_APP_PDF_API]: {
+        target: `https://gcls.helxsoft.cn`,
+        changeOrigin: true,
+        pathRewrite: {
+          ['^' + process.env.VUE_APP_PDF_API]: '/'
+        }
+      }
     },
-    chainWebpack(config) {
-        // it can improve the speed of the first screen, it is recommended to turn on preload
-        config.plugin('preload').tap(() => [{
-            rel: 'preload',
-            // to ignore runtime.js
-            // https://github.com/vuejs/vue-cli/blob/dev/packages/@vue/cli-service/lib/config/app.js#L171
-            fileBlacklist: [/\.map$/, /hot-update\.js$/, /runtime\..*\.js$/],
-            include: 'initial'
-        }])
+    after: require('./mock/mock-server.js')
+  },
+  configureWebpack: {
+    // provide the app's title in webpack's name field, so that
+    // it can be accessed in index.html to inject the correct title.
+    name: name,
+    resolve: {
+      alias: {
+        '@': resolve('src')
+      }
+    },
+    plugins: [
+      new webpack.ProvidePlugin({
+        jQuery: 'jquery',
+        $: 'jquery'
+      }),
+      new CompressionPlugin({
+        algorithm: 'gzip', // 使用gzip压缩
+        test: /\.js$|\.html$|\.css$/, // 匹配文件名
+        minRatio: 0.8, // 压缩率小于0.8才会压缩
+        threshold: 10240, // 对超过10k的数据压缩
+        deleteOriginalAssets: false // 是否删除未压缩的源文件，谨慎设置，如果希望提供非gzip的资源，可不设置或者设置为false（比如删除打包后的gz后还可以加载到原始资源文件）
+      })
+    ]
+  },
+  chainWebpack(config) {
+    // it can improve the speed of the first screen, it is recommended to turn on preload
+    config.plugin('preload').tap(() => [{
+      rel: 'preload',
+      // to ignore runtime.js
+      // https://github.com/vuejs/vue-cli/blob/dev/packages/@vue/cli-service/lib/config/app.js#L171
+      fileBlacklist: [/\.map$/, /hot-update\.js$/, /runtime\..*\.js$/],
+      include: 'initial'
+    }])
 
-        // when there are many pages, it will cause too many meaningless requests
-        config.plugins.delete('prefetch')
+    // when there are many pages, it will cause too many meaningless requests
+    config.plugins.delete('prefetch')
 
-        // set svg-sprite-loader
-        config.module
-            .rule('svg')
-            .exclude.add(resolve('src/icons'))
-            .end()
-        config.module
-            .rule('icons')
-            .test(/\.svg$/)
-            .include.add(resolve('src/icons'))
-            .end()
-            .use('svg-sprite-loader')
-            .loader('svg-sprite-loader')
-            .options({
-                symbolId: 'icon-[name]'
-            })
-            .end()
+    // set svg-sprite-loader
+    config.module
+      .rule('svg')
+      .exclude.add(resolve('src/icons'))
+      .end()
+    config.module
+      .rule('icons')
+      .test(/\.svg$/)
+      .include.add(resolve('src/icons'))
+      .end()
+      .use('svg-sprite-loader')
+      .loader('svg-sprite-loader')
+      .options({
+        symbolId: 'icon-[name]'
+      })
+      .end()
 
-        config.when(process.env.NODE_ENV !== 'development', config => {
-            config
-                .plugin('ScriptExtHtmlWebpackPlugin')
-                .after('html')
-                .use('script-ext-html-webpack-plugin', [{
-                    // `runtime` must same as runtimeChunk name. default is `runtime`
-                    inline: /runtime\..*\.js$/
-                }])
-                .end()
-            config.optimization.splitChunks({
-                    chunks: 'all',
-                    cacheGroups: {
-                        libs: {
-                            name: 'chunk-libs',
-                            test: /[\\/]node_modules[\\/]/,
-                            priority: 10,
-                            chunks: 'initial' // only package third parties that are initially dependent
-                        },
-                        elementUI: {
-                            name: 'chunk-elementUI', // split elementUI into a single package
-                            priority: 20, // the weight needs to be larger than libs and app or it will be packaged into libs or app
-                            test: /[\\/]node_modules[\\/]_?element-ui(.*)/ // in order to adapt to cnpm
-                        },
-                        commons: {
-                            name: 'chunk-commons',
-                            test: resolve('src/components'), // can customize your rules
-                            minChunks: 3, //  minimum common number
-                            priority: 5,
-                            reuseExistingChunk: true
-                        }
-                    }
-                })
-                // https:// webpack.js.org/configuration/optimization/#optimizationruntimechunk
-            config.optimization.runtimeChunk('single')
-        })
-    }
+    config.when(process.env.NODE_ENV !== 'development', config => {
+      config
+        .plugin('ScriptExtHtmlWebpackPlugin')
+        .after('html')
+        .use('script-ext-html-webpack-plugin', [{
+          // `runtime` must same as runtimeChunk name. default is `runtime`
+          inline: /runtime\..*\.js$/
+        }])
+        .end()
+      config.optimization.splitChunks({
+        chunks: 'all',
+        cacheGroups: {
+          libs: {
+            name: 'chunk-libs',
+            test: /[\\/]node_modules[\\/]/,
+            priority: 10,
+            chunks: 'initial' // only package third parties that are initially dependent
+          },
+          elementUI: {
+            name: 'chunk-elementUI', // split elementUI into a single package
+            priority: 20, // the weight needs to be larger than libs and app or it will be packaged into libs or app
+            test: /[\\/]node_modules[\\/]_?element-ui(.*)/ // in order to adapt to cnpm
+          },
+          commons: {
+            name: 'chunk-commons',
+            test: resolve('src/components'), // can customize your rules
+            minChunks: 3, //  minimum common number
+            priority: 5,
+            reuseExistingChunk: true
+          }
+        }
+      })
+      // https:// webpack.js.org/configuration/optimization/#optimizationruntimechunk
+      config.optimization.runtimeChunk('single')
+    })
+  }
 }