|
|
@@ -1,2303 +1,366 @@
|
|
|
-<!-- 自动发课看课页面 -->
|
|
|
<template>
|
|
|
- <view class="content">
|
|
|
- <view class="header-nav" :style="{height: `calc(88rpx + ${statusBarHeight}px)`,paddingTop: statusBarHeight + 'px'}">
|
|
|
- <view class="arrow-left-warning" @click="navback" v-if="isOpen==1">
|
|
|
- <u-icon name="arrow-left" size='22' color="#222" bold></u-icon>
|
|
|
- </view>
|
|
|
- <view class="arrow-left-warning" v-else @click="feedback">
|
|
|
- <image :src="imgPath+'/app/image/warning.png'"></image>
|
|
|
- <text>投诉</text>
|
|
|
- </view>
|
|
|
- <view class="header-title" :style="{width:menuButtonLeft + 'px',height:menuButtonH+'px',lineHeight:menuButtonH+'px'}">{{courseInfo.title}}</view>
|
|
|
+ <view class="kc_bg">
|
|
|
+ <view class="header-nav" :style="{height: `calc(44px + ${statusBarHeight}px)`,paddingTop: statusBarHeight + 'px'}">
|
|
|
+ <image class="back_icon" :src="baseUrl+'/course/images/course_home.png'" mode="aspectFill" @click="goHome()"></image>
|
|
|
</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"
|
|
|
- @controlstoggle="controlstoggle"
|
|
|
- @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="showProgress"
|
|
|
- :picture-in-picture-mode="[]"
|
|
|
- :show-background-playback-button="false"
|
|
|
- :src="videoUrl">
|
|
|
- <!-- logo -->
|
|
|
- <!-- 弹幕展示 -->
|
|
|
- <template v-if="showDanmu==1&&openCommentStatus==2">
|
|
|
- <text v-for="(item, index) in activeDanmus" :key="item.commentId" class="danmu-item danmuMove"
|
|
|
- :style="item.danmustyle" @animationend="animationend(item,index)">
|
|
|
- {{ item.content }}
|
|
|
- </text>
|
|
|
- </template>
|
|
|
- <cover-view class="video-danmu-btnbox" :style="{display: openCommentStatus==2&&isfull&&crtShow&&isLogin&&isAddKf==1 ? 'block':'none'}">
|
|
|
- <cover-image class="video-danmu-image" :src="imgPath+'/app/image/danmu_set.png'" @click="openDanmu(1)"></cover-image>
|
|
|
- </cover-view>
|
|
|
- <cover-image v-if="courseLogo" :class="isfull?'logo-full':'logo'" :src="courseLogo" mode="widthFix"></cover-image>
|
|
|
- </video>
|
|
|
- </view>
|
|
|
- <!-- 弹幕方法 -->
|
|
|
- <commentBox
|
|
|
- v-if="openCommentStatus==2"
|
|
|
- ref="danmuBox"
|
|
|
- :height="height"
|
|
|
- :urlOption="urlOption"
|
|
|
- :time="playTime"
|
|
|
- :showDanmu="showDanmu"
|
|
|
- :viewCommentNum="viewCommentNum"
|
|
|
- :openCommentStatus="openCommentStatus"
|
|
|
- @setInputText="setInputText"
|
|
|
- @getScrollTop="getScrollTop"
|
|
|
- @getMore="getMore"
|
|
|
- @getActiveDanmus="getActiveDanmus"></commentBox>
|
|
|
- <view id="title-contentnav">
|
|
|
- <view class="title-content" v-show="openCommentStatus!=1">
|
|
|
- <!-- 答题时展示小节课程名，其他展示课程名 -->
|
|
|
- <!-- 小节课程名 -->
|
|
|
- <view class="subtitlebox" v-if="isLogin&&isAddKf==1">
|
|
|
- {{courseInfo.title}}
|
|
|
- </view>
|
|
|
- <!-- 课程名字 -->
|
|
|
- <view class="miantitlebox" v-else>
|
|
|
- {{courseInfo.courseName}}
|
|
|
+ <view class="kc_body" :style="{paddingTop: `calc(44px + ${statusBarHeight}px + 32rpx)`}">
|
|
|
+ <view class="coursebox-bg" :class="'coursebox-bg'+templateId">
|
|
|
+ <view class="coursebox" @click="getLink(1)">
|
|
|
+ <image class="coursebox-img" :src="configJson.coverImg||courseInfo.imgUrl" mode="aspectFill"></image>
|
|
|
+ <view class="coursebox-title x-ac" :class="'text_clip'+templateId">
|
|
|
+ <image class="star" :src="baseUrl+'/course/images/course_star.png'"></image>
|
|
|
+ <view>{{courseInfo.title}}</view>
|
|
|
+ <image class="star" :src="baseUrl+'/course/images/course_star.png'" style="transform: scaleX(-1);"></image>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</view>
|
|
|
- <view class="tabbox" v-if="openCommentStatus==1">
|
|
|
- <view :class="currentTab == nav.id ? 'tabbox-active':''" v-for="nav in navList" :key="nav.id" @click="handleTab(nav.id)">{{nav.name}}</view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <scroll-view
|
|
|
- class="scroll-view"
|
|
|
- :style="{height: height}"
|
|
|
- :scroll-top="scrollTop"
|
|
|
- :scroll-y="true"
|
|
|
- :refresher-enabled="currentTab == 2"
|
|
|
- :refresher-triggered="triggered"
|
|
|
- @refresherrefresh="handleRefresher">
|
|
|
- <template v-if="openCommentStatus==1">
|
|
|
- <view v-show="currentTab==0">
|
|
|
- <descInfoNav ref="descInfoNav" :isLogin="isLogin" :isAddKf="isAddKf" :courseInfo="courseInfo"></descInfoNav>
|
|
|
+ <view class="btn" :class="'btn'+templateId" @click="getLink(1)">点击开始观看</view>
|
|
|
+ <view class="title" :class="'title'+templateId">{{title}}</view>
|
|
|
+ <view class="desc-box line" :class="'desc-box'+templateId+' line'+templateId" v-if="configJson.complaintPhone">监督投诉电话：{{configJson.complaintPhone}}</view>
|
|
|
+ <view class="desc-box x-baseline mt40" :class="'desc-box'+templateId" v-if="configJson.tvEnable" @click="showImg(configJson.tvImg)">
|
|
|
+ <view class="label-dot"></view>
|
|
|
+ <text class="label">首播电视台：</text>
|
|
|
+ <view v-if="configJson.tv">
|
|
|
+ <view v-for="(it,index) in configJson.tv.split(',')">{{it}}</view>
|
|
|
</view>
|
|
|
- <view v-show="currentTab==2">
|
|
|
- <commentBox
|
|
|
- ref="commentBox"
|
|
|
- :height="height"
|
|
|
- :urlOption="urlOption"
|
|
|
- :time="playTime"
|
|
|
- :flagTime="flagTime"
|
|
|
- :showDanmu="showDanmu"
|
|
|
- :viewCommentNum="viewCommentNum"
|
|
|
- :openCommentStatus="openCommentStatus"
|
|
|
- @setInputText="setInputText"
|
|
|
- @getScrollTop="getScrollTop"
|
|
|
- @getMore="getMore"></commentBox>
|
|
|
- </view>
|
|
|
- </template>
|
|
|
- <view v-show="currentTab==1">
|
|
|
- <template v-if="openCommentStatus!=1&&(courseInfo.title || courseInfo.description)">
|
|
|
- <!-- 介绍 -->
|
|
|
- <descInfo ref="descInfo" :isLogin="isLogin" :isAddKf="isAddKf" :courseInfo="courseInfo"></descInfo>
|
|
|
- </template>
|
|
|
- <!-- 问题 -->
|
|
|
- <template v-if="isLogin&&isAddKf==1">
|
|
|
- <ques ref="ques" :quesList="quesList" :openCommentStatus="openCommentStatus" @handleAnswer="handleAnswer"></ques>
|
|
|
- </template>
|
|
|
</view>
|
|
|
- </scroll-view>
|
|
|
- <!-- 线路 -->
|
|
|
- <view class="video-line" @click="openPop" v-if="isLogin&&isAddKf==1">
|
|
|
- <image :src="imgPath+'/app/image/changePlayer-icon.png'"></image>
|
|
|
- <text>线路{{numberToChinese(lineIndex + 1)}}</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)">
|
|
|
- 线路{{numberToChinese(index + 1)}}</view>
|
|
|
+ <view class="desc-box x-baseline mt20" :class="'desc-box'+templateId" v-if="configJson.unitEnable" @click="showImg(configJson.unitImg)">
|
|
|
+ <view class="label-dot"></view>
|
|
|
+ <text class="label">制作单位：</text>
|
|
|
+ <view v-if="configJson.unit">
|
|
|
+ <view v-for="(it,index) in configJson.unit.split(',')">{{it}}</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
- </uni-popup>
|
|
|
- <!-- 温馨提示弹窗 -->
|
|
|
- <uni-popup ref="tipsPopup" type="center" :is-mask-click="false">
|
|
|
- <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>您已经观看课程一半的时间了，请注意休息并保持专注。</view>
|
|
|
- </view>
|
|
|
- <view class="tipsPopup-btn-box">
|
|
|
- <view class="tipsPopup-btn" @click="closeTipsPop">继续观看领奖励</view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
+ <view class="desc-box x-baseline mt20" :class="'desc-box'+templateId" v-if="configJson.networkEnable" @click="showImg(configJson.networkImg)">
|
|
|
+ <view class="label-dot"></view>
|
|
|
+ <text class="label">网络播放平台：</text>
|
|
|
+ <view v-if="configJson.network">
|
|
|
+ <view v-for="(it,index) in configJson.network.split(',')">{{it}}</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
- </uni-popup>
|
|
|
- <!-- 发送弹幕 -->
|
|
|
- <view class="video-line danmu-line" @click="openDanmu(0)" v-if="isLogin&&isAddKf==1&&openCommentStatus==2">
|
|
|
- <image class="set_image" :src="imgPath+'/app/image/danmu_set_black.png'" mode="aspectFill"></image>
|
|
|
- <text>发弹幕</text>
|
|
|
- </view>
|
|
|
- <!-- 发送弹幕弹窗 -->
|
|
|
- <uni-popup ref="danmuPopup" type="bottom" style="z-index: 999;" @change="changeShowPopup">
|
|
|
- <view class="danmuPopup" :style="{marginLeft:isfull ? statusBarHeight+'px': 0,marginBottom: danmuboxHeight+'px'}">
|
|
|
- <view class="danmuPopup-head border-line">
|
|
|
- <image class="danmu-icon" :src="showDanmu==0? imgPath+'/app/image/danmu-off.png':imgPath+'/app/image/danmu-on.png'" mode="heightFix" @click="switchDanmu()"></image>
|
|
|
- <view class="u-border">
|
|
|
- <input
|
|
|
- class="danmuPopup-input"
|
|
|
- placeholder="发个弹幕吧~"
|
|
|
- border="border"
|
|
|
- :focus="focus"
|
|
|
- :adjustPosition="false"
|
|
|
- :autoBlur="false"
|
|
|
- maxlength="50"
|
|
|
- v-model.trim="inputText" />
|
|
|
- <text style="font-size: 24rpx;color: #bbb;margin-left: 10rpx;">{{inputText?inputText.trim().length:0}}/50</text>
|
|
|
- </view>
|
|
|
- <button class="danmuPopup-send" @click="handleChatInput">发送</button>
|
|
|
+ <view class="desc-box x-baseline mt20" :class="'desc-box'+templateId" v-if="configJson.compereEnable">
|
|
|
+ <view class="label-dot"></view>
|
|
|
+ <text class="label">主讲人姓名：</text>
|
|
|
+ <view v-if="configJson.compere">
|
|
|
+ <view v-for="(it,index) in configJson.compere.split(',')">{{it}}</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
- </uni-popup>
|
|
|
- <!-- 答题弹窗 -->
|
|
|
- <uni-popup ref="answerPopup" type="center" :show="answerPopup">
|
|
|
- <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-if="isOpen!=1" v-html="errDesc"></view>
|
|
|
- <!-- 选择奖励 -->
|
|
|
- <view class="reward-list" v-if="errTitle == '恭喜你，回答正确'&&isOpen!=1">
|
|
|
- <radio-group class="reward-list-group" @change="rewardChange">
|
|
|
- <label class="reward-list-option" v-for="(item, index) in rewardType" :key="item.value">
|
|
|
- <radio :value="item.value+ ''" :checked="item.value == currentReward"
|
|
|
- activeBorderColor="#FF5C03" activeBackgroundColor="#FF5C03"
|
|
|
- style="transform:scale(0.7)" />
|
|
|
- <view :style="{color: item.value == currentReward ? '#FF5C03':''}">{{item.name}}</view>
|
|
|
- </label>
|
|
|
- </radio-group>
|
|
|
- </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 class="desc-box x-baseline mt20" :class="'desc-box'+templateId" v-if="configJson.compereTitleEnable" @click="showImg(configJson.compereTitleImg)">
|
|
|
+ <view class="label-dot"></view>
|
|
|
+ <text class="label">主讲人名头：</text>
|
|
|
+ <view v-if="configJson.compereTitle">
|
|
|
+ <view>{{configJson.compereTitle}}</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>
|
|
|
- </uni-popup>
|
|
|
- <!-- 可以答题提示 -->
|
|
|
- <view class="answerTip" v-if="isLogin&¤tTab!=1&&openCommentStatus==1&&showAnswerTip" @click="handleTab(1)">
|
|
|
- <text>开始</text>
|
|
|
- <text>答题</text>
|
|
|
- </view>
|
|
|
- <!-- 客服二维码弹窗 -->
|
|
|
- <uni-popup ref="kfPopup" type="center" :mask-click="false">
|
|
|
- <view class="kfqrcode-box">
|
|
|
- <image class="kfqrcode" :src="qrcode" show-menu-by-longpress="true"></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>
|
|
|
- </uni-popup>
|
|
|
- <!-- footer -->
|
|
|
- <view class="footer" v-show="currentTab!=2&&videoId">
|
|
|
- <view class="footer-btn" v-if="!isLogin || isAddKf !=1" @click="submit">
|
|
|
- <text>立即学习</text>
|
|
|
- </view>
|
|
|
- <view v-if="currentTab==1&&isLogin&&isAddKf==1&&quesList&&quesList.length>0" class="footer-btn footer-btn-border" @click="submit">
|
|
|
- <text>{{isOpen==1 ? '提交答案':'提交答案领取奖励'}}</text>
|
|
|
- </view>
|
|
|
- <!-- <view @click="checked=!checked" class="agreement" v-if="!isLogin">
|
|
|
- <radio value="r1" :checked="checked" color="#ff5c03" activeBorderColor="#ff5c03"
|
|
|
- style="transform:scale(0.6);" />
|
|
|
- <view>阅读并同意<text style="color: #ff5c03;" @click.stop="goWeb(0)">《用户协议》</text>和<text
|
|
|
- style="color: #ff5c03;" @click.stop="goWeb(1)">《隐私协议》</text></view>
|
|
|
- </view> -->
|
|
|
- <!-- <view class="footer-tips">重庆云联融智提供技术支持</view> -->
|
|
|
- </view>
|
|
|
- <view v-show="currentTab==2">
|
|
|
- <view class="chatinput" :style="{bottom:danmuboxHeight>0?danmuboxHeight+'px':'calc(var(--window-bottom) + 24rpx)'}">
|
|
|
- <input class="uni-input" v-model.trim="inputText" :adjustPosition="false" :autoBlur="false" maxlength="140" placeholder="发消息···" confirm-type="send" @confirm="handleChatInput" />
|
|
|
- <button class="send" @click="handleChatInput">发送</button>
|
|
|
</view>
|
|
|
</view>
|
|
|
+ <yk-screenRecord></yk-screenRecord>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
- import ques from "./components/ques.vue"
|
|
|
- import descInfo from "./components/descInfo.vue"
|
|
|
- import descInfoNav from "./components/descInfoNav.vue"
|
|
|
- import commentBox from "./components/commentBox.vue"
|
|
|
- import {TOKEN_KEYAuto,generateRandomString} from '@/utils/courseTool.js'
|
|
|
- import dayjs from 'dayjs';
|
|
|
- import { mapGetters } from 'vuex';
|
|
|
- import {
|
|
|
- getErrMsg,
|
|
|
- getH5CourseByVideoId,
|
|
|
- getH5CourseVideoDetails,
|
|
|
- courseAnswer,
|
|
|
- getFinishCourseVideo,
|
|
|
- getIsAddKf,
|
|
|
- getInternetTraffic,
|
|
|
- getIntegralByH5Video,
|
|
|
- sendReward,
|
|
|
- loginByMp,
|
|
|
- getRealLink
|
|
|
- } from "@/api/courseAuto.js"
|
|
|
- import {
|
|
|
- getConfigByKey
|
|
|
- } from "@/api/user.js"
|
|
|
- import {handleFsUserWx} from '@/api/courseLook.js'
|
|
|
+ import ykScreenRecord from '@/components/yk-screenRecord/yk-screenRecord';
|
|
|
+ import {getRealLink,getH5CourseByVideoId} from "@/api/courseAuto.js"
|
|
|
export default {
|
|
|
components: {
|
|
|
- descInfoNav,
|
|
|
- descInfo,
|
|
|
- commentBox,
|
|
|
- ques,
|
|
|
+ ykScreenRecord
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
- code: '',
|
|
|
- baseUrl:uni.getStorageSync('requestPath'),
|
|
|
- // 1 红包 2 积分
|
|
|
- rewardType: [{
|
|
|
- name: '红包奖励',
|
|
|
- value: 1
|
|
|
- }, {
|
|
|
- name: '积分奖励',
|
|
|
- value: 2
|
|
|
- }],
|
|
|
- currentReward: 1,
|
|
|
- player: null,
|
|
|
- loading: true,
|
|
|
- progress: 0,
|
|
|
+ templateId:1,
|
|
|
+ baseUrl:getApp().globalData.courseImg,
|
|
|
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: "",
|
|
|
- isAddKf: 0,
|
|
|
- lineIndex: 0,
|
|
|
- // 是否展开
|
|
|
- isExpand: true,
|
|
|
- textHeight: 0, //文本高度
|
|
|
- qwUserId: "",
|
|
|
- qrcode: "",
|
|
|
- corpId: "",
|
|
|
- qrcodeMsg: "",
|
|
|
+ title:'<<以下资料已审核>>',
|
|
|
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
|
|
|
- }
|
|
|
- },
|
|
|
+ videoId: '',
|
|
|
+ courseInfo: {},
|
|
|
+ loading: false,
|
|
|
+ configJson: {
|
|
|
+ broadcasting: '',
|
|
|
+ coverImg: "",
|
|
|
+ network: '',
|
|
|
+ compereTitle: '',
|
|
|
+ compere: '',
|
|
|
+ tv: '',
|
|
|
+ unit: '',
|
|
|
+ complaintPhone:''
|
|
|
},
|
|
|
- // 错误请求次数
|
|
|
- errorCount: 0,
|
|
|
- answerPopup: false,
|
|
|
- sortLink:"",
|
|
|
- // 课程是否过期
|
|
|
- isExpire: false,
|
|
|
- menuButtonLeft: 281,
|
|
|
- menuButtonH: 45,
|
|
|
- timer: null,
|
|
|
- flag: false,
|
|
|
- msg:'',
|
|
|
- poster:'',
|
|
|
- focus: false,
|
|
|
- openDanmuType: 0,
|
|
|
- danmuboxHeight: 0,
|
|
|
- user: {},
|
|
|
- crtShow: true,
|
|
|
- courseLogo: '',
|
|
|
- isfull: false,
|
|
|
- navList:[{
|
|
|
- id: 0,
|
|
|
- name: '介绍'
|
|
|
- },{
|
|
|
- id: 1,
|
|
|
- name: '答题'
|
|
|
- },{
|
|
|
- id: 2,
|
|
|
- name: '评论'
|
|
|
- }],
|
|
|
- currentTab: 1,
|
|
|
- triggered: false,
|
|
|
- // 没有更多
|
|
|
- isMore: false,
|
|
|
- inputText:"",
|
|
|
- // 获取最多历史评论条数
|
|
|
- viewCommentNum: 200,
|
|
|
- // 1-开启评论；2-开启弹幕；3-关闭
|
|
|
- openCommentStatus: 3,
|
|
|
- showAnswerTip: false,
|
|
|
- showDanmu: 1,
|
|
|
- activeDanmus:[],
|
|
|
- flagTime:0,
|
|
|
- showProgress: true,
|
|
|
- imgPath:this.$store.state.imgpath,
|
|
|
- videoitem:null,
|
|
|
- // 是否公开课
|
|
|
- isOpen: 0,
|
|
|
- }
|
|
|
- },
|
|
|
- //发送给朋友
|
|
|
- onShareAppMessage(res) {
|
|
|
- return {
|
|
|
- title: this.$store.state.logoname,
|
|
|
- path: '/pages/about/index',
|
|
|
- imageUrl: this.$store.state.imgpath+'/app/image/logoshare.png' //分享图标，路径可以是本地文件路径、代码包文件路径或者网络图片路径.支持PNG及JPG。显示图片长宽比是 5:4
|
|
|
+ isshowImg: 0
|
|
|
}
|
|
|
-
|
|
|
- },
|
|
|
- //分享到朋友圈
|
|
|
- onShareTimeline(res) {
|
|
|
- return {
|
|
|
- title: this.$store.state.logoname,
|
|
|
- path: '/pages/about/index',
|
|
|
- imageUrl: this.$store.state.imgpath+'/app/image/logoshare.png' //分享图标，路径可以是本地文件路径、代码包文件路径或者网络图片路径.支持PNG及JPG。显示图片长宽比是 5:4
|
|
|
- }
|
|
|
-
|
|
|
- },
|
|
|
- computed:{
|
|
|
- appid() {
|
|
|
- return this.$store.state.appid
|
|
|
- },
|
|
|
- isSpare() {
|
|
|
- return this.$store.state.isSpare
|
|
|
- },
|
|
|
- ...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) {
|
|
|
- this.getWebviewUrl()
|
|
|
- if(option.videoitem){
|
|
|
- this.isOpen = 1
|
|
|
- this.urlOption=JSON.parse(option.videoitem)
|
|
|
- this.urlOption = {
|
|
|
- ...this.urlOption,
|
|
|
- isOpen: 1
|
|
|
- }
|
|
|
- }else {
|
|
|
- this.isOpen = 0
|
|
|
- console.log(option)
|
|
|
- this.urlOption = option.course ? JSON.parse(option.course) : {}
|
|
|
- console.log(this.urlOption)
|
|
|
+ if (!option.course) {
|
|
|
+ const keys = decodeURIComponent(Object.keys(option)[0]);
|
|
|
+ this.urlOption = JSON.parse(keys.split('course=')[1])
|
|
|
+ } else {
|
|
|
+ this.urlOption = option.course ? JSON.parse(decodeURIComponent(option.course)) : {}
|
|
|
}
|
|
|
- uni.$on('usercode',(data)=>{
|
|
|
- if(this.isSpare == 1&&data) {
|
|
|
- this.code=data.code
|
|
|
- this.goLogin(data)
|
|
|
- }
|
|
|
- })
|
|
|
- this.videoId = this.urlOption.videoId
|
|
|
- this.qwUserId = this.urlOption.qwUserId || ''
|
|
|
- this.corpId = this.urlOption.corpId || ''
|
|
|
- this.videolinkType = this.urlOption.linkType || 0
|
|
|
-
|
|
|
- var that=this;
|
|
|
+ console.log("this.urlOption==",this.urlOption,option)
|
|
|
+ this.videoId = this.urlOption.videoId || ''
|
|
|
+ this.sortLink = this.urlOption.link || ''
|
|
|
if (this.videoId) {
|
|
|
this.getH5CourseByVideo()
|
|
|
}
|
|
|
- this.sortLink = this.urlOption.link || ''
|
|
|
- this.getMenuButton()
|
|
|
- // #ifndef H5
|
|
|
- uni.onKeyboardHeightChange(this.keyboardHeightChange);
|
|
|
- // #endif
|
|
|
},
|
|
|
onShow() {
|
|
|
- this.tipsOpen = false
|
|
|
- this.isExpand = true
|
|
|
- // this.isLogin = this.$isLoginCourseAuto()
|
|
|
- this.uuId = generateRandomString(16)
|
|
|
- if(uni.getStorageSync('auto_userInfo') && JSON.stringify(uni.getStorageSync('auto_userInfo'))!='{}') {
|
|
|
- this.user = JSON.parse(uni.getStorageSync('auto_userInfo'))
|
|
|
- } else {
|
|
|
- this.user = {}
|
|
|
- }
|
|
|
-
|
|
|
- if((this.sortLink||this.isOpen==1)&&!this.code){
|
|
|
+ if(this.isshowImg==1) return
|
|
|
+ if(this.sortLink){
|
|
|
this.getLink()
|
|
|
} else {
|
|
|
- if(this.code) return;
|
|
|
uni.showToast({
|
|
|
title: '链接地址有误',
|
|
|
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
|
|
|
- // }
|
|
|
- },
|
|
|
- onUnload() {
|
|
|
- uni.$off('usercode')
|
|
|
- if (this.interval != null) {
|
|
|
- clearInterval(this.interval)
|
|
|
- this.interval = null
|
|
|
- }
|
|
|
- this.clearIntegral()
|
|
|
- // #ifndef H5
|
|
|
- uni.offKeyboardHeightChange(this.keyboardHeightChange);
|
|
|
- // #endif
|
|
|
- },
|
|
|
- beforeDestroy() {
|
|
|
- uni.$off('usercode')
|
|
|
- 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()
|
|
|
- // #ifndef H5
|
|
|
- uni.offKeyboardHeightChange(this.keyboardHeightChange);
|
|
|
- // #endif
|
|
|
- },
|
|
|
methods: {
|
|
|
- getWebviewUrl() {
|
|
|
- var data = {
|
|
|
- key: 'course.config'
|
|
|
- }
|
|
|
- getConfigByKey(data).then(res => {
|
|
|
- if (res.code == 200) {
|
|
|
- console.log("getConfigByKey====", JSON.parse(res.data))
|
|
|
- let data = JSON.parse(res.data,)
|
|
|
- uni.setStorageSync('setWebviewUrl',data.userCourseAuthDomain)
|
|
|
- }else{
|
|
|
- uni.showToast({
|
|
|
- icon:'none',
|
|
|
- title: res.msg,
|
|
|
- });
|
|
|
- }
|
|
|
- })
|
|
|
- },
|
|
|
- numberToChinese(number) {
|
|
|
- if (number) {
|
|
|
- const chineseNumber = ['一', '二', '三', '四', '五', '六', '七', '八', '九'];
|
|
|
- return chineseNumber[number - 1];
|
|
|
- } else {
|
|
|
- return ''
|
|
|
- }
|
|
|
- },
|
|
|
- keyboardHeightChange(res) {
|
|
|
- // #ifndef H5
|
|
|
- console.log("this.danmuboxHeight",this.danmuboxHeight)
|
|
|
- this.danmuboxHeight = res.height
|
|
|
- // #endif
|
|
|
- },
|
|
|
- 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 {
|
|
|
- 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);
|
|
|
- }
|
|
|
- this.playTime = currentTime
|
|
|
- }
|
|
|
- if (Math.floor(e.detail.currentTime) != this.flagTime) {
|
|
|
- this.flagTime = Math.floor(e.detail.currentTime)
|
|
|
- let answerType = this.$store.state.answerType;
|
|
|
-
|
|
|
- this.showAnswerTip = answerType == 1 ? this.shouldShowByRate(this): this.shouldShowByLastMinute(this);
|
|
|
- if(this.openCommentStatus == 2) {
|
|
|
- this.$refs.danmuBox&&this.$refs.danmuBox.checkDanmu(this.flagTime)
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- // 工具函数：保留两位小数的百分比（0~100）
|
|
|
- calcPercent(play, total) {
|
|
|
- return Number(((play || 0) / (total || 1) * 100).toFixed(2));
|
|
|
- },
|
|
|
-
|
|
|
- // 策略1：按完课领红包
|
|
|
- shouldShowByRate({ playTime, duration, config }) {
|
|
|
- const finished = this.calcPercent(playTime, duration) >= Number(config?.answerRate || 100);
|
|
|
- return finished;
|
|
|
- },
|
|
|
-
|
|
|
- // 策略2：完课且最后一分钟可领（第二次进来只看是否已完课）
|
|
|
- shouldShowByLastMinute({ isEnded, isFinish, playTime, duration }) {
|
|
|
- const alreadyDone = isEnded || isFinish == 1; // 已完课
|
|
|
- const inLastMinute = playTime >= (duration || 0) - 60; // 最后一分钟
|
|
|
- return alreadyDone || inLastMinute;
|
|
|
- },
|
|
|
- changeTime(that,e) {
|
|
|
- that.playDurationSeek = 0
|
|
|
- },
|
|
|
- videoErrorCallback(e) {
|
|
|
- this.clearIntegral()
|
|
|
- this.errorCount++
|
|
|
- if (this.errorCount > 3) return
|
|
|
- if (this.interval != null) {
|
|
|
- clearInterval(this.interval)
|
|
|
- }
|
|
|
- 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.showAnswerTip = true
|
|
|
- // this.playDurationSeek = 0
|
|
|
- this.isFinish = 1
|
|
|
- this.showProgress = true
|
|
|
- this.getFinishCourseVideo()
|
|
|
- },
|
|
|
- fullscreenchange(event) {
|
|
|
- this.isfull = event.detail.fullScreen
|
|
|
- if(this.isfull) {
|
|
|
- this.$refs.danmuBox&&this.$refs.danmuBox.initTracks()
|
|
|
- }
|
|
|
- },
|
|
|
- controlstoggle(event) {
|
|
|
- this.crtShow = event.detail.show
|
|
|
- },
|
|
|
- getIP() {
|
|
|
- uni.request({
|
|
|
- url: 'https://ipinfo.io/json', //仅为示例，并非真实接口地址。
|
|
|
- method: 'GET',
|
|
|
- success: (res) => {
|
|
|
- this.ip = res.data.ip
|
|
|
- }
|
|
|
- });
|
|
|
- },
|
|
|
- getHeight() {
|
|
|
- setTimeout(()=>{
|
|
|
- const query = uni.createSelectorQuery().in(this);
|
|
|
- query
|
|
|
- .select("#title-contentnav")
|
|
|
- .boundingClientRect((data) => {
|
|
|
- if(data) {
|
|
|
- this.height =
|
|
|
- `calc(100vh - ${data.height}px - 420rpx - ${this.statusBarHeight}px - 75px - 88rpx)`
|
|
|
- }
|
|
|
- })
|
|
|
- .exec();
|
|
|
- },200)
|
|
|
- },
|
|
|
- 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
|
|
|
- }
|
|
|
+ showImg(img) {
|
|
|
+ //预览图片
|
|
|
+ this.isshowImg = 1
|
|
|
+ uni.previewImage({
|
|
|
+ urls: [img],
|
|
|
+ current: 0
|
|
|
+ });
|
|
|
+ },
|
|
|
+ goHome() {
|
|
|
+ uni.switchTab({
|
|
|
+ url: '/pages/index/index'
|
|
|
+ })
|
|
|
},
|
|
|
getH5CourseByVideo() {
|
|
|
- this.loading = true
|
|
|
+ uni.showLoading({
|
|
|
+ title: '加载中'
|
|
|
+ })
|
|
|
getH5CourseByVideoId({
|
|
|
videoId: this.videoId
|
|
|
}).then(res => {
|
|
|
- this.loading = false
|
|
|
- if (res.code == 200) {
|
|
|
- this.courseInfo = res.data
|
|
|
- uni.setNavigationBarTitle({
|
|
|
- title: this.courseInfo && this.courseInfo.title ? this.courseInfo.title : ''
|
|
|
- });
|
|
|
- }
|
|
|
- this.getHeight()
|
|
|
- this.$nextTick(()=>{
|
|
|
- this.$refs.descInfo&&this.$refs.descInfo.getDescHeight()
|
|
|
- this.$refs.descInfoNav&&this.$refs.descInfoNav.getDescHeight()
|
|
|
- })
|
|
|
- },
|
|
|
- rej => {
|
|
|
- this.loading = false
|
|
|
- }
|
|
|
- ).catch(() => {
|
|
|
- this.loading = false
|
|
|
- })
|
|
|
- },
|
|
|
- getH5CourseVideoDetails(type) {
|
|
|
- getH5CourseVideoDetails(this.urlOption).then(res => {
|
|
|
- if (res.code == 200) {
|
|
|
- this.config = res.config || {}
|
|
|
- this.courseLogo = res.config&&res.config.courseLogo
|
|
|
- this.isFinish = res.isFinish || 0
|
|
|
- this.duration = res.course && res.course.duration ? res.course.duration : 0
|
|
|
- this.playDuration = res.playDuration || 0
|
|
|
- this.tipsTime = res.tipsTime || 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
|
|
|
- this.viewCommentNum = res.config&&res.config.viewCommentNum || 200
|
|
|
-
|
|
|
- const status = res.config&&res.config.openCommentStatus || 3
|
|
|
- if(status != this.openCommentStatus) {
|
|
|
- if(this.openCommentStatus != 3 && status==3) {
|
|
|
- this.$refs.commentBox&&this.$refs.commentBox.closeWSocket()
|
|
|
- this.$refs.danmuBox&&this.$refs.danmuBox.closeWSocket()
|
|
|
- }
|
|
|
- this.openCommentStatus = this.isOpen == 1 ? 3: status
|
|
|
- }
|
|
|
- this.currentTab = 1
|
|
|
- if(this.openCommentStatus!=2 || this.showDanmu!=1) {
|
|
|
- this.activeDanmus = []
|
|
|
- }
|
|
|
- if (!this.player || type == 'error') {
|
|
|
- this.lineIndex = this.config.defaultLine
|
|
|
- this.videoUrl = lineList[this.lineIndex]
|
|
|
- this.poster= res.course && res.course.imgUrl ? res.course.imgUrl : ''
|
|
|
- // 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
|
|
|
- this.playDurationSeek = this.playTime
|
|
|
- setTimeout(()=>{
|
|
|
- this.player = uni.createVideoContext('video-content-box');
|
|
|
- this.player.seek(this.playTime)
|
|
|
- this.player.play();
|
|
|
- },500);
|
|
|
- } 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.playDurationSeek = this.playTime
|
|
|
- this.player.seek(this.playTime)
|
|
|
- this.player.play();
|
|
|
- }
|
|
|
- this.updateTime();
|
|
|
- this.quesList = res.questions && res.questions.length > 0 ? res.questions : [],
|
|
|
- this.quesList = this.quesList.map(item => ({
|
|
|
- ...item,
|
|
|
- questionOption: JSON.parse(item.question),
|
|
|
- answer: ''
|
|
|
- }))
|
|
|
- }
|
|
|
- this.getHeight()
|
|
|
- this.$nextTick(()=>{
|
|
|
- this.$refs.descInfo&&this.$refs.descInfo.getDescHeight()
|
|
|
- this.$refs.descInfoNav&&this.$refs.descInfoNav.getDescHeight()
|
|
|
- })
|
|
|
- },
|
|
|
- rej => {}
|
|
|
- )
|
|
|
- },
|
|
|
- handleAnswer(val) {
|
|
|
- let {item, option,index} = val
|
|
|
- if(this.$store.state.answerType == 1) {
|
|
|
- // 按照完课领红包
|
|
|
- let rate = 0
|
|
|
- if(this.isEnded || this.isFinish==1) {
|
|
|
- rate = 1
|
|
|
- } else {
|
|
|
- rate = (Number(this.playTime || 0) / Number(this.duration || 0)).toFixed(2)
|
|
|
- }
|
|
|
- if(Number(this.duration || 0) == 0 || rate*100 < Number(this.config.answerRate || 100)) {
|
|
|
- uni.showToast({
|
|
|
- title: "请先观看完整课程再答题哦～",
|
|
|
- icon: "none"
|
|
|
- })
|
|
|
- return
|
|
|
- }
|
|
|
- } else {
|
|
|
- // 按照完课且最后一分钟领红包（完课第二次进来就不需要最后一分钟）
|
|
|
- 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[index].type == 1) {
|
|
|
- // 单选option
|
|
|
- this.quesList[index].answer = option.name
|
|
|
- } else if (this.quesList[index].type == 2) {
|
|
|
- // 多选
|
|
|
- let answer = this.quesList[index].answer ? this.quesList[index].answer.split(',') : []
|
|
|
- if (answer.indexOf(option.name) === -1) {
|
|
|
- answer.push(option.name)
|
|
|
- this.quesList[index].answer = answer.join(',')
|
|
|
- } else {
|
|
|
- answer.splice(answer.indexOf(option.name), 1)
|
|
|
- this.quesList[index].answer = answer.join(',')
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- submit() {
|
|
|
- if(this.isExpire){
|
|
|
- uni.showToast({
|
|
|
- title: '课程已过期或链接无效',
|
|
|
- icon: 'none'
|
|
|
- });
|
|
|
- return
|
|
|
- }
|
|
|
- // 登录
|
|
|
- this.$isLoginCourseAuto().then(
|
|
|
- res => {
|
|
|
- if(res){
|
|
|
- if (this.isAddKf == 1) {
|
|
|
- // 答题
|
|
|
- // 您已提交过答案，请领取红包
|
|
|
- this.courseAnswer()
|
|
|
- } else {
|
|
|
- // 添加客服
|
|
|
- if (this.videoId && this.qwUserId) {
|
|
|
- this.getIsAddKf()
|
|
|
- } else {
|
|
|
- uni.showToast({
|
|
|
- title: '请添加客服',
|
|
|
- icon: 'none'
|
|
|
- })
|
|
|
- }
|
|
|
- }
|
|
|
- } else{
|
|
|
- this.goLogin()
|
|
|
- }
|
|
|
- },
|
|
|
- rej => {}
|
|
|
- );
|
|
|
- },
|
|
|
- // 答题
|
|
|
- courseAnswer() {
|
|
|
- if(this.$store.state.answerType == 1) {
|
|
|
- // 按照完课领红包
|
|
|
- let rate = 0
|
|
|
- if(this.isEnded || this.isFinish==1) {
|
|
|
- rate = 1
|
|
|
- } else {
|
|
|
- rate = (Number(this.playTime || 0) / Number(this.duration || 0)).toFixed(2)
|
|
|
- }
|
|
|
- if(Number(this.duration || 0) == 0 || rate*100 < Number(this.config.answerRate || 100)) {
|
|
|
- uni.showToast({
|
|
|
- title: "请先观看完整课程再答题哦～",
|
|
|
- icon: "none"
|
|
|
- })
|
|
|
- return
|
|
|
- }
|
|
|
- } else {
|
|
|
- // 按照完课且最后一分钟领红包（完课第二次进来就不需要最后一分钟）
|
|
|
- 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,
|
|
|
- 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.errTitle = "很遗憾答错了"
|
|
|
- this.errDesc = `<span style="color:#FF5C03">还有${res.remain}次机会，继续加油</span>`
|
|
|
- this.$refs.answerPopup.open("center")
|
|
|
- }
|
|
|
- } else {
|
|
|
- // 答题成功
|
|
|
- this.errTitle = "恭喜你，回答正确"
|
|
|
- this.errDesc = `请选择奖励`
|
|
|
- // this.$refs.answerPopup.open("center")
|
|
|
- if(this.isOpen==1) {
|
|
|
- this.$refs.answerPopup.open("center")
|
|
|
- return
|
|
|
- }
|
|
|
- this.closeAnswerPopup(1)
|
|
|
- }
|
|
|
- } else {
|
|
|
- if (res.msg == "该课题到达答错次数限制") {
|
|
|
- this.errTitle = "答题次数超过限制"
|
|
|
- this.errDesc = "以后的课程要认真学习哦"
|
|
|
- this.$refs.answerPopup.open("center")
|
|
|
- } else {
|
|
|
- uni.showToast({
|
|
|
- title: res.msg,
|
|
|
- icon: "none"
|
|
|
- })
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- rej => {}
|
|
|
- )
|
|
|
- },
|
|
|
- // 选择
|
|
|
- rewardChange(e) {
|
|
|
- this.currentReward = e.detail.value
|
|
|
- },
|
|
|
- closeAnswerPopup(type) {
|
|
|
- this.$refs.answerPopup.close()
|
|
|
- if(this.isOpen==1) {
|
|
|
- return
|
|
|
- }
|
|
|
- if (this.errTitle == '恭喜你，回答正确') {
|
|
|
- let param = {
|
|
|
- ...this.urlOption,
|
|
|
- rewardType: Number(this.currentReward),
|
|
|
- source: 2,
|
|
|
- appId: this.appid
|
|
|
- }
|
|
|
- if(type==1) {
|
|
|
- param = {
|
|
|
- ...this.urlOption,
|
|
|
- source: 2,
|
|
|
- appId: this.appid
|
|
|
- }
|
|
|
- }
|
|
|
- sendReward(param).then(res => {
|
|
|
- if(res.isNew&&res.isNew==1) {
|
|
|
- const packageInfo = res.data.packageInfo || ''
|
|
|
- if(packageInfo) {
|
|
|
- uni.setStorageSync('receive_package',packageInfo);
|
|
|
- if(res.mchId) uni.setStorageSync('mchId',res.mchId);
|
|
|
- uni.navigateTo({
|
|
|
- url: '/pages_course/reward'
|
|
|
- })
|
|
|
- }
|
|
|
- } else {
|
|
|
- uni.showToast({
|
|
|
- title: res.msg,
|
|
|
- icon: 'none'
|
|
|
- })
|
|
|
- }
|
|
|
- })
|
|
|
- }
|
|
|
- },
|
|
|
- // 线路
|
|
|
- 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.tipsOpen = true
|
|
|
- this.pause()
|
|
|
- },
|
|
|
- closeTipsPop() {
|
|
|
- this.$refs.tipsPopup.close()
|
|
|
- },
|
|
|
- // 客服
|
|
|
- getIsAddKf() {
|
|
|
- this.qrcode = ''
|
|
|
- this.qrcodeMsg = ''
|
|
|
- this.isAddKf = 0
|
|
|
- // {videoId: this.videoId,qwUserId: this.qwUserId,corpId: this.corpId}
|
|
|
- getIsAddKf(this.urlOption).then(res => {
|
|
|
- if (res.code == 200) {
|
|
|
- this.isAddKf = 1
|
|
|
- this.getH5CourseVideoDetails()
|
|
|
- } else if (res.code == 400) {
|
|
|
- this.isAddKf = 0
|
|
|
- this.qrcode = res.qrcode
|
|
|
- this.qrcodeMsg = res.msg
|
|
|
- this.$refs.kfPopup.open()
|
|
|
- } else if (res.code == 504) {
|
|
|
- // 登录
|
|
|
- // this.goLogin()
|
|
|
- } else if (res.code == 566) {
|
|
|
- // 官方群发通用链接
|
|
|
- const url = res.courseLink.realLink.split('?course=')[1]
|
|
|
- this.urlOption = JSON.parse(url)
|
|
|
- this.isAddKf = 1
|
|
|
- this.getH5CourseVideoDetails()
|
|
|
- } else if (res.code == 567) {
|
|
|
- // 群聊通用链接
|
|
|
- this.urlOption = {
|
|
|
- ...this.urlOption,
|
|
|
- qwExternalId: res.qwExternalId
|
|
|
- }
|
|
|
- this.isAddKf = 1
|
|
|
- this.getH5CourseVideoDetails()
|
|
|
- } else {
|
|
|
- this.isAddKf = 0
|
|
|
- uni.showToast({
|
|
|
- title: res.msg,
|
|
|
- icon: 'none'
|
|
|
- });
|
|
|
- }
|
|
|
- },
|
|
|
- err => {}
|
|
|
- );
|
|
|
- },
|
|
|
- closeKFPop() {
|
|
|
- this.$refs.kfPopup.close()
|
|
|
- },
|
|
|
- getFinishCourseVideo() {
|
|
|
- if (!this.playTime || this.isAddKf!=1 ||!this.isLogin) return
|
|
|
- // {videoId: this.videoId,duration:this.playTime}
|
|
|
- const param = {
|
|
|
- duration: this.playTime,
|
|
|
- ...this.urlOption
|
|
|
- }
|
|
|
- getFinishCourseVideo(param)
|
|
|
- },
|
|
|
- // 每十分钟获得积分
|
|
|
- getIntegralByH5Video() {
|
|
|
- if(this.isAddKf!=1||!this.isLogin) return
|
|
|
- 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)
|
|
|
- },
|
|
|
- // 缓冲
|
|
|
- getInternetTraffic() {
|
|
|
- if(!this.isLogin||this.isAddKf!=1) return
|
|
|
- const playVideoTime = Math.ceil(this.playTime / this.duration * 100) // 播放百分比
|
|
|
- if(this.bufferRate == 0 || this.bufferRate < playVideoTime) {
|
|
|
- this.bufferRate = playVideoTime
|
|
|
- }
|
|
|
- if(this.bufferRate == 0 || Number(this.bufferRate.toFixed(2)) == 0) return
|
|
|
- const param = {
|
|
|
- ...this.urlOption,
|
|
|
- uuId: dayjs().format('YYYYMMDD') + this.uuId,
|
|
|
- duration: this.playTime,
|
|
|
- bufferRate: Number(this.bufferRate.toFixed(2)),
|
|
|
- }
|
|
|
- if(!param.bufferRate) return
|
|
|
- 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)
|
|
|
- })
|
|
|
- },
|
|
|
- goLogin(data) {
|
|
|
- if(data || this.isSpare==1) {
|
|
|
- this.loginFsUserWx(data)
|
|
|
- return
|
|
|
- }
|
|
|
- let provider = 'weixin'
|
|
|
- uni.login({
|
|
|
- provider: provider,
|
|
|
- success: async loginRes => {
|
|
|
- console.log(loginRes)
|
|
|
- uni.getUserInfo({
|
|
|
- provider: provider,
|
|
|
- success: (infoRes)=> {
|
|
|
- uni.showToast({
|
|
|
- title: '处理中...',
|
|
|
- icon: 'loading'
|
|
|
- });
|
|
|
- loginByMp({
|
|
|
- code: loginRes.code,
|
|
|
- encryptedData:infoRes.encryptedData,
|
|
|
- iv:infoRes.iv,
|
|
|
- appId: this.appid
|
|
|
- }).then(res=>{
|
|
|
- uni.hideLoading();
|
|
|
- if (res.code == 200) {
|
|
|
- this.$store.commit('setCoureLogin', 1);
|
|
|
- uni.setStorageSync(TOKEN_KEYAuto, res.token);
|
|
|
- uni.setStorageSync('auto_userInfo', JSON.stringify(res.user));
|
|
|
- this.user = res.user
|
|
|
- this.isLogin = true
|
|
|
- console.log("TOKEN_KEYAuto",TOKEN_KEYAuto)
|
|
|
- this.getIsAddKf()
|
|
|
- } else {
|
|
|
- uni.showToast({
|
|
|
- title: res.msg,
|
|
|
- icon: 'none'
|
|
|
- });
|
|
|
- }
|
|
|
- }).catch(err=>{
|
|
|
- uni.hideLoading();
|
|
|
- uni.showToast({
|
|
|
- icon:'none',
|
|
|
- title: "登录失败,请重新登录",
|
|
|
- });
|
|
|
- });
|
|
|
- }
|
|
|
- });
|
|
|
- }
|
|
|
+ this.courseInfo = res.data || {}
|
|
|
+ this.configJson = res.data&&res.data.configJson ? JSON.parse(res.data.configJson) : {};
|
|
|
+ console.log(this.configJson)
|
|
|
+ uni.hideLoading()
|
|
|
+ }).catch(() => {
|
|
|
+ uni.hideLoading()
|
|
|
})
|
|
|
},
|
|
|
- getLink() {
|
|
|
+ getLink(type) {
|
|
|
let that = this;
|
|
|
- this.msg = ''
|
|
|
- if(this.isOpen==1) {
|
|
|
- if (this.isLogin && this.isAddKf == 1) {
|
|
|
- this.getH5CourseVideoDetails()
|
|
|
- }
|
|
|
- if (this.videoId &&this.isAddKf != 1) {
|
|
|
- this.$isLoginCourseAuto().then(
|
|
|
- isLogin => {
|
|
|
- this.isLogin = isLogin
|
|
|
- if(isLogin){
|
|
|
- this.getIsAddKf()
|
|
|
- } else {
|
|
|
- this.goLogin()
|
|
|
- }
|
|
|
- },
|
|
|
- rej => {}
|
|
|
- );
|
|
|
- }
|
|
|
+ if(this.loading) {
|
|
|
return
|
|
|
}
|
|
|
+ this.isshowImg = type==1?0:this.isshowImg
|
|
|
+ uni.showLoading({
|
|
|
+ title: '加载中'
|
|
|
+ })
|
|
|
+ this.loading = true
|
|
|
getRealLink({sortLink:this.sortLink}).then(res=>{
|
|
|
+ uni.hideLoading()
|
|
|
+ this.loading = false
|
|
|
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.$isLoginCourseAuto().then(
|
|
|
- isLogin => {
|
|
|
- this.isLogin = isLogin
|
|
|
- if(isLogin){
|
|
|
- this.getIsAddKf()
|
|
|
- } else {
|
|
|
- this.goLogin()
|
|
|
- }
|
|
|
- },
|
|
|
- rej => {}
|
|
|
- );
|
|
|
+ if(type==1) {
|
|
|
+ uni.navigateTo({
|
|
|
+ url: '/pages_course/videoDetail?course='+ JSON.stringify(this.urlOption)
|
|
|
+ })
|
|
|
}
|
|
|
} else {
|
|
|
- this.isExpire = true
|
|
|
- this.msg = '课程已过期或链接无效'
|
|
|
+ uni.hideLoading()
|
|
|
uni.showToast({
|
|
|
title: '课程已过期或链接无效',
|
|
|
icon: 'none'
|
|
|
});
|
|
|
}
|
|
|
}).catch(err=>{
|
|
|
- this.isExpire = true
|
|
|
- this.msg = '发生错误，请稍后再试'
|
|
|
+ uni.hideLoading()
|
|
|
+ this.loading = false
|
|
|
uni.showToast({
|
|
|
title: '发生错误，请稍后再试',
|
|
|
icon: 'none'
|
|
|
});
|
|
|
})
|
|
|
},
|
|
|
- /**
|
|
|
- * 节流原理：在一定时间内，只能触发一次
|
|
|
- *
|
|
|
- * @param {Function} func 要执行的回调函数
|
|
|
- * @param {Number} wait 延时的时间
|
|
|
- * @param {Boolean} immediate 是否立即执行
|
|
|
- * @return null
|
|
|
- */
|
|
|
- throttle(func, wait = 1000, 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)
|
|
|
- }
|
|
|
- },
|
|
|
- // 弹幕
|
|
|
- openDanmu(type) {
|
|
|
- this.openDanmuType = type
|
|
|
- this.inputText = ''
|
|
|
- if(type == 1) {
|
|
|
- this.player.exitFullScreen()
|
|
|
- }
|
|
|
- this.$refs.danmuPopup.open()
|
|
|
- },
|
|
|
- changeShowPopup(val) {
|
|
|
- this.focus = val.show
|
|
|
- },
|
|
|
- switchDanmu() {
|
|
|
- this.showDanmu = this.showDanmu == 1 ? 0:1
|
|
|
- if(this.showDanmu == 0&&this.$refs.danmuBox) {
|
|
|
- this.$refs.danmuPopup.close()
|
|
|
- this.activeDanmus = []
|
|
|
- this.$refs.danmuBox.activeDanmus = []
|
|
|
- this.$refs.danmuBox.initTracks()
|
|
|
- }
|
|
|
- },
|
|
|
- getScrollTop(res) {
|
|
|
- if(this.currentTab == 2) {
|
|
|
- this.scrollTop = res
|
|
|
- } else {
|
|
|
- this.scrollTop = 0
|
|
|
- }
|
|
|
- },
|
|
|
- handleTab(index) {
|
|
|
- this.currentTab = index
|
|
|
- if(this.currentTab==2) {
|
|
|
- if(this.$refs.commentBox) {
|
|
|
- this.$refs.commentBox.msgs = []
|
|
|
- this.$refs.commentBox.pageNum = 1
|
|
|
- this.$refs.commentBox.getCommentsFun()
|
|
|
- }
|
|
|
- } else {
|
|
|
- setTimeout(()=>{
|
|
|
- this.scrollTop = 0
|
|
|
- },100)
|
|
|
- }
|
|
|
- },
|
|
|
- handleRefresher() {
|
|
|
- this.triggered = true;
|
|
|
- if (!this.isMore&&this.currentTab==2&&this.openCommentStatus==1) {
|
|
|
- this.$nextTick(()=>{
|
|
|
- this.$refs.commentBox&&this.$refs.commentBox.getCommentsFun()
|
|
|
- })
|
|
|
- }
|
|
|
- setTimeout(() => {
|
|
|
- this.triggered = false;
|
|
|
- }, 500);
|
|
|
- },
|
|
|
- getMore(val) {
|
|
|
- this.triggered = false;
|
|
|
- this.isMore = val == 1
|
|
|
- },
|
|
|
- handleChatInput() {
|
|
|
- this.inputText = this.inputText.trim()
|
|
|
- if (this.inputText == "" || this.inputText.trim() == "") {
|
|
|
- uni.showToast({
|
|
|
- title: '请输入评论',
|
|
|
- icon: "none"
|
|
|
- })
|
|
|
- return;
|
|
|
- }
|
|
|
- if(this.openCommentStatus==1) {
|
|
|
- this.$refs.commentBox&&this.$refs.commentBox.handleInput(this.inputText)
|
|
|
- } else if(this.openCommentStatus==2) {
|
|
|
- this.$refs.danmuBox&&this.$refs.danmuBox.handleInput(this.inputText)
|
|
|
- }
|
|
|
- },
|
|
|
- setInputText() {
|
|
|
- this.inputText = ""
|
|
|
- if(this.openCommentStatus==2) {
|
|
|
- this.$refs.danmuPopup.close()
|
|
|
- }
|
|
|
- },
|
|
|
- getActiveDanmus(val) {
|
|
|
- this.activeDanmus = val.map(item=>({
|
|
|
- ...item,
|
|
|
- danmustyle: {
|
|
|
- top: item.top + 'px',
|
|
|
- ...item.style,
|
|
|
- 'animation-duration': '8s'
|
|
|
- }
|
|
|
- }))
|
|
|
- },
|
|
|
- animationend(moveItem, i) {
|
|
|
- // 移除动画结束的弹幕（性能优化）
|
|
|
- if(this.openCommentStatus==2) {
|
|
|
- this.$refs.danmuBox&&this.$refs.danmuBox.animationend(moveItem, i)
|
|
|
- }
|
|
|
- },
|
|
|
- navback() {
|
|
|
- const pages = getCurrentPages(); // 获取当前页面栈
|
|
|
- if (pages.length > 1) {
|
|
|
- uni.navigateBack(); // 有上一页才返回
|
|
|
- } else {
|
|
|
- // 如果是首页，跳转到某个默认页面（如首页）
|
|
|
- uni.reLaunch({ url: '/pages/index/index' }); // 或者用 switchTab 如果是 tabBar 页面
|
|
|
- }
|
|
|
- },
|
|
|
- feedback() {
|
|
|
- const userId = this.user.userId || ''
|
|
|
- const courseId = this.urlOption.courseId || ''
|
|
|
- const videoId = this.urlOption.videoId || ''
|
|
|
- const companyId = this.urlOption.companyId || ''
|
|
|
- const companyUserId = this.urlOption.companyUserId || ''
|
|
|
- uni.navigateTo({
|
|
|
- url: './feedback?userId='+userId+'&courseId='+courseId+'&videoId='+videoId+'&companyId='+companyId+'&companyUserId='+companyUserId
|
|
|
- })
|
|
|
- },
|
|
|
- // 公开课登录\备用登录
|
|
|
- async loginFsUserWx(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 => {
|
|
|
- uni.hideLoading();
|
|
|
- if(res.code==200){
|
|
|
- console.log("loginFsUserWx:",res)
|
|
|
- // this.userinfos=uni.getStorageSync('userinfos')
|
|
|
- let token = uni.getStorageSync('TOKEN_WEXIN');
|
|
|
- let user = uni.getStorageSync('userInfo')
|
|
|
- // this.userInfo=uni.getStorageSync('userInfo');
|
|
|
- // this.isLogin = true
|
|
|
- uni.setStorageSync(TOKEN_KEYAuto, token);
|
|
|
- uni.setStorageSync('auto_userInfo', JSON.stringify(user));
|
|
|
- this.user = user
|
|
|
- this.isLogin = true
|
|
|
- this.getIsAddKf()
|
|
|
- }else if(res.code==406){
|
|
|
- uni.showToast({
|
|
|
- icon:'none',
|
|
|
- title: '该用户已成为其他销售会员',
|
|
|
- });
|
|
|
- }else{
|
|
|
- uni.showToast({
|
|
|
- icon:'none',
|
|
|
- title: res.msg,
|
|
|
- });
|
|
|
- }
|
|
|
-
|
|
|
- })
|
|
|
- },
|
|
|
- })
|
|
|
- }else{
|
|
|
- uni.setStorageSync('H5course',{
|
|
|
- companyId: this.urlOption.companyId,
|
|
|
- companyUserId:this.urlOption.companyUserId,
|
|
|
- type: 1, //1自动，其他手动
|
|
|
- })
|
|
|
- await this.$store.dispatch('getWebviewUrl');
|
|
|
- uni.navigateTo({
|
|
|
- url:'/pages_course/webview?H5course='+uni.getStorageSync('H5course')
|
|
|
- })
|
|
|
- }
|
|
|
- }
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
-<style scoped>
|
|
|
-.full-width-popup {
|
|
|
- width: 100%;
|
|
|
-}
|
|
|
-</style>
|
|
|
-<style lang="scss" scoped>
|
|
|
- @mixin u-flex($flexD, $alignI, $justifyC) {
|
|
|
- display: flex;
|
|
|
- flex-direction: $flexD;
|
|
|
- align-items: $alignI;
|
|
|
- justify-content: $justifyC;
|
|
|
- }
|
|
|
- .footer-tips {
|
|
|
- margin-top: 14rpx;
|
|
|
- text-align: center;
|
|
|
- font-family: PingFang SC,PingFang SC;
|
|
|
- font-weight: 500;
|
|
|
- font-size: 12px;
|
|
|
- color: #bbb;
|
|
|
- }
|
|
|
- .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%;
|
|
|
+<style scoped lang="scss">
|
|
|
+ .mt20 {
|
|
|
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;
|
|
|
+ .mt40 {
|
|
|
+ margin-top: 40rpx;
|
|
|
}
|
|
|
-
|
|
|
- .kfqrcode-box {
|
|
|
+ .kc_bg {
|
|
|
+ min-height: 100vh;
|
|
|
+ background-image: url('https://ysy-1329817240.cos.ap-guangzhou.myqcloud.com/course/images/kc_bg.png');
|
|
|
+ background-size: 100%;
|
|
|
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 {
|
|
|
+ .header-nav {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ position: fixed;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
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;
|
|
|
+ background-image: url('https://ysy-1329817240.cos.ap-guangzhou.myqcloud.com/course/images/kc_bg.png');
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-size: 100%;
|
|
|
+ background-position: top;
|
|
|
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%);
|
|
|
- }
|
|
|
+ background-color: #fff;
|
|
|
+ z-index: 9999;
|
|
|
}
|
|
|
-
|
|
|
- .video-controls {
|
|
|
- width: 100%;
|
|
|
- height: 80rpx;
|
|
|
- padding: 0 28rpx;
|
|
|
- box-sizing: border-box;
|
|
|
- position: absolute;
|
|
|
- bottom: 0;
|
|
|
- left: 0;
|
|
|
+ .back_icon {
|
|
|
+ height: 70rpx;
|
|
|
+ width: 70rpx;
|
|
|
+ padding-left: 28rpx;
|
|
|
+ }
|
|
|
+ .kc_body {
|
|
|
+ padding:36rpx 36rpx 120rpx 36rpx;
|
|
|
display: flex;
|
|
|
+ flex-direction: column;
|
|
|
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;
|
|
|
- }
|
|
|
-
|
|
|
- .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;
|
|
|
+ .title {
|
|
|
+ font-family: Source Han Sans CN;
|
|
|
font-weight: 500;
|
|
|
- font-size: 32rpx;
|
|
|
+ font-size: 38rpx;
|
|
|
color: #FFFFFF;
|
|
|
- text-align: center;
|
|
|
- line-height: 84rpx;
|
|
|
+ padding: 10rpx 60rpx;
|
|
|
+ border-radius: 4rpx;
|
|
|
+ display: inline-block;
|
|
|
+ margin-top: 54rpx;
|
|
|
}
|
|
|
- }
|
|
|
-
|
|
|
- .popupbox {
|
|
|
- width: 100%;
|
|
|
- background-color: #fff;
|
|
|
- border-radius: 16rpx 16rpx 0 0;
|
|
|
- padding: 24rpx 32rpx;
|
|
|
- position: relative;
|
|
|
-
|
|
|
- &-head {
|
|
|
- height: 60rpx;
|
|
|
- margin-bottom: 30rpx;
|
|
|
+ .line {
|
|
|
+ padding: 42rpx 0 27rpx 0;
|
|
|
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;
|
|
|
+ .x-baseline {
|
|
|
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;
|
|
|
- }
|
|
|
+ align-items: baseline;
|
|
|
}
|
|
|
- }
|
|
|
-
|
|
|
- .content {
|
|
|
- padding-bottom: calc(var(--window-bottom));
|
|
|
- .video-box {
|
|
|
+ .desc-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: 36rpx;
|
|
|
- color: #222222;
|
|
|
- }
|
|
|
-
|
|
|
- .subtitlebox {
|
|
|
- padding: 30rpx 0;
|
|
|
- border-bottom: 2rpx solid #F5F7FA;
|
|
|
- font-family: PingFang SC, PingFang SC;
|
|
|
- font-weight: 500;
|
|
|
- font-size: 36rpx;
|
|
|
- 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;
|
|
|
+ font-family: PingFang;
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 29rpx;
|
|
|
+ .label {
|
|
|
+ flex-shrink: 0;
|
|
|
}
|
|
|
-
|
|
|
- .time-or-subtitle {
|
|
|
- margin-top: 12rpx;
|
|
|
- color: #666666;
|
|
|
+ .label-dot {
|
|
|
+ width: 16rpx;
|
|
|
+ height: 16rpx;
|
|
|
+ border-radius: 50%;
|
|
|
+ margin: 0 6rpx;
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
- .video-line {
|
|
|
- min-width: 140rpx;
|
|
|
- max-width: 200rpx;
|
|
|
- height: 60rpx;
|
|
|
- padding: 0 20rpx;
|
|
|
- box-sizing: border-box;
|
|
|
- border-radius: 50rpx 0 0 50rpx;
|
|
|
+ .coursebox-bg {
|
|
|
+ position: relative;
|
|
|
+ padding: 4rpx;
|
|
|
+ border-radius: 29rpx;
|
|
|
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: 34rpx;
|
|
|
- width: 34rpx;
|
|
|
- margin-right: 6rpx;
|
|
|
- }
|
|
|
}
|
|
|
- .danmu-line {
|
|
|
- bottom: calc(var(--window-bottom) + 370rpx);
|
|
|
- word-break: keep-all;
|
|
|
- .set_image {
|
|
|
- height: 40rpx;
|
|
|
- width: 40rpx;
|
|
|
+ .coursebox {
|
|
|
+ position: relative;
|
|
|
+ z-index: 2;
|
|
|
+ background: #FFFFFF;
|
|
|
+ border-radius: 29rpx;
|
|
|
+ padding: 20rpx 20rpx 0 20rpx;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ &-img {
|
|
|
+ height: 362rpx;
|
|
|
+ width: 633rpx;
|
|
|
+ border-radius: 16rpx;
|
|
|
}
|
|
|
- }
|
|
|
-
|
|
|
- .footer {
|
|
|
- border-top: 1rpx solid #ededef;
|
|
|
- background: #fff;
|
|
|
- width: 100%;
|
|
|
- position: fixed;
|
|
|
- bottom: 0;
|
|
|
- padding: 32rpx;
|
|
|
- padding-bottom: calc(var(--window-bottom) + 12rpx);
|
|
|
- box-sizing: border-box;
|
|
|
- z-index: 9;
|
|
|
-
|
|
|
- &-btn {
|
|
|
- width: 100%;
|
|
|
- height: 98rpx;
|
|
|
- background: #FF5C03;
|
|
|
- border-radius: 49rpx 49rpx 49rpx 49rpx;
|
|
|
- line-height: 98rpx;
|
|
|
+ &-title {
|
|
|
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;
|
|
|
- }
|
|
|
+ margin: 40rpx 0;
|
|
|
+ font-family: Source Han Sans CN;
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 45rpx;
|
|
|
+ line-height: 51rpx;
|
|
|
}
|
|
|
-
|
|
|
- &-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;
|
|
|
- }
|
|
|
+ .star {
|
|
|
+ flex-shrink: 0;
|
|
|
+ height: 48rpx;
|
|
|
+ width: 48rpx;
|
|
|
+ margin: 0 15rpx;
|
|
|
}
|
|
|
}
|
|
|
- }
|
|
|
-
|
|
|
- .agreement {
|
|
|
- display: inline-flex;
|
|
|
- margin-top: 16rpx;
|
|
|
- font-size: 24rpx;
|
|
|
- color: #525252;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- }
|
|
|
-
|
|
|
- .agreement {
|
|
|
- display: inline-flex;
|
|
|
- margin-top: 16rpx;
|
|
|
- font-size: 24rpx;
|
|
|
- color: #525252;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- }
|
|
|
- .video-danmu-btnbox {
|
|
|
- width: 50px;
|
|
|
- height: 50px;
|
|
|
- border-radius: 50%;
|
|
|
- overflow: hidden;
|
|
|
- position: absolute;
|
|
|
- right: 10px;
|
|
|
- bottom: calc(50% - 50px);
|
|
|
- transform: translateY(-50%);
|
|
|
- padding: 8px;
|
|
|
- box-sizing: border-box;
|
|
|
- }
|
|
|
- .video-danmu-image {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- }
|
|
|
- .danmuPopup {
|
|
|
- background-color: #fff;
|
|
|
- padding-bottom: calc(var(--window-bottom) + 10px);
|
|
|
- .u-border {
|
|
|
- flex: 1;
|
|
|
- @include u-flex(row,center,flex-start);
|
|
|
- padding: 0 10rpx;
|
|
|
- border-radius: 6px;
|
|
|
- border: 1rpx solid #eee;
|
|
|
- }
|
|
|
- &-head {
|
|
|
- width: 100%;
|
|
|
- padding: 10px;
|
|
|
- box-sizing: border-box;
|
|
|
- overflow: hidden;
|
|
|
- @include u-flex(row,center,flex-start);
|
|
|
- .danmu-icon {
|
|
|
- height: 24px;
|
|
|
- width: 24px;
|
|
|
- margin-right: 12px;
|
|
|
+ .name {
|
|
|
+ margin-top: 28rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 36rpx;
|
|
|
+ color: #9B6B2F;
|
|
|
+ line-height: 40rpx;
|
|
|
+ image {
|
|
|
+ height: 44rpx;
|
|
|
+ width: 44rpx;
|
|
|
+ margin-right: 10rpx;
|
|
|
}
|
|
|
}
|
|
|
- &-input {
|
|
|
- flex: 1;
|
|
|
- height: 35px;
|
|
|
- }
|
|
|
- &-send {
|
|
|
- flex-shrink: 0;
|
|
|
- height: 35px;
|
|
|
+ .btn {
|
|
|
+ width: 660rpx;
|
|
|
+ height: 81rpx;
|
|
|
+ margin-top: 55rpx;
|
|
|
+ border-radius: 40rpx;
|
|
|
+ font-family: Source Han Sans CN;
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 42rpx;
|
|
|
+ color: #FFFFFF;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
- padding: 5px 15px;
|
|
|
- box-sizing: border-box;
|
|
|
- background: #FF5C03 !important;
|
|
|
- border-radius: 22px;
|
|
|
- font-family: PingFang SC, PingFang SC;
|
|
|
- font-weight: 500;
|
|
|
- font-size: 15px;
|
|
|
- color: #fff !important;
|
|
|
- margin-left: 12px;
|
|
|
- &::after {
|
|
|
- border: none;
|
|
|
- }
|
|
|
- }
|
|
|
- &-con {
|
|
|
- background-color: #F5F7FA;
|
|
|
- padding: 24px 12px 48px 12px;
|
|
|
- font-family: PingFang SC, PingFang SC;
|
|
|
- font-weight: 400;
|
|
|
- font-size: 14px;
|
|
|
- color: #757575;
|
|
|
+ will-change: transform;
|
|
|
+ animation: scaleAnimation 1s ease infinite;
|
|
|
}
|
|
|
}
|
|
|
- .danmu-icon{
|
|
|
- height: 24px;
|
|
|
- width: 24px;
|
|
|
- margin-right: 12px;
|
|
|
+ $themes: (
|
|
|
+ 1: (light: #6AB99E, main: #409076, color1: #DCF2E0, color2: #94BFA9, shadow:rgba(68, 148, 121, 0.29)),
|
|
|
+ );
|
|
|
+
|
|
|
+ @mixin text-gradient($c1, $c2) {
|
|
|
+ color: $c1;
|
|
|
+ background: linear-gradient(to right, $c1 0%, $c2 52%, $c1 98%);
|
|
|
+ -webkit-background-clip: text;
|
|
|
+ -webkit-text-fill-color: transparent;
|
|
|
}
|
|
|
- .logo {
|
|
|
- display: inline-block;
|
|
|
- width: 30px;
|
|
|
- height: auto;
|
|
|
- margin: 20px 0 0 10px;
|
|
|
- pointer-events: none;
|
|
|
- object-fit: cover;
|
|
|
+ @mixin radial-btn($c1, $c2) {
|
|
|
+ background: radial-gradient(circle at center, $c1 0%, $c2 100%);
|
|
|
}
|
|
|
- .logo-full {
|
|
|
- display: inline-block;
|
|
|
- width: 40px;
|
|
|
- height: auto;
|
|
|
- margin: 50px 0 0 30px;
|
|
|
- pointer-events: none;
|
|
|
- object-fit: cover;
|
|
|
+ @mixin card-box($main, $color1, $color2,$shadow) {
|
|
|
+ background: linear-gradient(to bottom, $color1 0%, $color2 52%, $shadow 98%);
|
|
|
+ box-shadow: 0rpx 4rpx 17rpx 0rpx $shadow;
|
|
|
}
|
|
|
- .tabbox {
|
|
|
- @include u-flex(row, center, center);
|
|
|
- border-bottom: 2rpx solid #F5F7FA;
|
|
|
- height: 44px;
|
|
|
- background-color: #fff;
|
|
|
- view {
|
|
|
- flex: 1;
|
|
|
- padding: 20rpx 0;
|
|
|
- margin-right: 40rpx;
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
- &-active {
|
|
|
- position: relative;
|
|
|
- &::after {
|
|
|
- position: absolute;
|
|
|
- bottom: 0;
|
|
|
- left: 50%;
|
|
|
- transform: translateX(-50%);
|
|
|
- content: "";
|
|
|
- width: 3rem;
|
|
|
- border-bottom: 4px solid #FF5C03;
|
|
|
- }
|
|
|
+
|
|
|
+ /* ===== 3. 一次性生成 6 套皮肤 ===== */
|
|
|
+ @each $key, $map in $themes {
|
|
|
+ .title#{$key} {
|
|
|
+ @include radial-btn(map-get($map, light), map-get($map, main));
|
|
|
}
|
|
|
- }
|
|
|
- .chatinput {
|
|
|
- position: fixed;
|
|
|
- left: 32rpx;
|
|
|
- right: 32rpx;
|
|
|
- z-index: 999;
|
|
|
- height: 96rpx;
|
|
|
- background-color: green;
|
|
|
- background: #FFFFFF;
|
|
|
- box-shadow: 0rpx 8rpx 21rpx 0rpx rgba(0, 0, 0, 0.1);
|
|
|
- border-radius: 24rpx 24rpx 24rpx 24rpx;
|
|
|
- @include u-flex(row, center, center);
|
|
|
- padding: 0 24rpx;
|
|
|
- box-sizing: border-box;
|
|
|
- .uni-input {
|
|
|
- flex: 1;
|
|
|
- margin-right: 32rpx;
|
|
|
- font-size: 30rpx;
|
|
|
+ .line#{$key} {
|
|
|
+ border-bottom: 1rpx solid map-get($map, main);
|
|
|
}
|
|
|
-
|
|
|
- .send {
|
|
|
- font-family: PingFang SC, PingFang SC;
|
|
|
- font-weight: 400;
|
|
|
- font-size: 28rpx;
|
|
|
- color: #FFFFFF !important;
|
|
|
- flex-shrink: 0;
|
|
|
- padding: 0 20rpx;
|
|
|
- height: 72rpx;
|
|
|
- background: #FF5C03 !important;
|
|
|
- border-radius: 8rpx 8rpx 8rpx 8rpx;
|
|
|
- &::after {
|
|
|
- border: none;
|
|
|
- }
|
|
|
+ .desc-box#{$key}, .text_clip#{$key} {
|
|
|
+ @include text-gradient(map-get($map, main), map-get($map, light));
|
|
|
+ .label-dot { background: map-get($map, main); }
|
|
|
}
|
|
|
- }
|
|
|
- .answerTip {
|
|
|
- position: fixed;
|
|
|
- right: 0;
|
|
|
- z-index: 9;
|
|
|
- bottom: calc(var(--window-bottom) + 380rpx);
|
|
|
- box-shadow: 0rpx 8rpx 21rpx 0rpx rgba(0, 0, 0, 0.1);
|
|
|
- border-radius: 24rpx 24rpx 24rpx 24rpx;
|
|
|
- background-color: #ff5c03;
|
|
|
- color: #fff;
|
|
|
- border-radius: 50%;
|
|
|
- height: 90rpx;
|
|
|
- width: 90rpx;
|
|
|
- font-size: 25rpx;
|
|
|
- text-align: center;
|
|
|
- padding: 10rpx;
|
|
|
- @include u-flex(column, center, center);
|
|
|
- }
|
|
|
- .danmu-item {
|
|
|
- position: absolute;
|
|
|
- top: 0;
|
|
|
- white-space: nowrap;
|
|
|
- font-size: 16px;
|
|
|
- height: 20px;
|
|
|
- display: inline-flex;
|
|
|
- box-sizing: border-box;
|
|
|
- align-items: center;
|
|
|
- }
|
|
|
- .danmuMove {
|
|
|
- // animation: mymove 8s linear forwards;
|
|
|
- // animation-duration: 8s;
|
|
|
- animation-timing-function: linear;
|
|
|
- animation-delay: 0s;
|
|
|
- animation-iteration-count: 1;
|
|
|
- animation-direction: normal;
|
|
|
- animation-fill-mode: forwards;
|
|
|
- animation-play-state: running;
|
|
|
- animation-name: mymove;
|
|
|
- will-change: transform;
|
|
|
- }
|
|
|
-
|
|
|
- @keyframes mymove {
|
|
|
- from {
|
|
|
- transform: translateX(100vw);
|
|
|
+ .coursebox-bg#{$key} {
|
|
|
+ @include card-box(map-get($map, main), map-get($map, color1), map-get($map, color2),map-get($map, shadow));
|
|
|
}
|
|
|
-
|
|
|
- to {
|
|
|
- transform: translateX(-100%);
|
|
|
+ .btn#{$key} {
|
|
|
+ @include radial-btn(map-get($map, light), map-get($map, main));
|
|
|
}
|
|
|
}
|
|
|
- .arrow-left-warning {
|
|
|
- position: absolute;
|
|
|
- left: 24rpx;
|
|
|
- height: 88rpx;
|
|
|
- overflow: hidden;
|
|
|
- color: #888;
|
|
|
- font-size: 24rpx;
|
|
|
- @include u-flex(column, center, center);
|
|
|
- image {
|
|
|
- flex-shrink: 0;
|
|
|
- height: 36rpx;
|
|
|
- width: 36rpx;
|
|
|
- }
|
|
|
+ @keyframes scaleAnimation {
|
|
|
+ 0% {
|
|
|
+ transform: scale(1);
|
|
|
+ }
|
|
|
+ 50% {
|
|
|
+ transform: scale(0.9);
|
|
|
+ }
|
|
|
+ 100% {
|
|
|
+ transform: scale(1);
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|
