激活与购买流程

src/components/question/experience-dialog.vue

+<template>
+  <section class="experience-dialog-wrapper">
+    <van-overlay :show="experienceDialog" class="v-overlay-q">
+      <section class="loading-wrapper" >
+        <article class="content">
+          <img class="img-tips" src="../../images/question/note.png" alt="">
+          <p class="tips">您已完成本次免费练习体验</p>
+          <p class="status">对<span class="cm rn">{{rightNum}}</span>题，错<span class="cm en">{{errorNum}}</span>题，正确率<span class="cm rate">{{rate}}%</span></p>
+          <p class="guide-tips">想体验完整题目，请先激活或购买题库</p>
+          <div class="btn-wrapper">
+            <span class="plain" @click="activeCard">去激活</span>
+            <span class="primary" @click="buyCard">去购买</span>
+          </div>
+        </article>
+        <img class="bt-close" src="../../images/question/close.png" alt="">
+      </section>
+    </van-overlay>
+  </section>
+</template>
+<script>
+export default {
+  props: {
+    experienceDialog: {
+      type: Boolean,
+      default: true,
+    },
+    rightNum: {
+      type: Number | String,
+      default: 0,
+    },
+    errorNum: {
+      type: Number | String,
+      default: 0,
+    },
+    rate: {
+      type: Number | String,
+      default: 0,
+    }
+  },
+
+  methods: {
+    activeCard() {
+      this.$emit('activeCard');
+    },
+    buyCard() {
+      this.$emit('buyCard');
+    }
+  },
+}
+</script>
+<style lang="less" scoped>
+.experience-dialog-wrapper {
+  .v-overlay-q {
+    .loading-wrapper {
+      text-align: center;
+      position: fixed;
+      top: 50%;
+      left: 50%;
+      width: 300px;
+      -webkit-transform: translateX(-50%) translateY(-50%);
+      transform: translateX(-50%) translateY(-50%);
+      .content {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        font-size: 14px;
+        padding: 20px 15px 30px;
+        background-color: #ffffff;
+        border-radius: 3px;
+        .img-tips {
+          width: 80px;
+          height: 80px;
+        }
+        .tips {
+          margin: 10px 0;
+          font-size: 16px;
+          font-weight: 700;
+          color: #373839;
+        }
+        .status {
+          font-size: 13px;
+          color: #676869;
+          .cm {
+            font-size: 18px;
+            font-weight: 700;
+            padding: 0 4px;
+          }
+          .rn {
+            color: #373839;
+          }
+          .en {
+            color: #ED3131;
+          }
+          .rate {
+            color: #449284;           
+          }
+        }
+        .guide-tips {
+          margin: 4px 0 30px;
+          font-size: 12px;
+          color: #979899;
+        }
+        .btn-wrapper {
+          display: flex;
+          flex-direction: row;
+          align-content: center;
+          & > span {
+            width: 115px;
+            height: 40px;
+            line-height: 40px;
+            font-size: 16px;
+            font-weight: 700;
+            border-radius: 20px;
+            &.plain {
+              border: 1px solid #449284;
+              color: #449284;
+              margin-right: 10px;
+            }
+            &.primary {
+              color: #FFFFFF;
+              background: #449284;
+            }
+          }
+        }
+      }
+      .bt-close {
+        margin-top: 20px;
+        width: 30px;
+        height: 30px;
+      }
+    }
+  }
+}
+</style>
\ No newline at end of file

src/components/question/question-content.vue

@@ -12,6 +12,7 @@
     <article class="title-wrapper">
       <span class="type" :class="{'multi': currentQuestion.type == 2}"><span>{{currentQuestion.type == 1 ? "单选题" : "多选题"}}</span></span>
       <span class="content">医师接到“危急值”报告后做法错误的？</span>
+      <img src="https://files.yunqueyi.com/image/png/protal/project/20200702161856970.png">
     </article>
     <article class="select-wrapper">
       <div class="item" v-for="(item, index) in currentQuestion.answerList" :key="index">
@@ -90,7 +91,7 @@ export default {
     }
   }
   .title-wrapper {
-    padding: 20px 15px;
+    padding: 20px 15px 15px;
     .type {
       position: relative;
       top: 3px;
@@ -119,6 +120,10 @@ export default {
       font-weight: 700;
       color: #333333;
     }
+    & > img {
+      margin-top: 15px;
+      width: 100%;
+    }
   }
   .select-wrapper {
     padding: 0 15px;

src/utils/mixins.js

@@ -228,7 +228,25 @@ module.exports = {
                     noLoggedCallback && noLoggedCallback()
                 }
             });
-        }
+        },
+
+        // 通用token校验
+        commonNativeCheckToken(noLoggedCallback) {
+            let param = {
+                token: this.token,
+                setEntry: true
+            };
+            this.GET("campaign/admin/task/checkToken", param).then(res => {
+                if (res.code !== "000000") {
+                    this.goLogin();
+                } else {
+                    noLoggedCallback && noLoggedCallback()
+                }
+            });
+        },
+
+        // rocNative.gotoLogin();
+
 
     }
 }

