|
|
@@ -1,2349 +1,2403 @@
|
|
|
-<template>
|
|
|
- <view class="content " >
|
|
|
- <view class="header-nav" :style="{height: `calc(88rpx + ${statusBarHeight}px)`,paddingTop: statusBarHeight + 'px'}">
|
|
|
- <!-- <u-icon name="arrow-left" size="28" @click="tosales" v-if="appToken"></u-icon> -->
|
|
|
- <view class="header-title" :style="{width:menuButtonLeft + 'px',height:menuButtonH+'px',lineHeight:menuButtonH+'px'}">{{courseInfo.title}}</view>
|
|
|
- </view>
|
|
|
- <view class="video-box">
|
|
|
- <image v-if="!isLogin || isAddKf!=1" class="video-poster" :src="courseInfo.imgUrl" mode="aspectFill">
|
|
|
- </image>
|
|
|
- <video
|
|
|
- @timeupdate="onTimeUpdate"
|
|
|
- @progress="progressChange"
|
|
|
- @error="videoErrorCallback"
|
|
|
- @play="getPlay"
|
|
|
- @pause="getPause"
|
|
|
- @ended="getEnded"
|
|
|
- @fullscreenchange="fullscreenchange"
|
|
|
- :title="courseInfo.title"
|
|
|
- style="width: 100%;height: 420rpx;"
|
|
|
- :poster="poster"
|
|
|
- id="video-content-box"
|
|
|
- controls
|
|
|
- :auto-pause-if-open-native="true"
|
|
|
- :auto-pause-if-navigate="true"
|
|
|
- :enable-progress-gesture="false"
|
|
|
- :show-progress="true"
|
|
|
- :picture-in-picture-mode="[]"
|
|
|
- :show-background-playback-button="false"
|
|
|
- :src="videoUrl">
|
|
|
- <!-- <cover-image v-if="courseLogo" :class="isFull?'logo-full':'logo'" :src="courseLogo" mode="widthFix"></cover-image> -->
|
|
|
- </video>
|
|
|
- </view>
|
|
|
- <view class="justify-between align-center fs24 base-color-9" >
|
|
|
- <view class="justify-start align-center" v-if="userInfo.userId">
|
|
|
- <view>{{nameuser?nameuser:'暂未授权昵称'}}#</view>
|
|
|
- <view>{{userInfo.userId}}</view>
|
|
|
- </view>
|
|
|
- <view class="justify-start align-center" @click="tofeek">
|
|
|
- <image src="/static/images/feedback.png" class="w40 h40"></image>
|
|
|
- <view class="fs28 base-color-9 m10">投诉</view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="title-content" id="title-content">
|
|
|
- <!-- 答题时展示小节课程名,其他展示课程名 -->
|
|
|
- <!-- 小节课程名 -->
|
|
|
- <view class="subtitlebox " v-if="isLogin&&isAddKf==1">
|
|
|
- {{courseInfo.title}}
|
|
|
- </view>
|
|
|
- <!-- 课程名字 -->
|
|
|
- <view class="miantitlebox" v-else>
|
|
|
- {{courseInfo.courseName}}
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <scroll-view class="scroll-view" :style="{height: height}" :scroll-top="scrollTop" scroll-y="true">
|
|
|
- <!-- 介绍 -->
|
|
|
- <view class="descbox">
|
|
|
- <template v-if="!isLogin||isAddKf!=1">
|
|
|
- <view class="descbox-title">{{courseInfo.title}}</view>
|
|
|
- <view class="descbox-info">
|
|
|
- <!-- <view class="descbox-info-l">
|
|
|
- <view>{{courseInfo.views}}次播放</view>
|
|
|
- <view class="descbox-info-time">总时长:{{courseInfo.totalDuration}}</view>
|
|
|
- </view> -->
|
|
|
- <view class="descbox-info-r expand" v-if="textHeight > 21">
|
|
|
- <text @click="handleExpand">{{isExpand ? '收起简介' : '展开简介'}}</text>
|
|
|
- <image :src="imgPath+'/app/image/course_arrow_up_icon.png'" v-show="isExpand"></image>
|
|
|
- <image :src="imgPath+'/app/image/course_arrow_down_icon.png'" v-show="!isExpand"></image>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </template>
|
|
|
- <view class="descbox-desc" id="descbox-desc" :style="{height: isExpand ? 'auto': '42rpx'}">
|
|
|
- <text>{{courseInfo.description==null?'暂无简介':courseInfo.description}}</text>
|
|
|
- <view :class="isExpand ? 'expand': 'expand expand-ab'" v-if="isLogin&&isAddKf==1&&textHeight > 21">
|
|
|
- <text @click="handleExpand">{{isExpand ? '收起简介' : '展开简介'}}</text>
|
|
|
- <image :src="imgPath+'/app/image/course_arrow_up_icon.png'" v-show="isExpand"></image>
|
|
|
- <image :src="imgPath+'/app/image/course_arrow_down_icon.png'" v-show="!isExpand"></image>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <!-- 无效或者已过期 -->
|
|
|
- <view class="nocourse" v-if="msg">
|
|
|
- <image :src="imgPath+'/app/image/course_expiration_img.png'" mode="widthFix"></image>
|
|
|
- <view>{{msg}}</view>
|
|
|
- </view>
|
|
|
- <!-- 问题 -->
|
|
|
- <view class="ques-content" v-if="isLogin&&isAddKf==1">
|
|
|
- <view class="ques-content-tit" v-if="isLogin &&!isquestion" >问答题</view>
|
|
|
- <view v-for="(item,index) in quesList" :key="index">
|
|
|
- <view class="ques-title">
|
|
|
- <text >{{index + 1}}.</text>
|
|
|
- <view class="ques-type" v-show="item.type == 1 || item.type == 2">
|
|
|
- {{item.type == 1 ? '单选' : item.type == 2 ? '多选' : ''}}
|
|
|
- </view>
|
|
|
- <text class="fs40">{{item.title}}</text>
|
|
|
- </view>
|
|
|
- <view
|
|
|
- :class="isAnswer(item,option.name) ?'ques-option ques-option-active':'ques-option'"
|
|
|
- v-for="(option,idx) in item.questionOption"
|
|
|
- :key="idx"
|
|
|
- @click="handleAnswer(item,option)">
|
|
|
- <view class="fs40">
|
|
|
- {{numberToLetter(idx)}}.
|
|
|
- </view>
|
|
|
- <view class="fs40">{{option.name}}</view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </scroll-view>
|
|
|
- <!-- 线路 -->
|
|
|
- <!-- <view class="video-line" @click="openPop" v-if="isLogin&&isAddKf==1">
|
|
|
- <image :src="imgPath+'/app/image/changePlayer-icon.png'"></image>
|
|
|
- <text>线路{{lineIndex + 1 | numberToChinese}}</text>
|
|
|
- </view> -->
|
|
|
- <!-- 线路弹窗 -->
|
|
|
- <uni-popup ref="popup" type="bottom" class="full-width-popup">
|
|
|
- <view class="popupbox">
|
|
|
- <view class="popupbox-head">
|
|
|
- <text>线路选择</text>
|
|
|
- <image class="close-icon" :src="imgPath+'/app/image/tc_close_icon.png'" mode="aspectFill" @click="close">
|
|
|
- </image>
|
|
|
- </view>
|
|
|
- <view class="popupbox-content">
|
|
|
- <view :class="lineIndex == index ? 'line-item line-active': 'line-item'"
|
|
|
- v-for="(it,index) in lineList" :key="index" @click="handleLine(index)">
|
|
|
- 线路{{index + 1 | numberToChinese}}</view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </uni-popup>
|
|
|
- <!-- 温馨提示弹窗 -->
|
|
|
- <u-popup :show="tipsPopup" mode="center" :closeOnClickOverlay='true' @close='tipsPopup=!tipsPopup'
|
|
|
- :safeAreaInsetBottom='false' round='12'>
|
|
|
- <view class="tipsPopup-mask">
|
|
|
- <image class="red_envelope_top" :src="imgPath+'/app/image/red_envelope_img.png'" mode="aspectFill"></image>
|
|
|
- <view class="tipsPopup">
|
|
|
- <image class="tipsPopup-close" :src="imgPath+'/app/image/course_close_white_icon.png'" mode="aspectFill"
|
|
|
- @click="closeTipsPop"></image>
|
|
|
- <view class="tipsPopup-line">
|
|
|
- <view class="tipsPopup-box">
|
|
|
- <view class="tipsPopup-head">
|
|
|
- <image class="tipsPopup-head-title" :src="imgPath+'/app/image/tips_title_img.png'"
|
|
|
- mode="widthFix"></image>
|
|
|
- </view>
|
|
|
- <view class="tipsPopup-content">
|
|
|
- <view class="tipsPopup-content-title">亲爱的用户,</view>
|
|
|
- <view>您已经观看课程{{timepath}}的时间了,请注意休息并保持专注。</view>
|
|
|
- </view>
|
|
|
- <view class="tipsPopup-btn-box">
|
|
|
- <view class="tipsPopup-btn" @click="closeTipsPop">继续观看领奖励</view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </u-popup>
|
|
|
- <!-- 答题弹窗 -->
|
|
|
- <u-popup :show="answerPopup" mode="center" @close="closepop()" @open="open" closeOnClickOverlay
|
|
|
- :safeAreaInsetBottom='false' round='12'>
|
|
|
- <view :class="errTitle == '恭喜你,回答正确' ? 'answerPopup-box bg':'answerPopup-box'">
|
|
|
- <!-- 正确 -->
|
|
|
- <image class="tipimg" v-if="errTitle == '恭喜你,回答正确'" :src="imgPath+'/app/image/course_answer_img.png'"
|
|
|
- mode="aspectFill"></image>
|
|
|
- <!-- 错误 -->
|
|
|
- <image class="tipimg" v-else :src="imgPath+'/app/image/course_answer_incorrectly_img.png'" mode="aspectFill">
|
|
|
- </image>
|
|
|
- <view class="answerPopup-title">{{errTitle}}</view>
|
|
|
- <view class="answerPopup-desc" v-html="errDesc"></view>
|
|
|
- <!-- 选择奖励 -->
|
|
|
- <!-- 错误题目 -->
|
|
|
- <view class="errQuesbox" v-if="errQues&&errQues.length>0">
|
|
|
- <view class="errQuesbox-item textOne" v-for="(it,index) in errQues" :key="index">{{it.title}}</view>
|
|
|
- </view>
|
|
|
- <view class="answerPopup-btn" v-if="errTitle == '恭喜你,回答正确'" @click="closeAnswerPopup">确认</view>
|
|
|
- <view class="tipsPopup-btn-box" v-else
|
|
|
- :style="{marginTop: errQues&&errQues.length>0 ? '40rpx':'54rpx'}">
|
|
|
- <view class="tipsPopup-btn" @click="closeAnswerPopup">{{remain > 0 ? '重新答题': '确认'}}</view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </u-popup>
|
|
|
- <!-- 客服二维码弹窗 -->
|
|
|
- <u-popup :show="kfPopup" mode="center" :mask-click="false" round='12' @close="kefpop">
|
|
|
- <view class="kfqrcode-box">
|
|
|
- <view class="justify-start align-center fs24 base-color-9">
|
|
|
- <view>{{nameuser}}#</view>
|
|
|
- <view>{{userInfo.userId}}</view>
|
|
|
- </view>
|
|
|
- <view>请添加客服</view>
|
|
|
- <image class="kfqrcode" :src="qrcode" show-menu-by-longpress="true" mode="aspectFit"></image>
|
|
|
- <!-- <view v-show="qrcodeMsg" style="margin-top: 30rpx;" v-html="qrcodeMsg"></view> -->
|
|
|
- <!-- <image class="kfqrcode-close" :src="imgPath+'/app/image/course_close_white_icon.png'" mode="aspectFill"
|
|
|
- @click="closeKFPop"></image> -->
|
|
|
- </view>
|
|
|
- </u-popup>
|
|
|
- <u-popup :show="timepop" mode="center" round='12'>
|
|
|
- <view class="timepopbox center column">
|
|
|
- <view class="fs40 bold ">不在看课时间范围内</view>
|
|
|
- <view class="mtb20">看课时间</view>
|
|
|
- <view >{{videocont.startDateTime}}</view>
|
|
|
- <view>至</view>
|
|
|
- <view >{{videocont.endDateTime}}</view>
|
|
|
- <view class="base-bg-orange colorf p20 radius50 mt20"
|
|
|
- @click="getH5CourseVideoDetails">刷新时间</view>
|
|
|
- </view>
|
|
|
- </u-popup>
|
|
|
- <u-popup :show="userlogo" mode="bottom" round='12'>
|
|
|
- <view class="userlogo column">
|
|
|
- <view class="mtb30 justify-start align-center ml20">
|
|
|
- <u-avatar :src="imgPath+'/app/image/logo.png'" size="50"></u-avatar>
|
|
|
- <view class="bold mlr20">{{imgname}}</view>
|
|
|
- <view>申请</view>
|
|
|
- </view>
|
|
|
- <view class="bold fs36 ml20">授权你的昵称头像信息</view>
|
|
|
- <view class="mtb20 justify-between align-center plr20">
|
|
|
- <view class="justify-start align-center">
|
|
|
- <view class="boxweixin" :class="userinfos.nickname==''?'boxnosel':'boxsel'">
|
|
|
- <view v-if="userinfos.nickname">√</view>
|
|
|
- </view>
|
|
|
- <view class="ml20">
|
|
|
- <view class="base-color-3 bold">第一步</view>
|
|
|
- <view class="fs32 base-color-9">请点击授权微信昵称</view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="button-container">
|
|
|
- <input
|
|
|
- type="nickname"
|
|
|
- class="hidden-input"
|
|
|
- @blur="onNickNameInput"
|
|
|
- @input="onNickNameInput"
|
|
|
- />
|
|
|
- <button class="custom-button" :class="nameuser==''?'subname':'subavt'">{{nameuser?"已授权":'允许授权'}}</button>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="mtb20 justify-between align-center plr20 mt40">
|
|
|
- <view class="justify-start align-center">
|
|
|
- <view class="boxweixin" :class="userinfos.nickname==''?'boxnosel':'boxsel'">
|
|
|
- <view v-if="userinfos.avatar">√</view>
|
|
|
- </view>
|
|
|
- <view class="ml20">
|
|
|
- <view class="base-color-3 bold">第二步</view>
|
|
|
- <view class="fs32 base-color-9">请点击授权微信头像</view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="button-container">
|
|
|
- <button open-type="chooseAvatar" @chooseavatar="onChooseAvatar" class="hidden-input"
|
|
|
- v-if="nameuser">
|
|
|
- 允许授权
|
|
|
- </button>
|
|
|
- <button class="custom-button sub" @click="shouquan" v-if="nameuser==''">允许授权</button>
|
|
|
- <button class="custom-button " :class="avataruser==''?'subname':'subavt'"
|
|
|
- v-else>{{avataruser?"已授权":'允许授权'}}</button>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="submitname" @click="confimrname" :class="nameuser&&avataruser?'subact':'sub'">确定</view>
|
|
|
- </view>
|
|
|
- </u-popup>
|
|
|
- <!-- <view class="footer-tips">重庆云联融智提供技术支持</view> -->
|
|
|
- <!-- footer -->
|
|
|
- <view class="footer" v-if="videoId">
|
|
|
- <view class="btns" >
|
|
|
- <!-- <button
|
|
|
- class="author-btn"
|
|
|
- open-type="getPhoneNumber"
|
|
|
- @getphonenumber="phoneLogin" v-if="!isquestion&&authType==1">{{isLogin&&isAddKf==1 ? '提交答案领取奖励' : '立即学习'}}</button>
|
|
|
- <button
|
|
|
- class="author-btn"
|
|
|
- open-type="getUserInfo" :disabled="userdisabled"
|
|
|
- @getuserinfo="userInfologin" v-if="authType==0&&!isquestion">{{isLogin&&isAddKf==1 ? '提交答案领取奖励' : '立即学习'}}</button> -->
|
|
|
- <button class="author-btn"
|
|
|
- @click="submit">{{isLogin&&isAddKf==1 ?'提交答案领取奖励' : '立即学习'}}</button>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view>
|
|
|
- <u-modal :show="showfalse" title="提示" :content='contentmsg' @confirm='showfalse=false'></u-modal>
|
|
|
- </view>
|
|
|
- <u-loading-page :loading="viewload" iconSize="32" loadingColor="#3c9cff" fontSize="24"
|
|
|
- :loading-text="loadingtext"></u-loading-page>
|
|
|
- <ykscreenRecord></ykscreenRecord>
|
|
|
- <courseExpiration v-if="showExpiration" :code="resCode" :msg="resMsg" :qrcode="qrcode"
|
|
|
- :userId="user && userInfo.userId ? userInfo.userId : ''"></courseExpiration>
|
|
|
- </view>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script>
|
|
|
- import { generateRandomString} from "@/utils/common.js"
|
|
|
- // import { loginByMiniApp,handleFsUserWx} from "@/api/course.js"
|
|
|
- import dayjs from 'dayjs';
|
|
|
- import { mapGetters } from 'vuex';
|
|
|
- import {
|
|
|
- getErrMsg,
|
|
|
- getH5CourseByVideoId,
|
|
|
- getH5CourseVideoDetails,
|
|
|
- courseAnswer,
|
|
|
- getFinishCourseVideo,
|
|
|
- getIsAddKf,
|
|
|
- getInternetTraffic,
|
|
|
- getIntegralByH5Video,
|
|
|
- sendReward,
|
|
|
- getRealLink,
|
|
|
- handleFsUserWx,
|
|
|
- loginByMiniApp
|
|
|
- } from "@/api/courseLook.js"
|
|
|
- // import { loginByMp,checkUserInfo,editUser} from '@/api/user'
|
|
|
- import ykscreenRecord from './yk-screenRecord/yk-screenRecord.vue'
|
|
|
- import courseExpiration from './components/courseExpiration.vue'
|
|
|
- export default {
|
|
|
- components: {
|
|
|
- ykscreenRecord,
|
|
|
- courseExpiration
|
|
|
- },
|
|
|
- data() {
|
|
|
- return {
|
|
|
- viewload:true,
|
|
|
- loadingtext:"数据加载中...",
|
|
|
- baseUrl:uni.getStorageSync('requestPath'),
|
|
|
- // 1 红包 2 积分
|
|
|
- rewardType: [{
|
|
|
- name: '红包奖励',
|
|
|
- value: 1
|
|
|
- }, {
|
|
|
- name: '积分奖励',
|
|
|
- value: 2
|
|
|
- }],
|
|
|
- currentReward: 1,
|
|
|
- player: null,
|
|
|
- loading: true,
|
|
|
- progress: 0,
|
|
|
- code: null,
|
|
|
- statusBarHeight: uni.getSystemInfoSync().statusBarHeight,
|
|
|
- scrollTop: 0,
|
|
|
- height: '0px',
|
|
|
- isLogin: false,
|
|
|
- videoUrl: "",
|
|
|
- videoId: "",
|
|
|
- //现在的时长
|
|
|
- playTime: 0,
|
|
|
- //总时长
|
|
|
- duration: 0,
|
|
|
- playDuration: 0,
|
|
|
- // 用于续播
|
|
|
- playDurationSeek: 0,
|
|
|
- // 温馨提醒时间节点,
|
|
|
- tipsTime: 0,
|
|
|
- tipsOpen: false,
|
|
|
- config: {},
|
|
|
- courseInfo: {},
|
|
|
- quesList: [],
|
|
|
- lineList: [],
|
|
|
- // 错题
|
|
|
- errQues: [],
|
|
|
- // 答题机会
|
|
|
- remain: 0,
|
|
|
- errTitle: "",
|
|
|
- errDesc: "",
|
|
|
- showPlay: true,
|
|
|
- showControls: false,
|
|
|
- playStatus: "",
|
|
|
- isFull: false,
|
|
|
- isAddKf: 0,
|
|
|
- lineIndex: 0,
|
|
|
- // 是否展开
|
|
|
- isExpand: true,
|
|
|
- textHeight: 0, //文本高度
|
|
|
- qwUserId: "",
|
|
|
- qrcode: "",
|
|
|
- corpId: "",
|
|
|
- periodId:"",//营期id
|
|
|
- companyUserId:"",//销售id
|
|
|
- companyId:"",//公司id
|
|
|
- courseId:"",//课程id
|
|
|
- qrcodeMsg: "",
|
|
|
- urlOption: {},
|
|
|
- bufferRate: 0, // 缓冲时间
|
|
|
- uuId: "",
|
|
|
- isEnded: false,
|
|
|
- // 是否允许拖动进度条
|
|
|
- videolinkType: 0,
|
|
|
- ip: null,
|
|
|
- checked: true,
|
|
|
- isFinish: 0, // 是否完课
|
|
|
- interval: null,
|
|
|
- intervalIntegral: null, // 积分定时
|
|
|
- options: {
|
|
|
- sources: [{
|
|
|
- src: ""
|
|
|
- }],
|
|
|
- poster: "",
|
|
|
- live: false /* 是否直播 */ ,
|
|
|
- controls: true,
|
|
|
- autoplay: false,
|
|
|
- licenseUrl: 'https://license.vod2.myqcloud.com/license/v2/1323137866_1/v_cube.license', // license 地址,参考准备工作部分,在视立方控制台申请 license 后可获得 licenseUrl,
|
|
|
- LicenseKey: 'bcc5bd9a14b798b48c52ff005a21d926',
|
|
|
- controlBar: {
|
|
|
- volumePanel: false,
|
|
|
- playbackRateMenuButton: false,
|
|
|
- QualitySwitcherMenuButton: false,
|
|
|
- // progressControl: false
|
|
|
- },
|
|
|
- plugins: {
|
|
|
- // ProgressMarker: false,
|
|
|
- ContextMenu: {
|
|
|
- statistic: false
|
|
|
- }
|
|
|
- },
|
|
|
- },
|
|
|
- // 错误请求次数
|
|
|
- errorCount: 0,
|
|
|
- answerPopup: false,
|
|
|
- sortLink:"",
|
|
|
- // 课程是否过期
|
|
|
- isExpire: false,
|
|
|
- menuButtonLeft: 281,
|
|
|
- menuButtonH: 45,
|
|
|
- timer: null,
|
|
|
- flag: false,
|
|
|
- msg:'',
|
|
|
- poster:'',
|
|
|
- userInfo:{},
|
|
|
- timeid:'',
|
|
|
- videocont:{},
|
|
|
- timepop:false,
|
|
|
- appToken:'',
|
|
|
- kfPopup:false,
|
|
|
- iskftype:0,
|
|
|
- iskftypemsg:'',
|
|
|
- courseLogo: '',
|
|
|
- isquestion:false,
|
|
|
- tipsPopup:false,
|
|
|
- timepath:'3分之1',
|
|
|
- tipsTime2:0,
|
|
|
- userlogo:false,
|
|
|
- projectId:'',
|
|
|
- userinfos:{
|
|
|
- nickname:"",
|
|
|
- avatar:""
|
|
|
- },
|
|
|
- headImg:'',
|
|
|
- authType:0,//0微信登录 1手机号登录
|
|
|
- userdisabled:false,
|
|
|
- showfalse:false,
|
|
|
- contentmsg:null,
|
|
|
- }
|
|
|
- },
|
|
|
- filters: {
|
|
|
- numberToChinese(number) {
|
|
|
- if (number) {
|
|
|
- const chineseNumber = ['一', '二', '三', '四', '五', '六', '七', '八', '九'];
|
|
|
- return chineseNumber[number - 1];
|
|
|
- } else {
|
|
|
- return ''
|
|
|
- }
|
|
|
- },
|
|
|
- },
|
|
|
- computed: {
|
|
|
- isAnswer() {
|
|
|
- return (item, name) => {
|
|
|
- if (item.type == 1) {
|
|
|
- return item.answer == name
|
|
|
- } else if (item.type == 2) {
|
|
|
- const array = item.answer.split(',')
|
|
|
- return array.some(i => i == name)
|
|
|
- } else {
|
|
|
- return false
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- imgPath() {
|
|
|
- return this.$store.state.imgpath
|
|
|
- },
|
|
|
- imgname() {
|
|
|
- return this.$store.state.logoname
|
|
|
- },
|
|
|
- appid() {
|
|
|
- return this.$store.state.appid
|
|
|
- },
|
|
|
- nameuser() {
|
|
|
- return this.userinfos.nickname
|
|
|
- },
|
|
|
- avataruser() {
|
|
|
- return this.userinfos.avatar
|
|
|
- },
|
|
|
- ...mapGetters(['coureLogin']),
|
|
|
- },
|
|
|
- watch: {
|
|
|
- coureLogin: {
|
|
|
- immediate: true, // 页面一进入就检查一次
|
|
|
- handler(val) {
|
|
|
- if (val == 2&&this.isLogin) {
|
|
|
- console.log("看课AppToken失效,请重新登录")
|
|
|
- this.isLogin = false
|
|
|
- this.isAddKf = 0
|
|
|
- this.goLogin()
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- onLoad(option) {
|
|
|
- uni.$on('usercode',(data)=>{
|
|
|
- console.log('huoqu ',data)
|
|
|
- this.goLogin(data)
|
|
|
- })
|
|
|
- uni.$on('vipMsg',(data)=>{
|
|
|
- console.log(4444,data)
|
|
|
- this.contentmsg=data
|
|
|
- this.showfalse=true
|
|
|
- uni.showToast({
|
|
|
- icon:'none',
|
|
|
- title: data,
|
|
|
- duration:5000
|
|
|
- });
|
|
|
- })
|
|
|
- this.videoContext = uni.createVideoContext('video-content-box', this)
|
|
|
- this.code = option.code
|
|
|
- if(uni.getStorageSync('userInfo')&&JSON.stringify(uni.getStorageSync('userInfo'))!='{}') {
|
|
|
- this.userInfo = uni.getStorageSync('userInfo')
|
|
|
- } else {
|
|
|
- this.userInfo = {}
|
|
|
- }
|
|
|
- this.appToken=uni.getStorageSync('companyUserInfo')
|
|
|
- // decodeURIComponent()
|
|
|
- if(!option.course){
|
|
|
- const keys = decodeURIComponent(decodeURIComponent(Object.keys(option)[0]));
|
|
|
- console.log("keys",keys)
|
|
|
- this.urlOption=JSON.parse(keys.split('course=')[1])
|
|
|
- }else{
|
|
|
- this.urlOption = option.course ? JSON.parse(option.course) : {}
|
|
|
- }
|
|
|
- uni.setStorageSync('H5course',this.urlOption)
|
|
|
- this.videoId = this.urlOption.videoId
|
|
|
- this.courseId = this.urlOption.courseId
|
|
|
- this.periodId = this.urlOption.periodId
|
|
|
- this.companyId = this.urlOption.companyId
|
|
|
- this.companyUserId = this.urlOption.companyUserId
|
|
|
- this.projectId= this.urlOption.projectId
|
|
|
- this.timeid=this.urlOption.id
|
|
|
- console.log(this.urlOption)
|
|
|
- console.log(decodeURIComponent(option.course))
|
|
|
- // this.sortLink = this.urlOption.link || ''
|
|
|
- this.getMenuButton()
|
|
|
- // #ifdef MP-WEIXIN
|
|
|
- // if(this.$store.state.logoname!=='乐氏本源'&&!uni.getStorageSync('userInfos')){
|
|
|
- // this.userlogo=true
|
|
|
- // }
|
|
|
- console.log(uni.getStorageSync('userInfos'))
|
|
|
- // if(!uni.getStorageSync('userInfos')&&this.$store.state.logoname=='乐氏本源'){
|
|
|
- // uni.navigateTo({
|
|
|
- // url:'/pages_course/webview'
|
|
|
- // })
|
|
|
- // return
|
|
|
- // }
|
|
|
- // #endif
|
|
|
- },
|
|
|
- onShow() {
|
|
|
- this.userinfos=uni.getStorageSync('userinfos')
|
|
|
- this.userInfo=uni.getStorageSync('userInfo')
|
|
|
- this.tipsOpen = false
|
|
|
- this.isExpand = true
|
|
|
- this.uuId = generateRandomString(16)
|
|
|
- if (this.videoId) {
|
|
|
- this.getH5CourseByVideo()
|
|
|
- }
|
|
|
- const AppToken=uni.getStorageSync('TOKEN_WEXIN')
|
|
|
- if(AppToken){
|
|
|
- // this.isLogin=true
|
|
|
- if(this.isAddKf == 1&&this.userInfo.userId){
|
|
|
- this.getH5CourseVideoDetails()
|
|
|
- console.log(1)
|
|
|
- } else{
|
|
|
- // this.checkUserInfoA()
|
|
|
- this.getIsAddKf()
|
|
|
- }
|
|
|
- }
|
|
|
- // if(this.sortLink){
|
|
|
- // this.getLink()
|
|
|
- // } else {
|
|
|
- // uni.showToast({
|
|
|
- // title: 'sortLink is not found',
|
|
|
- // icon: 'none'
|
|
|
- // });
|
|
|
- // }
|
|
|
- },
|
|
|
- mounted() {
|
|
|
- // this.getIP()
|
|
|
- this.getHeight()
|
|
|
- },
|
|
|
- onHide() {
|
|
|
- // this.player = uni.createVideoContext('video-content-box');
|
|
|
- if (this.player) {
|
|
|
- this.player.pause()
|
|
|
- }
|
|
|
- // if (this.interval != null) {
|
|
|
- // clearInterval(this.interval)
|
|
|
- // this.interval = null
|
|
|
- // }
|
|
|
- // uni.$off('usercode')
|
|
|
- },
|
|
|
- onUnload() {
|
|
|
- if (this.interval != null) {
|
|
|
- clearInterval(this.interval)
|
|
|
- this.interval = null
|
|
|
- }
|
|
|
- this.clearIntegral()
|
|
|
- // uni.$off('usercode')
|
|
|
- },
|
|
|
- beforeDestroy() {
|
|
|
- this.player = uni.createVideoContext('video-content-box');
|
|
|
- if (this.player) {
|
|
|
- this.player.stop()
|
|
|
- this.player = null
|
|
|
- }
|
|
|
- if (this.interval != null) {
|
|
|
- clearInterval(this.interval)
|
|
|
- this.interval = null
|
|
|
- }
|
|
|
- this.clearIntegral()
|
|
|
- uni.$off('usercode')
|
|
|
- },
|
|
|
- methods: {
|
|
|
- handleFsUserWxs(){
|
|
|
- uni.login({
|
|
|
- provider: "weixin",
|
|
|
- success: async loginRes => {
|
|
|
- console.log(loginRes)
|
|
|
- let code = loginRes.code // 获取开发code
|
|
|
- handleFsUserWx({
|
|
|
- code: code,
|
|
|
- appId:this.appid,
|
|
|
- userId:this.userInfo.userId
|
|
|
- })
|
|
|
- .then( res => {
|
|
|
- if(res.code==200){
|
|
|
- }else if(res.code==406){
|
|
|
- uni.hideLoading();
|
|
|
- uni.showToast({
|
|
|
- icon:'none',
|
|
|
- title: '该用户已成为其他销售会员',
|
|
|
- });
|
|
|
- }else{
|
|
|
- uni.hideLoading();
|
|
|
- uni.showToast({
|
|
|
- icon:'none',
|
|
|
- title: res.msg,
|
|
|
- });
|
|
|
- }
|
|
|
-
|
|
|
- })
|
|
|
- },
|
|
|
- })
|
|
|
- },
|
|
|
- async goLogin(data) {
|
|
|
- // console.log('现在jjj',data)
|
|
|
- if(data){
|
|
|
- // console.log('huoqu1222',data)
|
|
|
- uni.showLoading({
|
|
|
- title: '加载中'
|
|
|
- })
|
|
|
- uni.login({
|
|
|
- provider: "weixin",
|
|
|
- success: async loginRes => {
|
|
|
- // console.log(loginRes)
|
|
|
- let code = loginRes.code // 获取开发code
|
|
|
- handleFsUserWx({
|
|
|
- code: code,
|
|
|
- appId:this.appid,
|
|
|
- userId:data.userId
|
|
|
- })
|
|
|
- .then( res => {
|
|
|
- if(res.code==200){
|
|
|
- // console.log(res)
|
|
|
- uni.hideLoading();
|
|
|
- uni.showToast({
|
|
|
- icon:'none',
|
|
|
- title: "登录成功",
|
|
|
- });
|
|
|
- this.userinfos=uni.getStorageSync('userinfos')
|
|
|
- uni.getStorageSync('TOKEN_WEXIN');
|
|
|
- this.userInfo=uni.getStorageSync('userInfo');
|
|
|
- this.isLogin = true
|
|
|
- setTimeout(()=>{
|
|
|
- this.getIsAddKf()
|
|
|
- },200)
|
|
|
- }else if(res.code==406){
|
|
|
- uni.hideLoading();
|
|
|
- uni.showToast({
|
|
|
- icon:'none',
|
|
|
- title: '该用户已成为其他销售会员',
|
|
|
- });
|
|
|
- }else{
|
|
|
- uni.hideLoading();
|
|
|
- uni.showToast({
|
|
|
- icon:'none',
|
|
|
- title: res.msg,
|
|
|
- });
|
|
|
- }
|
|
|
-
|
|
|
- })
|
|
|
- },
|
|
|
- })
|
|
|
- }else{
|
|
|
- await this.$store.dispatch('getWebviewUrl');
|
|
|
- uni.navigateTo({
|
|
|
- url:'/pages_course/webview?H5course='+uni.getStorageSync('H5course')
|
|
|
- })
|
|
|
- }
|
|
|
-
|
|
|
- },
|
|
|
- tofeek(){
|
|
|
- if(uni.getStorageSync('TOKEN_WEXIN')){
|
|
|
- uni.navigateTo({
|
|
|
- url:"/pages_course/feedback"
|
|
|
- })
|
|
|
- }else{
|
|
|
- uni.showToast({
|
|
|
- icon:'none',
|
|
|
- title:"请先点击立即学习,登录小程序!",
|
|
|
- });
|
|
|
- }
|
|
|
-
|
|
|
- },
|
|
|
- shouquan(){
|
|
|
- if(this.userinfos.nickname==''){
|
|
|
- uni.showToast({
|
|
|
- icon:'none',
|
|
|
- title: "请先授权微信昵称",
|
|
|
- });
|
|
|
- }
|
|
|
- },
|
|
|
- confimrname(){
|
|
|
- if(this.userinfos.nickname==''){
|
|
|
- uni.showToast({
|
|
|
- icon:'none',
|
|
|
- title: "请授权微信昵称",
|
|
|
- });
|
|
|
- return
|
|
|
- }
|
|
|
- if(this.userinfos.avatar==''){
|
|
|
- uni.showToast({
|
|
|
- icon:'none',
|
|
|
- title: "请授权微信头像",
|
|
|
- });
|
|
|
- return
|
|
|
- }
|
|
|
- uni.setStorageSync('userinfos',this.userinfos)
|
|
|
- this.editUserA()
|
|
|
- this.userlogo=false
|
|
|
- },
|
|
|
- onChooseAvatar(e){
|
|
|
- this.userinfos.avatar=e.detail.avatarUrl
|
|
|
- uni.uploadFile({
|
|
|
- url: uni.getStorageSync('requestPath')+'/app/common/uploadOSS', //仅为示例,非真实的接口地址
|
|
|
- filePath: e.detail.avatarUrl,
|
|
|
- name: 'file',
|
|
|
- formData: {
|
|
|
- 'user': 'test' // 上传附带参数
|
|
|
- },
|
|
|
- success: (uploadFileRes) => {
|
|
|
- console.log(uploadFileRes)
|
|
|
- // 根据接口具体返回格式 赋值具体对应url
|
|
|
- var data=JSON.parse(uploadFileRes.data)
|
|
|
- this.headImg=uni.getStorageSync('requestPath')+data.fileName
|
|
|
- this.userinfos.avatar=data.url
|
|
|
- }
|
|
|
- });
|
|
|
- },
|
|
|
- onNickNameInput(e){
|
|
|
- console.log(e)
|
|
|
- this.userinfos.nickname=e.detail.value
|
|
|
- },
|
|
|
- kefpop(){
|
|
|
- if(this.appToken){
|
|
|
- this.kfPopup==false
|
|
|
- }
|
|
|
- },
|
|
|
- tosales(){
|
|
|
- uni.switchTab({
|
|
|
- url:"/pages/index/index"
|
|
|
- })
|
|
|
- },
|
|
|
- closepop(){
|
|
|
- this.answerPopup=false
|
|
|
- },
|
|
|
- open(){
|
|
|
-
|
|
|
- },
|
|
|
- getMenuButton(){
|
|
|
- const menuButtonInfo = uni.getMenuButtonBoundingClientRect()
|
|
|
- this.menuButtonLeft = menuButtonInfo.left
|
|
|
- this.menuButtonH = menuButtonInfo.height
|
|
|
- },
|
|
|
- //播放时间更新事件方法
|
|
|
- onTimeUpdate(e){
|
|
|
- let currentTime = Math.round(e.detail.currentTime)
|
|
|
- if (this.playDurationSeek > 0) {
|
|
|
- this.playTime = this.playDurationSeek
|
|
|
- this.throttle(() => this.changeTime(this), 1000, false)
|
|
|
- } else {
|
|
|
- // console.log(this.isFinish)
|
|
|
- if (this.videolinkType != 1 && (currentTime - this.playTime > 3 || currentTime - this.playTime < -3)&&this.isFinish!=1) {
|
|
|
- uni.showToast({
|
|
|
- title: '不能快进哦',
|
|
|
- icon: 'none',
|
|
|
- });
|
|
|
- currentTime = this.playTime
|
|
|
- this.player.seek(this.playTime);
|
|
|
- }
|
|
|
+<template>
|
|
|
+ <view class="content " >
|
|
|
+ <view class="header-nav" :style="{height: `calc(88rpx + ${statusBarHeight}px)`,paddingTop: statusBarHeight + 'px'}">
|
|
|
+ <!-- <u-icon name="arrow-left" size="28" @click="tosales" v-if="appToken"></u-icon> -->
|
|
|
+ <view class="header-title" :style="{width:menuButtonLeft + 'px',height:menuButtonH+'px',lineHeight:menuButtonH+'px'}">{{courseInfo.title}}</view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <ylvideo
|
|
|
+ ref="yunlVideo"
|
|
|
+ :showCover="!isLogin || isAddKf!=1"
|
|
|
+ :autoplay="true"
|
|
|
+ @timeupdate="onTimeUpdate"
|
|
|
+ @progress="progressChange"
|
|
|
+ @error="videoErrorCallback"
|
|
|
+ @play="getPlay"
|
|
|
+ @pause="getPause"
|
|
|
+ @ended="getEnded"
|
|
|
+ @fullscreenchange="fullscreenchange"
|
|
|
+ :title="courseInfo.title"
|
|
|
+ style="width: 100%;height: 420rpx;"
|
|
|
+ :poster="poster"
|
|
|
+ id="video-content-box"
|
|
|
+ :isVip="true"
|
|
|
+ :cmd="playerCmd"
|
|
|
+ :seekDuration="seekDuration"
|
|
|
+ controls
|
|
|
+ :auto-pause-if-open-native="true"
|
|
|
+ :auto-pause-if-navigate="true"
|
|
|
+ :enable-progress-gesture="false"
|
|
|
+ :show-progress="true"
|
|
|
+ :picture-in-picture-mode="[]"
|
|
|
+ :show-background-playback-button="false"
|
|
|
+ :videoUrl="videoUrl">
|
|
|
|
|
|
- if (Math.floor(e.detail.currentTime) != this.flagTime) {
|
|
|
- this.flagTime = Math.floor(e.detail.currentTime)
|
|
|
- // 中途弹窗逻辑
|
|
|
- if(!this.tipsOpen&&this.tipsTime && this.playTime == this.tipsTime) {
|
|
|
- this.timepath='33%'
|
|
|
- this.openTipsPop()
|
|
|
- }
|
|
|
- if(!this.tipsOpen&&this.tipsTime2 && this.playTime == this.tipsTime2) {
|
|
|
- this.timepath='66%'
|
|
|
- this.openTipsPop()
|
|
|
- }
|
|
|
- }
|
|
|
- this.playTime = currentTime
|
|
|
-
|
|
|
- }
|
|
|
- },
|
|
|
- changeTime(that,e) {
|
|
|
- that.playDurationSeek = 0
|
|
|
- },
|
|
|
- videoErrorCallback(e) {
|
|
|
- this.clearIntegral()
|
|
|
- this.errorCount++
|
|
|
- if (this.errorCount > 3) return
|
|
|
- console.log(e)
|
|
|
- this.getErrMsg(e.target.errMsg)
|
|
|
- this.getH5CourseVideoDetails('error')
|
|
|
- },
|
|
|
- // 当开始/继续播放时触发play事件
|
|
|
- getPlay() {
|
|
|
- this.errorCount = 0
|
|
|
- // this.judgeDuration()
|
|
|
- },
|
|
|
- getPause() {
|
|
|
- this.clearIntegral()
|
|
|
- },
|
|
|
- getEnded() {
|
|
|
- this.clearIntegral()
|
|
|
- this.isEnded = true
|
|
|
- this.isFinish=1
|
|
|
- this.getFinishCourseVideo()
|
|
|
- },
|
|
|
- getIP() {
|
|
|
- uni.request({
|
|
|
- url: 'https://ipinfo.io/json', //仅为示例,并非真实接口地址。
|
|
|
- method: 'GET',
|
|
|
- success: (res) => {
|
|
|
- this.ip = res.data.ip
|
|
|
- }
|
|
|
- });
|
|
|
- },
|
|
|
- getHeight() {
|
|
|
- this.$nextTick(() => {
|
|
|
- const query = uni.createSelectorQuery().in(this);
|
|
|
- query
|
|
|
- .select("#title-content")
|
|
|
- .boundingClientRect((data) => {
|
|
|
- this.height =
|
|
|
- `calc(100vh - ${data.height}px - 420rpx - ${this.statusBarHeight}px - 164rpx )`
|
|
|
- })
|
|
|
- .exec();
|
|
|
- })
|
|
|
- },
|
|
|
- getDescHeight() {
|
|
|
- this.$nextTick(() => {
|
|
|
- const query = uni.createSelectorQuery().in(this);
|
|
|
- query
|
|
|
- .select("#descbox-desc")
|
|
|
- .boundingClientRect((data) => {
|
|
|
- this.textHeight = data.height
|
|
|
- })
|
|
|
- .exec();
|
|
|
- })
|
|
|
- },
|
|
|
- numberToLetter(num) {
|
|
|
- // 将数字转换为字母的 ASCII 码
|
|
|
- let letterCode = num + 65;
|
|
|
- // 将 ASCII 码转换为大写字母
|
|
|
- let letter = String.fromCharCode(letterCode);
|
|
|
- return letter;
|
|
|
- },
|
|
|
- updateTime() {
|
|
|
- var that = this;
|
|
|
- if (this.interval != null) {
|
|
|
- clearInterval(this.interval)
|
|
|
- }
|
|
|
- this.interval = setInterval(function() {
|
|
|
- that.getFinishCourseVideo()
|
|
|
- that.getInternetTraffic()
|
|
|
- }, 60000);
|
|
|
- },
|
|
|
- judgeDuration() {
|
|
|
- var that = this;
|
|
|
- if (this.intervalIntegral != null) {
|
|
|
- clearInterval(this.intervalIntegral)
|
|
|
- this.intervalIntegral = null
|
|
|
- }
|
|
|
- // 观看10分钟获得积分
|
|
|
- this.intervalIntegral = setInterval(function() {
|
|
|
- that.getIntegralByH5Video()
|
|
|
- }, 600000);
|
|
|
- },
|
|
|
- clearIntegral() {
|
|
|
- if (this.intervalIntegral != null) {
|
|
|
- clearInterval(this.intervalIntegral)
|
|
|
- this.intervalIntegral = null
|
|
|
- }
|
|
|
- },
|
|
|
- // 展开简介
|
|
|
- handleExpand() {
|
|
|
- this.isExpand = !this.isExpand
|
|
|
- },
|
|
|
- getH5CourseByVideo() {
|
|
|
- this.loading = true
|
|
|
- getH5CourseByVideoId({
|
|
|
- videoId: this.videoId
|
|
|
- }).then(res => {
|
|
|
- this.loading = false
|
|
|
- if (res.code == 200) {
|
|
|
- this.viewload=false
|
|
|
- this.courseInfo = res.data
|
|
|
- uni.setNavigationBarTitle({
|
|
|
- title: this.courseInfo && this.courseInfo.title ? this.courseInfo.title : ''
|
|
|
- });
|
|
|
- }else {
|
|
|
- uni.showToast({
|
|
|
- title: res.msg,
|
|
|
- icon: "none"
|
|
|
- })
|
|
|
- }
|
|
|
- this.getHeight()
|
|
|
- this.getDescHeight()
|
|
|
- },
|
|
|
- rej => {
|
|
|
- this.loading = false
|
|
|
- }
|
|
|
- ).catch(() => {
|
|
|
- this.loading = false
|
|
|
- })
|
|
|
- },
|
|
|
- getH5CourseVideoDetails(type) {
|
|
|
- uni.showLoading({
|
|
|
- title: '加载中'
|
|
|
- })
|
|
|
- const data={
|
|
|
- videoId:this.videoId,
|
|
|
- fsUserId:this.userInfo.userId,
|
|
|
- courseId:this.courseId,
|
|
|
- companyUserId:this.companyUserId,
|
|
|
- periodId:this.periodId,
|
|
|
- // projectId:this.projectId,
|
|
|
- id:this.timeid
|
|
|
- }
|
|
|
- getH5CourseVideoDetails(data).then(res => {
|
|
|
- uni.hideLoading();
|
|
|
- if (res.code == 200) {
|
|
|
- this.config = res.data.courseConfig || {}
|
|
|
- this.isFinish = res.data.isFinish || 0
|
|
|
- this.duration = res.data.courseVideoDetails &&
|
|
|
- res.data.courseVideoDetails.duration ? res.data.courseVideoDetails.duration : 0
|
|
|
- this.courseLogo = this.config&&JSON.stringify(this.config)!='{}'? this.config.courseLogo : ''
|
|
|
- this.playDuration = res.data.playDuration || 0
|
|
|
- this.playDurationSeek = res.data.playDuration || 0
|
|
|
- // this.tipsTime = 38
|
|
|
- this.tipsTime = res.data.tipsTime || 0
|
|
|
- this.tipsTime2 = res.data.tipsTime2 || 0
|
|
|
- let lineList = []
|
|
|
- // if (res.course && res.course.lineOne) {
|
|
|
- // lineList.push(res.course.lineOne)
|
|
|
- // }
|
|
|
- // if (res.course && res.course.lineTwo) {
|
|
|
- // lineList.push(res.course.lineTwo)
|
|
|
- // }
|
|
|
- // if (res.course && res.course.lineThree) {
|
|
|
- // lineList.push(res.course.lineThree)
|
|
|
- // }
|
|
|
- this.lineList = lineList
|
|
|
- if (!this.player || type == 'error') {
|
|
|
- uni.hideLoading();
|
|
|
- this.lineIndex = this.config.defaultLine
|
|
|
- this.videoUrl = res.data.courseVideoDetails.videoUrl
|
|
|
- this.poster= res.data.courseVideoDetails &&
|
|
|
- res.data.courseVideoDetails.thumbnail ? res.data.courseVideoDetails.thumbnail : ''
|
|
|
- this.videocont=res.data
|
|
|
- // this.options.sources = [{
|
|
|
- // src: this.videoUrl
|
|
|
- // }]
|
|
|
- // this.options.poster = res.course && res.course.imgUrl ? res.course.imgUrl : ''
|
|
|
- // this.initVideo()
|
|
|
- this.playTime = this.playDuration >= this.duration ? 0 : this.playDuration
|
|
|
- if(this.videocont.rang){
|
|
|
- setTimeout(()=>{
|
|
|
- this.player = uni.createVideoContext('video-content-box');
|
|
|
- this.player.seek(this.playTime)
|
|
|
- this.player.play();
|
|
|
- },500);
|
|
|
- this.timepop=false
|
|
|
- }else{
|
|
|
- this.timepop=true
|
|
|
- }
|
|
|
-
|
|
|
- } else {
|
|
|
- // let div = document.querySelector(".vjs-progress-control");
|
|
|
- // if(div) {
|
|
|
- // if (this.isFinish == 1 || this.isEnded || this.videolinkType == 1) {
|
|
|
- // div.style.pointerEvents = "auto";
|
|
|
- // } else {
|
|
|
- // div.style.pointerEvents = "none"; //禁止所有事件
|
|
|
- // }
|
|
|
- // }
|
|
|
- this.playTime = this.playTime > this.playDuration ? this.playTime : this.playDuration >= this.duration ? 0 : this.playDuration
|
|
|
- this.player.seek(this.playTime)
|
|
|
- this.player.play();
|
|
|
- }
|
|
|
- this.updateTime();
|
|
|
- if(res.data.courseVideoDetails.questionBankList.length==0){
|
|
|
- this.isquestion=true
|
|
|
- }else{
|
|
|
- this.isquestion=false
|
|
|
- }
|
|
|
- console.log('题目',res.data.courseVideoDetails.questionBankList)
|
|
|
- this.quesList = res.data.courseVideoDetails.questionBankList
|
|
|
- && res.data.courseVideoDetails.questionBankList.length > 0 ? res.data.courseVideoDetails.questionBankList : [],
|
|
|
- this.quesList = this.quesList.map(item => ({
|
|
|
- ...item,
|
|
|
- questionOption: JSON.parse(item.question),
|
|
|
- answer: ''
|
|
|
- }))
|
|
|
- }
|
|
|
- this.getHeight()
|
|
|
- this.getDescHeight()
|
|
|
- },
|
|
|
- rej => {}
|
|
|
- )
|
|
|
- },
|
|
|
- handleAnswer(item, option, idx) {
|
|
|
- let time = this.playTime
|
|
|
- if(this.isEnded || this.isFinish==1) {
|
|
|
- time = this.duration
|
|
|
- } else {
|
|
|
- if(time < this.playDuration&&this.isFinish!=1) {
|
|
|
- // 没完课且小于续播的时间
|
|
|
- time = this.playDuration
|
|
|
- }
|
|
|
- }
|
|
|
- if(Number(this.duration || 0) == 0 || time < this.duration - 60) {
|
|
|
- uni.showToast({
|
|
|
- title: "请先观看完整课程再答题哦~",
|
|
|
- icon: "none"
|
|
|
- })
|
|
|
- return
|
|
|
- }
|
|
|
-
|
|
|
- if (item.type == 1) {
|
|
|
- // 单选option
|
|
|
- item.answer = option.name
|
|
|
- } else if (item.type == 2) {
|
|
|
- // 多选
|
|
|
- let answer = item.answer ? item.answer.split(',') : []
|
|
|
- if (answer.indexOf(option.name) === -1) {
|
|
|
- answer.push(option.name)
|
|
|
- item.answer = answer.join(',')
|
|
|
- } else {
|
|
|
- answer.splice(answer.indexOf(option.name), 1)
|
|
|
- item.answer = answer.join(',')
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- submit() {
|
|
|
- if(this.isExpire){
|
|
|
- uni.showToast({
|
|
|
- title: '课程已过期或链接无效',
|
|
|
- icon: 'none'
|
|
|
- });
|
|
|
- return
|
|
|
- }
|
|
|
- // 登录
|
|
|
- this.$isLoginCourse().then(
|
|
|
- res => {
|
|
|
- console.log(res)
|
|
|
- if(res){
|
|
|
- console.log(res)
|
|
|
- if (this.isAddKf == 1) {
|
|
|
- // 答题
|
|
|
- // 您已提交过答案,请领取红包
|
|
|
- console.log(1223)
|
|
|
- this.courseAnswer()
|
|
|
- } else {
|
|
|
- // 添加客服
|
|
|
- if (this.videoId&&this.isLogin) {
|
|
|
- console.log(12223131)
|
|
|
- this.getIsAddKf()
|
|
|
- } else if(this.iskftype==1){
|
|
|
- uni.showToast({
|
|
|
- title: this.iskftypemsg,
|
|
|
- icon: 'none'
|
|
|
- })
|
|
|
- }
|
|
|
- else {
|
|
|
- // this.kfPopup=true
|
|
|
- uni.removeStorageSync('TOKEN_WEXIN')
|
|
|
- uni.showToast({
|
|
|
- title: '已清除缓存,请重新进入页面!',
|
|
|
- icon: 'none'
|
|
|
- })
|
|
|
- }
|
|
|
- }
|
|
|
- } else{
|
|
|
- this.goLogin()
|
|
|
- }
|
|
|
- },
|
|
|
- rej => {}
|
|
|
- );
|
|
|
-
|
|
|
- },
|
|
|
- // 答题
|
|
|
- courseAnswer() {
|
|
|
- let time = this.playTime
|
|
|
- if (this.isEnded||this.isFinish==1) {
|
|
|
- time = this.duration
|
|
|
- } else {
|
|
|
- if (time < this.playDuration && this.isFinish != 1) {
|
|
|
- // 没完课且小于续播的时间
|
|
|
- time = this.playDuration
|
|
|
- }
|
|
|
- }
|
|
|
- if (Number(this.duration || 0) == 0 || time < this.duration - 60) {
|
|
|
- uni.showToast({
|
|
|
- title: "请先观看完整课程再答题哦~",
|
|
|
- icon: "none"
|
|
|
- })
|
|
|
- return
|
|
|
- }
|
|
|
- if (this.quesList.some(item => !item.answer)) {
|
|
|
- uni.showToast({
|
|
|
- title: "请确认是否答完所有题目",
|
|
|
- icon: "none"
|
|
|
- })
|
|
|
- return
|
|
|
- }
|
|
|
- const questions = this.quesList.map(obj => {
|
|
|
- const {
|
|
|
- questionOption,
|
|
|
- ...rest
|
|
|
- } = obj;
|
|
|
- return rest;
|
|
|
- });
|
|
|
- const param = {
|
|
|
- ...this.urlOption,
|
|
|
- userId:this.userInfo.userId,
|
|
|
- questions: questions,
|
|
|
- videoId: this.videoId,
|
|
|
- duration: this.playTime,
|
|
|
- }
|
|
|
- this.errTitle = ""
|
|
|
- this.errDesc = ""
|
|
|
- this.errQues = []
|
|
|
- courseAnswer(param).then(res => {
|
|
|
- if (res.code == 200) {
|
|
|
- if (res.incorrectQuestions) {
|
|
|
- // 答题失败
|
|
|
- if (res.incorrectQuestions.length > 0) {
|
|
|
- this.errQues = res.incorrectQuestions
|
|
|
- }
|
|
|
- this.remain = res.remain || 0
|
|
|
- if (res.remain > 0) {
|
|
|
- this.answerPopup=true
|
|
|
- this.errTitle = "很遗憾答错了"
|
|
|
- this.errDesc = `<span style="color:#FF5C03">还有${res.remain}次机会,继续加油</span>`
|
|
|
- // this.$refs.answerPopup.open("center")
|
|
|
- this.answerPopup=true
|
|
|
- }
|
|
|
- } else {
|
|
|
- // 答题成功
|
|
|
- this.errTitle = "恭喜你,回答正确"
|
|
|
- // this.errDesc = `请选择奖励`
|
|
|
- // this.$refs.answerPopup.open("center")
|
|
|
- if(res.msg=='答题成功'){
|
|
|
- this.closeAnswerPopup()
|
|
|
-
|
|
|
- }
|
|
|
- }
|
|
|
- } else {
|
|
|
- if (res.msg == "该课题到达答错次数限制") {
|
|
|
- this.errTitle = "答题次数超过限制"
|
|
|
- this.errDesc = "以后的课程要认真学习哦"
|
|
|
- // this.$refs.answerPopup.open("center")
|
|
|
- this.answerPopup=true
|
|
|
- } else {
|
|
|
- uni.showToast({
|
|
|
- title: res.msg,
|
|
|
- icon: "none"
|
|
|
- })
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- rej => {}
|
|
|
- )
|
|
|
- },
|
|
|
- // 选择
|
|
|
- rewardChange(e) {
|
|
|
- this.currentReward = e.detail.value
|
|
|
- },
|
|
|
- closeAnswerPopup() {
|
|
|
- // this.$refs.answerPopup.close()
|
|
|
- uni.showLoading({
|
|
|
- title: "加载中..."
|
|
|
- })
|
|
|
- if (this.errTitle == '恭喜你,回答正确') {
|
|
|
- const param = {
|
|
|
- ...this.urlOption,
|
|
|
- userId:this.userInfo.userId,
|
|
|
- // rewardType: Number(this.currentReward),
|
|
|
- source: 2, // 2 小程序 1 h5
|
|
|
- appId: this.appid
|
|
|
- }
|
|
|
- sendReward(param).then(res => {
|
|
|
- if(res.code == 200) {
|
|
|
- uni.hideLoading()
|
|
|
- this.answerPopup=false
|
|
|
- // console.log('红包',res)
|
|
|
- if(res.isNew&&res.isNew==1) {
|
|
|
- console.log('红包配置',res)
|
|
|
- const packageInfo = res.data.packageInfo || ''
|
|
|
- if(packageInfo) {
|
|
|
- uni.setStorageSync('receive_package',packageInfo)
|
|
|
- uni.setStorageSync('mchId',res.mchId)
|
|
|
- uni.navigateTo({
|
|
|
- url: '/pages_course/reward'
|
|
|
- })
|
|
|
-
|
|
|
- }
|
|
|
- } else {
|
|
|
- uni.showToast({
|
|
|
- title: res.msg,
|
|
|
- icon: 'none'
|
|
|
- })
|
|
|
- }
|
|
|
- }else {
|
|
|
- uni.hideLoading()
|
|
|
- uni.showToast({
|
|
|
- title: res.msg,
|
|
|
- icon: 'none'
|
|
|
- })
|
|
|
- }
|
|
|
- // if(res.code == 200) {
|
|
|
- // //重构 发红包,后台通过OPENID发零钱到 账
|
|
|
- // //this.initWXConfig(res.package)
|
|
|
- // }else {
|
|
|
- // uni.showToast({
|
|
|
- // title: res.msg,
|
|
|
- // icon: 'none'
|
|
|
- // })
|
|
|
- // }
|
|
|
- })
|
|
|
- }else{
|
|
|
- uni.hideLoading()
|
|
|
- this.answerPopup=false
|
|
|
- }
|
|
|
- },
|
|
|
- // 线路
|
|
|
- openPop() {
|
|
|
- this.$refs.popup.open('bottom')
|
|
|
- },
|
|
|
- close() {
|
|
|
- this.$refs.popup.close()
|
|
|
- },
|
|
|
- handleLine(index) {
|
|
|
- var that=this;
|
|
|
- if (this.lineIndex == index && this.videoUrl == this.lineList[index]) {
|
|
|
- this.close()
|
|
|
- return
|
|
|
- } else {
|
|
|
- // let div = document.querySelector(".vjs-progress-control");
|
|
|
- // if(div) {
|
|
|
- // if (this.isFinish == 1 || this.isEnded || this.videolinkType == 1) {
|
|
|
- // div.style.pointerEvents = "auto";
|
|
|
- // } else {
|
|
|
- // div.style.pointerEvents = "none"; //禁止所有事件
|
|
|
- // }
|
|
|
- // }
|
|
|
- this.lineIndex = index
|
|
|
- this.videoUrl = this.lineList[index]
|
|
|
- this.tipsOpen = false
|
|
|
- this.playDurationSeek = this.playTime || 0
|
|
|
- this.player = uni.createVideoContext('video-content-box');
|
|
|
- setTimeout(function(){
|
|
|
- that.player.seek(that.playDurationSeek)
|
|
|
- that.player.play();
|
|
|
- },500);
|
|
|
- // this.player.src(this.lineList[index])
|
|
|
- // this.player.one('loadedmetadata', () => {
|
|
|
- // this.player.currentTime(this.playDurationSeek);
|
|
|
- // this.player.play();
|
|
|
- // });
|
|
|
- this.close()
|
|
|
- }
|
|
|
-
|
|
|
- },
|
|
|
- // 温馨提示
|
|
|
- openTipsPop() {
|
|
|
- // this.$refs.tipsPopup.open()
|
|
|
- this.tipsPopup=true
|
|
|
- // 暂停视频
|
|
|
- this.videoContext.pause()
|
|
|
- // this.tipsOpen = true
|
|
|
- // this.pause()
|
|
|
- },
|
|
|
- closeTipsPop() {
|
|
|
- // this.$refs.tipsPopup.close()
|
|
|
- this.videoContext.play()
|
|
|
- this.tipsPopup=!this.tipsPopup
|
|
|
- },
|
|
|
- // 客服
|
|
|
- getIsAddKf() {
|
|
|
- this.qrcode = ''
|
|
|
- this.qrcodeMsg = ''
|
|
|
- this.isAddKf = 0
|
|
|
- const data = {
|
|
|
- videoId:this.videoId,
|
|
|
- userId:this.userInfo.userId,
|
|
|
- companyUserId:this.companyUserId,
|
|
|
- companyId:this.companyId,
|
|
|
- courseId:this.courseId,
|
|
|
- periodId:this.periodId,
|
|
|
- projectId:this.projectId
|
|
|
- }
|
|
|
- // {videoId: this.videoId,qwUserId: this.qwUserId,corpId: this.corpId}
|
|
|
- getIsAddKf(data).then(res => {
|
|
|
- if (res.code == 200) {
|
|
|
- this.isLogin = true
|
|
|
- if(res.data&&this.userInfo.userId){
|
|
|
- this.isAddKf = 1
|
|
|
- this.getH5CourseVideoDetails()
|
|
|
- this.handleFsUserWxs()
|
|
|
- }else{
|
|
|
- this.goLogin()
|
|
|
- }
|
|
|
- // else{
|
|
|
- // uni.showToast({
|
|
|
- // title: '请联系管理员,注册为会员!',
|
|
|
- // icon: 'none'
|
|
|
- // });
|
|
|
- // }
|
|
|
- }else if(res.code==1002){
|
|
|
- this.isAddKf = 0
|
|
|
- this.qrcode=res.ext
|
|
|
- this.kfPopup=true
|
|
|
- uni.showToast({
|
|
|
- title: "请添加管理员微信,成为会员!",
|
|
|
- icon: 'none'
|
|
|
- });
|
|
|
- this.initExpiration(res.msg,res.code)
|
|
|
- }else if(res.code==505){
|
|
|
- this.isAddKf = 0
|
|
|
- this.qrcode=res.ext
|
|
|
- this.kfPopup=true
|
|
|
- uni.showToast({
|
|
|
- title: "管理员开启了会员审核,请等待审核!",
|
|
|
- icon: 'none'
|
|
|
- });
|
|
|
- this.initExpiration(res.msg,res.code)
|
|
|
- }else if(res.code==406){
|
|
|
- uni.hideLoading();
|
|
|
- uni.showToast({
|
|
|
- icon:'none',
|
|
|
- title: '该用户已成为其他销售会员',
|
|
|
- });
|
|
|
- this.initExpiration(res.msg,res.code)
|
|
|
- }else if(res.code==504){
|
|
|
- this.isAddKf = 0
|
|
|
- this.iskftype=1
|
|
|
- this.iskftypemsg=res.msg
|
|
|
- uni.showToast({
|
|
|
- title: res.msg,
|
|
|
- icon: 'none'
|
|
|
- });
|
|
|
- this.initExpiration(res.msg,res.code)
|
|
|
- }
|
|
|
- else {
|
|
|
- this.initExpiration(res.msg,res.code)
|
|
|
- this.isAddKf = 0
|
|
|
- uni.showToast({
|
|
|
- title: res.msg,
|
|
|
- icon: 'none'
|
|
|
- });
|
|
|
- }
|
|
|
- },
|
|
|
- err => {}
|
|
|
- );
|
|
|
- },
|
|
|
- initExpiration(resMsg,resCode) {
|
|
|
- if(resCode==401) return;
|
|
|
- this.resMsg = resMsg
|
|
|
- this.resCode = resCode
|
|
|
- this.showExpiration = true
|
|
|
- },
|
|
|
- closeKFPop() {
|
|
|
- // this.$refs.kfPopup.close()
|
|
|
- // this.kfPopup=!this.kfPopup
|
|
|
- },
|
|
|
- getFinishCourseVideo() {
|
|
|
- if (!this.playTime) return
|
|
|
- // {videoId: this.videoId,duration:this.playTime}
|
|
|
- const param = {
|
|
|
- duration: this.playTime,
|
|
|
- videoId:this.videoId,
|
|
|
- userId:this.userInfo.userId,
|
|
|
- companyUserId:this.companyUserId
|
|
|
- }
|
|
|
- getFinishCourseVideo(param)
|
|
|
- },
|
|
|
- // 每十分钟获得积分
|
|
|
- getIntegralByH5Video() {
|
|
|
- const param = {
|
|
|
- duration: this.playTime,
|
|
|
- ...this.urlOption
|
|
|
- }
|
|
|
- getIntegralByH5Video(param).then(res => {
|
|
|
- if (res.code == 200) {
|
|
|
- uni.showToast({
|
|
|
- title: "积分+10",
|
|
|
- icon: "none"
|
|
|
- })
|
|
|
- }
|
|
|
- })
|
|
|
- },
|
|
|
- progressChange(e) {
|
|
|
- this.bufferRate = Math.ceil(e.detail.buffered)
|
|
|
- // console.log('缓冲结果',this.bufferRate)
|
|
|
- // console.log('缓冲',this.playTime,this.duration)
|
|
|
- },
|
|
|
- // 缓冲
|
|
|
- getInternetTraffic() {
|
|
|
- const playVideoTime = Math.ceil(this.playTime / this.duration * 100) // 播放百分比
|
|
|
- // console.log('播放百分比',playVideoTime)
|
|
|
- if(this.bufferRate == 0 || this.bufferRate < playVideoTime) {
|
|
|
- this.bufferRate = playVideoTime
|
|
|
- console.log(this.bufferRate)
|
|
|
- }
|
|
|
- if(this.bufferRate == 0 || Number(this.bufferRate.toFixed(2)) == 0) return
|
|
|
- const param = {
|
|
|
- uuId: dayjs().format('YYYYMMDD') + this.uuId,
|
|
|
- duration: this.playTime,
|
|
|
- bufferRate: Number(this.bufferRate.toFixed(2)),
|
|
|
- userId:this.userId,
|
|
|
- periodId:this.periodId,
|
|
|
- ...this.urlOption
|
|
|
- }
|
|
|
- getInternetTraffic(param)
|
|
|
- },
|
|
|
- getErrMsg(err) {
|
|
|
- let msgerr = {
|
|
|
- videoUrl: this.videoUrl,
|
|
|
- lineIndex: this.lineIndex,
|
|
|
- errTime: new Date(),
|
|
|
- // ip: this.ip,
|
|
|
- errMsg: err
|
|
|
- }
|
|
|
- getErrMsg({
|
|
|
- msg: JSON.stringify(msgerr)
|
|
|
- })
|
|
|
- },
|
|
|
-
|
|
|
- getLink() {
|
|
|
- this.goLogin()
|
|
|
- return
|
|
|
- let that = this;
|
|
|
- this.msg = ''
|
|
|
- getRealLink({sortLink:this.sortLink}).then(res=>{
|
|
|
- if(res.code == 200) {
|
|
|
- this.isExpire = false
|
|
|
- // 如果响应中包含真实链接,则跳转到真实链接
|
|
|
- // window.location.href = res.realLink +"&sortLink="+this.sortLink+"&code="+this.code+"&time="+new Date().getTime()
|
|
|
- if (this.isLogin && this.isAddKf == 1) {
|
|
|
- this.getH5CourseVideoDetails()
|
|
|
- }
|
|
|
- if (this.videoId && this.isAddKf != 1) {
|
|
|
- this.$isLoginCourse().then(
|
|
|
- isLogin => {
|
|
|
- this.isLogin = isLogin
|
|
|
- if(isLogin){
|
|
|
- this.getIsAddKf()
|
|
|
- } else {
|
|
|
- this.goLogin()
|
|
|
- }
|
|
|
- },
|
|
|
- rej => {}
|
|
|
- );
|
|
|
- }
|
|
|
- } else {
|
|
|
- this.isExpire = true
|
|
|
- this.msg = '课程已过期或链接无效'
|
|
|
- uni.showToast({
|
|
|
- title: '课程已过期或链接无效',
|
|
|
- icon: 'none'
|
|
|
- });
|
|
|
- }
|
|
|
- }).catch(err=>{
|
|
|
- this.isExpire = true
|
|
|
- this.msg = '发生错误,请稍后再试'
|
|
|
- uni.showToast({
|
|
|
- title: '发生错误,请稍后再试',
|
|
|
- icon: 'none'
|
|
|
- });
|
|
|
- })
|
|
|
- },
|
|
|
- /**
|
|
|
- * 节流原理:在一定时间内,只能触发一次
|
|
|
- *
|
|
|
- * @param {Function} func 要执行的回调函数
|
|
|
- * @param {Number} wait 延时的时间
|
|
|
- * @param {Boolean} immediate 是否立即执行
|
|
|
- * @return null
|
|
|
- */
|
|
|
- throttle(func, wait = 500, immediate = true) {
|
|
|
- if (immediate) {
|
|
|
- if (!this.flag) {
|
|
|
- this.flag = true
|
|
|
- // 如果是立即执行,则在wait毫秒内开始时执行
|
|
|
- typeof func === 'function' && func()
|
|
|
- this.timer = setTimeout(() => {
|
|
|
- this.flag = false
|
|
|
- }, wait)
|
|
|
- }
|
|
|
- } else if (!this.flag) {
|
|
|
- this.flag = true
|
|
|
- // 如果是非立即执行,则在wait毫秒内的结束处执行
|
|
|
- this.timer = setTimeout(() => {
|
|
|
- this.flag = false
|
|
|
- typeof func === 'function' && func()
|
|
|
- }, wait)
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-</script>
|
|
|
-
|
|
|
-<style scoped>
|
|
|
-.full-width-popup {
|
|
|
- width: 100%;
|
|
|
-}
|
|
|
-</style>
|
|
|
-<style lang="scss" scoped>
|
|
|
- .subname{
|
|
|
- background-color: #00aa00;
|
|
|
- color: #fff;
|
|
|
- }
|
|
|
- .subavt{
|
|
|
- background-color: #fff;
|
|
|
- border: 2rpx #0a0 solid;
|
|
|
- color: #00aa00;
|
|
|
- }
|
|
|
- .boxweixin{
|
|
|
- width: 44rpx;
|
|
|
- height: 44rpx;
|
|
|
- border-radius: 50%;
|
|
|
- text-align: center;
|
|
|
- line-height: 34rpx;
|
|
|
- color: #0a0;
|
|
|
- }
|
|
|
- .boxnosel{
|
|
|
- border: #757575 4rpx solid;
|
|
|
- }
|
|
|
- .boxsel{
|
|
|
- border: #0a0 4rpx solid;
|
|
|
- }
|
|
|
- .button-container {
|
|
|
- position: relative;
|
|
|
- width: 240rpx;
|
|
|
- }
|
|
|
- .hidden-input {
|
|
|
- position: absolute;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- opacity: 0;
|
|
|
- z-index: 2;
|
|
|
- }
|
|
|
- .custom-button {
|
|
|
- position: relative;
|
|
|
- z-index: 1;
|
|
|
- /* 其他样式 */
|
|
|
- width:100%;
|
|
|
- margin: 0 auto;
|
|
|
- height: 80rpx;
|
|
|
- line-height: 60rpx;
|
|
|
- font-size: 28rpx;
|
|
|
- padding: 10rpx 20rpx;
|
|
|
- }
|
|
|
- .submitname{
|
|
|
- width: 90%;
|
|
|
-
|
|
|
- margin: 0 auto;
|
|
|
- text-align: center;
|
|
|
- padding: 30rpx;
|
|
|
- margin-top: 40rpx;
|
|
|
- }
|
|
|
- .sub{
|
|
|
- background-color: #f0f0f0;
|
|
|
- color: #0a0;
|
|
|
- }
|
|
|
- .subact{
|
|
|
- background-color: #0a0;
|
|
|
- color: #fff;
|
|
|
- }
|
|
|
- .userlogo{
|
|
|
- height: 760rpx;
|
|
|
- }
|
|
|
- .getlogo{
|
|
|
- width:240rpx;
|
|
|
- background-color: #fff;
|
|
|
- // padding: 10rpx 20rpx;
|
|
|
- }
|
|
|
- @mixin u-flex($flexD, $alignI, $justifyC) {
|
|
|
- display: flex;
|
|
|
- flex-direction: $flexD;
|
|
|
- align-items: $alignI;
|
|
|
- justify-content: $justifyC;
|
|
|
- }
|
|
|
- .footer-tips {
|
|
|
- position: fixed;
|
|
|
- width: 100%;
|
|
|
- bottom: 144rpx;
|
|
|
- text-align: center;
|
|
|
- font-family: PingFang SC,PingFang SC;
|
|
|
- font-weight: 500;
|
|
|
- font-size: 12px;
|
|
|
- color: #bbb;
|
|
|
- transform: scale(0.8);
|
|
|
- }
|
|
|
- .btns{
|
|
|
- position: relative;
|
|
|
- width: 100%;
|
|
|
- height: 80rpx;
|
|
|
- .author-btn{
|
|
|
- z-index:100;
|
|
|
- position: absolute;
|
|
|
- width: 100%;
|
|
|
- height: 80rpx;
|
|
|
- background: #ff5c03;
|
|
|
- border-radius: 40rpx;
|
|
|
- font-size: 36rpx;
|
|
|
- font-family: PingFang SC;
|
|
|
- font-weight: 500;
|
|
|
- text-align: center;
|
|
|
- line-height: 80rpx;
|
|
|
- color: rgba(255, 255, 255, 1);
|
|
|
- }
|
|
|
- }
|
|
|
- .textOne {
|
|
|
- overflow: hidden;
|
|
|
- white-space: nowrap;
|
|
|
- text-overflow: ellipsis;
|
|
|
- }
|
|
|
-
|
|
|
- .textTwo {
|
|
|
- overflow: hidden;
|
|
|
- text-overflow: ellipsis;
|
|
|
- display: -webkit-box;
|
|
|
- -webkit-line-clamp: 2;
|
|
|
- -webkit-box-orient: vertical;
|
|
|
- }
|
|
|
- .header-nav {
|
|
|
- height: 88rpx;
|
|
|
- @include u-flex(row, center, flex-start);
|
|
|
- overflow: hidden;
|
|
|
- background-color: #fff;
|
|
|
- box-sizing: border-box;
|
|
|
- .header-title {
|
|
|
- text-align: center;
|
|
|
- overflow: hidden;
|
|
|
- white-space: nowrap;
|
|
|
- text-overflow: ellipsis;
|
|
|
- padding: 0 10rpx 0 100rpx;
|
|
|
- font-family: PingFang SC,PingFang SC;
|
|
|
- font-weight: 500;
|
|
|
- font-size: 15px;
|
|
|
- color: #000;
|
|
|
- box-sizing: border-box;
|
|
|
- }
|
|
|
- }
|
|
|
- .reward-list {
|
|
|
- width: 100%;
|
|
|
- margin-top: 20rpx;
|
|
|
- margin-bottom: -40rpx;
|
|
|
-
|
|
|
- &-group {
|
|
|
- font-family: PingFang SC, PingFang SC;
|
|
|
- font-weight: 400;
|
|
|
- font-size: 14px;
|
|
|
- color: #222222;
|
|
|
- @include u-flex(row, center, center);
|
|
|
- }
|
|
|
-
|
|
|
- &-option {
|
|
|
- @include u-flex(row, center, flex-start);
|
|
|
-
|
|
|
- &:first-child {
|
|
|
- margin-right: 40rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .err {
|
|
|
- color: #f56c6c !important;
|
|
|
- }
|
|
|
-
|
|
|
- .kfqrcode-box {
|
|
|
- background-color: #fff;
|
|
|
- border-radius: 16rpx;
|
|
|
- max-width: 560rpx;
|
|
|
- padding: 60rpx 40rpx;
|
|
|
- margin-top: -100rpx;
|
|
|
- box-sizing: border-box;
|
|
|
- @include u-flex(column, center, flex-start);
|
|
|
- font-family: PingFang SC, PingFang SC;
|
|
|
- font-weight: 400;
|
|
|
- font-size: 34rpx;
|
|
|
- color: #222;
|
|
|
- position: relative;
|
|
|
- text-align: center;
|
|
|
-
|
|
|
- .kfqrcode {
|
|
|
- // height: 460rpx;
|
|
|
- width: 460rpx;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .kfqrcode-close {
|
|
|
- width: 64rpx;
|
|
|
- height: 64rpx;
|
|
|
- position: absolute;
|
|
|
- bottom: -100rpx;
|
|
|
- left: 50%;
|
|
|
- transform: translateX(-50%);
|
|
|
- }
|
|
|
-
|
|
|
- .tipsPopup-mask {
|
|
|
- position: relative;
|
|
|
- width: 560rpx;
|
|
|
- background-color: transparent;
|
|
|
-
|
|
|
- .red_envelope_top {
|
|
|
- width: 480rpx;
|
|
|
- height: 360rpx;
|
|
|
- margin: 0 auto;
|
|
|
- display: inherit;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .tipsPopup-btn-box {
|
|
|
- width: 456rpx;
|
|
|
- height: 104rpx;
|
|
|
- padding: 4rpx;
|
|
|
- box-sizing: border-box;
|
|
|
- background: linear-gradient(180deg, rgba(252, 209, 94, 1), rgba(254, 253, 251, 1));
|
|
|
- border-radius: 52rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .tipsPopup-btn {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- background: linear-gradient(180deg, #FF9F22 0%, #FA1E05 100%);
|
|
|
- border-radius: 52rpx 52rpx 52rpx 52rpx;
|
|
|
- font-family: PingFang SC, PingFang SC;
|
|
|
- font-weight: 500;
|
|
|
- font-size: 36rpx;
|
|
|
- color: #FFFFFF;
|
|
|
- line-height: 96rpx;
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
-
|
|
|
- .tipsPopup {
|
|
|
- width: 560rpx;
|
|
|
- padding: 12rpx;
|
|
|
- margin-top: -72rpx;
|
|
|
- box-sizing: border-box;
|
|
|
- background: linear-gradient(180deg, #FFFBEF 0%, #FFFFF5 43%, #F5EAC2 100%);
|
|
|
- border-radius: 32rpx 32rpx 32rpx 32rpx;
|
|
|
- position: relative;
|
|
|
-
|
|
|
- &-close {
|
|
|
- width: 64rpx;
|
|
|
- height: 64rpx;
|
|
|
- position: absolute;
|
|
|
- right: 0;
|
|
|
- top: -188rpx;
|
|
|
- }
|
|
|
-
|
|
|
- &-line {
|
|
|
- padding: 3rpx;
|
|
|
- box-sizing: border-box;
|
|
|
- background: linear-gradient(180deg, rgba(247, 245, 220, 1), rgba(250, 220, 157, 1));
|
|
|
- border-radius: 24rpx;
|
|
|
- }
|
|
|
-
|
|
|
- &-box {
|
|
|
- padding: 0 40rpx 40rpx 40rpx;
|
|
|
- box-sizing: border-box;
|
|
|
- background: linear-gradient(180deg, #FFFBEF 0%, #FFFFF5 43%, #F5EAC2 100%);
|
|
|
- border-radius: 24rpx;
|
|
|
- @include u-flex(column, center, flex-start);
|
|
|
- }
|
|
|
-
|
|
|
- &-head {
|
|
|
- @include u-flex(row, center, center);
|
|
|
-
|
|
|
- &-title {
|
|
|
- width: 364rpx;
|
|
|
- height: auto;
|
|
|
- margin-top: -22rpx;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- &-content {
|
|
|
- margin: 48rpx 0;
|
|
|
- font-family: PingFang SC, PingFang SC;
|
|
|
- font-weight: 500;
|
|
|
- font-size: 32rpx;
|
|
|
- color: #222222;
|
|
|
- text-align: center;
|
|
|
-
|
|
|
- &-title {
|
|
|
- margin-bottom: 26rpx;
|
|
|
- font-weight: 600;
|
|
|
- font-size: 40rpx;
|
|
|
- color: #FF5C03;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .video-controls-box {
|
|
|
- width: 100%;
|
|
|
- height: 420rpx;
|
|
|
- overflow: hidden;
|
|
|
- position: absolute;
|
|
|
- bottom: 0;
|
|
|
- left: 0;
|
|
|
- z-index: 2;
|
|
|
- background: rgba(0, 0, 0, 0.2);
|
|
|
-
|
|
|
- .video-play {
|
|
|
- height: 72rpx;
|
|
|
- width: 72rpx;
|
|
|
- position: absolute;
|
|
|
- top: 50%;
|
|
|
- left: 50%;
|
|
|
- transform: translate(-50%, -50%);
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .video-controls {
|
|
|
- width: 100%;
|
|
|
- height: 80rpx;
|
|
|
- padding: 0 28rpx;
|
|
|
- box-sizing: border-box;
|
|
|
- position: absolute;
|
|
|
- bottom: 0;
|
|
|
- left: 0;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
- background: linear-gradient(to top, #222 0%, transparent 80%);
|
|
|
-
|
|
|
- .video-icon {
|
|
|
- height: 44rpx;
|
|
|
- width: 44rpx;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .errQuesbox {
|
|
|
- width: 100%;
|
|
|
- max-height: 260rpx;
|
|
|
- overflow-y: auto;
|
|
|
- margin-top: 24rpx;
|
|
|
- font-family: PingFang SC, PingFang SC;
|
|
|
- font-weight: 500;
|
|
|
- font-size: 30rpx;
|
|
|
- color: #222222;
|
|
|
-
|
|
|
- &-item {
|
|
|
- width: 100%;
|
|
|
- height: 128rpx;
|
|
|
- line-height: 128rpx;
|
|
|
- margin-bottom: 24rpx;
|
|
|
- padding: 0 30rpx;
|
|
|
- box-sizing: border-box;
|
|
|
- overflow: hidden;
|
|
|
- background: #fff;
|
|
|
- border-radius: 16rpx 16rpx 16rpx 16rpx;
|
|
|
- position: relative;
|
|
|
-
|
|
|
- &::after {
|
|
|
- content: "题目";
|
|
|
- min-width: 64rpx;
|
|
|
- height: 36rpx;
|
|
|
- padding: 0 12rpx;
|
|
|
- line-height: 36rpx;
|
|
|
- background: #FF5C03;
|
|
|
- box-sizing: border-box;
|
|
|
- border-radius: 0rpx 0rpx 16rpx 0rpx;
|
|
|
- text-align: center;
|
|
|
- font-family: PingFang SC, PingFang SC;
|
|
|
- font-weight: 500;
|
|
|
- font-size: 20rpx;
|
|
|
- color: #fff;
|
|
|
- position: absolute;
|
|
|
- left: 0;
|
|
|
- top: 0;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .bg {
|
|
|
- background: #fff !important;
|
|
|
- }
|
|
|
- .timepopbox{
|
|
|
- width: 560rpx;
|
|
|
- padding: 32rpx;
|
|
|
- box-sizing: border-box;
|
|
|
- }
|
|
|
- .answerPopup {
|
|
|
- &-box {
|
|
|
- width: 560rpx;
|
|
|
- background: linear-gradient(180deg, #FFFAF6 0%, #FEECD8 100%);
|
|
|
- border-radius: 32rpx 32rpx 32rpx 32rpx;
|
|
|
- background-color: #fff;
|
|
|
- font-weight: 400;
|
|
|
- padding: 32rpx;
|
|
|
- box-sizing: border-box;
|
|
|
- position: relative;
|
|
|
- @include u-flex(column, center, flex-start);
|
|
|
- font-family: PingFang SC, PingFang SC;
|
|
|
- font-weight: 400;
|
|
|
-
|
|
|
- .tipimg {
|
|
|
- width: 206rpx;
|
|
|
- height: 206rpx;
|
|
|
- margin-bottom: 16rpx;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- &-title {
|
|
|
- font-weight: 600;
|
|
|
- font-size: 36rpx;
|
|
|
- color: #222222;
|
|
|
- }
|
|
|
-
|
|
|
- &-desc {
|
|
|
- margin-top: 10rpx;
|
|
|
- font-size: 28rpx;
|
|
|
- color: #757575;
|
|
|
- }
|
|
|
-
|
|
|
- &-btn {
|
|
|
- width: 464rpx;
|
|
|
- height: 84rpx;
|
|
|
- margin-top: 54rpx;
|
|
|
- margin-bottom: 16rpx;
|
|
|
- background: #FF5C03;
|
|
|
- border-radius: 42rpx;
|
|
|
- font-weight: 500;
|
|
|
- font-size: 32rpx;
|
|
|
- color: #FFFFFF;
|
|
|
- text-align: center;
|
|
|
- line-height: 84rpx;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .popupbox {
|
|
|
- width: 100%;
|
|
|
- background-color: #fff;
|
|
|
- border-radius: 16rpx 16rpx 0 0;
|
|
|
- padding: 24rpx 32rpx;
|
|
|
- position: relative;
|
|
|
-
|
|
|
- &-head {
|
|
|
- height: 60rpx;
|
|
|
- margin-bottom: 30rpx;
|
|
|
- text-align: center;
|
|
|
- overflow-y: auto;
|
|
|
- color: #414858;
|
|
|
- font-size: 32rpx;
|
|
|
- font-weight: bold;
|
|
|
- position: relative;
|
|
|
-
|
|
|
- .close-icon {
|
|
|
- position: absolute;
|
|
|
- right: 0;
|
|
|
- top: 0;
|
|
|
- height: 40rpx;
|
|
|
- width: 40rpx;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- &-content {
|
|
|
- height: 20vh;
|
|
|
- overflow-y: auto;
|
|
|
- display: flex;
|
|
|
- align-items: flex-start;
|
|
|
- flex-wrap: wrap;
|
|
|
- gap: 32rpx;
|
|
|
-
|
|
|
- .line-item {
|
|
|
- display: inline-block;
|
|
|
- min-width: 200rpx;
|
|
|
- min-height: 60rpx;
|
|
|
- padding: 0 20rpx;
|
|
|
- box-sizing: border-box;
|
|
|
- border-radius: 50rpx;
|
|
|
- overflow: hidden;
|
|
|
- background-color: #f7f7f7;
|
|
|
- text-align: center;
|
|
|
- color: #414858;
|
|
|
- font-size: 28rpx;
|
|
|
- line-height: 60rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .line-active {
|
|
|
- color: #f56c6c !important;
|
|
|
- background-color: #fef0f0 !important;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .content {
|
|
|
- padding-bottom: calc(var(--window-bottom) + 164rpx);
|
|
|
- .video-box {
|
|
|
- width: 100%;
|
|
|
- height: 420rpx;
|
|
|
- overflow: hidden;
|
|
|
- position: relative;
|
|
|
-
|
|
|
- #myVideo {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .video-poster {
|
|
|
- width: 100%;
|
|
|
- height: 420rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .miantitlebox {
|
|
|
- padding: 30rpx 0;
|
|
|
- border-bottom: 2rpx solid #F5F7FA;
|
|
|
- font-family: PingFang SC, PingFang SC;
|
|
|
- font-weight: 500;
|
|
|
- font-size: 40rpx;
|
|
|
- color: #222222;
|
|
|
- }
|
|
|
-
|
|
|
- .subtitlebox {
|
|
|
- padding: 30rpx 0;
|
|
|
- border-bottom: 2rpx solid #F5F7FA;
|
|
|
- font-family: PingFang SC, PingFang SC;
|
|
|
- font-weight: 500;
|
|
|
- font-size: 40rpx;
|
|
|
- color: #222222;
|
|
|
- }
|
|
|
-
|
|
|
- .title-content {
|
|
|
- padding: 0 32rpx;
|
|
|
- background-color: #fff;
|
|
|
- font-size: 28rpx;
|
|
|
- line-height: 1.6;
|
|
|
-
|
|
|
- .title {
|
|
|
- font-size: 36rpx;
|
|
|
- font-weight: 500;
|
|
|
- color: #414858;
|
|
|
- }
|
|
|
-
|
|
|
- .time-or-subtitle {
|
|
|
- margin-top: 12rpx;
|
|
|
- color: #666666;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .descbox {
|
|
|
- padding: 36rpx 32rpx;
|
|
|
- margin-bottom: 20rpx;
|
|
|
- background-color: #fff;
|
|
|
- font-family: PingFang SC, PingFang SC;
|
|
|
- font-weight: 400;
|
|
|
- font-size: 28rpx;
|
|
|
- color: #222222;
|
|
|
- line-height: 42rpx;
|
|
|
- word-break: break-word;
|
|
|
-
|
|
|
- &-title {
|
|
|
- margin-bottom: 24rpx;
|
|
|
- font-weight: 500;
|
|
|
- font-size: 32rpx;
|
|
|
- }
|
|
|
-
|
|
|
- &-info {
|
|
|
- margin-bottom: 24rpx;
|
|
|
- @include u-flex(row, center, space-between);
|
|
|
- font-size: 26rpx;
|
|
|
- color: #757575;
|
|
|
-
|
|
|
- &-l {
|
|
|
- flex: 1;
|
|
|
- @include u-flex(row, center, flex-start);
|
|
|
- }
|
|
|
-
|
|
|
- &-time {
|
|
|
- margin-left: 18rpx;
|
|
|
- padding-left: 18rpx;
|
|
|
- position: relative;
|
|
|
-
|
|
|
- &::after {
|
|
|
- content: "";
|
|
|
- width: 4rpx;
|
|
|
- height: 4rpx;
|
|
|
- background: #999999;
|
|
|
- border-radius: 50%;
|
|
|
- position: absolute;
|
|
|
- left: 0;
|
|
|
- top: 50%;
|
|
|
- transform: translateY(-50%);
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- &-r {
|
|
|
- background: transparent;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- &-desc {
|
|
|
- overflow: hidden;
|
|
|
- position: relative;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .expand {
|
|
|
- flex-shrink: 0;
|
|
|
- @include u-flex(row, center, flex-end);
|
|
|
- color: #FF5C03;
|
|
|
- font-weight: 400;
|
|
|
- font-size: 24rpx;
|
|
|
-
|
|
|
- image {
|
|
|
- width: 32rpx;
|
|
|
- height: 32rpx;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .expand-ab {
|
|
|
- position: absolute;
|
|
|
- top: 0;
|
|
|
- right: 0;
|
|
|
- box-shadow: -50rpx 0 20rpx 8rpx #FFFFFF;
|
|
|
- background-color: #fff;
|
|
|
- }
|
|
|
-
|
|
|
- .ques-content {
|
|
|
- background-color: #fff;
|
|
|
- padding: 40rpx 32rpx;
|
|
|
- box-sizing: border-box;
|
|
|
- font-family: PingFang SC, PingFang SC;
|
|
|
- font-weight: 400;
|
|
|
- font-size: 28rpx;
|
|
|
- color: #222222;
|
|
|
- }
|
|
|
-
|
|
|
- .ques-content-tit {
|
|
|
- font-family: PingFang SC, PingFang SC;
|
|
|
- font-weight: 600;
|
|
|
- font-size: 36rpx;
|
|
|
- color: #222222;
|
|
|
- }
|
|
|
-
|
|
|
- .ques-title {
|
|
|
- margin: 48rpx 0 34rpx 0;
|
|
|
- font-weight: 500;
|
|
|
- font-size: 32rpx;
|
|
|
- white-space: normal;
|
|
|
- }
|
|
|
-
|
|
|
- .ques-type {
|
|
|
- flex-shrink: 0;
|
|
|
- min-width: 72rpx;
|
|
|
- min-height: 40rpx;
|
|
|
- padding: 0 12rpx;
|
|
|
- margin: 0 12rpx;
|
|
|
- box-sizing: border-box;
|
|
|
- background: #FF5C03;
|
|
|
- border-radius: 8rpx 8rpx 8rpx 8rpx;
|
|
|
- line-height: 40rpx;
|
|
|
- text-align: center;
|
|
|
- font-family: PingFang SC, PingFang SC;
|
|
|
- font-weight: 400;
|
|
|
- font-size: 24rpx;
|
|
|
- color: #FFFFFF;
|
|
|
- display: inline-block;
|
|
|
- }
|
|
|
-
|
|
|
- .ques-option {
|
|
|
- min-height: 88rpx;
|
|
|
- padding: 24rpx 32rpx;
|
|
|
- box-sizing: border-box;
|
|
|
- margin-bottom: 24rpx;
|
|
|
- background: #F5F7FA;
|
|
|
- border-radius: 16rpx 16rpx 16rpx 16rpx;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
-
|
|
|
- &-active {
|
|
|
- color: #FF5C03 !important;
|
|
|
- background: #FCF0E7 !important;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .video-line {
|
|
|
- min-width: 140rpx;
|
|
|
- max-width: 200rpx;
|
|
|
- height: 60rpx;
|
|
|
- padding: 0 20rpx;
|
|
|
- box-sizing: border-box;
|
|
|
- border-radius: 50rpx 0 0 50rpx;
|
|
|
- overflow: hidden;
|
|
|
- background-color: #fff;
|
|
|
- text-align: center;
|
|
|
- color: #888;
|
|
|
- font-size: 28rpx;
|
|
|
- line-height: 60rpx;
|
|
|
- display: inline-flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- position: fixed;
|
|
|
- right: 0;
|
|
|
- z-index: 9;
|
|
|
- bottom: calc(var(--window-bottom) + 280rpx);
|
|
|
- box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, .12);
|
|
|
-
|
|
|
- image {
|
|
|
- flex-shrink: 0;
|
|
|
- height: 30rpx;
|
|
|
- width: 30rpx;
|
|
|
- margin-right: 6rpx;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .footer {
|
|
|
- border-top: 1rpx solid #ededef;
|
|
|
- background: #fff;
|
|
|
- width: 100%;
|
|
|
- position: fixed;
|
|
|
- bottom: 0;
|
|
|
- padding: 32rpx;
|
|
|
- // padding-bottom: calc(var(--window-bottom) + 14rpx);
|
|
|
- box-sizing: border-box;
|
|
|
- z-index: 0;
|
|
|
-
|
|
|
- &-btn {
|
|
|
- width: 100%;
|
|
|
- height: 98rpx;
|
|
|
- background: #FF5C03;
|
|
|
- border-radius: 49rpx 49rpx 49rpx 49rpx;
|
|
|
- line-height: 98rpx;
|
|
|
- text-align: center;
|
|
|
- font-family: PingFang SC, PingFang SC;
|
|
|
- font-weight: 600;
|
|
|
- font-size: 32rpx;
|
|
|
- color: #FFFFFF;
|
|
|
- @include u-flex(row, center, center);
|
|
|
-
|
|
|
- &-img {
|
|
|
- flex-shrink: 0;
|
|
|
- width: 144rpx;
|
|
|
- height: 144rpx;
|
|
|
- margin-right: 8rpx;
|
|
|
- margin-top: -24rpx;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- &-btn-border {
|
|
|
- position: relative;
|
|
|
-
|
|
|
- &::after {
|
|
|
- content: "";
|
|
|
- background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
|
|
|
- position: absolute;
|
|
|
- top: -2rpx;
|
|
|
- left: 0;
|
|
|
- height: 103rpx;
|
|
|
- width: 100%;
|
|
|
- z-index: -1;
|
|
|
- border-radius: 49rpx 49rpx 49rpx 49rpx;
|
|
|
- box-shadow: 0rpx 8rpx 11rpx 0rpx rgba(255, 92, 3, 0.3);
|
|
|
- overflow: hidden;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .agreement {
|
|
|
- display: inline-flex;
|
|
|
- margin-top: 16rpx;
|
|
|
- font-size: 24rpx;
|
|
|
- color: #525252;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- }
|
|
|
-
|
|
|
- .nocourse {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- align-items: center;
|
|
|
- padding-bottom: 88rpx;
|
|
|
- justify-content: center;
|
|
|
- font-family: PingFang SC, PingFang SC;
|
|
|
- font-weight: 400;
|
|
|
- font-size: 32rpx;
|
|
|
- color: #757575;
|
|
|
- line-height: 48rpx;
|
|
|
- text-align: center;
|
|
|
-
|
|
|
- image {
|
|
|
- width: 328rpx;
|
|
|
- height: auto;
|
|
|
- margin-bottom: 30rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- .logo {
|
|
|
- display: inline-block;
|
|
|
- width: 30px;
|
|
|
- height: auto;
|
|
|
- margin: 20px 0 0 10px;
|
|
|
- pointer-events: none;
|
|
|
- object-fit: cover;
|
|
|
- }
|
|
|
- .logo-full {
|
|
|
- display: inline-block;
|
|
|
- width: 40px;
|
|
|
- height: auto;
|
|
|
- margin: 50px 0 0 30px;
|
|
|
- pointer-events: none;
|
|
|
- object-fit: cover;
|
|
|
- }
|
|
|
+ </ylvideo>
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ <!-- <view class="video-box">
|
|
|
+ <image v-if="!isLogin || isAddKf!=1" class="video-poster" :src="courseInfo.imgUrl" mode="aspectFill"></image>
|
|
|
+ <video
|
|
|
+ @timeupdate="onTimeUpdate"
|
|
|
+ @progress="progressChange"
|
|
|
+ @error="videoErrorCallback"
|
|
|
+ @play="getPlay"
|
|
|
+ @pause="getPause"
|
|
|
+ @ended="getEnded"
|
|
|
+ @fullscreenchange="fullscreenchange"
|
|
|
+ :title="courseInfo.title"
|
|
|
+ style="width: 100%;height: 420rpx;"
|
|
|
+ :poster="poster"
|
|
|
+ id="video-content-box"
|
|
|
+ controls
|
|
|
+ :auto-pause-if-open-native="true"
|
|
|
+ :auto-pause-if-navigate="true"
|
|
|
+ :enable-progress-gesture="false"
|
|
|
+ :show-progress="true"
|
|
|
+ :picture-in-picture-mode="[]"
|
|
|
+ :show-background-playback-button="false"
|
|
|
+ :src="videoUrl"> -->
|
|
|
+ <!-- 废弃 <cover-image v-if="courseLogo" :class="isFull?'logo-full':'logo'" :src="courseLogo" mode="widthFix"></cover-image> -->
|
|
|
+ <!-- </video>
|
|
|
+ </view> -->
|
|
|
+
|
|
|
+ <view class="justify-between align-center fs24 base-color-9" >
|
|
|
+ <view class="justify-start align-center" v-if="userInfo.userId">
|
|
|
+ <view>{{nameuser?nameuser:'暂未授权昵称'}}#</view>
|
|
|
+ <view>{{userInfo.userId}}</view>
|
|
|
+ </view>
|
|
|
+ <view class="justify-start align-center" @click="tofeek">
|
|
|
+ <image src="/static/images/feedback.png" class="w40 h40"></image>
|
|
|
+ <view class="fs28 base-color-9 m10">投诉</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="title-content" id="title-content">
|
|
|
+ <!-- 答题时展示小节课程名,其他展示课程名 -->
|
|
|
+ <!-- 小节课程名 -->
|
|
|
+ <view class="subtitlebox " v-if="isLogin&&isAddKf==1">
|
|
|
+ {{courseInfo.title}}
|
|
|
+ </view>
|
|
|
+ <!-- 课程名字 -->
|
|
|
+ <view class="miantitlebox" v-else>
|
|
|
+ {{courseInfo.courseName}}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <scroll-view class="scroll-view" :style="{height: height}" :scroll-top="scrollTop" scroll-y="true">
|
|
|
+ <!-- 介绍 -->
|
|
|
+ <view class="descbox">
|
|
|
+ <template v-if="!isLogin||isAddKf!=1">
|
|
|
+ <view class="descbox-title">{{courseInfo.title}}</view>
|
|
|
+ <view class="descbox-info">
|
|
|
+ <!-- <view class="descbox-info-l">
|
|
|
+ <view>{{courseInfo.views}}次播放</view>
|
|
|
+ <view class="descbox-info-time">总时长:{{courseInfo.totalDuration}}</view>
|
|
|
+ </view> -->
|
|
|
+ <view class="descbox-info-r expand" v-if="textHeight > 21">
|
|
|
+ <text @click="handleExpand">{{isExpand ? '收起简介' : '展开简介'}}</text>
|
|
|
+ <image :src="imgPath+'/app/image/course_arrow_up_icon.png'" v-show="isExpand"></image>
|
|
|
+ <image :src="imgPath+'/app/image/course_arrow_down_icon.png'" v-show="!isExpand"></image>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </template>
|
|
|
+ <view class="descbox-desc" id="descbox-desc" :style="{height: isExpand ? 'auto': '42rpx'}">
|
|
|
+ <text>{{courseInfo.description==null?'暂无简介':courseInfo.description}}</text>
|
|
|
+ <view :class="isExpand ? 'expand': 'expand expand-ab'" v-if="isLogin&&isAddKf==1&&textHeight > 21">
|
|
|
+ <text @click="handleExpand">{{isExpand ? '收起简介' : '展开简介'}}</text>
|
|
|
+ <image :src="imgPath+'/app/image/course_arrow_up_icon.png'" v-show="isExpand"></image>
|
|
|
+ <image :src="imgPath+'/app/image/course_arrow_down_icon.png'" v-show="!isExpand"></image>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 无效或者已过期 -->
|
|
|
+ <view class="nocourse" v-if="msg">
|
|
|
+ <image :src="imgPath+'/app/image/course_expiration_img.png'" mode="widthFix"></image>
|
|
|
+ <view>{{msg}}</view>
|
|
|
+ </view>
|
|
|
+ <!-- 问题 -->
|
|
|
+ <view class="ques-content" v-if="isLogin&&isAddKf==1">
|
|
|
+ <view class="ques-content-tit" v-if="isLogin &&!isquestion" >问答题</view>
|
|
|
+ <view v-for="(item,index) in quesList" :key="index">
|
|
|
+ <view class="ques-title">
|
|
|
+ <text >{{index + 1}}.</text>
|
|
|
+ <view class="ques-type" v-show="item.type == 1 || item.type == 2">
|
|
|
+ {{item.type == 1 ? '单选' : item.type == 2 ? '多选' : ''}}
|
|
|
+ </view>
|
|
|
+ <text class="fs40">{{item.title}}</text>
|
|
|
+ </view>
|
|
|
+ <view
|
|
|
+ :class="isAnswer(item,option.name) ?'ques-option ques-option-active':'ques-option'"
|
|
|
+ v-for="(option,idx) in item.questionOption"
|
|
|
+ :key="idx"
|
|
|
+ @click="handleAnswer(item,option)">
|
|
|
+ <view class="fs40">
|
|
|
+ {{numberToLetter(idx)}}.
|
|
|
+ </view>
|
|
|
+ <view class="fs40">{{option.name}}</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </scroll-view>
|
|
|
+ <!-- 线路 -->
|
|
|
+ <!-- <view class="video-line" @click="openPop" v-if="isLogin&&isAddKf==1">
|
|
|
+ <image :src="imgPath+'/app/image/changePlayer-icon.png'"></image>
|
|
|
+ <text>线路{{lineIndex + 1 | numberToChinese}}</text>
|
|
|
+ </view> -->
|
|
|
+ <!-- 线路弹窗 -->
|
|
|
+ <uni-popup ref="popup" type="bottom" class="full-width-popup">
|
|
|
+ <view class="popupbox">
|
|
|
+ <view class="popupbox-head">
|
|
|
+ <text>线路选择</text>
|
|
|
+ <image class="close-icon" :src="imgPath+'/app/image/tc_close_icon.png'" mode="aspectFill" @click="close">
|
|
|
+ </image>
|
|
|
+ </view>
|
|
|
+ <view class="popupbox-content">
|
|
|
+ <view :class="lineIndex == index ? 'line-item line-active': 'line-item'"
|
|
|
+ v-for="(it,index) in lineList" :key="index" @click="handleLine(index)">
|
|
|
+ 线路{{index + 1 | numberToChinese}}</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </uni-popup>
|
|
|
+ <!-- 温馨提示弹窗 -->
|
|
|
+ <u-popup :show="tipsPopup" mode="center" :closeOnClickOverlay='true' @close='tipsPopup=!tipsPopup'
|
|
|
+ :safeAreaInsetBottom='false' round='12'>
|
|
|
+ <view class="tipsPopup-mask">
|
|
|
+ <image class="red_envelope_top" :src="imgPath+'/app/image/red_envelope_img.png'" mode="aspectFill"></image>
|
|
|
+ <view class="tipsPopup">
|
|
|
+ <image class="tipsPopup-close" :src="imgPath+'/app/image/course_close_white_icon.png'" mode="aspectFill"
|
|
|
+ @click="closeTipsPop"></image>
|
|
|
+ <view class="tipsPopup-line">
|
|
|
+ <view class="tipsPopup-box">
|
|
|
+ <view class="tipsPopup-head">
|
|
|
+ <image class="tipsPopup-head-title" :src="imgPath+'/app/image/tips_title_img.png'"
|
|
|
+ mode="widthFix"></image>
|
|
|
+ </view>
|
|
|
+ <view class="tipsPopup-content">
|
|
|
+ <view class="tipsPopup-content-title">亲爱的用户,</view>
|
|
|
+ <view>您已经观看课程{{timepath}}的时间了,请注意休息并保持专注。</view>
|
|
|
+ </view>
|
|
|
+ <view class="tipsPopup-btn-box">
|
|
|
+ <view class="tipsPopup-btn" @click="closeTipsPop">继续观看领奖励</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </u-popup>
|
|
|
+ <!-- 答题弹窗 -->
|
|
|
+ <u-popup :show="answerPopup" mode="center" @close="closepop()" @open="open" closeOnClickOverlay
|
|
|
+ :safeAreaInsetBottom='false' round='12'>
|
|
|
+ <view :class="errTitle == '恭喜你,回答正确' ? 'answerPopup-box bg':'answerPopup-box'">
|
|
|
+ <!-- 正确 -->
|
|
|
+ <image class="tipimg" v-if="errTitle == '恭喜你,回答正确'" :src="imgPath+'/app/image/course_answer_img.png'"
|
|
|
+ mode="aspectFill"></image>
|
|
|
+ <!-- 错误 -->
|
|
|
+ <image class="tipimg" v-else :src="imgPath+'/app/image/course_answer_incorrectly_img.png'" mode="aspectFill">
|
|
|
+ </image>
|
|
|
+ <view class="answerPopup-title">{{errTitle}}</view>
|
|
|
+ <view class="answerPopup-desc" v-html="errDesc"></view>
|
|
|
+ <!-- 选择奖励 -->
|
|
|
+ <!-- 错误题目 -->
|
|
|
+ <view class="errQuesbox" v-if="errQues&&errQues.length>0">
|
|
|
+ <view class="errQuesbox-item textOne" v-for="(it,index) in errQues" :key="index">{{it.title}}</view>
|
|
|
+ </view>
|
|
|
+ <view class="answerPopup-btn" v-if="errTitle == '恭喜你,回答正确'" @click="closeAnswerPopup">确认</view>
|
|
|
+ <view class="tipsPopup-btn-box" v-else
|
|
|
+ :style="{marginTop: errQues&&errQues.length>0 ? '40rpx':'54rpx'}">
|
|
|
+ <view class="tipsPopup-btn" @click="closeAnswerPopup">{{remain > 0 ? '重新答题': '确认'}}</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </u-popup>
|
|
|
+ <!-- 客服二维码弹窗 -->
|
|
|
+ <u-popup :show="kfPopup" mode="center" :mask-click="false" round='12' @close="kefpop">
|
|
|
+ <view class="kfqrcode-box">
|
|
|
+ <view class="justify-start align-center fs24 base-color-9">
|
|
|
+ <view>{{nameuser}}#</view>
|
|
|
+ <view>{{userInfo.userId}}</view>
|
|
|
+ </view>
|
|
|
+ <view>请添加客服</view>
|
|
|
+ <image class="kfqrcode" :src="qrcode" show-menu-by-longpress="true" mode="aspectFit"></image>
|
|
|
+ <!-- <view v-show="qrcodeMsg" style="margin-top: 30rpx;" v-html="qrcodeMsg"></view> -->
|
|
|
+ <!-- <image class="kfqrcode-close" :src="imgPath+'/app/image/course_close_white_icon.png'" mode="aspectFill"
|
|
|
+ @click="closeKFPop"></image> -->
|
|
|
+ </view>
|
|
|
+ </u-popup>
|
|
|
+ <u-popup :show="timepop" mode="center" round='12'>
|
|
|
+ <view class="timepopbox center column">
|
|
|
+ <view class="fs40 bold ">不在看课时间范围内</view>
|
|
|
+ <view class="mtb20">看课时间</view>
|
|
|
+ <view >{{videocont.startDateTime}}</view>
|
|
|
+ <view>至</view>
|
|
|
+ <view >{{videocont.endDateTime}}</view>
|
|
|
+ <view class="base-bg-orange colorf p20 radius50 mt20"
|
|
|
+ @click="getH5CourseVideoDetails">刷新时间</view>
|
|
|
+ </view>
|
|
|
+ </u-popup>
|
|
|
+ <u-popup :show="userlogo" mode="bottom" round='12'>
|
|
|
+ <view class="userlogo column">
|
|
|
+ <view class="mtb30 justify-start align-center ml20">
|
|
|
+ <u-avatar :src="imgPath+'/app/image/logo.png'" size="50"></u-avatar>
|
|
|
+ <view class="bold mlr20">{{imgname}}</view>
|
|
|
+ <view>申请</view>
|
|
|
+ </view>
|
|
|
+ <view class="bold fs36 ml20">授权你的昵称头像信息</view>
|
|
|
+ <view class="mtb20 justify-between align-center plr20">
|
|
|
+ <view class="justify-start align-center">
|
|
|
+ <view class="boxweixin" :class="userinfos.nickname==''?'boxnosel':'boxsel'">
|
|
|
+ <view v-if="userinfos.nickname">√</view>
|
|
|
+ </view>
|
|
|
+ <view class="ml20">
|
|
|
+ <view class="base-color-3 bold">第一步</view>
|
|
|
+ <view class="fs32 base-color-9">请点击授权微信昵称</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="button-container">
|
|
|
+ <input
|
|
|
+ type="nickname"
|
|
|
+ class="hidden-input"
|
|
|
+ @blur="onNickNameInput"
|
|
|
+ @input="onNickNameInput"
|
|
|
+ />
|
|
|
+ <button class="custom-button" :class="nameuser==''?'subname':'subavt'">{{nameuser?"已授权":'允许授权'}}</button>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="mtb20 justify-between align-center plr20 mt40">
|
|
|
+ <view class="justify-start align-center">
|
|
|
+ <view class="boxweixin" :class="userinfos.nickname==''?'boxnosel':'boxsel'">
|
|
|
+ <view v-if="userinfos.avatar">√</view>
|
|
|
+ </view>
|
|
|
+ <view class="ml20">
|
|
|
+ <view class="base-color-3 bold">第二步</view>
|
|
|
+ <view class="fs32 base-color-9">请点击授权微信头像</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="button-container">
|
|
|
+ <button open-type="chooseAvatar" @chooseavatar="onChooseAvatar" class="hidden-input"
|
|
|
+ v-if="nameuser">
|
|
|
+ 允许授权
|
|
|
+ </button>
|
|
|
+ <button class="custom-button sub" @click="shouquan" v-if="nameuser==''">允许授权</button>
|
|
|
+ <button class="custom-button " :class="avataruser==''?'subname':'subavt'"
|
|
|
+ v-else>{{avataruser?"已授权":'允许授权'}}</button>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="submitname" @click="confimrname" :class="nameuser&&avataruser?'subact':'sub'">确定</view>
|
|
|
+ </view>
|
|
|
+ </u-popup>
|
|
|
+ <!-- <view class="footer-tips">重庆云联融智提供技术支持</view> -->
|
|
|
+ <!-- footer -->
|
|
|
+ <view class="footer" v-if="videoId">
|
|
|
+ <view class="btns" >
|
|
|
+ <!-- <button
|
|
|
+ class="author-btn"
|
|
|
+ open-type="getPhoneNumber"
|
|
|
+ @getphonenumber="phoneLogin" v-if="!isquestion&&authType==1">{{isLogin&&isAddKf==1 ? '提交答案领取奖励' : '立即学习'}}</button>
|
|
|
+ <button
|
|
|
+ class="author-btn"
|
|
|
+ open-type="getUserInfo" :disabled="userdisabled"
|
|
|
+ @getuserinfo="userInfologin" v-if="authType==0&&!isquestion">{{isLogin&&isAddKf==1 ? '提交答案领取奖励' : '立即学习'}}</button> -->
|
|
|
+ <button class="author-btn"
|
|
|
+ @click="submit">{{isLogin&&isAddKf==1 ?'提交答案领取奖励' : '立即学习'}}</button>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view>
|
|
|
+ <u-modal :show="showfalse" title="提示" :content='contentmsg' @confirm='showfalse=false'></u-modal>
|
|
|
+ </view>
|
|
|
+ <u-loading-page :loading="viewload" iconSize="32" loadingColor="#3c9cff" fontSize="24"
|
|
|
+ :loading-text="loadingtext"></u-loading-page>
|
|
|
+ <ykscreenRecord></ykscreenRecord>
|
|
|
+ <courseExpiration v-if="showExpiration" :code="resCode" :msg="resMsg" :qrcode="qrcode"
|
|
|
+ :userId="user && userInfo.userId ? userInfo.userId : ''"></courseExpiration>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import { generateRandomString} from "@/utils/common.js"
|
|
|
+ // import { loginByMiniApp,handleFsUserWx} from "@/api/course.js"
|
|
|
+ import dayjs from 'dayjs';
|
|
|
+ import { mapGetters } from 'vuex';
|
|
|
+ import {
|
|
|
+ getErrMsg,
|
|
|
+ getH5CourseByVideoId,
|
|
|
+ getH5CourseVideoDetails,
|
|
|
+ courseAnswer,
|
|
|
+ getFinishCourseVideo,
|
|
|
+ getIsAddKf,
|
|
|
+ getInternetTraffic,
|
|
|
+ getIntegralByH5Video,
|
|
|
+ sendReward,
|
|
|
+ getRealLink,
|
|
|
+ handleFsUserWx,
|
|
|
+ loginByMiniApp
|
|
|
+ } from "@/api/courseLook.js"
|
|
|
+ // import { loginByMp,checkUserInfo,editUser} from '@/api/user'
|
|
|
+ import ykscreenRecord from './yk-screenRecord/yk-screenRecord.vue'
|
|
|
+ import courseExpiration from './components/courseExpiration.vue'
|
|
|
+ export default {
|
|
|
+ components: {
|
|
|
+ ykscreenRecord,
|
|
|
+ courseExpiration
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ viewload:true,
|
|
|
+ loadingtext:"数据加载中...",
|
|
|
+ baseUrl:uni.getStorageSync('requestPath'),
|
|
|
+ // 1 红包 2 积分
|
|
|
+ rewardType: [{
|
|
|
+ name: '红包奖励',
|
|
|
+ value: 1
|
|
|
+ }, {
|
|
|
+ name: '积分奖励',
|
|
|
+ value: 2
|
|
|
+ }],
|
|
|
+ currentReward: 1,
|
|
|
+ player: null,
|
|
|
+ loading: true,
|
|
|
+ progress: 0,
|
|
|
+ code: null,
|
|
|
+ statusBarHeight: uni.getSystemInfoSync().statusBarHeight,
|
|
|
+ scrollTop: 0,
|
|
|
+ height: '0px',
|
|
|
+ isLogin: false,
|
|
|
+ videoUrl: "",
|
|
|
+ videoId: "",
|
|
|
+ //现在的时长
|
|
|
+ playTime: 0,
|
|
|
+ //总时长
|
|
|
+ duration: 0,
|
|
|
+ playDuration: 0,
|
|
|
+ // 用于续播
|
|
|
+ playDurationSeek: 0,
|
|
|
+ // 温馨提醒时间节点,
|
|
|
+ tipsTime: 0,
|
|
|
+ tipsOpen: false,
|
|
|
+ config: {},
|
|
|
+ courseInfo: {},
|
|
|
+ quesList: [],
|
|
|
+ lineList: [],
|
|
|
+ // 错题
|
|
|
+ errQues: [],
|
|
|
+ // 答题机会
|
|
|
+ remain: 0,
|
|
|
+ errTitle: "",
|
|
|
+ errDesc: "",
|
|
|
+ showPlay: true,
|
|
|
+ showControls: false,
|
|
|
+ playStatus: "",
|
|
|
+ isFull: false,
|
|
|
+ isAddKf: 0,
|
|
|
+ lineIndex: 0,
|
|
|
+ // 是否展开
|
|
|
+ isExpand: true,
|
|
|
+ textHeight: 0, //文本高度
|
|
|
+ qwUserId: "",
|
|
|
+ qrcode: "",
|
|
|
+ corpId: "",
|
|
|
+ periodId:"",//营期id
|
|
|
+ companyUserId:"",//销售id
|
|
|
+ companyId:"",//公司id
|
|
|
+ courseId:"",//课程id
|
|
|
+ qrcodeMsg: "",
|
|
|
+ urlOption: {},
|
|
|
+ bufferRate: 0, // 缓冲时间
|
|
|
+ uuId: "",
|
|
|
+ isEnded: false,
|
|
|
+ // 是否允许拖动进度条
|
|
|
+ videolinkType: 0,
|
|
|
+ ip: null,
|
|
|
+ checked: true,
|
|
|
+ isFinish: 0, // 是否完课
|
|
|
+ interval: null,
|
|
|
+ intervalIntegral: null, // 积分定时
|
|
|
+ options: {
|
|
|
+ sources: [{
|
|
|
+ src: ""
|
|
|
+ }],
|
|
|
+ poster: "",
|
|
|
+ live: false /* 是否直播 */ ,
|
|
|
+ controls: true,
|
|
|
+ autoplay: false,
|
|
|
+ licenseUrl: 'https://license.vod2.myqcloud.com/license/v2/1323137866_1/v_cube.license', // license 地址,参考准备工作部分,在视立方控制台申请 license 后可获得 licenseUrl,
|
|
|
+ LicenseKey: 'bcc5bd9a14b798b48c52ff005a21d926',
|
|
|
+ controlBar: {
|
|
|
+ volumePanel: false,
|
|
|
+ playbackRateMenuButton: false,
|
|
|
+ QualitySwitcherMenuButton: false,
|
|
|
+ // progressControl: false
|
|
|
+ },
|
|
|
+ plugins: {
|
|
|
+ // ProgressMarker: false,
|
|
|
+ ContextMenu: {
|
|
|
+ statistic: false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ // 错误请求次数
|
|
|
+ errorCount: 0,
|
|
|
+ answerPopup: false,
|
|
|
+ sortLink:"",
|
|
|
+ // 课程是否过期
|
|
|
+ isExpire: false,
|
|
|
+ menuButtonLeft: 281,
|
|
|
+ menuButtonH: 45,
|
|
|
+ timer: null,
|
|
|
+ flag: false,
|
|
|
+ msg:'',
|
|
|
+ poster:'',
|
|
|
+ userInfo:{},
|
|
|
+ timeid:'',
|
|
|
+ videocont:{},
|
|
|
+ timepop:false,
|
|
|
+ appToken:'',
|
|
|
+ kfPopup:false,
|
|
|
+ iskftype:0,
|
|
|
+ iskftypemsg:'',
|
|
|
+ courseLogo: '',
|
|
|
+ isquestion:false,
|
|
|
+ tipsPopup:false,
|
|
|
+ timepath:'3分之1',
|
|
|
+ tipsTime2:0,
|
|
|
+ userlogo:false,
|
|
|
+ projectId:'',
|
|
|
+ userinfos:{
|
|
|
+ nickname:"",
|
|
|
+ avatar:""
|
|
|
+ },
|
|
|
+ headImg:'',
|
|
|
+ authType:0,//0微信登录 1手机号登录
|
|
|
+ userdisabled:false,
|
|
|
+ showfalse:false,
|
|
|
+ contentmsg:null,
|
|
|
+ resMsg:'',
|
|
|
+ resCode:"",
|
|
|
+ showExpiration:false,
|
|
|
+ seekDuration:0,
|
|
|
+ playerCmd: '' // 播放器控制指令
|
|
|
+ }
|
|
|
+ },
|
|
|
+ filters: {
|
|
|
+ numberToChinese(number) {
|
|
|
+ if (number) {
|
|
|
+ const chineseNumber = ['一', '二', '三', '四', '五', '六', '七', '八', '九'];
|
|
|
+ return chineseNumber[number - 1];
|
|
|
+ } else {
|
|
|
+ return ''
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ isAnswer() {
|
|
|
+ return (item, name) => {
|
|
|
+ if (item.type == 1) {
|
|
|
+ return item.answer == name
|
|
|
+ } else if (item.type == 2) {
|
|
|
+ const array = item.answer.split(',')
|
|
|
+ return array.some(i => i == name)
|
|
|
+ } else {
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ imgPath() {
|
|
|
+ return this.$store.state.imgpath
|
|
|
+ },
|
|
|
+ imgname() {
|
|
|
+ return this.$store.state.logoname
|
|
|
+ },
|
|
|
+ appid() {
|
|
|
+ return this.$store.state.appid
|
|
|
+ },
|
|
|
+ nameuser() {
|
|
|
+ return this.userinfos.nickname
|
|
|
+ },
|
|
|
+ avataruser() {
|
|
|
+ return this.userinfos.avatar
|
|
|
+ },
|
|
|
+ ...mapGetters(['coureLogin']),
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ coureLogin: {
|
|
|
+ immediate: true, // 页面一进入就检查一次
|
|
|
+ handler(val) {
|
|
|
+ if (val == 2&&this.isLogin) {
|
|
|
+ console.log("看课AppToken失效,请重新登录")
|
|
|
+ this.isLogin = false
|
|
|
+ this.isAddKf = 0
|
|
|
+ this.goLogin()
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onLoad(option) {
|
|
|
+ uni.$on('usercode',(data)=>{
|
|
|
+ console.log('huoqu ',data)
|
|
|
+ this.goLogin(data)
|
|
|
+ })
|
|
|
+ uni.$on('vipMsg',(data)=>{
|
|
|
+ console.log(4444,data)
|
|
|
+ this.contentmsg=data
|
|
|
+ this.showfalse=true
|
|
|
+ uni.showToast({
|
|
|
+ icon:'none',
|
|
|
+ title: data,
|
|
|
+ duration:5000
|
|
|
+ });
|
|
|
+ })
|
|
|
+ this.videoContext = uni.createVideoContext('video-content-box', this)
|
|
|
+ this.code = option.code
|
|
|
+ if(uni.getStorageSync('userInfo')&&JSON.stringify(uni.getStorageSync('userInfo'))!='{}') {
|
|
|
+ this.userInfo = uni.getStorageSync('userInfo')
|
|
|
+ } else {
|
|
|
+ this.userInfo = {}
|
|
|
+ }
|
|
|
+ this.appToken=uni.getStorageSync('companyUserInfo')
|
|
|
+ // decodeURIComponent()
|
|
|
+ if(!option.course){
|
|
|
+ const keys = decodeURIComponent(decodeURIComponent(Object.keys(option)[0]));
|
|
|
+ console.log("keys",keys)
|
|
|
+ this.urlOption=JSON.parse(keys.split('course=')[1])
|
|
|
+ }else{
|
|
|
+ this.urlOption = option.course ? JSON.parse(option.course) : {}
|
|
|
+ }
|
|
|
+ uni.setStorageSync('H5course',this.urlOption)
|
|
|
+ this.videoId = this.urlOption.videoId
|
|
|
+ this.courseId = this.urlOption.courseId
|
|
|
+ this.periodId = this.urlOption.periodId
|
|
|
+ this.companyId = this.urlOption.companyId
|
|
|
+ this.companyUserId = this.urlOption.companyUserId
|
|
|
+ this.projectId= this.urlOption.projectId
|
|
|
+ this.timeid=this.urlOption.id
|
|
|
+ console.log(this.urlOption)
|
|
|
+ console.log(decodeURIComponent(option.course))
|
|
|
+ // this.sortLink = this.urlOption.link || ''
|
|
|
+ this.getMenuButton()
|
|
|
+ // #ifdef MP-WEIXIN
|
|
|
+ // if(this.$store.state.logoname!=='乐氏本源'&&!uni.getStorageSync('userInfos')){
|
|
|
+ // this.userlogo=true
|
|
|
+ // }
|
|
|
+ console.log(uni.getStorageSync('userInfos'))
|
|
|
+ // if(!uni.getStorageSync('userInfos')&&this.$store.state.logoname=='乐氏本源'){
|
|
|
+ // uni.navigateTo({
|
|
|
+ // url:'/pages_course/webview'
|
|
|
+ // })
|
|
|
+ // return
|
|
|
+ // }
|
|
|
+ // #endif
|
|
|
+ },
|
|
|
+ onShow() {
|
|
|
+ this.userinfos=uni.getStorageSync('userinfos')
|
|
|
+ this.userInfo=uni.getStorageSync('userInfo')
|
|
|
+ this.tipsOpen = false
|
|
|
+ this.isExpand = true
|
|
|
+ this.uuId = generateRandomString(16)
|
|
|
+ if (this.videoId) {
|
|
|
+ this.getH5CourseByVideo()
|
|
|
+ }
|
|
|
+ const AppToken=uni.getStorageSync('TOKEN_WEXIN')
|
|
|
+ if(AppToken){
|
|
|
+ // this.isLogin=true
|
|
|
+ if(this.isAddKf == 1&&this.userInfo.userId){
|
|
|
+ this.getH5CourseVideoDetails()
|
|
|
+ console.log(1)
|
|
|
+ } else{
|
|
|
+ // this.checkUserInfoA()
|
|
|
+ this.getIsAddKf()
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // if(this.sortLink){
|
|
|
+ // this.getLink()
|
|
|
+ // } else {
|
|
|
+ // uni.showToast({
|
|
|
+ // title: 'sortLink is not found',
|
|
|
+ // icon: 'none'
|
|
|
+ // });
|
|
|
+ // }
|
|
|
+ },
|
|
|
+
|
|
|
+ mounted() {
|
|
|
+ // this.getIP()
|
|
|
+ this.getHeight()
|
|
|
+ },
|
|
|
+ onHide() {
|
|
|
+ // this.player = uni.createVideoContext('video-content-box');
|
|
|
+ if (this.player) {
|
|
|
+ this.player.pause();
|
|
|
+ }
|
|
|
+ //播放器插件暂停
|
|
|
+ this.playerCmd = 'pause';
|
|
|
+
|
|
|
+ // if (this.interval != null) {
|
|
|
+ // clearInterval(this.interval)
|
|
|
+ // this.interval = null
|
|
|
+ // }
|
|
|
+ // uni.$off('usercode')
|
|
|
+ },
|
|
|
+ onUnload() {
|
|
|
+ if (this.interval != null) {
|
|
|
+ clearInterval(this.interval)
|
|
|
+ this.interval = null
|
|
|
+ }
|
|
|
+ this.clearIntegral()
|
|
|
+ // uni.$off('usercode')
|
|
|
+ },
|
|
|
+ beforeDestroy() {
|
|
|
+ this.player = uni.createVideoContext('video-content-box');
|
|
|
+ if (this.player) {
|
|
|
+ this.player.stop()
|
|
|
+ this.player = null
|
|
|
+ }
|
|
|
+ if (this.interval != null) {
|
|
|
+ clearInterval(this.interval)
|
|
|
+ this.interval = null
|
|
|
+ }
|
|
|
+ this.clearIntegral()
|
|
|
+ uni.$off('usercode')
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ handleFsUserWxs(){
|
|
|
+ uni.login({
|
|
|
+ provider: "weixin",
|
|
|
+ success: async loginRes => {
|
|
|
+ console.log(loginRes)
|
|
|
+ let code = loginRes.code // 获取开发code
|
|
|
+ handleFsUserWx({
|
|
|
+ code: code,
|
|
|
+ appId:this.appid,
|
|
|
+ userId:this.userInfo.userId
|
|
|
+ })
|
|
|
+ .then( res => {
|
|
|
+ if(res.code==200){
|
|
|
+ }else if(res.code==406){
|
|
|
+ uni.hideLoading();
|
|
|
+ uni.showToast({
|
|
|
+ icon:'none',
|
|
|
+ title: '该用户已成为其他销售会员',
|
|
|
+ });
|
|
|
+ }else{
|
|
|
+ uni.hideLoading();
|
|
|
+ uni.showToast({
|
|
|
+ icon:'none',
|
|
|
+ title: res.msg,
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ })
|
|
|
+ },
|
|
|
+ })
|
|
|
+ },
|
|
|
+ async goLogin(data) {
|
|
|
+ // console.log('现在jjj',data)
|
|
|
+ if(data){
|
|
|
+ // console.log('huoqu1222',data)
|
|
|
+ uni.showLoading({
|
|
|
+ title: '加载中'
|
|
|
+ })
|
|
|
+ uni.login({
|
|
|
+ provider: "weixin",
|
|
|
+ success: async loginRes => {
|
|
|
+ // console.log(loginRes)
|
|
|
+ let code = loginRes.code // 获取开发code
|
|
|
+ handleFsUserWx({
|
|
|
+ code: code,
|
|
|
+ appId:this.appid,
|
|
|
+ userId:data.userId
|
|
|
+ })
|
|
|
+ .then( res => {
|
|
|
+ if(res.code==200){
|
|
|
+ // console.log(res)
|
|
|
+ uni.hideLoading();
|
|
|
+ uni.showToast({
|
|
|
+ icon:'none',
|
|
|
+ title: "登录成功",
|
|
|
+ });
|
|
|
+ this.userinfos=uni.getStorageSync('userinfos')
|
|
|
+ uni.getStorageSync('TOKEN_WEXIN');
|
|
|
+ this.userInfo=uni.getStorageSync('userInfo');
|
|
|
+ this.isLogin = true
|
|
|
+ setTimeout(()=>{
|
|
|
+ this.getIsAddKf()
|
|
|
+ },200)
|
|
|
+ }else if(res.code==406){
|
|
|
+ uni.hideLoading();
|
|
|
+ uni.showToast({
|
|
|
+ icon:'none',
|
|
|
+ title: '该用户已成为其他销售会员',
|
|
|
+ });
|
|
|
+ }else{
|
|
|
+ uni.hideLoading();
|
|
|
+ uni.showToast({
|
|
|
+ icon:'none',
|
|
|
+ title: res.msg,
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ })
|
|
|
+ },
|
|
|
+ })
|
|
|
+ }else{
|
|
|
+ await this.$store.dispatch('getWebviewUrl');
|
|
|
+ uni.navigateTo({
|
|
|
+ url:'/pages_course/webview?H5course='+uni.getStorageSync('H5course')
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ },
|
|
|
+ tofeek(){
|
|
|
+ if(uni.getStorageSync('TOKEN_WEXIN')){
|
|
|
+ uni.navigateTo({
|
|
|
+ url:"/pages_course/feedback"
|
|
|
+ })
|
|
|
+ }else{
|
|
|
+ uni.showToast({
|
|
|
+ icon:'none',
|
|
|
+ title:"请先点击立即学习,登录小程序!",
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ },
|
|
|
+ shouquan(){
|
|
|
+ if(this.userinfos.nickname==''){
|
|
|
+ uni.showToast({
|
|
|
+ icon:'none',
|
|
|
+ title: "请先授权微信昵称",
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ confimrname(){
|
|
|
+ if(this.userinfos.nickname==''){
|
|
|
+ uni.showToast({
|
|
|
+ icon:'none',
|
|
|
+ title: "请授权微信昵称",
|
|
|
+ });
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if(this.userinfos.avatar==''){
|
|
|
+ uni.showToast({
|
|
|
+ icon:'none',
|
|
|
+ title: "请授权微信头像",
|
|
|
+ });
|
|
|
+ return
|
|
|
+ }
|
|
|
+ uni.setStorageSync('userinfos',this.userinfos)
|
|
|
+ this.editUserA()
|
|
|
+ this.userlogo=false
|
|
|
+ },
|
|
|
+ onChooseAvatar(e){
|
|
|
+ this.userinfos.avatar=e.detail.avatarUrl
|
|
|
+ uni.uploadFile({
|
|
|
+ url: uni.getStorageSync('requestPath')+'/app/common/uploadOSS', //仅为示例,非真实的接口地址
|
|
|
+ filePath: e.detail.avatarUrl,
|
|
|
+ name: 'file',
|
|
|
+ formData: {
|
|
|
+ 'user': 'test' // 上传附带参数
|
|
|
+ },
|
|
|
+ success: (uploadFileRes) => {
|
|
|
+ console.log(uploadFileRes)
|
|
|
+ // 根据接口具体返回格式 赋值具体对应url
|
|
|
+ var data=JSON.parse(uploadFileRes.data)
|
|
|
+ this.headImg=uni.getStorageSync('requestPath')+data.fileName
|
|
|
+ this.userinfos.avatar=data.url
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ onNickNameInput(e){
|
|
|
+ console.log(e)
|
|
|
+ this.userinfos.nickname=e.detail.value
|
|
|
+ },
|
|
|
+ kefpop(){
|
|
|
+ if(this.appToken){
|
|
|
+ this.kfPopup==false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ tosales(){
|
|
|
+ uni.switchTab({
|
|
|
+ url:"/pages/index/index"
|
|
|
+ })
|
|
|
+ },
|
|
|
+ closepop(){
|
|
|
+ this.answerPopup=false
|
|
|
+ },
|
|
|
+ open(){
|
|
|
+
|
|
|
+ },
|
|
|
+ getMenuButton(){
|
|
|
+ const menuButtonInfo = uni.getMenuButtonBoundingClientRect()
|
|
|
+ this.menuButtonLeft = menuButtonInfo.left
|
|
|
+ this.menuButtonH = menuButtonInfo.height
|
|
|
+ },
|
|
|
+ //播放时间更新事件方法
|
|
|
+ onTimeUpdate(e){
|
|
|
+ let currentTime = Math.round(e.detail.currentTime)
|
|
|
+ if (this.playDurationSeek > 0) {
|
|
|
+ this.playTime = this.playDurationSeek
|
|
|
+ this.throttle(() => this.changeTime(this), 1000, false)
|
|
|
+ } else {
|
|
|
+ // console.log(this.isFinish)
|
|
|
+ if (this.videolinkType != 1 && (currentTime - this.playTime > 3 || currentTime - this.playTime < -3)&&this.isFinish!=1) {
|
|
|
+ uni.showToast({
|
|
|
+ title: '不能快进哦',
|
|
|
+ icon: 'none',
|
|
|
+ });
|
|
|
+ currentTime = this.playTime
|
|
|
+ this.player.seek(this.playTime);
|
|
|
+ }
|
|
|
+
|
|
|
+ if (Math.floor(e.detail.currentTime) != this.flagTime) {
|
|
|
+ this.flagTime = Math.floor(e.detail.currentTime)
|
|
|
+ // 中途弹窗逻辑
|
|
|
+ if(!this.tipsOpen&&this.tipsTime && this.playTime == this.tipsTime) {
|
|
|
+ this.timepath='33%'
|
|
|
+ this.openTipsPop()
|
|
|
+ }
|
|
|
+ if(!this.tipsOpen&&this.tipsTime2 && this.playTime == this.tipsTime2) {
|
|
|
+ this.timepath='66%'
|
|
|
+ this.openTipsPop()
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.playTime = currentTime
|
|
|
+
|
|
|
+ }
|
|
|
+ },
|
|
|
+ changeTime(that,e) {
|
|
|
+ that.playDurationSeek = 0
|
|
|
+ },
|
|
|
+ videoErrorCallback(e) {
|
|
|
+ this.clearIntegral()
|
|
|
+ this.errorCount++
|
|
|
+ if (this.errorCount > 3) return
|
|
|
+ console.log(e)
|
|
|
+ this.getErrMsg(e.target.errMsg)
|
|
|
+ this.getH5CourseVideoDetails('error')
|
|
|
+ },
|
|
|
+ // 当开始/继续播放时触发play事件
|
|
|
+ getPlay() {
|
|
|
+ this.errorCount = 0
|
|
|
+ // this.judgeDuration()
|
|
|
+ },
|
|
|
+ getPause() {
|
|
|
+ this.clearIntegral()
|
|
|
+ },
|
|
|
+ getEnded() {
|
|
|
+ this.clearIntegral()
|
|
|
+ this.isEnded = true
|
|
|
+ this.isFinish=1
|
|
|
+ this.getFinishCourseVideo()
|
|
|
+ },
|
|
|
+ getIP() {
|
|
|
+ uni.request({
|
|
|
+ url: 'https://ipinfo.io/json', //仅为示例,并非真实接口地址。
|
|
|
+ method: 'GET',
|
|
|
+ success: (res) => {
|
|
|
+ this.ip = res.data.ip
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ getHeight() {
|
|
|
+ this.$nextTick(() => {
|
|
|
+ const query = uni.createSelectorQuery().in(this);
|
|
|
+ query
|
|
|
+ .select("#title-content")
|
|
|
+ .boundingClientRect((data) => {
|
|
|
+ this.height =
|
|
|
+ `calc(100vh - ${data.height}px - 420rpx - ${this.statusBarHeight}px - 164rpx )`
|
|
|
+ })
|
|
|
+ .exec();
|
|
|
+ })
|
|
|
+ },
|
|
|
+ getDescHeight() {
|
|
|
+ this.$nextTick(() => {
|
|
|
+ const query = uni.createSelectorQuery().in(this);
|
|
|
+ query
|
|
|
+ .select("#descbox-desc")
|
|
|
+ .boundingClientRect((data) => {
|
|
|
+ this.textHeight = data.height
|
|
|
+ })
|
|
|
+ .exec();
|
|
|
+ })
|
|
|
+ },
|
|
|
+ numberToLetter(num) {
|
|
|
+ // 将数字转换为字母的 ASCII 码
|
|
|
+ let letterCode = num + 65;
|
|
|
+ // 将 ASCII 码转换为大写字母
|
|
|
+ let letter = String.fromCharCode(letterCode);
|
|
|
+ return letter;
|
|
|
+ },
|
|
|
+ updateTime() {
|
|
|
+ var that = this;
|
|
|
+ if (this.interval != null) {
|
|
|
+ clearInterval(this.interval)
|
|
|
+ }
|
|
|
+ this.interval = setInterval(function() {
|
|
|
+ that.getFinishCourseVideo()
|
|
|
+ that.getInternetTraffic()
|
|
|
+ }, 60000);
|
|
|
+ },
|
|
|
+ judgeDuration() {
|
|
|
+ var that = this;
|
|
|
+ if (this.intervalIntegral != null) {
|
|
|
+ clearInterval(this.intervalIntegral)
|
|
|
+ this.intervalIntegral = null
|
|
|
+ }
|
|
|
+ // 观看10分钟获得积分
|
|
|
+ this.intervalIntegral = setInterval(function() {
|
|
|
+ that.getIntegralByH5Video()
|
|
|
+ }, 600000);
|
|
|
+ },
|
|
|
+ clearIntegral() {
|
|
|
+ if (this.intervalIntegral != null) {
|
|
|
+ clearInterval(this.intervalIntegral)
|
|
|
+ this.intervalIntegral = null
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 展开简介
|
|
|
+ handleExpand() {
|
|
|
+ this.isExpand = !this.isExpand
|
|
|
+ },
|
|
|
+ getH5CourseByVideo() {
|
|
|
+ this.loading = true
|
|
|
+ getH5CourseByVideoId({
|
|
|
+ videoId: this.videoId
|
|
|
+ }).then(res => {
|
|
|
+ this.loading = false
|
|
|
+ if (res.code == 200) {
|
|
|
+ this.viewload=false
|
|
|
+ this.courseInfo = res.data
|
|
|
+ uni.setNavigationBarTitle({
|
|
|
+ title: this.courseInfo && this.courseInfo.title ? this.courseInfo.title : ''
|
|
|
+ });
|
|
|
+ }else {
|
|
|
+ uni.showToast({
|
|
|
+ title: res.msg,
|
|
|
+ icon: "none"
|
|
|
+ })
|
|
|
+ }
|
|
|
+ this.getHeight()
|
|
|
+ this.getDescHeight()
|
|
|
+ },
|
|
|
+ rej => {
|
|
|
+ this.loading = false
|
|
|
+ }
|
|
|
+ ).catch(() => {
|
|
|
+ this.loading = false
|
|
|
+ })
|
|
|
+ },
|
|
|
+ getH5CourseVideoDetails(type) {
|
|
|
+ uni.showLoading({
|
|
|
+ title: '加载中'
|
|
|
+ })
|
|
|
+ const data={
|
|
|
+ videoId:this.videoId,
|
|
|
+ fsUserId:this.userInfo.userId,
|
|
|
+ courseId:this.courseId,
|
|
|
+ companyUserId:this.companyUserId,
|
|
|
+ periodId:this.periodId,
|
|
|
+ // projectId:this.projectId,
|
|
|
+ id:this.timeid
|
|
|
+ }
|
|
|
+ getH5CourseVideoDetails(data).then(res => {
|
|
|
+ uni.hideLoading();
|
|
|
+ if (res.code == 200) {
|
|
|
+ this.config = res.data.courseConfig || {}
|
|
|
+ this.isFinish = res.data.isFinish || 0
|
|
|
+ this.duration = res.data.courseVideoDetails &&
|
|
|
+ res.data.courseVideoDetails.duration ? res.data.courseVideoDetails.duration : 0
|
|
|
+ this.courseLogo = this.config&&JSON.stringify(this.config)!='{}'? this.config.courseLogo : ''
|
|
|
+ this.playDuration = res.data.playDuration || 0
|
|
|
+ this.playDurationSeek = res.data.playDuration || 0
|
|
|
+ // this.tipsTime = 38
|
|
|
+ this.tipsTime = res.data.tipsTime || 0
|
|
|
+ this.tipsTime2 = res.data.tipsTime2 || 0
|
|
|
+ let lineList = []
|
|
|
+ // if (res.course && res.course.lineOne) {
|
|
|
+ // lineList.push(res.course.lineOne)
|
|
|
+ // }
|
|
|
+ // if (res.course && res.course.lineTwo) {
|
|
|
+ // lineList.push(res.course.lineTwo)
|
|
|
+ // }
|
|
|
+ // if (res.course && res.course.lineThree) {
|
|
|
+ // lineList.push(res.course.lineThree)
|
|
|
+ // }
|
|
|
+ this.lineList = lineList
|
|
|
+ if (!this.player || type == 'error') {
|
|
|
+ uni.hideLoading();
|
|
|
+ this.lineIndex = this.config.defaultLine
|
|
|
+ this.videoUrl = res.data.courseVideoDetails.videoUrl
|
|
|
+ this.poster= res.data.courseVideoDetails &&
|
|
|
+ res.data.courseVideoDetails.thumbnail ? res.data.courseVideoDetails.thumbnail : ''
|
|
|
+ this.videocont=res.data
|
|
|
+ // this.options.sources = [{
|
|
|
+ // src: this.videoUrl
|
|
|
+ // }]
|
|
|
+ // this.options.poster = res.course && res.course.imgUrl ? res.course.imgUrl : ''
|
|
|
+ // this.initVideo()
|
|
|
+ this.playTime = this.playDuration >= this.duration ? 0 : this.playDuration
|
|
|
+ if(this.videocont.rang){
|
|
|
+ setTimeout(()=>{
|
|
|
+ // this.player = uni.createVideoContext('video-content-box');
|
|
|
+ // this.player.seek(this.playTime)
|
|
|
+ // this.player.play();
|
|
|
+ this.seekDuration=this.playTime;
|
|
|
+ },500);
|
|
|
+ this.timepop=false
|
|
|
+ }else{
|
|
|
+ this.timepop=true
|
|
|
+ }
|
|
|
+
|
|
|
+ } else {
|
|
|
+ // let div = document.querySelector(".vjs-progress-control");
|
|
|
+ // if(div) {
|
|
|
+ // if (this.isFinish == 1 || this.isEnded || this.videolinkType == 1) {
|
|
|
+ // div.style.pointerEvents = "auto";
|
|
|
+ // } else {
|
|
|
+ // div.style.pointerEvents = "none"; //禁止所有事件
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ this.playTime = this.playTime > this.playDuration ? this.playTime : this.playDuration >= this.duration ? 0 : this.playDuration
|
|
|
+ // this.player.seek(this.playTime)
|
|
|
+ // this.player.play();
|
|
|
+ this.seekDuration=this.playTime;
|
|
|
+ }
|
|
|
+ this.updateTime();
|
|
|
+ if(res.data.courseVideoDetails.questionBankList.length==0){
|
|
|
+ this.isquestion=true
|
|
|
+ }else{
|
|
|
+ this.isquestion=false
|
|
|
+ }
|
|
|
+ console.log('题目',res.data.courseVideoDetails.questionBankList)
|
|
|
+ this.quesList = res.data.courseVideoDetails.questionBankList
|
|
|
+ && res.data.courseVideoDetails.questionBankList.length > 0 ? res.data.courseVideoDetails.questionBankList : [],
|
|
|
+ this.quesList = this.quesList.map(item => ({
|
|
|
+ ...item,
|
|
|
+ questionOption: JSON.parse(item.question),
|
|
|
+ answer: ''
|
|
|
+ }))
|
|
|
+ }
|
|
|
+ this.getHeight()
|
|
|
+ this.getDescHeight()
|
|
|
+ },
|
|
|
+ rej => {}
|
|
|
+ )
|
|
|
+ },
|
|
|
+ handleAnswer(item, option, idx) {
|
|
|
+ let time = this.playTime
|
|
|
+ if(this.isEnded || this.isFinish==1) {
|
|
|
+ time = this.duration
|
|
|
+ } else {
|
|
|
+ if(time < this.playDuration&&this.isFinish!=1) {
|
|
|
+ // 没完课且小于续播的时间
|
|
|
+ time = this.playDuration
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if(Number(this.duration || 0) == 0 || time < this.duration - 60) {
|
|
|
+ uni.showToast({
|
|
|
+ title: "请先观看完整课程再答题哦~",
|
|
|
+ icon: "none"
|
|
|
+ })
|
|
|
+ return
|
|
|
+ }
|
|
|
+
|
|
|
+ if (item.type == 1) {
|
|
|
+ // 单选option
|
|
|
+ item.answer = option.name
|
|
|
+ } else if (item.type == 2) {
|
|
|
+ // 多选
|
|
|
+ let answer = item.answer ? item.answer.split(',') : []
|
|
|
+ if (answer.indexOf(option.name) === -1) {
|
|
|
+ answer.push(option.name)
|
|
|
+ item.answer = answer.join(',')
|
|
|
+ } else {
|
|
|
+ answer.splice(answer.indexOf(option.name), 1)
|
|
|
+ item.answer = answer.join(',')
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ submit() {
|
|
|
+ if(this.isExpire){
|
|
|
+ uni.showToast({
|
|
|
+ title: '课程已过期或链接无效',
|
|
|
+ icon: 'none'
|
|
|
+ });
|
|
|
+ return
|
|
|
+ }
|
|
|
+ // 登录
|
|
|
+ this.$isLoginCourse().then(
|
|
|
+ res => {
|
|
|
+ console.log(res)
|
|
|
+ if(res){
|
|
|
+ console.log(res)
|
|
|
+ if (this.isAddKf == 1) {
|
|
|
+ // 答题
|
|
|
+ // 您已提交过答案,请领取红包
|
|
|
+ console.log(1223)
|
|
|
+ this.courseAnswer()
|
|
|
+ } else {
|
|
|
+ // 添加客服
|
|
|
+ if (this.videoId&&this.isLogin) {
|
|
|
+ console.log(12223131)
|
|
|
+ this.getIsAddKf()
|
|
|
+ } else if(this.iskftype==1){
|
|
|
+ uni.showToast({
|
|
|
+ title: this.iskftypemsg,
|
|
|
+ icon: 'none'
|
|
|
+ })
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ // this.kfPopup=true
|
|
|
+ uni.removeStorageSync('TOKEN_WEXIN')
|
|
|
+ uni.showToast({
|
|
|
+ title: '已清除缓存,请重新进入页面!',
|
|
|
+ icon: 'none'
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ } else{
|
|
|
+ this.goLogin()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ rej => {}
|
|
|
+ );
|
|
|
+
|
|
|
+ },
|
|
|
+ // 答题
|
|
|
+ courseAnswer() {
|
|
|
+ let time = this.playTime
|
|
|
+ if (this.isEnded||this.isFinish==1) {
|
|
|
+ time = this.duration
|
|
|
+ } else {
|
|
|
+ if (time < this.playDuration && this.isFinish != 1) {
|
|
|
+ // 没完课且小于续播的时间
|
|
|
+ time = this.playDuration
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if (Number(this.duration || 0) == 0 || time < this.duration - 60) {
|
|
|
+ uni.showToast({
|
|
|
+ title: "请先观看完整课程再答题哦~",
|
|
|
+ icon: "none"
|
|
|
+ })
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if (this.quesList.some(item => !item.answer)) {
|
|
|
+ uni.showToast({
|
|
|
+ title: "请确认是否答完所有题目",
|
|
|
+ icon: "none"
|
|
|
+ })
|
|
|
+ return
|
|
|
+ }
|
|
|
+ const questions = this.quesList.map(obj => {
|
|
|
+ const {
|
|
|
+ questionOption,
|
|
|
+ ...rest
|
|
|
+ } = obj;
|
|
|
+ return rest;
|
|
|
+ });
|
|
|
+ const param = {
|
|
|
+ ...this.urlOption,
|
|
|
+ userId:this.userInfo.userId,
|
|
|
+ questions: questions,
|
|
|
+ videoId: this.videoId,
|
|
|
+ duration: this.playTime,
|
|
|
+ }
|
|
|
+ this.errTitle = ""
|
|
|
+ this.errDesc = ""
|
|
|
+ this.errQues = []
|
|
|
+ courseAnswer(param).then(res => {
|
|
|
+ if (res.code == 200) {
|
|
|
+ if (res.incorrectQuestions) {
|
|
|
+ // 答题失败
|
|
|
+ if (res.incorrectQuestions.length > 0) {
|
|
|
+ this.errQues = res.incorrectQuestions
|
|
|
+ }
|
|
|
+ this.remain = res.remain || 0
|
|
|
+ if (res.remain > 0) {
|
|
|
+ this.answerPopup=true
|
|
|
+ this.errTitle = "很遗憾答错了"
|
|
|
+ this.errDesc = `<span style="color:#FF5C03">还有${res.remain}次机会,继续加油</span>`
|
|
|
+ // this.$refs.answerPopup.open("center")
|
|
|
+ this.answerPopup=true
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ // 答题成功
|
|
|
+ this.errTitle = "恭喜你,回答正确"
|
|
|
+ // this.errDesc = `请选择奖励`
|
|
|
+ // this.$refs.answerPopup.open("center")
|
|
|
+ if(res.msg=='答题成功'){
|
|
|
+ this.closeAnswerPopup()
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ if (res.msg == "该课题到达答错次数限制") {
|
|
|
+ this.errTitle = "答题次数超过限制"
|
|
|
+ this.errDesc = "以后的课程要认真学习哦"
|
|
|
+ // this.$refs.answerPopup.open("center")
|
|
|
+ this.answerPopup=true
|
|
|
+ } else {
|
|
|
+ uni.showToast({
|
|
|
+ title: res.msg,
|
|
|
+ icon: "none"
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ rej => {}
|
|
|
+ )
|
|
|
+ },
|
|
|
+ // 选择
|
|
|
+ rewardChange(e) {
|
|
|
+ this.currentReward = e.detail.value
|
|
|
+ },
|
|
|
+ closeAnswerPopup() {
|
|
|
+ // this.$refs.answerPopup.close()
|
|
|
+ uni.showLoading({
|
|
|
+ title: "加载中..."
|
|
|
+ })
|
|
|
+ if (this.errTitle == '恭喜你,回答正确') {
|
|
|
+ const param = {
|
|
|
+ ...this.urlOption,
|
|
|
+ userId:this.userInfo.userId,
|
|
|
+ // rewardType: Number(this.currentReward),
|
|
|
+ source: 2, // 2 小程序 1 h5
|
|
|
+ appId: this.appid
|
|
|
+ }
|
|
|
+ sendReward(param).then(res => {
|
|
|
+ if(res.code == 200) {
|
|
|
+ uni.hideLoading()
|
|
|
+ this.answerPopup=false
|
|
|
+ // console.log('红包',res)
|
|
|
+ if(res.isNew&&res.isNew==1) {
|
|
|
+ console.log('红包配置',res)
|
|
|
+ const packageInfo = res.data.packageInfo || ''
|
|
|
+ if(packageInfo) {
|
|
|
+ uni.setStorageSync('receive_package',packageInfo)
|
|
|
+ uni.setStorageSync('mchId',res.mchId)
|
|
|
+ uni.navigateTo({
|
|
|
+ url: '/pages_course/reward'
|
|
|
+ })
|
|
|
+
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ uni.showToast({
|
|
|
+ title: res.msg,
|
|
|
+ icon: 'none'
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }else {
|
|
|
+ uni.hideLoading()
|
|
|
+ uni.showToast({
|
|
|
+ title: res.msg,
|
|
|
+ icon: 'none'
|
|
|
+ })
|
|
|
+ }
|
|
|
+ // if(res.code == 200) {
|
|
|
+ // //重构 发红包,后台通过OPENID发零钱到 账
|
|
|
+ // //this.initWXConfig(res.package)
|
|
|
+ // }else {
|
|
|
+ // uni.showToast({
|
|
|
+ // title: res.msg,
|
|
|
+ // icon: 'none'
|
|
|
+ // })
|
|
|
+ // }
|
|
|
+ })
|
|
|
+ }else{
|
|
|
+ uni.hideLoading()
|
|
|
+ this.answerPopup=false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 线路
|
|
|
+ openPop() {
|
|
|
+ this.$refs.popup.open('bottom')
|
|
|
+ },
|
|
|
+ close() {
|
|
|
+ this.$refs.popup.close()
|
|
|
+ },
|
|
|
+ handleLine(index) {
|
|
|
+ var that=this;
|
|
|
+ if (this.lineIndex == index && this.videoUrl == this.lineList[index]) {
|
|
|
+ this.close()
|
|
|
+ return
|
|
|
+ } else {
|
|
|
+ // let div = document.querySelector(".vjs-progress-control");
|
|
|
+ // if(div) {
|
|
|
+ // if (this.isFinish == 1 || this.isEnded || this.videolinkType == 1) {
|
|
|
+ // div.style.pointerEvents = "auto";
|
|
|
+ // } else {
|
|
|
+ // div.style.pointerEvents = "none"; //禁止所有事件
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ this.lineIndex = index
|
|
|
+ this.videoUrl = this.lineList[index]
|
|
|
+ this.tipsOpen = false
|
|
|
+ this.playDurationSeek = this.playTime || 0
|
|
|
+ this.player = uni.createVideoContext('video-content-box');
|
|
|
+ setTimeout(function(){
|
|
|
+ // that.player.seek(that.playDurationSeek)
|
|
|
+ // that.player.play();
|
|
|
+ that.seekDuration=that.playDurationSeek;
|
|
|
+ },500);
|
|
|
+
|
|
|
+ //// this.player.src(this.lineList[index])
|
|
|
+ //// this.player.one('loadedmetadata', () => {
|
|
|
+ //// this.player.currentTime(this.playDurationSeek);
|
|
|
+ //// this.player.play();
|
|
|
+ //// });
|
|
|
+
|
|
|
+ this.close()
|
|
|
+ }
|
|
|
+
|
|
|
+ },
|
|
|
+ // 温馨提示
|
|
|
+ openTipsPop() {
|
|
|
+ //// this.$refs.tipsPopup.open()
|
|
|
+ this.tipsPopup=true
|
|
|
+ // 暂停视频
|
|
|
+ if(this.videoContext){
|
|
|
+ this.videoContext.pause();
|
|
|
+ }
|
|
|
+ //播放器插件暂停
|
|
|
+ this.playerCmd = 'pause';
|
|
|
+ //// this.tipsOpen = true
|
|
|
+ //// this.pause()
|
|
|
+ },
|
|
|
+ closeTipsPop() {
|
|
|
+ // this.$refs.tipsPopup.close()
|
|
|
+ if(this.videoContext){
|
|
|
+ this.videoContext.play();
|
|
|
+ }
|
|
|
+ //播放器插件的播放
|
|
|
+ this.playerCmd = 'play_' + Date.now();
|
|
|
+ this.tipsPopup=!this.tipsPopup
|
|
|
+ },
|
|
|
+ // 客服
|
|
|
+ getIsAddKf() {
|
|
|
+ this.qrcode = ''
|
|
|
+ this.qrcodeMsg = ''
|
|
|
+ this.isAddKf = 0
|
|
|
+ const data = {
|
|
|
+ videoId:this.videoId,
|
|
|
+ userId:this.userInfo.userId,
|
|
|
+ companyUserId:this.companyUserId,
|
|
|
+ companyId:this.companyId,
|
|
|
+ courseId:this.courseId,
|
|
|
+ periodId:this.periodId,
|
|
|
+ projectId:this.projectId
|
|
|
+ }
|
|
|
+ // {videoId: this.videoId,qwUserId: this.qwUserId,corpId: this.corpId}
|
|
|
+ getIsAddKf(data).then(res => {
|
|
|
+ if (res.code == 200) {
|
|
|
+ this.isLogin = true
|
|
|
+ if(res.data&&this.userInfo.userId){
|
|
|
+ this.isAddKf = 1
|
|
|
+ this.getH5CourseVideoDetails()
|
|
|
+ this.handleFsUserWxs()
|
|
|
+ }else{
|
|
|
+ this.goLogin()
|
|
|
+ }
|
|
|
+ // else{
|
|
|
+ // uni.showToast({
|
|
|
+ // title: '请联系管理员,注册为会员!',
|
|
|
+ // icon: 'none'
|
|
|
+ // });
|
|
|
+ // }
|
|
|
+ }else if(res.code==1002){
|
|
|
+ this.isAddKf = 0
|
|
|
+ this.qrcode=res.ext
|
|
|
+ this.kfPopup=true
|
|
|
+ uni.showToast({
|
|
|
+ title: "请添加管理员微信,成为会员!",
|
|
|
+ icon: 'none'
|
|
|
+ });
|
|
|
+ this.initExpiration(res.msg,res.code)
|
|
|
+ }else if(res.code==505){
|
|
|
+ this.isAddKf = 0
|
|
|
+ this.qrcode=res.ext
|
|
|
+ this.kfPopup=true
|
|
|
+ uni.showToast({
|
|
|
+ title: "管理员开启了会员审核,请等待审核!",
|
|
|
+ icon: 'none'
|
|
|
+ });
|
|
|
+ this.initExpiration(res.msg,res.code)
|
|
|
+ }else if(res.code==406){
|
|
|
+ uni.hideLoading();
|
|
|
+ uni.showToast({
|
|
|
+ icon:'none',
|
|
|
+ title: '该用户已成为其他销售会员',
|
|
|
+ });
|
|
|
+ this.initExpiration(res.msg,res.code)
|
|
|
+ }else if(res.code==504){
|
|
|
+ this.isAddKf = 0
|
|
|
+ this.iskftype=1
|
|
|
+ this.iskftypemsg=res.msg
|
|
|
+ uni.showToast({
|
|
|
+ title: res.msg,
|
|
|
+ icon: 'none'
|
|
|
+ });
|
|
|
+ this.initExpiration(res.msg,res.code)
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ this.initExpiration(res.msg,res.code)
|
|
|
+ this.isAddKf = 0
|
|
|
+ uni.showToast({
|
|
|
+ title: res.msg,
|
|
|
+ icon: 'none'
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ err => {}
|
|
|
+ );
|
|
|
+ },
|
|
|
+ initExpiration(resMsg,resCode) {
|
|
|
+ if(resCode==401) return;
|
|
|
+ this.resMsg = resMsg
|
|
|
+ this.resCode = resCode
|
|
|
+ this.showExpiration = true
|
|
|
+ },
|
|
|
+ closeKFPop() {
|
|
|
+ // this.$refs.kfPopup.close()
|
|
|
+ // this.kfPopup=!this.kfPopup
|
|
|
+ },
|
|
|
+ getFinishCourseVideo() {
|
|
|
+ if (!this.playTime) return
|
|
|
+ // {videoId: this.videoId,duration:this.playTime}
|
|
|
+ const param = {
|
|
|
+ duration: this.playTime,
|
|
|
+ videoId:this.videoId,
|
|
|
+ userId:this.userInfo.userId,
|
|
|
+ companyUserId:this.companyUserId
|
|
|
+ }
|
|
|
+ getFinishCourseVideo(param)
|
|
|
+ },
|
|
|
+ // 每十分钟获得积分
|
|
|
+ getIntegralByH5Video() {
|
|
|
+ const param = {
|
|
|
+ duration: this.playTime,
|
|
|
+ ...this.urlOption
|
|
|
+ }
|
|
|
+ getIntegralByH5Video(param).then(res => {
|
|
|
+ if (res.code == 200) {
|
|
|
+ uni.showToast({
|
|
|
+ title: "积分+10",
|
|
|
+ icon: "none"
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ progressChange(e) {
|
|
|
+ this.bufferRate = Math.ceil(e.detail.buffered)
|
|
|
+ // console.log('缓冲结果',this.bufferRate)
|
|
|
+ // console.log('缓冲',this.playTime,this.duration)
|
|
|
+ },
|
|
|
+ // 缓冲
|
|
|
+ getInternetTraffic() {
|
|
|
+ const playVideoTime = Math.ceil(this.playTime / this.duration * 100) // 播放百分比
|
|
|
+ // console.log('播放百分比',playVideoTime)
|
|
|
+ if(this.bufferRate == 0 || this.bufferRate < playVideoTime) {
|
|
|
+ this.bufferRate = playVideoTime
|
|
|
+ console.log(this.bufferRate)
|
|
|
+ }
|
|
|
+ if(this.bufferRate == 0 || Number(this.bufferRate.toFixed(2)) == 0) return
|
|
|
+ const param = {
|
|
|
+ uuId: dayjs().format('YYYYMMDD') + this.uuId,
|
|
|
+ duration: this.playTime,
|
|
|
+ bufferRate: Number(this.bufferRate.toFixed(2)),
|
|
|
+ userId:this.userId,
|
|
|
+ periodId:this.periodId,
|
|
|
+ ...this.urlOption
|
|
|
+ }
|
|
|
+ getInternetTraffic(param)
|
|
|
+ },
|
|
|
+ getErrMsg(err) {
|
|
|
+ let msgerr = {
|
|
|
+ videoUrl: this.videoUrl,
|
|
|
+ lineIndex: this.lineIndex,
|
|
|
+ errTime: new Date(),
|
|
|
+ // ip: this.ip,
|
|
|
+ errMsg: err
|
|
|
+ }
|
|
|
+ getErrMsg({
|
|
|
+ msg: JSON.stringify(msgerr)
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ getLink() {
|
|
|
+ this.goLogin()
|
|
|
+ return
|
|
|
+ let that = this;
|
|
|
+ this.msg = ''
|
|
|
+ getRealLink({sortLink:this.sortLink}).then(res=>{
|
|
|
+ if(res.code == 200) {
|
|
|
+ this.isExpire = false
|
|
|
+ // 如果响应中包含真实链接,则跳转到真实链接
|
|
|
+ // window.location.href = res.realLink +"&sortLink="+this.sortLink+"&code="+this.code+"&time="+new Date().getTime()
|
|
|
+ if (this.isLogin && this.isAddKf == 1) {
|
|
|
+ this.getH5CourseVideoDetails()
|
|
|
+ }
|
|
|
+ if (this.videoId && this.isAddKf != 1) {
|
|
|
+ this.$isLoginCourse().then(
|
|
|
+ isLogin => {
|
|
|
+ this.isLogin = isLogin
|
|
|
+ if(isLogin){
|
|
|
+ this.getIsAddKf()
|
|
|
+ } else {
|
|
|
+ this.goLogin()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ rej => {}
|
|
|
+ );
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ this.isExpire = true
|
|
|
+ this.msg = '课程已过期或链接无效'
|
|
|
+ uni.showToast({
|
|
|
+ title: '课程已过期或链接无效',
|
|
|
+ icon: 'none'
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }).catch(err=>{
|
|
|
+ this.isExpire = true
|
|
|
+ this.msg = '发生错误,请稍后再试'
|
|
|
+ uni.showToast({
|
|
|
+ title: '发生错误,请稍后再试',
|
|
|
+ icon: 'none'
|
|
|
+ });
|
|
|
+ })
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 节流原理:在一定时间内,只能触发一次
|
|
|
+ *
|
|
|
+ * @param {Function} func 要执行的回调函数
|
|
|
+ * @param {Number} wait 延时的时间
|
|
|
+ * @param {Boolean} immediate 是否立即执行
|
|
|
+ * @return null
|
|
|
+ */
|
|
|
+ throttle(func, wait = 500, immediate = true) {
|
|
|
+ if (immediate) {
|
|
|
+ if (!this.flag) {
|
|
|
+ this.flag = true
|
|
|
+ // 如果是立即执行,则在wait毫秒内开始时执行
|
|
|
+ typeof func === 'function' && func()
|
|
|
+ this.timer = setTimeout(() => {
|
|
|
+ this.flag = false
|
|
|
+ }, wait)
|
|
|
+ }
|
|
|
+ } else if (!this.flag) {
|
|
|
+ this.flag = true
|
|
|
+ // 如果是非立即执行,则在wait毫秒内的结束处执行
|
|
|
+ this.timer = setTimeout(() => {
|
|
|
+ this.flag = false
|
|
|
+ typeof func === 'function' && func()
|
|
|
+ }, wait)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+.full-width-popup {
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+</style>
|
|
|
+<style lang="scss" scoped>
|
|
|
+ .subname{
|
|
|
+ background-color: #00aa00;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ .subavt{
|
|
|
+ background-color: #fff;
|
|
|
+ border: 2rpx #0a0 solid;
|
|
|
+ color: #00aa00;
|
|
|
+ }
|
|
|
+ .boxweixin{
|
|
|
+ width: 44rpx;
|
|
|
+ height: 44rpx;
|
|
|
+ border-radius: 50%;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 34rpx;
|
|
|
+ color: #0a0;
|
|
|
+ }
|
|
|
+ .boxnosel{
|
|
|
+ border: #757575 4rpx solid;
|
|
|
+ }
|
|
|
+ .boxsel{
|
|
|
+ border: #0a0 4rpx solid;
|
|
|
+ }
|
|
|
+ .button-container {
|
|
|
+ position: relative;
|
|
|
+ width: 240rpx;
|
|
|
+ }
|
|
|
+ .hidden-input {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ opacity: 0;
|
|
|
+ z-index: 2;
|
|
|
+ }
|
|
|
+ .custom-button {
|
|
|
+ position: relative;
|
|
|
+ z-index: 1;
|
|
|
+ /* 其他样式 */
|
|
|
+ width:100%;
|
|
|
+ margin: 0 auto;
|
|
|
+ height: 80rpx;
|
|
|
+ line-height: 60rpx;
|
|
|
+ font-size: 28rpx;
|
|
|
+ padding: 10rpx 20rpx;
|
|
|
+ }
|
|
|
+ .submitname{
|
|
|
+ width: 90%;
|
|
|
+
|
|
|
+ margin: 0 auto;
|
|
|
+ text-align: center;
|
|
|
+ padding: 30rpx;
|
|
|
+ margin-top: 40rpx;
|
|
|
+ }
|
|
|
+ .sub{
|
|
|
+ background-color: #f0f0f0;
|
|
|
+ color: #0a0;
|
|
|
+ }
|
|
|
+ .subact{
|
|
|
+ background-color: #0a0;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ .userlogo{
|
|
|
+ height: 760rpx;
|
|
|
+ }
|
|
|
+ .getlogo{
|
|
|
+ width:240rpx;
|
|
|
+ background-color: #fff;
|
|
|
+ // padding: 10rpx 20rpx;
|
|
|
+ }
|
|
|
+ @mixin u-flex($flexD, $alignI, $justifyC) {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: $flexD;
|
|
|
+ align-items: $alignI;
|
|
|
+ justify-content: $justifyC;
|
|
|
+ }
|
|
|
+ .footer-tips {
|
|
|
+ position: fixed;
|
|
|
+ width: 100%;
|
|
|
+ bottom: 144rpx;
|
|
|
+ text-align: center;
|
|
|
+ font-family: PingFang SC,PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 12px;
|
|
|
+ color: #bbb;
|
|
|
+ transform: scale(0.8);
|
|
|
+ }
|
|
|
+ .btns{
|
|
|
+ position: relative;
|
|
|
+ width: 100%;
|
|
|
+ height: 80rpx;
|
|
|
+ .author-btn{
|
|
|
+ z-index:100;
|
|
|
+ position: absolute;
|
|
|
+ width: 100%;
|
|
|
+ height: 80rpx;
|
|
|
+ background: #ff5c03;
|
|
|
+ border-radius: 40rpx;
|
|
|
+ font-size: 36rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 80rpx;
|
|
|
+ color: rgba(255, 255, 255, 1);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .textOne {
|
|
|
+ overflow: hidden;
|
|
|
+ white-space: nowrap;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ }
|
|
|
+
|
|
|
+ .textTwo {
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ display: -webkit-box;
|
|
|
+ -webkit-line-clamp: 2;
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+ }
|
|
|
+ .header-nav {
|
|
|
+ height: 88rpx;
|
|
|
+ @include u-flex(row, center, flex-start);
|
|
|
+ overflow: hidden;
|
|
|
+ background-color: #fff;
|
|
|
+ box-sizing: border-box;
|
|
|
+ .header-title {
|
|
|
+ text-align: center;
|
|
|
+ overflow: hidden;
|
|
|
+ white-space: nowrap;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ padding: 0 10rpx 0 100rpx;
|
|
|
+ font-family: PingFang SC,PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 15px;
|
|
|
+ color: #000;
|
|
|
+ box-sizing: border-box;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .reward-list {
|
|
|
+ width: 100%;
|
|
|
+ margin-top: 20rpx;
|
|
|
+ margin-bottom: -40rpx;
|
|
|
+
|
|
|
+ &-group {
|
|
|
+ font-family: PingFang SC, PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #222222;
|
|
|
+ @include u-flex(row, center, center);
|
|
|
+ }
|
|
|
+
|
|
|
+ &-option {
|
|
|
+ @include u-flex(row, center, flex-start);
|
|
|
+
|
|
|
+ &:first-child {
|
|
|
+ margin-right: 40rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .err {
|
|
|
+ color: #f56c6c !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .kfqrcode-box {
|
|
|
+ background-color: #fff;
|
|
|
+ border-radius: 16rpx;
|
|
|
+ max-width: 560rpx;
|
|
|
+ padding: 60rpx 40rpx;
|
|
|
+ margin-top: -100rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ @include u-flex(column, center, flex-start);
|
|
|
+ font-family: PingFang SC, PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 34rpx;
|
|
|
+ color: #222;
|
|
|
+ position: relative;
|
|
|
+ text-align: center;
|
|
|
+
|
|
|
+ .kfqrcode {
|
|
|
+ // height: 460rpx;
|
|
|
+ width: 460rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .kfqrcode-close {
|
|
|
+ width: 64rpx;
|
|
|
+ height: 64rpx;
|
|
|
+ position: absolute;
|
|
|
+ bottom: -100rpx;
|
|
|
+ left: 50%;
|
|
|
+ transform: translateX(-50%);
|
|
|
+ }
|
|
|
+
|
|
|
+ .tipsPopup-mask {
|
|
|
+ position: relative;
|
|
|
+ width: 560rpx;
|
|
|
+ background-color: transparent;
|
|
|
+
|
|
|
+ .red_envelope_top {
|
|
|
+ width: 480rpx;
|
|
|
+ height: 360rpx;
|
|
|
+ margin: 0 auto;
|
|
|
+ display: inherit;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .tipsPopup-btn-box {
|
|
|
+ width: 456rpx;
|
|
|
+ height: 104rpx;
|
|
|
+ padding: 4rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ background: linear-gradient(180deg, rgba(252, 209, 94, 1), rgba(254, 253, 251, 1));
|
|
|
+ border-radius: 52rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tipsPopup-btn {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ background: linear-gradient(180deg, #FF9F22 0%, #FA1E05 100%);
|
|
|
+ border-radius: 52rpx 52rpx 52rpx 52rpx;
|
|
|
+ font-family: PingFang SC, PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 36rpx;
|
|
|
+ color: #FFFFFF;
|
|
|
+ line-height: 96rpx;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tipsPopup {
|
|
|
+ width: 560rpx;
|
|
|
+ padding: 12rpx;
|
|
|
+ margin-top: -72rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ background: linear-gradient(180deg, #FFFBEF 0%, #FFFFF5 43%, #F5EAC2 100%);
|
|
|
+ border-radius: 32rpx 32rpx 32rpx 32rpx;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ &-close {
|
|
|
+ width: 64rpx;
|
|
|
+ height: 64rpx;
|
|
|
+ position: absolute;
|
|
|
+ right: 0;
|
|
|
+ top: -188rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ &-line {
|
|
|
+ padding: 3rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ background: linear-gradient(180deg, rgba(247, 245, 220, 1), rgba(250, 220, 157, 1));
|
|
|
+ border-radius: 24rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ &-box {
|
|
|
+ padding: 0 40rpx 40rpx 40rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ background: linear-gradient(180deg, #FFFBEF 0%, #FFFFF5 43%, #F5EAC2 100%);
|
|
|
+ border-radius: 24rpx;
|
|
|
+ @include u-flex(column, center, flex-start);
|
|
|
+ }
|
|
|
+
|
|
|
+ &-head {
|
|
|
+ @include u-flex(row, center, center);
|
|
|
+
|
|
|
+ &-title {
|
|
|
+ width: 364rpx;
|
|
|
+ height: auto;
|
|
|
+ margin-top: -22rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ &-content {
|
|
|
+ margin: 48rpx 0;
|
|
|
+ font-family: PingFang SC, PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 32rpx;
|
|
|
+ color: #222222;
|
|
|
+ text-align: center;
|
|
|
+
|
|
|
+ &-title {
|
|
|
+ margin-bottom: 26rpx;
|
|
|
+ font-weight: 600;
|
|
|
+ font-size: 40rpx;
|
|
|
+ color: #FF5C03;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .video-controls-box {
|
|
|
+ width: 100%;
|
|
|
+ height: 420rpx;
|
|
|
+ overflow: hidden;
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ z-index: 2;
|
|
|
+ background: rgba(0, 0, 0, 0.2);
|
|
|
+
|
|
|
+ .video-play {
|
|
|
+ height: 72rpx;
|
|
|
+ width: 72rpx;
|
|
|
+ position: absolute;
|
|
|
+ top: 50%;
|
|
|
+ left: 50%;
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .video-controls {
|
|
|
+ width: 100%;
|
|
|
+ height: 80rpx;
|
|
|
+ padding: 0 28rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ background: linear-gradient(to top, #222 0%, transparent 80%);
|
|
|
+
|
|
|
+ .video-icon {
|
|
|
+ height: 44rpx;
|
|
|
+ width: 44rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .errQuesbox {
|
|
|
+ width: 100%;
|
|
|
+ max-height: 260rpx;
|
|
|
+ overflow-y: auto;
|
|
|
+ margin-top: 24rpx;
|
|
|
+ font-family: PingFang SC, PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 30rpx;
|
|
|
+ color: #222222;
|
|
|
+
|
|
|
+ &-item {
|
|
|
+ width: 100%;
|
|
|
+ height: 128rpx;
|
|
|
+ line-height: 128rpx;
|
|
|
+ margin-bottom: 24rpx;
|
|
|
+ padding: 0 30rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ overflow: hidden;
|
|
|
+ background: #fff;
|
|
|
+ border-radius: 16rpx 16rpx 16rpx 16rpx;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ &::after {
|
|
|
+ content: "题目";
|
|
|
+ min-width: 64rpx;
|
|
|
+ height: 36rpx;
|
|
|
+ padding: 0 12rpx;
|
|
|
+ line-height: 36rpx;
|
|
|
+ background: #FF5C03;
|
|
|
+ box-sizing: border-box;
|
|
|
+ border-radius: 0rpx 0rpx 16rpx 0rpx;
|
|
|
+ text-align: center;
|
|
|
+ font-family: PingFang SC, PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 20rpx;
|
|
|
+ color: #fff;
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .bg {
|
|
|
+ background: #fff !important;
|
|
|
+ }
|
|
|
+ .timepopbox{
|
|
|
+ width: 560rpx;
|
|
|
+ padding: 32rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ }
|
|
|
+ .answerPopup {
|
|
|
+ &-box {
|
|
|
+ width: 560rpx;
|
|
|
+ background: linear-gradient(180deg, #FFFAF6 0%, #FEECD8 100%);
|
|
|
+ border-radius: 32rpx 32rpx 32rpx 32rpx;
|
|
|
+ background-color: #fff;
|
|
|
+ font-weight: 400;
|
|
|
+ padding: 32rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ position: relative;
|
|
|
+ @include u-flex(column, center, flex-start);
|
|
|
+ font-family: PingFang SC, PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+
|
|
|
+ .tipimg {
|
|
|
+ width: 206rpx;
|
|
|
+ height: 206rpx;
|
|
|
+ margin-bottom: 16rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ &-title {
|
|
|
+ font-weight: 600;
|
|
|
+ font-size: 36rpx;
|
|
|
+ color: #222222;
|
|
|
+ }
|
|
|
+
|
|
|
+ &-desc {
|
|
|
+ margin-top: 10rpx;
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #757575;
|
|
|
+ }
|
|
|
+
|
|
|
+ &-btn {
|
|
|
+ width: 464rpx;
|
|
|
+ height: 84rpx;
|
|
|
+ margin-top: 54rpx;
|
|
|
+ margin-bottom: 16rpx;
|
|
|
+ background: #FF5C03;
|
|
|
+ border-radius: 42rpx;
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 32rpx;
|
|
|
+ color: #FFFFFF;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 84rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .popupbox {
|
|
|
+ width: 100%;
|
|
|
+ background-color: #fff;
|
|
|
+ border-radius: 16rpx 16rpx 0 0;
|
|
|
+ padding: 24rpx 32rpx;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ &-head {
|
|
|
+ height: 60rpx;
|
|
|
+ margin-bottom: 30rpx;
|
|
|
+ text-align: center;
|
|
|
+ overflow-y: auto;
|
|
|
+ color: #414858;
|
|
|
+ font-size: 32rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .close-icon {
|
|
|
+ position: absolute;
|
|
|
+ right: 0;
|
|
|
+ top: 0;
|
|
|
+ height: 40rpx;
|
|
|
+ width: 40rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ &-content {
|
|
|
+ height: 20vh;
|
|
|
+ overflow-y: auto;
|
|
|
+ display: flex;
|
|
|
+ align-items: flex-start;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ gap: 32rpx;
|
|
|
+
|
|
|
+ .line-item {
|
|
|
+ display: inline-block;
|
|
|
+ min-width: 200rpx;
|
|
|
+ min-height: 60rpx;
|
|
|
+ padding: 0 20rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ border-radius: 50rpx;
|
|
|
+ overflow: hidden;
|
|
|
+ background-color: #f7f7f7;
|
|
|
+ text-align: center;
|
|
|
+ color: #414858;
|
|
|
+ font-size: 28rpx;
|
|
|
+ line-height: 60rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .line-active {
|
|
|
+ color: #f56c6c !important;
|
|
|
+ background-color: #fef0f0 !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .content {
|
|
|
+ padding-bottom: calc(var(--window-bottom) + 164rpx);
|
|
|
+ .video-box {
|
|
|
+ width: 100%;
|
|
|
+ height: 420rpx;
|
|
|
+ overflow: hidden;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ #myVideo {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .video-poster {
|
|
|
+ width: 100%;
|
|
|
+ height: 420rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .miantitlebox {
|
|
|
+ padding: 30rpx 0;
|
|
|
+ border-bottom: 2rpx solid #F5F7FA;
|
|
|
+ font-family: PingFang SC, PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 40rpx;
|
|
|
+ color: #222222;
|
|
|
+ }
|
|
|
+
|
|
|
+ .subtitlebox {
|
|
|
+ padding: 30rpx 0;
|
|
|
+ border-bottom: 2rpx solid #F5F7FA;
|
|
|
+ font-family: PingFang SC, PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 40rpx;
|
|
|
+ color: #222222;
|
|
|
+ }
|
|
|
+
|
|
|
+ .title-content {
|
|
|
+ padding: 0 32rpx;
|
|
|
+ background-color: #fff;
|
|
|
+ font-size: 28rpx;
|
|
|
+ line-height: 1.6;
|
|
|
+
|
|
|
+ .title {
|
|
|
+ font-size: 36rpx;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #414858;
|
|
|
+ }
|
|
|
+
|
|
|
+ .time-or-subtitle {
|
|
|
+ margin-top: 12rpx;
|
|
|
+ color: #666666;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .descbox {
|
|
|
+ padding: 36rpx 32rpx;
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+ background-color: #fff;
|
|
|
+ font-family: PingFang SC, PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #222222;
|
|
|
+ line-height: 42rpx;
|
|
|
+ word-break: break-word;
|
|
|
+
|
|
|
+ &-title {
|
|
|
+ margin-bottom: 24rpx;
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 32rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ &-info {
|
|
|
+ margin-bottom: 24rpx;
|
|
|
+ @include u-flex(row, center, space-between);
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: #757575;
|
|
|
+
|
|
|
+ &-l {
|
|
|
+ flex: 1;
|
|
|
+ @include u-flex(row, center, flex-start);
|
|
|
+ }
|
|
|
+
|
|
|
+ &-time {
|
|
|
+ margin-left: 18rpx;
|
|
|
+ padding-left: 18rpx;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ &::after {
|
|
|
+ content: "";
|
|
|
+ width: 4rpx;
|
|
|
+ height: 4rpx;
|
|
|
+ background: #999999;
|
|
|
+ border-radius: 50%;
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ top: 50%;
|
|
|
+ transform: translateY(-50%);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ &-r {
|
|
|
+ background: transparent;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ &-desc {
|
|
|
+ overflow: hidden;
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .expand {
|
|
|
+ flex-shrink: 0;
|
|
|
+ @include u-flex(row, center, flex-end);
|
|
|
+ color: #FF5C03;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 24rpx;
|
|
|
+
|
|
|
+ image {
|
|
|
+ width: 32rpx;
|
|
|
+ height: 32rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .expand-ab {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ right: 0;
|
|
|
+ box-shadow: -50rpx 0 20rpx 8rpx #FFFFFF;
|
|
|
+ background-color: #fff;
|
|
|
+ }
|
|
|
+
|
|
|
+ .ques-content {
|
|
|
+ background-color: #fff;
|
|
|
+ padding: 40rpx 32rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ font-family: PingFang SC, PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #222222;
|
|
|
+ }
|
|
|
+
|
|
|
+ .ques-content-tit {
|
|
|
+ font-family: PingFang SC, PingFang SC;
|
|
|
+ font-weight: 600;
|
|
|
+ font-size: 36rpx;
|
|
|
+ color: #222222;
|
|
|
+ }
|
|
|
+
|
|
|
+ .ques-title {
|
|
|
+ margin: 48rpx 0 34rpx 0;
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 32rpx;
|
|
|
+ white-space: normal;
|
|
|
+ }
|
|
|
+
|
|
|
+ .ques-type {
|
|
|
+ flex-shrink: 0;
|
|
|
+ min-width: 72rpx;
|
|
|
+ min-height: 40rpx;
|
|
|
+ padding: 0 12rpx;
|
|
|
+ margin: 0 12rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ background: #FF5C03;
|
|
|
+ border-radius: 8rpx 8rpx 8rpx 8rpx;
|
|
|
+ line-height: 40rpx;
|
|
|
+ text-align: center;
|
|
|
+ font-family: PingFang SC, PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #FFFFFF;
|
|
|
+ display: inline-block;
|
|
|
+ }
|
|
|
+
|
|
|
+ .ques-option {
|
|
|
+ min-height: 88rpx;
|
|
|
+ padding: 24rpx 32rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ margin-bottom: 24rpx;
|
|
|
+ background: #F5F7FA;
|
|
|
+ border-radius: 16rpx 16rpx 16rpx 16rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ &-active {
|
|
|
+ color: #FF5C03 !important;
|
|
|
+ background: #FCF0E7 !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .video-line {
|
|
|
+ min-width: 140rpx;
|
|
|
+ max-width: 200rpx;
|
|
|
+ height: 60rpx;
|
|
|
+ padding: 0 20rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ border-radius: 50rpx 0 0 50rpx;
|
|
|
+ overflow: hidden;
|
|
|
+ background-color: #fff;
|
|
|
+ text-align: center;
|
|
|
+ color: #888;
|
|
|
+ font-size: 28rpx;
|
|
|
+ line-height: 60rpx;
|
|
|
+ display: inline-flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ position: fixed;
|
|
|
+ right: 0;
|
|
|
+ z-index: 9;
|
|
|
+ bottom: calc(var(--window-bottom) + 280rpx);
|
|
|
+ box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, .12);
|
|
|
+
|
|
|
+ image {
|
|
|
+ flex-shrink: 0;
|
|
|
+ height: 30rpx;
|
|
|
+ width: 30rpx;
|
|
|
+ margin-right: 6rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .footer {
|
|
|
+ border-top: 1rpx solid #ededef;
|
|
|
+ background: #fff;
|
|
|
+ width: 100%;
|
|
|
+ position: fixed;
|
|
|
+ bottom: 0;
|
|
|
+ padding: 32rpx;
|
|
|
+ // padding-bottom: calc(var(--window-bottom) + 14rpx);
|
|
|
+ box-sizing: border-box;
|
|
|
+ z-index: 0;
|
|
|
+
|
|
|
+ &-btn {
|
|
|
+ width: 100%;
|
|
|
+ height: 98rpx;
|
|
|
+ background: #FF5C03;
|
|
|
+ border-radius: 49rpx 49rpx 49rpx 49rpx;
|
|
|
+ line-height: 98rpx;
|
|
|
+ text-align: center;
|
|
|
+ font-family: PingFang SC, PingFang SC;
|
|
|
+ font-weight: 600;
|
|
|
+ font-size: 32rpx;
|
|
|
+ color: #FFFFFF;
|
|
|
+ @include u-flex(row, center, center);
|
|
|
+
|
|
|
+ &-img {
|
|
|
+ flex-shrink: 0;
|
|
|
+ width: 144rpx;
|
|
|
+ height: 144rpx;
|
|
|
+ margin-right: 8rpx;
|
|
|
+ margin-top: -24rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ &-btn-border {
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ &::after {
|
|
|
+ content: "";
|
|
|
+ background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
|
|
|
+ position: absolute;
|
|
|
+ top: -2rpx;
|
|
|
+ left: 0;
|
|
|
+ height: 103rpx;
|
|
|
+ width: 100%;
|
|
|
+ z-index: -1;
|
|
|
+ border-radius: 49rpx 49rpx 49rpx 49rpx;
|
|
|
+ box-shadow: 0rpx 8rpx 11rpx 0rpx rgba(255, 92, 3, 0.3);
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .agreement {
|
|
|
+ display: inline-flex;
|
|
|
+ margin-top: 16rpx;
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #525252;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .nocourse {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ padding-bottom: 88rpx;
|
|
|
+ justify-content: center;
|
|
|
+ font-family: PingFang SC, PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 32rpx;
|
|
|
+ color: #757575;
|
|
|
+ line-height: 48rpx;
|
|
|
+ text-align: center;
|
|
|
+
|
|
|
+ image {
|
|
|
+ width: 328rpx;
|
|
|
+ height: auto;
|
|
|
+ margin-bottom: 30rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .logo {
|
|
|
+ display: inline-block;
|
|
|
+ width: 30px;
|
|
|
+ height: auto;
|
|
|
+ margin: 20px 0 0 10px;
|
|
|
+ pointer-events: none;
|
|
|
+ object-fit: cover;
|
|
|
+ }
|
|
|
+ .logo-full {
|
|
|
+ display: inline-block;
|
|
|
+ width: 40px;
|
|
|
+ height: auto;
|
|
|
+ margin: 50px 0 0 30px;
|
|
|
+ pointer-events: none;
|
|
|
+ object-fit: cover;
|
|
|
+ }
|
|
|
</style>
|