移动端教材详情

src/views/TextbookDetail.vue

@@ -1,16 +1,86 @@
 <template>
   <!-- 教材详情 -->
   <div class="TextbookDetail" v-if="TextbookData && isData">
-    <div class="nav">
+    <div class="nav" v-if="!isPhone">
       <!-- 登录导航 -->
       <Header />
       <div class="shade"></div>
     </div>
     <!-- 教材详情 744 -->
-    <HeaderOne text="123" :title="$t('Key744')" name="" />
+    <HeaderOne text="123" :title="$t('Key744')" name="" v-if="!isPhone" />
+
     <template v-if="TextbookData.is_deleted == 'false'">
       <template v-if="bookIsBuy == 'true' || TextbookData.publish_status == 1">
-        <div class="main" v-loading="loading">
+        <div v-if="isPhone" class="main main-phone">
+          <div class="header">教材详情</div>
+          <div class="main-phone-inner">
+            <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>
+                <div class="text-description" v-if="TextbookData.description">
+                  <p class="p3" :class="[showdecri ? '' : 'overflow']">
+                    {{ TextbookData.description }}
+                  </p>
+                  <a class="showdecri" @click="showdecri = !showdecri">{{
+                    !showdecri ? "...展开" : "收起"
+                  }}</a>
+                </div>
+                <div class="operation">
+                  <span
+                    class="price"
+                    v-if="
+                      TextbookData.price > 0 &&
+                      TextbookData.is_free_license == 'false'
+                    "
+                  >
+                    ￥<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>
+                </div>
+              </div>
+            </div>
+            <BookView
+              :bookId="TextBookId"
+              @bookdetailShow="bookdetailShow"
+              :bookIsBuy="bookIsBuy"
+              :bookFontSize="TextbookData.font_size"
+              :pictureUrl="TextbookData.picture_url"
+              :fromPhone="true"
+            ></BookView>
+          </div>
+        </div>
+        <div class="main" v-loading="loading" v-else>
           <div class="bookDetail" v-if="detailSHow">
             <div class="rightUp">
               <span>HOT</span>
@@ -384,6 +454,7 @@ export default {
       fileListOtheraudio: [],
       fileListDoc: [], // 教材资源视频数组
       showdecri: false, // 展开描述
+      isPhone: false, // 是否是移动端打开
     };
   },
   //计算属性 类似于data概念
