若有问题可联系客服

src/components/cme/common-bottom-info.vue

@@ -3,7 +3,8 @@
     <div class="common-bottom">
       <span>若有问题可联系客服：</span>
       <img src="../../images/cme/icon-phone.png" />
-      <span>400-920-8877</span>
+      <!-- <span>400-920-8877</span> -->
+      <a href="tel:4009208877"><span>400-920-8877</span></a>
     </div>
   </div>
 </template>
@@ -29,9 +30,9 @@
       height: 14px;
       line-height: 14px;
       color: #676869;
-      &:nth-child(3) {
-        color: #449284;
-      }
+    }
+    a span {
+      color: #449284;     
     }
     // span:nth-child(1) {
     //   color: #449284;

src/components/course/common-error-tips.vue

+<template>
+  <section>
+    <div class="common-error-tips-wrapper">
+      <img src="../../images/course/danger.png" alt="">
+      <span>{{errorMsg}}</span>
+    </div>
+    <CommonBottomInfo></CommonBottomInfo>
+  </section>
+
+</template>
+<script>
+import CommonBottomInfo from "@/components/cme/common-bottom-info";
+export default {
+  components: {
+    CommonBottomInfo
+  },
+  props: {
+    errorMsg: {
+      type: String,
+      default: '此课程已下架无法查看'
+    }
+  }
+}
+</script>
+<style lang="scss">
+@import "../../style/mixin";
+.common-error-tips-wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding-top: px2rem(120px);
+  img {
+    width: px2rem(40px);
+    height: px2rem(40px);
+  }
+  span {
+    display: inline-block;
+    margin-top: px2rem(15px);
+    font-size: px2rem(16px);
+    line-height: px2rem(16px);
+    font-weight: 700;
+    color: #111A34;
+  }
+}
+</style>
\ No newline at end of file

src/components/course/course-button.vue

+<template>
+  <span class="course-button-wrapper button-default" :class="type" @click="btnClick">{{btnText}}</span>
+</template>
+<script>
+export default {
+  props: {
+    btnText: {
+      type: String,
+      default: "去云鹊医App"
+    },
+    type: {
+      type: String,
+      default: "primary"
+    }
+  },
+  data() {
+    return {};
+  },
+  methods: {
+    btnClick() {
+      if (this.type == "disabled") return;
+      this.$emit("btnClick");
+    }
+  }
+};
+</script>
+<style  lang="scss" scoped>
+@import "../../style/mixin";
+.course-button-wrapper {
+  display: inline-block;
+  text-align: center;
+  margin: 0 px2rem(5px);
+  &.button-default {
+    display: inline-block;
+    padding: 0 px2rem(16px);
+    text-align: center;
+    height: px2rem(30px);
+    line-height: px2rem(30px);
+    // width: 100%;
+    border-radius: px2rem(15px);
+    font-size: px2rem(12px);
+    font-weight: 700;
+    color: #ffffff;
+    background: #449284;
+  }
+  &.primary {
+    color: #ffffff;
+    background: #449284;
+  }
+  &.plain {
+    color: #ffffff;
+    background: none;
+    border: 1px solid rgba(255, 255, 255, 1);
+  }
+  &.disabled {
+    color: rgba(255, 255, 255, 0.95);
+    background: rgba(68, 146, 132, 0.4);
+  }
+}
+</style>
\ No newline at end of file

src/components/course/course-covers.vue

+<template>
+  <div class="course-covers-wrapper">
+    <span class="tips" v-html="coverTips"></span>
+    <div v-if="isShowBtn" class="course-button-group">
+      <CourseButton v-if="!isSingle" type="plain" @btnClick="btnClick(1)" :btnText="leftBtnText"></CourseButton>
+      <CourseButton @btnClick="btnClick(2)" :btnText="rightBtnText"></CourseButton>
+    </div>
+  </div>
+</template>
+<script>
+import CourseButton from "@/components/course/course-button";
+export default {
+  components: {
+    CourseButton
+  },
+  props: {
+    coverTips: {
+      type: String,
+      default: "上次观看至7分钟，正在续播"
+    },
+    isShowBtn: {
+      type: Boolean,
+      default: true
+    },
+    isSingle: {
+      type: Boolean,
+      default: false
+    },
+    leftBtnText: {
+      type: String,
+      default: "学习下一节"
+    },
+    rightBtnText: {
+      type: String,
+      default: "去云鹊医App"
+    }
+  },
+  data() {
+    return {};
+  },
+  methods: {
+    btnClick(index) {
+      this.$emit("btnClick", index);
+    }
+  }
+};
+</script>
+<style  lang="scss" scoped>
+@import "../../style/mixin";
+.course-covers-wrapper {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: px2rem(210px);
+  background: rgba(0, 0, 0, 0.8);
+  justify-content: center;
+  align-content: center;
+  .tips {
+    display: inline-block;
+    margin-bottom: px2rem(15px);
+    color: #fff;
+    text-align: center;
+    font-size: px2rem(15px);
+  }
+}
+</style>
\ No newline at end of file

