调整移动端教材详情页

package.json

@@ -17,7 +17,7 @@
     "@tinymce/tinymce-vue": "^3.2.8",
     "awe-dnd": "^0.3.4",
     "axios": "0.18.1",
-    "book-ui": "file:../GCLS-Book-UI/book-ui-0.3.129.tgz",
+    "book-ui": "file:../GCLS-Book-UI/book-ui-0.3.130.tgz",
     "cnchar": "^3.0.1",
     "cnchar-all": "^3.0.1",
     "cnchar-order": "^3.0.1",

src/views/TextbookDetail.vue

@@ -12,9 +12,23 @@
     <template v-if="TextbookData.is_deleted == 'false'">
       <template v-if="bookIsBuy == 'true' || TextbookData.publish_status == 1">
         <div v-if="isPhone" class="main main-phone">
-          <div class="header">教材详情</div>
+          <div
+            class="header"
+            :style="{
+              background: titleBg[TextbookData.theme_color]
+                ? titleBg[TextbookData.theme_color]
+                : TextbookData.theme_color,
+            }"
+          >
+            {{ isFirstStep ? "教材详情" : "教材目录"
+            }}<i
+              class="el-icon-close close-phone"
+              v-if="!isFirstStep"
+              @click="isFirstStep = true"
+            ></i>
+          </div>
           <div class="main-phone-inner">
-            <div class="bookDetail" v-if="detailSHow">
+            <div class="bookDetail" v-if="detailSHow && isFirstStep">
               <div class="rightUp">
                 <span>HOT</span>
               </div>
@@ -23,9 +37,24 @@
               </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">
+
+                <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
+                  class="text-description"
+                  v-if="TextbookData.description"
+                  style="margin-bottom: 30px"
+                >
                   <p class="p3" :class="[showdecri ? '' : 'overflow']">
                     {{ TextbookData.description }}
                   </p>
@@ -33,40 +62,36 @@
                     !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">
+                <div style="display: flex; justify-content: space-between">
+                  <div style="flex: 1">
+                    <p class="p2">{{ TextbookData.org_name }}</p>
+                    <p class="p2">{{ TextbookData.author }}</p>
+                  </div>
+                  <div class="operation" style="margin-top: 0">
+                    <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>
             </div>
@@ -77,6 +102,7 @@
               :bookFontSize="TextbookData.font_size"
               :pictureUrl="TextbookData.picture_url"
               :fromPhone="true"
+              v-if="!isFirstStep"
             ></BookView>
           </div>
         </div>
@@ -455,6 +481,20 @@ export default {
       fileListDoc: [], // 教材资源视频数组
       showdecri: false, // 展开描述
       isPhone: false, // 是否是移动端打开
+      isFirstStep: true, // 是否是第一步
+      titleBg: {
+        red: "#e35454",
+        green: "#24b99e",
+        brown: "#bd8865",
+        lightBlue: "#9DCAFF",
+        lightGreen: "#9CE08B",
+        pink: "#EFB5C3",
+        yellow: "#F2D280",
+        purple: "#A680BC",
+        greyGreen: "#6A97A6",
+        beanPaste: "#CB9A86",
+        beanGreen: "#83AA69",
+      },
     };
   },
   //计算属性 类似于data概念
@@ -538,15 +578,19 @@ export default {
     },
     // 购买
     getPurchase() {
-      if (this.bookIsBuy == "true") {
-        this.$router.push(
-          "/courseview?bookId=" +
-            this.TextBookId +
-            "&showCourse=true&invok_module=" +
-            this.$route.query.invok_module
-        );
+      if (this.isFirstStep) {
+        this.isFirstStep = false;
       } else {
-        this.NopymentShow = true;
+        if (this.bookIsBuy == "true") {
+          this.$router.push(
+            "/courseview?bookId=" +
+              this.TextBookId +
+              "&showCourse=true&invok_module=" +
+              this.$route.query.invok_module
+          );
+        } else {
+          this.NopymentShow = true;
+        }
       }
     },
     bookdetailShow(flag) {
@@ -1364,6 +1408,12 @@ export default {
       left: 0;
       top: 0;
       z-index: 1;
+      .close-phone {
+        position: absolute;
+        right: 12px;
+        bottom: 7px;
+        z-index: 1;
+      }
     }
     .main-phone-inner {
       padding: 70px 20px 20px;
@@ -1399,6 +1449,9 @@ export default {
           margin-top: 10px;
         }
       }
+      .enshrine {
+        margin-left: 0 !important;
+      }
     }
   }
 }