登陆、跳转、下载等

build/webpack.base.conf.js

@@ -71,13 +71,13 @@ module.exports = {
                 browsers: ['last 10 versions']
             }),
             require('postcss-pxtorem')({
-              rootValue: 37.5,
-              unitPrecision: 5,
-              propWhiteList: [],
-              selectorBlackList: [/^html$/],
-              replace: true,
-              mediaQuery: false,
-              minPixelValue: 2
+                rootValue: 37.5,
+                unitPrecision: 5,
+                propWhiteList: [],
+                selectorBlackList: [/^html$/],
+                replace: true,
+                mediaQuery: false,
+                minPixelValue: 2
             })
         ]
     }

src/components/cme/bind-card-button-share.vue

+<template>
+  <section class="bind-cart-wrapper">
+    <article class="left">
+      <div class="top">
+        <!-- <span class="discount">￥{{cardInfo.costPrice | formatMoney}}</span> -->
+        <span class="discount">￥{{(cardInfo.couponPrice || cardInfo.preferentialPrice || cardInfo.costPrice) | formatMoney}}</span>
+        <span v-show="cardInfo.couponPrice || cardInfo.preferentialPrice" class="price">
+          <del>原价￥{{cardInfo.costPrice | formatMoney}}</del>
+        </span>
+      </div>
+      <div class="bottom">
+        <img src="../../images/cme/phrase2/info.png" />
+        <span>激活或购买后可学习课程</span>
+      </div>
+    </article>
+    <article class="right">
+      <span class="left" @click="download">APP购买更优惠</span>
+    </article>
+  </section>
+</template>
+<script>
+export default {
+  props: {
+    cardInfo: {
+      type: Object,
+      default: () => {}
+    }
+  },
+  data() {
+    return {};
+  },
+  methods: {
+    download() {
+      window.location.href =
+        "https://a.app.qq.com/o/simple.jsp?pkgname=com.picahealth.yunque";
+    },    
+  }
+};
+</script>
+<style  lang="less" scoped>
+.bind-cart-wrapper {
+  position: fixed;
+  left: 0;
+  bottom: 0;
+  z-index: 100;
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  height: 60px;
+  line-height: 1;
+  justify-content: space-between;
+  padding: 10px 15px;
+  font-size: 14px;
+  background: rgba(255, 255, 255, 1);
+  box-shadow: 0px -2px 10px 0px rgba(0, 0, 0, 0.1);
+  .left {
+    display: flex;
+    flex-direction: column;
+    height: 40px;
+    line-height: 1;
+    font-size: 12px;
+    // align-items: ;
+    .top {
+      margin-top: 3px;
+      height: 24px;
+      .discount {
+        color: #fb5b52;
+        font-size: 18px;
+        font-weight: 700;
+        margin-right: 4px;
+      }
+      .price {
+        color: #979899;
+      }
+    }
+    .bottom {
+      display: flex;
+      flex-direction: row;
+      img {
+        width: 12px;
+        height: 12px;
+        margin-left: 1px;
+        margin-right: 4px;
+      }
+      color: #979899;
+    }
+  }
+  .right {
+    display: flex;
+    flex-direction: row;
+    span {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      justify-content: center;
+      width: 138px;
+      font-size: 14px;
+      font-weight: 700;
+      text-align: center;
+      &.left {
+        border: 1px solid rgba(255, 122, 75, 1);
+        border-right-style: none;
+        color: #FFFFFF;
+        background:linear-gradient(137deg,rgba(255,166,95,1) 0%,rgba(255,122,75,1) 100%);
+        border-radius: 20px;
+      }
+    }
+  }
+}
+</style>

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

 <template>
   <div class="common-adert-wrapper">
-    <img :class="{'margin-top-20': needPadTop}" v-if="showInfo.imageUrl" @click="jumpPage" :src="showInfo.imageUrl" alt="">
+    <img
+      :class="{'margin-top-20': needPadTop}"
+      v-if="showInfo.imageUrl"
+      @click="jumpPage"
+      :src="showInfo.imageUrl"
+      alt
+    />
   </div>
 </template>
 <script>