src/views/merge-detail.vue

@@ -284,9 +284,9 @@ export default {
         cardNo: "",
         cardKey: "",
         cardType: 3,
-        orderId: 0
+        orderId: 0,
       },
-      subContent: ``,
+      subContent: "",
     };
   },
   components: {

src/views/question-detail.vue

 <template>
-  <div class="question-detail-wrapper">
+  <section class="question-detail-wrapper" :style="{'position': needFixed ? 'fixed': 'static'}">
     <question-header :title="currentTitle" :order="currentQuestion.order" :total="questionTotal"></question-header>
-    <section class="body">
+    <article class="body">
       <question-content v-show="questionList.length"></question-content>
       <no-content v-show="!questionList.length" :type="listType"></no-content>
-    </section>
+    </article>
     <question-footer></question-footer>
+    <ExperienceDialog :experienceDialog="experienceDialog" @activeCard="activeCard" @buyCard="buyCard"></ExperienceDialog>
+
+    <!-- 去激活 -->
+    <ChangeCard
+      :changeErrorMsg="changeCardErrorMsg"
+      :isShow="showChangeCard"
+      @cancle="cancleChangeCard"
+      @confirm="beforeChangeCardAction"
+    ></ChangeCard>
+
+    <!-- 主动提示：激活并去学习 -->
+    <CourseDialog
+      :subContent="subContent"
+      confirmBtnText="激活并去学习"
+      needSubContent
+      :isShowDialog="showBindCardTips"
+      @handlerAction="handlerAction"
+    ></CourseDialog>
+
+    <Loading v-show="showLoading" />    
     <div class="pt-60"></div>
-  </div>
+  </section>
 </template>
 <script>
 import QuestionHeader from "@/components/question/question-header";
 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 Loading from "@/components/common/common-loading";
+import CourseDialog from "@/components/course/course-dialog";
+import ChangeCard from "@/components/cme/change-card";
 
 import { mapGetters, mapActions } from 'vuex';
 
@@ -23,31 +47,239 @@ export default {
     QuestionHeader,
     QuestionContent,
     QuestionFooter,
-    noContent
+    noContent,
+    ExperienceDialog,
+    Loading,
+    CourseDialog,
+    ChangeCard,
   },
   data() {
     return {
+      // token: "", // mixns里有
       currentTitle: "试题集",
-      listType: 1,   // 1: 正常做题; 2: 免费体验; 3: 错题集; 4: 收藏夹
-      // questionList: [1],
+      listType: 1,   // 1: 正常做题; 2: 免费体验; 3: 错题集; 4: 收藏夹,
+      experienceDialog: true, // 体验弹框
+
+      showChangeCard: false, //是否展示激活弹框,
+      changeCardErrorMsg: "",
+      showBindCardTips: false,
+      cmeCardModels: {
+        cardNo: "",
+        cardKey: "",
+        cardType: 3,
+        orderId: 0
+      },
+      subContent: "",
+      showLoading: false,
+      cardInfo: {
+        id: 0
+      },
     }
   },
   computed: {
-    ...mapGetters(['questionList', 'currentQuestion', 'currentQuestionIndex', 'questionTotal'])
+    ...mapGetters(['questionList', 'currentQuestion', 'currentQuestionIndex', 'questionTotal']),
+    needFixed() {
+      return this.experienceDialog || this.showChangeCard || this.showBindCardTips;
+    },
   },
   created() {
+    let _this = this;
     this.listType = this.$route.query.listType || 1;
     this.currentTitle = this.$route.query.currentTitle || this.currentTitle;
     this.init();
+
+    window.__getUserInfoForQD = function(param) {
+      _this.token = param.userToken;
+      _this.setUserInfo(param);
+      _this.getQuestionList();
+      // _this.checkToken();
+      // _this.getProjectInfoById();
+    };
+    if(__isWeb) {
+      _this.getQuestionList();
+    } else {
+      _this.getUserInfo();
+    }
+
+    window.__refresh = function() {
+      // _this.isInfresh = true;
+      _this.getUserInfo();
+    };
+
   },
   methods: {
-    ...mapActions(['getQuestionList']),
+    ...mapActions(["setUserInfo", "getQuestionList"]),
     init() {
       if(this.listType >= 2 && this.listType <= 4) {
         this.currentTitle = titleArray[this.listType];
       }
-      this.getQuestionList();
-    }
+    },
+
+    //获取用户信息
+    getUserInfo() {
+      rocNative.getUserInfo({
+        __funcName: "__getUserInfoForQD"
+      });
+    },
+
+    // 打开激活弹框
+    activeCard() {
+      this.experienceDialog = false;
+      this.showChangeCard = true;
+    },
+
+    buyCard() {
+      !__isWeb && this.confirm()
+    },
+
+    // 跳转到原生的购买页面
+    confirm() {
+      // this.$sendBuriedData({
+      //   component_tag: `882#88203`
+      // });
+
+      let appVersion = this.userInfo.appVersion || "";
+      let appVersionNum = appVersion.split(".").join("");
+      if (appVersionNum < 344) {
+        Toast("请您下载新版本App");
+        return;
+      }
+
+      // 直接传入职称考项目ID(projectId)
+      let projectId = this.project.projectId;
+      let pageUrl = getWebPageUrl(
+        `/profexam/#/index?id=${projectId}&projectName=${this.project.projectName}&profexamProjectId=${projectId}`
+      );
+      let paramList = [
+        {
+          key: "className",
+          value:
+            "com.picahealth.yunque.activitys.studycard.StudyCardDetailActivity###PicaDo.LearningCardVC",
+          type: 4,
+          seqNo: 1
+        },
+        {
+          key: "goodId",
+          value: this.cardInfo.id,
+          type: 4,
+          seqNo: 1
+        },
+        {
+          key: "courseUrl",
+          value: encodeURIComponent(pageUrl),
+          // value: projectId,
+          type: 4,
+          seqNo: 1
+        }
+      ];
+      this.$refs.tcPlayerRef && this.$refs.tcPlayerRef.pause();
+      rocNative.dispatchEventByModuleCode({
+        modeCode: "M200",
+        jsonString: paramList
+      });
+    },
+
+
+    // 关闭激活弹框
+    cancleChangeCard() {
+      this.showChangeCard = false;
+    },
+
+    // 激活前
+    beforeChangeCardAction(cardKey, isInTips) {
+      this.commonCheckToken(() => {
+        this.changeCardAction(cardKey, isInTips);
+      });
+    },
+
+    // 处理提示信息框
+    handlerAction(type) {
+      if(type == 1) {
+        // this.$sendBuriedData({
+        //   component_tag: `882#88219`
+        // });
+        this.showBindCardTips = false;
+      } else {
+        // this.$sendBuriedData({
+        //   component_tag: `882#88218`
+        // });
+        this.beforeChangeCardAction(this.cmeCardModels.cardKey, true)
+      }
+    },
+
+    // 激活Action  返回值：0绑定失败，1绑定成功
+    changeCardAction(cardKey, isInTips) {
+      let _this = this;
+      let param = {
+        cardKey: cardKey,
+        cardType: 3,
+        channel: 3,
+        portalProjectId: this.projectId,
+        setEntry: true
+      };
+      _this.changeCardErrorMsg = "";
+      this.POST("cme/projectCard/bind", param)
+        .then(res => {
+          isInTips && (_this.showBindCardTips = false);
+          console.log('in res', res, isInTips);
+          if (res.code == "000000") {
+            if (!res.data) {
+              if(isInTips) {
+                Toast(res.message);            
+              } else {
+                _this.changeCardErrorMsg = "请输入正确的激活码";
+              }
+            } else {
+              _this.showChangeCard = false;
+              Toast("激活成功，开始学习");
+              _this.getProjectInfoById();
+            }
+          } else {
+            Toast(res.message);            
+          }
+        })
+        .catch(e => {
+          console.log('in catch', isInTips);
+          if(isInTips) {
+            Toast("无效的激活码");
+            _this.showBindCardTips = false;
+          } else {
+            _this.changeCardErrorMsg = "请输入正确的激活码";
+          }
+        });
+    },
+
+    // 查询是否买过类似的卡，但还没有绑定
+    hasNoUsedCard() {
+      let param = {
+        setEntry: true
+      };
+      this.GET(`cme/projectCard/queryNoUsedCard/3`, param).then(({ data }) => {
+        this.hasNoUsedCard = data.hasNoUsedCard;
+        if (data.hasNoUsedCard == 1) {
+          this.cmeCardModels = data.cmeCardModels[0] || {};
+          this.showBindCardTips = true;
+        }
+      });
+    },
+
+    // 根据省ID，获取学习卡信息
+    getCardInfoByProvinceId(provinceId) {
+      let param = {
+        area: provinceId + "",
+        cardType: 3,
+        pageNum: 1,
+        pageSize: 1
+      };
+      param.setEntry = true;
+      this.POST("trade/goods/cardList", param).then(res => {
+        if (res.code == "000000") {
+          this.cardInfo = (res.data && res.data[0]) || { id: 0, name: "职称考精讲课程卡" };
+          this.subContent = `您已购买“${this.cardInfo.goodsName}”，是否用此卡绑定并激活当前课程。学习卡激活码一旦使用，不可更改不可退回`
+        }
+      });
+    },
+
   },
 }
 </script>

src/views/share-merge-detail.vue

@@ -158,6 +158,7 @@
     ></ChangeCard>
     <Loading v-show="showLoading" />
 
+    <!-- 主动提示：激活并去学习 -->
     <CourseDialog
       :subContent="subContent"
       confirmBtnText="激活并去学习"
@@ -306,7 +307,7 @@ export default {
         cardType: 3,
         orderId: 0
       },
-      subContent: ``,
+      subContent: "",
     };
   },
   components: {