星星测试提交

package-lock.json

@@ -4416,6 +4416,16 @@
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
       "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A=="
     },
+    "fundebug-javascript": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/fundebug-javascript/-/fundebug-javascript-1.9.0.tgz",
+      "integrity": "sha512-i+a9IIGyhIOPEBLbaH6plnMrPTukZ0YN7fXFZRQ6O+CwyQxNqQYye1PEax1LZeD3OJLp5UNRjtAlNSwb5grN3Q=="
+    },
+    "fundebug-vue": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/fundebug-vue/-/fundebug-vue-0.0.1.tgz",
+      "integrity": "sha512-dk6D5FASmvhUwepc5SL6221B9NHw6hZ7ZLU/nWuyRcrBrrOWbxiH30CrEYwr6VK76UlUb6mpJ+Mzr2r7sfqk8w=="
+    },
     "get-caller-file": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-1.0.3.tgz",

src/components/growthRecord.vue

+<template>
+  <div class="growthRecord" @scroll="scrollEvent">
+    <div class="year-header" id="yearHeader" ref="yearHeader">{{ dataTimer }}</div>
+    <div class="growthRecord-content" v-for="(item, index) in scoringCategoryData" :key="index">
+      <!-- 年 -->
+      <div class="growthRecord-content-year">{{ item.year }}年</div>
+      <div class="growthRecord-content-children" :data-timer="itemChild.cur_date" v-for="itemChild in item.monthArr">
+        <!-- 月，日 -->
+        <div class="growthRecord-content-left">
+          <span class="day">{{ itemChild.month.split('-')[1] }}</span><span class="mouth">{{ itemChild.month.split('-')[0] }}月</span>
+        </div>
+        <!-- 月日对应的content -->
+        <div class="growthRecord-content-right">
+          <div class="growthRecord-content-right-sleeping">{{ itemChild.element_title }}</div>
+          <div class="growthRecord-content-right-title">
+            <span class="title">{{ itemChild.category_name.split(' ')[0] + ' ' +itemChild.category_name.split(' ')[1] }}</span>
+            <img class="scoring-category-active" :src="scoringCategoryImage.scoringCategory1Active" alt="">
+            <span class="num">{{ itemChild.interest }}</span>
+            <img class="scoring-category-active" :src="scoringCategoryImage.scoringCategory2Active" alt="">
+            <span class="num">{{ itemChild.concent }}</span>
+            <img class="scoring-category-active" :src="scoringCategoryImage.scoringCategory3Active" alt="">
+            <span class="num">{{ itemChild.parent_child }}</span>
+          </div>
+          <div class="rowthRecord-content-sub">
+            <span class="text">{{ itemChild.growth_record }}</span>
+<!--            <span class=""><img class="xiajiantou" :src="scoringCategoryImage.xiajiantou" alt=""></span>-->
+          </div>
+          <div class="timer">{{ itemChild.created_at.split(' ')[1] }}</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script type="text/ecmascript-6">
+  import { getUserGrowthListApi } from "../service/api";
+  import { scoringCategory }      from "../util/imgUrl";
+
+  export default {
+    name: 'growthRecord',
+    data() {
+      return {
+        dataTimer: '',            // 获取滚动时间
+        scoringCategoryData: [],  // 获取数据
+        scoringCategoryImage: scoringCategory // 获取图片
+      }
+    },
+    methods: {
+      async userGrowthRecordList() {
+        const userGrowthRecordData = await getUserGrowthListApi();
+        console.log(userGrowthRecordData)
+        userGrowthRecordData.map(item => {
+          // 重新转化数据
+          item.monthArr = [];
+          Object.values(item.month).map(itemchild => item.monthArr.push(itemchild[0]))
+        })
+        this.scoringCategoryData = userGrowthRecordData;
+        // 初始化滚动值
+        this.dataTimer = userGrowthRecordData[0].monthArr[0].cur_date;
+      },
+      /**
+       * 滚动监听
+       * @param e
+       */
+      scrollEvent(e) {
+        let scroll = document.documentElement.scrollTop || document.body.scrollTop,
+            growthRecordContentChildren = document.querySelectorAll('.growthRecord-content-children');
+        for(let i = 0; i < growthRecordContentChildren.length; i++) {
+          let top = growthRecordContentChildren[i].offsetTop,       // 获取 dom 离顶端的高度
+              height = growthRecordContentChildren[i].offsetHeight, // 获取 dom 高度
+              dataTimer = growthRecordContentChildren[i].getAttribute('data-timer'); // 获取 dom 里的时间
+          if(scroll >= top && scroll <= top + height)
+            this.dataTimer = dataTimer;
+        }
+      }
+    },
+    mounted() {
+      window.addEventListener('scroll', this.scrollEvent, false)
+      this.userGrowthRecordList()
+    }
+  }
+</script>
+
+<style lang="less" type="text/less">
+  @import "../util/public";
+
+  .growthRecord {
+    width: 100%;
+    padding: 20 * @toVw;
+    box-sizing: border-box;
+    .year-header {
+      width: 100%;
+      height: 30 * @toVw;
+      padding-left: 20 * @toVw;
+      position: fixed;
+      line-height: 30 * @toVw;
+      background: #F8F8F8;
+      top: 0;
+      left: 0;
+      z-index: 10;
+      font-size: 14 * @toVw;
+    }
+
+    .growthRecord-content {
+      width: 100%;
+      /* 年 */
+      .growthRecord-content-year {
+        padding: 16 * @toVw 0;
+        font-size: 24 * @toVw;
+        font-weight: 500;
+        color: #333333;
+      }
+      /* 月，日 */
+      .growthRecord-content-children {
+        width: 100%;
+        overflow: hidden;
+        padding-bottom: 15 * @toVw;
+        .growthRecord-content-left {
+          width: 60 * @toVw;
+          float: left;
+          .day {
+            font-size: 22 * @toVw;
+            font-weight: 500;
+            color: #333;
+          }
+          .mouth {
+            padding-left: 2px;
+            font-size: 14 * @toVw;
+            color: #333;
+          }
+        }
+        /* 月日对应的content */
+        .growthRecord-content-right {
+          width: calc(100% - 16vw);
+          padding: 12 * @toVw;
+          float: left;
+          background: #e2f3fe;
+          border-radius: 5 * @toVw;
+          box-sizing: border-box;
+
+          .growthRecord-content-right-sleeping {
+            padding-bottom: 11 * @toVw;
+            font-size: 14 * @toVw;
+            font-weight: 500;
+            color: #333;
+          }
+          .growthRecord-content-right-title {
+            .title {
+              padding-right: 12 * @toVw;
+              vertical-align: middle;
+              font-size: 13 * @toVw;
+              font-weight: 500;
+              color: #333;
+            }
+
+            .scoring-category-active {
+              width: 20 * @toVw;
+              height: 20 * @toVw;
+              padding-left: 13 * @toVw;
+              vertical-align: middle;
+            }
+
+            .num {
+              vertical-align: middle;
+              font-size: 13 * @toVw;
+              color: #666666;
+            }
+          }
+
+          .rowthRecord-content-sub {
+            position: relative;
+            padding-top: 10 * @toVw;
+            line-height: 21 * @toVw;
+            font-size: 14 * @toVw;
+            color: #666666;
+            .text {
+              word-wrap: break-word;
+              word-break: break-all;
+              display: -webkit-box;
+              -webkit-box-orient: vertical;
+              -webkit-line-clamp: 3;
+              overflow: hidden;
+              /*text-align-last:justify;*/
+              /*text-align:justify;*/
+              /*text-justify:distribute-all-lines;*/
+            }
+            .xiajiantou {
+              width: 17 * @toVw;
+              height: 10 * @toVw;
+              position: absolute;
+              bottom: 0;
+              right: 0;
+            }
+          }
+
+          .timer {
+            padding-top: 10 * @toVw;
+            color: #666666;
+            font-size: 12 * @toVw;
+          }
+        }
+      }
+    }
+  }
+</style>

src/components/mine/index.vue

@@ -23,6 +23,9 @@
         <van-cell title="我的订单" ref="order" to="/order" @click="toOrder" is-link>
           <img slot="icon" :src="image.order" />
         </van-cell>
+        <van-cell title="成长记录" ref="star" to="/growthRecord" @click="toStar" is-link>
+          <img slot="icon" :src="image.yizi" />
+        </van-cell>
         <van-cell v-if="acitivityType==1" title="我的星星" ref="star" to="/starRank" @click="toStar" is-link>
           <img slot="icon" :src="image.mine_icon_star" />
           <!-- <div class="starNum" v-if="starNum">{{starNum}}颗</div> -->

src/components/newLesson/audio.vue

@@ -159,672 +159,403 @@
 </template>
 
 <script>
