登陆、跳转、下载等

src/components/common/common-advert-img.vue

@@ -9,6 +9,7 @@ export default {
   name: 'common-title',
   data() {
     return {
+      isWeb: window.__isWeb,
       showInfo: {
         imageUrl: '',
         jumpUrl: ''
@@ -52,6 +53,10 @@ export default {
 
     // 广告位跳转
     jumpPage() {
+      if(this.isWeb) {
+        window.location.href = this.showInfo.jumpUrl;
+        return;
+      }
       let paramList = [
         {
           key: "pageUrl",

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="less" scoped>
+.course-button-wrapper {
+  display: inline-block;
+  text-align: center;
+  margin: 0 5px;
+  &.button-default {
+    display: inline-block;
+    padding: 0 16px;
+    text-align: center;
+    height: 30px;
+    line-height: 30px;
+    // width: 100%;
+    border-radius: 15px;
+    font-size: 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>

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="less" scoped>
+.course-covers-wrapper {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 210px;
+  background: rgba(0, 0, 0, 0.8);
+  justify-content: center;
+  align-content: center;
+  .tips {
+    display: inline-block;
+    margin-bottom: 15px;
+    color: #fff;
+    text-align: center;
+    font-size: 15px;
+  }
+  .course-button-group {
+    display: flex;
+    align-items: center;
+    justify-content:center;
+  }
+}
+</style>

src/store/modules/user.js

@@ -44,14 +44,14 @@ const user = {
           if (picapDoctor.id) {
             let avatar = picapDoctor.avatar_image_url || '';
             let avatarUrl = '';
-            const img1 = await preLoadImg(`https://test-file.yunqueyi.com${avatar}`).catch(err => console.log(err));
-            const img2 = await preLoadImg(`https://file.yunqueyi.com${avatar}`).catch(err => console.log(err));
-            if (img1) {
-              avatarUrl = img1.src;
-            }
-            if (img2) {
-              avatarUrl = img2.src;
-            }
+            // const img1 = await preLoadImg(`https://test-file.yunqueyi.com${avatar}`).catch(err => console.log(err));
+            // const img2 = await preLoadImg(`https://file.yunqueyi.com${avatar}`).catch(err => console.log(err));
+            // if (img1) {
+            //   avatarUrl = img1.src;
+            // }
+            // if (img2) {
+            //   avatarUrl = img2.src;
+            // }
             picapDoctor.avatar = avatarUrl || 'https://file.yunqueyi.com/File/doctor_default.png';
             commit('SET_USER_INFO', { ...picapDoctor, isExist, certifyDoc });
           }
@@ -65,7 +65,7 @@ const user = {
 
     // 通过登陆
     goLogin() {
-      window.location.href = envConfig[process.env.BUILD_ENV]['phomeDemain'] + "/pica_login?target_url=" + encodeURIComponent(location.href);
+      window.location.href = envConfig[process.env.BUILD_ENV]['webPageUrl'] + "/pica_login?target_url=" + encodeURIComponent(location.href);
     },
 
     // 登出

src/utils/env-config.js

@@ -14,13 +14,6 @@ export const envConfig = {
     hactiveUrl: 'https://dev-hactive.yunqueyi.com',
     appId: 'wxf4e66242d31c81c2', // 用于微信授权登录
 
-    // baseUrl: 'https://sc.yunqueyi.com/',
-    // apiUrl: 'https://api.yunqueyi.com/',
-    // webPageUrl: 'https://phome.yunqueyi.com/',
-    // hactiveUrl: 'https://hactive.yunqueyi.com',
-    // appId: 'wx2c577552a2d28550', // 用于微信授权登录
-
-    // http://dev-hactive.yunqueyi.com/message_push/#/study-card
     // baseUrl: 'https://test1-sc.yunqueyi.com/',
     // apiUrl: 'https://test1-api.yunqueyi.com/',
     // webPageUrl: 'https://test1-phome.yunqueyi.com/'
@@ -35,7 +28,7 @@ export const envConfig = {
     // apiUrl: 'https://api.yunqueyi.com/',
     // webPageUrl: 'https://phome.yunqueyi.com/',
     // hactiveUrl: 'https://hactive.yunqueyi.com',
-
+    // appId: 'wx2c577552a2d28550', // 用于微信授权登录
   },
   dev: {
     baseUrl: 'https://dev-sc.yunqueyi.com/',

src/utils/fetch.js

@@ -11,7 +11,6 @@ const service = axios.create({
 
 // request拦截器
 service.interceptors.request.use(config => {
-  // debugger
   if (config.data && config.data.setEntry) {
     config.headers['sysCode'] = config.data.sysCode || 10
     if(config.data.token){

src/utils/mixins.js

@@ -109,7 +109,6 @@ module.exports = {
 
         // 通用GET请求
         GET(api, para, callback, str) {
-            // debugger
             para.token = para.token || this.token || ''
             let url = api + this.getUrlPara(para)
             return fetch({

src/views/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="less" scoped>
+.course-button-wrapper {
+  display: inline-block;
+  text-align: center;
+  margin: 0 5px;
+  &.button-default {
+    display: inline-block;
+    padding: 0 16px;
+    text-align: center;
+    height: 30px;
+    line-height: 30px;
+    // width: 100%;
+    border-radius: 15px;
+    font-size: 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>

src/views/share-merge-detail.vue

@@ -88,7 +88,7 @@
         <CommonSpliteLine></CommonSpliteLine>
         <div id="catalogue-content" class="catalogue-content">
           <div class="catalogue-title">目录</div>
-          <CellListDetail
+          <CellListDetailShare
             :projectComponent="projectComponentDTOS"
             :actionList="actionList"
             :detailNum="detailNum"
@@ -96,6 +96,8 @@
             :hasBindCard="hasBindCard"
             :limitTimes="limitTimes"
             :cmeType="project.cmeType"
+            :logged="logged"
+            :projectId="projectId"
           />
         </div>
       </div>
@@ -164,7 +166,7 @@
       ></span>
     </div>
 
-    <ShiKanCommonDialog
+    <!-- <ShiKanCommonDialog
       class="shikan"
       needSubContent
       content="试看结束"
@@ -172,7 +174,7 @@
       confirmBtnText="去购买"
       :isShowDialog="isShowSkDialog"
       @handlerAction="goBuyKc"
-    />
+    /> -->
 
     <IOSDownloadDialog
       class="shikan"
@@ -183,6 +185,30 @@
       @handlerAction="goBack"
     />
 
+    <!-- 未登录提示 -->
+    <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>
+
+    <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>
@@ -190,7 +216,7 @@ import CommonNavbar from "@/components/common/common-navbar";
 import CommonDescription from "@/components/common/common-description";
 import CommonSpliteLine from "@/components/common/common-splite-line";
 
-import CellListDetail from "@/components/business/cell-list-detail";
+import CellListDetailShare from "@/components/business/cell-list-detail-share";
 // import NoPermContent from "@/components/business/no-perm-content";
 // import CommonBannerVideo from "@/components/common/common-banner-video";
 import CommonTcPlayer from "@/components/common/common-tcplayer";
@@ -217,6 +243,7 @@ import { Toast } from "vant";
 // import CardPopup from "@/components/cme/card-popup";
 import BindCardButtonShare from "@/components/cme/bind-card-button-share";
 import ChangeCard from "@/components/cme/change-card";
+import CourseCovers from "@/components/course/course-covers";
 
 let cataOffsetTop = 0;
 let intorOffsetTop = 0;
@@ -226,6 +253,7 @@ export default {
   data() {
     return {
       // token: "9B62E5874DA94979A54DB3E9DFC1443F",
+      downloadTips: "打开云鹊医APP",
       isWeb: window.__isWeb,
       isAndroid: __isAndroid,
       textContent: "",
@@ -287,7 +315,7 @@ export default {
       bannerType: 1, // 1 图片 2视频
       videoOptions: {
         mp4: "",
-        autoplay: true, //iOS下safari浏览器，以及大部分移动端浏览器是不开放视频自动播放这个能力的
+        autoplay: false, //iOS下safari浏览器，以及大部分移动端浏览器是不开放视频自动播放这个能力的
         coverpic: require("../images/video-cover.png"),
         width: "415", //视频的显示宽度，请尽量使用视频分辨率宽度
         height: "210", //视频的显示高度，请尽量使用视频分辨率高度
@@ -321,14 +349,17 @@ export default {
       continueStudyType: 0,
       skCourseId: 0,
       isShowSkDialog: false,
+      isShowEndDialog: false,
+      isShowFFDialog: false,
       isShowIOSDownloadDialog: false,
+      needShort: false
     };
   },
   components: {
     CommonNavbar,
     CommonDescription,
     CommonSpliteLine,
-    CellListDetail,
+    CellListDetailShare,
     Loading,
     CommonTcPlayer,
     CmeStep,
@@ -346,11 +377,12 @@ export default {
     BindCardButtonShare,
     ChangeCard,
     ShiKanCommonDialog,
-    IOSDownloadDialog
+    IOSDownloadDialog,
+    CourseCovers
   },
 
   computed: {
-    ...mapGetters(["userInfo"])
+    ...mapGetters(["userInfo", "logged"])
   },
 
   created() {
@@ -363,6 +395,11 @@ export default {
     // TODO 要先解码URL
     // _this.checkToken();
     // _this.setUserInfo(param);
+    const { token, info } = this.$store.state.user;
+    if (token && !info.id) {
+      this.$store.dispatch('getUserInfo');
+    } 
+
     _this.getProjectParticularsV2();
 
     // 打开页面埋点
@@ -375,12 +412,25 @@ export default {
   },
   mounted() {
     window.addEventListener("scroll", this.scrollFun);
+    setTimeout(() => {
+      this.downloadTips = '';
+      this.needShort = true;
+    }, 5000);   
   },
   beforeDestroyed() {
     window.removeEventListener("scroll", this.scrollFun);
   },
   methods: {
-    ...mapActions(["setUserInfo"]),
+    ...mapActions(["setUserInfo", "goLogin"]),
+
+    btnClick() {
+      this.goLogin();
+    },
+
+    download() {
+      window.location.href =
+        "https://a.app.qq.com/o/simple.jsp?pkgname=com.picahealth.yunque";
+    },
 
     cancleChangeCard() {
       this.showChangeCard = false;
@@ -698,7 +748,8 @@ export default {
     getProjectParticularsV2() {
       let _this = this;
       let param = {
-        token: _this.userInfo.userToken || this.token,
+        // token: _this.userInfo.userToken || this.token,
+        token: this.$store.state.user.token || this.token,
         setEntry: true
       };
       let videoUrl = this.$route.query.videoUrl || '';
@@ -808,19 +859,18 @@ export default {
           }
 
           // let shareUrl = encodeURIComponent(location.href);
-          this.wxDisabledShare();
-          // this.wechatShare(
-          //   {
-          //     link: location.href,
-          //     title: this.project.projectName,
-          //     friendtitle: this.project.projectName,
-          //     desc: this.project.projectName,
-          //     imgUrl: "https://file.yunqueyi.com/logo.png"
-          //   },
-          //   () => {
-          //     console.log("share success...");
-          //   }
-          // );          
+          this.wechatShare(
+            {
+              link: location.href,
+              title: this.project.projectName,
+              friendtitle: this.project.projectName,
+              desc: this.project.projectName,
+              imgUrl: "https://file.yunqueyi.com/logo.png"
+            },
+            () => {
+              console.log("share success...");
+            }
+          );          
           console.log('hasBindCard, limitTimes', _this.hasBindCard, _this.limitTimes);
         }
       });
@@ -1109,4 +1159,46 @@ export default {
   width: 100%;
   height: 40px;
 }
+.course-tips {
+  width: 100%;
+  position: absolute;
+  z-index: 100;
+  top: 0;
+  left: 0; 
+}
+.download-abs {
+  display: flex;
+  // width: 100%;
+  position: absolute;
+  z-index: 101;
+  top: 15px;
+  right: 0;
+  height: 30px;
+  align-items: center;
+  img {
+    position: relative;
+    left: 15px;
+    width: 30px;
+    height: 30px;
+  }
+  span {
+    display: inline-block;
+    height: 30px;
+    line-height: 30px;
+    padding: 0 8px 0 23px;
+    font-size: 12px;
+    font-weight: 700;
+    color: #5BA99B;
+    background: #fff;
+    width: 120px;
+    &.short {
+      width: 10px;
+      transition: width 1s;
+      -moz-transition: width 1s; /* Firefox 4 */
+      -webkit-transition: width 1s; /* Safari 和 Chrome */
+      -o-transition: width 1s; /* Opera */
+      padding: 0 12px;
+    }
+  }
+}
 </style>