项目绑定提示及绑定（APP内与H5）

src/components/course/course-dialog.vue

+<template>
+  <div class="common-dialog-wrraper" v-if="isShowDialog">
+    <div class="dialog-mask"></div>
+    <div class="dialog-container">
+      <div class="dialog-content">{{content}}</div>
+      <div v-show="needSubContent" class="dialog-sub-content" v-html="subContent"></div>
+      <div class="dialog-footer v-hairline-top">
+        <span :class="{'single-btn': isSingle}" @click="handlerAction(1)">{{cancleBtnText}}</span>
+        <span v-show="!isSingle" class="confirm-btn v-hairline-left" @click="handlerAction(2)">{{confirmBtnText}}</span>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: "common-dialog",
+  data() {
+    return {
+
+    };
+  },
+  props: {
+    content: {
+      type: String,
+      default: ''
+    },
+    needSubContent: {
+      type: Boolean,
+      default: false
+    },
+    subContent: {
+      type: String,
+      default: ''
+    },
+    cancleBtnText: {
+      type: String,
+      default: '取消'
+    },
+    confirmBtnText: {
+      type: String,
+      default: '确定'
+    },
+    isShowDialog: {
+      type: Boolean,
+      default: false
+    },
+    isSingle: {
+      type: Boolean,
+      default: false
+    },
+  },
+  methods: {
+    handlerAction(type) {
+      this.$emit("handlerAction", type);
+    }
+  }
+};
+</script>
+<style lang="less" scoped>
+.common-dialog-wrraper {
+  position: fixed;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 2019;
+  .dialog-mask {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.5);
+    z-index: 2020;
+  }
+  .dialog-container {
+    z-index: 2021;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    overflow: hidden;
+    width: 300px;
+    font-size: 18px;
+    -webkit-transition: 0.3s;
+    transition: 0.3s;
+    border-radius: 4px;
+    background-color: #fff;
+    -webkit-transform: translate3d(-50%, -50%, 0);
+    transform: translate3d(-50%, -50%, 0);
+    -webkit-backface-visibility: hidden;
+    backface-visibility: hidden;
+    .dialog-content {
+      // margin: 30px 22px;
+      margin: 30px;
+      text-align: center;
+      font-size: 18px;
+      font-weight: 400;
+      color: #373839;
+    }
+    .dialog-sub-content {
+      margin: 5px 30px 20px;
+      // margin: -16px 22px 30px;
+      text-align: left;
+      font-size: 14px;
+      line-height: 24px;
+      font-weight: 400;
+      color: #676869;
+    }
+    .dialog-footer {
+      height: 50px;
+      display: flex;
+      align-items: center;
+      &.v-hairline-top::after {
+        border-top-width: 1px;
+      }
+      span {
+        display: inline-block;
+        // width: 50%;
+        flex: 1;
+        height: 50px;
+        line-height: 50px;
+        font-size: 17px;
+        text-align: center;
+        color: #979899;
+        &.v-hairline-left::after {
+          border-left-width: 1px;
+        }
+        &.confirm-btn {
+          color: #449284;
+        }
+        &.single-btn {
+          color: #449284;
+        }
+      }
+    }
+  }
+
+  [class*="v-hairline"] {
+    position: relative;
+    &::after {
+      content: " ";
+      position: absolute;
+      pointer-events: none;
+      box-sizing: border-box;
+      top: -50%;
+      left: -50%;
+      right: -50%;
+      bottom: -50%;
+      -webkit-transform: scale(0.5);
+      transform: scale(0.5);
+      border: 0 solid #f0f1f2;
+    }
+  }
+  &.shikan {
+    .dialog-sub-content {
+      text-align: center;
+      font-size: 16px;
+    }
+  }
+}
+</style>

src/views/merge-detail.vue

@@ -178,6 +178,14 @@
       :isShowDialog="isShowIOSDownloadDialog"
       @handlerAction="goBack"
     />
+
+    <CourseDialog
+      :subContent="subContent"
+      confirmBtnText="激活并去学习"
+      needSubContent
+      :isShowDialog="showBindCardTips"
+      @handlerAction="handlerActionTips"
+    ></CourseDialog>    
     
   </div>
 </template>
@@ -199,6 +207,7 @@ import ItemIntro from "@/components/cme/item-intro";
 import ItemLeader from "@/components/cme/item-leader";
 import TeacterIntro from "@/components/cme/teacter-intro";
 import CommonDialog from "@/components/cme/common-dialog";
+import CourseDialog from "@/components/course/course-dialog";
 import ExjumperDialog from "@/components/cme/exjumper-dialog";
 import ExjumperButton from "@/components/cme/exjumper-button";
 import NoMoreContent from "@/components/business/no-more-content";
