免费学习的提示及跳转

src/components/question/free-tips.vue

+<template>
+  <div class="free-tips-wrapper">
+    <div class="left">
+      <img src="../../images/question/warning-h.png" alt />
+      <span class="text">免费练习{{total}}题，解锁全部题目需完成购买</span>
+    </div>
+    <img class="right" @click="buyCard" src="../../images/question/arror-right.png" alt />
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    total: {
+      type: String | Number,
+      default: 5
+    }
+  },
+  methods: {
+    buyCard() {
+      this.$emit("buyCard");
+    }
+  },
+}
+</script>
+<style lang="less" scoped>
+.free-tips-wrapper {
+  width: 100%;
+  position: fixed;
+  left: 0;
+  bottom: 60px;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  height: 40px;
+  line-clamp: 40px;
+  padding-left: 15px;
+  background: #FEFAF5;
+  .left {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    & > img {
+      width: 13px;
+      height: 13px;
+      margin-right: 4px;
+    }
+    & > span {
+      font-size: 13px;
+      color: #E6A23C;
+    }
+  }
+  .right {
+    padding: 10px 15px;
+    width: 15px;
+    height: 15px;
+  }
+}
+</style>
\ No newline at end of file

src/views/question-detail.vue

@@ -9,7 +9,7 @@
       <question-content ref="questionContentRef" v-show="questionList.length"></question-content>
       <no-content v-show="!questionList.length" :listType="commitKind"></no-content>
     </article>
-    <!-- <free-tips ></free-tips> -->
+    <free-tips v-show="showFreeTips" :total="titleConfig.totalCount" @buyCard="buyCard"></free-tips>
     <question-footer v-show="questionList.length" @statistics="statistics" @scrollTop="scrollTop" @pageQuestion="pageQuestion"></question-footer>
     <ExperienceDialog
       :showDialog="experienceDialog"
@@ -37,7 +37,7 @@
     ></CourseDialog>
 
     <Loading v-show="showLoading" />
-    <div class="pt-70"></div>
+    <div class="pt-70" :class="{'pt-110': showFreeTips}"></div>
   </section>
 </template>
 <script>
@@ -46,6 +46,7 @@ import QuestionContent from "@/components/question/question-content";
 import QuestionFooter from "@/components/question/question-footer";
 import noContent from "@/components/question/no-content";
 import ExperienceDialog from "@/components/question/experience-dialog";
+import FreeTips from "@/components/question/free-tips";
 import Loading from "@/components/common/common-loading";
 import CourseDialog from "@/components/course/course-dialog";
 import ChangeCard from "@/components/cme/change-card";
@@ -64,7 +65,8 @@ export default {
     ExperienceDialog,
     Loading,
     CourseDialog,
-    ChangeCard
+    ChangeCard,
+    FreeTips
   },
   data() {
     return {
@@ -118,6 +120,9 @@ export default {
       return (
         this.experienceDialog || this.showChangeCard || this.showBindCardTips
       );
+    },
+    showFreeTips() {
+      return this.commonConfig.freeFlag == 1 && this.commitKind == 3 && !this.titleConfig.bindStatus
     }
   },
   created() {
@@ -189,7 +194,7 @@ export default {
     statistics() {
       // 如果是收费的题库（不是错题集或收载），并且没有绑定卡
       console.log(this.commonConfig.freeFlag, this.commitKind == 3, !this.titleConfig.bindStatus);
-      if(!(this.commonConfig.freeFlag == 1 && this.commitKind == 3 && !this.titleConfig.bindStatus)) {
+      if(!this.showFreeTips) {
         Toast("已是最后一题");
         return;
       }
@@ -512,5 +517,8 @@ export default {
   .pt-70 {
     padding-bottom: 70px;
   }
+  .pt-110 {
+    padding-bottom: 110px;
+  }
 }
 </style>
\ No newline at end of file