-import { Toast } from "vant";
-import { Popup } from "mint-ui";
-import tapToVideo from "../../assets/tapToVideo.png";
-import { ImagePreview } from "vant";
-import {
-  getUserCollectApi,
-  addUserCollectApi,
-  delUserCollectApi,
-  subUserLessonApi,
-  getUserWatchApi
-} from "../../service/api";
-import finishStuat from "../../assets/newLesson/finishStudy.png";
-import noFinishDia from "./nofinishdia";
-import sharePage from "./share";
-import starBlock from "./star";
-import audioGood from "../../assets/good.mp3";
-import audioGreat from "../../assets/great.mp3";
-import audioPerfect from "../../assets/perfect.mp3";
-export default {
-  name: "fun",
-  props: ["contentData"],
-  components: {
-    noFinishDia,
-    starBlock,
-    sharePage,
-    [Popup.name]: Popup
-  },
-  data() {
-    return {
-      imgModel: false,
-      userCourse: {},
-      finishStuat: finishStuat,
-      popupVisible: false,
-      collectPop: false,
-      index: 0,
-      star: false,
-      popupVisible2: false,
-      hasCollect: false,
-      ageShow: false,
-      imgPop: false,
-      startTime: "00:00",
-      overTime: "00:00",
-      range: 0,
-      showObj: {
-        audio: null,
-        change: false
-      },
-      share_show: false,
-      tapToVideo: tapToVideo,
-      playFlag: false,
-      offset: 0,
-      timer: null,
-      playType: Number(localStorage.getItem("playType")) | 0,
-      audioPoint: "",
-      stay_time: ""
-    };
-  },
-  mounted() {
-    this.changeAge(this.contentData.age);
-    this.userCourse = JSON.parse(localStorage.getItem("userCourse"));
-    if (this.userCourse.periods_list) {
-      this.checkCollect();
-    }
-  },
-  methods: {
-    ImagePreviewF(index) {
-      ImagePreview({
-        images: [this.showObj.audio[index].image],
-        lazyLoad: true,
-        startPosition: 0,
-        showIndex: false
-      });
-    },
-    changeStar(data) {
-      this.star = data;
-    },
-    backList() {
-      this.$emit("backList");
-    },
-    closeShare() {
-      this.share_show = false;
-    },
-    sendConsole(data) {
-      this.$sa.track("watchClick", {
-        buttonName: data,
-        dayModule: JSON.parse(
-          localStorage.getItem("lessonDetail")
-        ).domTitle.slice(0, 9),
-        weekName: JSON.parse(
-          localStorage.getItem("lessonDetail")
-        ).domTitle.slice(
-          10,
-          JSON.parse(localStorage.getItem("lessonDetail")).domTitle.length
-        ),
-        elementName:
-          JSON.parse(localStorage.getItem("lessonDetail")).domTitle.slice(
-            0,
-            9
-          ) +
-          "-" +
-          JSON.parse(localStorage.getItem("lessonDetail")).domTitle.slice(
-            10,
-            JSON.parse(localStorage.getItem("lessonDetail")).domTitle.length
-          ),
-        themeID: JSON.parse(localStorage.getItem("lessonDetail")).themeID,
-        themeName: JSON.parse(localStorage.getItem("lessonDetail")).themeName,
-        goodsID: JSON.parse(localStorage.getItem("lessonDetail")).goodsID,
-        classID: JSON.parse(localStorage.getItem("lessonDetail")).classID,
-        partName: this.contentData.partName,
-        elementID: this.$route.query.elementId.toString()
-      });
-    },
-    // 改变收藏状态
-    changeCollect() {
-      if (this.hasCollect) {
-        // 神策埋点 点击操作
-        this.$sa.track("watchClick", {
-          dayModule: JSON.parse(
-            localStorage.getItem("lessonDetail")
-          ).domTitle.slice(0, 9),
-          weekName: JSON.parse(
-            localStorage.getItem("lessonDetail")
-          ).domTitle.slice(
-            10,
-            JSON.parse(localStorage.getItem("lessonDetail")).domTitle.length
-          ),
-          elementName:
-            JSON.parse(localStorage.getItem("lessonDetail")).domTitle.slice(
-              0,
-              9
-            ) +
-            "-" +
-            JSON.parse(localStorage.getItem("lessonDetail")).domTitle.slice(
-              10,
-              JSON.parse(localStorage.getItem("lessonDetail")).domTitle.length
-            ),
-          themeID: JSON.parse(localStorage.getItem("lessonDetail")).themeID,
-          themeName: JSON.parse(localStorage.getItem("lessonDetail")).themeName,
-          goodsID: JSON.parse(localStorage.getItem("lessonDetail")).goodsID,
-          classID: JSON.parse(localStorage.getItem("lessonDetail")).classID,
-          buttonName: "取消收藏",
-          partName: this.contentData.partName,
-          elementID: this.$route.query.elementId.toString()
-        });
-        delUserCollectApi(this.hasCollect).then(res => {
-          this.hasCollect = false;
-          Toast("取消收藏");
-          this.checkCollect();
-        });
-      } else {
-        // 神策埋点 点击操作
-        this.$sa.track("watchClick", {
-          dayModule: JSON.parse(
-            localStorage.getItem("lessonDetail")
-          ).domTitle.slice(0, 9),
-          weekName: JSON.parse(
-            localStorage.getItem("lessonDetail")
-          ).domTitle.slice(
-            10,
-            JSON.parse(localStorage.getItem("lessonDetail")).domTitle.length
-          ),
-          elementName:
-            JSON.parse(localStorage.getItem("lessonDetail")).domTitle.slice(
-              0,
-              9
-            ) +
-            "-" +
-            JSON.parse(localStorage.getItem("lessonDetail")).domTitle.slice(
-              10,
-              JSON.parse(localStorage.getItem("lessonDetail")).domTitle.length
-            ),
-          themeID: JSON.parse(localStorage.getItem("lessonDetail")).themeID,
-          themeName: JSON.parse(localStorage.getItem("lessonDetail")).themeName,
-          goodsID: JSON.parse(localStorage.getItem("lessonDetail")).goodsID,
-          classID: JSON.parse(localStorage.getItem("lessonDetail")).classID,
-          buttonName: "添加收藏",
-          partName: this.contentData.partName,
-          elementID: this.$route.query.elementId.toString()
-        });
-        let lessonDetail = JSON.parse(localStorage.getItem("lessonDetail"));
-        let json = {
-          category_id: lessonDetail.id,
-          type: 1,
-          title: this.showObj.audio[this.index].title,
-          sub_title: "来自于 " + lessonDetail.title,
-          url: this.showObj.audio[this.index].url,
-          cover: this.showObj.audio[this.index].image
-        };
-        addUserCollectApi(json)
-          .then(res => {
-            Toast("收藏成功,快去主页收藏夹看一看吧");
-            this.checkCollect();
-          })
-          .catch(this.checkCollect());
-      }
+  import { Toast } from "vant";
+  import { Popup } from "mint-ui";
+  import tapToVideo from "../../assets/tapToVideo.png";
+  import { ImagePreview } from "vant";
+  import {
+    getUserCollectApi,
+    addUserCollectApi,
+    delUserCollectApi,
+    subUserLessonApi,
+    getUserWatchApi
+  } from "../../service/api";
+  import finishStuat from "../../assets/newLesson/finishStudy1.png";
+  import noFinishDia from "./nofinishdia";
+  import sharePage from "./share";
+  import starBlock from "./star";
+  import audioGood from "../../assets/good.mp3";
+  import audioGreat from "../../assets/great.mp3";
+  import audioPerfect from "../../assets/perfect.mp3";
+  export default {
+    name: "fun",
+    props: ["contentData"],
+    components: {
+      noFinishDia,
+      starBlock,
+      sharePage,
+      [Popup.name]: Popup
     },
-    // 获取收藏状态
-    checkCollect() {
-      let json = {
-        url: this.showObj.audio[this.index].url
+    data() {
+      return {
+        imgModel: false,
+        userCourse: {},
+        finishStuat: finishStuat,
+        popupVisible: false,
+        collectPop: false,
+        index: 0,
+        star: false,
+        popupVisible2: false,
+        hasCollect: false,
+        ageShow: false,
+        imgPop: false,
+        startTime: "00:00",
+        overTime: "00:00",
+        range: 0,
+        showObj: {
+          audio: null,
+          change: false
+        },
+        share_show: false,
+        tapToVideo: tapToVideo,
+        playFlag: false,
+        offset: 0,
+        timer: null,
+        playType: Number(localStorage.getItem("playType")) | 0,
+        audioPoint: "",
+        stay_time: ""
       };
-      // debugger
-      getUserCollectApi(json).then(res => {
-        this.hasCollect = res.list.length < 1 ? false : res.list[0].id;
-      });
     },
-    // 播放音频
-    onPlay(flag) {
-      if (flag) {
-        // 神策埋点 点击操作
-        this.$sa.track("watchClick", {
-          dayModule: JSON.parse(
-            localStorage.getItem("lessonDetail")
-          ).domTitle.slice(0, 9),
-          weekName: JSON.parse(
-            localStorage.getItem("lessonDetail")
-          ).domTitle.slice(
-            10,
-            JSON.parse(localStorage.getItem("lessonDetail")).domTitle.length
-          ),
-          elementName:
-            JSON.parse(localStorage.getItem("lessonDetail")).domTitle.slice(
-              0,
-              9
-            ) +
-            "-" +
-            JSON.parse(localStorage.getItem("lessonDetail")).domTitle.slice(
-              10,
-              JSON.parse(localStorage.getItem("lessonDetail")).domTitle.length
-            ),
-          themeID: JSON.parse(localStorage.getItem("lessonDetail")).themeID,
-          themeName: JSON.parse(localStorage.getItem("lessonDetail")).themeName,
-          goodsID: JSON.parse(localStorage.getItem("lessonDetail")).goodsID,
-          classID: JSON.parse(localStorage.getItem("lessonDetail")).classID,
-          buttonName: "播放音频",
-          partName: this.contentData.partName,
-          elementID: this.$route.query.elementId.toString()
-        });
+    mounted() {
+      if(this.$route.params.evaluate === 1)
+        this.finishStudy()
+      this.changeAge(this.contentData.age);
+      this.userCourse = JSON.parse(localStorage.getItem("userCourse"));
+      if (this.userCourse.periods_list) {
+        this.checkCollect();
       }
-      setTimeout(()=>{
-        this.$refs.audio.play();
-      },100)
-      // this.$refs.audio.play();
-      // this.$nextTick(()=>{
-      //   // console.log(this.$refs.audio)
-      //   this.$refs.audio.play();
-      // })
     },
-    // 播放暂停
-    onStop(flag) {
-      if (flag) {
-        // 神策埋点 点击操作
+    methods: {
+      ImagePreviewF(index) {
+        ImagePreview({
+          images: [this.showObj.audio[index].image],
+          lazyLoad: true,
+          startPosition: 0,
+          showIndex: false
+        });
+      },
+      changeStar(data) {
+        this.star = data;
+      },
+      backList() {
+        this.$emit("backList");
+      },
+      closeShare() {
+        this.share_show = false;
+      },
+      sendConsole(data) {
         this.$sa.track("watchClick", {
+          buttonName: data,
           dayModule: JSON.parse(
-            localStorage.getItem("lessonDetail")
+              localStorage.getItem("lessonDetail")
           ).domTitle.slice(0, 9),
           weekName: JSON.parse(
-            localStorage.getItem("lessonDetail")
+              localStorage.getItem("lessonDetail")
           ).domTitle.slice(
-            10,
-            JSON.parse(localStorage.getItem("lessonDetail")).domTitle.length
-          ),
-          elementName:
-            JSON.parse(localStorage.getItem("lessonDetail")).domTitle.slice(
-              0,
-              9
-            ) +
-            "-" +
-            JSON.parse(localStorage.getItem("lessonDetail")).domTitle.slice(
               10,
               JSON.parse(localStorage.getItem("lessonDetail")).domTitle.length
-            ),
-          themeID: JSON.parse(localStorage.getItem("lessonDetail")).themeID,
-          themeName: JSON.parse(localStorage.getItem("lessonDetail")).themeName,
-          goodsID: JSON.parse(localStorage.getItem("lessonDetail")).goodsID,
-          classID: JSON.parse(localStorage.getItem("lessonDetail")).classID,
-          buttonName: "暂停播放",
-          partName: this.contentData.partName,
-          elementID: this.$route.query.elementId.toString()
-        });
-      }
-      this.$refs.audio.pause();
-      this.playFlag = false;
-      // console.log(this.$refs.imgItem)
-      var iTransform = getComputedStyle(this.$refs.imgItem).transform;
-      var cTransform = getComputedStyle(this.$refs.imageBlock).transform;
-      this.$refs.imageBlock.style.transform =
-        cTransform === "none" ? iTransform : iTransform.concat(" ", cTransform);
-      this.$refs.imgItem.classList.remove("swin");
-    },
-    lastOne() {
-      this.$sa.track("watchClick", {
-        dayModule: JSON.parse(
-          localStorage.getItem("lessonDetail")
-        ).domTitle.slice(0, 9),
-        weekName: JSON.parse(
-          localStorage.getItem("lessonDetail")
-        ).domTitle.slice(
-          10,
-          JSON.parse(localStorage.getItem("lessonDetail")).domTitle.length
-        ),
-        elementName:
-          JSON.parse(localStorage.getItem("lessonDetail")).domTitle.slice(
-            0,
-            9
-          ) +
-          "-" +
-          JSON.parse(localStorage.getItem("lessonDetail")).domTitle.slice(
-            10,
-            JSON.parse(localStorage.getItem("lessonDetail")).domTitle.length
-          ),
-        themeID: JSON.parse(localStorage.getItem("lessonDetail")).themeID,
-        themeName: JSON.parse(localStorage.getItem("lessonDetail")).themeName,
-        goodsID: JSON.parse(localStorage.getItem("lessonDetail")).goodsID,
-        classID: JSON.parse(localStorage.getItem("lessonDetail")).classID,
-        buttonName: "上一首",
-        partName: this.contentData.partName,
-        elementID: this.$route.query.elementId.toString()
-      });
-      if (this.index > 0) {
-        this.index--;
-        this.keepPlay();
-      } else if (this.playType === 0 && this.showObj.audio.length > 1) {
-        this.index = this.showObj.audio.length - 1;
-        this.keepPlay();
-      } else {
-        Toast("已经是第一首");
-      }
-    },
-    changeIndex(i) {
-      this.index = i;
-      this.popupVisible = false;
-      this.keepPlay();
-    },
-    keepPlay() {
-      if (this.playFlag) {
-        this.$nextTick(() => {
-          this.onPlay();
-        });
-      } else {
-        this.$nextTick(() => {
-          this.onStop();
-        });
-      }
-    },
-    nextOne(flag) {
-      if (flag) {
-        // 神策埋点 点击操作
-        this.$sa.track("watchClick", {
-          dayModule: JSON.parse(
-            localStorage.getItem("lessonDetail")
-          ).domTitle.slice(0, 9),
-          weekName: JSON.parse(
-            localStorage.getItem("lessonDetail")
-          ).domTitle.slice(
-            10,
-            JSON.parse(localStorage.getItem("lessonDetail")).domTitle.length
           ),
           elementName:
-            JSON.parse(localStorage.getItem("lessonDetail")).domTitle.slice(
-              0,
-              9
-            ) +
-            "-" +
-            JSON.parse(localStorage.getItem("lessonDetail")).domTitle.slice(
-              10,
-              JSON.parse(localStorage.getItem("lessonDetail")).domTitle.length
-            ),
+              JSON.parse(localStorage.getItem("lessonDetail")).domTitle.slice(
+                  0,
+                  9
+              ) +
+              "-" +
+              JSON.parse(localStorage.getItem("lessonDetail")).domTitle.slice(
+                  10,
+                  JSON.parse(localStorage.getItem("lessonDetail")).domTitle.length
+              ),
           themeID: JSON.parse(localStorage.getItem("lessonDetail")).themeID,
           themeName: JSON.parse(localStorage.getItem("lessonDetail")).themeName,
           goodsID: JSON.parse(localStorage.getItem("lessonDetail")).goodsID,
           classID: JSON.parse(localStorage.getItem("lessonDetail")).classID,
-          buttonName: "下一首",
           partName: this.contentData.partName,
           elementID: this.$route.query.elementId.toString()
         });
-      }
-      if (this.index < this.showObj.audio.length - 1) {
-        this.index++;
-        this.keepPlay();
-      } else if (this.playType === 0 && this.showObj.audio.length > 1) {
-        this.index = 0;
-        this.keepPlay();
-      } else {
-        Toast("已经是最后一首");
-      }
-    },
-    // 音频准备就绪
-    canPlay() {
-      let audio = this.$refs.audio;
-      this.offset = Math.ceil(parseInt(audio.duration) | 0);
-      this.$nextTick(() => {
-        this.getDuration();
-      });
-    },
-    // 播放中方法
-    playing() {
-      let audio = this.$refs.audio;
-      this.playFlag = true;
-      this.$refs.imgItem.classList.add("swin");
-      this.timer = setInterval(() => {
-        let min = null;
-        if (parseInt(audio.currentTime / 60) < 10) {
-          min = "0" + parseInt(audio.currentTime / 60);
-        } else {
-          min = parseInt(audio.currentTime / 60);
-        }
-        let sec = parseInt(audio.currentTime % 60);
-        if (sec < 10) {
-          sec = "0" + sec;
-        }
-        this.startTime = min + ":" + sec; /*  00:00  */
-        this.range = parseInt(audio.currentTime);
-        if (this.range === this.offset && this.offset !== 0) {
-          this.range = 0; /*播放结束后进度条归零*/
-          this.startTime = "00:00"; /*播放结束后时间归零*/
-          this.onOver();
-          clearInterval(this.timer);
-        }
-      }, 1000);
-    },
-    // 暂停计时器
-    stopTime() {
-      clearInterval(this.timer);
-    },
-    // 获取音频总长度
-    getDuration() {
-      let min = null;
-      if (this.offset === 0) {
-        this.overTime = "正在加载中...";
-      } else {
-        if (parseInt(this.offset / 60) < 10) {
-          min = "0" + parseInt(this.offset / 60);
-        } else {
-          min = parseInt(this.offset / 60);
-        }
-        let sec = parseInt(this.offset % 60);
-        if (sec < 10) {
-          sec = "0" + sec;
-        }
-        this.overTime = min + ":" + sec; /*  00:00  */
-      }
-    },
-    // 播放完毕
-    onOver() {
-      switch (this.playType) {
-        case 0:
-          if (this.index < this.showObj.audio.length - 1) {
-            this.index++;
-          } else {
-            this.index = 0;
-          }
-          this.$nextTick(() => {
-            this.onPlay();
-          });
-          break;
-        case 1:
-          this.range = 0;
-          this.$nextTick(() => {
-            this.onPlay();
-          });
-          break;
-        case 2:
-          if (this.index < this.showObj.audio.length - 1) {
-            this.index++;
-            this.$nextTick(() => {
-              this.onPlay();
-            });
-          } else {
-            this.index = 0;
-            this.$nextTick(() => {
-              this.onStop();
-            });
-          }
-      }
-    },
-    // 改变循环状态
-    changeType() {
-      this.playType < 2 ? this.playType++ : (this.playType = 0);
-      window.localStorage.setItem("playType", this.playType);
-      switch (this.playType) {
-        case 1:
+      },
+      // 改变收藏状态
+      changeCollect() {
+        if (this.hasCollect) {
           // 神策埋点 点击操作
           this.$sa.track("watchClick", {
             dayModule: JSON.parse(
-              localStorage.getItem("lessonDetail")
+                localStorage.getItem("lessonDetail")
             ).domTitle.slice(0, 9),
             weekName: JSON.parse(
-              localStorage.getItem("lessonDetail")
+                localStorage.getItem("lessonDetail")
             ).domTitle.slice(
-              10,
-              JSON.parse(localStorage.getItem("lessonDetail")).domTitle.length
-            ),
-            elementName:
-              JSON.parse(localStorage.getItem("lessonDetail")).domTitle.slice(
-                0,
-                9
-              ) +
-              "-" +
-              JSON.parse(localStorage.getItem("lessonDetail")).domTitle.slice(
                 10,
                 JSON.parse(localStorage.getItem("lessonDetail")).domTitle.length
-              ),
+            ),
+            elementName:
+                JSON.parse(localStorage.getItem("lessonDetail")).domTitle.slice(
+                    0,
+                    9
+                ) +
+                "-" +
+                JSON.parse(localStorage.getItem("lessonDetail")).domTitle.slice(
+                    10,
+                    JSON.parse(localStorage.getItem("lessonDetail")).domTitle.length
+                ),
             themeID: JSON.parse(localStorage.getItem("lessonDetail")).themeID,
-            themeName: JSON.parse(localStorage.getItem("lessonDetail"))
-              .themeName,
+            themeName: JSON.parse(localStorage.getItem("lessonDetail")).themeName,
             goodsID: JSON.parse(localStorage.getItem("lessonDetail")).goodsID,
             classID: JSON.parse(localStorage.getItem("lessonDetail")).classID,
-            buttonName: "单曲循环",
+            buttonName: "取消收藏",
             partName: this.contentData.partName,
             elementID: this.$route.query.elementId.toString()
           });
-          Toast("单曲循环");
-          break;
-        case 2:
+          delUserCollectApi(this.hasCollect).then(res => {
+            this.hasCollect = false;
+            Toast("取消收藏");
+            this.checkCollect();
+          });
+        } else {
           // 神策埋点 点击操作
           this.$sa.track("watchClick", {
             dayModule: JSON.parse(
-              localStorage.getItem("lessonDetail")
+                localStorage.getItem("lessonDetail")
             ).domTitle.slice(0, 9),
             weekName: JSON.parse(
-              localStorage.getItem("lessonDetail")
+                localStorage.getItem("lessonDetail")
             ).domTitle.slice(
-              10,
-              JSON.parse(localStorage.getItem("lessonDetail")).domTitle.length
+                10,
+                JSON.parse(localStorage.getItem("lessonDetail")).domTitle.length
             ),
             elementName:
-              JSON.parse(localStorage.getItem("lessonDetail")).domTitle.slice(
-                0,
-                9
-              ) +
-              "-" +
-              JSON.parse(localStorage.getItem("lessonDetail")).domTitle.slice(
+                JSON.parse(localStorage.getItem("lessonDetail")).domTitle.slice(
+                    0,
+                    9
+                ) +
+                "-" +
+                JSON.parse(localStorage.getItem("lessonDetail")).domTitle.slice(
+                    10,
+                    JSON.parse(localStorage.getItem("lessonDetail")).domTitle.length
+                ),
+            themeID: JSON.parse(localStorage.getItem("lessonDetail")).themeID,
+            themeName: JSON.parse(localStorage.getItem("lessonDetail")).themeName,
+            goodsID: JSON.parse(localStorage.getItem("lessonDetail")).goodsID,
+            classID: JSON.parse(localStorage.getItem("lessonDetail")).classID,
+            buttonName: "添加收藏",
+            partName: this.contentData.partName,
+            elementID: this.$route.query.elementId.toString()
+          });
+          let lessonDetail = JSON.parse(localStorage.getItem("lessonDetail"));
+          let json = {
+            category_id: lessonDetail.id,
+            type: 1,
+            title: this.showObj.audio[this.index].title,
+            sub_title: "来自于 " + lessonDetail.title,
+            url: this.showObj.audio[this.index].url,
+            cover: this.showObj.audio[this.index].image
+          };
+          addUserCollectApi(json)
+              .then(res => {
+                Toast("收藏成功,快去主页收藏夹看一看吧");
+                this.checkCollect();
+              })
+              .catch(this.checkCollect());
+        }
+      },
+      // 获取收藏状态
+      checkCollect() {
+        let json = {
+          url: this.showObj.audio[this.index].url
+        };
+        // debugger
+        getUserCollectApi(json).then(res => {
+          this.hasCollect = res.list.length < 1 ? false : res.list[0].id;
+        });
+      },
+      // 播放音频
+      onPlay(flag) {
+        if (flag) {
+          // 神策埋点 点击操作
+          this.$sa.track("watchClick", {
+            dayModule: JSON.parse(
+                localStorage.getItem("lessonDetail")
+            ).domTitle.slice(0, 9),
+            weekName: JSON.parse(
+                localStorage.getItem("lessonDetail")
+            ).domTitle.slice(
                 10,
                 JSON.parse(localStorage.getItem("lessonDetail")).domTitle.length
-              ),
+            ),
+            elementName:
+                JSON.parse(localStorage.getItem("lessonDetail")).domTitle.slice(
+                    0,
+                    9
+                ) +
+                "-" +
+                JSON.parse(localStorage.getItem("lessonDetail")).domTitle.slice(
+                    10,
+                    JSON.parse(localStorage.getItem("lessonDetail")).domTitle.length
+                ),
             themeID: JSON.parse(localStorage.getItem("lessonDetail")).themeID,
-            themeName: JSON.parse(localStorage.getItem("lessonDetail"))
-              .themeName,
+            themeName: JSON.parse(localStorage.getItem("lessonDetail")).themeName,
             goodsID: JSON.parse(localStorage.getItem("lessonDetail")).goodsID,
             classID: JSON.parse(localStorage.getItem("lessonDetail")).classID,
-            buttonName: "顺序播放",
+            buttonName: "播放音频",
             partName: this.contentData.partName,
             elementID: this.$route.query.elementId.toString()
           });
-          Toast("顺序播放");
-          break;
-        case 0:
+        }
+        this.$nextTick(()=>{
+          this.$refs.audio.play();
+        })
+      },
+      // 播放暂停
+      onStop(flag) {
+        if (flag) {
           // 神策埋点 点击操作
           this.$sa.track("watchClick", {
             dayModule: JSON.parse(
-              localStorage.getItem("lessonDetail")
+                localStorage.getItem("lessonDetail")
             ).domTitle.slice(0, 9),
             weekName: JSON.parse(
-              localStorage.getItem("lessonDetail")
+                localStorage.getItem("lessonDetail")
             ).domTitle.slice(
-              10,
-              JSON.parse(localStorage.getItem("lessonDetail")).domTitle.length
+                10,
+                JSON.parse(localStorage.getItem("lessonDetail")).domTitle.length
             ),
             elementName:
+                JSON.parse(localStorage.getItem("lessonDetail")).domTitle.slice(
+                    0,
+                    9
+                ) +
+                "-" +
+                JSON.parse(localStorage.getItem("lessonDetail")).domTitle.slice(
+                    10,
+                    JSON.parse(localStorage.getItem("lessonDetail")).domTitle.length
+                ),
+            themeID: JSON.parse(localStorage.getItem("lessonDetail")).themeID,
+            themeName: JSON.parse(localStorage.getItem("lessonDetail")).themeName,
+            goodsID: JSON.parse(localStorage.getItem("lessonDetail")).goodsID,
+            classID: JSON.parse(localStorage.getItem("lessonDetail")).classID,
+            buttonName: "暂停播放",
+            partName: this.contentData.partName,
+            elementID: this.$route.query.elementId.toString()
+          });
+        }
+        this.$refs.audio.pause();
+        this.playFlag = false;
+        // console.log(this.$refs.imgItem)
+        var iTransform = getComputedStyle(this.$refs.imgItem).transform;
+        var cTransform = getComputedStyle(this.$refs.imageBlock).transform;
+        this.$refs.imageBlock.style.transform =
+            cTransform === "none" ? iTransform : iTransform.concat(" ", cTransform);
+        this.$refs.imgItem.classList.remove("swin");
+      },
+      lastOne() {
+        this.$sa.track("watchClick", {
+          dayModule: JSON.parse(
+              localStorage.getItem("lessonDetail")
+          ).domTitle.slice(0, 9),
+          weekName: JSON.parse(
+              localStorage.getItem("lessonDetail")
+          ).domTitle.slice(
+              10,
+              JSON.parse(localStorage.getItem("lessonDetail")).domTitle.length
+          ),
+          elementName:
               JSON.parse(localStorage.getItem("lessonDetail")).domTitle.slice(
-                0,
-                9
+                  0,
+                  9
               ) +
               "-" +
               JSON.parse(localStorage.getItem("lessonDetail")).domTitle.slice(
+                  10,
+                  JSON.parse(localStorage.getItem("lessonDetail")).domTitle.length
+              ),
+          themeID: JSON.parse(localStorage.getItem("lessonDetail")).themeID,
+          themeName: JSON.parse(localStorage.getItem("lessonDetail")).themeName,
+          goodsID: JSON.parse(localStorage.getItem("lessonDetail")).goodsID,
+          classID: JSON.parse(localStorage.getItem("lessonDetail")).classID,
+          buttonName: "上一首",
+          partName: this.contentData.partName,
+          elementID: this.$route.query.elementId.toString()
+        });
+        if (this.index > 0) {
+          this.index--;
+          this.keepPlay();
+        } else if (this.playType === 0 && this.showObj.audio.length > 1) {
+          this.index = this.showObj.audio.length - 1;
+          this.keepPlay();
+        } else {
+          Toast("已经是第一首");
+        }
+      },
+      changeIndex(i) {
+        this.index = i;
+        this.popupVisible = false;
+        this.keepPlay();
+      },
+      keepPlay() {
+        if (this.playFlag) {
+          this.$nextTick(() => {
+            this.onPlay();
+          });
+        } else {
+          this.$nextTick(() => {
+            this.onStop();
+          });
+        }
+      },
+      nextOne(flag) {
+        if (flag) {
+          // 神策埋点 点击操作
+          this.$sa.track("watchClick", {
+            dayModule: JSON.parse(
+                localStorage.getItem("lessonDetail")
+            ).domTitle.slice(0, 9),
+            weekName: JSON.parse(
+                localStorage.getItem("lessonDetail")
+            ).domTitle.slice(
                 10,
                 JSON.parse(localStorage.getItem("lessonDetail")).domTitle.length
-              ),
+            ),
+            elementName:
+                JSON.parse(localStorage.getItem("lessonDetail")).domTitle.slice(
+                    0,
+                    9
+                ) +
+                "-" +
+                JSON.parse(localStorage.getItem("lessonDetail")).domTitle.slice(
+                    10,
+                    JSON.parse(localStorage.getItem("lessonDetail")).domTitle.length
+                ),
             themeID: JSON.parse(localStorage.getItem("lessonDetail")).themeID,
-            themeName: JSON.parse(localStorage.getItem("lessonDetail"))
-              .themeName,
+            themeName: JSON.parse(localStorage.getItem("lessonDetail")).themeName,
             goodsID: JSON.parse(localStorage.getItem("lessonDetail")).goodsID,
             classID: JSON.parse(localStorage.getItem("lessonDetail")).classID,
-            buttonName: "列表循环",
+            buttonName: "下一首",
             partName: this.contentData.partName,
             elementID: this.$route.query.elementId.toString()
           });
-          Toast("列表循环");
-          break;
-      }
-    },
-    changeAge(value) {
-      if (this.contentData.content.age && value === 2) {
-        this.showObj = {
-          audio: this.contentData.content.audio2,
-          change: this.contentData.content.change2
-        };
-      } else {
-        this.showObj = {
-          audio: this.contentData.content.audio,
-          change: this.contentData.content.change
-        };
-      }
-      this.playFlag = false;
-      this.startTime = "00:00";
-      this.overTime = "00:00";
-    },
-    finishStudy() {
-      this.sendConsole("完成今日学习");
-      let lessonDetail = JSON.parse(localStorage.getItem("lessonDetail"));
-      let query = JSON.parse(sessionStorage.getItem("classQuery"));
-      let nowTime = Date.parse(new Date());
-      let lookTime = (nowTime - lessonDetail.nowTime) / 1000;
-      let json = {
-        page_type: 0,
-        page_id: 5,
-        stay_time: lookTime
-      };
-      subUserLessonApi(
-        query.elementId,
-        query.category_id,
-        query.periods_id,
-        json
-      ).then(res => {
-        lessonDetail.total_watch_time = res.total_watch_time;
-        lessonDetail.nowTime = nowTime;
-        lessonDetail.star_num = res.total_star_num;
-        localStorage.setItem("lessonDetail", JSON.stringify(lessonDetail));
-        if (
-          (Number(lookTime) + Number(lessonDetail.total_watch_time)) / 60 <
-          7
-        ) {
-          this.popupVisible2 = true;
-          // debugger
+        }
+        if (this.index < this.showObj.audio.length - 1) {
+          this.index++;
+          this.keepPlay();
+        } else if (this.playType === 0 && this.showObj.audio.length > 1) {
+          this.index = 0;
+          this.keepPlay();
         } else {
-          getUserWatchApi({ category_id: query.category_id }).then(res => {
-            this.$store.dispatch("setWatchDetail", res);
-            this.share_show = true;
-            // debugger
-          });
-          setTimeout(() => {
-            if (this.$store.state.lookStatus == 0) {
-              this.audioPoint = audioGood;
-            } else if (this.$store.state.lookStatus == 1) {
-              this.audioPoint = audioGreat;
-            } else {
-              this.audioPoint = audioPerfect;
-            }
-            this.$refs.audioDom.load();
-            setTimeout(() => {
-              this.$refs.audioDom.play();
-            }, 100);
-          }, 300);
+          Toast("已经是最后一首");
         }
-      });
-      // this.$refs.sharePage.playAudio()
-      // this.$refs.sharePage.initPage()
-    }
-  },
-  watch: {
-    contentData: {
-      handler: function() {
-        //特别注意，不能用箭头函数，箭头函数，this指向全局
-        this.changeAge(this.contentData.age);
-        this.index = 0;
-        this.checkCollect();
       },
-      deep: true
-    },
-    index(value) {
-      this.checkCollect();
-    },
-    range(value, value2) {
-      let audio = this.$refs.audio;
-      if (Math.abs(value - value2) > 2) {
+      // 音频准备就绪
+      canPlay() {
+        let audio = this.$refs.audio;
+        this.offset = Math.ceil(parseInt(audio.duration) | 0);
+        this.$nextTick(() => {
+          this.getDuration();
+        });
+      },
+      // 播放中方法
+      playing() {
+        let audio = this.$refs.audio;
+        this.playFlag = true;
+        this.$refs.imgItem.classList.add("swin");
         this.timer = setInterval(() => {
           let min = null;
           if (parseInt(audio.currentTime / 60) < 10) {
@@ -838,466 +569,331 @@ export default {
           }
           this.startTime = min + ":" + sec; /*  00:00  */
           this.range = parseInt(audio.currentTime);
-          if (this.range == this.offset && this.offset !== 0) {
+          if (this.range === this.offset && this.offset !== 0) {
             this.range = 0; /*播放结束后进度条归零*/
             this.startTime = "00:00"; /*播放结束后时间归零*/
             this.onOver();
             clearInterval(this.timer);
           }
         }, 1000);
-        audio.currentTime = value;
+      },
+      // 暂停计时器
+      stopTime() {
+        clearInterval(this.timer);
+      },
+      // 获取音频总长度
+      getDuration() {
+        let min = null;
+        if (this.offset === 0) {
+          this.overTime = "正在加载中...";
+        } else {
+          if (parseInt(this.offset / 60) < 10) {
+            min = "0" + parseInt(this.offset / 60);
+          } else {
+            min = parseInt(this.offset / 60);
+          }
+          let sec = parseInt(this.offset % 60);
+          if (sec < 10) {
+            sec = "0" + sec;
+          }
+          this.overTime = min + ":" + sec; /*  00:00  */
+        }
+      },
+      // 播放完毕
+      onOver() {
+        switch (this.playType) {
+          case 0:
+            if (this.index < this.showObj.audio.length - 1) {
+              this.index++;
+            } else {
+              this.index = 0;
+            }
+            this.$nextTick(() => {
+              this.onPlay();
+            });
+            break;
+          case 1:
+            this.range = 0;
+            this.$nextTick(() => {
+              this.onPlay();
+            });
+            break;
+          case 2:
+            if (this.index < this.showObj.audio.length - 1) {
+              this.index++;
+              this.$nextTick(() => {
+                this.onPlay();
+              });
+            } else {
+              this.index = 0;
+              this.$nextTick(() => {
+                this.onStop();
+              });
+            }
+        }
+      },
+      // 改变循环状态
+      changeType() {
+        this.playType < 2 ? this.playType++ : (this.playType = 0);
+        window.localStorage.setItem("playType", this.playType);
+        switch (this.playType) {
+          case 1:
+            // 神策埋点 点击操作
+            this.$sa.track("watchClick", {
+              dayModule: JSON.parse(
+                  localStorage.getItem("lessonDetail")
+              ).domTitle.slice(0, 9),
+              weekName: JSON.parse(
+                  localStorage.getItem("lessonDetail")
+              ).domTitle.slice(
+                  10,
+                  JSON.parse(localStorage.getItem("lessonDetail")).domTitle.length
+              ),
+              elementName:
+                  JSON.parse(localStorage.getItem("lessonDetail")).domTitle.slice(
+                      0,
+                      9
+                  ) +
+                  "-" +
+                  JSON.parse(localStorage.getItem("lessonDetail")).domTitle.slice(
+                      10,
+                      JSON.parse(localStorage.getItem("lessonDetail")).domTitle.length
+                  ),
+              themeID: JSON.parse(localStorage.getItem("lessonDetail")).themeID,
+              themeName: JSON.parse(localStorage.getItem("lessonDetail"))
+                  .themeName,
+              goodsID: JSON.parse(localStorage.getItem("lessonDetail")).goodsID,
+              classID: JSON.parse(localStorage.getItem("lessonDetail")).classID,
+              buttonName: "单曲循环",
+              partName: this.contentData.partName,
+              elementID: this.$route.query.elementId.toString()
+            });
+            Toast("单曲循环");
+            break;
+          case 2:
+            // 神策埋点 点击操作
+            this.$sa.track("watchClick", {
+              dayModule: JSON.parse(
+                  localStorage.getItem("lessonDetail")
+              ).domTitle.slice(0, 9),
+              weekName: JSON.parse(
+                  localStorage.getItem("lessonDetail")
+              ).domTitle.slice(
+                  10,
+                  JSON.parse(localStorage.getItem("lessonDetail")).domTitle.length
+              ),
+              elementName:
+                  JSON.parse(localStorage.getItem("lessonDetail")).domTitle.slice(
+                      0,
+                      9
+                  ) +
+                  "-" +
+                  JSON.parse(localStorage.getItem("lessonDetail")).domTitle.slice(
+                      10,
+                      JSON.parse(localStorage.getItem("lessonDetail")).domTitle.length
+                  ),
+              themeID: JSON.parse(localStorage.getItem("lessonDetail")).themeID,
+              themeName: JSON.parse(localStorage.getItem("lessonDetail"))
+                  .themeName,
+              goodsID: JSON.parse(localStorage.getItem("lessonDetail")).goodsID,
+              classID: JSON.parse(localStorage.getItem("lessonDetail")).classID,
+              buttonName: "顺序播放",
+              partName: this.contentData.partName,
+              elementID: this.$route.query.elementId.toString()
+            });
+            Toast("顺序播放");
+            break;
+          case 0:
+            // 神策埋点 点击操作
+            this.$sa.track("watchClick", {
+              dayModule: JSON.parse(
+                  localStorage.getItem("lessonDetail")
+              ).domTitle.slice(0, 9),
+              weekName: JSON.parse(
+                  localStorage.getItem("lessonDetail")
+              ).domTitle.slice(
+                  10,
+                  JSON.parse(localStorage.getItem("lessonDetail")).domTitle.length
+              ),
+              elementName:
+                  JSON.parse(localStorage.getItem("lessonDetail")).domTitle.slice(
+                      0,
+                      9
+                  ) +
+                  "-" +
+                  JSON.parse(localStorage.getItem("lessonDetail")).domTitle.slice(
+                      10,
+                      JSON.parse(localStorage.getItem("lessonDetail")).domTitle.length
+                  ),
+              themeID: JSON.parse(localStorage.getItem("lessonDetail")).themeID,
+              themeName: JSON.parse(localStorage.getItem("lessonDetail"))
+                  .themeName,
+              goodsID: JSON.parse(localStorage.getItem("lessonDetail")).goodsID,
+              classID: JSON.parse(localStorage.getItem("lessonDetail")).classID,
+              buttonName: "列表循环",
+              partName: this.contentData.partName,
+              elementID: this.$route.query.elementId.toString()
+            });
+            Toast("列表循环");
+            break;
+        }
+      },
+      changeAge(value) {
+        if (this.contentData.content.age && value === 2) {
+          this.showObj = {
+            audio: this.contentData.content.audio2,
+            change: this.contentData.content.change2
+          };
+        } else {
+          this.showObj = {
+            audio: this.contentData.content.audio,
+            change: this.contentData.content.change
+          };
+        }
+        this.playFlag = false;
+        this.startTime = "00:00";
+        this.overTime = "00:00";
+      },
+      finishStudy() {
+        this.sendConsole("完成今日学习");
+        let lessonDetail = JSON.parse(localStorage.getItem("lessonDetail"));
+        let query = JSON.parse(sessionStorage.getItem("classQuery"));
+        let nowTime = Date.parse(new Date());
+        let lookTime = (nowTime - lessonDetail.nowTime) / 1000;
+        let json = {
+          page_type: 0,
+          page_id: 5,
+          stay_time: lookTime
+        };
+        subUserLessonApi(
+            query.elementId,
+            query.category_id,
+            query.periods_id,
+            json
+        ).then(res => {
+          lessonDetail.total_watch_time = res.total_watch_time;
+          lessonDetail.nowTime = nowTime;
+          lessonDetail.star_num = res.total_star_num;
+          localStorage.setItem("lessonDetail", JSON.stringify(lessonDetail));
+          if (
+              (Number(lookTime) + Number(lessonDetail.total_watch_time)) / 60 <
+              7
+          ) {
+            this.popupVisible2 = true;
+            // debugger
+          } else {
+            getUserWatchApi({ category_id: query.category_id }).then(res => {
+              this.$store.dispatch("setWatchDetail", res);
+              // 从评价页面返回过来
+              if(this.$route.params.evaluate === 1){
+                this.share_show = true;
+                this.$route.params.evaluate = 0
+              } else {
+                this.$router.push({path: '/evaluate'})
+              }
+              // debugger
+            });
+            setTimeout(() => {
+              if (this.$store.state.lookStatus == 0) {
+                this.audioPoint = audioGood;
+              } else if (this.$store.state.lookStatus == 1) {
+                this.audioPoint = audioGreat;
+              } else {
+                this.audioPoint = audioPerfect;
+              }
+              this.$refs.audioDom.load();
+              setTimeout(() => {
+                this.$refs.audioDom.play();
+              }, 100);
+            }, 300);
+          }
+        });
+        // this.$refs.sharePage.playAudio()
+        // this.$refs.sharePage.initPage()
+      }
+    },
+    watch: {
+      contentData: {
+        handler: function() {
+          //特别注意，不能用箭头函数，箭头函数，this指向全局
+          this.changeAge(this.contentData.age);
+          this.index = 0;
+          this.checkCollect();
+        },
+        deep: true
+      },
+      index(value) {
+        this.checkCollect();
+      },
+      range(value, value2) {
+        let audio = this.$refs.audio;
+        if (Math.abs(value - value2) > 2) {
+          this.timer = setInterval(() => {
+            let min = null;
+            if (parseInt(audio.currentTime / 60) < 10) {
+              min = "0" + parseInt(audio.currentTime / 60);
+            } else {
+              min = parseInt(audio.currentTime / 60);
+            }
+            let sec = parseInt(audio.currentTime % 60);
+            if (sec < 10) {
+              sec = "0" + sec;
+            }
+            this.startTime = min + ":" + sec; /*  00:00  */
+            this.range = parseInt(audio.currentTime);
+            if (this.range == this.offset && this.offset !== 0) {
+              this.range = 0; /*播放结束后进度条归零*/
+              this.startTime = "00:00"; /*播放结束后时间归零*/
+              this.onOver();
+              clearInterval(this.timer);
+            }
+          }, 1000);
+          audio.currentTime = value;
+        }
       }
     }
-  }
-};
+  };
 </script>
 
 <style scoped lang="less">
-@import "../../util/public";
-.playImage {
-  background-size: 40 * @toVw 290 * @toVw;
-  display: inline-block;
-}
-.imgBox {
-  position: fixed;
-  width: 100%;
-  height: 100%;
-  top: 0;
-  left: 0;
-  .box {
-    width: 100%;
-    height: 100vh;
-    transform: translateX(0px);
-    img {
-      position: absolute;
-      width: 80vw;
-      margin: auto;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-    }
-  }
-}
-._282918034425091245 {
-  height: 8 * @toVw;
-  width: 9 * @toVw;
-  background-position: 0 0;
-}
-._154722344142123489 {
-  height: 5 * @toVw;
-  width: 9 * @toVw;
-  background-position: 0 -8 * @toVw;
-  vertical-align: bottom;
-}
-.next {
-  height: 16 * @toVw;
-  width: 16 * @toVw;
-  background-position: 0 -13 * @toVw;
-}
-.listPlay {
-  height: 16 * @toVw;
-  width: 16 * @toVw;
-  background-position: 0 -29 * @toVw;
-}
-.replay {
-  height: 16 * @toVw;
-  width: 16 * @toVw;
-  background-position: 0 -45 * @toVw;
-}
-.toBig {
-  height: 16 * @toVw;
-  width: 16 * @toVw;
-  background-position: 0 -61 * @toVw;
-}
-.replayAll {
-  height: 16 * @toVw;
-  width: 16 * @toVw;
-  background-position: 0 -77 * @toVw;
-}
-.collectDefault {
-  height: 16 * @toVw;
-  width: 16 * @toVw;
-  background-position: 0 -93 * @toVw;
-}
-.collect {
-  height: 16 * @toVw;
-  width: 16 * @toVw;
-  background-position: 0 -109 * @toVw;
-}
-.last {
-  height: 16 * @toVw;
-  width: 16 * @toVw;
-  background-position: 0 -125 * @toVw;
-}
-.list {
-  height: 16 * @toVw;
-  width: 16 * @toVw;
-  background-position: 0 -141 * @toVw;
-}
-.close {
-  height: 17 * @toVw;
-  width: 17 * @toVw;
-  background-position: 0 -157 * @toVw;
-}
-.zDefaultIcon {
-  height: 18 * @toVw;
-  width: 18 * @toVw;
-  background-position: 0 -174 * @toVw;
-  float: right;
-}
-.zIcon {
-  height: 18 * @toVw;
-  width: 18 * @toVw;
-  background-position: 0 -192 * @toVw;
-  float: right;
-}
-.play {
-  height: 40 * @toVw;
-  width: 40 * @toVw;
-  background-position: 0 -210 * @toVw;
-}
-.stop {
-  height: 40 * @toVw;
-  width: 40 * @toVw;
-  background-position: 0 -250 * @toVw;
-}
-.iconfont {
-  color: #cccccc;
-}
-.icon-icon_stop {
-  font-size: 50 * @toVw;
-  color: #69c0ff;
-}
-.icon-icon_begin {
-  font-size: 50 * @toVw;
-  color: #69c0ff;
-}
-.icon-icon_left {
-  height: 37 * @toVw;
-  width: 37 * @toVw;
-  font-size: 32 * @toVw;
-  color: #69c0ff;
-}
-.icon-icon_right {
-  height: 37 * @toVw;
-  width: 37 * @toVw;
-  font-size: 32 * @toVw;
-  color: #69c0ff;
-}
-.icon-icon_list {
-  font-size: 20 * @toVw;
-}
-.icon-icon_change1 {
-  font-size: 21 * @toVw;
-  width: 20 * @toVw;
-}
-.icon-icon_change {
-  font-size: 20 * @toVw;
-  width: 20 * @toVw;
-}
-.icon-icon_changge {
-  font-size: 19 * @toVw;
-  width: 20 * @toVw;
-}
-.hp-left {
-  position: relative;
-  .collect {
-    position: absolute;
-    right: 38 * @toVw;
-    bottom: 48 * @toVw;
-  }
-}
-.icon-icon_like1 {
-  color: #ff7d77;
-}
-.collect-block {
-  padding: 10 * @toVw;
-  border-radius: 4 * @toVw;
-  background: white;
-}
-@-webkit-keyframes spin {
-  from {
-    -webkit-transform: rotate(0deg);
-  }
-  to {
-    -webkit-transform: rotate(360deg);
-  }
-}
-@keyframes spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-.swin {
-  -webkit-animation: spin 8s linear 1s 5 alternate;
-  animation: spin 8s linear infinite;
-}
-.pause {
-  animation-play-state: paused;
-  -webkit-animation-play-state: paused;
-}
-.noanimation {
-  -webkit-animation: none !important;
-  animation: none !important;
-}
-.content {
-  background: white;
-  width: 315 * @toVw;
-  position: absolute;
-  top: 70 * @toVw;
-  left: 20 * @toVw;
-  right: 20 * @toVw;
-  bottom: 0;
-  overflow: auto;
-  margin: auto;
-  display: block;
-  border-radius: 8 * @toVw;
-  text-align: center;
-  padding: 10 * @toVw;
-  .image-block {
-    width: 188 * @toVw;
-    height: 188 * @toVw;
-    margin-top: 5 * @toVw;
-    box-shadow: 0 0 30 * @toVw 5 * @toVw #ddd;
-    overflow: hidden;
-    border-radius: 999 * @toVw;
-    box-shadow: 0px 0px 4px 0px rgba(96, 173, 240, 1);
-    border: 4px solid rgba(255, 255, 255, 1);
-    img {
-      width: 188 * @toVw;
-      height: 188 * @toVw;
-      border-radius: 999 * @toVw;
-    }
-  }
-  .title-block {
-    margin-top: 20 * @toVw;
-    margin-bottom: 20 * @toVw;
-    &.hp {
-      display: none;
-    }
-    .title {
-      font-size: 16 * @toVw;
-      font-family: PingFang-SC-Medium;
-      font-weight: 500;
-      color: rgba(102, 102, 102, 1);
-    }
-    .tips {
-      font-size: 14 * @toVw;
-      margin-top: 6 * @toVw;
-      font-family: PingFang-SC-Medium;
-      font-weight: 500;
-      color: rgba(153, 153, 153, 1);
-    }
-  }
-  .range-block {
-    width: 250 * @toVw;
-    margin-top: 10 * @toVw;
-    .time-block {
-      font-size: 12 * @toVw;
-      font-family: PingFang-SC-Medium;
-      font-weight: 500;
-      color: rgba(102, 102, 102, 1);
-      text-align: left;
-      &:after {
-        content: "";
-        display: block;
-
-        clear: both;
-      }
-      .left-time {
-        float: left;
-      }
-      .right-time {
-        float: right;
-      }
-    }
-    input[type="range"] {
-      -webkit-transform: translateZ(0);
-      transform: translateZ(0);
-      -webkit-appearance: none;
-      border: none;
-      outline: none;
-      background: -webkit-linear-gradient(#69c0ff, #69c0ff) no-repeat, #d8d8d8;
-      background-size: 75% 100%; /*设置左右宽度比例*/
-      width: 100%;
-      border-radius: 10 * @toVw; /*这个属性设置使填充进度条时的图形为圆角*/
-    }
-    input[type="range"]::-webkit-slider-thumb {
-      -webkit-appearance: none;
-    }
-    input[type="range"]::-webkit-slider-runnable-track {
-      -webkit-appearance: none;
-      height: 4 * @toVw;
-      border-radius: 2 * @toVw;
-    }
-    input[type="range"]:focus {
-      -webkit-appearance: none;
-      outline: none;
-    }
-    input[type="range"]::-webkit-slider-thumb {
-      border: none;
-      outline: none;
-      -webkit-appearance: none;
-      border-radius: 50%; /*外观设置为圆形*/
-      height: 16 * @toVw;
-      width: 16 * @toVw;
-      margin-top: -6 * @toVw; /*使滑块超出轨道部分的偏移量相等*/
-      background: #69c0ff;
-    }
-  }
-  .btn-group {
-    margin-top: 15 * @toVw;
-    width: 280 * @toVw;
-    display: -webkit-flex;
-    &.hp {
-      display: none;
-    }
-  }
-}
-.list-popup {
-  width: 375 * @toVw;
-  max-height: 345 * @toVw;
-  overflow: auto;
-  border-radius: 8 * @toVw 8 * @toVw 0 0;
-  background: white;
-  padding-top: 20 * @toVw;
-  .list-block {
-    display: block;
-    width: auto;
-    margin: 0 20 * @toVw;
-    padding: 12 * @toVw 36 * @toVw;
-    border-bottom: 1 * @toVw solid #dddddd;
-    &.active {
-      color: #49e2a5;
-    }
-  }
-  .close-btn {
-    text-align: center;
-    padding: 20 * @toVw;
-  }
-}
-.mint-popup {
-}
-.imgPop-block {
-  // max-height: 500 * @toVw;
-  // height: 100vh;
-  // width: 100vw;
-  overflow: auto;
-  img {
-    // width: 100vw;
-    width: 300 * @toVw;
-  }
-}
-.btn-block {
-  position: relative;
-  // margin-top: 15*@toVw;
-  text-align: center;
-  .age-block {
-    height: 28 * @toVw;
-    line-height: 28 * @toVw;
-    border: 1 * @toVw solid #666;
-    position: absolute;
-    padding: 0 13 * @toVw;
-    border-radius: 100 * @toVw;
-    font-size: 12 * @toVw;
-    font-family: PingFang-SC-Medium;
-    font-weight: 500;
-    color: rgba(102, 102, 102, 1);
-  }
-  .age-change-block {
-    position: absolute;
-    top: 37 * @toVw;
-    left: 0;
-    width: 66 * @toVw;
-    border-radius: 8 * @toVw;
-    border: 1 * @toVw solid #666666;
-    font-size: 12 * @toVw;
-    font-family: PingFang-SC-Medium;
-    font-weight: 500;
-    color: rgba(102, 102, 102, 1);
-    & > div {
-      padding: 6 * @toVw 11 * @toVw;
-      text-align: left;
-      &:first-child {
-        border-bottom: 1 * @toVw solid #eee;
-      }
-    }
-  }
-  .change-block {
-    border-radius: 1000 * @toVw;
-    width: 144 * @toVw;
-    border: 1 * @toVw solid #40a9ff;
-    &:after {
-      content: "";
-      display: block;
-      clear: both;
-    }
-    div {
-      float: left;
-      width: 50%;
-      border-radius: 100 * @toVw;
-      font-size: 12 * @toVw;
-      height: 28 * @toVw;
-      line-height: 28 * @toVw;
-      font-family: PingFang-SC-Medium;
-      font-weight: 500;
-      color: rgba(204, 204, 204, 1);
-      &.active {
-        background: #40a9ff;
-        color: white;
-      }
-    }
+  @import "../../util/public";
+  .playImage {
+    background-size: 40 * @toVw 290 * @toVw;
+    display: inline-block;
   }
-}
-.change-block-HP {
-  display: none;
-}
-.parent-finish {
-  // position: absolute;
-  // bottom: 0 * @toVw;
-  width: 100%;
-  left: 0;
-  top: 430 * @toVw;
-  .finish-block {
-    // position: absolute;
+  .imgBox {
+    position: fixed;
     width: 100%;
+    height: 100%;
+    top: 0;
     left: 0;
-    padding: 0;
-    margin: 20 * @toVw 0 0;
-    text-align: center;
-    bottom: 0;
-    img {
-      width: 202 * @toVw;
+    .box {
+      width: 100%;
+      height: 100vh;
+      transform: translateX(0px);
+      img {
+        position: absolute;
+        width: 80vw;
+        margin: auto;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+      }
     }
   }
-}
-@media screen and (orientation: landscape) {
-  @toVw: 100/667vw;
-  .finish-block {
-    display: none;
-  }
-  .playImage {
-    background: url("https://static-cdn.changchangenglish.com/new-sing/static/images/playImage.png?v=2")
-      no-repeat;
-    background-size: 40 * @toVw 225 * @toVw;
-    display: inline-block;
-  }
-  ._154722344142123489 {
-    height: 5 * @toVw;
+  ._282918034425091245 {
+    height: 8 * @toVw;
     width: 9 * @toVw;
     background-position: 0 0;
   }
-  ._282918034425091245 {
-    height: 8 * @toVw;
+  ._154722344142123489 {
+    height: 5 * @toVw;
     width: 9 * @toVw;
-    background-position: 0 -4 * @toVw;
+    background-position: 0 -8 * @toVw;
     vertical-align: bottom;
   }
-  .last {
+  .next {
     height: 16 * @toVw;
     width: 16 * @toVw;
     background-position: 0 -13 * @toVw;
@@ -1312,7 +908,7 @@ export default {
     width: 16 * @toVw;
     background-position: 0 -45 * @toVw;
   }
-  .next {
+  .toBig {
     height: 16 * @toVw;
     width: 16 * @toVw;
     background-position: 0 -61 * @toVw;
@@ -1322,43 +918,62 @@ export default {
     width: 16 * @toVw;
     background-position: 0 -77 * @toVw;
   }
-  .list {
+  .collectDefault {
     height: 16 * @toVw;
     width: 16 * @toVw;
     background-position: 0 -93 * @toVw;
   }
+  .collect {
+    height: 16 * @toVw;
+    width: 16 * @toVw;
+    background-position: 0 -109 * @toVw;
+  }
+  .last {
+    height: 16 * @toVw;
+    width: 16 * @toVw;
+    background-position: 0 -125 * @toVw;
+  }
+  .list {
+    height: 16 * @toVw;
+    width: 16 * @toVw;
+    background-position: 0 -141 * @toVw;
+  }
+  .close {
+    height: 17 * @toVw;
+    width: 17 * @toVw;
+    background-position: 0 -157 * @toVw;
+  }
   .zDefaultIcon {
     height: 18 * @toVw;
     width: 18 * @toVw;
-    background-position: 0 -109 * @toVw;
+    background-position: 0 -174 * @toVw;
     float: right;
   }
   .zIcon {
     height: 18 * @toVw;
     width: 18 * @toVw;
-    background-position: 0 -127 * @toVw;
+    background-position: 0 -192 * @toVw;
     float: right;
   }
   .play {
     height: 40 * @toVw;
     width: 40 * @toVw;
-    background-position: 0 -145 * @toVw;
+    background-position: 0 -210 * @toVw;
   }
   .stop {
     height: 40 * @toVw;
     width: 40 * @toVw;
-    background-position: 0 -185 * @toVw;
+    background-position: 0 -250 * @toVw;
+  }
+  .iconfont {
+    color: #cccccc;
   }
   .icon-icon_stop {
-    height: 50 * @toVw;
-    width: 50 * @toVw;
-    font-size: 48 * @toVw;
+    font-size: 50 * @toVw;
     color: #69c0ff;
   }
   .icon-icon_begin {
-    height: 50 * @toVw;
-    width: 50 * @toVw;
-    font-size: 48 * @toVw;
+    font-size: 50 * @toVw;
     color: #69c0ff;
   }
   .icon-icon_left {
@@ -1377,538 +992,926 @@ export default {
     font-size: 20 * @toVw;
   }
   .icon-icon_change1 {
-    font-size: 20 * @toVw;
+    font-size: 21 * @toVw;
+    width: 20 * @toVw;
   }
   .icon-icon_change {
     font-size: 20 * @toVw;
+    width: 20 * @toVw;
   }
   .icon-icon_changge {
-    font-size: 20 * @toVw;
+    font-size: 19 * @toVw;
+    width: 20 * @toVw;
   }
-
   .hp-left {
     position: relative;
-    margin-top: 8vh;
-    // margin-bottom: 1vh;
-    // margin-left: 0;
     .collect {
-      display: none;
+      position: absolute;
+      right: 38 * @toVw;
+      bottom: 48 * @toVw;
+    }
+  }
+  .icon-icon_like1 {
+    color: #ff7d77;
+  }
+  .collect-block {
+    padding: 10 * @toVw;
+    border-radius: 4 * @toVw;
+    background: white;
+  }
+  @-webkit-keyframes spin {
+    from {
+      -webkit-transform: rotate(0deg);
+    }
+    to {
+      -webkit-transform: rotate(360deg);
+    }
+  }
+  @keyframes spin {
+    from {
+      transform: rotate(0deg);
+    }
+    to {
+      transform: rotate(360deg);
     }
   }
-  .audio-page {
+  .swin {
+    -webkit-animation: spin 8s linear 1s 5 alternate;
+    animation: spin 8s linear infinite;
+  }
+  .pause {
+    animation-play-state: paused;
+    -webkit-animation-play-state: paused;
+  }
+  .noanimation {
+    -webkit-animation: none !important;
+    animation: none !important;
+  }
+  .content {
+    background: white;
+    width: 315 * @toVw;
     position: absolute;
-    top: 5 * @toVw;
-    bottom: 5 * @toVw;
-    left: 5 * @toVw;
-    right: 5 * @toVw;
+    top: 70 * @toVw;
+    left: 20 * @toVw;
+    right: 20 * @toVw;
+    bottom: 0;
     overflow: auto;
+    margin: auto;
+    display: block;
     border-radius: 8 * @toVw;
-    .content {
-      position: static;
-      height: 100%;
-      width: 100%;
-      display: -webkit-flex;
-      border-radius: 8 * @toVw;
-      padding: 0;
-      .hp-left {
-        flex: 1;
-        margin-right: 80 * @toVw;
-        .hp-top {
-          display: -webkit-flex;
-          display: flex;
-          width: 100%;
-        }
+    text-align: center;
+    padding: 10 * @toVw;
+    .image-block {
+      width: 188 * @toVw;
+      height: 188 * @toVw;
+      margin-top: 5 * @toVw;
+      box-shadow: 0 0 30 * @toVw 5 * @toVw #ddd;
+      overflow: hidden;
+      border-radius: 999 * @toVw;
+      box-shadow: 0px 0px 4px 0px rgba(96, 173, 240, 1);
+      border: 4px solid rgba(255, 255, 255, 1);
+      img {
+        width: 188 * @toVw;
+        height: 188 * @toVw;
+        border-radius: 999 * @toVw;
       }
-      .image-block {
-        flex: 1;
-        width: 150 * @toVw;
-        height: 150 * @toVw;
-        box-shadow: 0 0 30 * @toVw 5 * @toVw #ddd;
-        overflow: hidden;
-        display: block;
-        margin: auto;
-        border-radius: 99 * @toVw;
-        box-shadow: 0px 0px 4px 0px rgba(96, 173, 240, 1);
-        border: 4px solid rgba(255, 255, 255, 1);
-        img {
-          width: 100%;
-          border-radius: 999 * @toVw;
-        }
+    }
+    .title-block {
+      margin-top: 20 * @toVw;
+      margin-bottom: 20 * @toVw;
+      &.hp {
+        display: none;
+      }
+      .title {
+        font-size: 16 * @toVw;
+        font-family: PingFang-SC-Medium;
+        font-weight: 500;
+        color: rgba(102, 102, 102, 1);
       }
-      .btnBox {
-        flex: 1;
+      .tips {
+        font-size: 14 * @toVw;
+        margin-top: 6 * @toVw;
+        font-family: PingFang-SC-Medium;
+        font-weight: 500;
+        color: rgba(153, 153, 153, 1);
       }
-      .title-block {
-        margin-top: 24 * @toVw;
-        display: none;
-        &.hp {
-          display: -webkit-flex;
-          //  display: block;
-          width: 300 * @toVw;
+    }
+    .range-block {
+      width: 250 * @toVw;
+      margin-top: 10 * @toVw;
+      .time-block {
+        font-size: 12 * @toVw;
+        font-family: PingFang-SC-Medium;
+        font-weight: 500;
+        color: rgba(102, 102, 102, 1);
+        text-align: left;
+        &:after {
+          content: "";
+          display: block;
+
+          clear: both;
         }
-        .title {
-          font-size: 16 * @toVw;
-          font-family: PingFang-SC-Medium;
-          font-weight: 500;
-          // width: 100*@toVw;
-          color: rgba(102, 102, 102, 1);
+        .left-time {
+          float: left;
         }
-        .tips {
-          font-size: 14 * @toVw;
-          margin-top: 6 * @toVw;
-          font-family: PingFang-SC-Medium;
-          font-weight: 500;
-          color: rgba(153, 153, 153, 1);
+        .right-time {
+          float: right;
         }
       }
-      .range-block {
-        width: 422 * @toVw;
-        margin-top: 16 * @toVw;
-        // margin-left: 1vw;
-        .time-block {
-          font-size: 12 * @toVw;
-          font-family: PingFang-SC-Medium;
-          font-weight: 500;
-          color: rgba(102, 102, 102, 1);
-          text-align: left;
-          &:after {
-            content: "";
-            display: block;
-            clear: both;
-          }
-          .left-time {
-            float: left;
-          }
-          .right-time {
-            float: right;
-          }
-        }
-        input[type="range"] {
-          -webkit-transform: translateZ(0);
-          transform: translateZ(0);
-          -webkit-appearance: none;
-          background: -webkit-linear-gradient(#69c0ff, #69c0ff) no-repeat,
-            #d8d8d8;
-          background-size: 75% 100%; /*设置左右宽度比例*/
-          width: 100%;
-          border-radius: 10 * @toVw; /*这个属性设置使填充进度条时的图形为圆角*/
-        }
-        input[type="range"]::-webkit-slider-runnable-track {
-          height: 4 * @toVw;
-          border-radius: 2 * @toVw;
-        }
-        input[type="range"]::-webkit-slider-thumb {
-          -webkit-appearance: none;
-        }
-        input[type="range"]:focus {
-          outline: none;
-        }
-        input[type="range"]::-webkit-slider-thumb {
-          -webkit-appearance: none;
-          border-radius: 50%; /*外观设置为圆形*/
-          height: 16 * @toVw;
-          width: 16 * @toVw;
-          margin-top: -6 * @toVw; /*使滑块超出轨道部分的偏移量相等*/
-          background: #69c0ff;
-        }
+      input[type="range"] {
+        -webkit-transform: translateZ(0);
+        transform: translateZ(0);
+        -webkit-appearance: none;
+        border: none;
+        outline: none;
+        background: -webkit-linear-gradient(#69c0ff, #69c0ff) no-repeat, #d8d8d8;
+        background-size: 75% 100%; /*设置左右宽度比例*/
+        width: 100%;
+        border-radius: 10 * @toVw; /*这个属性设置使填充进度条时的图形为圆角*/
+      }
+      input[type="range"]::-webkit-slider-thumb {
+        -webkit-appearance: none;
       }
-      .btn-group {
-        margin-top: 15vh;
+      input[type="range"]::-webkit-slider-runnable-track {
+        -webkit-appearance: none;
+        height: 4 * @toVw;
+        border-radius: 2 * @toVw;
+      }
+      input[type="range"]:focus {
+        -webkit-appearance: none;
+        outline: none;
+      }
+      input[type="range"]::-webkit-slider-thumb {
+        border: none;
+        outline: none;
+        -webkit-appearance: none;
+        border-radius: 50%; /*外观设置为圆形*/
+        height: 16 * @toVw;
+        width: 16 * @toVw;
+        margin-top: -6 * @toVw; /*使滑块超出轨道部分的偏移量相等*/
+        background: #69c0ff;
+      }
+    }
+    .btn-group {
+      margin-top: 15 * @toVw;
+      width: 280 * @toVw;
+      display: -webkit-flex;
+      &.hp {
         display: none;
-        width: 200 * @toVw;
-        &.hp {
-          display: -webkit-flex;
+      }
+    }
+  }
+  .list-popup {
+    width: 375 * @toVw;
+    max-height: 345 * @toVw;
+    overflow: auto;
+    border-radius: 8 * @toVw 8 * @toVw 0 0;
+    background: white;
+    padding-top: 20 * @toVw;
+    .list-block {
+      display: block;
+      width: auto;
+      margin: 0 20 * @toVw;
+      padding: 12 * @toVw 36 * @toVw;
+      border-bottom: 1 * @toVw solid #dddddd;
+      &.active {
+        color: #49e2a5;
+      }
+    }
+    .close-btn {
+      text-align: center;
+      padding: 20 * @toVw;
+    }
+  }
+  .mint-popup {
+  }
+  .imgPop-block {
+    // max-height: 500 * @toVw;
+    // height: 100vh;
+    // width: 100vw;
+    overflow: auto;
+    img {
+      // width: 100vw;
+      width: 300 * @toVw;
+    }
+  }
+  .btn-block {
+    position: relative;
+    // margin-top: 15*@toVw;
+    text-align: center;
+    .age-block {
+      height: 28 * @toVw;
+      line-height: 28 * @toVw;
+      border: 1 * @toVw solid #666;
+      position: absolute;
+      padding: 0 13 * @toVw;
+      border-radius: 100 * @toVw;
+      font-size: 12 * @toVw;
+      font-family: PingFang-SC-Medium;
+      font-weight: 500;
+      color: rgba(102, 102, 102, 1);
+    }
+    .age-change-block {
+      position: absolute;
+      top: 37 * @toVw;
+      left: 0;
+      width: 66 * @toVw;
+      border-radius: 8 * @toVw;
+      border: 1 * @toVw solid #666666;
+      font-size: 12 * @toVw;
+      font-family: PingFang-SC-Medium;
+      font-weight: 500;
+      color: rgba(102, 102, 102, 1);
+      & > div {
+        padding: 6 * @toVw 11 * @toVw;
+        text-align: left;
+        &:first-child {
+          border-bottom: 1 * @toVw solid #eee;
         }
       }
     }
-    .list-popup {
-      width: 375 * @toVw;
-      max-height: 345 * @toVw;
-      overflow: auto;
-      border-radius: 8 * @toVw 8 * @toVw 0 0;
-      background: white;
-      padding-top: 20 * @toVw;
-      .list-block {
+    .change-block {
+      border-radius: 1000 * @toVw;
+      width: 144 * @toVw;
+      border: 1 * @toVw solid #40a9ff;
+      &:after {
+        content: "";
         display: block;
-        width: auto;
-        margin: 0 20 * @toVw;
-        padding: 12 * @toVw 36 * @toVw;
-        border-bottom: 1 * @toVw solid #dddddd;
+        clear: both;
+      }
+      div {
+        float: left;
+        width: 50%;
+        border-radius: 100 * @toVw;
+        font-size: 12 * @toVw;
+        height: 28 * @toVw;
+        line-height: 28 * @toVw;
+        font-family: PingFang-SC-Medium;
+        font-weight: 500;
+        color: rgba(204, 204, 204, 1);
         &.active {
-          color: #49e2a5;
+          background: #40a9ff;
+          color: white;
         }
       }
-      .close-btn {
-        text-align: center;
-        padding: 20 * @toVw;
-      }
     }
-    .imgPop-block {
-      max-height: 500 * @toVw;
-      overflow: auto;
+  }
+  .change-block-HP {
+    display: none;
+  }
+  .parent-finish {
+    // position: absolute;
+    // bottom: 0 * @toVw;
+    width: 100%;
+    left: 0;
+    top: 430 * @toVw;
+    .finish-block {
+      // position: absolute;
+      width: 100%;
+      left: 0;
+      padding: 0;
+      margin: 20 * @toVw 0 0;
+      text-align: center;
+      bottom: 0;
       img {
-        max-width: 300 * @toVw;
+        width: 202 * @toVw;
       }
     }
-    .btn-block {
+  }
+  @media screen and (orientation: landscape) {
+    @toVw: 100/667vw;
+    .finish-block {
+      display: none;
+    }
+    .playImage {
+      background: url("https://static-cdn.changchangenglish.com/new-sing/static/images/playImage.png?v=2")
+      no-repeat;
+      background-size: 40 * @toVw 225 * @toVw;
+      display: inline-block;
+    }
+    ._154722344142123489 {
+      height: 5 * @toVw;
+      width: 9 * @toVw;
+      background-position: 0 0;
+    }
+    ._282918034425091245 {
+      height: 8 * @toVw;
+      width: 9 * @toVw;
+      background-position: 0 -4 * @toVw;
+      vertical-align: bottom;
+    }
+    .last {
+      height: 16 * @toVw;
+      width: 16 * @toVw;
+      background-position: 0 -13 * @toVw;
+    }
+    .listPlay {
+      height: 16 * @toVw;
+      width: 16 * @toVw;
+      background-position: 0 -29 * @toVw;
+    }
+    .replay {
+      height: 16 * @toVw;
+      width: 16 * @toVw;
+      background-position: 0 -45 * @toVw;
+    }
+    .next {
+      height: 16 * @toVw;
+      width: 16 * @toVw;
+      background-position: 0 -61 * @toVw;
+    }
+    .replayAll {
+      height: 16 * @toVw;
+      width: 16 * @toVw;
+      background-position: 0 -77 * @toVw;
+    }
+    .list {
+      height: 16 * @toVw;
+      width: 16 * @toVw;
+      background-position: 0 -93 * @toVw;
+    }
+    .zDefaultIcon {
+      height: 18 * @toVw;
+      width: 18 * @toVw;
+      background-position: 0 -109 * @toVw;
+      float: right;
+    }
+    .zIcon {
+      height: 18 * @toVw;
+      width: 18 * @toVw;
+      background-position: 0 -127 * @toVw;
+      float: right;
+    }
+    .play {
+      height: 40 * @toVw;
+      width: 40 * @toVw;
+      background-position: 0 -145 * @toVw;
+    }
+    .stop {
+      height: 40 * @toVw;
+      width: 40 * @toVw;
+      background-position: 0 -185 * @toVw;
+    }
+    .icon-icon_stop {
+      height: 50 * @toVw;
+      width: 50 * @toVw;
+      font-size: 48 * @toVw;
+      color: #69c0ff;
+    }
+    .icon-icon_begin {
+      height: 50 * @toVw;
+      width: 50 * @toVw;
+      font-size: 48 * @toVw;
+      color: #69c0ff;
+    }
+    .icon-icon_left {
+      height: 37 * @toVw;
+      width: 37 * @toVw;
+      font-size: 32 * @toVw;
+      color: #69c0ff;
+    }
+    .icon-icon_right {
+      height: 37 * @toVw;
+      width: 37 * @toVw;
+      font-size: 32 * @toVw;
+      color: #69c0ff;
+    }
+    .icon-icon_list {
+      font-size: 20 * @toVw;
+    }
+    .icon-icon_change1 {
+      font-size: 20 * @toVw;
+    }
+    .icon-icon_change {
+      font-size: 20 * @toVw;
+    }
+    .icon-icon_changge {
+      font-size: 20 * @toVw;
+    }
+
+    .hp-left {
       position: relative;
-      min-width: 90 * @toVw;
-      margin-top: 0;
-      display: block;
-      height: 100%;
-      .age-block {
-        display: block;
-        position: static;
-        padding: 0;
-        height: 28 * @toVw;
-        width: 88 * @toVw;
-        line-height: 28 * @toVw;
-        border: 1 * @toVw solid #666;
-        border-radius: 100 * @toVw;
-        font-size: 12 * @toVw;
-        font-family: PingFang-SC-Medium;
-        font-weight: 500;
-        color: rgba(102, 102, 102, 1);
+      margin-top: 8vh;
+      // margin-bottom: 1vh;
+      // margin-left: 0;
+      .collect {
+        display: none;
       }
-      .age-change-block {
+    }
+    .audio-page {
+      position: absolute;
+      top: 5 * @toVw;
+      bottom: 5 * @toVw;
+      left: 5 * @toVw;
+      right: 5 * @toVw;
+      overflow: auto;
+      border-radius: 8 * @toVw;
+      .content {
         position: static;
-        width: 80 * @toVw;
-        margin-top: 10 * @toVw;
+        height: 100%;
+        width: 100%;
+        display: -webkit-flex;
         border-radius: 8 * @toVw;
-        border: 1 * @toVw solid #666666;
-        font-size: 12 * @toVw;
-        font-family: PingFang-SC-Medium;
-        font-weight: 500;
-        color: rgba(102, 102, 102, 1);
-        & > div {
-          padding: 6 * @toVw 11 * @toVw;
-          text-align: left;
-          &:first-child {
-            border-bottom: 1 * @toVw solid #eee;
+        padding: 0;
+        .hp-left {
+          flex: 1;
+          margin-right: 80 * @toVw;
+          .hp-top {
+            display: -webkit-flex;
+            display: flex;
+            width: 100%;
           }
         }
-      }
-      .change-block-HP {
-        position: fixed;
-        top: ~"calc(82vh)";
-        right: 40 * @toVw;
-        display: block;
-        width: 78 * @toVw;
-        img {
-          width: 100%;
+        .image-block {
+          flex: 1;
+          width: 150 * @toVw;
+          height: 150 * @toVw;
+          box-shadow: 0 0 30 * @toVw 5 * @toVw #ddd;
+          overflow: hidden;
+          display: block;
+          margin: auto;
+          border-radius: 99 * @toVw;
+          box-shadow: 0px 0px 4px 0px rgba(96, 173, 240, 1);
+          border: 4px solid rgba(255, 255, 255, 1);
+          img {
+            width: 100%;
+            border-radius: 999 * @toVw;
+          }
+        }
+        .btnBox {
+          flex: 1;
+        }
+        .title-block {
+          margin-top: 24 * @toVw;
+          display: none;
+          &.hp {
+            display: -webkit-flex;
+            //  display: block;
+            width: 300 * @toVw;
+          }
+          .title {
+            font-size: 16 * @toVw;
+            font-family: PingFang-SC-Medium;
+            font-weight: 500;
+            // width: 100*@toVw;
+            color: rgba(102, 102, 102, 1);
+          }
+          .tips {
+            font-size: 14 * @toVw;
+            margin-top: 6 * @toVw;
+            font-family: PingFang-SC-Medium;
+            font-weight: 500;
+            color: rgba(153, 153, 153, 1);
+          }
+        }
+        .range-block {
+          width: 422 * @toVw;
+          margin-top: 16 * @toVw;
+          // margin-left: 1vw;
+          .time-block {
+            font-size: 12 * @toVw;
+            font-family: PingFang-SC-Medium;
+            font-weight: 500;
+            color: rgba(102, 102, 102, 1);
+            text-align: left;
+            &:after {
+              content: "";
+              display: block;
+              clear: both;
+            }
+            .left-time {
+              float: left;
+            }
+            .right-time {
+              float: right;
+            }
+          }
+          input[type="range"] {
+            -webkit-transform: translateZ(0);
+            transform: translateZ(0);
+            -webkit-appearance: none;
+            background: -webkit-linear-gradient(#69c0ff, #69c0ff) no-repeat,
+            #d8d8d8;
+            background-size: 75% 100%; /*设置左右宽度比例*/
+            width: 100%;
+            border-radius: 10 * @toVw; /*这个属性设置使填充进度条时的图形为圆角*/
+          }
+          input[type="range"]::-webkit-slider-runnable-track {
+            height: 4 * @toVw;
+            border-radius: 2 * @toVw;
+          }
+          input[type="range"]::-webkit-slider-thumb {
+            -webkit-appearance: none;
+          }
+          input[type="range"]:focus {
+            outline: none;
+          }
+          input[type="range"]::-webkit-slider-thumb {
+            -webkit-appearance: none;
+            border-radius: 50%; /*外观设置为圆形*/
+            height: 16 * @toVw;
+            width: 16 * @toVw;
+            margin-top: -6 * @toVw; /*使滑块超出轨道部分的偏移量相等*/
+            background: #69c0ff;
+          }
+        }
+        .btn-group {
+          margin-top: 15vh;
+          display: none;
+          width: 200 * @toVw;
+          &.hp {
+            display: -webkit-flex;
+          }
         }
       }
-      .change-block {
-        display: none;
-      }
-    }
-  }
-}
-@media screen and (min-aspect-ratio: ~"20/8") {
-  @toVw: 100/900vw;
-  .playImage {
-    background: url("https://static-cdn.changchangenglish.com/new-sing/static/images/playImage.png?v=2")
-      no-repeat;
-    background-size: 40 * @toVw 225 * @toVw;
-    display: inline-block;
-  }
-  ._154722344142123489 {
-    height: 5 * @toVw;
-    width: 9 * @toVw;
-    background-position: 0 0;
-  }
-  ._282918034425091245 {
-    height: 8 * @toVw;
-    width: 9 * @toVw;
-    background-position: 0 -4 * @toVw;
-    vertical-align: bottom;
-  }
-  .last {
-    height: 16 * @toVw;
-    width: 16 * @toVw;
-    background-position: 0 -13 * @toVw;
-  }
-  .listPlay {
-    height: 16 * @toVw;
-    width: 16 * @toVw;
-    background-position: 0 -29 * @toVw;
-  }
-  .replay {
-    height: 16 * @toVw;
-    width: 16 * @toVw;
-    background-position: 0 -45 * @toVw;
-  }
-  .next {
-    height: 16 * @toVw;
-    width: 16 * @toVw;
-    background-position: 0 -61 * @toVw;
-  }
-  .replayAll {
-    height: 16 * @toVw;
-    width: 16 * @toVw;
-    background-position: 0 -77 * @toVw;
-  }
-  .list {
-    height: 16 * @toVw;
-    width: 16 * @toVw;
-    background-position: 0 -93 * @toVw;
-  }
-  .zDefaultIcon {
-    height: 18 * @toVw;
-    width: 18 * @toVw;
-    background-position: 0 -109 * @toVw;
-    float: right;
-  }
-  .zIcon {
-    height: 18 * @toVw;
-    width: 18 * @toVw;
-    background-position: 0 -127 * @toVw;
-    float: right;
-  }
-  .play {
-    height: 40 * @toVw;
-    width: 40 * @toVw;
-    background-position: 0 -145 * @toVw;
-  }
-  .stop {
-    height: 40 * @toVw;
-    width: 40 * @toVw;
-    background-position: 0 -185 * @toVw;
-  }
-  .icon-icon_stop {
-    height: 50 * @toVw;
-    width: 50 * @toVw;
-    font-size: 48 * @toVw;
-    color: #69c0ff;
-  }
-  .icon-icon_begin {
-    height: 50 * @toVw;
-    width: 50 * @toVw;
-    font-size: 48 * @toVw;
-    color: #69c0ff;
-  }
-  .icon-icon_left {
-    height: 37 * @toVw;
-    width: 37 * @toVw;
-    font-size: 32 * @toVw;
-    color: #69c0ff;
-  }
-  .icon-icon_right {
-    height: 37 * @toVw;
-    width: 37 * @toVw;
-    font-size: 32 * @toVw;
-    color: #69c0ff;
-  }
-  .icon-icon_list {
-    font-size: 20 * @toVw;
-  }
-  .icon-icon_change1 {
-    font-size: 20 * @toVw;
-  }
-  .icon-icon_change {
-    font-size: 20 * @toVw;
-  }
-  .icon-icon_changge {
-    font-size: 20 * @toVw;
-  }
-  .audio-page {
-    position: absolute;
-    top: 5 * @toVw;
-    bottom: 5 * @toVw;
-    left: 5 * @toVw;
-    right: 5 * @toVw;
-    overflow: auto;
-    border-radius: 8 * @toVw;
-    .content {
-      position: static;
-      height: 100%;
-      width: 100%;
-      display: -webkit-flex;
-      border-radius: 8 * @toVw;
-      padding: 0;
-      .hp-left {
-        flex: 1;
-        margin-right: 20 * @toVw;
-        .hp-top {
-          display: -webkit-flex;
-          width: 100%;
+      .list-popup {
+        width: 375 * @toVw;
+        max-height: 345 * @toVw;
+        overflow: auto;
+        border-radius: 8 * @toVw 8 * @toVw 0 0;
+        background: white;
+        padding-top: 20 * @toVw;
+        .list-block {
+          display: block;
+          width: auto;
+          margin: 0 20 * @toVw;
+          padding: 12 * @toVw 36 * @toVw;
+          border-bottom: 1 * @toVw solid #dddddd;
+          &.active {
+            color: #49e2a5;
+          }
+        }
+        .close-btn {
+          text-align: center;
+          padding: 20 * @toVw;
         }
       }
-      .image-block {
-        width: 150 * @toVw;
-        height: 150 * @toVw;
-        box-shadow: 0 0 30 * @toVw 5 * @toVw #ddd;
-        overflow: hidden;
-        display: block;
-        margin: auto;
-        border-radius: 75 * @toVw;
-        box-shadow: 0px 0px 4px 0px rgba(96, 173, 240, 1);
-        border: 4px solid rgba(255, 255, 255, 1);
+      .imgPop-block {
+        max-height: 500 * @toVw;
+        overflow: auto;
         img {
-          width: 100%;
+          max-width: 300 * @toVw;
         }
       }
-      .title-block {
-        margin-top: 24 * @toVw;
-        .title {
-          font-size: 16 * @toVw;
+      .btn-block {
+        position: relative;
+        min-width: 90 * @toVw;
+        margin-top: 0;
+        display: block;
+        height: 100%;
+        .age-block {
+          display: block;
+          position: static;
+          padding: 0;
+          height: 28 * @toVw;
+          width: 88 * @toVw;
+          line-height: 28 * @toVw;
+          border: 1 * @toVw solid #666;
+          border-radius: 100 * @toVw;
+          font-size: 12 * @toVw;
           font-family: PingFang-SC-Medium;
           font-weight: 500;
           color: rgba(102, 102, 102, 1);
         }
-        .tips {
-          font-size: 14 * @toVw;
-          margin-top: 6 * @toVw;
-          font-family: PingFang-SC-Medium;
-          font-weight: 500;
-          color: rgba(153, 153, 153, 1);
-        }
-      }
-      .range-block {
-        width: auto;
-        margin-top: 16 * @toVw;
-        .time-block {
+        .age-change-block {
+          position: static;
+          width: 80 * @toVw;
+          margin-top: 10 * @toVw;
+          border-radius: 8 * @toVw;
+          border: 1 * @toVw solid #666666;
           font-size: 12 * @toVw;
           font-family: PingFang-SC-Medium;
           font-weight: 500;
           color: rgba(102, 102, 102, 1);
-          text-align: left;
-          &:after {
-            content: "";
-            display: block;
-            clear: both;
-          }
-          .left-time {
-            float: left;
-          }
-          .right-time {
-            float: right;
+          & > div {
+            padding: 6 * @toVw 11 * @toVw;
+            text-align: left;
+            &:first-child {
+              border-bottom: 1 * @toVw solid #eee;
+            }
           }
         }
-        input[type="range"] {
-          -webkit-transform: translateZ(0);
-          transform: translateZ(0);
-          -webkit-appearance: none;
-          background: -webkit-linear-gradient(#69c0ff, #69c0ff) no-repeat,
-            #d8d8d8;
-          background-size: 75% 100%; /*设置左右宽度比例*/
-          width: 100%;
-          border-radius: 10 * @toVw; /*这个属性设置使填充进度条时的图形为圆角*/
-        }
-        input[type="range"]::-webkit-slider-thumb {
-          -webkit-appearance: none;
-        }
-        input[type="range"]::-webkit-slider-runnable-track {
-          height: 4 * @toVw;
-          border-radius: 2 * @toVw;
-        }
-        input[type="range"]:focus {
-          outline: none;
+        .change-block-HP {
+          position: fixed;
+          top: ~"calc(82vh)";
+          right: 40 * @toVw;
+          display: block;
+          width: 78 * @toVw;
+          img {
+            width: 100%;
+          }
         }
-        input[type="range"]::-webkit-slider-thumb {
-          -webkit-appearance: none;
-          border-radius: 50%; /*外观设置为圆形*/
-          height: 16 * @toVw;
-          width: 16 * @toVw;
-          margin-top: -6 * @toVw; /*使滑块超出轨道部分的偏移量相等*/
-          background: #69c0ff;
-        }
-      }
-      .btn-group {
-        margin-top: 15vh;
-        display: none;
-        width: 200 * @toVw;
-        &.hp {
-          display: -webkit-flex;
+        .change-block {
+          display: none;
         }
       }
     }
-    .list-popup {
-      width: 375 * @toVw;
-      max-height: 345 * @toVw;
-      overflow: auto;
-      border-radius: 8 * @toVw 8 * @toVw 0 0;
-      background: white;
-      padding-top: 20 * @toVw;
-      .list-block {
-        display: block;
-        width: auto;
-        margin: 0 20 * @toVw;
-        padding: 12 * @toVw 36 * @toVw;
-        border-bottom: 1 * @toVw solid #dddddd;
-        &.active {
-          color: #49e2a5;
-        }
-      }
-      .close-btn {
-        text-align: center;
-        padding: 20 * @toVw;
-      }
+  }
+  @media screen and (min-aspect-ratio: ~"20/8") {
+    @toVw: 100/900vw;
+    .playImage {
+      background: url("https://static-cdn.changchangenglish.com/new-sing/static/images/playImage.png?v=2")
+      no-repeat;
+      background-size: 40 * @toVw 225 * @toVw;
+      display: inline-block;
     }
-    .imgPop-block {
-      max-height: 500 * @toVw;
-      overflow: auto;
-      img {
-        max-width: 300 * @toVw;
-      }
+    ._154722344142123489 {
+      height: 5 * @toVw;
+      width: 9 * @toVw;
+      background-position: 0 0;
     }
-    .btn-block {
-      position: relative;
-      min-width: 90 * @toVw;
-      margin-top: 0;
-      display: block;
-      height: 100%;
-      .age-block {
-        display: block;
+    ._282918034425091245 {
+      height: 8 * @toVw;
+      width: 9 * @toVw;
+      background-position: 0 -4 * @toVw;
+      vertical-align: bottom;
+    }
+    .last {
+      height: 16 * @toVw;
+      width: 16 * @toVw;
+      background-position: 0 -13 * @toVw;
+    }
+    .listPlay {
+      height: 16 * @toVw;
+      width: 16 * @toVw;
+      background-position: 0 -29 * @toVw;
+    }
+    .replay {
+      height: 16 * @toVw;
+      width: 16 * @toVw;
+      background-position: 0 -45 * @toVw;
+    }
+    .next {
+      height: 16 * @toVw;
+      width: 16 * @toVw;
+      background-position: 0 -61 * @toVw;
+    }
+    .replayAll {
+      height: 16 * @toVw;
+      width: 16 * @toVw;
+      background-position: 0 -77 * @toVw;
+    }
+    .list {
+      height: 16 * @toVw;
+      width: 16 * @toVw;
+      background-position: 0 -93 * @toVw;
+    }
+    .zDefaultIcon {
+      height: 18 * @toVw;
+      width: 18 * @toVw;
+      background-position: 0 -109 * @toVw;
+      float: right;
+    }
+    .zIcon {
+      height: 18 * @toVw;
+      width: 18 * @toVw;
+      background-position: 0 -127 * @toVw;
+      float: right;
+    }
+    .play {
+      height: 40 * @toVw;
+      width: 40 * @toVw;
+      background-position: 0 -145 * @toVw;
+    }
+    .stop {
+      height: 40 * @toVw;
+      width: 40 * @toVw;
+      background-position: 0 -185 * @toVw;
+    }
+    .icon-icon_stop {
+      height: 50 * @toVw;
+      width: 50 * @toVw;
+      font-size: 48 * @toVw;
+      color: #69c0ff;
+    }
+    .icon-icon_begin {
+      height: 50 * @toVw;
+      width: 50 * @toVw;
+      font-size: 48 * @toVw;
+      color: #69c0ff;
+    }
+    .icon-icon_left {
+      height: 37 * @toVw;
+      width: 37 * @toVw;
+      font-size: 32 * @toVw;
+      color: #69c0ff;
+    }
+    .icon-icon_right {
+      height: 37 * @toVw;
+      width: 37 * @toVw;
+      font-size: 32 * @toVw;
+      color: #69c0ff;
+    }
+    .icon-icon_list {
+      font-size: 20 * @toVw;
+    }
+    .icon-icon_change1 {
+      font-size: 20 * @toVw;
+    }
+    .icon-icon_change {
+      font-size: 20 * @toVw;
+    }
+    .icon-icon_changge {
+      font-size: 20 * @toVw;
+    }
+    .audio-page {
+      position: absolute;
+      top: 5 * @toVw;
+      bottom: 5 * @toVw;
+      left: 5 * @toVw;
+      right: 5 * @toVw;
+      overflow: auto;
+      border-radius: 8 * @toVw;
+      .content {
         position: static;
+        height: 100%;
+        width: 100%;
+        display: -webkit-flex;
+        border-radius: 8 * @toVw;
         padding: 0;
-        height: 28 * @toVw;
-        width: 88 * @toVw;
-        line-height: 28 * @toVw;
-        border: 1 * @toVw solid #666;
-        border-radius: 100 * @toVw;
-        font-size: 12 * @toVw;
-        font-family: PingFang-SC-Medium;
-        font-weight: 500;
-        color: rgba(102, 102, 102, 1);
+        .hp-left {
+          flex: 1;
+          margin-right: 20 * @toVw;
+          .hp-top {
+            display: -webkit-flex;
+            width: 100%;
+          }
+        }
+        .image-block {
+          width: 150 * @toVw;
+          height: 150 * @toVw;
+          box-shadow: 0 0 30 * @toVw 5 * @toVw #ddd;
+          overflow: hidden;
+          display: block;
+          margin: auto;
+          border-radius: 75 * @toVw;
+          box-shadow: 0px 0px 4px 0px rgba(96, 173, 240, 1);
+          border: 4px solid rgba(255, 255, 255, 1);
+          img {
+            width: 100%;
+          }
+        }
+        .title-block {
+          margin-top: 24 * @toVw;
+          .title {
+            font-size: 16 * @toVw;
+            font-family: PingFang-SC-Medium;
+            font-weight: 500;
+            color: rgba(102, 102, 102, 1);
+          }
+          .tips {
+            font-size: 14 * @toVw;
+            margin-top: 6 * @toVw;
+            font-family: PingFang-SC-Medium;
+            font-weight: 500;
+            color: rgba(153, 153, 153, 1);
+          }
+        }
+        .range-block {
+          width: auto;
+          margin-top: 16 * @toVw;
+          .time-block {
+            font-size: 12 * @toVw;
+            font-family: PingFang-SC-Medium;
+            font-weight: 500;
+            color: rgba(102, 102, 102, 1);
+            text-align: left;
+            &:after {
+              content: "";
+              display: block;
+              clear: both;
+            }
+            .left-time {
+              float: left;
+            }
+            .right-time {
+              float: right;
+            }
+          }
+          input[type="range"] {
+            -webkit-transform: translateZ(0);
+            transform: translateZ(0);
+            -webkit-appearance: none;
+            background: -webkit-linear-gradient(#69c0ff, #69c0ff) no-repeat,
+            #d8d8d8;
+            background-size: 75% 100%; /*设置左右宽度比例*/
+            width: 100%;
+            border-radius: 10 * @toVw; /*这个属性设置使填充进度条时的图形为圆角*/
+          }
+          input[type="range"]::-webkit-slider-thumb {
+            -webkit-appearance: none;
+          }
+          input[type="range"]::-webkit-slider-runnable-track {
+            height: 4 * @toVw;
+            border-radius: 2 * @toVw;
+          }
+          input[type="range"]:focus {
+            outline: none;
+          }
+          input[type="range"]::-webkit-slider-thumb {
+            -webkit-appearance: none;
+            border-radius: 50%; /*外观设置为圆形*/
+            height: 16 * @toVw;
+            width: 16 * @toVw;
+            margin-top: -6 * @toVw; /*使滑块超出轨道部分的偏移量相等*/
+            background: #69c0ff;
+          }
+        }
+        .btn-group {
+          margin-top: 15vh;
+          display: none;
+          width: 200 * @toVw;
+          &.hp {
+            display: -webkit-flex;
+          }
+        }
       }
-      .age-change-block {
-        position: static;
-        width: 80 * @toVw;
-        margin-top: 10 * @toVw;
-        border-radius: 8 * @toVw;
-        border: 1 * @toVw solid #666666;
-        font-size: 12 * @toVw;
-        font-family: PingFang-SC-Medium;
-        font-weight: 500;
-        color: rgba(102, 102, 102, 1);
-        & > div {
-          padding: 6 * @toVw 11 * @toVw;
-          text-align: left;
-          &:first-child {
-            border-bottom: 1 * @toVw solid #eee;
+      .list-popup {
+        width: 375 * @toVw;
+        max-height: 345 * @toVw;
+        overflow: auto;
+        border-radius: 8 * @toVw 8 * @toVw 0 0;
+        background: white;
+        padding-top: 20 * @toVw;
+        .list-block {
+          display: block;
+          width: auto;
+          margin: 0 20 * @toVw;
+          padding: 12 * @toVw 36 * @toVw;
+          border-bottom: 1 * @toVw solid #dddddd;
+          &.active {
+            color: #49e2a5;
           }
         }
+        .close-btn {
+          text-align: center;
+          padding: 20 * @toVw;
+        }
       }
-      .change-block-HP {
-        position: absolute;
-        top: ~"calc(100vh - 12.5vw)";
-        display: block;
-        width: 78 * @toVw;
+      .imgPop-block {
+        max-height: 500 * @toVw;
+        overflow: auto;
         img {
-          width: 100%;
+          max-width: 300 * @toVw;
         }
       }
-      .change-block {
-        display: none;
+      .btn-block {
+        position: relative;
+        min-width: 90 * @toVw;
+        margin-top: 0;
+        display: block;
+        height: 100%;
+        .age-block {
+          display: block;
+          position: static;
+          padding: 0;
+          height: 28 * @toVw;
+          width: 88 * @toVw;
+          line-height: 28 * @toVw;
+          border: 1 * @toVw solid #666;
+          border-radius: 100 * @toVw;
+          font-size: 12 * @toVw;
+          font-family: PingFang-SC-Medium;
+          font-weight: 500;
+          color: rgba(102, 102, 102, 1);
+        }
+        .age-change-block {
+          position: static;
+          width: 80 * @toVw;
+          margin-top: 10 * @toVw;
+          border-radius: 8 * @toVw;
+          border: 1 * @toVw solid #666666;
+          font-size: 12 * @toVw;
+          font-family: PingFang-SC-Medium;
+          font-weight: 500;
+          color: rgba(102, 102, 102, 1);
+          & > div {
+            padding: 6 * @toVw 11 * @toVw;
+            text-align: left;
+            &:first-child {
+              border-bottom: 1 * @toVw solid #eee;
+            }
+          }
+        }
+        .change-block-HP {
+          position: absolute;
+          top: ~"calc(100vh - 12.5vw)";
+          display: block;
+          width: 78 * @toVw;
+          img {
+            width: 100%;
+          }
+        }
+        .change-block {
+          display: none;
+        }
       }
     }
   }
-}
 </style>
 <style>
-.van-image-preview__image {
-  /* max-height: 150%; */
-  /* bottom: none; */
-}
+  .van-image-preview__image {
+    /* max-height: 150%; */
+    /* bottom: none; */
+  }
 </style>

src/components/newLesson/evaluate.vue

+<template>
+  <div class="evaluate-page">
+    <div class="evaluate-content">
+      <!-- title -->
+      <div class="evaluate-content-title">
+        记录下宝贝的精彩表现吧！
+      </div>
+      <!-- 打分 -->
+      <ul class="evaluate-content-scoring">
+        <li>
+          <div class="scoring-category-titlle">兴趣度：</div>
+          <div class="scoring-category-icons">
+              <img v-for="(item, index) in 5" @click="scoringCategoryClick(index, 1)" :src="imageNum <= index ? scoringCategoryImage.scoringCategory1 : scoringCategoryImage.scoringCategory1Active" alt="">
+          </div>
+        </li>
+        <li>
+          <div class="scoring-category-titlle">专注度：</div>
+          <div class="scoring-category-icons">
+            <img v-for="(item, index) in 5" @click="scoringCategoryClick(index, 2)" :src="imageNum2 <= index ? scoringCategoryImage.scoringCategory2 : scoringCategoryImage.scoringCategory2Active" alt="">
+          </div>
+        </li>
+        <li>
+          <div class="scoring-category-titlle">互动度：</div>
+          <div class="scoring-category-icons">
+            <img v-for="(item, index) in 5" @click="scoringCategoryClick(index, 3)" :src="imageNum3 <= index ? scoringCategoryImage.scoringCategory3 : scoringCategoryImage.scoringCategory3Active" alt="">
+          </div>
+        </li>
+      </ul>
+      <!-- 输入框 -->
+      <div class="checkbox-put">
+        <div contenteditable="true" class="checkbox-put-contenteditable" v-text="myHtmlCode" @input="handleInput" placeholder="点击输入宝贝今天的学习表现、收获…"></div>
+        <div class="checkbox-text">*可输入15-100字</div>
+      </div>
+      <!-- btn -->
+      <div class="growth-btn" @click="userCategoryClick">
+        <img :src="growthRecord" alt="">
+      </div>
+      <!-- 提示 -->
+      <div class="growth-text">
+        保存后可随时至“我的”-“成长记录”里查看
+      </div>
+      <div class="skip-text" @click="skipTextClick">跳过</div>
+    </div>
+  </div>
+</template>
+
+<script type="text/ecmascript-6">
+  import { postUserGrowthAddApi, subUserLessonApi, getUserGrowthRecordApi } from "../../service/api";
+  import { scoringCategory }      from "../../util/imgUrl";
+  import growthRecord from "../../assets/growth_record.png";
+
+  export default {
+    name: 'evaluate',
+    data() {
+      return {
+        cache: {},
+        imageNum  : 0,   // 兴趣度
+        imageNum2 : 0,   // 专注度
+        imageNum3 : 0,   // 互动度
+        myHtmlCode: '',
+        growthRecord: growthRecord,
+        scoringCategoryImage: scoringCategory,
+      }
+    },
+    methods: {
+      /**
+       * 点击
+       */
+      scoringCategoryClick(num, state) {
+        if(state === 1)
+          this.imageNum = num + 1;
+        else if(state === 2)
+          this.imageNum2 = num + 1;
+        else
+          this.imageNum3 = num + 1;
+        this.cache = { imageNum: this.imageNum, imageNum2: this.imageNum2, imageNum3: this.imageNum3 }
+        localStorage.setItem('cache', JSON.stringify(this.cache))
+      },
+      handleInput(e){
+        let checkboxPutContenteditable = document.querySelector('.checkbox-put-contenteditable');
+        this.cache = Object.assign({}, this.cache, { inner: checkboxPutContenteditable.innerHTML })
+        localStorage.setItem('cache', JSON.stringify(this.cache))
+      },
+      /**
+       * 提交成长记录
+       * @returns {Promise.<void>}
+       */
+      async userCategoryClick() {
+        let checkboxPutContenteditable = document.querySelector('.checkbox-put-contenteditable');
+        let classQuery = JSON.parse(sessionStorage.getItem("classQuery")),  // 获取elementId，category_id，periods_id
+            nowTime = Date.parse(new Date()),   // 时间
+            lessonDetail = JSON.parse(localStorage.getItem("lessonDetail")),// 获取延长时间
+            lookTime = (nowTime - lessonDetail.nowTime) / 1000,
+            watchLog = { page_type: 0, page_id: 7, stay_time: lookTime };
+        let data = { interest: this.imageNum, concert: this.imageNum2, parent_child: this.imageNum3, growth_record: checkboxPutContenteditable.innerHTML }
+        if(this.imageNum !== 0 || this.imageNum !== 0 || this.imageNum !== 0) {
+          // 提交评价页面
+          const postUserGrowthAddData = await postUserGrowthAddApi(classQuery.elementId, classQuery.category_id, classQuery.periods_id, data)
+          // 提交看课数据
+          const subUserLessonDatac = subUserLessonApi(classQuery.elementId, classQuery.category_id, classQuery.periods_id, watchLog)
+          localStorage.removeItem("cache");
+          this.$router.push({name: 'newLesson', params: { evaluate: 1, type: 3}, query: { periods_id: classQuery.periods_id, category_id: classQuery.category_id, elementId: classQuery.elementId }})
+        }
+      },
+      skipTextClick() {
+        let classQuery = JSON.parse(sessionStorage.getItem("classQuery"))
+        this.$router.push({name: 'newLesson', params: { evaluate: 3, type: 3 }, query: { periods_id: classQuery.periods_id, category_id: classQuery.category_id, elementId: classQuery.elementId }})
+      },
+      /**
+       * 初始化
+       */
+      async userCategoryInit() {
+        let cacheObj = JSON.parse(localStorage.getItem('cache'))
+        console.log(cacheObj)
+        if( cacheObj ) {
+          // 从缓存里获取
+          this.imageNum   = cacheObj.imageNum || 0;
+          this.imageNum2  = cacheObj.imageNum2 || 0;
+          this.imageNum3  = cacheObj.imageNum3 || 0;
+          this.myHtmlCode = cacheObj.inner || '';
+        }else {
+          // 从接口获取
+          let classQuery = JSON.parse(sessionStorage.getItem("classQuery"))
+          const getUserGrowthRecordData = await getUserGrowthRecordApi(classQuery.elementId, classQuery.category_id, classQuery.periods_id);
+          this.imageNum   = getUserGrowthRecordData.interest;
+          this.imageNum2  = getUserGrowthRecordData.concent;
+          this.imageNum3  = getUserGrowthRecordData.parent_child;
+          this.myHtmlCode = getUserGrowthRecordData.growth_record;
+        }
+      }
+    },
+    mounted() {
+      this.userCategoryInit()
+    }
+  }
+</script>
+
+<style lang="less" type="text/less">
+  @import "../../util/public";
+
+  .evaluate-page {
+    width: 100%;
+    height: 100%;
+    background: #EEEEEE;
+    padding: 10 * @toVw 20 * @toVw 0;
+    box-sizing: border-box;
+    .evaluate-content {
+      width: 100%;
+      margin: auto;
+      padding: 0 26 * @toVw 10 * @toVw;
+      background: #fff;
+      border-radius: 8 * @toVw;
+      box-sizing: border-box;
+      /* title */
+      .evaluate-content-title {
+        padding: 20 * @toVw 0;
+        text-align: center;
+        letter-spacing: 1px;
+        font-size: 18 * @toVw;
+        font-weight: 500;
+        color: #40A9FF;
+      }
+      /* 打分 */
+      .evaluate-content-scoring {
+        width: 100%;
+        font-size: 0;
+        padding-bottom: 21 * @toVw;
+        li {
+          padding-top: 15 * @toVw;
+          .scoring-category-titlle {
+            width: 56 * @toVw;
+            display: inline-block;
+            vertical-align: middle;
+            font-size: 14 * @toVw;
+            color: #333333;
+          }
+
+          .scoring-category-icons {
+            width: calc(100% - 16vw);
+            display: inline-block;
+            vertical-align: middle;
+            img {
+              width: 28 * @toVw;
+              height: 28 * @toVw;
+              margin-left: 10 * @toVw;
+            }
+          }
+        }
+      }
+      /* 输入框 */
+      .checkbox-put {
+        width: 100%;
+        padding-bottom: 29 * @toVw;
+        .checkbox-put-contenteditable {
+          width: 100%;
+          height: 170 * @toVw;
+          padding: 10 * @toVw;
+          overflow: auto;
+          border: 1px solid #E2E2E2;
+          border-radius: 10 * @toVw;
+          box-sizing: border-box;
+          font-size: 14 * @toVw;
+          outline: none;
+          &:empty:before{
+            content: attr(placeholder);
+            color:#bbb;
+          }
+        }
+        .checkbox-text {
+          padding-top: 5 * @toVw;
+          font-size: 12 * @toVw;
+          color: #666666;
+        }
+      }
+
+      /* btn */
+      .growth-btn {
+        width: 200 * @toVw;
+        height: 47 * @toVw;
+        border-radius: 24 * @toVw;
+        img {
+          width: 100%;
+          height: 100%;
+        }
+      }
+      /* 提示 */
+      .growth-text {
+        padding-top: 10 * @toVw;
+        text-align: center;
+        letter-spacing: 1px;
+        font-size: 12 * @toVw;
+        color: #666666;
+      }
+
+      .skip-text {
+        padding-top: 10 * @toVw;
+        text-decoration: underline;
+        text-align: center;
+        font-size: 12 * @toVw;
+        color: #40A9FF;
+
+      }
+    }
+  }
+</style>

src/components/newLesson/index.vue

@@ -17,7 +17,7 @@
       </i>
       <i :class="{headerHP:true, defaultFun:nowShow !== 3,funHP:nowShow===3}" @click="type=3">
         <img :src="HP.listen1" alt />
-      </i>
+      </i>ƒ
       <i class="headerHP home" @click="backList">
         <img :src="HP.back" alt />
       </i>
@@ -37,368 +37,377 @@
   </div>
 </template>
 <script>
-import {
-  subUserLessonApi,
-  getUserWatchApi,
-  getwechatParam,
-  getCountTimeApi
-} from "../../service/api";
-import { Toast } from "vant";
-import lookBlock from "./look";
-import videoBlock from "./video";
-import backUrl from "../../assets/newLesson/back.png";
-import { HP } from "../../util/imgUrl.js";
-import audioBlock from "./audio";
-import sharePage from "./share";
-export default {
-  name: "index",
-  data() {
-    let query;
-    if (this.$store.state.classQuery.periods_id) {
-      query = this.$store.state.classQuery;
-    } else {
+  import {
+    subUserLessonApi,
+    getUserWatchApi,
+    getwechatParam,
+    getCountTimeApi
+  } from "../../service/api";
+  import { Toast } from "vant";
+  import lookBlock from "./look";
+  import videoBlock from "./video";
+  import backUrl from "../../assets/newLesson/back.png";
+  import { HP } from "../../util/imgUrl.js";
+  import audioBlock from "./audio";
+  import sharePage from "./share";
+  export default {
+    name: "index",
+    data() {
+      let query;
+      if (this.$store.state.classQuery.periods_id) {
+        query = this.$store.state.classQuery;
+      } else {
+        // debugger
+        query = JSON.parse(sessionStorage.getItem("classQuery"));
+      }
       // debugger
-      query = JSON.parse(sessionStorage.getItem("classQuery"));
-    }
-    // debugger
-    return {
-      backUrl: backUrl,
-      periods_id: query.periods_id,
-      category_id: query.category_id,
-      elementId: query.elementId,
-      lesson: null,
-      nowShow: 0,
-      page_id: 1,
-      stillTime: 0,
-      watchDetail: null,
-      timeInterval: null,
-      nowLesson: {
-        type: "",
-        content: null,
-        age: 1
-      },
-      HP: HP,
-      type: 1,
-      saveTime:null,
-      minute:'',
-      percent:'',
-      title:'',
-      domTitle:''
-    };
-  },
-  watch: {
-    type() {
-      this.changeTitle(this.type);
-    }
-  },
-  components: {
-    lookBlock,
-    videoBlock,
-    audioBlock,
-    sharePage
-  },
-  mounted() {
-    // this.changeTitle(this.type);
-    this.initPage();
-  },
-  beforeDestroy(){
-    clearInterval(this.saveTime)
-  },
-  methods: {
-    enableShare: function(option) {
-      let that = this;
-      getwechatParam({
-        api_list: "onMenuShareAppMessage,onMenuShareTimeline",
-        url: window.location.href.split("#")[0]
-      }).then(wechatRes => {
-        wx.config({
-          debug: false,
-          appId: wechatRes.appId,
-          timestamp: parseInt(wechatRes.timestamp),
-          nonceStr: wechatRes.nonceStr,
-          signature: wechatRes.signature,
-          jsApiList: wechatRes.jsApiList
-        });
-        wx.ready(function() {
-          wx.onMenuShareTimeline({
-            title: option.product_title, // 分享标题
-            desc: option.desc, // 分享描述
-            link: option.shareUrl, // 分享链接
-            imgUrl:
-              option.shareIcon ||
-              "https://cdn.singsingenglish.com/singsing/recommend/logo-refer.png", // 分享图标
-            success: function() {
-              // debugger
-              let lessonDetail = JSON.parse(
-                localStorage.getItem("lessonDetail")
-              );
-              let nowTime = Date.parse(new Date());
-              let json = {
-                page_type: 0,
-                page_id: 6,
-                stay_time: 0
-              };
-              subUserLessonApi(
-                that.elementId,
-                that.category_id,
-                that.periods_id,
-                json
-              ).then(res => {
-                lessonDetail.total_watch_time = res.total_watch_time;
-                lessonDetail.nowTime = nowTime;
-                lessonDetail.star_num = res.total_star_num;
-                localStorage.setItem(
-                  "lessonDetail",
-                  JSON.stringify(lessonDetail)
-                );
-              });
-            },
-            cancel: function() {}
+      return {
+        backUrl: backUrl,
+        periods_id: query.periods_id,
+        category_id: query.category_id,
+        elementId: query.elementId,
+        lesson: JSON.parse(localStorage.getItem("lessonDetail")),
+        nowShow: 0,
+        page_id: 1,
+        stillTime: 0,
+        watchDetail: null,
+        timeInterval: null,
+        nowLesson: {
+          type: "",
+          content: null,
+          age: 1
+        },
+        HP: HP,
+        type: 1,
+        saveTime:null,
+        minute:'',
+        percent:'',
+        title:'',
+        domTitle:''
+      };
+    },
+    watch: {
+      type() {
+        this.changeTitle(this.type);
+      }
+    },
+    components: {
+      lookBlock,
+      videoBlock,
+      audioBlock,
+      sharePage
+    },
+    mounted() {
+      // 直接跳转和提交跳转
+      if(this.$route.params.evaluate === 1 || this.$route.params.evaluate === 3) {
+        this.nowShow = parseInt(this.$route.params.type)
+        this.type    = parseInt(this.$route.params.type)
+        this.changeTitle(parseInt(this.$route.params.type))
+      }else {
+        this.initPage();
+      }
+    },
+    /**
+     * 离开页面前关闭--这个记录看课时长
+     */
+    beforeDestroy(){
+      clearInterval(this.saveTime)
+    },
+    methods: {
+      enableShare: function(option) {
+        let that = this;
+        getwechatParam({
+          api_list: "onMenuShareAppMessage,onMenuShareTimeline",
+          url: window.location.href.split("#")[0]
+        }).then(wechatRes => {
+          wx.config({
+            debug: false,
+            appId: wechatRes.appId,
+            timestamp: parseInt(wechatRes.timestamp),
+            nonceStr: wechatRes.nonceStr,
+            signature: wechatRes.signature,
+            jsApiList: wechatRes.jsApiList
           });
-          wx.onMenuShareAppMessage({
-            title: option.product_title, // 分享标题
-            desc: option.desc, // 分享描述
-            link: option.shareUrl, // 分享链接
-            imgUrl:
-              option.shareIcon ||
-              "https://cdn.singsingenglish.com/singsing/recommend/logo-refer.png", // 分享图标
-            success: function() {
-              let lessonDetail = JSON.parse(
-                localStorage.getItem("lessonDetail")
-              );
-              let nowTime = Date.parse(new Date());
-              let json = {
-                page_type: 0,
-                page_id: 6,
-                stay_time: 0
-              };
-              subUserLessonApi(
-                that.elementId,
-                that.category_id,
-                that.periods_id,
-                json
-              ).then(res => {
-                lessonDetail.total_watch_time = res.total_watch_time;
-                lessonDetail.nowTime = nowTime;
-                lessonDetail.star_num = res.total_star_num;
-                localStorage.setItem(
-                  "lessonDetail",
-                  JSON.stringify(lessonDetail)
+          wx.ready(function() {
+            wx.onMenuShareTimeline({
+              title: option.product_title, // 分享标题
+              desc: option.desc, // 分享描述
+              link: option.shareUrl, // 分享链接
+              imgUrl:
+                  option.shareIcon ||
+                  "https://cdn.singsingenglish.com/singsing/recommend/logo-refer.png", // 分享图标
+              success: function() {
+                // debugger
+                let lessonDetail = JSON.parse(
+                    localStorage.getItem("lessonDetail")
+                );
+                let nowTime = Date.parse(new Date());
+                let json = {
+                  page_type: 0,
+                  page_id: 6,
+                  stay_time: 0
+                };
+                subUserLessonApi(
+                    that.elementId,
+                    that.category_id,
+                    that.periods_id,
+                    json
+                ).then(res => {
+                  lessonDetail.total_watch_time = res.total_watch_time;
+                  lessonDetail.nowTime = nowTime;
+                  lessonDetail.star_num = res.total_star_num;
+                  localStorage.setItem(
+                      "lessonDetail",
+                      JSON.stringify(lessonDetail)
+                  );
+                });
+              },
+              cancel: function() {}
+            });
+            wx.onMenuShareAppMessage({
+              title: option.product_title, // 分享标题
+              desc: option.desc, // 分享描述
+              link: option.shareUrl, // 分享链接
+              imgUrl:
+                  option.shareIcon ||
+                  "https://cdn.singsingenglish.com/singsing/recommend/logo-refer.png", // 分享图标
+              success: function() {
+                let lessonDetail = JSON.parse(
+                    localStorage.getItem("lessonDetail")
                 );
-              });
-            },
-            cancel: function() {}
+                let nowTime = Date.parse(new Date());
+                let json = {
+                  page_type: 0,
+                  page_id: 6,
+                  stay_time: 0
+                };
+                subUserLessonApi(
+                    that.elementId,
+                    that.category_id,
+                    that.periods_id,
+                    json
+                ).then(res => {
+                  lessonDetail.total_watch_time = res.total_watch_time;
+                  lessonDetail.nowTime = nowTime;
+                  lessonDetail.star_num = res.total_star_num;
+                  localStorage.setItem(
+                      "lessonDetail",
+                      JSON.stringify(lessonDetail)
+                  );
+                });
+              },
+              cancel: function() {}
+            });
           });
         });
-      });
-    },
-    onShare(URL) {
-      this.enableShare({
-        product_title: `我家宝宝正在【唱唱启蒙英语】挑战童谣，已坚持${this.watchDetail.total_day}天`, // 分享标题
-        desc:
-          JSON.parse(localStorage.getItem("userDesc")).nickname +
-          `赠您【领取超值课程】特权，来唱唱和百万家庭一起快乐启蒙英语吧！`, //
-        shareIcon: "https://cdn.singsingenglish.com/logo/logo.jpg",
-        shareUrl: URL
-      });
-    },
-    backList() {
-      let lessonDetail = JSON.parse(localStorage.getItem("lessonDetail"));
-      let nowTime = Date.parse(new Date());
-      let lookTime = (nowTime - lessonDetail.nowTime) / 1000;
-      this.$sa.track("watchClick", {
-        buttonName: "返回课程列表",
-        partName:
-          this.nowShow == 1
-            ? "爸妈看一看"
-            : this.nowShow == 2
-            ? "宝贝玩一玩"
-            : this.nowShow == 3
-            ? "磨磨小耳朵"
-            : "",
-        elementID: this.lesson.id.toString(),
-        dayModule: this.lesson.domTitle.slice(0, 9),
-        weekName: this.lesson.domTitle.slice(10, this.lesson.domTitle.length),
-        elementName:
-          this.lesson.domTitle.slice(0, 9) +
-          "-" +
-          this.lesson.domTitle.slice(10, this.lesson.domTitle.length),
-        themeID: this.lesson.themeID,
-        themeName: this.lesson.themeName,
-        goodsID: this.lesson.goodsID,
-        classID: this.lesson.classID
-      });
-      let json = {
-        page_type: 0,
-        page_id: this.page_id,
-        stay_time: lookTime
-      };
-      subUserLessonApi(
-        this.elementId,
-        this.category_id,
-        this.periods_id,
-        json
-      ).then(res => {
-        lessonDetail.total_watch_time = res.total_watch_time;
-        lessonDetail.nowTime = nowTime;
-        lessonDetail.star_num = res.total_star_num;
-        localStorage.setItem("lessonDetail", JSON.stringify(lessonDetail));
-        let query = {
-          periods_id: this.periods_id,
-          course_type: this.course_type,
-          parent_category_id: this.parent_category_id,
-          back_id: this.category_id
-        };
-        // console.log(query);
-        //  debugger
-        this.$router.push({ name: "map", query: query });
-      });
-    },
-    changeTitle(type) {
-      // if(type==type)
-      Toast.loading({
-        mask: true,
-        message: ""
-      });
-      this.nowShow = type;
-      let lessonDetail = JSON.parse(localStorage.getItem("lessonDetail"));
-      let nowTime = Date.parse(new Date());
-      let lookTime = (nowTime - lessonDetail.nowTime) / 1000;
-      let json = {
-        page_type: 0,
-        page_id: this.page_id,
-        stay_time: lookTime
-      };
-      subUserLessonApi(
-        this.elementId,
-        this.category_id,
-        this.periods_id,
-        json
-      ).then(res => {
-        Toast.clear();
-        lessonDetail.total_watch_time = res.total_watch_time;
-        lessonDetail.nowTime = nowTime;
-        lessonDetail.star_num = res.total_star_num;
-        localStorage.setItem("lessonDetail", JSON.stringify(lessonDetail));
-      });
-      switch (type) {
-        case 1:
-          // 神策埋点 板块切换
-          this.$sa.track("learnPart", {
-            partName: "爸妈看一看",
-            elementID: this.lesson.id.toString(),
-            dayModule: this.lesson.domTitle.slice(0, 9),
-            weekName: this.lesson.domTitle.slice(
-              10,
-              this.lesson.domTitle.length
-            ),
-            elementName:
+      },
+      onShare(URL) {
+        this.enableShare({
+          product_title: `我家宝宝正在【唱唱启蒙英语】挑战童谣，已坚持${this.watchDetail.total_day}天`, // 分享标题
+          desc:
+              JSON.parse(localStorage.getItem("userDesc")).nickname +
+              `赠您【领取超值课程】特权，来唱唱和百万家庭一起快乐启蒙英语吧！`, //
+          shareIcon: "https://cdn.singsingenglish.com/logo/logo.jpg",
+          shareUrl: URL
+        });
+      },
+      backList() {
+        let lessonDetail = JSON.parse(localStorage.getItem("lessonDetail"));
+        let nowTime = Date.parse(new Date());
+        let lookTime = (nowTime - lessonDetail.nowTime) / 1000;
+        this.$sa.track("watchClick", {
+          buttonName: "返回课程列表",
+          partName:
+              this.nowShow == 1
+                  ? "爸妈看一看"
+                  : this.nowShow == 2
+                  ? "宝贝玩一玩"
+                  : this.nowShow == 3
+                      ? "磨磨小耳朵"
+                      : "",
+          elementID: this.lesson.id.toString(),
+          dayModule: this.lesson.domTitle.slice(0, 9),
+          weekName: this.lesson.domTitle.slice(10, this.lesson.domTitle.length),
+          elementName:
               this.lesson.domTitle.slice(0, 9) +
               "-" +
               this.lesson.domTitle.slice(10, this.lesson.domTitle.length),
-            themeID: this.lesson.themeID,
-            themeName: this.lesson.themeName,
-            goodsID: this.lesson.goodsID,
-            classID: this.lesson.classID,
-            is_view_today:
-              !!new Date().setHours(0, 0, 0, 0) ===
-              new Date(this.lesson.push_time).setHours(0, 0, 0, 0)
-          });
-          this.page_id = 1;
-          this.nowLesson = {
-            type: "text",
-            title: 1,
-            partName: "爸妈看一看",
-            content: this.lesson.content.look,
-            age: this.nowLesson.age
+          themeID: this.lesson.themeID,
+          themeName: this.lesson.themeName,
+          goodsID: this.lesson.goodsID,
+          classID: this.lesson.classID
+        });
+        let json = {
+          page_type: 0,
+          page_id: this.page_id,
+          stay_time: lookTime
+        };
+        subUserLessonApi(
+            this.elementId,
+            this.category_id,
+            this.periods_id,
+            json
+        ).then(res => {
+          lessonDetail.total_watch_time = res.total_watch_time;
+          lessonDetail.nowTime = nowTime;
+          lessonDetail.star_num = res.total_star_num;
+          localStorage.setItem("lessonDetail", JSON.stringify(lessonDetail));
+          let query = {
+            periods_id: this.periods_id,
+            course_type: this.course_type,
+            parent_category_id: this.parent_category_id,
+            back_id: this.category_id
           };
-          // debugger
-          break;
-        case 2:
-          // 神策埋点 板块切换
-          this.$sa.track("learnPart", {
-            partName: "宝贝玩一玩",
-            elementID: this.lesson.id.toString(),
-            dayModule: this.lesson.domTitle.slice(0, 9),
-            weekName: this.lesson.domTitle.slice(
-              10,
-              this.lesson.domTitle.length
-            ),
-            elementName:
-              this.lesson.domTitle.slice(0, 9) +
-              "-" +
-              this.lesson.domTitle.slice(10, this.lesson.domTitle.length),
-            themeID: this.lesson.themeID,
-            themeName: this.lesson.themeName,
-            goodsID: this.lesson.goodsID,
-            classID: this.lesson.classID,
-            is_view_today:
-              !!new Date().setHours(0, 0, 0, 0) ===
-              new Date(this.lesson.push_time).setHours(0, 0, 0, 0)
-          });
-          this.page_id = 2;
-          if (this.lesson.content.play.type) {
+          // console.log(query);
+          //  debugger
+          this.$router.push({ name: "map", query: query });
+        });
+      },
+      changeTitle(type) {
+        // if(type==type)
+        Toast.loading({
+          mask: true,
+          message: ""
+        });
+        this.nowShow = type;
+        let lessonDetail = JSON.parse(localStorage.getItem("lessonDetail"));
+        let nowTime = Date.parse(new Date());
+        let lookTime = (nowTime - lessonDetail.nowTime) / 1000;
+        let json = {
+          page_type: 0,
+          page_id: this.page_id,
+          stay_time: lookTime
+        };
+        subUserLessonApi(
+            this.elementId,
+            this.category_id,
+            this.periods_id,
+            json
+        ).then(res => {
+          Toast.clear();
+          lessonDetail.total_watch_time = res.total_watch_time;
+          lessonDetail.nowTime = nowTime;
+          lessonDetail.star_num = res.total_star_num;
+          localStorage.setItem("lessonDetail", JSON.stringify(lessonDetail));
+        });
+        switch (type) {
+          case 1:
+            // 神策埋点 板块切换
+            this.$sa.track("learnPart", {
+              partName: "爸妈看一看",
+              elementID: this.lesson.id.toString(),
+              dayModule: this.lesson.domTitle.slice(0, 9),
+              weekName: this.lesson.domTitle.slice(
+                  10,
+                  this.lesson.domTitle.length
+              ),
+              elementName:
+                  this.lesson.domTitle.slice(0, 9) +
+                  "-" +
+                  this.lesson.domTitle.slice(10, this.lesson.domTitle.length),
+              themeID: this.lesson.themeID,
+              themeName: this.lesson.themeName,
+              goodsID: this.lesson.goodsID,
+              classID: this.lesson.classID,
+              is_view_today:
+                  !!new Date().setHours(0, 0, 0, 0) ===
+                  new Date(this.lesson.push_time).setHours(0, 0, 0, 0)
+            });
+            this.page_id = 1;
             this.nowLesson = {
-              type: "audio",
-              title: 2,
-              partName: "宝贝玩一玩",
-              content: this.lesson.content.play,
+              type: "text",
+              title: 1,
+              partName: "爸妈看一看",
+              content: this.lesson.content.look,
               age: this.nowLesson.age
             };
-          } else {
-            this.nowLesson = {
-              type: "video",
-              title: 2,
+            // debugger
+            break;
+          case 2:
+            // 神策埋点 板块切换
+            this.$sa.track("learnPart", {
               partName: "宝贝玩一玩",
-              content: this.lesson.content.play,
-              age: this.nowLesson.age
-            };
-          }
-          break;
-        case 3:
-          this.$sa.track("learnPart", {
-            partName: "磨磨小耳朵",
-            elementID: this.lesson.id.toString(),
-            dayModule: this.lesson.domTitle.slice(0, 9),
-            weekName: this.lesson.domTitle.slice(
-              10,
-              this.lesson.domTitle.length
-            ),
-            elementName:
-              this.lesson.domTitle.slice(0, 9) +
-              "-" +
-              this.lesson.domTitle.slice(10, this.lesson.domTitle.length),
-            themeID: this.lesson.themeID,
-            themeName: this.lesson.themeName,
-            goodsID: this.lesson.goodsID,
-            classID: this.lesson.classID,
-            is_view_today:
-              !!new Date().setHours(0, 0, 0, 0) ===
-              new Date(this.lesson.push_time).setHours(0, 0, 0, 0)
-          });
-          this.page_id = 5;
-          if (this.lesson.content.fun.type) {
-            this.nowLesson = {
-              type: "audio",
-              title: 3,
-              partName: "磨磨小耳朵",
-              content: this.lesson.content.fun,
-              age: this.nowLesson.age
-            };
-          } else {
-            this.nowLesson = {
-              type: "video",
+              elementID: this.lesson.id.toString(),
+              dayModule: this.lesson.domTitle.slice(0, 9),
+              weekName: this.lesson.domTitle.slice(
+                  10,
+                  this.lesson.domTitle.length
+              ),
+              elementName:
+                  this.lesson.domTitle.slice(0, 9) +
+                  "-" +
+                  this.lesson.domTitle.slice(10, this.lesson.domTitle.length),
+              themeID: this.lesson.themeID,
+              themeName: this.lesson.themeName,
+              goodsID: this.lesson.goodsID,
+              classID: this.lesson.classID,
+              is_view_today:
+                  !!new Date().setHours(0, 0, 0, 0) ===
+                  new Date(this.lesson.push_time).setHours(0, 0, 0, 0)
+            });
+            this.page_id = 2;
+            if (this.lesson.content.play.type) {
+              this.nowLesson = {
+                type: "audio",
+                title: 2,
+                partName: "宝贝玩一玩",
+                content: this.lesson.content.play,
+                age: this.nowLesson.age
+              };
+            } else {
+              this.nowLesson = {
+                type: "video",
+                title: 2,
+                partName: "宝贝玩一玩",
+                content: this.lesson.content.play,
+                age: this.nowLesson.age
+              };
+            }
+            break;
+          case 3:
+            this.$sa.track("learnPart", {
               partName: "磨磨小耳朵",
-              title: 3,
-              content: this.lesson.content.fun,
-              age: this.nowLesson.age
-            };
-          }
-          break;
-      }
-    },
-    countTimeFn(){
-      this.saveTime = setInterval(()=>{
+              elementID: this.lesson.id.toString(),
+              dayModule: this.lesson.domTitle.slice(0, 9),
+              weekName: this.lesson.domTitle.slice(
+                  10,
+                  this.lesson.domTitle.length
+              ),
+              elementName:
+                  this.lesson.domTitle.slice(0, 9) +
+                  "-" +
+                  this.lesson.domTitle.slice(10, this.lesson.domTitle.length),
+              themeID: this.lesson.themeID,
+              themeName: this.lesson.themeName,
+              goodsID: this.lesson.goodsID,
+              classID: this.lesson.classID,
+              is_view_today:
+                  !!new Date().setHours(0, 0, 0, 0) ===
+                  new Date(this.lesson.push_time).setHours(0, 0, 0, 0)
+            });
+            this.page_id = 5;
+            if (this.lesson.content.fun.type) {
+              this.nowLesson = {
+                type: "audio",
+                title: 3,
+                partName: "磨磨小耳朵",
+                content: this.lesson.content.fun,
+                age: this.nowLesson.age
+              };
+            } else {
+              this.nowLesson = {
+                type: "video",
+                partName: "磨磨小耳朵",
+                title: 3,
+                content: this.lesson.content.fun,
+                age: this.nowLesson.age
+              };
+            }
+            break;
+        }
+      },
+      countTimeFn(){
+        this.saveTime = setInterval(()=>{
           let lessonDetail = JSON.parse(localStorage.getItem("lessonDetail"));
           let nowTime = Date.parse(new Date());
           let lookTime = (nowTime - lessonDetail.nowTime) / 1000;
@@ -408,290 +417,185 @@ export default {
             stay_time: lookTime
           };
           subUserLessonApi(
-          this.elementId,
-          this.category_id,
-          this.periods_id,
-          json
-        ).then(res => {
-          Toast.clear();
-          lessonDetail.total_watch_time = res.total_watch_time;
-          lessonDetail.nowTime = nowTime;
-          lessonDetail.star_num = res.total_star_num;
-          localStorage.setItem("lessonDetail", JSON.stringify(lessonDetail));
+              this.elementId,
+              this.category_id,
+              this.periods_id,
+              json
+          ).then(res => {
+            Toast.clear();
+            lessonDetail.total_watch_time = res.total_watch_time;
+            lessonDetail.nowTime = nowTime;
+            lessonDetail.star_num = res.total_star_num;
+            localStorage.setItem("lessonDetail", JSON.stringify(lessonDetail));
+          });
+        },120000)
+        // debugger
+        this.$store.dispatch('setTimeout',this.saveTime)
+      },
+      initPage() {
+        Toast.loading({
+          mask: true,
+          message: ""
         });
-      },120000)
-      // debugger
-      this.$store.dispatch('setTimeout',this.saveTime)
-    },
-    initPage() {
-      Toast.loading({
-        mask: true,
-        message: ""
-      });
-      this.parent_category_id = this.$route.query.parent_category_id;
-      this.course_type = this.$route.query.course_type;
-      this.countTimeFn()
-      this.lesson = JSON.parse(localStorage.getItem("lessonDetail"));
-      // debugger
-      getUserWatchApi({category_id:this.category_id}).then(res => {
-        this.watchDetail = res;
-        this.$store.dispatch("setWatchDetail", this.watchDetail);
-        this.userDetail = JSON.parse(localStorage.getItem("userDesc"));
-        this.minute = (res.stay_time / 60).toFixed();
-            // this.minute = (360/60).toFixed()
-            if (this.minute < 1) {
-              this.minute = 1;
-            }
-            // this.minute<1?1:1
-            if (this.minute < 8) {
-              if (this.minute < 5) {
-                this.percent = 75 + Math.floor(49 * Math.random()) / 10;
-              } else {
-                this.percent = 81 + Math.floor(89 * Math.random()) / 10;
-              }
-            } else if (this.minute <= 12) {
-              this.percent = 91 + Math.floor(39 * Math.random()) / 10;
+        this.parent_category_id = this.$route.query.parent_category_id;
+        this.course_type = this.$route.query.course_type;
+        this.countTimeFn()
+//        this.lesson = JSON.parse(localStorage.getItem("lessonDetail"));
+        // debugger
+        getUserWatchApi({category_id:this.category_id}).then(res => {
+          this.watchDetail = res;
+          this.$store.dispatch("setWatchDetail", this.watchDetail);
+          this.userDetail = JSON.parse(localStorage.getItem("userDesc"));
+          this.minute = (res.stay_time / 60).toFixed();
+          // this.minute = (360/60).toFixed()
+          if (this.minute < 1) {
+            this.minute = 1;
+          }
+          // this.minute<1?1:1
+          if (this.minute < 8) {
+            if (this.minute < 5) {
+              this.percent = 75 + Math.floor(49 * Math.random()) / 10;
             } else {
-              this.percent = 96 + Math.floor(39 * Math.random()) / 10;
+              this.percent = 81 + Math.floor(89 * Math.random()) / 10;
             }
-            Toast.clear();
-            let obj = {
-              user_id: this.userDetail.user_id,
-              minute: this.minute,
-              percent: this.percent,
-              title: this.lesson.title,
-              domTitle: this.lesson.domTitle
-            };
-            let URL =
+          } else if (this.minute <= 12) {
+            this.percent = 91 + Math.floor(39 * Math.random()) / 10;
+          } else {
+            this.percent = 96 + Math.floor(39 * Math.random()) / 10;
+          }
+          Toast.clear();
+          let obj = {
+            user_id: this.userDetail.user_id,
+            minute: this.minute,
+            percent: this.percent,
+            title: this.lesson.title,
+            domTitle: this.lesson.domTitle
+          };
+          let URL =
               process.env.API_URL +
               "#/shareGoods?info=" +
               encodeURIComponent(JSON.stringify(obj));
-            this.onShare(URL);
-        // this.onShare(URL);
-        this.nowShow = 1;
-        document.title = `${this.lesson.domTitle}`;
-        this.nowLesson = {
-          type: "text",
-          partName: "爸妈看一看",
-          title: 1,
-          content: this.lesson.content.look,
-          age: this.nowLesson.age
-        };
-        let json = {
-          page_type: 0,
-          page_id: 1,
-          stay_time: 1
-        };
-        let lessonDetail = JSON.parse(localStorage.getItem("lessonDetail"));
-        let nowTime = Date.parse(new Date());
-        subUserLessonApi(
-          this.elementId,
-          this.category_id,
-          this.periods_id,
-          json
-        ).then(res => {
-          // console.log(493,res)
-          lessonDetail.total_watch_time = res.total_watch_time;
-          lessonDetail.nowTime = nowTime;
-          lessonDetail.star_num = res.total_star_num;
-          localStorage.setItem("lessonDetail", JSON.stringify(lessonDetail));
-          Toast.clear();
-        });
-        this.$sa.track("learnPart", {
-          partName: "爸妈看一看",
-          elementID: this.lesson.id.toString(),
-          dayModule: this.lesson.domTitle.slice(0, 9),
-          weekName: this.lesson.domTitle.slice(10, this.lesson.domTitle.length),
-          elementName:
-            this.lesson.domTitle.slice(0, 9) +
-            "-" +
-            this.lesson.domTitle.slice(10, this.lesson.domTitle.length),
-          themeID: this.lesson.themeID,
-          themeName: this.lesson.themeName,
-          goodsID: this.lesson.goodsID,
-          classID: this.lesson.classID,
-          is_view_today:
-            !!new Date().setHours(0, 0, 0, 0) ===
-            new Date(this.lesson.push_time).setHours(0, 0, 0, 0)
+          this.onShare(URL);
+          // this.onShare(URL);
+          this.nowShow = 1;
+          document.title = `${this.lesson.domTitle}`;
+          this.nowLesson = {
+            type: "text",
+            partName: "爸妈看一看",
+            title: 1,
+            content: this.lesson.content.look,
+            age: this.nowLesson.age
+          };
+          let json = {
+            page_type: 0,
+            page_id: 1,
+            stay_time: 1
+          };
+          let lessonDetail = JSON.parse(localStorage.getItem("lessonDetail"));
+          let nowTime = Date.parse(new Date());
+          subUserLessonApi(
+              this.elementId,
+              this.category_id,
+              this.periods_id,
+              json
+          ).then(res => {
+            // console.log(493,res)
+            lessonDetail.total_watch_time = res.total_watch_time;
+            lessonDetail.nowTime = nowTime;
+            lessonDetail.star_num = res.total_star_num;
+            localStorage.setItem("lessonDetail", JSON.stringify(lessonDetail));
+            Toast.clear();
+          });
+          this.$sa.track("learnPart", {
+            partName: "爸妈看一看",
+            elementID: this.lesson.id.toString(),
+            dayModule: this.lesson.domTitle.slice(0, 9),
+            weekName: this.lesson.domTitle.slice(10, this.lesson.domTitle.length),
+            elementName:
+                this.lesson.domTitle.slice(0, 9) +
+                "-" +
+                this.lesson.domTitle.slice(10, this.lesson.domTitle.length),
+            themeID: this.lesson.themeID,
+            themeName: this.lesson.themeName,
+            goodsID: this.lesson.goodsID,
+            classID: this.lesson.classID,
+            is_view_today:
+                !!new Date().setHours(0, 0, 0, 0) ===
+                new Date(this.lesson.push_time).setHours(0, 0, 0, 0)
+          });
+          if (
+              this.lesson.content.play.video.length < 1 &&
+              this.lesson.content.play.audio.length < 1
+          ) {
+            this.nowLesson.old = true;
+          }
         });
-        if (
-          this.lesson.content.play.video.length < 1 &&
-          this.lesson.content.play.audio.length < 1
-        ) {
-          this.nowLesson.old = true;
-        }
-      });
+      }
     }
-  }
-};
+  };
 </script>
 
 <style scoped lang="less">
-@import "../../util/public";
-.lessonHeader {
-  background: url("https://static-cdn.changchangenglish.com/new-sing/static/images/lessonHeader3.png?v=2")
-    no-repeat;
-  background-size: 102 * @toVw 334 * @toVw;
-  display: inline-block;
-}
-.header-h {
-  display: none;
-}
-.home {
-  height: 46 * @toVw;
-  width: 46 * @toVw;
-  background-position: 0 0;
-}
-.play {
-  height: 48 * @toVw;
-  width: 102 * @toVw;
-  background-position: 0 -46 * @toVw;
-}
-.look {
-  height: 48 * @toVw;
-  width: 102 * @toVw;
-  background-position: 0 -94 * @toVw;
-}
-.fun {
-  height: 48 * @toVw;
-  width: 102 * @toVw;
-  background-position: 0 -142 * @toVw;
-}
-.defaultFun {
-  height: 48 * @toVw;
-  width: 102 * @toVw;
-  background-position: 0 -190 * @toVw;
-}
-.defaultLook {
-  height: 48 * @toVw;
-  width: 102 * @toVw;
-  background-position: 0 -238 * @toVw;
-}
-.defaultPlay {
-  height: 48 * @toVw;
-  width: 102 * @toVw;
-  background-position: 0 -286 * @toVw;
-}
-.header {
-  display: flex;
-  display: -webkit-flex;
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  padding: 5 * @toVw 0;
-  z-index: 2;
-  background: rgba(255, 255, 255, 1);
-  box-shadow: 0 * @toVw 2 * @toVw 3 * @toVw 0 * @toVw rgba(0, 0, 0, 0.1);
-}
-.newLesson {
-  background: #f8f8f8;
-}
-.backImg {
-  position: fixed;
-  bottom: 40 * @toVw;
-  right: 20 * @toVw;
-  z-index: 99999999;
-  width: 60 * @toVw;
-}
-
-@media screen and (orientation: landscape) {
-  @toVw: 100/667vw;
-  .backImg {
-    position: fixed;
-    bottom: 40 * @toVw;
-    right: 20 * @toVw;
-    z-index: 99999999;
-    width: 60 * @toVw;
-  }
+  @import "../../util/public";
   .lessonHeader {
-    display: none;
+    background: url("https://static-cdn.changchangenglish.com/new-sing/static/images/lessonHeader3.png?v=2")
+    no-repeat;
+    background-size: 102 * @toVw 334 * @toVw;
+    display: inline-block;
   }
-  .header {
+  .header-h {
     display: none;
   }
-  .actBanKuai {
-    background-color: white;
-    border: 1 * @toVw solid transparent;
-    border-left-color: black;
-    border-top-color: black;
-    border-bottom-color: black;
-    border-radius: 8 * @toVw 0 0 8 * @toVw;
-  }
-  .headerHP {
-    background-size: 62 * @toVw 434 * @toVw;
-    display: inline-block;
-  }
   .home {
-    height: 62 * @toVw;
-    width: 62 * @toVw;
+    height: 46 * @toVw;
+    width: 46 * @toVw;
     background-position: 0 0;
   }
-  .lookHP {
-    height: 62 * @toVw;
-    width: 62 * @toVw;
-    background-position: 0 -62 * @toVw;
-    .actBanKuai;
+  .play {
+    height: 48 * @toVw;
+    width: 102 * @toVw;
+    background-position: 0 -46 * @toVw;
   }
-  .playHP {
-    height: 62 * @toVw;
-    width: 62 * @toVw;
-    background-position: 0 -124 * @toVw;
-    .actBanKuai;
+  .look {
+    height: 48 * @toVw;
+    width: 102 * @toVw;
+    background-position: 0 -94 * @toVw;
   }
-  .funHP {
-    height: 62 * @toVw;
-    width: 62 * @toVw;
-    background-position: 0 -186 * @toVw;
-    .actBanKuai;
+  .fun {
+    height: 48 * @toVw;
+    width: 102 * @toVw;
+    background-position: 0 -142 * @toVw;
   }
   .defaultFun {
-    height: 62 * @toVw;
-    width: 62 * @toVw;
-    background-position: 0 -248 * @toVw;
+    height: 48 * @toVw;
+    width: 102 * @toVw;
+    background-position: 0 -190 * @toVw;
   }
   .defaultLook {
-    height: 62 * @toVw;
-    width: 62 * @toVw;
-    background-position: 0 -310 * @toVw;
+    height: 48 * @toVw;
+    width: 102 * @toVw;
+    background-position: 0 -238 * @toVw;
   }
   .defaultPlay {
-    height: 62 * @toVw;
-    width: 62 * @toVw;
-    background-position: 0 -372 * @toVw;
+    height: 48 * @toVw;
+    width: 102 * @toVw;
+    background-position: 0 -286 * @toVw;
   }
-  .header-h {
-    display: block;
-    width: 62 * @toVw;
+  .header {
+    display: flex;
+    display: -webkit-flex;
     position: absolute;
-    left: 17.5 * @toVw;
-    top: 20 * @toVw;
+    top: 0;
+    left: 0;
+    width: 100%;
+    padding: 5 * @toVw 0;
     z-index: 2;
-    .headerHP {
-      display: block;
-      img {
-        width: 42 * @toVw;
-        margin-left: 10 * @toVw;
-        margin-top: 5 * @toVw;
-      }
-    }
+    background: rgba(255, 255, 255, 1);
+    box-shadow: 0 * @toVw 2 * @toVw 3 * @toVw 0 * @toVw rgba(0, 0, 0, 0.1);
   }
-  .index-content-block {
-    position: absolute;
-    top: 20 * @toVw;
-    left: 80 * @toVw;
-    right: 20 * @toVw;
-    bottom: 20 * @toVw;
-    background: white;
-    border: 1 * @toVw solid #000;
-    border-radius: 0 8 * @toVw 8 * @toVw 8 * @toVw;
-    &.radius {
-      border-radius: 8 * @toVw;
-    }
+  .newLesson {
+    background: #f8f8f8;
   }
-}
-@media screen and (min-aspect-ratio: ~"20/8") {
-  @toVw: 100/900vw;
   .backImg {
     position: fixed;
     bottom: 40 * @toVw;
@@ -699,93 +603,197 @@ export default {
     z-index: 99999999;
     width: 60 * @toVw;
   }
-  .lessonHeader {
-    display: none;
-  }
-  .header {
-    display: none;
-  }
-  .actBanKuai {
-    background-color: white;
-    border: 1 * @toVw solid transparent;
-    border-left-color: black;
-    border-top-color: black;
-    border-bottom-color: black;
-    border-radius: 8 * @toVw 0 0 8 * @toVw;
-  }
-  .headerHP {
-    // background:url('https://static-cdn.changchangenglish.com/new-sing/static/images/index-h.png?v=2')  no-repeat;
-    background-size: 62 * @toVw 434 * @toVw;
-    display: inline-block;
-    &.lookHP {
+
+  @media screen and (orientation: landscape) {
+    @toVw: 100/667vw;
+    .backImg {
+      position: fixed;
+      bottom: 40 * @toVw;
+      right: 20 * @toVw;
+      z-index: 99999999;
+      width: 60 * @toVw;
+    }
+    .lessonHeader {
+      display: none;
+    }
+    .header {
+      display: none;
+    }
+    .actBanKuai {
+      background-color: white;
+      border: 1 * @toVw solid transparent;
+      border-left-color: black;
+      border-top-color: black;
+      border-bottom-color: black;
+      border-radius: 8 * @toVw 0 0 8 * @toVw;
+    }
+    .headerHP {
+      background-size: 62 * @toVw 434 * @toVw;
+      display: inline-block;
+    }
+    .home {
       height: 62 * @toVw;
       width: 62 * @toVw;
       background-position: 0 0;
-      .actBanKuai;
     }
-    &.defaultPlay {
+    .lookHP {
       height: 62 * @toVw;
       width: 62 * @toVw;
       background-position: 0 -62 * @toVw;
+      .actBanKuai;
     }
-    &.playHP {
+    .playHP {
       height: 62 * @toVw;
       width: 62 * @toVw;
       background-position: 0 -124 * @toVw;
       .actBanKuai;
     }
-    &.defaultLook {
+    .funHP {
       height: 62 * @toVw;
       width: 62 * @toVw;
       background-position: 0 -186 * @toVw;
+      .actBanKuai;
     }
-    &.home {
+    .defaultFun {
       height: 62 * @toVw;
       width: 62 * @toVw;
       background-position: 0 -248 * @toVw;
     }
-    &.defaultFun {
+    .defaultLook {
       height: 62 * @toVw;
       width: 62 * @toVw;
       background-position: 0 -310 * @toVw;
     }
-    &.funHP {
+    .defaultPlay {
       height: 62 * @toVw;
       width: 62 * @toVw;
       background-position: 0 -372 * @toVw;
-      .actBanKuai;
+    }
+    .header-h {
+      display: block;
+      width: 62 * @toVw;
+      position: absolute;
+      left: 17.5 * @toVw;
+      top: 20 * @toVw;
+      z-index: 2;
+      .headerHP {
+        display: block;
+        img {
+          width: 42 * @toVw;
+          margin-left: 10 * @toVw;
+          margin-top: 5 * @toVw;
+        }
+      }
+    }
+    .index-content-block {
+      position: absolute;
+      top: 20 * @toVw;
+      left: 80 * @toVw;
+      right: 20 * @toVw;
+      bottom: 20 * @toVw;
+      background: white;
+      border: 1 * @toVw solid #000;
+      border-radius: 0 8 * @toVw 8 * @toVw 8 * @toVw;
+      &.radius {
+        border-radius: 8 * @toVw;
+      }
     }
   }
-
-  .header-h {
-    display: block;
-    width: 62 * @toVw;
-    position: absolute;
-    left: 17.5 * @toVw;
-    top: 20 * @toVw;
-    z-index: 2;
+  @media screen and (min-aspect-ratio: ~"20/8") {
+    @toVw: 100/900vw;
+    .backImg {
+      position: fixed;
+      bottom: 40 * @toVw;
+      right: 20 * @toVw;
+      z-index: 99999999;
+      width: 60 * @toVw;
+    }
+    .lessonHeader {
+      display: none;
+    }
+    .header {
+      display: none;
+    }
+    .actBanKuai {
+      background-color: white;
+      border: 1 * @toVw solid transparent;
+      border-left-color: black;
+      border-top-color: black;
+      border-bottom-color: black;
+      border-radius: 8 * @toVw 0 0 8 * @toVw;
+    }
     .headerHP {
+      // background:url('https://static-cdn.changchangenglish.com/new-sing/static/images/index-h.png?v=2')  no-repeat;
+      background-size: 62 * @toVw 434 * @toVw;
+      display: inline-block;
+      &.lookHP {
+        height: 62 * @toVw;
+        width: 62 * @toVw;
+        background-position: 0 0;
+        .actBanKuai;
+      }
+      &.defaultPlay {
+        height: 62 * @toVw;
+        width: 62 * @toVw;
+        background-position: 0 -62 * @toVw;
+      }
+      &.playHP {
+        height: 62 * @toVw;
+        width: 62 * @toVw;
+        background-position: 0 -124 * @toVw;
+        .actBanKuai;
+      }
+      &.defaultLook {
+        height: 62 * @toVw;
+        width: 62 * @toVw;
+        background-position: 0 -186 * @toVw;
+      }
+      &.home {
+        height: 62 * @toVw;
+        width: 62 * @toVw;
+        background-position: 0 -248 * @toVw;
+      }
+      &.defaultFun {
+        height: 62 * @toVw;
+        width: 62 * @toVw;
+        background-position: 0 -310 * @toVw;
+      }
+      &.funHP {
+        height: 62 * @toVw;
+        width: 62 * @toVw;
+        background-position: 0 -372 * @toVw;
+        .actBanKuai;
+      }
+    }
+
+    .header-h {
       display: block;
-      img {
-        width: 42 * @toVw;
-        margin-left: 10 * @toVw;
-        margin-top: 5 * @toVw;
+      width: 62 * @toVw;
+      position: absolute;
+      left: 17.5 * @toVw;
+      top: 20 * @toVw;
+      z-index: 2;
+      .headerHP {
+        display: block;
+        img {
+          width: 42 * @toVw;
+          margin-left: 10 * @toVw;
+          margin-top: 5 * @toVw;
+        }
       }
     }
-  }
-  .index-content-block {
-    position: absolute;
-    top: 20 * @toVw;
-    left: 80 * @toVw;
-    right: 20 * @toVw;
-    bottom: 20 * @toVw;
-    background: white;
-    border: 1 * @toVw solid #000;
-    border-radius: 0 8 * @toVw 8 * @toVw 8 * @toVw;
-    &.radius {
-      border-radius: 8 * @toVw;
+    .index-content-block {
+      position: absolute;
+      top: 20 * @toVw;
+      left: 80 * @toVw;
+      right: 20 * @toVw;
+      bottom: 20 * @toVw;
+      background: white;
+      border: 1 * @toVw solid #000;
+      border-radius: 0 8 * @toVw 8 * @toVw 8 * @toVw;
+      &.radius {
+        border-radius: 8 * @toVw;
+      }
     }
   }
-}
 </style>
-

src/components/newLesson/share.vue

@@ -2,10 +2,21 @@
   <div class='box'>
     <div class="share-page" id="capture">
       <div class="share-block">
-        <div class="content" v-if="userDetail" ref="imageWrapper">
+        <div class="content" v-if="userDetail" ref="imageWrapper">  <!-- v-if="userDetail" -->
           <img :src="img_logo" class="imgLogo" />
           <div class="main-content">
             <div class="topBox">
+              <div v-if="starNum == 3">
+                <div class="diyikexing animated">
+                  <img :src="diyikexing" alt="">
+                </div>
+                <div class="dierkexing animated1">
+                  <img :src="dierkexing" alt="">
+                </div>
+                <div class="dierkexing1 animated2">
+                  <img :src="diyikexing" alt="">
+                </div>
+              </div>
               <img class="shareTitle" :src="shareTitle" />
               <div class="head-block">
                 <img :src="userDetail.avatar" />
@@ -107,603 +118,609 @@
 </template>
 
 <script>
-import { Toast } from "vant";
-import shareBg from "../../assets/newLesson/shareBg.png";
-import shareTitle from "../../assets/newLesson/img_title.png";
-import share_close from "../../assets/newLesson/share_close.png";
-import icon_baby from "../../assets/newLesson/icon_baby.png";
-import icon_day from "../../assets/newLesson/icon_day.png";
-import icon_min from "../../assets/newLesson/icon_min.png";
-import img_link from "../../assets/newLesson/img_link.png";
-import good from "../../assets/newLesson/good.png";
-import great from "../../assets/newLesson/great.png";
-import perfect from "../../assets/newLesson/perfect.png";
-import icon_change from "../../assets/newLesson/icon_change@2x.png";
-import icon_right from "../../assets/newLesson/icon_right@2x.png";
-import img_monkey from "../../assets/newLesson/img_monkey@2x.png";
-import img_tip from "../../assets/newLesson/img_tip@2x.png";
-import QRCode from "qrcodejs2";
-import html2canvas from "html2canvas";
-import {
-  getwechatParam,
-  getUserWatchApi,
-  getShortApi,
-  subUserLessonApi,
-  postErrorLogApi
-} from "../../service/api";
-import share_code_bg from "../../assets/newLesson/share-code-bg.png";
-import img_logo from "../../assets/newLesson/logo@2x.png";
-import share_tips from "../../assets/Bitmap@2x.png";
+  import { Toast } from "vant";
+  import shareBg from "../../assets/newLesson/shareBg.png";
+  import shareTitle from "../../assets/newLesson/img_title.png";
+  import share_close from "../../assets/newLesson/share_close.png";
+  import icon_baby from "../../assets/newLesson/icon_baby.png";
+  import icon_day from "../../assets/newLesson/icon_day.png";
+  import icon_min from "../../assets/newLesson/icon_min.png";
+  import img_link from "../../assets/newLesson/img_link.png";
+  import good from "../../assets/newLesson/good.png";
+  import great from "../../assets/newLesson/great.png";
+  import perfect from "../../assets/newLesson/perfect.png";
+  import icon_change from "../../assets/newLesson/icon_change@2x.png";
+  import icon_right from "../../assets/newLesson/icon_right@2x.png";
+  import img_monkey from "../../assets/newLesson/img_monkey@2x.png";
+  import img_tip from "../../assets/newLesson/img_tip@2x.png";
+  import dierkexing from "../../assets/evaluate/dierkexing.png";
+  import diyikexing from "../../assets/evaluate/diyikexing.png";
+  import QRCode from "qrcodejs2";
+  import html2canvas from "html2canvas";
+  import {
+    getwechatParam,
+    getUserWatchApi,
+    getShortApi,
+    subUserLessonApi,
+    postErrorLogApi
+  } from "../../service/api";
+  import share_code_bg from "../../assets/newLesson/share-code-bg.png";
+  import img_logo from "../../assets/newLesson/logo@2x.png";
+  import share_tips from "../../assets/Bitmap@2x.png";
 
-export default {
-  name: "share",
-  data() {
-    return {
-      img_monkey: img_monkey,
-      img_tip: img_tip,
-      oimgPoint: false,
-      canvasData: "",
-      QRCodeB: "",
-      img_link: img_link,
-      shareVisible: false,
-      shareBg: shareBg,
-      share_close: share_close,
-      share_tips: share_tips,
-      shareTitle: shareTitle,
-      icon_baby: icon_baby,
-      icon_day: icon_day,
-      icon_min: icon_min,
-      userDetail: null,
-      dataURL: null,
-      watchDetail: null,
-      share_code_bg: share_code_bg,
-      lesson: {},
-      domTitle: "",
-      imgPoint: good,
-      minute: "",
-      percent: 0,
-      saveTime: "",
-      lastTime: "",
-      icon_change: icon_change,
-      textIndex: 1,
-      textContent: "",
-      htmlContent: "",
-      icon_right: icon_right,
-      timeout: "",
-      nickname: "",
-      img_logo: img_logo,
-      animationBg:false
-    };
-  },
-  props: ["contentData"],
-  mounted() {
-    // console.log(this.contentData)
-    Toast.loading({
-      mask: true,
-      message: "",
-      duration: 300
-    });
-    this.initPage();
-  },
-  beforeDestroy() {
-    console.log(Date.parse(new Date()) - this.lastTime);
-    this.lesson.nowTime += Date.parse(new Date()) - this.lastTime;
-    localStorage.setItem("lessonDetail", JSON.stringify(this.lesson));
-    console.log(this.lesson.nowTime);
-  },
-  methods: {
-    touchStart() {
-      let query = JSON.parse(sessionStorage.getItem("classQuery"));
-      this.timeout = setTimeout(() => {
-        // postErrorLogApi({'routes_url':new Date().toString(),'result_text':this.userDetail.user_id}).then((res)=>{
-        //   console.log(res)
-        // })
+  export default {
+    name: "share",
+    data() {
+      return {
+        img_monkey: img_monkey,
+        img_tip: img_tip,
+        oimgPoint: false,
+        canvasData: "",
+        QRCodeB: "",
+        img_link: img_link,
+        shareVisible: false,
+        shareBg: shareBg,
+        share_close: share_close,
+        share_tips: share_tips,
+        shareTitle: shareTitle,
+        icon_baby: icon_baby,
+        icon_day: icon_day,
+        icon_min: icon_min,
+        userDetail: null,
+        dataURL: null,
+        watchDetail: null,
+        share_code_bg: share_code_bg,
+        lesson: {},
+        domTitle: "",
+        imgPoint: good,
+        minute: "",
+        percent: 0,
+        saveTime: "",
+        lastTime: "",
+        icon_change: icon_change,
+        textIndex: 1,
+        textContent: "",
+        htmlContent: "",
+        icon_right: icon_right,
+        timeout: "",
+        nickname: "",
+        img_logo: img_logo,
+        animationBg:false,
+        dierkexing: dierkexing,  // 三颗星第一第三颗
+        diyikexing: diyikexing,   // 第二课星
+        starNum: 0
+      };
+    },
+    props: ["contentData"],
+    mounted() {
+      this.starNum = JSON.parse(localStorage.getItem('lessonDetail')).star_num
+      Toast.loading({
+        mask: true,
+        message: "",
+        duration: 300
+      });
+      this.initPage();
+    },
+    beforeDestroy() {
+      console.log(Date.parse(new Date()) - this.lastTime);
+      this.lesson.nowTime += Date.parse(new Date()) - this.lastTime;
+      localStorage.setItem("lessonDetail", JSON.stringify(this.lesson));
+      console.log(this.lesson.nowTime);
+    },
+    methods: {
+      touchStart() {
+        let query = JSON.parse(sessionStorage.getItem("classQuery"));
+        this.timeout = setTimeout(() => {
+          // minute
+          postErrorLogApi({'routes_url':new Date().toString(),'result_text':this.userDetail.user_id}).then((res)=>{
+            console.log(res)
+          })
+          this.$sa.track("watchClick", {
+            dayModule: JSON.parse(
+                localStorage.getItem("lessonDetail")
+            ).domTitle.slice(0, 9),
+            weekName: JSON.parse(
+                localStorage.getItem("lessonDetail")
+            ).domTitle.slice(
+                10,
+                JSON.parse(localStorage.getItem("lessonDetail")).domTitle.length
+            ),
+            elementName:
+                JSON.parse(localStorage.getItem("lessonDetail")).domTitle.slice(
+                    0,
+                    9
+                ) +
+                "-" +
+                JSON.parse(localStorage.getItem("lessonDetail")).domTitle.slice(
+                    10,
+                    JSON.parse(localStorage.getItem("lessonDetail")).domTitle.length
+                ),
+            themeID: JSON.parse(localStorage.getItem("lessonDetail")).themeID,
+            themeName: JSON.parse(localStorage.getItem("lessonDetail")).themeName,
+            goodsID: JSON.parse(localStorage.getItem("lessonDetail")).goodsID,
+            classID: JSON.parse(localStorage.getItem("lessonDetail")).classID,
+            buttonName: "完成分享",
+            partName: this.contentData.partName,
+            elementID: query.elementId.toString()
+          });
+          let lessonDetail = JSON.parse(localStorage.getItem("lessonDetail"));
+          let nowTime = Date.parse(new Date());
+          let json = {
+            page_type: 0,
+            page_id: 4,
+            stay_time: 0
+          };
+          subUserLessonApi(
+              query.elementId,
+              query.category_id,
+              query.periods_id,
+              json
+          ).then(res => {
+            lessonDetail.total_watch_time = res;
+            lessonDetail.nowTime = nowTime;
+            localStorage.setItem("lessonDetail", JSON.stringify(lessonDetail));
+          });
+        }, 800);
+      },
+      touchEnd() {
+        clearInterval(this.timeout);
+      },
+      copyText() {
+        this.$sa.track("buttonClick", {
+          tabTitle: "打卡商品页",
+          moduleTitle: "功能按钮",
+          buttonType: "按钮点击",
+          buttonName: "复制心得"
+        });
+        this.$copyText(this.textContent).then(e => {
+          Toast("复制成功");
+        });
+      },
+      changeText() {
+        if (this.textIndex == 1) {
+          this.textContent = `我是${this.userDetail.nickname}，我家宝宝正在唱唱启蒙英语学习，已坚持${this.watchDetail.total_day}天啦，宝宝的英语一天比一天有进步了，成就感满满，继续坚持[拳头]~`;
+          this.textIndex = 2;
+        } else if (this.textIndex == 2) {
+          this.textContent = `陪宝宝在唱唱启蒙英语学习的第${this.watchDetail.total_day}天，宝宝又学会了一首新童谣《${this.lesson.title}》，每天都有新收获，坚持就是胜利，练就英语小神童[胜利]`;
+          this.textIndex = 3;
+        } else {
+          this.textContent = `我是${this.userDetail.nickname}，我正在参加唱唱启蒙英语👉【${this.lesson.course_title}】打卡活动，打卡第${this.watchDetail.total_day}天，我坚持，我最棒[强]！`;
+          this.textIndex = 1;
+        }
+      },
+      showShare() {
+        this.shareVisible = true;
+        // this.$refs.audioDom.play()
+        this.playAudio();
         this.$sa.track("watchClick", {
           dayModule: JSON.parse(
-            localStorage.getItem("lessonDetail")
+              localStorage.getItem("lessonDetail")
           ).domTitle.slice(0, 9),
           weekName: JSON.parse(
-            localStorage.getItem("lessonDetail")
+              localStorage.getItem("lessonDetail")
           ).domTitle.slice(
-            10,
-            JSON.parse(localStorage.getItem("lessonDetail")).domTitle.length
-          ),
-          elementName:
-            JSON.parse(localStorage.getItem("lessonDetail")).domTitle.slice(
-              0,
-              9
-            ) +
-            "-" +
-            JSON.parse(localStorage.getItem("lessonDetail")).domTitle.slice(
               10,
               JSON.parse(localStorage.getItem("lessonDetail")).domTitle.length
-            ),
+          ),
+          elementName:
+              JSON.parse(localStorage.getItem("lessonDetail")).domTitle.slice(
+                  0,
+                  9
+              ) +
+              "-" +
+              JSON.parse(localStorage.getItem("lessonDetail")).domTitle.slice(
+                  10,
+                  JSON.parse(localStorage.getItem("lessonDetail")).domTitle.length
+              ),
           themeID: JSON.parse(localStorage.getItem("lessonDetail")).themeID,
           themeName: JSON.parse(localStorage.getItem("lessonDetail")).themeName,
           goodsID: JSON.parse(localStorage.getItem("lessonDetail")).goodsID,
           classID: JSON.parse(localStorage.getItem("lessonDetail")).classID,
-          buttonName: "完成分享",
+          buttonName: "分享到微信",
           partName: this.contentData.partName,
-          elementID: query.elementId.toString()
-        });
-        let lessonDetail = JSON.parse(localStorage.getItem("lessonDetail"));
-        let nowTime = Date.parse(new Date());
-        let json = {
-          page_type: 0,
-          page_id: 4,
-          stay_time: 0
-        };
-        subUserLessonApi(
-          query.elementId,
-          query.category_id,
-          query.periods_id,
-          json
-        ).then(res => {
-          lessonDetail.total_watch_time = res;
-          lessonDetail.nowTime = nowTime;
-          localStorage.setItem("lessonDetail", JSON.stringify(lessonDetail));
+          elementID: this.$route.query.elementId.toString()
         });
-      }, 800);
-    },
-    touchEnd() {
-      clearInterval(this.timeout);
-    },
-    copyText() {
-      this.$sa.track("buttonClick", {
-        tabTitle: "打卡商品页",
-        moduleTitle: "功能按钮",
-        buttonType: "按钮点击",
-        buttonName: "复制心得"
-      });
-      this.$copyText(this.textContent).then(e => {
-        Toast("复制成功");
-      });
-    },
-    changeText() {
-      if (this.textIndex == 1) {
-        this.textContent = `我是${this.userDetail.nickname}，我家宝宝正在唱唱启蒙英语学习，已坚持${this.watchDetail.total_day}天啦，宝宝的英语一天比一天有进步了，成就感满满，继续坚持[拳头]~`;
-        this.textIndex = 2;
-      } else if (this.textIndex == 2) {
-        this.textContent = `陪宝宝在唱唱启蒙英语学习的第${this.watchDetail.total_day}天，宝宝又学会了一首新童谣《${this.lesson.title}》，每天都有新收获，坚持就是胜利，练就英语小神童[胜利]`;
-        this.textIndex = 3;
-      } else {
-        this.textContent = `我是${this.userDetail.nickname}，我正在参加唱唱启蒙英语👉【${this.lesson.course_title}】打卡活动，打卡第${this.watchDetail.total_day}天，我坚持，我最棒[强]！`;
-        this.textIndex = 1;
-      }
-    },
-    showShare() {
-      this.shareVisible = true;
-      // this.$refs.audioDom.play()
-      this.playAudio();
-      this.$sa.track("watchClick", {
-        dayModule: JSON.parse(
-          localStorage.getItem("lessonDetail")
-        ).domTitle.slice(0, 9),
-        weekName: JSON.parse(
-          localStorage.getItem("lessonDetail")
-        ).domTitle.slice(
-          10,
-          JSON.parse(localStorage.getItem("lessonDetail")).domTitle.length
-        ),
-        elementName:
-          JSON.parse(localStorage.getItem("lessonDetail")).domTitle.slice(
-            0,
-            9
-          ) +
-          "-" +
-          JSON.parse(localStorage.getItem("lessonDetail")).domTitle.slice(
-            10,
-            JSON.parse(localStorage.getItem("lessonDetail")).domTitle.length
-          ),
-        themeID: JSON.parse(localStorage.getItem("lessonDetail")).themeID,
-        themeName: JSON.parse(localStorage.getItem("lessonDetail")).themeName,
-        goodsID: JSON.parse(localStorage.getItem("lessonDetail")).goodsID,
-        classID: JSON.parse(localStorage.getItem("lessonDetail")).classID,
-        buttonName: "分享到微信",
-        partName: this.contentData.partName,
-        elementID: this.$route.query.elementId.toString()
-      });
-    },
-    initPage() {
-      this.watchDetail = this.$store.state.watchDetail;
-      // debugger
-      this.lesson = JSON.parse(localStorage.getItem("lessonDetail"));
-      this.lesson.domTitle = this.lesson.domTitle.substring(0, 9);
-      console.log(this.watchDetail, 170);
-      console.log(this.lesson);
-      this.lastTime = Date.parse(new Date());
-      clearInterval(this.$store.state.timeout);
-      this.userDetail = JSON.parse(localStorage.getItem("userDesc"));
-      this.nickname = this.userDetail.nickname;
-      if (this.nickname.length >= 6) {
-        this.nickname = this.nickname.slice(0, 4) + "...";
-      }
-      this.minute = (this.watchDetail.stay_time / 60).toFixed();
-      // this.minute = (600/60).toFixed()
-      if (this.minute < 1) {
-        this.minute = 1;
-      }
-      // this.minute<1?1:1
-      if (this.minute < 8) {
-        this.imgPoint = good;
-        this.$store.dispatch("setLookStatus", 0);
-        if (this.minute < 5) {
-          this.percent = 75 + Math.floor(49 * Math.random()) / 10;
-        } else {
-          this.percent = 81 + Math.floor(89 * Math.random()) / 10;
+      },
+      initPage() {
+        this.watchDetail = this.$store.state.watchDetail;
+        // debugger
+        this.lesson = JSON.parse(localStorage.getItem("lessonDetail"));
+        this.lesson.domTitle = this.lesson.domTitle.substring(0, 9);
+        console.log(this.watchDetail, 170);
+        console.log(this.lesson);
+        this.lastTime = Date.parse(new Date());
+        clearInterval(this.$store.state.timeout);
+        this.userDetail = JSON.parse(localStorage.getItem("userDesc"));
+        this.nickname = this.userDetail.nickname;
+        if (this.nickname.length >= 6) {
+          this.nickname = this.nickname.slice(0, 4) + "...";
         }
-      } else if (this.minute <= 12) {
-        this.$store.dispatch("setLookStatus", 1);
-        this.percent = 91 + Math.floor(39 * Math.random()) / 10;
-        this.imgPoint = great;
-      } else {
-        this.$store.dispatch("setLookStatus", 2);
-        console.log(Math.floor(39 * Math.random()));
-        this.percent = 96 + Math.floor(39 * Math.random()) / 10;
-        this.imgPoint = perfect;
-      }
-      // Toast.clear();
-      let query = JSON.parse(sessionStorage.getItem("classQuery"));
-      let obj = {
-        user_id: this.userDetail.user_id,
-        minute: this.minute,
-        percent: this.percent,
-        title: this.lesson.title,
-        domTitle: this.lesson.domTitle,
-        category_id: query.category_id
-      };
-      let URL = `${process.env.API_URL}#/navShare?invite_code=CC-UDK-${this.userDetail.user_id}`;
-      // let URL =
-      // 'https://wechat.changchangenglish.com/' +
-      // "#/shareGoods?info=" +
-      // encodeURIComponent(JSON.stringify(obj));
-      console.log(URL);
-      this.onShare(URL);
-      this.toDataURLBase64(
-        this.userDetail.avatar.replace("http://", "https://"),
-        avatar => {
-          this.toDataURLBase64(this.shareConBg, cal => {
-            this.shareConBg = cal;
-            this.userDetail.avatar = avatar;
-            this.$nextTick(() => {
-              // this.$refs.share_image.initPage();
-            });
-          });
+        this.minute = (this.watchDetail.stay_time / 60).toFixed();
+        // this.minute = (600/60).toFixed()
+        if (this.minute < 1) {
+          this.minute = 1;
         }
-      );
-      this.textContent = `我是${this.userDetail.nickname}，我正在参加唱唱启蒙英语【${this.lesson.course_title}】打卡活动，打卡第${this.watchDetail.total_day}天，我坚持，我最棒[强]！`;
-      this.qrcode(URL);
-      let that = this;
-      setTimeout(() => {
-        this.oimgPoint = true;
-      }, 900);
-      setTimeout(() => {
-        that.$nextTick(() => {
-          if (document.getElementById("capture")) {
-            html2canvas(document.getElementById("capture"), {
-              async: true,
-              scrollX: 0,
-              scale: 2,
-              letterRendering: true,
-              useCORS: true,
-              logging: true
-            })
-              .then(canvas => {
-                setTimeout(() => {
-                  this.animationBg = true;
-                },500)
-                let dataURL = canvas.toDataURL("image/jpg", 1.0);
-                this.canvasData = dataURL;
-              })
-              .catch(res => {
-                alert(res);
-                console.log();
-              });
+        // this.minute<1?1:1
+        if (this.minute < 8) {
+          this.imgPoint = good;
+          this.$store.dispatch("setLookStatus", 0);
+          if (this.minute < 5) {
+            this.percent = 75 + Math.floor(49 * Math.random()) / 10;
+          } else {
+            this.percent = 81 + Math.floor(89 * Math.random()) / 10;
           }
-        });
-      }, 1200);
-    },
-    enableShare: function(option) {
-      let query = JSON.parse(sessionStorage.getItem("classQuery"));
-      let that = this;
-      getwechatParam({
-        api_list: "onMenuShareAppMessage,onMenuShareTimeline",
-        url: window.location.href.split("#")[0]
-      }).then(wechatRes => {
-        wx.config({
-          debug: false,
-          appId: wechatRes.appId,
-          timestamp: parseInt(wechatRes.timestamp),
-          nonceStr: wechatRes.nonceStr,
-          signature: wechatRes.signature,
-          jsApiList: wechatRes.jsApiList
-        });
-        wx.ready(function() {
-          wx.onMenuShareTimeline({
-            title: option.product_title, // 分享标题
-            desc: option.desc, // 分享描述
-            link: option.shareUrl, // 分享链接
-            imgUrl:
-              option.shareIcon ||
-              "https://cdn.singsingenglish.com/singsing/recommend/logo-refer.png", // 分享图标
-            success: function() {
-              // setTimeout(() => {
-              //   that.$sa.track("watchClick", {
-              //     dayModule: JSON.parse(
-              //       localStorage.getItem("lessonDetail")
-              //     ).domTitle.slice(0, 9),
-              //     weekName: JSON.parse(
-              //       localStorage.getItem("lessonDetail")
-              //     ).domTitle.slice(
-              //       10,
-              //       JSON.parse(localStorage.getItem("lessonDetail")).domTitle
-              //         .length
-              //     ),
-              //     elementName:
-              //       JSON.parse(
-              //         localStorage.getItem("lessonDetail")
-              //       ).domTitle.slice(0, 9) +
-              //       "-" +
-              //       JSON.parse(
-              //         localStorage.getItem("lessonDetail")
-              //       ).domTitle.slice(
-              //         10,
-              //         JSON.parse(localStorage.getItem("lessonDetail")).domTitle
-              //           .length
-              //       ),
-              //     themeID: JSON.parse(localStorage.getItem("lessonDetail"))
-              //       .themeID,
-              //     themeName: JSON.parse(localStorage.getItem("lessonDetail"))
-              //       .themeName,
-              //     goodsID: JSON.parse(localStorage.getItem("lessonDetail"))
-              //       .goodsID,
-              //     classID: JSON.parse(localStorage.getItem("lessonDetail"))
-              //       .classID,
-              //     buttonName: "完成分享",
-              //     partName: that.contentData.partName,
-              //     elementID: query.elementId.toString()
-              //   });
-              //   let lessonDetail = JSON.parse(
-              //     localStorage.getItem("lessonDetail")
-              //   );
-              //   let nowTime = Date.parse(new Date());
-              //   let json = {
-              //     page_type: 0,
-              //     page_id: 4,
-              //     stay_time: 0
-              //   };
-              //   subUserLessonApi(
-              //     query.elementId,
-              //     query.category_id,
-              //     query.periods_id,
-              //     json
-              //   ).then(res => {
-              //     lessonDetail.total_watch_time = res;
-              //     lessonDetail.nowTime = nowTime;
-              //     localStorage.setItem(
-              //       "lessonDetail",
-              //       JSON.stringify(lessonDetail)
-              //     );
-              //   });
-              //   that.$emit("backList");
-              // }, 500);
-            },
-            cancel: function() {
-              that.$sa.track("watchClick", {
-                dayModule: JSON.parse(
-                  localStorage.getItem("lessonDetail")
-                ).domTitle.slice(0, 9),
-                weekName: JSON.parse(
-                  localStorage.getItem("lessonDetail")
-                ).domTitle.slice(
-                  10,
-                  JSON.parse(localStorage.getItem("lessonDetail")).domTitle
-                    .length
-                ),
-                elementName:
-                  JSON.parse(
-                    localStorage.getItem("lessonDetail")
-                  ).domTitle.slice(0, 9) +
-                  "-" +
-                  JSON.parse(
-                    localStorage.getItem("lessonDetail")
-                  ).domTitle.slice(
-                    10,
-                    JSON.parse(localStorage.getItem("lessonDetail")).domTitle
-                      .length
-                  ),
-                themeID: JSON.parse(localStorage.getItem("lessonDetail"))
-                  .themeID,
-                themeName: JSON.parse(localStorage.getItem("lessonDetail"))
-                  .themeName,
-                goodsID: JSON.parse(localStorage.getItem("lessonDetail"))
-                  .goodsID,
-                classID: JSON.parse(localStorage.getItem("lessonDetail"))
-                  .classID,
-                buttonName: "取消分享",
-                partName: that.contentData.partName,
-                elementID: query.elementId.toString()
+        } else if (this.minute <= 12) {
+          this.$store.dispatch("setLookStatus", 1);
+          this.percent = 91 + Math.floor(39 * Math.random()) / 10;
+          this.imgPoint = great;
+        } else {
+          this.$store.dispatch("setLookStatus", 2);
+          console.log(Math.floor(39 * Math.random()));
+          this.percent = 96 + Math.floor(39 * Math.random()) / 10;
+          this.imgPoint = perfect;
+        }
+        // Toast.clear();
+        let query = JSON.parse(sessionStorage.getItem("classQuery"));
+        let obj = {
+          user_id: this.userDetail.user_id,
+          minute: this.minute,
+          percent: this.percent,
+          title: this.lesson.title,
+          domTitle: this.lesson.domTitle,
+          category_id: query.category_id
+        };
+        let URL = `${process.env.API_URL}#/navShare?invite_code=CC-UDK-${this.userDetail.user_id}`;
+        // let URL =
+        // 'https://wechat.changchangenglish.com/' +
+        // "#/shareGoods?info=" +
+        // encodeURIComponent(JSON.stringify(obj));
+        console.log(URL);
+        this.onShare(URL);
+        this.toDataURLBase64(
+            this.userDetail.avatar.replace("http://", "https://"),
+            avatar => {
+              this.toDataURLBase64(this.shareConBg, cal => {
+                this.shareConBg = cal;
+                this.userDetail.avatar = avatar;
+                this.$nextTick(() => {
+                  // this.$refs.share_image.initPage();
+                });
               });
-              that.$emit("backList");
+            }
+        );
+        this.textContent = `我是${this.userDetail.nickname}，我正在参加唱唱启蒙英语【${this.lesson.course_title}】打卡活动，打卡第${this.watchDetail.total_day}天，我坚持，我最棒[强]！`;
+        this.qrcode(URL);
+        let that = this;
+        setTimeout(() => {
+          this.oimgPoint = true;
+        }, 900);
+        setTimeout(() => {
+          that.$nextTick(() => {
+            if (document.getElementById("capture")) {
+              html2canvas(document.getElementById("capture"), {
+                async: true,
+                scrollX: 0,
+                scale: 2,
+                letterRendering: true,
+                useCORS: true,
+                logging: true
+              })
+                  .then(canvas => {
+                    setTimeout(() => {
+                      this.animationBg = true;
+                    },500)
+                    let dataURL = canvas.toDataURL("image/jpg", 1.0);
+                    this.canvasData = dataURL;
+                  })
+                  .catch(res => {
+                    alert(res);
+                    console.log();
+                  });
             }
           });
-          wx.onMenuShareAppMessage({
-            title: option.product_title, // 分享标题
-            desc: option.desc, // 分享描述
-            link: option.shareUrl, // 分享链接
-            imgUrl:
-              option.shareIcon ||
-              "https://cdn.singsingenglish.com/singsing/recommend/logo-refer.png", // 分享图标
-            success: function() {
-              // that.$sa.track("watchClick", {
-              //   dayModule: JSON.parse(
-              //     localStorage.getItem("lessonDetail")
-              //   ).domTitle.slice(0, 9),
-              //   weekName: JSON.parse(
-              //     localStorage.getItem("lessonDetail")
-              //   ).domTitle.slice(
-              //     10,
-              //     JSON.parse(localStorage.getItem("lessonDetail")).domTitle
-              //       .length
-              //   ),
-              //   elementName:
-              //     JSON.parse(
-              //       localStorage.getItem("lessonDetail")
-              //     ).domTitle.slice(0, 9) +
-              //     "-" +
-              //     JSON.parse(
-              //       localStorage.getItem("lessonDetail")
-              //     ).domTitle.slice(
-              //       10,
-              //       JSON.parse(localStorage.getItem("lessonDetail")).domTitle
-              //         .length
-              //     ),
-              //   themeID: JSON.parse(localStorage.getItem("lessonDetail"))
-              //     .themeID,
-              //   themeName: JSON.parse(localStorage.getItem("lessonDetail"))
-              //     .themeName,
-              //   goodsID: JSON.parse(localStorage.getItem("lessonDetail"))
-              //     .goodsID,
-              //   classID: JSON.parse(localStorage.getItem("lessonDetail"))
-              //     .classID,
-              //   buttonName: "完成分享",
-              //   partName: that.contentData.partName,
-              //   elementID: query.elementId.toString()
-              // });
-              // let lessonDetail = JSON.parse(
-              //   localStorage.getItem("lessonDetail")
-              // );
-              // let nowTime = Date.parse(new Date());
-              // let json = {
-              //   page_type: 0,
-              //   page_id: 4,
-              //   stay_time: 0
-              // };
-              // subUserLessonApi(
-              //   query.elementId,
-              //   query.category_id,
-              //   query.periods_id,
-              //   json
-              // ).then(res => {
-              //   lessonDetail.total_watch_time = res;
-              //   lessonDetail.nowTime = nowTime;
-              //   localStorage.setItem(
-              //     "lessonDetail",
-              //     JSON.stringify(lessonDetail)
-              //   );
-              // });
-              // that.$emit("backList");
-            },
-            cancel: function() {
-              that.$sa.track("watchClick", {
-                dayModule: JSON.parse(
-                  localStorage.getItem("lessonDetail")
-                ).domTitle.slice(0, 9),
-                weekName: JSON.parse(
-                  localStorage.getItem("lessonDetail")
-                ).domTitle.slice(
-                  10,
-                  JSON.parse(localStorage.getItem("lessonDetail")).domTitle
-                    .length
-                ),
-                elementName:
-                  JSON.parse(
-                    localStorage.getItem("lessonDetail")
-                  ).domTitle.slice(0, 9) +
-                  "-" +
-                  JSON.parse(
-                    localStorage.getItem("lessonDetail")
+        }, 1200);
+      },
+      enableShare: function(option) {
+        let query = JSON.parse(sessionStorage.getItem("classQuery"));
+        let that = this;
+        getwechatParam({
+          api_list: "onMenuShareAppMessage,onMenuShareTimeline",
+          url: window.location.href.split("#")[0]
+        }).then(wechatRes => {
+          wx.config({
+            debug: false,
+            appId: wechatRes.appId,
+            timestamp: parseInt(wechatRes.timestamp),
+            nonceStr: wechatRes.nonceStr,
+            signature: wechatRes.signature,
+            jsApiList: wechatRes.jsApiList
+          });
+          wx.ready(function() {
+            wx.onMenuShareTimeline({
+              title: option.product_title, // 分享标题
+              desc: option.desc, // 分享描述
+              link: option.shareUrl, // 分享链接
+              imgUrl:
+                  option.shareIcon ||
+                  "https://cdn.singsingenglish.com/singsing/recommend/logo-refer.png", // 分享图标
+              success: function() {
+                // setTimeout(() => {
+                //   that.$sa.track("watchClick", {
+                //     dayModule: JSON.parse(
+                //       localStorage.getItem("lessonDetail")
+                //     ).domTitle.slice(0, 9),
+                //     weekName: JSON.parse(
+                //       localStorage.getItem("lessonDetail")
+                //     ).domTitle.slice(
+                //       10,
+                //       JSON.parse(localStorage.getItem("lessonDetail")).domTitle
+                //         .length
+                //     ),
+                //     elementName:
+                //       JSON.parse(
+                //         localStorage.getItem("lessonDetail")
+                //       ).domTitle.slice(0, 9) +
+                //       "-" +
+                //       JSON.parse(
+                //         localStorage.getItem("lessonDetail")
+                //       ).domTitle.slice(
+                //         10,
+                //         JSON.parse(localStorage.getItem("lessonDetail")).domTitle
+                //           .length
+                //       ),
+                //     themeID: JSON.parse(localStorage.getItem("lessonDetail"))
+                //       .themeID,
+                //     themeName: JSON.parse(localStorage.getItem("lessonDetail"))
+                //       .themeName,
+                //     goodsID: JSON.parse(localStorage.getItem("lessonDetail"))
+                //       .goodsID,
+                //     classID: JSON.parse(localStorage.getItem("lessonDetail"))
+                //       .classID,
+                //     buttonName: "完成分享",
+                //     partName: that.contentData.partName,
+                //     elementID: query.elementId.toString()
+                //   });
+                //   let lessonDetail = JSON.parse(
+                //     localStorage.getItem("lessonDetail")
+                //   );
+                //   let nowTime = Date.parse(new Date());
+                //   let json = {
+                //     page_type: 0,
+                //     page_id: 4,
+                //     stay_time: 0
+                //   };
+                //   subUserLessonApi(
+                //     query.elementId,
+                //     query.category_id,
+                //     query.periods_id,
+                //     json
+                //   ).then(res => {
+                //     lessonDetail.total_watch_time = res;
+                //     lessonDetail.nowTime = nowTime;
+                //     localStorage.setItem(
+                //       "lessonDetail",
+                //       JSON.stringify(lessonDetail)
+                //     );
+                //   });
+                //   that.$emit("backList");
+                // }, 500);
+              },
+              cancel: function() {
+                that.$sa.track("watchClick", {
+                  dayModule: JSON.parse(
+                      localStorage.getItem("lessonDetail")
+                  ).domTitle.slice(0, 9),
+                  weekName: JSON.parse(
+                      localStorage.getItem("lessonDetail")
                   ).domTitle.slice(
-                    10,
-                    JSON.parse(localStorage.getItem("lessonDetail")).domTitle
-                      .length
+                      10,
+                      JSON.parse(localStorage.getItem("lessonDetail")).domTitle
+                          .length
                   ),
-                themeID: JSON.parse(localStorage.getItem("lessonDetail"))
-                  .themeID,
-                themeName: JSON.parse(localStorage.getItem("lessonDetail"))
-                  .themeName,
-                goodsID: JSON.parse(localStorage.getItem("lessonDetail"))
-                  .goodsID,
-                classID: JSON.parse(localStorage.getItem("lessonDetail"))
-                  .classID,
-                buttonName: "取消分享",
-                partName: that.contentData.partName,
-                elementID: query.elementId.toString()
-              });
-            }
+                  elementName:
+                      JSON.parse(
+                          localStorage.getItem("lessonDetail")
+                      ).domTitle.slice(0, 9) +
+                      "-" +
+                      JSON.parse(
+                          localStorage.getItem("lessonDetail")
+                      ).domTitle.slice(
+                          10,
+                          JSON.parse(localStorage.getItem("lessonDetail")).domTitle
+                              .length
+                      ),
+                  themeID: JSON.parse(localStorage.getItem("lessonDetail"))
+                      .themeID,
+                  themeName: JSON.parse(localStorage.getItem("lessonDetail"))
+                      .themeName,
+                  goodsID: JSON.parse(localStorage.getItem("lessonDetail"))
+                      .goodsID,
+                  classID: JSON.parse(localStorage.getItem("lessonDetail"))
+                      .classID,
+                  buttonName: "取消分享",
+                  partName: that.contentData.partName,
+                  elementID: query.elementId.toString()
+                });
+                that.$emit("backList");
+              }
+            });
+            wx.onMenuShareAppMessage({
+              title: option.product_title, // 分享标题
+              desc: option.desc, // 分享描述
+              link: option.shareUrl, // 分享链接
+              imgUrl:
+                  option.shareIcon ||
+                  "https://cdn.singsingenglish.com/singsing/recommend/logo-refer.png", // 分享图标
+              success: function() {
+                // that.$sa.track("watchClick", {
+                //   dayModule: JSON.parse(
+                //     localStorage.getItem("lessonDetail")
+                //   ).domTitle.slice(0, 9),
+                //   weekName: JSON.parse(
+                //     localStorage.getItem("lessonDetail")
+                //   ).domTitle.slice(
+                //     10,
+                //     JSON.parse(localStorage.getItem("lessonDetail")).domTitle
+                //       .length
+                //   ),
+                //   elementName:
+                //     JSON.parse(
+                //       localStorage.getItem("lessonDetail")
+                //     ).domTitle.slice(0, 9) +
+                //     "-" +
+                //     JSON.parse(
+                //       localStorage.getItem("lessonDetail")
+                //     ).domTitle.slice(
+                //       10,
+                //       JSON.parse(localStorage.getItem("lessonDetail")).domTitle
+                //         .length
+                //     ),
+                //   themeID: JSON.parse(localStorage.getItem("lessonDetail"))
+                //     .themeID,
+                //   themeName: JSON.parse(localStorage.getItem("lessonDetail"))
+                //     .themeName,
+                //   goodsID: JSON.parse(localStorage.getItem("lessonDetail"))
+                //     .goodsID,
+                //   classID: JSON.parse(localStorage.getItem("lessonDetail"))
+                //     .classID,
+                //   buttonName: "完成分享",
+                //   partName: that.contentData.partName,
+                //   elementID: query.elementId.toString()
+                // });
+                // let lessonDetail = JSON.parse(
+                //   localStorage.getItem("lessonDetail")
+                // );
+                // let nowTime = Date.parse(new Date());
+                // let json = {
+                //   page_type: 0,
+                //   page_id: 4,
+                //   stay_time: 0
+                // };
+                // subUserLessonApi(
+                //   query.elementId,
+                //   query.category_id,
+                //   query.periods_id,
+                //   json
+                // ).then(res => {
+                //   lessonDetail.total_watch_time = res;
+                //   lessonDetail.nowTime = nowTime;
+                //   localStorage.setItem(
+                //     "lessonDetail",
+                //     JSON.stringify(lessonDetail)
+                //   );
+                // });
+                // that.$emit("backList");
+              },
+              cancel: function() {
+                that.$sa.track("watchClick", {
+                  dayModule: JSON.parse(
+                      localStorage.getItem("lessonDetail")
+                  ).domTitle.slice(0, 9),
+                  weekName: JSON.parse(
+                      localStorage.getItem("lessonDetail")
+                  ).domTitle.slice(
+                      10,
+                      JSON.parse(localStorage.getItem("lessonDetail")).domTitle
+                          .length
+                  ),
+                  elementName:
+                      JSON.parse(
+                          localStorage.getItem("lessonDetail")
+                      ).domTitle.slice(0, 9) +
+                      "-" +
+                      JSON.parse(
+                          localStorage.getItem("lessonDetail")
+                      ).domTitle.slice(
+                          10,
+                          JSON.parse(localStorage.getItem("lessonDetail")).domTitle
+                              .length
+                      ),
+                  themeID: JSON.parse(localStorage.getItem("lessonDetail"))
+                      .themeID,
+                  themeName: JSON.parse(localStorage.getItem("lessonDetail"))
+                      .themeName,
+                  goodsID: JSON.parse(localStorage.getItem("lessonDetail"))
+                      .goodsID,
+                  classID: JSON.parse(localStorage.getItem("lessonDetail"))
+                      .classID,
+                  buttonName: "取消分享",
+                  partName: that.contentData.partName,
+                  elementID: query.elementId.toString()
+                });
+              }
+            });
           });
         });
-      });
-    },
-    onShare(URL) {
-      console.log(451);
-      if (this.watchDetail && this.watchDetail.total_day) {
-        this.enableShare({
-          product_title: `我家宝宝正在【唱唱启蒙英语】唱学英语，已坚持${this.watchDetail.total_day}天`, // 分享标题
-          desc:
-            JSON.parse(localStorage.getItem("userDesc")).nickname +
-            `赠您【领取超值课程】特权，来唱唱和百万家庭一起快乐启蒙英语吧！`, //
-          shareIcon:
-            process.env.IMAGE_URL_HEAD +
-            "new-sing/number_Day" +
-            this.watchDetail.total_day +
-            ".jpg",
-          shareUrl: URL
-        });
-      }
-    },
-    toDataURLBase64(src, callback) {
-      let xhttp = new XMLHttpRequest();
-      xhttp.onload = function() {
-        let fileReader = new FileReader();
-        fileReader.onloadend = function() {
-          callback(fileReader.result);
+      },
+      onShare(URL) {
+        console.log(451);
+        if (this.watchDetail && this.watchDetail.total_day) {
+          this.enableShare({
+            product_title: `我家宝宝正在【唱唱启蒙英语】唱学英语，已坚持${this.watchDetail.total_day}天`, // 分享标题
+            desc:
+                JSON.parse(localStorage.getItem("userDesc")).nickname +
+                `赠您【领取超值课程】特权，来唱唱和百万家庭一起快乐启蒙英语吧！`, //
+            shareIcon:
+                process.env.IMAGE_URL_HEAD +
+                "new-sing/number_Day" +
+                this.watchDetail.total_day +
+                ".jpg",
+            shareUrl: URL
+          });
+        }
+      },
+      toDataURLBase64(src, callback) {
+        let xhttp = new XMLHttpRequest();
+        xhttp.onload = function() {
+          let fileReader = new FileReader();
+          fileReader.onloadend = function() {
+            callback(fileReader.result);
+          };
+          fileReader.readAsDataURL(xhttp.response);
         };
-        fileReader.readAsDataURL(xhttp.response);
-      };
-      xhttp.responseType = "blob";
-      xhttp.open("GET", src, true);
-      xhttp.send();
-    },
-    getOffsetRect(ele) {
-      var box = ele.getBoundingClientRect();
-      var body = document.body,
-        docElem = document.documentElement;
-      //获取页面的scrollTop,scrollLeft(兼容性写法)
-      var scrollTop = window.pageYOffset || docElem.scrollTop || body.scrollTop,
-        scrollLeft =
-          window.pageXOffset || docElem.scrollLeft || body.scrollLeft;
-      var clientTop = docElem.clientTop || body.clientTop,
-        clientLeft = docElem.clientLeft || body.clientLeft;
-      var top = box.top + scrollTop - clientTop,
-        left = box.left + scrollLeft - clientLeft;
-      return {
-        //Math.round 兼容火狐浏览器bug
-        top: Math.round(top),
-        left: Math.round(left)
-      };
-    },
-    qrcode(data) {
-      // debugger
-      let spx = document.body.clientWidth / 375;
-      if (this.QRCodeB) {
-        this.QRCodeB.makeCode(data);
-      } else {
-        this.QRCodeB = new QRCode("qrcode", {
-          width: 100 * spx,
-          height: 100 * spx, // 高度
-          text: data, // 二维码内容
-          image: "",
-          errorCorrectionLevel: "L"
-        });
+        xhttp.responseType = "blob";
+        xhttp.open("GET", src, true);
+        xhttp.send();
+      },
+      getOffsetRect(ele) {
+        var box = ele.getBoundingClientRect();
+        var body = document.body,
+            docElem = document.documentElement;
+        //获取页面的scrollTop,scrollLeft(兼容性写法)
+        var scrollTop = window.pageYOffset || docElem.scrollTop || body.scrollTop,
+            scrollLeft =
+                window.pageXOffset || docElem.scrollLeft || body.scrollLeft;
+        var clientTop = docElem.clientTop || body.clientTop,
+            clientLeft = docElem.clientLeft || body.clientLeft;
+        var top = box.top + scrollTop - clientTop,
+            left = box.left + scrollLeft - clientLeft;
+        return {
+          //Math.round 兼容火狐浏览器bug
+          top: Math.round(top),
+          left: Math.round(left)
+        };
+      },
+      qrcode(data) {
+        // debugger
+        let spx = document.body.clientWidth / 375;
+        if (this.QRCodeB) {
+          this.QRCodeB.makeCode(data);
+        } else {
+          this.QRCodeB = new QRCode("qrcode", {
+            width: 100 * spx,
+            height: 100 * spx, // 高度
+            text: data, // 二维码内容
+            image: "",
+            errorCorrectionLevel: "L"
+          });
+        }
+      },
+      playAudio() {
+        // this.$refs.audioDom.load()
+        // this.$refs.audioDom.play()
       }
-    },
-    playAudio() {
-      // this.$refs.audioDom.load()
-      // this.$refs.audioDom.play()
     }
-  }
-};
+  };
 </script>
 
 <style lang="less">
@@ -773,469 +790,550 @@ export default {
 </style>
 
 <style scoped lang="less">
-@import "../../util/public";
-@tocurrentvw : 1/2 * @toVw;
-@tocurrentvh : 1/2 * @toVh;
-.share_close {
-  position: fixed;
-  width: 20 * @toVw;
-  top: 26 * @toVw;
-  right: 14 * @toVw;
-  z-index: 1301;
-  color: white;
-  font-size: 16 * @toVw;
-}
+  @import "../../util/public";
+  @tocurrentvw : 1/2 * @toVw;
+  @tocurrentvh : 1/2 * @toVh;
+  .share_close {
+    position: fixed;
+    width: 20 * @toVw;
+    top: 26 * @toVw;
+    right: 14 * @toVw;
+    z-index: 1301;
+    color: white;
+    font-size: 16 * @toVw;
+  }
 
-.share-btn {
-  position: fixed;
-  top: 510 * @toVw;
-  left: 31 * @toVw;
-  z-index: 1301;
-  text-align: center;
-  width: 314 * @toVw;
-  height: 49 * @toVw;
-  display: flex;
-  justify-content: center;
-  background: linear-gradient(
-    0deg,
-    rgba(243, 180, 3, 1) 1%,
-    rgba(252, 231, 171, 1) 100%
-  );
-  text-shadow: 0px 1 * @toVw 1 * @toVw rgba(170, 127, 4, 0.7);
-  // box-shadow:0px 3*@toVw 16*@toVw 0px rgba(200,96,37,0.59);
-  border-radius: 22 * @toVw;
-  color: white;
-  line-height: 49 * @toVw;
-  font-size: 18 * @toVw;
-  box-shadow: 0px 3 * @toVw 16 * @toVw 0px rgba(250, 208, 88, 0.59);
-  background: linear-gradient(
-    0deg,
-    rgba(237, 151, 1, 1) 1%,
-    rgba(252, 217, 118, 1) 99%
-  );
-  box-shadow: 0px 3px 16px 0px rgba(250, 208, 88, 0.59);
-  .iconfont {
-    font-size: 22 * @toVw;
-    margin: 0;
+  .share-btn {
+    position: fixed;
+    top: 510 * @toVw;
+    left: 31 * @toVw;
+    z-index: 1301;
+    text-align: center;
+    width: 314 * @toVw;
+    height: 49 * @toVw;
+    display: flex;
+    justify-content: center;
+    background: linear-gradient(
+      0deg,
+      rgba(243, 180, 3, 1) 1%,
+      rgba(252, 231, 171, 1) 100%
+    );
+    text-shadow: 0px 1 * @toVw 1 * @toVw rgba(170, 127, 4, 0.7);
+    // box-shadow:0px 3*@toVw 16*@toVw 0px rgba(200,96,37,0.59);
+    border-radius: 22 * @toVw;
+    color: white;
+    line-height: 49 * @toVw;
+    font-size: 18 * @toVw;
+    box-shadow: 0px 3 * @toVw 16 * @toVw 0px rgba(250, 208, 88, 0.59);
+    background: linear-gradient(
+      0deg,
+      rgba(237, 151, 1, 1) 1%,
+      rgba(252, 217, 118, 1) 99%
+    );
+    box-shadow: 0px 3px 16px 0px rgba(250, 208, 88, 0.59);
+    .iconfont {
+      font-size: 22 * @toVw;
+      margin: 0;
+    }
+    img {
+      width: 270 * @toVw;
+    }
+    span {
+      font-weight: 580;
+      font-weight: bold;
+      margin: 0;
+    }
   }
-  img {
-    width: 270 * @toVw;
+  .canvasImg {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    z-index: 1300;
   }
-  span {
-    font-weight: 580;
-    font-weight: bold;
-    margin: 0;
+  .white-pannel {
+    position: absolute;
+    z-index: 1301;
+    top: 0;
+    width: 100%;
+    height: 510 * @toVw;
+    background: transparent;
+    pointer-events: none;
+    border: 7 * @toVw solid white;
+    border-radius: 12 * @toVw;
+    box-shadow: 0 0 0 20px white;
+    box-sizing: border-box;
+    .trs {
+      position: absolute;
+      top: 500 * @toVw;
+      // width: 100%;
+      left:-7 * @toVw;
+      right:-7 * @toVw;
+      background: white;
+      height: 33vh;
+    }
   }
-}
-.canvasImg {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  z-index: 1300;
-}
-.white-pannel {
-  position: absolute;
-  z-index: 1301;
-  top: 0;
-  width: 100%;
-  height: 510 * @toVw;
-  background: transparent;
-  pointer-events: none;
-  border: 7 * @toVw solid white;
-  border-radius: 12 * @toVw;
-  box-shadow: 0 0 0 20px white;
-  box-sizing: border-box;
-  .trs {
+  .borderDiv {
     position: absolute;
-    top: 500 * @toVw;
-    // width: 100%;
-    left:-7 * @toVw;
-    right:-7 * @toVw;
-    background: white;
-    height: 33vh;
+    z-index: 1301;
+    top: 0;
+    width: 100%;
+    pointer-events: none;
+    height: 510 * @toVw;
+    box-sizing: border-box;
+    border: 7 * @toVw solid white;
   }
-}
-.borderDiv {
-  position: absolute;
-  z-index: 1301;
-  top: 0;
-  width: 100%;
-  pointer-events: none;
-  height: 510 * @toVw;
-  box-sizing: border-box;
-  border: 7 * @toVw solid white;
-}
-.box{
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  min-height:100vh;
-  z-index:1300;
-  overflow:hidden;
-}
-.share-page {
-  position: fixed;
-  background: url("https://cdn.singsingenglish.com/new-sing/6c6766b21eceef9ddf36597efe3cc152f46ac7f0.png");
-  background-size: 100%;
-  top: 0;
-  left: 0;
-  // bottom: 0;
-  right: 0;
-  min-height: 650 * @toVw;
-  z-index: 1300;
-  .imgLogo {
+  .box{
     position: fixed;
-    top: 15 * @toVw;
-    left: 15 * @toVw;
-    width: 48 * @toVw;
+    top: 0;
+    left: 0;
+    width: 100%;
+    min-height:100vh;
+    z-index:1300;
+    overflow:hidden;
   }
-  .share-block {
-    position: absolute;
-    border-radius: 8 * @toVw;
-    top: 20 * @toVw;
-    left: 20 * @toVw;
-    right: 20 * @toVw;
-    // background: white;
-    bottom: 0;
-    overflow: auto;
-    .bg-title {
-      position: absolute;
-      top: 0;
-      left: 0;
-      right: 0;
-      height: 60 * @toVw;
-      background-size: 100% 100%;
-      z-index: -1;
+  .share-page {
+    position: fixed;
+    background: url("https://cdn.singsingenglish.com/new-sing/6fd01609c6fc980286734364d539bf50f6ea08cd.png");
+    background-size: 100%;
+    top: 0;
+    left: 0;
+    // bottom: 0;
+    right: 0;
+    min-height: 650 * @toVw;
+    z-index: 1300;
+    .imgLogo {
+      position: fixed;
+      top: 15 * @toVw;
+      left: 15 * @toVw;
+      width: 48 * @toVw;
     }
-    .bg-desc {
+    .share-block {
       position: absolute;
-      top: 58 * @toVw;
-      left: 0;
-      right: 0;
-      bottom: 0;
+      border-radius: 8 * @toVw;
+      top: 20 * @toVw;
+      left: 20 * @toVw;
+      right: 20 * @toVw;
       // background: white;
-      z-index: -1;
-      border-radius: 0 0 8 * @toVw 8 * @toVw;
-    }
-    #cvs-img {
-      position: absolute;
-      width: 100%;
-      // top: -3*@toVw;
-      left: 0;
-      z-index: 1;
-    }
-    .content {
-      width: 100%;
-      height: (480-53) * @toVw;
-      padding-top: 104 * @toVw;
-      // margin-top: 20*@toVw;
-      background-size: 100% 100%;
-      position: relative;
-      .content-black {
+      bottom: 0;
+      /*overflow: auto;*/
+      .bg-title {
         position: absolute;
-        z-index: -1;
-        width: 100%;
-        height: 100%;
         top: 0;
+        left: 0;
         right: 0;
+        height: 60 * @toVw;
+        background-size: 100% 100%;
+        z-index: -1;
+      }
+      .bg-desc {
+        position: absolute;
+        top: 58 * @toVw;
         left: 0;
+        right: 0;
         bottom: 0;
+        // background: white;
+        z-index: -1;
+        border-radius: 0 0 8 * @toVw 8 * @toVw;
       }
-    }
-    .audio {
-      position: fixed;
-      opacity: 0;
-    }
-    .main-content {
-      width: 322 * @toVw;
-      height: 200 * @toVw;
-      background: white;
-      border-radius: 8 * @toVw;
-      position: relative;
-      .img_link {
+      #cvs-img {
         position: absolute;
-        width: 260 * @toVw;
-        bottom: -49 * @toVw;
-        left: 33 * @toVw;
+        width: 100%;
+        // top: -3*@toVw;
+        left: 0;
+        z-index: 1;
       }
-      .imgPoint {
-        position: absolute;
-        width: 85 * @toVw;
-        top: 40 * @toVw;
-        left: 80 * @toVw;
-        opacity: 0;
-        @keyframes pointMove {
-          from {
-            top: 40 * @toVw;
-            left: 80 * @toVw;
-            transform: scale(2, 2);
-            opacity: 0;
-          }
-          to {
-            top: -60 * @toVw;
-            left: 229 * @toVw;
-            transform: scale(1, 1);
-            opacity: 1;
-          }
+      .content {
+        width: 100%;
+        height: (480-53) * @toVw;
+        padding-top: 110 * @toVw;
+        // margin-top: 20*@toVw;
+        background-size: 100% 100%;
+        position: relative;
+        .content-black {
+          position: absolute;
+          z-index: -1;
+          width: 100%;
+          height: 100%;
+          top: 0;
+          right: 0;
+          left: 0;
+          bottom: 0;
         }
-        animation: pointMove 0.375s 0.5s ease;
-        animation-fill-mode: forwards;
       }
-      .oimgPoint {
-        position: absolute;
-        width: 85 * @toVw;
-        top: -60 * @toVw;
-        left: 229 * @toVw;
+      .audio {
+        position: fixed;
+        opacity: 0;
       }
-      .topBox {
-        position: absolute;
-        top: -34 * @toVw;
-        left: 48 * @toVw;
-        .shareTitle {
-          width: 223 * @toVw;
+      .main-content {
+        width: 322 * @toVw;
+        height: 200 * @toVw;
+        background: white;
+        border-radius: 8 * @toVw;
+        position: relative;
+        .img_link {
+          position: absolute;
+          width: 260 * @toVw;
+          bottom: -49 * @toVw;
+          left: 33 * @toVw;
         }
-      }
-      .main-text {
-        padding-top: 48 * @toVw;
-        text-align: center;
-        margin: auto;
-        margin-bottom: 0;
-        display: flex;
-        .item {
-          flex: 1;
-          margin: 0;
-          .text1 {
-            color: #5f696e;
-            font-size: 13 * @toVw;
-            margin: 8 * @toVw 0;
+        .imgPoint {
+          position: absolute;
+          width: 85 * @toVw;
+          top: 40 * @toVw;
+          left: 80 * @toVw;
+          opacity: 0;
+          @keyframes pointMove {
+            from {
+              top: 40 * @toVw;
+              left: 80 * @toVw;
+              transform: scale(2, 2);
+              opacity: 0;
+            }
+            to {
+              top: -60 * @toVw;
+              left: 229 * @toVw;
+              transform: scale(1, 1);
+              opacity: 1;
+            }
           }
-          img {
-            width: 46 * @toVw;
+          animation: pointMove 0.375s 0.5s ease;
+          animation-fill-mode: forwards;
+        }
+        .oimgPoint {
+          position: absolute;
+          width: 85 * @toVw;
+          top: -60 * @toVw;
+          left: 229 * @toVw;
+        }
+        .topBox {
+          position: absolute;
+          top: -34 * @toVw;
+          left: 48 * @toVw;
+          .shareTitle {
+            width: 223 * @toVw;
+          }
+          .diyikexing {
+            width: 35 * @toVw;
+            height: 34 * @toVw;
+            position: absolute;
+            z-index: 1000;
+            top: -50 * @toVw;
+            left: 40 * @toVw;
+            img {
+              width: 100%;
+              height: 100%;
+            }
           }
-          .text2 {
-            font-size: 11 * @toVw;
-            color: #5f696e;
-            span {
-              color: #ec7e1f;
-              font-size: 22 * @toVw;
-              font-weight: bold;
+          .dierkexing1 {
+            width: 35 * @toVw;
+            height: 34 * @toVw;
+            position: absolute;
+            z-index: 1000;
+            top: -50 * @toVw;
+            right: 40 * @toVw;
+            img {
+              width: 100%;
+              height: 100%;
+            }
+          }
+          .dierkexing {
+            width: 41 * @toVw;
+            height: 39 * @toVw;
+            position: absolute;
+            top: -86 * @toVw;
+            left: 92 * @toVw;
+            z-index: 1000;
+            img {
+              width: 100%;
+              height: 100%;
             }
           }
         }
-      }
-      .head-block {
-        position: absolute;
-        text-align: center;
-        border-radius: 200 * @toVw;
-        // left: 50%;
-        width: 100%;
-        text-align: center;
-        top: -52 * @toVw;
-        img {
-          border: 8 * @toVw solid #72cefa;
+        .main-text {
+          padding-top: 48 * @toVw;
+          text-align: center;
+          margin: auto;
+          margin-bottom: 0;
+          display: flex;
+          .item {
+            flex: 1;
+            margin: 0;
+            .text1 {
+              color: #5f696e;
+              font-size: 13 * @toVw;
+              margin: 8 * @toVw 0;
+            }
+            img {
+              width: 46 * @toVw;
+            }
+            .text2 {
+              font-size: 11 * @toVw;
+              color: #5f696e;
+              span {
+                color: #ec7e1f;
+                font-size: 22 * @toVw;
+                font-weight: bold;
+              }
+            }
+          }
+        }
+        .head-block {
+          position: absolute;
+          text-align: center;
           border-radius: 200 * @toVw;
-          width: 62 * @toVw;
-          margin-top: 7 * @toVw;
-          height: 62 * @toVw;
+          // left: 50%;
+          width: 100%;
+          text-align: center;
+          top: -52 * @toVw;
+          img {
+            border: 8 * @toVw solid #72cefa;
+            border-radius: 200 * @toVw;
+            width: 62 * @toVw;
+            margin-top: 7 * @toVw;
+            height: 62 * @toVw;
+          }
+        }
+        .content-title {
+          width: 226 * @toVw;
+          // height: 54 * @toVw;
+          line-height: 26 * @toVw;
+          margin-top: 40 * @toVw;
+          color: #55343a;
+          // background: white;
+          font-size: 14 * @toVw;
+          text-align: center;
+          background-size: 99.99% 99.99%;
+          position: absolute;
+          top: -14 * @toVw;
+          color: white;
+          vertical-align: top;
+          display: flex;
+          justify-content: center;
+          // left: 50%;
+          // margin-left: -112.5*@toVw;
+          span {
+            margin: 0;
+          }
+          .ellipsisCss {
+            max-width: 86 * @toVw;
+          }
         }
       }
-      .content-title {
-        width: 226 * @toVw;
-        // height: 54 * @toVw;
-        line-height: 26 * @toVw;
-        margin-top: 40 * @toVw;
-        color: #55343a;
-        // background: white;
-        font-size: 14 * @toVw;
+      .sing-content {
+        background: white;
+        border-radius: 10 * @toVw;
+        margin-top: 30 * @toVw;
+        padding: 20 * @toVw 0;
         text-align: center;
-        background-size: 99.99% 99.99%;
-        position: absolute;
-        top: -14 * @toVw;
-        color: white;
-        vertical-align: top;
-        display: flex;
-        justify-content: center;
-        // left: 50%;
-        // margin-left: -112.5*@toVw;
-        span {
-          margin: 0;
+        .text1 {
+          margin: 0 0 20 * @toVw;
+          font-size: 13 * @toVw;
         }
-        .ellipsisCss {
-          max-width: 86 * @toVw;
+        .text2 {
+          color: #1d6588;
+          font-size: 22 * @toVw;
+          font-weight: bold;
+          margin-bottom: 10 * @toVw;
+          width: 318 * @toVw;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+        .text3 {
+          color: #1d6588;
         }
       }
     }
-    .sing-content {
-      background: white;
-      border-radius: 10 * @toVw;
-      margin-top: 30 * @toVw;
-      padding: 20 * @toVw 0;
-      text-align: center;
-      .text1 {
-        margin: 0 0 20 * @toVw;
-        font-size: 13 * @toVw;
-      }
-      .text2 {
-        color: #1d6588;
-        font-size: 22 * @toVw;
-        font-weight: bold;
+    .qrbox {
+      background: #1a9bda;
+      top: 514 * @toVw;
+      // top: 414* @toVw;
+      color: white;
+      position: absolute;
+      left: 0;
+      width: 100%;
+      display: flex;
+      padding: 18 * @toVw;
+      box-sizing: border-box;
+      font-weight: bold;
+      p {
+        font-size: 18 * @toVw;
         margin-bottom: 10 * @toVw;
-        width: 318 * @toVw;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-      }
-      .text3 {
-        color: #1d6588;
       }
-    }
-  }
-  .qrbox {
-    background: #1a9bda;
-    top: 514 * @toVw;
-    // top: 414* @toVw;
-    color: white;
-    position: absolute;
-    left: 0;
-    width: 100%;
-    display: flex;
-    padding: 18 * @toVw;
-    box-sizing: border-box;
-    font-weight: bold;
-    p {
-      font-size: 18 * @toVw;
-      margin-bottom: 10 * @toVw;
-    }
-    .left {
-      flex: 1;
-      .point {
-        border: 1px solid white;
-        height: 30 * @toVw;
-        width: 191 * @toVw;
-        text-align: center;
-        line-height: 30 * @toVw;
-        border-radius: 5 * @toVw;
-        margin-left: 0;
-        img {
-          width: 14 * @toVw;
-          position: relative;
-          top: 2 * @toVw;
+      .left {
+        flex: 1;
+        .point {
+          border: 1px solid white;
+          height: 30 * @toVw;
+          width: 191 * @toVw;
+          text-align: center;
+          line-height: 30 * @toVw;
+          border-radius: 5 * @toVw;
+          margin-left: 0;
+          img {
+            width: 14 * @toVw;
+            position: relative;
+            top: 2 * @toVw;
+          }
         }
       }
-    }
-    .right {
-      .qrcode {
-        display: inline-block;
-        border: 3px solid white;
-        // background:white;
-        font-size: 0;
-        img {
+      .right {
+        .qrcode {
+          display: inline-block;
+          border: 3px solid white;
+          // background:white;
+          font-size: 0;
+          img {
+          }
         }
       }
     }
-  }
-  .tips {
-    background: rgba(0, 0, 0, 0.8);
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    padding-right: 19 * @toVw;
-    z-index: 99999999;
-    text-align: right;
-    img {
-      width: 80%;
-    }
-    .closeBox {
-      position: absolute;
+    .tips {
+      background: rgba(0, 0, 0, 0.8);
+      position: fixed;
       top: 0;
       left: 0;
       right: 0;
       bottom: 0;
+      padding-right: 19 * @toVw;
+      z-index: 99999999;
+      text-align: right;
+      img {
+        width: 80%;
+      }
+      .closeBox {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+      }
     }
-  }
-  .pannel {
-    width: 616 * @tocurrentvw;
-    height: 380 * @tocurrentvw;
-    border-radius: 16 * @tocurrentvw;
-    position: fixed;
-    z-index: 2;
-    top: 48vh;
-    left: 67 * @tocurrentvw;
-    border: 2 * @tocurrentvw dashed #fff;
-    color: white;
-    .pannel-container {
-      width: 558 * @tocurrentvw;
-      height: 324 * @tocurrentvw;
-      margin: 28 * @tocurrentvw;
-      // background-color: pink;
-      display: flex;
-      flex-direction: column;
-      justify-content: flex-start;
-      .pannel-header {
+    .pannel {
+      width: 616 * @tocurrentvw;
+      height: 380 * @tocurrentvw;
+      border-radius: 16 * @tocurrentvw;
+      position: fixed;
+      z-index: 2;
+      top: 48vh;
+      left: 67 * @tocurrentvw;
+      border: 2 * @tocurrentvw dashed #fff;
+      color: white;
+      .pannel-container {
+        width: 558 * @tocurrentvw;
+        height: 324 * @tocurrentvw;
+        margin: 28 * @tocurrentvw;
+        // background-color: pink;
         display: flex;
-        margin: 0;
-        align-items: center;
-        height: 40 * @tocurrentvw;
-        font-size: 28 * @tocurrentvw;
-        color: #fff;
-        text-align: left;
-        img {
-          display: block;
-          width: 38 * @tocurrentvw;
+        flex-direction: column;
+        justify-content: flex-start;
+        .pannel-header {
+          display: flex;
+          margin: 0;
+          align-items: center;
           height: 40 * @tocurrentvw;
+          font-size: 28 * @tocurrentvw;
+          color: #fff;
+          text-align: left;
+          img {
+            display: block;
+            width: 38 * @tocurrentvw;
+            height: 40 * @tocurrentvw;
+          }
         }
-      }
-      .pannel-main {
-        text-align: left;
-        margin-top: 18 * @toVw;
-        img {
-          height: 18 * @toVw;
-          vertical-align: text-bottom;
+        .pannel-main {
+          text-align: left;
+          margin-top: 18 * @toVw;
+          img {
+            height: 18 * @toVw;
+            vertical-align: text-bottom;
+          }
         }
-      }
-      .pannel-footer {
-        margin: 0;
-        img {
-          position: relative;
-          top: 2 * @toVw;
-          width: 16 * @toVw;
+        .pannel-footer {
+          margin: 0;
+          img {
+            position: relative;
+            top: 2 * @toVw;
+            width: 16 * @toVw;
+          }
         }
       }
+      .transparentBtn {
+        margin-top: 30 * @toVw;
+      }
+    }
+  }
+
+  @keyframes mymove
+  {
+    0%{
+      transform: scale(1);  /*开始为原始大小*/
+    }
+    50%{
+      transform: scale(1.5);
     }
-    .transparentBtn {
-      margin-top: 30 * @toVw;
+    100%{
+      transform: scale(1);
     }
+
   }
-}
-@media screen and (min-width: 600px) {
-.box{
-  overflow:auto;
-}
-.white-pannel {
-  .trs {
-    height: 30vh;
+
+  @-webkit-keyframes mymove /*Safari and Chrome*/
+  {
+    0%{
+      transform: scale(1);  /*开始为原始大小*/
+    }
+    50%{
+      transform: scale(1.5);
+    }
+    100%{
+      transform: scale(1);
+    }
+  }
+
+  .animated {
+    animation: mymove 1s .5s ease;
+    animation-fill-mode: forwards;
+  }
+
+  .animated1 {
+    animation: mymove 1s 1s ease;
+    animation-fill-mode: forwards;
+  }
+
+  .animated2 {
+    animation: mymove 1s 1.5s ease;
+    animation-fill-mode: forwards;
+  }
+
+
+
+  @media screen and (min-width: 600px) {
+    .box{
+      overflow:auto;
+    }
+    .white-pannel {
+      .trs {
+        height: 30vh;
+      }
+    }
   }
-}
-}
 </style>
 <style lang="less">
-@import "../../util/public";
-.van-toast {
-  top: 35%;
-}
-.pannel-main {
-  img {
-    height: 18 * @toVw;
-    vertical-align: text-bottom;
+  @import "../../util/public";
+  .van-toast {
+    top: 35%;
+  }
+  .pannel-main {
+    img {
+      height: 18 * @toVw;
+      vertical-align: text-bottom;
+    }
   }
-}
 </style>
 <style lang="">
-/* body{
-  pointer-events: none;
-}  */
+  /* body{
+    pointer-events: none;
+  }  */
 </style>

src/components/newLesson/star.vue

@@ -4,16 +4,21 @@
     <mt-popup
       v-model="popupVisible" style="background: transparent">
       <div class="pop-block">
-        <img :src="starNum == 0 ? star1 : starNum == 3 ? star3 : star2 " class="star-all"/>
+        <img :src="starNum == 1 ? star1 : starNum  == 2 ? star2 : star3 " class="star-all"/>
         <div class="list">
-          1.完成今日学习
+          1.开始课程学习
           <div class="star-content">
-            <img :src="starNum == 0 ? star_default : star_active">
-            <img :src="starNum < 2 ? star_default : star_active">
+            <img :src="starNum >= 1 ? star_active : star_default">
           </div>
         </div>
         <div class="list">
-          2.分享学习记录
+          2.完成今日学习
+          <div class="star-content">
+            <img :src="starNum >= 2 ? star_active : star_default">
+          </div>
+        </div>
+        <div class="list">
+          3.提交成长记录
           <div class="star-content">
             <img :src="starNum == 3 ? star_active : star_default">
           </div>
@@ -21,7 +26,7 @@
         <div class="btn-block">
           <div class="btn" @click="showShare">
             <span v-if="starNum < 2">继续看课</span>
-            <span  v-if="starNum == 2">分享赚星星</span>
+            <span  v-if="starNum == 2">去记录</span>
             <span v-if="starNum == 3">关闭</span>
           </div>
         </div>
@@ -110,7 +115,7 @@
     width: 230*@toVw;
     padding:50*@toVw 10*@toVw 10*@toVw 10*@toVw;
     position: relative;
-    height: 142*@toVw;
+    // height: 142*@toVw;
     .star-all{
       width: 154*@toVw;
       position: absolute;

src/components/newLesson/video.vue

@@ -46,18 +46,18 @@
         v-if="showObj.video[videoIndex]"
         v-show="!share_show && !popupVisible"
       >
-      <!-- :src="showObj.video[videoIndex].url" -->
+        <!-- :src="showObj.video[videoIndex].url" -->
         <video v-show="!star"
-          ref="videoDom"
-          style="object-fit:fill"
-          x5-video-player-type="h5"  x5-video-player-fullscreen="true" x-webkit-airplay="true" playsinline
-          :src="showObj.video[videoIndex].url"
-          @ended="videoEnd"
-          @error="errorLog"
-          @play="videoPlay()"
-          controlslist="nodownload"
-          :controls="vcontrols"
-          :poster="showObj.video[videoIndex].url+'?vframe/jpg/offset/3'"
+               ref="videoDom"
+               style="object-fit:fill"
+               x5-video-player-type="h5"  x5-video-player-fullscreen="true" x-webkit-airplay="true" playsinline
+               :src="showObj.video[videoIndex].url"
+               @ended="videoEnd"
+               @error="errorLog"
+               @play="videoPlay()"
+               controlslist="nodownload"
+               :controls="vcontrols"
+               :poster="showObj.video[videoIndex].url+'?vframe/jpg/offset/3'"
         ></video>
         <div class="video-bj" v-show="star">
           <img :src="showObj.video[videoIndex].url+'?vframe/jpg/offset/3'" alt="">
@@ -134,730 +134,609 @@
   </div>
 </template>
 <script>
-import luolacoming from "../../assets/newLesson/luoLacoming.png";
-import luolalaila from "../../assets/newLesson/luolalaila.png";
-import { subUserLessonApi, getUserWatchApi,postErrorLogApi } from "../../service/api";
-import tapToAudio from "../../assets/tapToAudio.png";
-import finishStuat from "../../assets/newLesson/finishStudy.png";
-import noFinishDia from "./nofinishdia";
-import sharePage from "./share";
-import starBlock from "./star";
-import { Popup } from "mint-ui";
-import audioGood from "../../assets/good.mp3";
-import audioGreat from "../../assets/great.mp3";
-import audioPerfect from "../../assets/perfect.mp3";
-import leftIcon from "../../assets/shop/left.png";
-import { Toast } from "vant";
-// import videojs from "videojs";
-export default {
-  name: "play",
-  components: {
-    noFinishDia,
-    sharePage,
-    starBlock,
-    [Popup.name]: Popup
-  },
-  data() {
-    return {
-      vcontrols: true,
-      clarityType: "1280",
-      secClarity: false,
-      leftIcon: leftIcon,
-      finishStuat: finishStuat,
-      popupVisible: false,
-      ageShow: false,
-      star: false,
-      share_show: false,
-      showObj: {
-        video: [],
-        change: false
-      },
-      videoShow: false,
-      videoIndex: 0,
-      imgURL: {
-        luolacoming: luolacoming,
-        luolalaila: luolalaila,
-        tapToAudio: tapToAudio
-      },
-      orientationchange: false,
-      testCount: 5,
-      videoStyle: "0",
-      videoWidth: 100,
-      audioPoint: audioGood,
-      currentTime: "",
-      QPlayerConfig :{
-        url:''
-      },
-      videoObj:null,
-      userDetail:{}
-    };
-  },
-  props: ["contentData", "nowShow"],
-  created() {
-    this.videoWidth = Number(document.documentElement.clientWidth) / 3.8;
-  },
-  mounted() {
-    this.changeAge(this.contentData.age);
-    let that = this;
-    // console.log(document.documentElement.clientWidth)
-    if (
-      document.documentElement.clientWidth >
-      document.documentElement.clientHeight
-    ) {
-      this.orientationchange = true;
-    } else {
-      this.orientationchange = false;
-    }
-    window.addEventListener(
-      "orientationchange",
-      () => {
-        let width = document.documentElement.clientWidth;
-        let height = document.documentElement.clientHeight;
-        let t = setTimeout(function() {
-          if (width < height) {
-            that.orientationchange = true;
-            clearTimeout(t);
-            // return
-          } else {
-            that.orientationchange = false;
-            clearTimeout(t);
-            // return
-          }
-        }, 100);
-        // debugger
-      },
-      false
-    );
-    // console.log(videojs)
-  },
-  methods: {
-    errorLog(e){
-      this.userDetail = JSON.parse(localStorage.getItem("userDesc"));
-      // console.log(e.target.error,229)
-      let str='code:'+e.target.error.code+',msg:'+e.target.error.message+',url:'+
-      this.showObj.video[this.videoIndex].url+',UserAgent:'+navigator.userAgent+',currentTime:'+this.$refs.videoDom.currentTime
-      postErrorLogApi({
-        'routes_url':'videoerror,'+'userid:'+this.userDetail.user_id,
-        'result_text':str
-      }).then((res)=>{
-        // console.log(res)
-      })
+  import luolacoming from "../../assets/newLesson/luoLacoming.png";
+  import luolalaila from "../../assets/newLesson/luolalaila.png";
+  import { subUserLessonApi, getUserWatchApi,postErrorLogApi } from "../../service/api";
+  import tapToAudio from "../../assets/tapToAudio.png";
+  import finishStuat from "../../assets/newLesson/finishStudy1.png";
+  import noFinishDia from "./nofinishdia";
+  import sharePage from "./share";
+  import starBlock from "./star";
+  import { Popup } from "mint-ui";
+  import audioGood from "../../assets/good.mp3";
+  import audioGreat from "../../assets/great.mp3";
+  import audioPerfect from "../../assets/perfect.mp3";
+  import leftIcon from "../../assets/shop/left.png";
+  import { Toast } from "vant";
+  // import videojs from "videojs";
+  export default {
+    name: "play",
+    components: {
+      noFinishDia,
+      sharePage,
+      starBlock,
+      [Popup.name]: Popup
+    },
+    data() {
+      return {
+        vcontrols: true,
+        clarityType: "1280",
+        secClarity: false,
+        leftIcon: leftIcon,
+        finishStuat: finishStuat,
+        popupVisible: false,
+        ageShow: false,
+        star: false,
+        share_show: false,
+        showObj: {
+          video: [],
+          change: false
+        },
+        videoShow: false,
+        videoIndex: 0,
+        imgURL: {
+          luolacoming: luolacoming,
+          luolalaila: luolalaila,
+          tapToAudio: tapToAudio
+        },
+        orientationchange: false,
+        testCount: 5,
+        videoStyle: "0",
+        videoWidth: 100,
+        audioPoint: audioGood,
+        currentTime: "",
+        QPlayerConfig :{
+          url:''
+        },
+        videoObj:null,
+        userDetail:{}
+      };
     },
-    sliceUrl() {
-      localStorage.setItem("clarityType", this.clarityType);
-      this.showObj.video.forEach(el => {
-        el.url =
-          el.url.slice(0, el.url.indexOf("_")) +
-          "_" +
-          this.clarityType +
-          el.url.slice(-4);
-      });
+    props: ["contentData", "nowShow"],
+    created() {
+      this.videoWidth = Number(document.documentElement.clientWidth) / 3.8;
     },
-    changeClarity(a) {
-      // Toast.loading({
-      //     mask: true,
-      //     message: ''
-      //   });
+    mounted() {
+      if(this.$route.params.evaluate === 1)
+        this.finishStudy()
+      this.changeAge(this.contentData.age);
       let that = this;
-      this.currentTime = this.$refs.videoDom.currentTime;
-      if (a == "1280") {
-        this.clarityType = 1280;
-        this.sliceUrl();
-      } else if (a == "720") {
-        this.clarityType = 720;
-        this.sliceUrl();
+      // console.log(document.documentElement.clientWidth)
+      if (
+          document.documentElement.clientWidth >
+          document.documentElement.clientHeight
+      ) {
+        this.orientationchange = true;
       } else {
-        this.clarityType = 540;
-        this.sliceUrl();
+        this.orientationchange = false;
       }
-      this.secClarity = false;
-    },
-    scrollFn(index) {
-      this.videoStyle = index;
-      this.videoIndex = index;
-      let parentwidth = Number(
-        getComputedStyle(document.querySelector(".scroll")).width.replace(
-          "px",
-          ""
-        )
-      );
-      let itemBoxWidth = Number(
-        getComputedStyle(document.querySelector(".itemBox")).width.replace(
-          "px",
-          ""
-        )
+      window.addEventListener(
+          "orientationchange",
+          () => {
+            let width = document.documentElement.clientWidth;
+            let height = document.documentElement.clientHeight;
+            let t = setTimeout(function() {
+              if (width < height) {
+                that.orientationchange = true;
+                clearTimeout(t);
+                // return
+              } else {
+                that.orientationchange = false;
+                clearTimeout(t);
+                // return
+              }
+            }, 100);
+            // debugger
+          },
+          false
       );
-      let difWidth = parentwidth / 2 - 45;
-      if (this.showObj.video.length > 3) {
-        if (index * this.videoWidth > difWidth) {
-          let indexS = index - 1;
-          if (index * this.videoWidth - difWidth < itemBoxWidth - parentwidth) {
-            this.$refs.scrollDom.scrollTo(
-              -(index * this.videoWidth - difWidth),
-              0,
-              this.videoWidth
-            );
-          } else {
-            this.$refs.scrollDom.scrollTo(
-              -(itemBoxWidth - parentwidth),
-              0,
-              this.videoWidth
-            );
-          }
-        } else {
-          this.$refs.scrollDom.scrollTo(0, 0, this.videoWidth);
-        }
-      }
-    },
-    swiperback(index) {
-      this.videoIndex = index;
-      this.sendConsole("多视频选择视频");
-    },
-    test() {},
-    changeStar(data) {
-      this.star = data;
-    },
-    backList() {
-      this.$emit("backList");
-    },
-    closeShare() {
-      this.share_show = false;
+      // console.log(videojs)
     },
-    finishStudy() {
-      if (this.$refs.videoDom) {
-        this.$refs.videoDom.pause();
-      }
-      let query = JSON.parse(sessionStorage.getItem("classQuery"));
-      this.sendConsole("完成今日学习");
-      let lessonDetail = JSON.parse(localStorage.getItem("lessonDetail"));
-      let nowTime = Date.parse(new Date());
-      let lookTime = (nowTime - lessonDetail.nowTime) / 1000;
-      let json = {
-        page_type: 0,
-        page_id: 5,
-        stay_time: lookTime
-      };
-      subUserLessonApi(
-        query.elementId,
-        query.category_id,
-        query.periods_id,
-        json
-      ).then(res => {
-        lessonDetail.total_watch_time = res.total_watch_time;
-        lessonDetail.nowTime = nowTime;
-        lessonDetail.star_num = res.total_star_num;
-        localStorage.setItem("lessonDetail", JSON.stringify(lessonDetail));
-        if (
-          (Number(lookTime) + Number(lessonDetail.total_watch_time)) / 60 <
-          7
-        ) {
-          this.popupVisible = true;
+    methods: {
+      errorLog(e){
+        this.userDetail = JSON.parse(localStorage.getItem("userDesc"));
+        // console.log(e.target.error,229)
+        let str='code:'+e.target.error.code+',msg:'+e.target.error.message+',url:'+
+            this.showObj.video[this.videoIndex].url+',UserAgent:'+navigator.userAgent+',currentTime:'+this.$refs.videoDom.currentTime
+        postErrorLogApi({
+          'routes_url':'videoerror,'+'userid:'+this.userDetail.user_id,
+          'result_text':str
+        }).then((res)=>{
+          // console.log(res)
+        })
+      },
+      sliceUrl() {
+        localStorage.setItem("clarityType", this.clarityType);
+        this.showObj.video.forEach(el => {
+          el.url =
+              el.url.slice(0, el.url.indexOf("_")) +
+              "_" +
+              this.clarityType +
+              el.url.slice(-4);
+        });
+      },
+      changeClarity(a) {
+        // Toast.loading({
+        //     mask: true,
+        //     message: ''
+        //   });
+        let that = this;
+        this.currentTime = this.$refs.videoDom.currentTime;
+        if (a == "1280") {
+          this.clarityType = 1280;
+          this.sliceUrl();
+        } else if (a == "720") {
+          this.clarityType = 720;
+          this.sliceUrl();
         } else {
-          getUserWatchApi({ category_id: query.category_id }).then(res => {
-            this.$store.dispatch("setWatchDetail", res);
-            this.share_show = true;
-            // debugger
-          });
-          setTimeout(() => {
-            if (this.$store.state.lookStatus == 0) {
-              this.audioPoint = audioGood;
-            } else if (this.$store.state.lookStatus == 1) {
-              this.audioPoint = audioGreat;
+          this.clarityType = 540;
+          this.sliceUrl();
+        }
+        this.secClarity = false;
+      },
+      scrollFn(index) {
+        this.videoStyle = index;
+        this.videoIndex = index;
+        let parentwidth = Number(
+            getComputedStyle(document.querySelector(".scroll")).width.replace(
+                "px",
+                ""
+            )
+        );
+        let itemBoxWidth = Number(
+            getComputedStyle(document.querySelector(".itemBox")).width.replace(
+                "px",
+                ""
+            )
+        );
+        let difWidth = parentwidth / 2 - 45;
+        if (this.showObj.video.length > 3) {
+          if (index * this.videoWidth > difWidth) {
+            let indexS = index - 1;
+            if (index * this.videoWidth - difWidth < itemBoxWidth - parentwidth) {
+              this.$refs.scrollDom.scrollTo(
+                  -(index * this.videoWidth - difWidth),
+                  0,
+                  this.videoWidth
+              );
             } else {
-              this.audioPoint = audioPerfect;
+              this.$refs.scrollDom.scrollTo(
+                  -(itemBoxWidth - parentwidth),
+                  0,
+                  this.videoWidth
+              );
             }
-            this.$refs.audioDom.load();
-            setTimeout(() => {
-              this.$refs.audioDom.play();
-            }, 100);
-          }, 300);
+          } else {
+            this.$refs.scrollDom.scrollTo(0, 0, this.videoWidth);
+          }
         }
-      });
-    },
-    videoEnd(event) {
-      event.srcElement.play();
-    },
-    sendConsole(data) {
-      this.$sa.track("watchClick", {
-        dayModule: JSON.parse(
-          localStorage.getItem("lessonDetail")
-        ).domTitle.slice(0, 9),
-        weekName: JSON.parse(
-          localStorage.getItem("lessonDetail")
-        ).domTitle.slice(
-          10,
-          JSON.parse(localStorage.getItem("lessonDetail")).domTitle.length
-        ),
-        elementName:
-          JSON.parse(localStorage.getItem("lessonDetail")).domTitle.slice(
-            0,
-            9
-          ) +
-          "-" +
-          JSON.parse(localStorage.getItem("lessonDetail")).domTitle.slice(
-            10,
-            JSON.parse(localStorage.getItem("lessonDetail")).domTitle.length
-          ),
-        themeID: JSON.parse(localStorage.getItem("lessonDetail")).themeID,
-        themeName: JSON.parse(localStorage.getItem("lessonDetail")).themeName,
-        goodsID: JSON.parse(localStorage.getItem("lessonDetail")).goodsID,
-        classID: JSON.parse(localStorage.getItem("lessonDetail")).classID,
-        buttonName: data,
-        partName: this.contentData.partName,
-        elementID: this.$route.query.elementId.toString()
-      });
-    },
-    changeAudio(flag) {
-      if (flag) {
+      },
+      swiperback(index) {
+        this.videoIndex = index;
+        this.sendConsole("多视频选择视频");
+      },
+      test() {},
+      changeStar(data) {
+        this.star = data;
+      },
+      backList() {
+        this.$emit("backList");
+      },
+      closeShare() {
+        // this.$route = {}
+        this.share_show = false;
+        console.log(this.$route)
+      },
+      finishStudy() {
+        if (this.$refs.videoDom) {
+          this.$refs.videoDom.pause();
+        }
+        let query = JSON.parse(sessionStorage.getItem("classQuery"));
+        this.sendConsole("完成今日学习");
+        let lessonDetail = JSON.parse(localStorage.getItem("lessonDetail"));
+        let nowTime = Date.parse(new Date());
+        let lookTime = (nowTime - lessonDetail.nowTime) / 1000;
+        let json = {
+          page_type: 0,
+          page_id: 5,
+          stay_time: lookTime
+        };
+        // 提交看课数据 记录看课时长
+        subUserLessonApi(
+            query.elementId,
+            query.category_id,
+            query.periods_id,
+            json
+        ).then(res => {
+          lessonDetail.total_watch_time = res.total_watch_time;
+          lessonDetail.nowTime = nowTime;
+          lessonDetail.star_num = res.total_star_num;
+          localStorage.setItem("lessonDetail", JSON.stringify(lessonDetail));
+          if (
+              (Number(lookTime) + Number(lessonDetail.total_watch_time)) / 60 <
+              7
+          ) {
+            this.popupVisible = true;
+          } else {
+            // 用户看课统计
+            getUserWatchApi({ category_id: query.category_id }).then(res => {
+              this.$store.dispatch("setWatchDetail", res);
+              // 从评价页面返回过来
+              if(this.$route.params.evaluate === 1){
+                this.share_show = true;
+                this.$route.params.evaluate = 0
+              } else {
+                this.$router.push({path: '/evaluate'})
+              }
+            });
+            setTimeout(() => {
+              if (this.$store.state.lookStatus == 0) {
+                this.audioPoint = audioGood;
+              } else if (this.$store.state.lookStatus == 1) {
+                this.audioPoint = audioGreat;
+              } else {
+                this.audioPoint = audioPerfect;
+              }
+              this.$refs.audioDom.load();
+              setTimeout(() => {
+                this.$refs.audioDom.play();
+              }, 100);
+            }, 300);
+          }
+        });
+      },
+      videoEnd(event) {
+        event.srcElement.play();
+      },
+      sendConsole(data) {
         this.$sa.track("watchClick", {
           dayModule: JSON.parse(
-            localStorage.getItem("lessonDetail")
+              localStorage.getItem("lessonDetail")
           ).domTitle.slice(0, 9),
           weekName: JSON.parse(
-            localStorage.getItem("lessonDetail")
+              localStorage.getItem("lessonDetail")
           ).domTitle.slice(
-            10,
-            JSON.parse(localStorage.getItem("lessonDetail")).domTitle.length
+              10,
+              JSON.parse(localStorage.getItem("lessonDetail")).domTitle.length
           ),
           elementName:
-            JSON.parse(localStorage.getItem("lessonDetail")).domTitle.slice(
-              0,
-              9
-            ) +
-            "-" +
-            JSON.parse(localStorage.getItem("lessonDetail")).domTitle.slice(
+              JSON.parse(localStorage.getItem("lessonDetail")).domTitle.slice(
+                  0,
+                  9
+              ) +
+              "-" +
+              JSON.parse(localStorage.getItem("lessonDetail")).domTitle.slice(
+                  10,
+                  JSON.parse(localStorage.getItem("lessonDetail")).domTitle.length
+              ),
+          themeID: JSON.parse(localStorage.getItem("lessonDetail")).themeID,
+          themeName: JSON.parse(localStorage.getItem("lessonDetail")).themeName,
+          goodsID: JSON.parse(localStorage.getItem("lessonDetail")).goodsID,
+          classID: JSON.parse(localStorage.getItem("lessonDetail")).classID,
+          buttonName: data,
+          partName: this.contentData.partName,
+          elementID: this.$route.query.elementId.toString()
+        });
+      },
+      changeAudio(flag) {
+        if (flag) {
+          this.$sa.track("watchClick", {
+            dayModule: JSON.parse(
+                localStorage.getItem("lessonDetail")
+            ).domTitle.slice(0, 9),
+            weekName: JSON.parse(
+                localStorage.getItem("lessonDetail")
+            ).domTitle.slice(
+                10,
+                JSON.parse(localStorage.getItem("lessonDetail")).domTitle.length
+            ),
+            elementName:
+                JSON.parse(localStorage.getItem("lessonDetail")).domTitle.slice(
+                    0,
+                    9
+                ) +
+                "-" +
+                JSON.parse(localStorage.getItem("lessonDetail")).domTitle.slice(
+                    10,
+                    JSON.parse(localStorage.getItem("lessonDetail")).domTitle.length
+                ),
+            themeID: JSON.parse(localStorage.getItem("lessonDetail")).themeID,
+            themeName: JSON.parse(localStorage.getItem("lessonDetail")).themeName,
+            goodsID: JSON.parse(localStorage.getItem("lessonDetail")).goodsID,
+            classID: JSON.parse(localStorage.getItem("lessonDetail")).classID,
+            buttonName: "切换音频教学",
+            partName: this.contentData.partName,
+            elementID: this.$route.query.elementId.toString()
+          });
+        }
+        this.contentData.type = "audio";
+      },
+      videoPlay() {
+        // 神策埋点 点击操作
+        // this.$refs.videoDom.load()
+        console.log("canplay");
+        if (this.currentTime) {
+          setTimeout(() => {
+            this.$refs.videoDom.play();
+            this.$refs.videoDom.currentTime = this.currentTime;
+            this.currentTime = 0;
+          }, 300);
+        }
+        this.$sa.track("watchClick", {
+          dayModule: JSON.parse(
+              localStorage.getItem("lessonDetail")
+          ).domTitle.slice(0, 9),
+          weekName: JSON.parse(
+              localStorage.getItem("lessonDetail")
+          ).domTitle.slice(
               10,
               JSON.parse(localStorage.getItem("lessonDetail")).domTitle.length
-            ),
+          ),
+          elementName:
+              JSON.parse(localStorage.getItem("lessonDetail")).domTitle.slice(
+                  0,
+                  9
+              ) +
+              "-" +
+              JSON.parse(localStorage.getItem("lessonDetail")).domTitle.slice(
+                  10,
+                  JSON.parse(localStorage.getItem("lessonDetail")).domTitle.length
+              ),
           themeID: JSON.parse(localStorage.getItem("lessonDetail")).themeID,
           themeName: JSON.parse(localStorage.getItem("lessonDetail")).themeName,
           goodsID: JSON.parse(localStorage.getItem("lessonDetail")).goodsID,
           classID: JSON.parse(localStorage.getItem("lessonDetail")).classID,
-          buttonName: "切换音频教学",
+          buttonName: "播放视频",
           partName: this.contentData.partName,
           elementID: this.$route.query.elementId.toString()
         });
-      }
-      this.contentData.type = "audio";
-    },
-    videoPlay() {
-      // 神策埋点 点击操作
-      // this.$refs.videoDom.load()
-      console.log("canplay");
-      if (this.currentTime) {
-        setTimeout(() => {
-          this.$refs.videoDom.play();
-          this.$refs.videoDom.currentTime = this.currentTime;
-          this.currentTime = 0;
-        }, 300);
-      }
-      this.$sa.track("watchClick", {
-        dayModule: JSON.parse(
-          localStorage.getItem("lessonDetail")
-        ).domTitle.slice(0, 9),
-        weekName: JSON.parse(
-          localStorage.getItem("lessonDetail")
-        ).domTitle.slice(
-          10,
-          JSON.parse(localStorage.getItem("lessonDetail")).domTitle.length
-        ),
-        elementName:
-          JSON.parse(localStorage.getItem("lessonDetail")).domTitle.slice(
-            0,
-            9
-          ) +
-          "-" +
-          JSON.parse(localStorage.getItem("lessonDetail")).domTitle.slice(
-            10,
-            JSON.parse(localStorage.getItem("lessonDetail")).domTitle.length
-          ),
-        themeID: JSON.parse(localStorage.getItem("lessonDetail")).themeID,
-        themeName: JSON.parse(localStorage.getItem("lessonDetail")).themeName,
-        goodsID: JSON.parse(localStorage.getItem("lessonDetail")).goodsID,
-        classID: JSON.parse(localStorage.getItem("lessonDetail")).classID,
-        buttonName: "播放视频",
-        partName: this.contentData.partName,
-        elementID: this.$route.query.elementId.toString()
-      });
+      },
+      changeAge(value) {
+        this.clarityType = localStorage.getItem("clarityType")
+            ? localStorage.getItem("clarityType")
+            : 1280;
+        if (this.contentData.content.age && value === 2) {
+          let video = [];
+          video = this.$common.deepCopy(this.contentData.content.video2);
+          video.forEach(el => {
+            let str = el.url;
+            if (this.contentData.title == 2) {
+              el.url = str.slice(0, -4) + "_" + this.clarityType + str.slice(-4);
+            }
+          });
+          this.showObj = {
+            video: video,
+            change: this.contentData.content.change2
+          };
+        } else {
+          let video = [];
+          video = this.$common.deepCopy(this.contentData.content.video);
+          video.forEach(el => {
+            let str = el.url;
+            if (this.contentData.title == 2) {
+              el.url = str.slice(0, -4) + "_" + this.clarityType + str.slice(-4);
+            }
+          });
+          this.showObj = {
+            video: video,
+            change: this.contentData.content.change
+          };
+        }
+        if (this.$refs.itembox && this.showObj.video.length) {
+          this.$refs.itembox.style.width =
+              this.showObj.video.length * this.videoWidth + "px";
+        }
+      },
     },
-    changeAge(value) {
-      this.clarityType = localStorage.getItem("clarityType")
-        ? localStorage.getItem("clarityType")
-        : 1280;
-      if (this.contentData.content.age && value === 2) {
-        let video = [];
-        video = this.$common.deepCopy(this.contentData.content.video2);
-        video.forEach(el => {
-          let str = el.url;
-          if (this.contentData.title == 2) {
-            el.url = str.slice(0, -4) + "_" + this.clarityType + str.slice(-4);
-          }
-        });
-        this.showObj = {
-          video: video,
-          change: this.contentData.content.change2
-        };
-      } else {
-        let video = [];
-        video = this.$common.deepCopy(this.contentData.content.video);
-        video.forEach(el => {
-          let str = el.url;
-          if (this.contentData.title == 2) {
-            el.url = str.slice(0, -4) + "_" + this.clarityType + str.slice(-4);
-          }
-        });
-        this.showObj = {
-          video: video,
-          change: this.contentData.content.change
-        };
+    watch: {
+      contentData: {
+        handler: function() {
+          this.videoIndex = 0;
+          this.changeAge(this.contentData.age);
+          this.secClarity = false;
+        },
+        deep: true
       }
-      if (this.$refs.itembox && this.showObj.video.length) {
-        this.$refs.itembox.style.width =
-          this.showObj.video.length * this.videoWidth + "px";
-      }
-    },
-  },
-  watch: {
-    contentData: {
-      handler: function() {
-        this.videoIndex = 0;
-        this.changeAge(this.contentData.age);
-        this.secClarity = false;
-      },
-      deep: true
     }
-  }
-};
+  };
 </script>
 
 <style scoped lang="less">
-@import "../../util/public";
-.close-share-show {
-  position: fixed;
-  z-index: 99;
-  top: 18 * @toVw;
-  right: 12 * @toVw;
-  width: 20 * @toVw;
-}
-.playImage {
-  background: url("https://static-cdn.changchangenglish.com/new-sing/static/images/playImage.png")
+  @import "../../util/public";
+  .close-share-show {
+    position: fixed;
+    z-index: 99;
+    top: 18 * @toVw;
+    right: 12 * @toVw;
+    width: 20 * @toVw;
+  }
+  .playImage {
+    background: url("https://static-cdn.changchangenglish.com/new-sing/static/images/playImage.png")
     no-repeat;
-  background-size: 40 * @toVw 189 * @toVw;
-  display: inline-block;
-}
-._154722344142123489 {
-  height: 5 * @toVw;
-  width: 9 * @toVw;
-  background-position: 0 0;
-}
-._282918034425091245 {
-  height: 8 * @toVw;
-  width: 9 * @toVw;
-  background-position: 0 -4 * @toVw;
-  vertical-align: bottom;
-}
-.orientationchangeBox {
-  p {
-    text-align: center;
-    margin-bottom: 10 * @toVw;
+    background-size: 40 * @toVw 189 * @toVw;
+    display: inline-block;
   }
-}
-.videoTitle {
-  position: relative;
-  font-size: 14 * @toVw;
-  margin-bottom: 12 * @toVw;
-  text-indent: 6 * @toVw;
-  // top:70 * @toVw;
-  .fr {
-    // position:relative;
-    // top:-8 * @toVw;
-    line-height: 16 * @toVw;
-    img {
-      width: 8 * @toVw;
-      position: relative;
-      top: 1 * @toVw;
-    }
-    margin-right: 8 * @toVw;
-    .rotate {
-      transform: rotate(92deg);
-    }
+  ._154722344142123489 {
+    height: 5 * @toVw;
+    width: 9 * @toVw;
+    background-position: 0 0;
   }
-  .secClarityBox {
-    position: absolute;
-    right: 0;
-    top: 25 * @toVw;
-    padding: 15 * @toVw 15 * @toVw 0;
-    z-index: 10001;
-    background: white;
-    border-radius: 11 * @toVw;
-    box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
-    div {
-      margin-bottom: 15 * @toVw;
-      // text-align: center;
-      text-indent: 0;
-    }
-    .select {
-      color: #40a9ff;
+  ._282918034425091245 {
+    height: 8 * @toVw;
+    width: 9 * @toVw;
+    background-position: 0 -4 * @toVw;
+    vertical-align: bottom;
+  }
+  .orientationchangeBox {
+    p {
+      text-align: center;
+      margin-bottom: 10 * @toVw;
     }
   }
-}
-.scroll {
-  width: 310 * @toVw;
-  overflow: hidden;
-  // position: fixed;
-  display: none;
-  .itemBox {
-    // width: 600*@toVw;
-    display: flex;
-    .item {
-      // display: inline-block;
-      flex: 1;
-      width: 100 * @toVw;
-      height: 100 * @toVw;
-      // border: 1px solid black;
+  .videoTitle {
+    position: relative;
+    font-size: 14 * @toVw;
+    margin-bottom: 12 * @toVw;
+    text-indent: 6 * @toVw;
+    // top:70 * @toVw;
+    .fr {
+      // position:relative;
+      // top:-8 * @toVw;
+      line-height: 16 * @toVw;
       img {
-        width: 90 * @toVw;
-        height: 60 * @toVw;
-        border-radius: 18px;
-        border: 3px solid #e2e2e2;
+        width: 8 * @toVw;
+        position: relative;
+        top: 1 * @toVw;
       }
-      .activity {
-        border: 3px solid #40a9ff;
+      margin-right: 8 * @toVw;
+      .rotate {
+        transform: rotate(92deg);
       }
     }
-    p {
-      font-size: 13 * @toVw;
-      color: #666666;
-    }
-  }
-}
-.disShow {
-  display: block;
-}
-.video-page {
-  .content {
-    background: white;
-    width: 315 * @toVw;
-    position: absolute;
-    top: 70 * @toVw;
-    left: 20 * @toVw;
-    right: 20 * @toVw;
-    bottom: 0;
-    overflow: auto;
-    margin: auto;
-    display: block;
-    border-radius: 8 * @toVw;
-    padding: 10 * @toVw;
-    .header {
-      // text-align: center;
-      padding-top: 8 * @toVw;
-      height: auto;
-      // display: flex;
-      .text {
-        width: 96%;
-        margin-bottom: 0;
-        display: block;
-        // border: none;
+    .secClarityBox {
+      position: absolute;
+      right: 0;
+      top: 25 * @toVw;
+      padding: 15 * @toVw 15 * @toVw 0;
+      z-index: 10001;
+      background: white;
+      border-radius: 11 * @toVw;
+      box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
+      div {
+        margin-bottom: 15 * @toVw;
+        // text-align: center;
+        text-indent: 0;
       }
-    }
-    .video-block {
-      margin-bottom: 16 * @toVw;
-      // border: 1*@toVw solid #666;
-      border-radius: 12 * @toVw;
-      // padding: 8*@toVw;
-      background: #69c0ff;
-      border: 6px solid #69c0ff;
-      overflow: hidden;
-      video {
-        width: 307 * @toVw;
-        // height: 171*@toVw;
-        margin: 0;
-        display: block;
-        padding: 0;
-        background: rgba(0, 0, 0, 0.4);
-        border-radius: 10 * @toVw;
+      .select {
+        color: #40a9ff;
       }
-      .video-bj {
-        width: 307 * @toVw;
-        background: rgba(0, 0, 0, 0.4);
-        border-radius: 10 * @toVw;
-        padding: 0;
-        margin: 0;
-        display: block;
+    }
+  }
+  .scroll {
+    width: 310 * @toVw;
+    overflow: hidden;
+    // position: fixed;
+    display: none;
+    .itemBox {
+      // width: 600*@toVw;
+      display: flex;
+      .item {
+        // display: inline-block;
+        flex: 1;
+        width: 100 * @toVw;
+        height: 100 * @toVw;
+        // border: 1px solid black;
         img {
-          width: 100%;
+          width: 90 * @toVw;
+          height: 60 * @toVw;
+          border-radius: 18px;
+          border: 3px solid #e2e2e2;
+        }
+        .activity {
+          border: 3px solid #40a9ff;
         }
       }
-    }
-    .age-block {
-      width: 66 * @toVw;
-      height: 28 * @toVw;
-      line-height: 28 * @toVw;
-      border: 1 * @toVw solid #666;
-      padding: 0 13 * @toVw;
-      border-radius: 100 * @toVw;
-      font-size: 12 * @toVw;
-      font-family: PingFang-SC-Medium;
-      font-weight: 500;
-      color: rgba(102, 102, 102, 1);
-      &.video {
-        right: 0;
-        margin-right: 0;
-        text-align: center;
+      p {
+        font-size: 13 * @toVw;
+        color: #666666;
       }
     }
-    .age-change-block {
-      &.video {
-        right: 10 * @toVw;
-        left: auto;
-        z-index: 1231;
-        background: white;
-        width: 80 * @toVw;
-        width: 96 * @toVw;
-        border: 1 * @toVw solid #666;
-        border-radius: 10 * @toVw;
-        & > div {
-          margin: 0;
-          width: 96 * @toVw;
-          padding: 6 * @toVw 11 * @toVw;
-          text-align: left;
-          display: inline-block;
-          border-radius: 8 * @toVw;
-          text-align: center;
-          border: none;
-          box-sizing: border-box;
-          &:first-child {
-            border-bottom: 1 * @toVw solid #eee;
-          }
-        }
-      }
-      display: inline-block;
-      // position: absolute;
-      // top: 282 * @toVw;
-      // left: 20 * @toVw;
-      width: 196 * @toVw;
-      // border-radius: 8*@toVw;
-      // border: 1*@toVw solid #666666;
-      font-size: 12px;
-      font-family: PingFang-SC-Medium;
-      font-weight: 500;
-      color: rgba(102, 102, 102, 1);
-      & > div {
-        margin: 10 * @toVw 0;
-        width: 86 * @toVw;
-        padding: 6 * @toVw 11 * @toVw;
-        text-align: left;
-        display: inline-block;
-        border-radius: 8 * @toVw;
-        text-align: center;
-        border: 1px solid rgba(200, 205, 220, 1);
-        box-sizing: border-box;
-        &:first-child {
-          border-bottom: 1 * @toVw solid #eee;
+  }
+  .disShow {
+    display: block;
+  }
+  .video-page {
+    .content {
+      background: white;
+      width: 315 * @toVw;
+      position: absolute;
+      top: 70 * @toVw;
+      left: 20 * @toVw;
+      right: 20 * @toVw;
+      bottom: 0;
+      overflow: auto;
+      margin: auto;
+      display: block;
+      border-radius: 8 * @toVw;
+      padding: 10 * @toVw;
+      .header {
+        // text-align: center;
+        padding-top: 8 * @toVw;
+        height: auto;
+        // display: flex;
+        .text {
+          width: 96%;
+          margin-bottom: 0;
+          display: block;
+          // border: none;
         }
       }
-      .activity {
-        border: 3px solid rgba(64, 169, 255, 1);
-      }
-    }
-    .btn-block {
-      position: relative;
-      text-align: center;
-      z-index: 100;
-      .change-block {
-        border-radius: 1000 * @toVw;
-        width: 144 * @toVw;
-        border: 1 * @toVw solid #40a9ff;
-        &:after {
-          content: "";
+      .video-block {
+        margin-bottom: 16 * @toVw;
+        // border: 1*@toVw solid #666;
+        border-radius: 12 * @toVw;
+        // padding: 8*@toVw;
+        background: #69c0ff;
+        border: 6px solid #69c0ff;
+        overflow: hidden;
+        video {
+          width: 307 * @toVw;
+          // height: 171*@toVw;
+          margin: 0;
           display: block;
-          clear: both;
+          padding: 0;
+          background: rgba(0, 0, 0, 0.4);
+          border-radius: 10 * @toVw;
         }
-        div {
-          float: left;
-          width: 50%;
-          border-radius: 100 * @toVw;
-          font-size: 12 * @toVw;
-          height: 28 * @toVw;
-          line-height: 28 * @toVw;
-          font-family: PingFang-SC-Medium;
-          font-weight: 500;
-          color: rgba(204, 204, 204, 1);
-          &.active {
-            background: #40a9ff;
-            color: white;
+        .video-bj {
+          width: 307 * @toVw;
+          background: rgba(0, 0, 0, 0.4);
+          border-radius: 10 * @toVw;
+          padding: 0;
+          margin: 0;
+          display: block;
+          img {
+            width: 100%;
           }
         }
       }
-    }
-    .parent-finish {
-      position: fixed;
-      bottom: 2 * @toVw;
-      width: 100%;
-      left: 0;
-      // top: 500 * @toVw;
-      .finish-block {
-        position: absolute;
-        width: 100%;
-        left: 0;
-        padding: 0;
-        margin: 0;
-        text-align: center;
-        bottom: 0;
-        img {
-          width: 202 * @toVw;
+      .age-block {
+        width: 66 * @toVw;
+        height: 28 * @toVw;
+        line-height: 28 * @toVw;
+        border: 1 * @toVw solid #666;
+        padding: 0 13 * @toVw;
+        border-radius: 100 * @toVw;
+        font-size: 12 * @toVw;
+        font-family: PingFang-SC-Medium;
+        font-weight: 500;
+        color: rgba(102, 102, 102, 1);
+        &.video {
+          right: 0;
+          margin-right: 0;
+          text-align: center;
         }
       }
-    }
-  }
-}
-.change-block-HP {
-  display: none;
-}
-@media screen and (orientation: landscape) {
-  @toVw: 100/667vw;
-  .videoTitle {
-    .fr {
-      display: none;
-    }
-  }
-  .video-page {
-    position: absolute;
-    top: 5 * @toVw;
-    bottom: 5 * @toVw;
-    left: 5 * @toVw;
-    right: 5 * @toVw;
-    background: rgba(255, 255, 255, 1);
-    overflow: auto;
-    border-radius: 8 * @toVw;
-    .content {
-      position: static;
-      height: 100%;
-      width: 100%;
-      display: flex;
-      border-radius: 8px;
-      padding: 0;
-      .header {
-        display: none;
-      }
       .age-change-block {
         &.video {
-          top: 33 * @toVw;
-          right: 0;
+          right: 10 * @toVw;
           left: auto;
           z-index: 1231;
           background: white;
           width: 80 * @toVw;
-          position: absolute;
+          width: 96 * @toVw;
+          border: 1 * @toVw solid #666;
+          border-radius: 10 * @toVw;
           & > div {
             margin: 0;
-            width: 100%;
+            width: 96 * @toVw;
             padding: 6 * @toVw 11 * @toVw;
             text-align: left;
             display: inline-block;
             border-radius: 8 * @toVw;
             text-align: center;
             border: none;
+            box-sizing: border-box;
             &:first-child {
               border-bottom: 1 * @toVw solid #eee;
             }
@@ -865,9 +744,8 @@ export default {
         }
         display: inline-block;
         // position: absolute;
-        // top: 37*@toVw;
-        top: 367 * @toVw;
-        left: 0;
+        // top: 282 * @toVw;
+        // left: 20 * @toVw;
         width: 196 * @toVw;
         // border-radius: 8*@toVw;
         // border: 1*@toVw solid #666666;
@@ -877,13 +755,14 @@ export default {
         color: rgba(102, 102, 102, 1);
         & > div {
           margin: 10 * @toVw 0;
-          width: 54 * @toVw;
+          width: 86 * @toVw;
           padding: 6 * @toVw 11 * @toVw;
           text-align: left;
           display: inline-block;
           border-radius: 8 * @toVw;
           text-align: center;
           border: 1px solid rgba(200, 205, 220, 1);
+          box-sizing: border-box;
           &:first-child {
             border-bottom: 1 * @toVw solid #eee;
           }
@@ -892,154 +771,286 @@ export default {
           border: 3px solid rgba(64, 169, 255, 1);
         }
       }
-      .age-block {
-        &.video {
-          display: block;
+      .btn-block {
+        position: relative;
+        text-align: center;
+        z-index: 100;
+        .change-block {
+          border-radius: 1000 * @toVw;
+          width: 144 * @toVw;
+          border: 1 * @toVw solid #40a9ff;
+          &:after {
+            content: "";
+            display: block;
+            clear: both;
+          }
+          div {
+            float: left;
+            width: 50%;
+            border-radius: 100 * @toVw;
+            font-size: 12 * @toVw;
+            height: 28 * @toVw;
+            line-height: 28 * @toVw;
+            font-family: PingFang-SC-Medium;
+            font-weight: 500;
+            color: rgba(204, 204, 204, 1);
+            &.active {
+              background: #40a9ff;
+              color: white;
+            }
+          }
         }
       }
-      .ageclass {
+      .parent-finish {
         position: fixed;
-        top: 30 * @toVw;
-        left: 100 * @toVw;
-        z-index: 100;
-        & > div {
-          display: block;
+        bottom: 2 * @toVw;
+        width: 100%;
+        left: 0;
+        // top: 500 * @toVw;
+        .finish-block {
+          position: absolute;
+          width: 100%;
+          left: 0;
+          padding: 0;
+          margin: 0;
+          text-align: center;
+          bottom: 0;
+          img {
+            width: 202 * @toVw;
+          }
         }
       }
-      .video-block {
+    }
+  }
+  .change-block-HP {
+    display: none;
+  }
+  @media screen and (orientation: landscape) {
+    @toVw: 100/667vw;
+    .videoTitle {
+      .fr {
         display: none;
-        &.hp-video {
-          display: inline-block;
-          margin: 0 10 * @toVw 0 0;
-          border: none;
-          height: 100%;
-          border-radius: 12 * @toVw;
-          padding: 0;
-        }
-        video {
-          height: 100%;
-          margin: auto;
-          width: auto;
-          display: block;
-          background: rgba(0, 0, 0, 0.4);
-          border-radius: 8 * @toVw;
-        }
       }
-      .btn-block {
-        position: relative;
-        width: 140 * @toVw;
-        // display: block;
+    }
+    .video-page {
+      position: absolute;
+      top: 5 * @toVw;
+      bottom: 5 * @toVw;
+      left: 5 * @toVw;
+      right: 5 * @toVw;
+      background: rgba(255, 255, 255, 1);
+      overflow: auto;
+      border-radius: 8 * @toVw;
+      .content {
+        position: static;
         height: 100%;
-        .age-block {
-          display: block;
-          position: static;
-          padding: 0;
-          height: 28 * @toVw;
-          width: 88 * @toVw;
-          line-height: 28 * @toVw;
-          border: 1 * @toVw solid #666;
-          border-radius: 100 * @toVw;
-          font-size: 12 * @toVw;
+        width: 100%;
+        display: flex;
+        border-radius: 8px;
+        padding: 0;
+        .header {
+          display: none;
+        }
+        .age-change-block {
+          &.video {
+            top: 33 * @toVw;
+            right: 0;
+            left: auto;
+            z-index: 1231;
+            background: white;
+            width: 80 * @toVw;
+            position: absolute;
+            & > div {
+              margin: 0;
+              width: 100%;
+              padding: 6 * @toVw 11 * @toVw;
+              text-align: left;
+              display: inline-block;
+              border-radius: 8 * @toVw;
+              text-align: center;
+              border: none;
+              &:first-child {
+                border-bottom: 1 * @toVw solid #eee;
+              }
+            }
+          }
+          display: inline-block;
+          // position: absolute;
+          // top: 37*@toVw;
+          top: 367 * @toVw;
+          left: 0;
+          width: 196 * @toVw;
+          // border-radius: 8*@toVw;
+          // border: 1*@toVw solid #666666;
+          font-size: 12px;
           font-family: PingFang-SC-Medium;
           font-weight: 500;
           color: rgba(102, 102, 102, 1);
+          & > div {
+            margin: 10 * @toVw 0;
+            width: 54 * @toVw;
+            padding: 6 * @toVw 11 * @toVw;
+            text-align: left;
+            display: inline-block;
+            border-radius: 8 * @toVw;
+            text-align: center;
+            border: 1px solid rgba(200, 205, 220, 1);
+            &:first-child {
+              border-bottom: 1 * @toVw solid #eee;
+            }
+          }
+          .activity {
+            border: 3px solid rgba(64, 169, 255, 1);
+          }
+        }
+        .age-block {
           &.video {
             display: block;
           }
         }
-        .change-block-HP {
-          position: absolute;
-          top: ~"calc(100vh - 12.5vw)";
-          display: block;
-          width: 78 * @toVw;
-          img {
-            width: 100%;
+        .ageclass {
+          position: fixed;
+          top: 30 * @toVw;
+          left: 100 * @toVw;
+          z-index: 100;
+          & > div {
+            display: block;
           }
         }
-        .change-block {
+        .video-block {
           display: none;
+          &.hp-video {
+            display: inline-block;
+            margin: 0 10 * @toVw 0 0;
+            border: none;
+            height: 100%;
+            border-radius: 12 * @toVw;
+            padding: 0;
+          }
+          video {
+            height: 100%;
+            margin: auto;
+            width: auto;
+            display: block;
+            background: rgba(0, 0, 0, 0.4);
+            border-radius: 8 * @toVw;
+          }
+        }
+        .btn-block {
+          position: relative;
+          width: 140 * @toVw;
+          // display: block;
+          height: 100%;
+          .age-block {
+            display: block;
+            position: static;
+            padding: 0;
+            height: 28 * @toVw;
+            width: 88 * @toVw;
+            line-height: 28 * @toVw;
+            border: 1 * @toVw solid #666;
+            border-radius: 100 * @toVw;
+            font-size: 12 * @toVw;
+            font-family: PingFang-SC-Medium;
+            font-weight: 500;
+            color: rgba(102, 102, 102, 1);
+            &.video {
+              display: block;
+            }
+          }
+          .change-block-HP {
+            position: absolute;
+            top: ~"calc(100vh - 12.5vw)";
+            display: block;
+            width: 78 * @toVw;
+            img {
+              width: 100%;
+            }
+          }
+          .change-block {
+            display: none;
+          }
         }
       }
     }
   }
-}
 
-@media screen and (min-aspect-ratio: ~"20/8") {
-  @toVw: 100/900vw;
-  .video-page {
-    position: absolute;
-    top: 5 * @toVw;
-    bottom: 5 * @toVw;
-    left: 5 * @toVw;
-    right: 5 * @toVw;
-    background: rgba(255, 255, 255, 1);
-    overflow: auto;
-    border-radius: 8 * @toVw;
-    .content {
-      position: static;
-      height: 100%;
-      width: 100%;
-      display: flex;
-      border-radius: 8px;
-      padding: 0;
-      .header {
-        display: none;
-      }
-      .video-block {
-        display: none;
-        &.hp-video {
-          display: inline-block;
-          margin: 0 10 * @toVw 0 0;
-          border: none;
-          height: 100%;
-          border-radius: 12 * @toVw;
-          padding: 0;
-        }
-        video {
-          height: 100%;
-          margin: auto;
-          width: auto;
-          display: block;
-          background: rgba(0, 0, 0, 0.4);
-          border-radius: 8 * @toVw;
-        }
-      }
-      .btn-block {
-        position: relative;
-        min-width: 90 * @toVw;
-        display: block;
+  @media screen and (min-aspect-ratio: ~"20/8") {
+    @toVw: 100/900vw;
+    .video-page {
+      position: absolute;
+      top: 5 * @toVw;
+      bottom: 5 * @toVw;
+      left: 5 * @toVw;
+      right: 5 * @toVw;
+      background: rgba(255, 255, 255, 1);
+      overflow: auto;
+      border-radius: 8 * @toVw;
+      .content {
+        position: static;
         height: 100%;
-        .age-block {
-          display: block;
-          position: static;
-          padding: 0;
-          height: 28 * @toVw;
-          width: 88 * @toVw;
-          line-height: 28 * @toVw;
-          border: 1 * @toVw solid #666;
-          border-radius: 100 * @toVw;
-          font-size: 12 * @toVw;
-          font-family: PingFang-SC-Medium;
-          font-weight: 500;
-          color: rgba(102, 102, 102, 1);
-          &.video {
+        width: 100%;
+        display: flex;
+        border-radius: 8px;
+        padding: 0;
+        .header {
+          display: none;
+        }
+        .video-block {
+          display: none;
+          &.hp-video {
+            display: inline-block;
+            margin: 0 10 * @toVw 0 0;
+            border: none;
+            height: 100%;
+            border-radius: 12 * @toVw;
+            padding: 0;
+          }
+          video {
+            height: 100%;
+            margin: auto;
+            width: auto;
             display: block;
+            background: rgba(0, 0, 0, 0.4);
+            border-radius: 8 * @toVw;
           }
         }
-        .change-block-HP {
-          position: absolute;
-          top: ~"calc(100vh - 12.5vw)";
+        .btn-block {
+          position: relative;
+          min-width: 90 * @toVw;
           display: block;
-          width: 78 * @toVw;
-          img {
-            width: 100%;
+          height: 100%;
+          .age-block {
+            display: block;
+            position: static;
+            padding: 0;
+            height: 28 * @toVw;
+            width: 88 * @toVw;
+            line-height: 28 * @toVw;
+            border: 1 * @toVw solid #666;
+            border-radius: 100 * @toVw;
+            font-size: 12 * @toVw;
+            font-family: PingFang-SC-Medium;
+            font-weight: 500;
+            color: rgba(102, 102, 102, 1);
+            &.video {
+              display: block;
+            }
+          }
+          .change-block-HP {
+            position: absolute;
+            top: ~"calc(100vh - 12.5vw)";
+            display: block;
+            width: 78 * @toVw;
+            img {
+              width: 100%;
+            }
+          }
+          .change-block {
+            display: none;
           }
-        }
-        .change-block {
-          display: none;
         }
       }
     }
   }
-}
 </style>

src/main.js

@@ -40,9 +40,9 @@ Vue.prototype.$throw = (error)=> errorHandler(error,this);
 
 Vue.prototype.$common = common
 //VConsole关闭屏蔽代码
-if (process.env.NODE_ENV != 'production') {
-  new VConsole();
-}
+// if (process.env.NODE_ENV != 'production') {
+//   new VConsole();
+// }
 
 router.beforeEach((to, from, next) => {
   next()

src/router/index.js

@@ -39,7 +39,7 @@ const router = new Router({
         deep: 0,
       }
     },
-    
+
     {
       path: '/extensionV1Shop',
       name: 'extensionV1Shop',
@@ -539,6 +539,24 @@ const router = new Router({
         noNew: true,
       }
     },
+    // 评价页面
+    {
+      path: '/evaluate',
+      name: 'evaluate',
+      component: e => require(['@/components/newLesson/evaluate'], e),
+      meta: {
+        noNew: true,
+      }
+    },
+    // 成长记录
+    {
+      path: '/growthRecord',
+      name: 'growthRecord',
+      component: e => require(['@/components/growthRecord'], e),
+      meta: {
+        noNew: true,
+      }
+    },
     {
       path: '*',
       component: () => import('@/components/error'),
@@ -640,7 +658,7 @@ router.beforeEach((to, from, next) => {
     localStorage.setItem('retUrl', to.fullPath);
     // console.log(process.env.AUTHOR_UEL)
     // console.log(window.location.href)
-    
+
     if (to.meta.noNew) {
       query.is_new_user_url = 1;
       window.location.href = `${process.env.AUTHOR_UEL}`

src/service/api.js

@@ -370,3 +370,19 @@ export const postErrorLogApi = function (json) {
   return Vue.prototype.$post(`api/client/report/errors/log`, json)
 };
 
+// 用户成长记录添加
+export const postUserGrowthAddApi = function (periods_id, category_id, element_id, json) {
+  return Vue.prototype.$post(`api/client/user/growth/record/${ periods_id }/${ category_id }/${ element_id }`, json)
+};
+
+// 用户成长记录列表
+export const getUserGrowthListApi = function (json) {
+  return Vue.prototype.$fetch(`${_baseUrl}api/client/user/growth/record/list`)
+};
+
+//
+const getUserGrowthRecordUrl = `${_baseUrl}api/client/growth/record/`
+export const getUserGrowthRecordApi = function (periods_id, category_id, element_id) {
+  return Vue.prototype.$fetch(`${getUserGrowthRecordUrl}${periods_id}/${category_id}/${element_id}`)
+};
+

src/util/imgUrl.js

@@ -27,6 +27,7 @@ import mine_star_inner from '../assets/star_inner.png'
 import mine_address from '../assets/icon_ad@2x.png'
 import mine_son from '../assets/icon_son@3x.png'
 import mine_mom from '../assets/icon_mom@3x.png'
+import yizi from '../assets/yezi.png'
 
 import shop_wechat from '../assets/shop/qr3.png'
 import qr4 from '../assets/shop/qr4.png'
@@ -83,6 +84,15 @@ import spcShop6 from '../assets/spcShop/img6@2x.png'
 import spcShop7 from '../assets/spcShop/img_head@2x.png'
 import spcShop8 from '../assets/spcShop/btn@2x.png'
 
+// 评价图片
+import scoringCategory1 from '../assets/evaluate/scoring-category1.png'
+import scoringCategory2 from '../assets/evaluate/scoring-category2.png'
+import scoringCategory3 from '../assets/evaluate/scoring-category3.png'
+import scoringCategory1Active from '../assets/evaluate/scoring-category1-active.png'
+import scoringCategory2Active from '../assets/evaluate/scoring-category2-active.png'
+import scoringCategory3Active from '../assets/evaluate/scoring-category3-active.png'
+import xiajiantou from '../assets/evaluate/xiajiantou.png'
+
 // 直购页
 export const spcShopImg = {
   spcShop1:spcShop1,
@@ -171,7 +181,8 @@ export const mineImage = {
   mine_star_inner:mine_star_inner,
   mine_address:mine_address,
   mine_son:mine_son,
-  mine_mom:mine_mom
+  mine_mom:mine_mom,
+  yizi: yizi
 };
 // 商品成功
 export const shopSuccess = {
@@ -197,4 +208,14 @@ export const previewImg = {
   previewpic9:previewpic9,
   previewpic10:previewpic10,
   previewBtn:previewBtn
-};
+};
\ No newline at end of file
+
+export const scoringCategory = {
+  scoringCategory1: scoringCategory1,
+  scoringCategory2: scoringCategory2,
+  scoringCategory3: scoringCategory3,
+  scoringCategory1Active: scoringCategory1Active,
+  scoringCategory2Active: scoringCategory2Active,
+  scoringCategory3Active: scoringCategory3Active,
+  xiajiantou: xiajiantou
+}