@@ -324,6 +333,14 @@ export default {
       isShowSkDialog: false,
       isShowIOSDownloadDialog: false,
       shareUrl: location.href,
+      showBindCardTips: false,
+      cmeCardModels: {
+        cardNo: "",
+        cardKey: "",
+        cardType: 2,
+        orderId: 0
+      },      
+      subContent: ``,
     };
   },
   components: {
@@ -340,6 +357,7 @@ export default {
     ItemLeader,
     TeacterIntro,
     CommonDialog,
+    CourseDialog,
     ExjumperButton,
     ExjumperDialog,
     // CardPopup,
@@ -426,8 +444,31 @@ export default {
       this.showChangeCard = false;
     },
 
+    // 查询是否买过类似的卡，但还没有绑定
+    hasNoUsedCard() {
+      let param = {
+        setEntry: true
+      };
+      this.GET(`cme/projectCard/queryNoUsedCard/2`, param).then(({ data }) => {
+        this.hasNoUsedCard = data.hasNoUsedCard;
+        if (data.hasNoUsedCard == 1) {
+          this.cmeCardModels = data.cmeCardModels[0] || {};
+          this.showBindCardTips = true;
+        }
+      });
+    },
+
+    // 处理提示信息框
+    handlerActionTips(type) {
+      if(type == 1) {
+        this.showBindCardTips = false;
+      } else {
+        this.changeCardAction(this.cmeCardModels.cardKey, true);
+      }
+    },
+
     // 激活  返回值：0绑定失败，1绑定成功
-    changeCardAction(cardKey) {
+    changeCardAction(cardKey, isInTips) {
       let _this = this;
       let param = {
         cardKey: cardKey,
@@ -437,9 +478,14 @@ export default {
       };
       _this.changeCardErrorMsg = "";
       this.POST("cme/projectCard/bind", param).then(res => {
+        isInTips && (_this.showBindCardTips = false);
         if (res.code == "000000") {
-          if(res.data == 0) {
-            _this.changeCardErrorMsg = "请输入正确的激活码";
+          if(!res.data) {
+            if(isInTips) {
+              Toast(res.message);            
+            } else {
+              _this.changeCardErrorMsg = "请输入正确的激活码";
+            }            
           } else {
             _this.$refs.tcPlayerRef && _this.$refs.tcPlayerRef.pause();
             _this.showChangeCard = false;
@@ -449,7 +495,12 @@ export default {
         } else {
         }
       }).catch( e => {
-        _this.changeCardErrorMsg = "请输入正确的激活码";
+        if(isInTips) {
+          Toast("无效的激活码");
+          _this.showBindCardTips = false;
+        } else {
+          _this.changeCardErrorMsg = "请输入正确的激活码";
+        }
       });
     },
 
@@ -618,7 +669,8 @@ export default {
         if (res.code == "000000") {
           this.showLoading = false;
           // this.isShowPopup = true;
-          this.cardInfo = (res.data && res.data[0]) || { id: 0 };
+          this.cardInfo = (res.data && res.data[0]) || { id: 0, name: "职称考精讲课程卡" };
+          this.subContent = `您已购买“${this.cardInfo.name}”，是否用此卡绑定并激活当前课程。学习卡激活码一旦使用，不可更改不可退回`
         }
       });
     },
@@ -943,7 +995,9 @@ export default {
           if(this.hasBindCard) {
             _this.videoOptions.trySeeTime = 300000;
             _this.videoOptions.autoplay = false;
-          }
+          } else {
+            _this.hasNoUsedCard();
+          } 
           let mp4Url = _this.videoOptions.mp4;
           // 判断是否是mp4
           if(mp4Url.lastIndexOf('.mp4') > 0) {

src/views/share-merge-detail.vue

@@ -183,30 +183,14 @@
       ></span>
     </div>
 
-    <!-- 未登录提示 -->
-    <div class="course-tips" v-if="!logged">
-      <CourseCovers isSingle coverTips="登录后马上学习课程" rightBtnText="去登录" @btnClick="btnClick"></CourseCovers>
-    </div>
-
-    <!-- 试看结束 -->
-    <div class="course-tips" v-if="isShowSkDialog">
-      <CourseCovers isSingle coverTips="试看结束<br>学习完整版课程，请来云鹊医App购买" rightBtnText="APP购买更优惠" @btnClick="download(1)"></CourseCovers>
-    </div>
-
-    <!-- 播放结束 -->
-    <div class="course-tips" v-if="isShowEndDialog">
-      <CourseCovers isSingle coverTips="播放结束<br>更多其他课程，请前往云鹊医APP学习" rightBtnText="APP购买更优惠" @btnClick="download(1)"></CourseCovers>
-    </div>
-
-    <!-- 本课程为付费课程 -->
-    <div class="course-tips" v-if="isShowFFDialog">
-      <CourseCovers isSingle coverTips="本课程为付费课程<br>学习完整版课程，请来云鹊医App购买" rightBtnText="APP购买更优惠" @btnClick="download(1)"></CourseCovers>
-    </div>
+    <CourseDialog
+      :subContent="subContent"
+      confirmBtnText="激活并去学习"
+      needSubContent
+      :isShowDialog="showBindCardTips"
+      @handlerAction="handlerActionTips"
+    ></CourseDialog>    
 
-    <!-- <div class="download-abs" @click="download">
-      <img src="../images/cme/course/pica-icon.png" alt="">
-      <span :class="{'short': needShort}">{{downloadTips}}</span>
-    </div> -->
   </div> 
 </template>
 <script>
@@ -224,6 +208,7 @@ import ItemIntro from "@/components/cme/item-intro";
 import ItemLeader from "@/components/cme/item-leader";
 import TeacterIntro from "@/components/cme/teacter-intro";
 import CommonDialog from "@/components/cme/common-dialog";
+import CourseDialog from "@/components/course/course-dialog";
 import ExjumperDialog from "@/components/cme/exjumper-dialog";
 import ExjumperButton from "@/components/cme/exjumper-button";
 import NoMoreContent from "@/components/business/no-more-content";
@@ -351,6 +336,14 @@ export default {
       token: '',
       shareUrl: '',
       shareParam: {},
+      showBindCardTips: false,
+      cmeCardModels: {
+        cardNo: "",
+        cardKey: "",
+        cardType: 2,
+        orderId: 0
+      },      
+      subContent: ``,
     };
   },
   components: {
@@ -366,6 +359,7 @@ export default {
     ItemLeader,
     TeacterIntro,
     CommonDialog,
+    CourseDialog,
     ExjumperButton,
     ExjumperDialog,
     // CardPopup,
@@ -408,7 +402,7 @@ export default {
     this.queryByUuid(this.uuid);
 
     // 调用广告位接口
-    this.getAdvertInfoList();
+    // this.getAdvertInfoList();
   },
   mounted() {
     window.addEventListener("scroll", this.scrollFun);  
@@ -484,15 +478,38 @@ export default {
       this.showChangeCard = false;
     },
 
+    // 处理提示信息框
+    handlerActionTips(type) {
+      if(type == 1) {
+        this.showBindCardTips = false;
+      } else {
+        this.beforeChangeCardAction(this.cmeCardModels.cardKey, true)
+      }
+    },
+
     // 
-    beforeChangeCardAction(cardKey) {
+    beforeChangeCardAction(cardKey, isInTips) {
       this.commonCheckToken( () => {
-        this.changeCardAction(cardKey);
+        this.changeCardAction(cardKey, isInTips);
       })
     },
 
+    // 查询是否买过类似的卡，但还没有绑定
+    hasNoUsedCard() {
+      let param = {
+        setEntry: true
+      };
+      this.GET(`cme/projectCard/queryNoUsedCard/2`, param).then(({ data }) => {
+        this.hasNoUsedCard = data.hasNoUsedCard;
+        if (data.hasNoUsedCard == 1) {
+          this.cmeCardModels = data.cmeCardModels;
+          this.showBindCardTips = true;
+        }
+      });
+    },
+
     // 激活  返回值：0绑定失败，1绑定成功
-    changeCardAction(cardKey) {
+    changeCardAction(cardKey, isInTips) {
       let _this = this;
       let param = {
         cardKey: cardKey,
@@ -503,18 +520,30 @@ export default {
       };
       _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 == 0) {
-            _this.changeCardErrorMsg = "请输入正确的激活码";
+          if(!res.data) {
+            if(isInTips) {
+              Toast(res.message);            
+            } else {
+              _this.changeCardErrorMsg = "请输入正确的激活码";
+            }
           } else {
             _this.showChangeCard = false;
             Toast("激活成功，开始学习");
             _this.getProjectParticularsV2();
           }
         } else {
+          Toast(res.message);            
         }
       }).catch( e => {
-        _this.changeCardErrorMsg = "请输入正确的激活码";
+        if(isInTips) {
+          Toast("无效的激活码");
+          _this.showBindCardTips = false;
+        } else {
+          _this.changeCardErrorMsg = "请输入正确的激活码";
+        }
       });
     },
 
@@ -598,7 +627,8 @@ export default {
       this.POST("trade/goods/cardList", param).then(res => {
         if (res.code == "000000") {
           this.showLoading = false;
-          this.cardInfo = (res.data && res.data[0]) || { id: 0 };
+          this.cardInfo = (res.data && res.data[0]) || { id: 0, name: "国家级继续教育项目（远程）学习卡" };
+          this.subContent = `您已购买“${this.cardInfo.name}”，是否用此卡绑定并激活当前课程。学习卡激活码一旦使用，不可更改不可退回`
         }
       });
     },
@@ -812,7 +842,10 @@ export default {
           if(this.hasBindCard) {
             _this.videoOptions.trySeeTime = 0;
             _this.videoOptions.autoplay = false;
-          }
+          // 如果没有绑定卡，则查询是否有未绑定的卡
+          } else {
+            _this.logged && _this.hasNoUsedCard();
+          }          
           let mp4Url = _this.videoOptions.mp4;
           // 判断是否是mp4
           if(mp4Url.lastIndexOf('.mp4') > 0) {