|
|
@@ -0,0 +1,2416 @@
|
|
|
+<template>
|
|
|
+ <view class="content">
|
|
|
+ <view class="header-nav" :style="{height: `calc(88rpx + ${statusBarHeight}px)`,paddingTop: statusBarHeight + 'px'}">
|
|
|
+ <view class="arrow-left-warning" @click="feedback">
|
|
|
+ <image src="/static/images/warning.png"></image>
|
|
|
+ <text>投诉</text>
|
|
|
+ </view>
|
|
|
+ <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"
|
|
|
+ @controlstoggle="controlstoggle"
|
|
|
+ @waiting="getWaiting"
|
|
|
+ :title="courseInfo.title"
|
|
|
+ style="width: 100%;height: 420rpx;"
|
|
|
+ :poster="poster"
|
|
|
+ id="video-content-box"
|
|
|
+ controls
|
|
|
+ :show-fullscreen-btn="true"
|
|
|
+ :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"
|
|
|
+ >
|
|
|
+ <!-- :danmu-list="danmuList"
|
|
|
+ enable-danmu
|
|
|
+ danmu-btn -->
|
|
|
+ <!-- 弹幕展示 -->
|
|
|
+ <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="baseUrl+'/images/danmu_set.png'"
|
|
|
+ @click="openDanmu(1)"></cover-image>
|
|
|
+ </cover-view>
|
|
|
+ <treasureChest ref="treasureChest" :isfull="isfull" :onHide="onHide" :boxList="fsUserCourseRewardRoundStatusVO" @claimFun="claimFun"></treasureChest>
|
|
|
+ </video>
|
|
|
+ </view>
|
|
|
+ <!-- 弹幕方法 -->
|
|
|
+ <commentBox
|
|
|
+ v-if="openCommentStatus==2"
|
|
|
+ ref="danmuBox"
|
|
|
+ :height="height"
|
|
|
+ :urlOption="urlOption"
|
|
|
+ :time="playTime"
|
|
|
+ :showDanmu="showDanmu"
|
|
|
+ :viewCommentNum="viewCommentNum"
|
|
|
+ :openCommentStatus="openCommentStatus"
|
|
|
+ :isSocketOpen="isSocketOpen"
|
|
|
+ @socketSend="socketSend"
|
|
|
+ @initSocket="initSocket"
|
|
|
+ @setInputText="setInputText"
|
|
|
+ @getScrollTop="getScrollTop"
|
|
|
+ @getMore="getMore"
|
|
|
+ @getActiveDanmus="getActiveDanmus"></commentBox>
|
|
|
+ <view id="title-contentnav">
|
|
|
+ <template v-show="isLogin&¬ice">
|
|
|
+ <u-notice-bar :text="notice" color="red" speed='60' fontSize="18"></u-notice-bar>
|
|
|
+ </template>
|
|
|
+ <view class="title-content" v-if="openCommentStatus!=1">
|
|
|
+ <!-- 答题时展示小节课程名，其他展示课程名 -->
|
|
|
+ <!-- 小节课程名 -->
|
|
|
+ <view class="subtitlebox" v-if="isLogin&&isAddKf==1">
|
|
|
+ {{courseInfo.title|| ''}}
|
|
|
+ </view>
|
|
|
+ <!-- 课程名字 -->
|
|
|
+ <view class="miantitlebox" v-else>
|
|
|
+ {{courseInfo.courseName|| ''}}
|
|
|
+ </view>
|
|
|
+ <!-- 投诉 -->
|
|
|
+ <!-- <view class="warning" @click="feedback" v-if="isLogin&&videoId">
|
|
|
+ <image src="/static/images/warning.png"></image>
|
|
|
+ <text>投诉</text>
|
|
|
+ </view> -->
|
|
|
+ </view>
|
|
|
+ <view class="tabbox-bar" v-if="openCommentStatus==1">
|
|
|
+ <view class="tabbox">
|
|
|
+ <view :class="currentTab == nav.id ? 'tabbox-active':''" v-for="nav in navList" :key="nav.id" @click="handleTab(nav.id)">{{nav.name}}</view>
|
|
|
+ </view>
|
|
|
+ <!-- 投诉 -->
|
|
|
+ <!-- <view class="warning" @click="feedback">
|
|
|
+ <image src="/static/images/warning.png"></image>
|
|
|
+ <text>投诉</text>
|
|
|
+ </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>
|
|
|
+ <view v-show="currentTab==2">
|
|
|
+ <commentBox
|
|
|
+ ref="commentBox"
|
|
|
+ :height="height"
|
|
|
+ :urlOption="urlOption"
|
|
|
+ :time="playTime"
|
|
|
+ :flagTime="flagTime"
|
|
|
+ :showDanmu="showDanmu"
|
|
|
+ :viewCommentNum="viewCommentNum"
|
|
|
+ :openCommentStatus="openCommentStatus"
|
|
|
+ :isSocketOpen="isSocketOpen"
|
|
|
+ @socketSend="socketSend"
|
|
|
+ @initSocket="initSocket"
|
|
|
+ @setInputText="setInputText"
|
|
|
+ @getScrollTop="getScrollTop"
|
|
|
+ @getMore="getMore"></commentBox>
|
|
|
+ </view>
|
|
|
+ </template>
|
|
|
+ <view v-show="currentTab==1">
|
|
|
+ <template v-if="openCommentStatus!=1">
|
|
|
+ <!-- 介绍 -->
|
|
|
+ <descInfo ref="descInfo" :isLogin="isLogin" :isAddKf="isAddKf" :courseInfo="courseInfo"></descInfo>
|
|
|
+ </template>
|
|
|
+ <!-- 问题 -->
|
|
|
+ <template v-if="isLogin&&isAddKf==1">
|
|
|
+ <ques ref="ques" :urlOption="urlOption" :courseNote="courseNote" :showNote="showNote" :treatmentPackage="treatmentPackage" :showTreatment="showTreatment" :quesList="quesList" :openCommentStatus="openCommentStatus" @handleAnswer="handleAnswer" @showBtnType="showBtnType"></ques>
|
|
|
+ </template>
|
|
|
+ </view>
|
|
|
+ </scroll-view>
|
|
|
+ <!-- 线路 -->
|
|
|
+ <view class="video-line" v-if="isLogin&&isAddKf==1" @click="openPop">
|
|
|
+ <image src="https://cos.his.cdwjyyh.com/fs/20250915/04889779f7f44e22a7a378d26823b2e8.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="https://cos.his.cdwjyyh.com/fs/20250915/b950ff20d115453f9d7f908590c9c0e7.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>
|
|
|
+ </view>
|
|
|
+ </uni-popup>
|
|
|
+ <!-- 发送弹幕 -->
|
|
|
+ <view class="video-line danmu-line" v-if="isLogin&&isAddKf==1&&openCommentStatus==2" @click="openDanmu(0)" >
|
|
|
+ <image class="set_image" src="https://cos.his.cdwjyyh.com/fs/20250418/5e508642737a44169061382566043ac9.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?baseUrl+'/images/danmu-off.png':baseUrl+'/images/danmu-on.png'" mode="heightFix" @click="switchDanmu()"></image>
|
|
|
+ <view class="u-border">
|
|
|
+ <u-input
|
|
|
+ class="danmuPopup-input"
|
|
|
+ placeholder="发个弹幕吧~"
|
|
|
+ border="border"
|
|
|
+ :focus="focus"
|
|
|
+ :adjustPosition="false"
|
|
|
+ :autoBlur="true"
|
|
|
+ maxlength="50"
|
|
|
+ v-model.trim="inputText">
|
|
|
+ </u-input>
|
|
|
+ <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>
|
|
|
+ </view>
|
|
|
+ </uni-popup>
|
|
|
+ <!-- 答题弹窗 -->
|
|
|
+ <uni-popup ref="answerPopup" type="center">
|
|
|
+ <view :class="errTitle == '恭喜你，回答正确' ? 'answerPopup-box bg':'answerPopup-box'">
|
|
|
+ <!-- 正确 -->
|
|
|
+ <image class="tipimg" v-if="errTitle == '恭喜你，回答正确'" src="https://cos.his.cdwjyyh.com/fs/20250915/f7b1075c21b442069ec9721a1a4790ec.png"
|
|
|
+ mode="aspectFill"></image>
|
|
|
+ <!-- 错误 -->
|
|
|
+ <image class="tipimg" v-else src="https://cos.his.cdwjyyh.com/fs/20250915/a4b145c94b684c778c03ad9b52d717f3.png" mode="aspectFill">
|
|
|
+ </image>
|
|
|
+ <view class="answerPopup-title">{{errTitle}}</view>
|
|
|
+ <view class="answerPopup-desc" v-html="errDesc"></view>
|
|
|
+ <view style="color: #FF5C03;">{{currentRewardText}}</view>
|
|
|
+ <!-- 选择奖励 -->
|
|
|
+ <view class="reward-list" v-if="errTitle == '恭喜你，回答正确'">
|
|
|
+ <view :class="item.value == currentReward?'reward-item reward-active':'reward-item'"
|
|
|
+ v-for="(item, index) in rewardType" :key="item.value" @click="rewardChange(item)">
|
|
|
+ {{item.name}}
|
|
|
+ </view>
|
|
|
+ <!-- <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)" color="#FF5C03" />
|
|
|
+ <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>
|
|
|
+ <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>
|
|
|
+ <!-- 展示兑换奖品弹窗 -->
|
|
|
+ <appPopup ref="appPopup"></appPopup>
|
|
|
+ <!-- 客服二维码弹窗 -->
|
|
|
+ <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="https://cos.his.cdwjyyh.com/fs/20250915/97978486cc6c47c6949c5bcc9bc0c4a3.png" mode="aspectFill"
|
|
|
+ @click="closeKFPop"></image>
|
|
|
+ </view>
|
|
|
+ </uni-popup>
|
|
|
+ <!-- 可以答题提示 -->
|
|
|
+ <view class="answerTip" v-if="currentTab!=1&&openCommentStatus==1&&showAnswerTip" @click="handleTab(1)">
|
|
|
+ 可以答题啦
|
|
|
+ </view>
|
|
|
+ <!-- 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="isLogin&&isAddKf==1&¤tTab==1&&quesList&&quesList.length>0&&showBtn==0" class="footer-btn footer-btn-border" @click="submit">
|
|
|
+ <!-- <image class="footer-btn-img" :src="baseUrl+'/images/red_envelope_btnimg.png'" mode="aspectFill"></image> -->
|
|
|
+ <text>提交答案领取奖励</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>
|
|
|
+ <turntableOne ref="turntableOne" @sendRewardFun="sendRewardFun" @openAppPop="openAppPop"></turntableOne>
|
|
|
+ <turntableTwo ref="turntableTwo" @sendRewardFun="sendRewardFun" @openAppPop="openAppPop"></turntableTwo>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import { mapGetters } from 'vuex';
|
|
|
+ import turntableOne from "./components/turntableOne.vue"
|
|
|
+ import turntableTwo from "./components/turntableTwo.vue"
|
|
|
+ import appPopup from "./components/appPopup.vue"
|
|
|
+ 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 treasureChest from "./components/treasureChest.vue"
|
|
|
+ import dayjs from 'dayjs';
|
|
|
+ import {
|
|
|
+ getErrMsg,
|
|
|
+ getH5CourseByVideoId,
|
|
|
+ getH5CourseVideoDetails,
|
|
|
+ courseAnswer,
|
|
|
+ getFinishCourseVideo,
|
|
|
+ getIsAddKf,
|
|
|
+ internetTraffic,
|
|
|
+ getIntegralByH5Video,
|
|
|
+ sendReward,
|
|
|
+ loginByMp,
|
|
|
+ getRealLink,
|
|
|
+ getConfigByKey,
|
|
|
+ claim,
|
|
|
+ getVideoRewardTypes,
|
|
|
+ getUserPhoneDeviceType
|
|
|
+ } from "@/api/course.js"
|
|
|
+ export default {
|
|
|
+ components: {
|
|
|
+ descInfoNav,
|
|
|
+ descInfo,
|
|
|
+ commentBox,
|
|
|
+ ques,
|
|
|
+ treasureChest,
|
|
|
+ appPopup,
|
|
|
+ turntableOne,
|
|
|
+ turntableTwo
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ socket: null,
|
|
|
+ isSocketOpen: false,
|
|
|
+ pingpangTimes: null,
|
|
|
+ baseUrl:uni.getStorageSync('requestImagesPath'),
|
|
|
+ // 1 红包 2 芳华币
|
|
|
+ rewardType:[],
|
|
|
+ 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,
|
|
|
+ textHeight: 0, //文本高度
|
|
|
+ qwUserId: "",
|
|
|
+ qrcode: "",
|
|
|
+ corpId: "",
|
|
|
+ qrcodeMsg: "",
|
|
|
+ urlOption: {},
|
|
|
+ bufferRate: 0, // 缓冲时间
|
|
|
+ uuId: "",
|
|
|
+ isEnded: false,
|
|
|
+ // 是否允许拖动进度条
|
|
|
+ linkType: 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
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ poster: "",
|
|
|
+ // 错误请求次数
|
|
|
+ errorCount: 0,
|
|
|
+ answerPopup: false,
|
|
|
+ sortLink:"",
|
|
|
+ // 课程是否过期
|
|
|
+ isExpire: false,
|
|
|
+ menuButtonLeft: 281,
|
|
|
+ menuButtonH: 45,
|
|
|
+ timer: null,
|
|
|
+ flag: false,
|
|
|
+ focus: false,
|
|
|
+ openDanmuType: 0,
|
|
|
+ danmuboxHeight: 0,
|
|
|
+ user: {},
|
|
|
+ crtShow: true,
|
|
|
+ // 是否获取到对应观看者的真实链接
|
|
|
+ isCheckRealUrl: false,
|
|
|
+ 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,
|
|
|
+ notice: '',
|
|
|
+ fsUserCourseRewardRoundStatusVO: [],
|
|
|
+ onHide: false,
|
|
|
+ courseNote:'',
|
|
|
+ showBtn: 0,
|
|
|
+ showNote: 0,
|
|
|
+ showTreatment: 1, // 1不展示，0展示
|
|
|
+ treatmentPackage: []
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed:{
|
|
|
+ ...mapGetters(['coureLogin']),
|
|
|
+ currentRewardText(){
|
|
|
+ const index = this.rewardType.findIndex(it=>it.value==this.currentReward)
|
|
|
+ return index > -1 ? this.rewardType[index].text || '':''
|
|
|
+ }
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ coureLogin: {
|
|
|
+ immediate: true, // 页面一进入就检查一次
|
|
|
+ handler(val) {
|
|
|
+ if (val == 2) {
|
|
|
+ console.log("AppToken失效，请重新登录")
|
|
|
+ this.isLogin = false
|
|
|
+ this.isAddKf = 0
|
|
|
+ this.goLogin()
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onLoad(option) {
|
|
|
+ this.code = option.code
|
|
|
+ this.urlOption = option.course ? JSON.parse(decodeURIComponent(option.course)) : {}
|
|
|
+ this.videoId = this.urlOption.videoId || ''
|
|
|
+ this.qwUserId = this.urlOption.qwUserId || ''
|
|
|
+ this.corpId = this.urlOption.corpId || ''
|
|
|
+ this.linkType = this.urlOption.linkType || 0
|
|
|
+ // if (this.code) {
|
|
|
+ // this.loginByMp()
|
|
|
+ // }
|
|
|
+ var that=this;
|
|
|
+ if (this.videoId) {
|
|
|
+ this.getH5CourseByVideo()
|
|
|
+ this.getConfigByKey()
|
|
|
+ }
|
|
|
+ this.sortLink = this.urlOption.link || ''
|
|
|
+ this.getMenuButton()
|
|
|
+ // #ifndef H5
|
|
|
+ uni.onKeyboardHeightChange(this.keyboardHeightChange);
|
|
|
+ // #endif
|
|
|
+ },
|
|
|
+ onShow() {
|
|
|
+ this.onHide = false
|
|
|
+ this.tipsOpen = false
|
|
|
+ // this.isLogin = this.utils.isLoginCourse()
|
|
|
+ this.uuId = this.utils.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.getLink()
|
|
|
+ } else {
|
|
|
+ uni.showToast({
|
|
|
+ title: 'sortLink is not found',
|
|
|
+ icon: 'none'
|
|
|
+ });
|
|
|
+ if(this.isLogin) {
|
|
|
+ this.getUserPhoneDeviceType()
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.getIP()
|
|
|
+ this.getHeight()
|
|
|
+ },
|
|
|
+ onHide() {
|
|
|
+ this.onHide = true
|
|
|
+ // this.player = uni.createVideoContext('video-content-box');
|
|
|
+ if (this.player) {
|
|
|
+ this.player.pause()
|
|
|
+ }
|
|
|
+ // if (this.interval != null) {
|
|
|
+ // clearInterval(this.interval)
|
|
|
+ // this.interval = null
|
|
|
+ // }
|
|
|
+ this.closeSocket()
|
|
|
+ },
|
|
|
+ onUnload() {
|
|
|
+ if (this.interval != null) {
|
|
|
+ clearInterval(this.interval)
|
|
|
+ this.interval = null
|
|
|
+ }
|
|
|
+ this.clearIntegral()
|
|
|
+ // #ifndef H5
|
|
|
+ uni.offKeyboardHeightChange(this.keyboardHeightChange);
|
|
|
+ // #endif
|
|
|
+ this.closeSocket()
|
|
|
+ },
|
|
|
+ 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()
|
|
|
+ // #ifndef H5
|
|
|
+ uni.offKeyboardHeightChange(this.keyboardHeightChange);
|
|
|
+ // #endif
|
|
|
+ this.closeSocket()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ getVideoRewardTypes() {
|
|
|
+ getVideoRewardTypes({...this.urlOption}).then(res=>{
|
|
|
+ if(res.code == 200) {
|
|
|
+ this.rewardType = res.data
|
|
|
+ this.currentReward = this.rewardType&&this.rewardType.length>0 ? this.rewardType[0].value : -1
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ getConfigByKey(){
|
|
|
+ let param = {key:"course.config"};
|
|
|
+ getConfigByKey(param).then(
|
|
|
+ res => {
|
|
|
+ if(res.code==200){
|
|
|
+ let data=res.data ? JSON.parse(res.data) : {};
|
|
|
+ this.notice = data.notify || ''
|
|
|
+ }
|
|
|
+ },
|
|
|
+ rej => {}
|
|
|
+ );
|
|
|
+ },
|
|
|
+ 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.linkType != 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)
|
|
|
+ const isNearEnd = this.playTime >= this.duration - 60;
|
|
|
+ this.showAnswerTip = this.isEnded || isNearEnd;
|
|
|
+
|
|
|
+ const progress = this.duration ? (this.playTime || 0) / this.duration : 0;
|
|
|
+ const answerRate = Number(this.config.answerRate ?? 1); // 默认 100%
|
|
|
+ const hitRate = progress >= answerRate;
|
|
|
+
|
|
|
+ this.showNote = (this.isEnded || this.isFinish === 1 || hitRate) ? 1 : 0;
|
|
|
+ if(this.fsUserCourseRewardRoundStatusVO&&this.fsUserCourseRewardRoundStatusVO.length>0) {
|
|
|
+ this.$refs.treasureChest&&this.$refs.treasureChest.showTreasure(this.flagTime)
|
|
|
+ }
|
|
|
+ if(this.openCommentStatus == 2) {
|
|
|
+ this.$refs.danmuBox&&this.$refs.danmuBox.checkDanmu(this.flagTime)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ changeTime(that,e) {
|
|
|
+ that.playDurationSeek = 0
|
|
|
+ },
|
|
|
+ videoErrorCallback(e) {
|
|
|
+ this.errorCount++
|
|
|
+ if (this.errorCount > 3) return
|
|
|
+ if (this.interval != null) {
|
|
|
+ clearInterval(this.interval)
|
|
|
+ }
|
|
|
+ this.clearIntegral()
|
|
|
+ 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.showAnswerTip = true
|
|
|
+ this.isFinish = 1
|
|
|
+ this.showNote = 1
|
|
|
+ this.getFinishCourseVideo()
|
|
|
+ },
|
|
|
+ getWaiting() {
|
|
|
+ this.getErrMsg('','waiting')
|
|
|
+ },
|
|
|
+ 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) {
|
|
|
+ const footerH = this.showBtn==0? 80: 0
|
|
|
+ this.height =
|
|
|
+ `calc(100vh - ${data.height}px - 420rpx - ${this.statusBarHeight}px - ${footerH}px - 88rpx)`
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .exec();
|
|
|
+ },200)
|
|
|
+ },
|
|
|
+ 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
|
|
|
+ }
|
|
|
+ },
|
|
|
+ getH5CourseByVideo() {
|
|
|
+ this.loading = true
|
|
|
+ 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.courseNote = res.course&&res.course.note
|
|
|
+ this.isFinish = res.isFinish || 0
|
|
|
+ this.showNote = this.isFinish==1 ? 1:0
|
|
|
+ this.duration = res.course && res.course.duration ? res.course.duration : 0
|
|
|
+ this.playDuration = res.playDuration || 0
|
|
|
+ this.tipsTime = res.tipsTime || 0
|
|
|
+ const showTreatmentFlag = res.course&&res.course.showTreatment!=null ? res.course.showTreatment : 1
|
|
|
+ this.treatmentPackage = res.course&&res.course.treatmentPackage ? res.course.treatmentPackage : [],
|
|
|
+ this.showTreatment = showTreatmentFlag==0&&this.treatmentPackage.length>0 ? 0 : 1
|
|
|
+ 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.courseLogo = res.config&&res.config.courseLogo
|
|
|
+ this.viewCommentNum = res.config&&res.config.viewCommentNum || 200
|
|
|
+
|
|
|
+ this.openCommentStatus = res.config&&res.config.openCommentStatus || 3;
|
|
|
+ // this.openCommentStatus = source
|
|
|
+ // console.log('socket===',socket,this.openCommentStatus)
|
|
|
+ if(this.openCommentStatus == 3) {
|
|
|
+ this.closeSocket()
|
|
|
+ }else {
|
|
|
+ this.initSocket()
|
|
|
+ }
|
|
|
+
|
|
|
+ this.currentTab = 1
|
|
|
+ if(this.openCommentStatus!=2 || this.showDanmu!=1) {
|
|
|
+ this.activeDanmus = []
|
|
|
+ }
|
|
|
+ this.fsUserCourseRewardRoundStatusVO = this.getBox(res)
|
|
|
+ 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.linkType == 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
|
|
|
+ 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.utils.isLoginCourse().then(
|
|
|
+ res => {
|
|
|
+ if(res){
|
|
|
+ if (this.isAddKf == 1&&this.isCheckRealUrl) {
|
|
|
+ // 答题
|
|
|
+ // 您已提交过答案，请领取红包
|
|
|
+ this.courseAnswer()
|
|
|
+ } else {
|
|
|
+ // 添加客服
|
|
|
+ if (this.videoId && this.qwUserId) {
|
|
|
+ this.getIsAddKf()
|
|
|
+ } else {
|
|
|
+ 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;
|
|
|
+ });
|
|
|
+ if(!this.isCheckRealUrl) return;
|
|
|
+ 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.currentReward = this.rewardType&&this.rewardType.length>0 ? this.rewardType[0].value : -1
|
|
|
+ this.$refs.answerPopup.open("center")
|
|
|
+ }
|
|
|
+ } 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.value
|
|
|
+ },
|
|
|
+ closeAnswerPopup() {
|
|
|
+ this.$refs.answerPopup.close()
|
|
|
+ if(!this.isCheckRealUrl) return;
|
|
|
+ if (this.errTitle == '恭喜你，回答正确') {
|
|
|
+ if(this.currentReward==4) {
|
|
|
+ this.$refs.turntableTwo.open(this.urlOption)
|
|
|
+ } else if(this.currentReward==3) {
|
|
|
+ this.$refs.turntableOne.open(this.urlOption)
|
|
|
+ } else {
|
|
|
+ this.sendRewardFun(this.currentReward)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ sendRewardFun(currentReward) {
|
|
|
+ this.currentReward = currentReward
|
|
|
+ const param = {
|
|
|
+ ...this.urlOption,
|
|
|
+ rewardType: Number(this.currentReward),
|
|
|
+ source: 2,
|
|
|
+ appId: getApp().globalData.appId
|
|
|
+ }
|
|
|
+ sendReward(param).then(res => {
|
|
|
+ if(res.code == 200) {
|
|
|
+ if(currentReward == 4) {
|
|
|
+ this.$refs.turntableTwo.endSuccess(res.data)
|
|
|
+ }else if(currentReward == 3) {
|
|
|
+ this.$refs.turntableOne.endSuccess(res.data)
|
|
|
+ }else {
|
|
|
+ uni.showToast({
|
|
|
+ title: res.msg,
|
|
|
+ icon: 'none'
|
|
|
+ })
|
|
|
+ // this.openAppPop()
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ this.currentReward == 4 ? this.$refs.turntableTwo.close('close') : this.currentReward == 3? this.$refs.turntableOne.close('close'):''
|
|
|
+ uni.showToast({
|
|
|
+ title: res.msg,
|
|
|
+ icon: 'none'
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ openAppPop() {
|
|
|
+ this.$refs.appPopup.openPop()
|
|
|
+ },
|
|
|
+ // 线路
|
|
|
+ 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.linkType == 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()
|
|
|
+ }
|
|
|
+
|
|
|
+ },
|
|
|
+ // 客服
|
|
|
+ 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.isCheckRealUrl = true
|
|
|
+ this.getH5CourseVideoDetails()
|
|
|
+ } else if (res.code == 400) {
|
|
|
+ this.isAddKf = 0
|
|
|
+ this.isCheckRealUrl = false
|
|
|
+ this.qrcode = res.qrcode
|
|
|
+ this.qrcodeMsg = res.msg
|
|
|
+ this.$refs.kfPopup.open()
|
|
|
+ } else if (res.code == 504) {
|
|
|
+ // 登录
|
|
|
+ this.isCheckRealUrl = false
|
|
|
+ this.goLogin()
|
|
|
+ } else if (res.code == 566) {
|
|
|
+ // 官方群发通用链接
|
|
|
+ const url = res.courseLink.realLink.split('?course=')[1]
|
|
|
+ this.urlOption = JSON.parse(url)
|
|
|
+ this.isAddKf = 1
|
|
|
+ this.isCheckRealUrl = true
|
|
|
+ this.getH5CourseVideoDetails()
|
|
|
+ } else if (res.code == 567) {
|
|
|
+ // 群聊通用链接
|
|
|
+ this.urlOption = {
|
|
|
+ ...this.urlOption,
|
|
|
+ qwExternalId: res.qwExternalId
|
|
|
+ }
|
|
|
+ this.isAddKf = 1
|
|
|
+ this.isCheckRealUrl = true
|
|
|
+ this.getH5CourseVideoDetails()
|
|
|
+ }else {
|
|
|
+ this.isCheckRealUrl = false
|
|
|
+ this.isAddKf = 0
|
|
|
+ uni.showToast({
|
|
|
+ title: res.msg,
|
|
|
+ icon: 'none'
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ err => {}
|
|
|
+ );
|
|
|
+ },
|
|
|
+ closeKFPop() {
|
|
|
+ this.$refs.kfPopup.close()
|
|
|
+ },
|
|
|
+ getFinishCourseVideo() {
|
|
|
+ if (!this.isLogin||!this.playTime || !this.isCheckRealUrl) return
|
|
|
+ // {videoId: this.videoId,duration:this.playTime}
|
|
|
+ const param = {
|
|
|
+ duration: this.playTime,
|
|
|
+ ...this.urlOption
|
|
|
+ }
|
|
|
+ getFinishCourseVideo(param)
|
|
|
+ },
|
|
|
+ // 每十分钟获得芳华币
|
|
|
+ getIntegralByH5Video() {
|
|
|
+ if(!this.isLogin||!this.isCheckRealUrl) 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.isCheckRealUrl) 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
|
|
|
+ internetTraffic(param)
|
|
|
+ },
|
|
|
+ getErrMsg(err,type) {
|
|
|
+ let msgerr = {
|
|
|
+ errType: type || 'error',
|
|
|
+ videoUrl: this.videoUrl,
|
|
|
+ lineIndex: this.lineIndex,
|
|
|
+ errTime: new Date(),
|
|
|
+ ip: this.ip,
|
|
|
+ errMsg: err || ''
|
|
|
+ }
|
|
|
+ getErrMsg({
|
|
|
+ msg: JSON.stringify(msgerr)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ goLogin() {
|
|
|
+ this.utils.getProvider().then(provider=>{
|
|
|
+ console.log('当前的环境商',provider)
|
|
|
+ if (!provider) {
|
|
|
+ reject()
|
|
|
+ }
|
|
|
+ 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:getApp().globalData.appId}).then(res=>{
|
|
|
+ uni.hideLoading();
|
|
|
+ if (res.code == 200) {
|
|
|
+ this.$store.commit('setCoureLogin', 1);
|
|
|
+ uni.setStorageSync('AppTokenmini_RTCourse', res.token);
|
|
|
+ uni.setStorageSync('auto_userInfo', JSON.stringify(res.user));
|
|
|
+ this.user = res.user
|
|
|
+ this.isLogin = true
|
|
|
+ this.getIsAddKf()
|
|
|
+ this.getVideoRewardTypes()
|
|
|
+ this.getUserPhoneDeviceType()
|
|
|
+ } else {
|
|
|
+ uni.showToast({
|
|
|
+ title: res.msg,
|
|
|
+ icon: 'none'
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }).catch(err=>{
|
|
|
+ uni.hideLoading();
|
|
|
+ uni.showToast({
|
|
|
+ icon:'none',
|
|
|
+ title: "登录失败,请重新登录",
|
|
|
+ });
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }).catch(err => {})
|
|
|
+ },
|
|
|
+ getLink() {
|
|
|
+ let that = this;
|
|
|
+ getRealLink({sortLink:this.sortLink}).then(res=>{
|
|
|
+ if(res.code == 200) {
|
|
|
+ this.isExpire = false
|
|
|
+ if(this.isLogin) {
|
|
|
+ this.getUserPhoneDeviceType()
|
|
|
+ }
|
|
|
+ // 如果响应中包含真实链接，则跳转到真实链接
|
|
|
+ // window.location.href = res.realLink +"&sortLink="+this.sortLink+"&code="+this.code+"&time="+new Date().getTime()
|
|
|
+ if (this.isLogin && this.isAddKf == 1&&this.isCheckRealUrl) {
|
|
|
+ this.getH5CourseVideoDetails()
|
|
|
+ }
|
|
|
+ if (this.videoId &&(this.isAddKf != 1 || !this.isCheckRealUrl)) {
|
|
|
+ this.utils.isLoginCourse().then(
|
|
|
+ isLogin => {
|
|
|
+ this.isLogin = isLogin
|
|
|
+ if(isLogin){
|
|
|
+ this.getIsAddKf()
|
|
|
+ this.getVideoRewardTypes()
|
|
|
+ } else {
|
|
|
+ this.goLogin()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ rej => {}
|
|
|
+ );
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ this.isExpire = true
|
|
|
+ uni.showToast({
|
|
|
+ title: '课程已过期或链接无效',
|
|
|
+ icon: 'none'
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }).catch(err=>{
|
|
|
+ this.isExpire = true
|
|
|
+ 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)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 弹幕
|
|
|
+ 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.getComments()
|
|
|
+ }
|
|
|
+ } 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.getComments()
|
|
|
+ })
|
|
|
+ }
|
|
|
+ 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)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ feedback() {
|
|
|
+ const userId = this.user.userId || ''
|
|
|
+ const courseId = this.urlOption.courseId || ''
|
|
|
+ const videoId = this.urlOption.videoId || ''
|
|
|
+ uni.navigateTo({
|
|
|
+ url: './feedback?userId='+userId+'&courseId='+courseId+'&videoId='+videoId
|
|
|
+ })
|
|
|
+ },
|
|
|
+ getBox(data) {
|
|
|
+ if(data.fsUserCourseRewardRoundStatusVO&&data.fsUserCourseRewardRoundStatusVO.length>0) {
|
|
|
+ const list = data.fsUserCourseRewardRoundStatusVO.map(item=>({
|
|
|
+ ...item,
|
|
|
+ time: Math.round(this.duration * Number(item.question || 0) * 0.01)
|
|
|
+ }))
|
|
|
+ return list
|
|
|
+ } else {
|
|
|
+ return []
|
|
|
+ }
|
|
|
+ },
|
|
|
+ claimFun(val) {
|
|
|
+ claim({
|
|
|
+ ...this.urlOption,
|
|
|
+ second: val.time,
|
|
|
+ rewardId: val.rewardId,
|
|
|
+ status: val.status
|
|
|
+ }).then(res=>{
|
|
|
+ if(res.code == 200) {
|
|
|
+ this.$refs.treasureChest.claimSuccess(val.status)
|
|
|
+ } else {
|
|
|
+ this.$refs.treasureChest.close()
|
|
|
+ }
|
|
|
+ if(res.msg!="success") {
|
|
|
+ uni.showToast({
|
|
|
+ title: res.msg,
|
|
|
+ icon: 'none',
|
|
|
+ duration: 3000
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ showBtnType(value) {
|
|
|
+ this.showBtn = value
|
|
|
+ this.getHeight()
|
|
|
+ },
|
|
|
+ getUserPhoneDeviceType(){
|
|
|
+ uni.getSystemInfo({
|
|
|
+ success: (result) => {
|
|
|
+ const param = {
|
|
|
+ os: result.osName || '',
|
|
|
+ deviceId: result.deviceId || '',
|
|
|
+ appId: getApp().globalData.appId
|
|
|
+ }
|
|
|
+ getUserPhoneDeviceType({param:JSON.stringify(param)})
|
|
|
+ },
|
|
|
+ fail: (error) => {
|
|
|
+ console.log('获取型号失败',JSON.stringify(error))
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ initSocket(type) {
|
|
|
+ const userId = this.user.userId; // 假设你已经获取了用户ID
|
|
|
+ const that = this;
|
|
|
+
|
|
|
+ // 如果已经存在连接，先关闭
|
|
|
+ if (this.socket) {
|
|
|
+ this.socket.onClose(() => {
|
|
|
+ console.log('旧的 WebSocket 连接已完全关闭');
|
|
|
+ that.socket = null;
|
|
|
+ if(that.pingpangTimes) {
|
|
|
+ clearInterval(that.pingpangTimes)
|
|
|
+ that.pingpangTimes= null
|
|
|
+ }
|
|
|
+ that.createNewSocket(type,userId);
|
|
|
+ });
|
|
|
+ this.socket.close();
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ // 创建一个新的 WebSocket 连接
|
|
|
+ this.createNewSocket(type,userId);
|
|
|
+ },
|
|
|
+ createNewSocket(type,userId) {
|
|
|
+ if(this.openCommentStatus == 3) return
|
|
|
+ //创建一个socket连接
|
|
|
+ const that = this;
|
|
|
+ // if (this.socket) {
|
|
|
+ // this.socket.close()
|
|
|
+ // }
|
|
|
+ this.socket = uni.connectSocket({
|
|
|
+ url: getApp().globalData.wsUrl + "/app/webSocket/" + userId,
|
|
|
+ multiple: true,
|
|
|
+ success: res => {
|
|
|
+ that.isSocketOpen = true
|
|
|
+ console.log('WebSocket连接已打开1！');
|
|
|
+ // 保持心跳
|
|
|
+ if(that.pingpangTimes) {
|
|
|
+ clearInterval(that.pingpangTimes)
|
|
|
+ that.pingpangTimes= null
|
|
|
+ }
|
|
|
+ that.pingpangTimes=setInterval(()=>{
|
|
|
+ let data={
|
|
|
+ userId: userId || '',
|
|
|
+ userType: 2, // 1-管理员，2-用户
|
|
|
+ courseId: that.urlOption.courseId,
|
|
|
+ videoId: that.urlOption.videoId,
|
|
|
+ type:1, // 评论类型 1：评论，2：回复，目前没有回复，默认传1就行了
|
|
|
+ // msg: that.inputText,
|
|
|
+ cmd:'heartbeat'
|
|
|
+ };
|
|
|
+ that.socket.send({
|
|
|
+ data: JSON.stringify(data),
|
|
|
+ success: () => {
|
|
|
+ // console.log('WebSocket发送心条数据！');
|
|
|
+ },
|
|
|
+ fail: () => {
|
|
|
+ that.isSocketOpen=false
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },15000)
|
|
|
+ },
|
|
|
+ error: res => {
|
|
|
+ console.log(res)
|
|
|
+ },
|
|
|
+ })
|
|
|
+ this.socket.onMessage((res) => {
|
|
|
+ // console.log("收到消息parse",JSON.parse(res.data))
|
|
|
+ const redata = JSON.parse(res.data);
|
|
|
+ if(redata.cmd=="heartbeat"){
|
|
|
+ //心跳
|
|
|
+ // console.log("heartbeat")
|
|
|
+ }else if(redata.cmd=="sendMsg"){
|
|
|
+ if(that.openCommentStatus==1) {
|
|
|
+ that.$refs.commentBox.isSend=true;
|
|
|
+ that.$refs.commentBox.addMsg(redata);
|
|
|
+ } else if(that.openCommentStatus==2) {
|
|
|
+ that.$refs.danmuBox.isSend=true;
|
|
|
+ that.$refs.danmuBox.addMsg(redata);
|
|
|
+ }
|
|
|
+ // that.isSend=true;
|
|
|
+ // that.addMsg(redata);
|
|
|
+ }
|
|
|
+ })
|
|
|
+ //监听socket打开
|
|
|
+ this.socket.onOpen(() => {
|
|
|
+ that.isSocketOpen = true
|
|
|
+ console.log('WebSocket连接已打开2！');
|
|
|
+ // that.isSend = true;
|
|
|
+ if(that.openCommentStatus==1) {
|
|
|
+ that.$refs.commentBox.isSend=true;
|
|
|
+ } else if(that.openCommentStatus==2) {
|
|
|
+ that.$refs.danmuBox.isSend=true;
|
|
|
+ }
|
|
|
+ if(type=='reStart') {
|
|
|
+ // 重连的时候重新发消息
|
|
|
+ if(that.openCommentStatus==1) {
|
|
|
+ that.$refs.commentBox.saveMsg()
|
|
|
+ } else if(that.openCommentStatus==2) {
|
|
|
+ that.$refs.danmuBox.saveMsg()
|
|
|
+ }
|
|
|
+ // this.saveMsg()
|
|
|
+ }
|
|
|
+ })
|
|
|
+ //监听socket关闭
|
|
|
+ this.socket.onClose(() => {
|
|
|
+ that.isSocketOpen = false
|
|
|
+ that.socket = null
|
|
|
+ console.log('WebSocket连接已关闭！');
|
|
|
+ if(that.pingpangTimes) {
|
|
|
+ clearInterval(that.pingpangTimes)
|
|
|
+ that.pingpangTimes= null
|
|
|
+ }
|
|
|
+ })
|
|
|
+ //监听socket错误
|
|
|
+ this.socket.onError((err) => {
|
|
|
+ console.log("socket err：",err)
|
|
|
+ that.isSocketOpen = false
|
|
|
+ that.socket = null
|
|
|
+ if(that.pingpangTimes) {
|
|
|
+ clearInterval(that.pingpangTimes)
|
|
|
+ that.pingpangTimes= null
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ socketSend(data) {
|
|
|
+ let that = this
|
|
|
+ this.socket.send({
|
|
|
+ data: JSON.stringify(data),
|
|
|
+ success: () => {
|
|
|
+ console.log("发送成功")
|
|
|
+ // this.isSend = false;
|
|
|
+ if(that.openCommentStatus==1) {
|
|
|
+ that.$refs.commentBox.isSend = false;
|
|
|
+ } else if(that.openCommentStatus==2) {
|
|
|
+ that.$refs.danmuBox.isSend = false;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ fail: () => {
|
|
|
+ console.log("发送失败")
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ closeSocket() {
|
|
|
+ if (this.socket) {
|
|
|
+ this.socket.close();
|
|
|
+ }
|
|
|
+ if (this.pingpangTimes) {
|
|
|
+ clearInterval(this.pingpangTimes);
|
|
|
+ this.pingpangTimes = null;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</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;
|
|
|
+ }
|
|
|
+ .reward-list {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ margin-top: 40rpx;
|
|
|
+ margin-bottom: -24rpx;
|
|
|
+ }
|
|
|
+ .reward-item{
|
|
|
+ padding: 16rpx 10rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ width: calc(50% - 14rpx);
|
|
|
+ overflow: hidden;
|
|
|
+ text-align: center;
|
|
|
+ border-radius: 8rpx;
|
|
|
+ border: 1rpx solid #ededef;
|
|
|
+ // margin: 10rpx 5px;
|
|
|
+ margin-bottom: 24rpx;
|
|
|
+ color: #222;
|
|
|
+ background-color: #fff;
|
|
|
+ &:nth-child(odd) {
|
|
|
+ margin-right: 20rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .reward-active {
|
|
|
+ border: 1rpx solid #ff5c03 !important;
|
|
|
+ color: #ff5c03 !important;
|
|
|
+ background: #FCF0E7 !important;
|
|
|
+ }
|
|
|
+ .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%;
|
|
|
+ // 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;
|
|
|
+ }
|
|
|
+
|
|
|
+ .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));
|
|
|
+ .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: 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;
|
|
|
+ box-sizing: border-box;
|
|
|
+ @include u-flex(row, center, space-between);
|
|
|
+ .title {
|
|
|
+ font-size: 36rpx;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #414858;
|
|
|
+ }
|
|
|
+
|
|
|
+ .time-or-subtitle {
|
|
|
+ margin-top: 12rpx;
|
|
|
+ color: #666666;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .warning {
|
|
|
+ flex-shrink: 0;
|
|
|
+ color: #888;
|
|
|
+ font-size: 24rpx;
|
|
|
+ @include u-flex(column, center, center);
|
|
|
+ image {
|
|
|
+ flex-shrink: 0;
|
|
|
+ height: 36rpx;
|
|
|
+ width: 36rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .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: 34rpx;
|
|
|
+ width: 34rpx;
|
|
|
+ margin-right: 6rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .danmu-line {
|
|
|
+ bottom: calc(var(--window-bottom) + 370rpx);
|
|
|
+ word-break: keep-all;
|
|
|
+ .set_image {
|
|
|
+ height: 40rpx;
|
|
|
+ width: 40rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .footer {
|
|
|
+ border-top: 1rpx solid #ededef;
|
|
|
+ background: #fff;
|
|
|
+ width: 100%;
|
|
|
+ position: fixed;
|
|
|
+ bottom: 0;
|
|
|
+ // padding: 32rpx;
|
|
|
+ padding-bottom: calc(var(--window-bottom));
|
|
|
+ box-sizing: border-box;
|
|
|
+ z-index: 9;
|
|
|
+
|
|
|
+ &-btn {
|
|
|
+ width: calc(100% - 64rpx);
|
|
|
+ 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);
|
|
|
+ margin: 24rpx 32rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ &-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;
|
|
|
+ }
|
|
|
+ .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 6rpx;
|
|
|
+ border-radius: 6px;
|
|
|
+ }
|
|
|
+ &-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: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &-input {
|
|
|
+ flex: 1;
|
|
|
+ height: 35px;
|
|
|
+ }
|
|
|
+ &-send {
|
|
|
+ flex-shrink: 0;
|
|
|
+ height: 35px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ padding: 5px 15px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ background: #FF5C03 !important;
|
|
|
+ border-radius: 6px;
|
|
|
+ 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;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .danmu-icon{
|
|
|
+ height: 24px;
|
|
|
+ width: 24px;
|
|
|
+ margin-right: 12px;
|
|
|
+ }
|
|
|
+ .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;
|
|
|
+ }
|
|
|
+ .tabbox-bar {
|
|
|
+ @include u-flex(row, center, flex-start);
|
|
|
+ background-color: #fff;
|
|
|
+ .warning {
|
|
|
+ flex-shrink: 0;
|
|
|
+ padding-right: 20rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .tabbox {
|
|
|
+ flex: 1;
|
|
|
+ @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;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .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;
|
|
|
+ }
|
|
|
+
|
|
|
+ .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;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .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: 100rpx;
|
|
|
+ width: 100rpx;
|
|
|
+ font-size: 25rpx;
|
|
|
+ text-align: center;
|
|
|
+ padding: 10rpx;
|
|
|
+ @include u-flex(row, 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);
|
|
|
+ }
|
|
|
+
|
|
|
+ to {
|
|
|
+ transform: translateX(-100%);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .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;
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|