@@ -469,8 +540,10 @@ export default {
     getPurchase() {
       if (this.bookIsBuy == "true") {
         this.$router.push(
-          "/courseview?bookId=" + this.TextBookId + "&showCourse=true&invok_module=" +
-          this.$route.query.invok_module
+          "/courseview?bookId=" +
+            this.TextBookId +
+            "&showCourse=true&invok_module=" +
+            this.$route.query.invok_module
         );
       } else {
         this.NopymentShow = true;
@@ -670,6 +743,8 @@ export default {
   },
   //生命周期 - 创建完成（可以访问当前this实例）
   async created() {
+    const regExp = /Android|webOS|iPhone|BlackBerry|IEMobile|Opera Mini/i;
+    this.isPhone = regExp.test(navigator.userAgent);
     await updateWordPack({
       word_key_list: [
         "Key9",
@@ -1274,6 +1349,58 @@ export default {
     line-height: 14px;
     color: #e55959;
   }
+  .main-phone {
+    padding: 0;
+    background: #fff;
+    .header {
+      font-size: 24px;
+      font-weight: 400;
+      line-height: 60px;
+      text-align: center;
+      color: #fff;
+      background: rgba(240, 49, 49, 1);
+      width: 100%;
+      position: fixed;
+      left: 0;
+      top: 0;
+      z-index: 1;
+    }
+    .main-phone-inner {
+      padding: 80px 20px 20px;
+    }
+    .bookDetail {
+      width: 100%;
+      margin-bottom: 20px;
+      display: block;
+      padding: 20px;
+      .rightUp {
+        width: 54px;
+        height: 54px;
+        span {
+          left: 20px;
+          top: 10px;
+        }
+      }
+      .img {
+        margin: 0 auto;
+        text-align: center;
+        img {
+          width: 241px;
+          height: 326px;
+        }
+      }
+      .text {
+        margin-top: 20px;
+        width: 100%;
+        .p1 {
+          font-size: 32px;
+        }
+        > :not(.p1) {
+          margin-top: 10px;
+        }
+      }
+    }
+  }
 }
 </style>
 <style lang="scss">
@@ -1285,4 +1412,4 @@ export default {
     padding: 20px 32px 10px;
   }
 }
-</style>
+</style>

src/views/bookView.vue

@@ -1,9 +1,15 @@
 <template>
   <div class="container">
-    <div class="book-content-inner">
+    <div
+      class="book-content-inner"
+      :style="{ height: fromPhone ? 'auto' : '' }"
+    >
       <div
         id="content-tree"
-        :class="[fullTree ? 'content-tree-full' : 'content-tree']"
+        :class="[
+          fullTree ? 'content-tree-full' : 'content-tree',
+          fromPhone ? 'content-tree-fromPhone' : '',
+        ]"
       >
         <h2 class="catelog"><!-- 目录 -->{{ $t("Key612") }}</h2>
         <div style="padding-left: 8px">
@@ -16,108 +22,115 @@
           />
         </div>
       </div>
-      <el-image :src="pictureUrl" fit="scale-down" class="img_url" v-if="!chapterId&&pictureUrl">
+      <template v-if="!fromPhone">
+        <el-image
+          :src="pictureUrl"
+          fit="scale-down"
+          class="img_url"
+          v-if="!chapterId && pictureUrl"
+        >
           <div slot="placeholder" class="image-slot">
             <img src="../assets/common/icon-imgloading.png" />
           </div>
         </el-image>
-      <div
-        id="data-screen"
-        class="inner"
-        v-if="chapterFree == 'true' || bookIsBuy == 'true'"
-      >
-        <!-- 显示答案按钮 -->
-        <!-- <a v-if="chapterId" :class="['answerShow',isAnswerShow?'answerShowTrue':'']" @click="handleAnswerShow">显示答案</a> -->
-        <!-- <a class="edit-btn" @click="handleEdit">编辑</a> -->
-        <div v-if="chapterId" class="title-box">
-          <img
-            v-if="!treeFlag"
-            src="../assets/common/icon-view-back.png"
-            @click="treeShow"
-          />
-          <img
-            v-if="!treeFlag"
-            :src="
-              fullTree
-                ? require('../assets/common/icon-treelist-gray.png')
-                : require('../assets/common/icon-treelist.png')
-            "
-            @click="chooseCourseware"
-          />
-          <!-- <h2 class="title">{{ chapterName }}</h2> -->
-          <!-- <el-switch
+        <div
+          id="data-screen"
+          class="inner"
+          v-if="chapterFree == 'true' || bookIsBuy == 'true'"
+        >
+          <!-- 显示答案按钮 -->
+          <!-- <a v-if="chapterId" :class="['answerShow',isAnswerShow?'answerShowTrue':'']" @click="handleAnswerShow">显示答案</a> -->
+          <!-- <a class="edit-btn" @click="handleEdit">编辑</a> -->
+          <div v-if="chapterId" class="title-box">
+            <img
+              v-if="!treeFlag"
+              src="../assets/common/icon-view-back.png"
+              @click="treeShow"
+            />
+            <img
+              v-if="!treeFlag"
+              :src="
+                fullTree
+                  ? require('../assets/common/icon-treelist-gray.png')
+                  : require('../assets/common/icon-treelist.png')
+              "
+              @click="chooseCourseware"
+            />
+            <!-- <h2 class="title">{{ chapterName }}</h2> -->
+            <!-- <el-switch
             v-if="!treeFlag"
             v-model="switchvalue"
             active-color="#FF9900"
             active-text
             inactive-text="生词模式"
           /> -->
+          </div>
+          <template v-if="category == 'OC' || !category">
+            <Preview
+              v-if="chapterId && context"
+              ref="previewAnswer"
+              :context="context"
+              :bookAnswerContent="bookAnswerContent"
+              bookclientwidth="900"
+              :TaskModel="TaskModel"
+              @handleBookUserAnswer="handleBookUserAnswer"
+            />
+          </template>
+          <template v-if="category == 'NPC'">
+            <Booknpc
+              v-if="chapterId && context"
+              ref="previewAnswer"
+              :context="context"
+              :currentTreeID="chapterId"
+              :FatherTreeData="FatherTreeData"
+              :change-id="changeId"
+              :themeColor="themeColor"
+              :isShowTitle="true"
+              :isAnswerItemShow="isAnswerItemShow"
+            />
+          </template>
+          <template v-if="category == 'NNPE'">
+            <Booknnpe
+              v-if="chapterId && context"
+              ref="previewAnswer"
+              :context="context"
+              :currentTreeID="chapterId"
+              :FatherTreeData="FatherTreeData"
+              :change-id="changeId"
+              :themeColor="themeColor"
+              :isShowTitle="true"
+              :isAnswerItemShow="true"
+            />
+          </template>
+          <template v-if="category == 'RLC'">
+            <Bookrlc
+              v-if="chapterId && context"
+              ref="previewAnswer"
+              :context="context"
+              :currentTreeID="chapterId"
+              :FatherTreeData="FatherTreeData"
+              :change-id="changeId"
+              :themeColor="themeColor"
+              :isShowTitle="true"
+              :bookFontSize="bookFontSize"
+              :isAnswerItemShow="isAnswerItemShow"
+            />
+          </template>
+          <template v-if="category == 'NEW'">
+            <BookNew
+              v-if="chapterId && context"
+              ref="book"
+              :context="context"
+              :currentTreeID="chapterId"
+            />
+          </template>
         </div>
-        <template v-if="category == 'OC' || !category">
-          <Preview
-            v-if="chapterId && context"
-            ref="previewAnswer"
-            :context="context"
-            :bookAnswerContent="bookAnswerContent"
-            bookclientwidth="900"
-            :TaskModel="TaskModel"
-            @handleBookUserAnswer="handleBookUserAnswer"
-          />
-        </template>
-        <template v-if="category == 'NPC'">
-          <Booknpc
-            v-if="chapterId && context"
-            ref="previewAnswer"
-            :context="context"
-            :currentTreeID="chapterId"
-            :FatherTreeData="FatherTreeData"
-            :change-id="changeId"
-            :themeColor="themeColor"
-            :isShowTitle="true"
-            :isAnswerItemShow="isAnswerItemShow"
-          />
-        </template>
-        <template v-if="category == 'NNPE'">
-          <Booknnpe
-            v-if="chapterId && context"
-            ref="previewAnswer"
-            :context="context"
-            :currentTreeID="chapterId"
-            :FatherTreeData="FatherTreeData"
-            :change-id="changeId"
-            :themeColor="themeColor"
-            :isShowTitle="true"
-            :isAnswerItemShow="true"
-          />
-        </template>
-        <template v-if="category == 'RLC'">
-          <Bookrlc
-            v-if="chapterId && context"
-            ref="previewAnswer"
-            :context="context"
-            :currentTreeID="chapterId"
-            :FatherTreeData="FatherTreeData"
-            :change-id="changeId"
-            :themeColor="themeColor"
-            :isShowTitle="true"
-            :bookFontSize="bookFontSize"
-            :isAnswerItemShow="isAnswerItemShow"
-          />
-        </template>
-        <template v-if="category == 'NEW'">
-          <BookNew
-            v-if="chapterId && context"
-            ref="book"
-            :context="context"
-            :currentTreeID="chapterId"
-          />
-        </template>
-      </div>
-      <a
-        v-if="chapterId && treeFlag"
-        class="screen-full"
-        @click="fullScreen()"
-      />
+        <a
+          v-if="chapterId && treeFlag"
+          class="screen-full"
+          @click="fullScreen()"
+        />
+      </template>
     </div>
     <!-- <Preview :context="context" :queIndex="queIndex" /> -->
   </div>
@@ -136,7 +149,7 @@ export default {
     TreeView,
     Preview,
   },
-  props: ["bookId", "bookIsBuy","bookFontSize","pictureUrl"],
+  props: ["bookId", "bookIsBuy", "bookFontSize", "pictureUrl", "fromPhone"],
   data() {
     return {
       chapterId: "",
@@ -162,10 +175,13 @@ export default {
     // const _this = this
     // _this.bookId = this.$route.query.bookId
   },
-  created(){
-    const _this = this
+  created() {
+    const _this = this;
     let userInfor = JSON.parse(getToken());
-    if (userInfor && (userInfor.user_type == "TEACHER"||userInfor.user_type == "INNER")) {
+    if (
+      userInfor &&
+      (userInfor.user_type == "TEACHER" || userInfor.user_type == "INNER")
+    ) {
       _this.isAnswerItemShow = true;
     } else {
       _this.isAnswerItemShow = false;
@@ -315,6 +331,20 @@ export default {
       box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.25);
       border-radius: 4px;
     }
+    .content-tree-fromPhone {
+      width: 100%;
+      border-right: none;
+      max-height: none;
+      background: rgba(249, 249, 249, 1);
+      border-radius: 16px;
+      padding: 10px;
+      .catelog {
+        padding: 0;
+        margin: 5px 20px;
+        font-size: 16px;
+        border-bottom: 1px solid rgba(153, 153, 153, 1);
+      }
+    }
     .inner {
       width: 1000px;
       max-height: 700px;
@@ -466,9 +496,9 @@ export default {
     }
   }
 }
-.img_url{
-    width: 1000px;
-    height: 700px;
+.img_url {
+  width: 1000px;
+  height: 700px;
 }
 </style>
 <style lang="scss">
@@ -487,4 +517,9 @@ export default {
     font-size: 16px;
   }
 }
+.content-tree-fromPhone {
+  .el-tree {
+    background: transparent;
+  }
+}
 </style>