-import { EMLINK } from 'constants';
+import { EMLINK } from "constants";
 export default {
-  name: 'common-title',
+  name: "common-title",
   data() {
     return {
+      isWeb: window.__isWeb,
       showInfo: {
-        imageUrl: '',
-        jumpUrl: ''
+        imageUrl: "",
+        jumpUrl: ""
       }
     };
   },
@@ -31,9 +38,9 @@ export default {
   },
   watch: {
     advertInfoList: {
-      handler (list) {
+      handler(list) {
         list.forEach(element => {
-          if(element.position == this.position) {
+          if (element.position == this.position) {
             this.showInfo = element;
           }
         });
@@ -42,16 +49,15 @@ export default {
     }
   },
   created() {},
-  mounted() {
-
-  },
-  computed: {
-
-  },
+  mounted() {},
+  computed: {},
   methods: {
-
     // 广告位跳转
     jumpPage() {
+      if (this.isWeb) {
+        window.location.href = this.showInfo.jumpUrl;
+        return;
+      }
       let paramList = [
         {
           key: "pageUrl",
@@ -59,7 +65,7 @@ export default {
           type: 4,
           seqNo: 1
         }
-      ]
+      ];
       rocNative.dispatchEventByModuleCode({
         modeCode: "M300",
         jsonString: paramList

src/store/modules/user.js

@@ -44,8 +44,8 @@ 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));
+            const img1 = await preLoadImg(`https://test-file.yunqueyi.com${avatar}`).catch(err => console.error(err));
+            const img2 = await preLoadImg(`https://file.yunqueyi.com${avatar}`).catch(err => console.error(err));
             if (img1) {
               avatarUrl = img1.src;
             }
@@ -59,7 +59,7 @@ const user = {
           errCallBack()
         }
       } catch (err) {
-        console.log(err);
+        console.error(err);
       }
     },
 

src/utils/wxShare.js

@@ -106,6 +106,8 @@ export const wechatShare = async (option = {}, successCB = () => {}) => {
   wxShare(shareOption, successCB);
 };
 
-Vue.prototype.wechatShare = wechatShare
+Vue.prototype.wechatShare = wechatShare;
+Vue.prototype.wxDisabledShare = wxDisabledShare;
+
 
 

src/views/share-merge-detail.vue

@@ -81,13 +81,15 @@
             <span class="c-title">目录</span>
             <span v-if="needShowUpdate" class="c-sub">每周更新课程</span>
           </div>
-          <CellListDetail
+          <CellListDetailShare
             :projectComponent="projectComponentDTOS"
             :actionList="actionList"
             :detailNum="detailNum"
             :courseRequire="courseRequire"
             :hasBindCard="hasBindCard"
             :limitTimes="limitTimes"
+            :logged="logged"
+            :projectId="projectId"
           />
         </div>
       </div>
@@ -97,14 +99,22 @@
       <div v-if="detailNum <= 9" class="no-more-bottom"></div>
     </div>
 
-    <div v-if="!hasBindCard && !isWeb" style="padding-top: 30px"></div>
+    <div style="padding-top: 20px"></div>
+    <!-- <div v-if="!hasBindCard && !isWeb" style="padding-top: 30px"></div> -->
 
-    <BindCardButton
+    <!-- <BindCardButton
       v-if="!hasBindCard && !isWeb"
       :cardInfo="cardInfo"
       @changeClick="changeClick"
       @gotoBuy="confirm"
-    ></BindCardButton>
+    ></BindCardButton>-->
+
+    <BindCardButtonShare
+      v-if="!hasBindCard"
+      :cardInfo="cardInfo"
+      @changeClick="changeClick"
+      @gotoBuy="confirm"
+    ></BindCardButtonShare>
 
     <!--去激活-->
     <ChangeCard
@@ -124,7 +134,7 @@
       ></span>
     </div>
 
-    <ShiKanCommonDialog
+    <!-- <ShiKanCommonDialog
       class="shikan"
       needSubContent
       content="试看结束"
@@ -132,7 +142,7 @@
       confirmBtnText="去购买"
       :isShowDialog="isShowSkDialog"
       @handlerAction="goBuyKc"
-    />
+    />-->
 
     <IOSDownloadDialog
       class="shikan"
@@ -142,6 +152,46 @@
       :isShowDialog="isShowIOSDownloadDialog"
       @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/course/pica-icon.png" alt />
+      <span :class="{'short': needShort}">{{downloadTips}}</span>
+    </div>
   </div>
 </template>
 <script>
@@ -149,7 +199,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 CommonTcPlayer from "@/components/common/common-tcplayer";
 import Loading from "@/components/common/common-loading";
 
@@ -169,8 +219,10 @@ import { getWebPageUrl, gotoPage, getAppVersion } from "@/utils/index";
 import { mapGetters, mapActions } from "vuex";
 import vueFilters from "@/utils/filter";
 import { Toast } from "vant";
-import BindCardButton from "@/components/cme/bind-card-button";
+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;
 let titleOffsetHeight = 50;
@@ -179,6 +231,7 @@ export default {
   data() {
     return {
       // token: "9B62E5874DA94979A54DB3E9DFC1443F",
+      downloadTips: "打开云鹊医APP",
       isWeb: window.__isWeb,
       isAndroid: __isAndroid,
       textContent: "",
@@ -228,7 +281,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", //视频的显示高度，请尽量使用视频分辨率高度
@@ -264,14 +317,17 @@ export default {
       needShowUpdate: false,
       skCourseId: 0,
       isShowSkDialog: false,
-      isShowIOSDownloadDialog: false
+      isShowEndDialog: false,
+      isShowFFDialog: false,
+      isShowIOSDownloadDialog: false,
+      needShort: false
     };
   },
   components: {
     CommonNavbar,
     CommonDescription,
     CommonSpliteLine,
-    CellListDetail,
+    CellListDetailShare,
     Loading,
     CommonTcPlayer,
     BasicInfo,
@@ -283,14 +339,15 @@ export default {
     ExjumperButton,
     CommonAdertImg,
     NoMoreContent,
-    BindCardButton,
+    BindCardButtonShare,
     ChangeCard,
     ShiKanCommonDialog,
-    IOSDownloadDialog
+    IOSDownloadDialog,
+    CourseCovers
   },
 
   computed: {
-    ...mapGetters(["userInfo"])
+    ...mapGetters(["userInfo", "logged"])
   },
 
   created() {
@@ -299,11 +356,14 @@ export default {
     this.projectId = this.$route.query.id || 1;
     console.log("#######location", location);
 
-
     // TODO TOKEN问题，登陆问题
     // TODO 要先解码URL
     // _this.checkToken();
     // _this.setUserInfo(param);
+    const { token, info } = this.$store.state.user;
+    if (token && !info.id) {
+      this.$store.dispatch('getUserInfo');
+    } 
     _this.getProjectInfoById();
 
     // 调用广告位接口
@@ -311,14 +371,26 @@ export default {
   },
   mounted() {
     window.addEventListener("scroll", this.scrollFun);
-    const _this = this;
+    setTimeout(() => {
+      this.downloadTips = '';
+      this.needShort = true;
+    }, 5000);
   },
   beforeDestroyed() {
     this.$refs.tcPlayerRef && this.$refs.tcPlayerRef.pause();
     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() {
@@ -545,10 +617,11 @@ export default {
     getProjectInfoById() {
       let _this = this;
       let param = {
-        token:
-          _this.userInfo.userToken ||
-          this.token ||
-          "47993ED00ECB46CE8D31ECF3AE34B4AA",
+        // token:
+        //   _this.userInfo.userToken ||
+        //   this.token ||
+        //   "47993ED00ECB46CE8D31ECF3AE34B4AA",
+        token: this.$store.state.user.token || this.token,
         setEntry: true
       };
       let videoUrl = this.$route.query.videoUrl || "";
@@ -664,6 +737,7 @@ export default {
           // });
 
           // 二次分享
+          // let shareUrl = encodeURIComponent(location.href);
           let shareUrl = location.href;
           this.wechatShare(
             {
@@ -821,7 +895,7 @@ export default {
     // 跳转到课程(H5)
     gotoCourseNew: function() {
       this.$refs.tcPlayerRef && this.$refs.tcPlayerRef.pause();
-      window.location.href = ""
+      window.location.href = "";
     },
 
     goBuyKc(type) {
@@ -971,6 +1045,48 @@ export default {
       height: 50px;
     }
   }
+  .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;
+      }
+    }
+  }
 }
 .no-more-bottom {
   position: relative;