src/style/global.scss

@@ -164,4 +164,24 @@
 
 .bind-cart-wrapper .van-cell:not(:last-child)::after {
     border: none !important;
+}
+
+// 定义课程中公用弹框样式
+.course-detail.van-dialog {
+    border-radius: 4px;
+    .van-dialog__message {
+        padding: 30px;
+        font-size: 14px;
+        line-height: 21px;
+        color: #727374;
+    }
+    .van-button__text {
+        font-size: 17px;
+        color: #449284;
+    }
+}
+.course-button-group {
+    display: flex; 
+    align-items: center;
+    justify-content:center;    
 }
\ No newline at end of file

src/views/test-components.vue

 <template>
   <div class="test-container">
-    <CommonButton btnText="去学习"></CommonButton>
+    <!-- <CommonButton btnText="去学习"></CommonButton> -->
     <!-- <CommonDialog content="该项目仅对河北省石家庄市的用户开放" :isShowDialog="isShowDialog" @handlerAction="handlerDialogAction"></CommonDialog> -->
     <!-- <CommonDialog content="您暂未认证身份，完成认证身份后可申请学分" confirmBtnText="去认证" :isShowDialog="isShowDialog" @handlerAction="handlerDialogAction"></CommonDialog> -->
     <!-- <CommonDialog content="您暂未加入机构，加入机构后且认证身份后可申请学分" confirmBtnText="加入机构" :isShowDialog="isShowDialog" @handlerAction="handlerDialogAction"></CommonDialog> -->
     <!-- <CommonDialog content="您的所属机构不在可申请范围（河北省石家庄市）内" cancleBtnText="我知道了" isSingle :isShowDialog="isShowDialog" @handlerAction="handlerDialogAction"></CommonDialog> -->
-    <CommonDialog content="提交成功" subContent="您可在“个人中心-证书与学分”中查看审核结果" cancleBtnText="我知道了" isSingle needSubContent :isShowDialog="isShowDialog" @handlerAction="handlerDialogAction"></CommonDialog>
+    <!-- <CommonDialog content="提交成功" subContent="您可在“个人中心-证书与学分”中查看审核结果" cancleBtnText="我知道了" isSingle needSubContent :isShowDialog="isShowDialog" @handlerAction="handlerDialogAction"></CommonDialog> -->
     <!-- <CommonDialog content="兑换" subContent="确定要花200云鹊豆兑换课程吗？<br>我的云鹊豆：<span style='color:#FF9A4B;'>1500</span>" cancleBtnText="我再想想" confirmBtnText="确认兑换"  needSubContent :isShowDialog="isShowDialog" @handlerAction="handlerDialogAction"></CommonDialog> -->
-    <CommonBottomInfo></CommonBottomInfo>
+    <!-- <CommonBottomInfo></CommonBottomInfo> -->
+
+    <!-- 新组件测试 -->
+    <!-- <CommonErrorTips></CommonErrorTips> -->
+    <!-- <div class="course-button-group">
+      <CourseButton type="plain"></CourseButton>
+      <CourseButton></CourseButton>
+    </div> -->
+    <CourseCovers></CourseCovers>
+    <!-- <div @click="testDialog">testDialog</div> -->
   </div>
 </template>
 <script>
 import CommonButton from "@/components/cme/common-button";
 import CommonDialog from "@/components/cme/common-dialog";
 import CommonBottomInfo from "@/components/cme/common-bottom-info";
+import CommonErrorTips from "@/components/course/common-error-tips";
+import CourseButton from "@/components/course/course-button";
+import CourseCovers from "@/components/course/course-covers";
+
 export default {
   data() {
     return {
@@ -21,9 +34,12 @@ export default {
     };
   },
   components: {
-    CommonButton,
-    CommonDialog,
-    CommonBottomInfo
+    // CommonButton,
+    // CommonDialog,
+    // CommonBottomInfo,
+    CommonErrorTips,
+    CourseButton,
+    CourseCovers
   },
   mounted() {
     // Toast
@@ -34,11 +50,25 @@ export default {
   methods: {
     handlerDialogAction(type) {
       this.isShowDialog = false;
+    },
+    testDialog() {
+        this.$dialog.confirm({
+          className: 'course-detail',
+          showCancelButton: false,
+          // message: '激活/购买后可学习完整课程',
+          message: '恭喜您，已完成全部课程学习',
+          confirmButtonText: '我知道了',
+        }).then(res => {
+
+        })      
     }
   }
 };
 </script>
 <style lang="scss" scoped>
 @import "../style/mixin";
+.test-container {
+  background: rgba($color: #000000, $alpha: 0.8);
+}
 </style>