项目绑定提示及绑定（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

@@ -145,6 +145,14 @@
       :isShowDialog="isShowIOSDownloadDialog"
       @handlerAction="goBack"
     />
+
+    <CourseDialog
+      :subContent="subContent"
+      confirmBtnText="激活并去学习"
+      needSubContent
+      :isShowDialog="showBindCardTips"
+      @handlerAction="handlerAction"
+    ></CourseDialog>
   </div>
 </template>
 <script>
@@ -162,6 +170,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 ExjumperButton from "@/components/cme/exjumper-button";
 import NoMoreContent from "@/components/business/no-more-content";
 import CommonAdertImg from "@/components/common/common-advert-img";
@@ -269,6 +278,14 @@ export default {
       isShowSkDialog: false,
       isShowIOSDownloadDialog: false,
       shareUrl: location.href,
+      showBindCardTips: false,
+      cmeCardModels: {
+        cardNo: "",
+        cardKey: "",
+        cardType: 3,
+        orderId: 0
+      },
+      subContent: ``,
     };
   },
   components: {
@@ -284,6 +301,7 @@ export default {
     ItemLeader,
     TeacterIntro,
     CommonDialog,
+    CourseDialog,
     ExjumperButton,
     CommonAdertImg,
     NoMoreContent,
@@ -355,8 +373,31 @@ export default {
       this.showChangeCard = false;
     },
 
+    // 处理提示信息框
+    handlerAction(type) {
+      if(type == 1) {
+        this.showBindCardTips = false;
+      } else {
+        this.beforeChangeCardAction(this.cmeCardModels.cardKey, true)
+      }
+    },
+
+    // 查询是否买过类似的卡，但还没有绑定
+    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;
+        }
+      });
+    },
+
     // 激活  返回值：0绑定失败，1绑定成功
-    changeCardAction(cardKey) {
+    changeCardAction(cardKey, isInTips) {
       let _this = this;
       let param = {
         cardKey: cardKey,
@@ -366,9 +407,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(isInTips) {
+              Toast(res.message);            
+            } else {
+              _this.changeCardErrorMsg = "请输入正确的激活码";
+            }            
           } else {
             _this.$refs.tcPlayerRef && _this.$refs.tcPlayerRef.pause();
             _this.showChangeCard = false;
@@ -376,9 +422,16 @@ export default {
             _this.getProjectInfoById();
           }
         } else {
+          Toast(res.message);            
         }
       }).catch( e => {
-        _this.changeCardErrorMsg = "请输入正确的激活码";
+        console.log('in catch', isInTips);
+        if(isInTips) {
+          Toast("无效的激活码");
+          _this.showBindCardTips = false;
+        } else {
+          _this.changeCardErrorMsg = "请输入正确的激活码";
+        }
       });
     },
 
@@ -501,7 +554,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}”，是否用此卡绑定并激活当前课程。学习卡激活码一旦使用，不可更改不可退回`
         }
       });
     },
@@ -760,6 +814,9 @@ export default {
           if(_this.hasBindCard) {
             _this.videoOptions.trySeeTime = 300000;
             _this.videoOptions.autoplay = false;
+          // 如果没有绑定卡，则查询是否有未绑定的卡
+          } else {
+            _this.hasNoUsedCard();
           }
           let mp4Url = _this.videoOptions.mp4;
           // 判断是否是mp4