videovip.vue 63 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518151915201521152215231524152515261527152815291530153115321533153415351536153715381539154015411542154315441545154615471548154915501551155215531554155515561557155815591560156115621563156415651566156715681569157015711572157315741575157615771578157915801581158215831584158515861587158815891590159115921593159415951596159715981599160016011602160316041605160616071608160916101611161216131614161516161617161816191620162116221623162416251626162716281629163016311632163316341635163616371638163916401641164216431644164516461647164816491650165116521653165416551656165716581659166016611662166316641665166616671668166916701671167216731674167516761677167816791680168116821683168416851686168716881689169016911692169316941695169616971698169917001701170217031704170517061707170817091710171117121713171417151716171717181719172017211722172317241725172617271728172917301731173217331734173517361737173817391740174117421743174417451746174717481749175017511752175317541755175617571758175917601761176217631764176517661767176817691770177117721773177417751776177717781779178017811782178317841785178617871788178917901791179217931794179517961797179817991800180118021803180418051806180718081809181018111812181318141815181618171818181918201821182218231824182518261827182818291830183118321833183418351836183718381839184018411842184318441845184618471848184918501851185218531854185518561857185818591860186118621863186418651866186718681869187018711872187318741875187618771878187918801881188218831884188518861887188818891890189118921893189418951896189718981899190019011902190319041905190619071908190919101911191219131914191519161917191819191920192119221923192419251926192719281929193019311932193319341935193619371938193919401941194219431944194519461947194819491950195119521953195419551956195719581959196019611962196319641965196619671968196919701971197219731974197519761977197819791980198119821983198419851986198719881989199019911992199319941995199619971998199920002001200220032004200520062007200820092010201120122013201420152016201720182019202020212022202320242025202620272028202920302031203220332034203520362037203820392040204120422043204420452046204720482049205020512052205320542055205620572058205920602061206220632064206520662067206820692070207120722073207420752076207720782079208020812082208320842085208620872088208920902091209220932094209520962097209820992100210121022103210421052106210721082109211021112112211321142115211621172118211921202121212221232124212521262127212821292130213121322133213421352136213721382139214021412142214321442145214621472148214921502151215221532154215521562157215821592160216121622163216421652166216721682169217021712172217321742175217621772178217921802181218221832184218521862187218821892190219121922193219421952196219721982199220022012202220322042205220622072208220922102211221222132214221522162217221822192220222122222223222422252226222722282229223022312232223322342235223622372238223922402241224222432244224522462247224822492250225122522253225422552256225722582259226022612262226322642265226622672268226922702271227222732274227522762277227822792280228122822283228422852286228722882289229022912292229322942295229622972298229923002301230223032304230523062307230823092310231123122313231423152316231723182319232023212322232323242325232623272328232923302331233223332334233523362337233823392340234123422343234423452346234723482349235023512352235323542355235623572358235923602361236223632364236523662367236823692370237123722373237423752376237723782379238023812382238323842385238623872388238923902391239223932394239523962397239823992400240124022403240424052406240724082409241024112412241324142415241624172418241924202421242224232424242524262427242824292430243124322433243424352436243724382439244024412442244324442445244624472448244924502451245224532454245524562457245824592460246124622463246424652466246724682469247024712472247324742475247624772478247924802481248224832484248524862487248824892490249124922493249424952496249724982499250025012502250325042505
  1. <template>
  2. <view class="content " >
  3. <!-- <view class="header-nav" :style="{height: `calc(88rpx + ${statusBarHeight}px)`,paddingTop: statusBarHeight + 'px'}">
  4. <u-icon name="arrow-left" size="28" @click="tosales" v-if="appToken"></u-icon>
  5. <view class="header-title" :style="{width:menuButtonLeft + 'px',height:menuButtonH+'px',lineHeight:menuButtonH+'px'}">{{courseInfo.title}}</view>
  6. </view> -->
  7. <view class="video-box" >
  8. <image v-if="!isLogin || isAddKf!=1" class="video-poster" :src="courseInfo.imgUrl" mode="aspectFill">
  9. </image>
  10. <video
  11. @timeupdate="onTimeUpdate"
  12. @progress="progressChange"
  13. @error="videoErrorCallback"
  14. @play="getPlay"
  15. @pause="getPause"
  16. @ended="getEnded"
  17. @fullscreenchange="fullscreenchange"
  18. :title="courseInfo.title"
  19. style="width: 100%;height: 420rpx;"
  20. :poster="poster"
  21. id="video-content-box"
  22. controls
  23. :auto-pause-if-open-native="true"
  24. :auto-pause-if-navigate="true"
  25. :enable-progress-gesture="false"
  26. :show-progress="true"
  27. :picture-in-picture-mode="[]"
  28. :show-background-playback-button="false"
  29. :src="videoUrl">
  30. <!-- <cover-image v-if="courseLogo" :class="isFull?'logo-full':'logo'" :src="courseLogo" mode="widthFix"></cover-image> -->
  31. </video>
  32. </view>
  33. <view class="justify-start align-center fs24 base-color-9" v-if="userInfo.userId">
  34. <view>{{nameuser?nameuser:'暂未授权昵称'}}#</view>
  35. <view>{{userInfo.userId}}</view>
  36. </view>
  37. <view class="title-content" id="title-content">
  38. <!-- 答题时展示小节课程名,其他展示课程名 -->
  39. <!-- 小节课程名 -->
  40. <view class="subtitlebox " v-if="isLogin&&isAddKf==1">
  41. {{courseInfo.title}}
  42. </view>
  43. <!-- 课程名字 -->
  44. <view class="miantitlebox" v-else>
  45. {{courseInfo.courseName}}
  46. </view>
  47. </view>
  48. <scroll-view class="scroll-view" :style="{height: height}" :scroll-top="scrollTop" scroll-y="true">
  49. <!-- 介绍 -->
  50. <view class="descbox">
  51. <template v-if="!isLogin||isAddKf!=1">
  52. <view class="descbox-title">{{courseInfo.title}}</view>
  53. <view class="descbox-info">
  54. <!-- <view class="descbox-info-l">
  55. <view>{{courseInfo.views}}次播放</view>
  56. <view class="descbox-info-time">总时长:{{courseInfo.totalDuration}}</view>
  57. </view> -->
  58. <view class="descbox-info-r expand" v-if="textHeight > 21">
  59. <text @click="handleExpand">{{isExpand ? '收起简介' : '展开简介'}}</text>
  60. <image :src="imgPath+'/app/image/course_arrow_up_icon.png'" v-show="isExpand"></image>
  61. <image :src="imgPath+'/app/image/course_arrow_down_icon.png'" v-show="!isExpand"></image>
  62. </view>
  63. </view>
  64. </template>
  65. <view class="descbox-desc" id="descbox-desc" :style="{height: isExpand ? 'auto': '42rpx'}">
  66. <text>{{courseInfo.description==null?'':courseInfo.description}}</text>
  67. <view :class="isExpand ? 'expand': 'expand expand-ab'" v-if="isLogin&&isAddKf==1&&textHeight > 21">
  68. <text @click="handleExpand">{{isExpand ? '收起简介' : '展开简介'}}</text>
  69. <image :src="imgPath+'/app/image/course_arrow_up_icon.png'" v-show="isExpand"></image>
  70. <image :src="imgPath+'/app/image/course_arrow_down_icon.png'" v-show="!isExpand"></image>
  71. </view>
  72. </view>
  73. </view>
  74. <!-- 无效或者已过期 -->
  75. <view class="nocourse" v-if="msg">
  76. <image :src="imgPath+'/app/image/course_expiration_img.png'" mode="widthFix"></image>
  77. <view>{{msg}}</view>
  78. </view>
  79. <!-- 问题 -->
  80. <view class="ques-content" v-if="isLogin&&isAddKf==1">
  81. <view class="ques-content-tit" v-if="isLogin &&!isquestion" >问答题</view>
  82. <view v-for="(item,index) in quesList" :key="index">
  83. <view class="ques-title">
  84. <text >{{index + 1}}.</text>
  85. <view class="ques-type" v-show="item.type == 1 || item.type == 2">
  86. {{item.type == 1 ? '单选' : item.type == 2 ? '多选' : ''}}
  87. </view>
  88. <text class="fs40">{{item.title}}</text>
  89. </view>
  90. <view
  91. :class="isAnswer(item,option.name) ?'ques-option ques-option-active':'ques-option'"
  92. v-for="(option,idx) in item.questionOption"
  93. :key="idx"
  94. @click="handleAnswer(item,option)">
  95. <view class="fs40">
  96. {{numberToLetter(idx)}}.
  97. </view>
  98. <view class="fs40">{{option.name}}</view>
  99. </view>
  100. </view>
  101. </view>
  102. </scroll-view>
  103. <!-- 线路 -->
  104. <!-- <view class="video-line" @click="openPop" v-if="isLogin&&isAddKf==1">
  105. <image :src="imgPath+'/app/image/changePlayer-icon.png'"></image>
  106. <text>线路{{lineIndex + 1 | numberToChinese}}</text>
  107. </view> -->
  108. <!-- 线路弹窗 -->
  109. <!-- <uni-popup ref="popup" type="bottom" class="full-width-popup">
  110. <view class="popupbox">
  111. <view class="popupbox-head">
  112. <text>线路选择</text>
  113. <image class="close-icon" :src="imgPath+'/app/image/tc_close_icon.png'" mode="aspectFill" @click="close">
  114. </image>
  115. </view>
  116. <view class="popupbox-content">
  117. <view :class="lineIndex == index ? 'line-item line-active': 'line-item'"
  118. v-for="(it,index) in lineList" :key="index" @click="handleLine(index)">
  119. 线路{{index + 1 | numberToChinese}}</view>
  120. </view>
  121. </view>
  122. </uni-popup> -->
  123. <!-- 温馨提示弹窗 -->
  124. <u-popup :show="tipsPopup" mode="center" :closeOnClickOverlay='true' @close='tipsPopup=!tipsPopup'
  125. :safeAreaInsetBottom='false' round='12'>
  126. <view class="tipsPopup-mask">
  127. <image class="red_envelope_top" :src="imgPath+'/app/image/red_envelope_img.png'" mode="aspectFill"></image>
  128. <view class="tipsPopup">
  129. <image class="tipsPopup-close" :src="imgPath+'/app/image/course_close_white_icon.png'" mode="aspectFill"
  130. @click="closeTipsPop"></image>
  131. <view class="tipsPopup-line">
  132. <view class="tipsPopup-box">
  133. <view class="tipsPopup-head">
  134. <image class="tipsPopup-head-title" :src="imgPath+'/app/image/tips_title_img.png'"
  135. mode="widthFix"></image>
  136. </view>
  137. <view class="tipsPopup-content">
  138. <view class="tipsPopup-content-title">亲爱的用户,</view>
  139. <view>您已经观看课程{{timepath}}的时间了,请注意休息并保持专注。</view>
  140. </view>
  141. <view class="tipsPopup-btn-box">
  142. <view class="tipsPopup-btn" @click="closeTipsPop">继续观看领奖励</view>
  143. </view>
  144. </view>
  145. </view>
  146. </view>
  147. </view>
  148. </u-popup>
  149. <!-- 答题弹窗 -->
  150. <u-popup :show="answerPopup" mode="center" @close="closepop()" @open="open" closeOnClickOverlay
  151. :safeAreaInsetBottom='false' round='12'>
  152. <view :class="errTitle == '恭喜你,回答正确' ? 'answerPopup-box bg':'answerPopup-box'">
  153. <!-- 正确 -->
  154. <image class="tipimg" v-if="errTitle == '恭喜你,回答正确'" :src="imgPath+'/app/image/course_answer_img.png'"
  155. mode="aspectFill"></image>
  156. <!-- 错误 -->
  157. <image class="tipimg" v-else :src="imgPath+'/app/image/course_answer_incorrectly_img.png'" mode="aspectFill">
  158. </image>
  159. <view class="answerPopup-title">{{errTitle}}</view>
  160. <view class="answerPopup-desc" v-html="errDesc"></view>
  161. <!-- 选择奖励 -->
  162. <!-- 错误题目 -->
  163. <view class="errQuesbox" v-if="errQues&&errQues.length>0">
  164. <view class="errQuesbox-item textOne" v-for="(it,index) in errQues" :key="index">{{it.title}}</view>
  165. </view>
  166. <view class="answerPopup-btn" v-if="errTitle == '恭喜你,回答正确'" @click="closeAnswerPopup">点击领取红包</view>
  167. <view class="tipsPopup-btn-box" v-else
  168. :style="{marginTop: errQues&&errQues.length>0 ? '40rpx':'54rpx'}">
  169. <view class="tipsPopup-btn" @click="closeAnswerPopup">{{remain > 0 ? '重新答题': '确认'}}</view>
  170. </view>
  171. </view>
  172. </u-popup>
  173. <!-- 客服二维码弹窗 -->
  174. <u-popup :show="kfPopup" mode="center" :mask-click="false" round='12' @close="kefpop">
  175. <view class="kfqrcode-box">
  176. <view class="justify-start align-center fs24 base-color-9">
  177. <view>{{nameuser}}#</view>
  178. <view>{{userInfo.userId}}</view>
  179. </view>
  180. <view>请添加客服</view>
  181. <image class="kfqrcode" :src="qrcode" show-menu-by-longpress="true" mode="aspectFit"></image>
  182. <!-- <view v-show="qrcodeMsg" style="margin-top: 30rpx;" v-html="qrcodeMsg"></view> -->
  183. <!-- <image class="kfqrcode-close" :src="imgPath+'/app/image/course_close_white_icon.png'" mode="aspectFill"
  184. @click="closeKFPop"></image> -->
  185. </view>
  186. </u-popup>
  187. <u-popup :show="timepop" mode="center" round='12'>
  188. <view class="timepopbox center column">
  189. <view class="fs40 bold ">不在看课时间范围内</view>
  190. <view class="mtb20">看课时间</view>
  191. <view >{{videocont.startDateTime}}</view>
  192. <view>至</view>
  193. <view >{{videocont.endDateTime}}</view>
  194. <view class="base-bg-orange colorf p20 radius50 mt20"
  195. @click="getH5CourseVideoDetails">刷新时间</view>
  196. </view>
  197. </u-popup>
  198. <u-popup :show="userlogo" mode="bottom" round='12'>
  199. <view class="userlogo column">
  200. <view class="mtb30 justify-start align-center ml20">
  201. <u-avatar :src="imgPath+'/app/image/logo.png'" size="50"></u-avatar>
  202. <view class="bold mlr20">{{imgname}}</view>
  203. <view>申请</view>
  204. </view>
  205. <view class="bold fs36 ml20">授权你的昵称头像信息</view>
  206. <view class="mtb20 justify-between align-center plr20">
  207. <view class="justify-start align-center">
  208. <view class="boxweixin" :class="userinfos.nickname==''?'boxnosel':'boxsel'">
  209. <view v-if="userinfos.nickname">√</view>
  210. </view>
  211. <view class="ml20">
  212. <view class="base-color-3 bold">第一步</view>
  213. <view class="fs32 base-color-9">请点击授权微信昵称</view>
  214. </view>
  215. </view>
  216. <view class="button-container">
  217. <input
  218. type="nickname"
  219. class="hidden-input"
  220. @blur="onNickNameInput"
  221. @input="onNickNameInput"
  222. />
  223. <button class="custom-button" :class="nameuser==''?'subname':'subavt'">{{nameuser?"已授权":'允许授权'}}</button>
  224. </view>
  225. </view>
  226. <view class="mtb20 justify-between align-center plr20 mt40">
  227. <view class="justify-start align-center">
  228. <view class="boxweixin" :class="userinfos.nickname==''?'boxnosel':'boxsel'">
  229. <view v-if="userinfos.avatar">√</view>
  230. </view>
  231. <view class="ml20">
  232. <view class="base-color-3 bold">第二步</view>
  233. <view class="fs32 base-color-9">请点击授权微信头像</view>
  234. </view>
  235. </view>
  236. <view class="button-container">
  237. <button open-type="chooseAvatar" @chooseavatar="onChooseAvatar" class="hidden-input"
  238. v-if="nameuser">
  239. 允许授权
  240. </button>
  241. <button class="custom-button sub" @click="shouquan" v-if="nameuser==''">允许授权</button>
  242. <button class="custom-button " :class="avataruser==''?'subname':'subavt'"
  243. v-else>{{avataruser?"已授权":'允许授权'}}</button>
  244. </view>
  245. </view>
  246. <view class="submitname" @click="confimrname" :class="nameuser&&avataruser?'subact':'sub'">确定</view>
  247. </view>
  248. </u-popup>
  249. <view class="footer-tips">重庆云联融智提供技术支持</view>
  250. <!-- footer -->
  251. <view class="footer" v-if="videoId">
  252. <view class="btns" >
  253. <!-- <button
  254. class="author-btn"
  255. open-type="getPhoneNumber"
  256. @getphonenumber="phoneLogin" v-if="!isquestion&&authType==1">{{isLogin&&isAddKf==1 ? '提交答案领取奖励' : '立即学习'}}</button>
  257. <button
  258. class="author-btn"
  259. open-type="getUserInfo" :disabled="userdisabled"
  260. @getuserinfo="userInfologin" v-if="authType==0&&!isquestion">{{isLogin&&isAddKf==1 ? '提交答案领取奖励' : '立即学习'}}</button> -->
  261. <button class="author-btn"
  262. @click="submit">{{isLogin&&isAddKf==1 ?'提交答案领取奖励' : '立即学习'}}</button>
  263. </view>
  264. </view>
  265. <view>
  266. <u-modal :show="showfalse" title="提示" :content='contentmsg' @confirm='showfalse=false'></u-modal>
  267. </view>
  268. <u-loading-page :loading="viewload" iconSize="32" loadingColor="#3c9cff" fontSize="24"
  269. :loading-text="loadingtext"></u-loading-page>
  270. <ykscreenRecord></ykscreenRecord>
  271. <courseExpiration v-if="showExpiration" :code="resCode" :msg="resMsg" :qrcode="qrcode"
  272. :userId="user && userInfo.userId ? userInfo.userId : ''"></courseExpiration>
  273. </view>
  274. </template>
  275. <script>
  276. import { generateRandomString} from "@/utils/common.js"
  277. import dayjs from 'dayjs';
  278. import { mapGetters } from 'vuex';
  279. import ykscreenRecord from "@/components/yk-screenRecord/yk-screenRecord.vue"
  280. import courseExpiration from './components/courseExpiration.vue'
  281. import {
  282. getErrMsg,
  283. getH5CourseByVideoId,
  284. getH5CourseVideoDetails,
  285. courseAnswer,
  286. getFinishCourseVideo,
  287. getIsAddKf,
  288. getInternetTraffic,
  289. getIntegralByH5Video,
  290. sendReward,
  291. getRealLink,
  292. loginByMiniApp,
  293. handleFsUserWx
  294. } from "@/api/courseLook.js"
  295. import {
  296. getConfigByKey
  297. } from "@/api/user.js"
  298. export default {
  299. components:{
  300. ykscreenRecord,
  301. courseExpiration
  302. },
  303. data() {
  304. return {
  305. videoItem:{},
  306. viewload:true,
  307. loadingtext:"数据加载中...",
  308. baseUrl:uni.getStorageSync('requestPath'),
  309. // 1 红包 2 积分
  310. rewardType: [{
  311. name: '红包奖励',
  312. value: 1
  313. }, {
  314. name: '积分奖励',
  315. value: 2
  316. }],
  317. currentReward: 1,
  318. player: null,
  319. loading: true,
  320. progress: 0,
  321. code: null,
  322. statusBarHeight: uni.getSystemInfoSync().statusBarHeight,
  323. scrollTop: 0,
  324. height: '0px',
  325. isLogin: false,
  326. videoUrl: "",
  327. videoId: "",
  328. //现在的时长
  329. playTime: 0,
  330. //总时长
  331. duration: 0,
  332. playDuration: 0,
  333. // 用于续播
  334. playDurationSeek: 0,
  335. // 温馨提醒时间节点,
  336. tipsTime: 0,
  337. tipsOpen: false,
  338. config: {},
  339. courseInfo: {},
  340. quesList: [],
  341. lineList: [],
  342. // 错题
  343. errQues: [],
  344. // 答题机会
  345. remain: 0,
  346. errTitle: "",
  347. errDesc: "",
  348. showPlay: true,
  349. showControls: false,
  350. playStatus: "",
  351. isFull: false,
  352. isAddKf: 0,
  353. lineIndex: 0,
  354. // 是否展开
  355. isExpand: true,
  356. textHeight: 0, //文本高度
  357. qwUserId: "",
  358. qrcode: "",
  359. corpId: "",
  360. periodId:"",//营期id
  361. companyUserId:"",//销售id
  362. companyId:"",//公司id
  363. courseId:"",//课程id
  364. qrcodeMsg: "",
  365. urlOption: {},
  366. bufferRate: 0, // 缓冲时间
  367. uuId: "",
  368. isEnded: false,
  369. // 是否允许拖动进度条
  370. linkType: 0,
  371. ip: null,
  372. checked: true,
  373. isFinish: 0, // 是否完课
  374. interval: null,
  375. intervalIntegral: null, // 积分定时
  376. options: {
  377. sources: [{
  378. src: ""
  379. }],
  380. poster: "",
  381. live: false /* 是否直播 */ ,
  382. controls: true,
  383. autoplay: false,
  384. licenseUrl: 'https://license.vod2.myqcloud.com/license/v2/1323137866_1/v_cube.license', // license 地址,参考准备工作部分,在视立方控制台申请 license 后可获得 licenseUrl,
  385. LicenseKey: 'bcc5bd9a14b798b48c52ff005a21d926',
  386. controlBar: {
  387. volumePanel: false,
  388. playbackRateMenuButton: false,
  389. QualitySwitcherMenuButton: false,
  390. // progressControl: false
  391. },
  392. plugins: {
  393. // ProgressMarker: false,
  394. ContextMenu: {
  395. statistic: false
  396. }
  397. },
  398. },
  399. // 错误请求次数
  400. errorCount: 0,
  401. answerPopup: false,
  402. sortLink:"",
  403. // 课程是否过期
  404. isExpire: false,
  405. menuButtonLeft: 281,
  406. menuButtonH: 45,
  407. timer: null,
  408. flag: false,
  409. msg:'',
  410. poster:'',
  411. userInfo:{},
  412. timeid:'',
  413. videocont:{},
  414. timepop:false,
  415. appToken:'',
  416. kfPopup:false,
  417. iskftype:0,
  418. courseLogo: '',
  419. isquestion:false,
  420. tipsPopup:false,
  421. timepath:'3分之1',
  422. tipsTime2:0,
  423. userlogo:false,
  424. userinfos:{
  425. nickname:"",
  426. avatar:""
  427. },
  428. headImg:'',
  429. authType:0,//0微信登录 1手机号登录
  430. userdisabled:false,
  431. projectId:'',
  432. showfalse:false,
  433. contentmsg:null,
  434. }
  435. },
  436. filters: {
  437. numberToChinese(number) {
  438. if (number) {
  439. const chineseNumber = ['一', '二', '三', '四', '五', '六', '七', '八', '九'];
  440. return chineseNumber[number - 1];
  441. } else {
  442. return ''
  443. }
  444. },
  445. },
  446. computed: {
  447. ...mapGetters(['coureLogin']),
  448. isAnswer() {
  449. return (item, name) => {
  450. if (item.type == 1) {
  451. return item.answer == name
  452. } else if (item.type == 2) {
  453. const array = item.answer.split(',')
  454. return array.some(i => i == name)
  455. } else {
  456. return false
  457. }
  458. }
  459. },
  460. imgPath() {
  461. return this.$store.state.imgpath
  462. },
  463. imgname() {
  464. return this.$store.state.logoname
  465. },
  466. appid() {
  467. return this.$store.state.appid
  468. },
  469. nameuser() {
  470. return this.userinfos.nickname
  471. },
  472. avataruser() {
  473. return this.userinfos.avatar
  474. },
  475. },
  476. watch: {
  477. coureLogin: {
  478. immediate: true, // 页面一进入就检查一次
  479. handler(val) {
  480. if (val == 2&&this.isLogin) {
  481. console.log("看课AppToken失效,请重新登录")
  482. this.isLogin = false
  483. this.isAddKf = 0
  484. this.goLogin()
  485. }
  486. }
  487. }
  488. },
  489. onLoad(option) {
  490. this.getWebviewUrl()
  491. uni.$on('usercode',(data)=>{
  492. console.log('huoqu ',data)
  493. this.goLogin(data)
  494. })
  495. uni.$on('vipMsg',(data)=>{
  496. console.log(4444,data)
  497. this.contentmsg=data
  498. this.showfalse=true
  499. uni.showToast({
  500. icon:'none',
  501. title: data,
  502. duration:5000
  503. });
  504. })
  505. this.videoContext = uni.createVideoContext('video-content-box', this)
  506. this.code = option.code
  507. if(uni.getStorageSync('userInfo')&&JSON.stringify(uni.getStorageSync('userInfo'))!='{}') {
  508. this.userInfo = uni.getStorageSync('userInfo')
  509. } else {
  510. this.userInfo = {}
  511. }
  512. this.appToken=uni.getStorageSync('companyUserInfo')
  513. if(!option.course){
  514. const keys = decodeURIComponent(Object.keys(option)[0]);
  515. this.urlOption=JSON.parse(keys.split('course=')[1])
  516. }else{
  517. this.urlOption = option.course ? JSON.parse(option.course) : {}
  518. }
  519. uni.setStorageSync('H5course',this.urlOption)
  520. this.videoId = this.urlOption.videoId
  521. this.courseId = this.urlOption.courseId
  522. this.periodId = this.urlOption.periodId
  523. this.companyId = this.urlOption.companyId
  524. this.companyUserId = this.urlOption.companyUserId
  525. this.projectId= this.urlOption.projectId
  526. this.timeid=this.urlOption.id
  527. console.log(this.urlOption)
  528. console.log(decodeURIComponent(option.course))
  529. // this.sortLink = this.urlOption.link || ''
  530. this.getMenuButton()
  531. // #ifdef MP-WEIXIN
  532. // if(this.$store.state.logoname!=='乐氏本源'&&!uni.getStorageSync('userInfos')){
  533. // this.userlogo=true
  534. // }
  535. console.log(uni.getStorageSync('userInfos'))
  536. if(!uni.getStorageSync('userInfos')&&this.$store.state.logoname=='乐氏本源'){
  537. uni.navigateTo({
  538. url:'/pages_course/webview'
  539. })
  540. return
  541. }
  542. // #endif
  543. },
  544. onShow() {
  545. this.userinfos=uni.getStorageSync('userinfos')
  546. this.userInfo=uni.getStorageSync('userInfo')
  547. this.tipsOpen = false
  548. this.isExpand = true
  549. this.uuId = generateRandomString(16)
  550. if(this.videoId) {
  551. this.getH5CourseByVideo()
  552. }
  553. const AppToken=uni.getStorageSync('TOKEN_WEXIN')
  554. console.log(AppToken)
  555. if(AppToken){
  556. // this.isLogin=true
  557. if(this.isAddKf == 1&&this.userInfo.userId){
  558. console.log(1233)
  559. this.getH5CourseVideoDetails()
  560. } else{
  561. // this.checkUserInfoA()
  562. this.getIsAddKf()
  563. }
  564. }
  565. // if(this.sortLink){
  566. // this.getLink()
  567. // } else {
  568. // uni.showToast({
  569. // title: 'sortLink is not found',
  570. // icon: 'none'
  571. // });
  572. // }
  573. },
  574. mounted() {
  575. // this.getIP()
  576. this.getHeight()
  577. },
  578. onHide() {
  579. // this.player = uni.createVideoContext('video-content-box');
  580. if (this.player) {
  581. this.player.pause()
  582. }
  583. // if (this.interval != null) {
  584. // clearInterval(this.interval)
  585. // this.interval = null
  586. // }
  587. },
  588. onUnload() {
  589. if (this.interval != null) {
  590. clearInterval(this.interval)
  591. this.interval = null
  592. }
  593. this.clearIntegral()
  594. uni.$off('usercode')
  595. },
  596. beforeDestroy() {
  597. this.player = uni.createVideoContext('video-content-box');
  598. if (this.player) {
  599. this.player.stop()
  600. this.player = null
  601. }
  602. if (this.interval != null) {
  603. clearInterval(this.interval)
  604. this.interval = null
  605. }
  606. this.clearIntegral()
  607. },
  608. methods: {
  609. getWebviewUrl() {
  610. var data = {
  611. key: 'course.config'
  612. }
  613. getConfigByKey(data).then(res => {
  614. if (res.code == 200) {
  615. console.log("getConfigByKey====", JSON.parse(res.data))
  616. let data = JSON.parse(res.data,)
  617. uni.setStorageSync('setWebviewUrl',data.userCourseAuthDomain)
  618. }else{
  619. uni.showToast({
  620. icon:'none',
  621. title: res.msg,
  622. });
  623. }
  624. })
  625. },
  626. goLogin(data) {
  627. if(data){
  628. console.log('huoqu1222',data)
  629. uni.showLoading({
  630. title: '加载中'
  631. })
  632. uni.login({
  633. provider: "weixin",
  634. success: async loginRes => {
  635. let code = loginRes.code // 获取开发code
  636. handleFsUserWx({
  637. code: code,
  638. appId:this.appid,
  639. userId:data.userId
  640. })
  641. .then( res => {
  642. if(res.code==200){
  643. console.log(res)
  644. uni.hideLoading();
  645. uni.showToast({
  646. icon:'none',
  647. title: "登录成功",
  648. });
  649. this.userinfos=uni.getStorageSync('userinfos')
  650. uni.getStorageSync('TOKEN_WEXIN');
  651. this.userInfo=uni.getStorageSync('userInfo');
  652. this.isLogin = true
  653. this.getH5CourseVideoDetails()
  654. // setTimeout(()=>{
  655. // this.getIsAddKf()
  656. // },200)
  657. }else if(res.code==406){
  658. uni.hideLoading();
  659. uni.showToast({
  660. icon:'none',
  661. title: '该用户已成为其他销售会员',
  662. });
  663. }else{
  664. uni.hideLoading();
  665. uni.showToast({
  666. icon:'none',
  667. title: res.msg,
  668. });
  669. }
  670. })
  671. },
  672. })
  673. }else{
  674. uni.navigateTo({
  675. url:'/pages_course/webview?H5course='+uni.getStorageSync('H5course')
  676. })
  677. }
  678. },
  679. shouquan(){
  680. if(this.userinfos.nickname==''){
  681. uni.showToast({
  682. icon:'none',
  683. title: "请先授权微信昵称",
  684. });
  685. }
  686. },
  687. confimrname(){
  688. if(this.userinfos.nickname==''){
  689. uni.showToast({
  690. icon:'none',
  691. title: "请授权微信昵称",
  692. });
  693. return
  694. }
  695. if(this.userinfos.avatar==''){
  696. uni.showToast({
  697. icon:'none',
  698. title: "请授权微信头像",
  699. });
  700. return
  701. }
  702. uni.setStorageSync('userInfos',this.userinfos)
  703. this.editUserA()
  704. this.userlogo=false
  705. },
  706. onChooseAvatar(e){
  707. this.userinfos.avatar=e.detail.avatarUrl
  708. uni.uploadFile({
  709. url: uni.getStorageSync('requestPath')+'/app/common/uploadOSS', //仅为示例,非真实的接口地址
  710. filePath: e.detail.avatarUrl,
  711. name: 'file',
  712. formData: {
  713. 'user': 'test' // 上传附带参数
  714. },
  715. success: (uploadFileRes) => {
  716. console.log(uploadFileRes)
  717. // 根据接口具体返回格式 赋值具体对应url
  718. var data=JSON.parse(uploadFileRes.data)
  719. this.headImg=uni.getStorageSync('requestPath')+data.fileName
  720. this.userinfos.avatar=data.url
  721. }
  722. });
  723. },
  724. onNickNameInput(e){
  725. console.log(e)
  726. this.userinfos.nickname=e.detail.value
  727. },
  728. kefpop(){
  729. if(this.appToken){
  730. this.kfPopup==false
  731. }
  732. },
  733. tosales(){
  734. uni.switchTab({
  735. url:"/pages/index/index"
  736. })
  737. },
  738. closepop(){
  739. this.answerPopup=false
  740. },
  741. open(){
  742. },
  743. userInfologin(e){
  744. console.log(e)
  745. this.userdisabled=true
  746. uni.showLoading({
  747. title: "处理中..."
  748. });
  749. if (e.mp.detail.errMsg == 'getUserInfo:ok') {
  750. this.utils.getProvider()
  751. .then(provider => {
  752. if (!provider) {
  753. this.userdisabled=false
  754. reject()
  755. }
  756. // uni登录
  757. uni.login({
  758. provider: provider,
  759. success: async loginRes => {
  760. console.log(loginRes)
  761. console.log(e)
  762. let code = loginRes.code // 获取开发code
  763. this.userinfos=uni.getStorageSync('userInfos')?uni.getStorageSync('userInfos'):this.userinfos
  764. loginByMiniApp({
  765. encryptedData: e.mp.detail.encryptedData,
  766. iv: e.mp.detail.iv,
  767. code: code,
  768. companyId : this.companyId || '',
  769. companyUserId:this.companyUserId || 0,
  770. nickname:this.userinfos.nickname ||'',
  771. avatar:this.userinfos.avatar||'',
  772. authType:this.authType,
  773. appId:this.appid,
  774. projectId:this.projectId
  775. })
  776. .then( res => {
  777. this.userdisabled=false
  778. if(res.code==200){
  779. console.log(res)
  780. uni.hideLoading();
  781. uni.showToast({
  782. icon:'none',
  783. title: "登录成功",
  784. });
  785. uni.setStorageSync('TOKEN_WEXIN', res.token);
  786. uni.setStorageSync('userInfo', JSON.stringify(res.user));
  787. this.userInfo=res.user;
  788. uni.hideLoading()
  789. // this.checkUserInfoA()
  790. // this.isLogin = true
  791. }else if(res.code==406){
  792. uni.hideLoading();
  793. uni.showToast({
  794. icon:'none',
  795. title: '该用户已成为其他销售会员',
  796. });
  797. }else{
  798. uni.hideLoading();
  799. uni.showToast({
  800. icon:'none',
  801. title: res.msg,
  802. });
  803. }
  804. })
  805. .catch(res=>{
  806. this.userdisabled=false
  807. })
  808. },
  809. fail() {
  810. this.userdisabled=false
  811. }
  812. })
  813. })
  814. .catch(err => {
  815. this.userdisabled=false
  816. uni.showToast({
  817. icon:'none',
  818. title: err,
  819. });
  820. })
  821. } else {
  822. this.userdisabled=false
  823. uni.showToast({
  824. title: '已拒绝授权',
  825. icon: 'none',
  826. duration: 2000,
  827. })
  828. }
  829. },
  830. phoneLogin(e) {
  831. console.log(e)
  832. this.userdisabled=false
  833. uni.showLoading({
  834. title: "处理中..."
  835. });
  836. if (e.mp.detail.errMsg == 'getPhoneNumber:ok') {
  837. this.utils.getProvider()
  838. .then(provider => {
  839. if (!provider) {
  840. this.userdisabled=false
  841. reject()
  842. }
  843. // uni登录
  844. uni.login({
  845. provider: provider,
  846. success: async loginRes => {
  847. this.userdisabled=false
  848. console.log(loginRes)
  849. console.log(e)
  850. let code = loginRes.code // 获取开发code
  851. this.userinfos=uni.getStorageSync('userInfos')?uni.getStorageSync('userInfos'):this.userinfos
  852. loginByMiniApp({
  853. encryptedData: e.mp.detail.encryptedData,
  854. iv: e.mp.detail.iv,
  855. code: code,
  856. companyId : this.companyId || '',
  857. companyUserId:this.companyUserId || 0,
  858. nickname:this.userinfos.nickname||'',
  859. avatar:this.userinfos.avatar||"",
  860. authType:this.authType,
  861. appId:this.appid,
  862. projectId:this.projectId
  863. })
  864. .then( res => {
  865. this.userdisabled=false
  866. if(res.code==200){
  867. console.log(res)
  868. uni.hideLoading();
  869. uni.showToast({
  870. icon:'none',
  871. title: "登录成功",
  872. });
  873. uni.setStorageSync('TOKEN_WEXIN', res.token);
  874. uni.setStorageSync('userInfo', JSON.stringify(res.user));
  875. this.userInfo=res.user;
  876. uni.hideLoading()
  877. this.checkUserInfoA()
  878. // this.isLogin = true
  879. // setTimeout(()=>{
  880. // this.getIsAddKf()
  881. // },200)
  882. }else if(res.code==406){
  883. uni.hideLoading();
  884. uni.showToast({
  885. icon:'none',
  886. title: '该用户已成为其他销售会员',
  887. });
  888. }else{
  889. uni.hideLoading();
  890. uni.showToast({
  891. icon:'none',
  892. title: res.msg,
  893. });
  894. }
  895. })
  896. .catch(res=>{
  897. this.userdisabled=false
  898. })
  899. },
  900. fail() {
  901. this.userdisabled=false
  902. }
  903. })
  904. })
  905. .catch(err => {
  906. this.userdisabled=false
  907. uni.showToast({
  908. icon:'none',
  909. title: err,
  910. });
  911. })
  912. } else {
  913. this.userdisabled=false
  914. uni.showToast({
  915. title: '已拒绝授权',
  916. icon: 'none',
  917. duration: 2000,
  918. })
  919. }
  920. },
  921. getMenuButton(){
  922. const menuButtonInfo = uni.getMenuButtonBoundingClientRect()
  923. this.menuButtonLeft = menuButtonInfo.left
  924. this.menuButtonH = menuButtonInfo.height
  925. },
  926. //播放时间更新事件方法
  927. onTimeUpdate(e){
  928. let currentTime = Math.round(e.detail.currentTime)
  929. if (this.playDurationSeek > 0) {
  930. this.playTime = this.playDurationSeek
  931. this.throttle(() => this.changeTime(this), 1000, false)
  932. } else {
  933. // console.log(this.isFinish)
  934. if (this.linkType != 1 && (currentTime - this.playTime > 3 || currentTime - this.playTime < -3)&&this.isFinish!=1) {
  935. uni.showToast({
  936. title: '不能快进哦',
  937. icon: 'none',
  938. });
  939. currentTime = this.playTime
  940. this.player.seek(this.playTime);
  941. }
  942. if (Math.floor(e.detail.currentTime) != this.flagTime) {
  943. this.flagTime = Math.floor(e.detail.currentTime)
  944. // 中途弹窗逻辑
  945. if(!this.tipsOpen&&this.tipsTime && this.playTime == this.tipsTime) {
  946. this.timepath='33%'
  947. this.openTipsPop()
  948. }
  949. if(!this.tipsOpen&&this.tipsTime2 && this.playTime == this.tipsTime2) {
  950. this.timepath='66%'
  951. this.openTipsPop()
  952. }
  953. }
  954. this.playTime = currentTime
  955. }
  956. },
  957. changeTime(that,e) {
  958. that.playDurationSeek = 0
  959. },
  960. videoErrorCallback(e) {
  961. this.clearIntegral()
  962. this.errorCount++
  963. if (this.errorCount > 3) return
  964. console.log(e)
  965. this.getErrMsg(e.target.errMsg)
  966. this.getH5CourseVideoDetails('error')
  967. },
  968. // 当开始/继续播放时触发play事件
  969. getPlay() {
  970. this.errorCount = 0
  971. // this.judgeDuration()
  972. },
  973. getPause() {
  974. this.clearIntegral()
  975. },
  976. getEnded() {
  977. this.clearIntegral()
  978. this.isEnded = true
  979. this.isFinish=1
  980. this.getFinishCourseVideo()
  981. },
  982. getIP() {
  983. uni.request({
  984. url: 'https://ipinfo.io/json', //仅为示例,并非真实接口地址。
  985. method: 'GET',
  986. success: (res) => {
  987. this.ip = res.data.ip
  988. }
  989. });
  990. },
  991. getHeight() {
  992. this.$nextTick(() => {
  993. const query = uni.createSelectorQuery().in(this);
  994. query
  995. .select("#title-content")
  996. .boundingClientRect((data) => {
  997. this.height =
  998. `calc(100vh - ${data.height}px - 420rpx - ${this.statusBarHeight}px - 120rpx )`
  999. })
  1000. .exec();
  1001. })
  1002. },
  1003. getDescHeight() {
  1004. this.$nextTick(() => {
  1005. const query = uni.createSelectorQuery().in(this);
  1006. query
  1007. .select("#descbox-desc")
  1008. .boundingClientRect((data) => {
  1009. this.textHeight = data.height
  1010. })
  1011. .exec();
  1012. })
  1013. },
  1014. numberToLetter(num) {
  1015. // 将数字转换为字母的 ASCII 码
  1016. let letterCode = num + 65;
  1017. // 将 ASCII 码转换为大写字母
  1018. let letter = String.fromCharCode(letterCode);
  1019. return letter;
  1020. },
  1021. updateTime() {
  1022. var that = this;
  1023. if (this.interval != null) {
  1024. clearInterval(this.interval)
  1025. }
  1026. this.interval = setInterval(function() {
  1027. that.getFinishCourseVideo()
  1028. that.getInternetTraffic()
  1029. }, 60000);
  1030. },
  1031. judgeDuration() {
  1032. var that = this;
  1033. if (this.intervalIntegral != null) {
  1034. clearInterval(this.intervalIntegral)
  1035. this.intervalIntegral = null
  1036. }
  1037. // 观看10分钟获得积分
  1038. this.intervalIntegral = setInterval(function() {
  1039. that.getIntegralByH5Video()
  1040. }, 600000);
  1041. },
  1042. clearIntegral() {
  1043. if (this.intervalIntegral != null) {
  1044. clearInterval(this.intervalIntegral)
  1045. this.intervalIntegral = null
  1046. }
  1047. },
  1048. // 展开简介
  1049. handleExpand() {
  1050. this.isExpand = !this.isExpand
  1051. },
  1052. getH5CourseByVideo() {
  1053. this.loading = true
  1054. getH5CourseByVideoId({
  1055. videoId: this.videoId
  1056. }).then(res => {
  1057. this.loading = false
  1058. if (res.code == 200) {
  1059. this.viewload=false
  1060. this.courseInfo = res.data
  1061. uni.setNavigationBarTitle({
  1062. title: this.courseInfo && this.courseInfo.title ? this.courseInfo.title : ''
  1063. });
  1064. }
  1065. this.getHeight()
  1066. this.getDescHeight()
  1067. },
  1068. rej => {
  1069. this.loading = false
  1070. }
  1071. ).catch(() => {
  1072. this.loading = false
  1073. })
  1074. },
  1075. getH5CourseVideoDetails(type) {
  1076. uni.showLoading({
  1077. title: '加载中'
  1078. })
  1079. console.log(this.userInfo)
  1080. const data={
  1081. videoId:this.videoId,
  1082. fsUserId:this.userInfo.userId,
  1083. courseId:this.courseId,
  1084. companyUserId:this.companyUserId,
  1085. periodId:this.periodId,
  1086. id:this.timeid
  1087. }
  1088. getH5CourseVideoDetails(data).then(res => {
  1089. if (res.code == 200) {
  1090. this.config = res.data.courseConfig || {}
  1091. this.isFinish = res.data.isFinish || 0
  1092. this.duration = res.data.courseVideoDetails &&
  1093. res.data.courseVideoDetails.duration ? res.data.courseVideoDetails.duration : 0
  1094. this.courseLogo = this.config&&JSON.stringify(this.config)!='{}'? this.config.courseLogo : ''
  1095. this.playDuration = res.data.playDuration || 0
  1096. this.playDurationSeek = res.data.playDuration || 0
  1097. // this.tipsTime = 38
  1098. this.tipsTime = res.data.tipsTime || 0
  1099. this.tipsTime2 = res.data.tipsTime2 || 0
  1100. let lineList = []
  1101. // if (res.course && res.course.lineOne) {
  1102. // lineList.push(res.course.lineOne)
  1103. // }
  1104. // if (res.course && res.course.lineTwo) {
  1105. // lineList.push(res.course.lineTwo)
  1106. // }
  1107. // if (res.course && res.course.lineThree) {
  1108. // lineList.push(res.course.lineThree)
  1109. // }
  1110. this.lineList = lineList
  1111. if (!this.player || type == 'error') {
  1112. uni.hideLoading();
  1113. this.lineIndex = this.config.defaultLine
  1114. this.videoUrl = res.data.courseVideoDetails.videoUrl
  1115. this.poster= res.data.courseVideoDetails &&
  1116. res.data.courseVideoDetails.thumbnail ? res.data.courseVideoDetails.thumbnail : ''
  1117. this.videocont=res.data
  1118. // this.options.sources = [{
  1119. // src: this.videoUrl
  1120. // }]
  1121. // this.options.poster = res.course && res.course.imgUrl ? res.course.imgUrl : ''
  1122. // this.initVideo()
  1123. this.playTime = this.playDuration >= this.duration ? 0 : this.playDuration
  1124. if(this.videocont.rang){
  1125. setTimeout(()=>{
  1126. this.player = uni.createVideoContext('video-content-box');
  1127. this.player.seek(this.playTime)
  1128. this.player.play();
  1129. },500);
  1130. this.timepop=false
  1131. }else{
  1132. this.timepop=true
  1133. }
  1134. } else {
  1135. // let div = document.querySelector(".vjs-progress-control");
  1136. // if(div) {
  1137. // if (this.isFinish == 1 || this.isEnded || this.linkType == 1) {
  1138. // div.style.pointerEvents = "auto";
  1139. // } else {
  1140. // div.style.pointerEvents = "none"; //禁止所有事件
  1141. // }
  1142. // }
  1143. this.playTime = this.playTime > this.playDuration ? this.playTime : this.playDuration >= this.duration ? 0 : this.playDuration
  1144. this.player.seek(this.playTime)
  1145. this.player.play();
  1146. }
  1147. this.updateTime();
  1148. if(res.data.courseVideoDetails.questionBankList.length==0){
  1149. this.isquestion=true
  1150. }else{
  1151. this.isquestion=false
  1152. }
  1153. console.log('题目',res.data.courseVideoDetails.questionBankList)
  1154. this.quesList = res.data.courseVideoDetails.questionBankList
  1155. && res.data.courseVideoDetails.questionBankList.length > 0 ? res.data.courseVideoDetails.questionBankList : [],
  1156. this.quesList = this.quesList.map(item => ({
  1157. ...item,
  1158. questionOption: JSON.parse(item.question),
  1159. answer: ''
  1160. }))
  1161. }else{
  1162. uni.showToast({
  1163. title: res.msg,
  1164. icon: "none"
  1165. })
  1166. }
  1167. this.getHeight()
  1168. this.getDescHeight()
  1169. },
  1170. rej => {}
  1171. )
  1172. },
  1173. handleAnswer(item, option, idx) {
  1174. let time = this.playTime
  1175. if(this.isEnded || this.isFinish==1) {
  1176. time = this.duration
  1177. } else {
  1178. if(time < this.playDuration&&this.isFinish!=1) {
  1179. // 没完课且小于续播的时间
  1180. time = this.playDuration
  1181. }
  1182. }
  1183. if(Number(this.duration || 0) == 0 || time < this.duration - 60) {
  1184. uni.showToast({
  1185. title: "请先观看完整课程再答题哦~",
  1186. icon: "none"
  1187. })
  1188. return
  1189. }
  1190. if (item.type == 1) {
  1191. // 单选option
  1192. item.answer = option.name
  1193. } else if (item.type == 2) {
  1194. // 多选
  1195. let answer = item.answer ? item.answer.split(',') : []
  1196. if (answer.indexOf(option.name) === -1) {
  1197. answer.push(option.name)
  1198. item.answer = answer.join(',')
  1199. } else {
  1200. answer.splice(answer.indexOf(option.name), 1)
  1201. item.answer = answer.join(',')
  1202. }
  1203. }
  1204. },
  1205. submit() {
  1206. if(this.isExpire){
  1207. uni.showToast({
  1208. title: '课程已过期或链接无效',
  1209. icon: 'none'
  1210. });
  1211. return
  1212. }
  1213. // 登录
  1214. this.$isLoginCourse().then(
  1215. res => {
  1216. console.log(res)
  1217. if(res){
  1218. console.log(res)
  1219. if (this.isAddKf == 1) {
  1220. // 答题
  1221. // 您已提交过答案,请领取红包
  1222. console.log(1223)
  1223. this.courseAnswer()
  1224. } else {
  1225. // 添加客服
  1226. if (this.videoId&&this.isLogin) {
  1227. console.log(12223131)
  1228. this.getIsAddKf()
  1229. } else if(this.iskftype==1){
  1230. uni.showToast({
  1231. title: '已看过其他销售分享的此课程,不能重复观看',
  1232. icon: 'none'
  1233. })
  1234. }
  1235. else {
  1236. // this.kfPopup=true
  1237. uni.removeStorageSync('TOKEN_WEXIN')
  1238. uni.showToast({
  1239. title: '已清除缓存,请重新进入页面!',
  1240. icon: 'none'
  1241. })
  1242. }
  1243. }
  1244. } else{
  1245. this.goLogin()
  1246. }
  1247. },
  1248. rej => {}
  1249. );
  1250. },
  1251. // 答题
  1252. courseAnswer() {
  1253. let time = this.playTime
  1254. if (this.isEnded||this.isFinish==1) {
  1255. time = this.duration
  1256. } else {
  1257. if (time < this.playDuration && this.isFinish != 1) {
  1258. // 没完课且小于续播的时间
  1259. time = this.playDuration
  1260. }
  1261. }
  1262. if (Number(this.duration || 0) == 0 || time < this.duration - 60) {
  1263. uni.showToast({
  1264. title: "请先观看完整课程再答题哦~",
  1265. icon: "none"
  1266. })
  1267. return
  1268. }
  1269. if (this.quesList.some(item => !item.answer)) {
  1270. uni.showToast({
  1271. title: "请确认是否答完所有题目",
  1272. icon: "none"
  1273. })
  1274. return
  1275. }
  1276. const questions = this.quesList.map(obj => {
  1277. const {
  1278. questionOption,
  1279. ...rest
  1280. } = obj;
  1281. return rest;
  1282. });
  1283. const param = {
  1284. ...this.urlOption,
  1285. userId:this.userInfo.userId,
  1286. questions: questions,
  1287. videoId: this.videoId,
  1288. duration: this.playTime,
  1289. }
  1290. this.errTitle = ""
  1291. this.errDesc = ""
  1292. this.errQues = []
  1293. courseAnswer(param).then(res => {
  1294. if (res.code == 200) {
  1295. if (res.incorrectQuestions) {
  1296. // 答题失败
  1297. if (res.incorrectQuestions.length > 0) {
  1298. this.errQues = res.incorrectQuestions
  1299. }
  1300. this.remain = res.remain || 0
  1301. if (res.remain > 0) {
  1302. this.answerPopup=true
  1303. this.errTitle = "很遗憾答错了"
  1304. this.errDesc = `<span style="color:#FF5C03">还有${res.remain}次机会,继续加油</span>`
  1305. // this.$refs.answerPopup.open("center")
  1306. this.answerPopup=true
  1307. }
  1308. } else {
  1309. // 答题成功
  1310. this.errTitle = "恭喜你,回答正确"
  1311. // this.errDesc = `请选择奖励`
  1312. // this.$refs.answerPopup.open("center")
  1313. // this.answerPopup=true
  1314. if(res.msg=='答题成功'){
  1315. uni.login({
  1316. provider: 'weixin',
  1317. success: async loginRes => {
  1318. console.log(loginRes)
  1319. var code=loginRes
  1320. this.closeAnswerPopup(loginRes.code)
  1321. }
  1322. })
  1323. }
  1324. }
  1325. } else {
  1326. if (res.msg == "该课题到达答错次数限制") {
  1327. this.errTitle = "答题次数超过限制"
  1328. this.errDesc = "以后的课程要认真学习哦"
  1329. // this.$refs.answerPopup.open("center")
  1330. this.answerPopup=true
  1331. } else {
  1332. uni.showToast({
  1333. title: res.msg,
  1334. icon: "none"
  1335. })
  1336. }
  1337. }
  1338. },
  1339. rej => {}
  1340. )
  1341. },
  1342. // 选择
  1343. rewardChange(e) {
  1344. this.currentReward = e.detail.value
  1345. },
  1346. closeAnswerPopup() {
  1347. // this.$refs.answerPopup.close()
  1348. uni.showLoading({
  1349. title: "加载中..."
  1350. })
  1351. if (this.errTitle == '恭喜你,回答正确') {
  1352. const param = {
  1353. ...this.urlOption,
  1354. userId:this.userInfo.userId,
  1355. // rewardType: Number(this.currentReward),
  1356. source: 2, // 小程序
  1357. appId: this.appid
  1358. }
  1359. sendReward(param).then(res => {
  1360. if(res.code == 200) {
  1361. uni.hideLoading()
  1362. this.answerPopup=false
  1363. console.log('红包',res)
  1364. if(res.isNew&&res.isNew==1) {
  1365. console.log('红包配置',res)
  1366. const packageInfo = res.data.packageInfo || ''
  1367. if(packageInfo) {
  1368. uni.setStorageSync('receive_package',packageInfo)
  1369. uni.setStorageSync('mchId',res.mchId)
  1370. uni.navigateTo({
  1371. url: '/pages_course/reward'
  1372. })
  1373. }
  1374. } else {
  1375. uni.showToast({
  1376. title: res.msg,
  1377. icon: 'none'
  1378. })
  1379. }
  1380. }else {
  1381. uni.hideLoading()
  1382. uni.showToast({
  1383. title: res.msg,
  1384. icon: 'none'
  1385. })
  1386. }
  1387. // if(res.code == 200) {
  1388. // //重构 发红包,后台通过OPENID发零钱到 账
  1389. // //this.initWXConfig(res.package)
  1390. // }else {
  1391. // uni.showToast({
  1392. // title: res.msg,
  1393. // icon: 'none'
  1394. // })
  1395. // }
  1396. })
  1397. }else{
  1398. uni.hideLoading()
  1399. this.answerPopup=!this.answerPopup
  1400. }
  1401. },
  1402. // 线路
  1403. openPop() {
  1404. this.$refs.popup.open('bottom')
  1405. },
  1406. close() {
  1407. this.$refs.popup.close()
  1408. },
  1409. handleLine(index) {
  1410. var that=this;
  1411. if (this.lineIndex == index && this.videoUrl == this.lineList[index]) {
  1412. this.close()
  1413. return
  1414. } else {
  1415. // let div = document.querySelector(".vjs-progress-control");
  1416. // if(div) {
  1417. // if (this.isFinish == 1 || this.isEnded || this.linkType == 1) {
  1418. // div.style.pointerEvents = "auto";
  1419. // } else {
  1420. // div.style.pointerEvents = "none"; //禁止所有事件
  1421. // }
  1422. // }
  1423. this.lineIndex = index
  1424. this.videoUrl = this.lineList[index]
  1425. this.tipsOpen = false
  1426. this.playDurationSeek = this.playTime || 0
  1427. this.player = uni.createVideoContext('video-content-box');
  1428. setTimeout(function(){
  1429. that.player.seek(that.playDurationSeek)
  1430. that.player.play();
  1431. },500);
  1432. // this.player.src(this.lineList[index])
  1433. // this.player.one('loadedmetadata', () => {
  1434. // this.player.currentTime(this.playDurationSeek);
  1435. // this.player.play();
  1436. // });
  1437. this.close()
  1438. }
  1439. },
  1440. // 温馨提示
  1441. openTipsPop() {
  1442. // this.$refs.tipsPopup.open()
  1443. this.tipsPopup=true
  1444. // 暂停视频
  1445. this.videoContext.pause()
  1446. // this.tipsOpen = true
  1447. // this.pause()
  1448. },
  1449. closeTipsPop() {
  1450. // this.$refs.tipsPopup.close()
  1451. this.videoContext.play()
  1452. this.tipsPopup=!this.tipsPopup
  1453. },
  1454. // 客服
  1455. getIsAddKf() {
  1456. this.qrcode = ''
  1457. this.qrcodeMsg = ''
  1458. this.isAddKf = 0
  1459. const data = {
  1460. videoId:this.videoId,
  1461. userId:this.userInfo.userId,
  1462. companyUserId:this.companyUserId,
  1463. companyId:this.companyId,
  1464. courseId:this.courseId,
  1465. periodId:this.periodId,
  1466. projectId:this.projectId
  1467. }
  1468. // {videoId: this.videoId,qwUserId: this.qwUserId,corpId: this.corpId}
  1469. getIsAddKf(data).then(res => {
  1470. if (res.code == 200) {
  1471. this.isLogin = true
  1472. if(res.data){
  1473. this.isAddKf = 1
  1474. if(this.userInfo.userId){
  1475. this.getH5CourseVideoDetails()
  1476. console.log(123223)
  1477. }else{
  1478. this.goLogin()
  1479. }
  1480. }
  1481. // else{
  1482. // uni.showToast({
  1483. // title: '请联系管理员,注册为会员!',
  1484. // icon: 'none'
  1485. // });
  1486. // }
  1487. }else if(res.code==1002){
  1488. this.isAddKf = 0
  1489. this.qrcode=res.ext
  1490. this.kfPopup=true
  1491. uni.showToast({
  1492. title: "请添加管理员微信,成为会员!",
  1493. icon: 'none'
  1494. });
  1495. this.initExpiration(res.msg,res.code)
  1496. }else if(res.code==505){
  1497. this.isAddKf = 0
  1498. this.qrcode=res.ext
  1499. this.kfPopup=true
  1500. uni.showToast({
  1501. title: "管理员开启了会员审核,请等待审核!",
  1502. icon: 'none'
  1503. });
  1504. this.initExpiration(res.msg,res.code)
  1505. }else if(res.code==406){
  1506. uni.hideLoading();
  1507. uni.showToast({
  1508. icon:'none',
  1509. title: '该用户已成为其他销售会员',
  1510. });
  1511. this.initExpiration(res.msg,res.code)
  1512. }else if(res.code==504){
  1513. this.isAddKf = 0
  1514. this.iskftype=1
  1515. uni.showToast({
  1516. title: res.msg,
  1517. icon: 'none'
  1518. });
  1519. this.initExpiration(res.msg,res.code)
  1520. }else {
  1521. this.isAddKf = 0
  1522. uni.showToast({
  1523. title: res.msg,
  1524. icon: 'none'
  1525. });
  1526. this.initExpiration(res.msg,res.code)
  1527. }
  1528. },
  1529. err => {}
  1530. );
  1531. },
  1532. initExpiration(resMsg,resCode) {
  1533. if(resCode==401) return;
  1534. this.resMsg = resMsg
  1535. this.resCode = resCode
  1536. this.showExpiration = true
  1537. },
  1538. closeKFPop() {
  1539. // this.$refs.kfPopup.close()
  1540. // this.kfPopup=!this.kfPopup
  1541. },
  1542. getFinishCourseVideo() {
  1543. if (!this.playTime) return
  1544. // {videoId: this.videoId,duration:this.playTime}
  1545. const param = {
  1546. duration: this.playTime,
  1547. videoId:this.videoId,
  1548. userId:this.userInfo.userId,
  1549. companyUserId:this.companyUserId
  1550. }
  1551. getFinishCourseVideo(param)
  1552. },
  1553. // 每十分钟获得积分
  1554. getIntegralByH5Video() {
  1555. const param = {
  1556. duration: this.playTime,
  1557. ...this.urlOption
  1558. }
  1559. getIntegralByH5Video(param).then(res => {
  1560. if (res.code == 200) {
  1561. uni.showToast({
  1562. title: "积分+10",
  1563. icon: "none"
  1564. })
  1565. }
  1566. })
  1567. },
  1568. progressChange(e) {
  1569. this.bufferRate = Math.ceil(e.detail.buffered)
  1570. // console.log('缓冲结果',this.bufferRate)
  1571. // console.log('缓冲',this.playTime,this.duration)
  1572. },
  1573. // 缓冲
  1574. getInternetTraffic() {
  1575. const playVideoTime = Math.ceil(this.playTime / this.duration * 100) // 播放百分比
  1576. // console.log('播放百分比',playVideoTime)
  1577. if(this.bufferRate == 0 || this.bufferRate < playVideoTime) {
  1578. this.bufferRate = playVideoTime
  1579. console.log(this.bufferRate)
  1580. }
  1581. if(this.bufferRate == 0 || Number(this.bufferRate.toFixed(2)) == 0) return
  1582. const param = {
  1583. uuId: dayjs().format('YYYYMMDD') + this.uuId,
  1584. duration: this.playTime,
  1585. bufferRate: Number(this.bufferRate.toFixed(2)),
  1586. userId:this.userId,
  1587. periodId:this.periodId,
  1588. ...this.urlOption
  1589. }
  1590. getInternetTraffic(param)
  1591. },
  1592. getErrMsg(err) {
  1593. let msgerr = {
  1594. videoUrl: this.videoUrl,
  1595. lineIndex: this.lineIndex,
  1596. errTime: new Date(),
  1597. // ip: this.ip,
  1598. errMsg: err
  1599. }
  1600. getErrMsg({
  1601. msg: JSON.stringify(msgerr)
  1602. })
  1603. },
  1604. getLink() {
  1605. this.goLogin()
  1606. return
  1607. let that = this;
  1608. this.msg = ''
  1609. getRealLink({sortLink:this.sortLink}).then(res=>{
  1610. if(res.code == 200) {
  1611. this.isExpire = false
  1612. // 如果响应中包含真实链接,则跳转到真实链接
  1613. // window.location.href = res.realLink +"&sortLink="+this.sortLink+"&code="+this.code+"&time="+new Date().getTime()
  1614. if (this.isLogin && this.isAddKf == 1) {
  1615. this.getH5CourseVideoDetails()
  1616. }
  1617. if (this.videoId && this.isAddKf != 1) {
  1618. this.$isLoginCourse().then(
  1619. isLogin => {
  1620. this.isLogin = isLogin
  1621. if(isLogin){
  1622. this.getIsAddKf()
  1623. } else {
  1624. this.goLogin()
  1625. }
  1626. },
  1627. rej => {}
  1628. );
  1629. }
  1630. } else {
  1631. this.isExpire = true
  1632. this.msg = '课程已过期或链接无效'
  1633. uni.showToast({
  1634. title: '课程已过期或链接无效',
  1635. icon: 'none'
  1636. });
  1637. }
  1638. }).catch(err=>{
  1639. this.isExpire = true
  1640. this.msg = '发生错误,请稍后再试'
  1641. uni.showToast({
  1642. title: '发生错误,请稍后再试',
  1643. icon: 'none'
  1644. });
  1645. })
  1646. },
  1647. /**
  1648. * 节流原理:在一定时间内,只能触发一次
  1649. *
  1650. * @param {Function} func 要执行的回调函数
  1651. * @param {Number} wait 延时的时间
  1652. * @param {Boolean} immediate 是否立即执行
  1653. * @return null
  1654. */
  1655. throttle(func, wait = 500, immediate = true) {
  1656. if (immediate) {
  1657. if (!this.flag) {
  1658. this.flag = true
  1659. // 如果是立即执行,则在wait毫秒内开始时执行
  1660. typeof func === 'function' && func()
  1661. this.timer = setTimeout(() => {
  1662. this.flag = false
  1663. }, wait)
  1664. }
  1665. } else if (!this.flag) {
  1666. this.flag = true
  1667. // 如果是非立即执行,则在wait毫秒内的结束处执行
  1668. this.timer = setTimeout(() => {
  1669. this.flag = false
  1670. typeof func === 'function' && func()
  1671. }, wait)
  1672. }
  1673. }
  1674. }
  1675. }
  1676. </script>
  1677. <style scoped>
  1678. .full-width-popup {
  1679. width: 100%;
  1680. }
  1681. </style>
  1682. <style lang="scss" scoped>
  1683. .subname{
  1684. background-color: #00aa00;
  1685. color: #fff;
  1686. }
  1687. .subavt{
  1688. background-color: #fff;
  1689. border: 2rpx #0a0 solid;
  1690. color: #00aa00;
  1691. }
  1692. .boxweixin{
  1693. width: 44rpx;
  1694. height: 44rpx;
  1695. border-radius: 50%;
  1696. text-align: center;
  1697. line-height: 34rpx;
  1698. color: #0a0;
  1699. }
  1700. .boxnosel{
  1701. border: #757575 4rpx solid;
  1702. }
  1703. .boxsel{
  1704. border: #0a0 4rpx solid;
  1705. }
  1706. .button-container {
  1707. position: relative;
  1708. width: 240rpx;
  1709. }
  1710. .hidden-input {
  1711. position: absolute;
  1712. top: 0;
  1713. left: 0;
  1714. width: 100%;
  1715. height: 100%;
  1716. opacity: 0;
  1717. z-index: 2;
  1718. }
  1719. .custom-button {
  1720. position: relative;
  1721. z-index: 1;
  1722. /* 其他样式 */
  1723. width:100%;
  1724. margin: 0 auto;
  1725. height: 80rpx;
  1726. line-height: 60rpx;
  1727. font-size: 28rpx;
  1728. padding: 10rpx 20rpx;
  1729. }
  1730. .submitname{
  1731. width: 90%;
  1732. margin: 0 auto;
  1733. text-align: center;
  1734. padding: 30rpx;
  1735. margin-top: 40rpx;
  1736. }
  1737. .sub{
  1738. background-color: #f0f0f0;
  1739. color: #0a0;
  1740. }
  1741. .subact{
  1742. background-color: #0a0;
  1743. color: #fff;
  1744. }
  1745. .userlogo{
  1746. height: 760rpx;
  1747. }
  1748. .getlogo{
  1749. width:240rpx;
  1750. background-color: #fff;
  1751. // padding: 10rpx 20rpx;
  1752. }
  1753. @mixin u-flex($flexD, $alignI, $justifyC) {
  1754. display: flex;
  1755. flex-direction: $flexD;
  1756. align-items: $alignI;
  1757. justify-content: $justifyC;
  1758. }
  1759. .footer-tips {
  1760. position: fixed;
  1761. width: 100%;
  1762. bottom: 144rpx;
  1763. text-align: center;
  1764. font-family: PingFang SC,PingFang SC;
  1765. font-weight: 500;
  1766. font-size: 12px;
  1767. color: #bbb;
  1768. transform: scale(0.8);
  1769. }
  1770. .btns{
  1771. position: relative;
  1772. width: 100%;
  1773. height: 80rpx;
  1774. .author-btn{
  1775. z-index:100;
  1776. position: absolute;
  1777. width: 100%;
  1778. height: 80rpx;
  1779. background: #ff5c03;
  1780. border-radius: 40rpx;
  1781. font-size: 36rpx;
  1782. font-family: PingFang SC;
  1783. font-weight: 500;
  1784. text-align: center;
  1785. line-height: 80rpx;
  1786. color: rgba(255, 255, 255, 1);
  1787. }
  1788. }
  1789. .textOne {
  1790. overflow: hidden;
  1791. white-space: nowrap;
  1792. text-overflow: ellipsis;
  1793. }
  1794. .textTwo {
  1795. overflow: hidden;
  1796. text-overflow: ellipsis;
  1797. display: -webkit-box;
  1798. -webkit-line-clamp: 2;
  1799. -webkit-box-orient: vertical;
  1800. }
  1801. .header-nav {
  1802. height: 88rpx;
  1803. @include u-flex(row, center, flex-start);
  1804. overflow: hidden;
  1805. background-color: #fff;
  1806. box-sizing: border-box;
  1807. .header-title {
  1808. text-align: center;
  1809. overflow: hidden;
  1810. white-space: nowrap;
  1811. text-overflow: ellipsis;
  1812. padding: 0 10rpx 0 100rpx;
  1813. font-family: PingFang SC,PingFang SC;
  1814. font-weight: 500;
  1815. font-size: 15px;
  1816. color: #000;
  1817. box-sizing: border-box;
  1818. }
  1819. }
  1820. .reward-list {
  1821. width: 100%;
  1822. margin-top: 20rpx;
  1823. margin-bottom: -40rpx;
  1824. &-group {
  1825. font-family: PingFang SC, PingFang SC;
  1826. font-weight: 400;
  1827. font-size: 14px;
  1828. color: #222222;
  1829. @include u-flex(row, center, center);
  1830. }
  1831. &-option {
  1832. @include u-flex(row, center, flex-start);
  1833. &:first-child {
  1834. margin-right: 40rpx;
  1835. }
  1836. }
  1837. }
  1838. .err {
  1839. color: #f56c6c !important;
  1840. }
  1841. .kfqrcode-box {
  1842. background-color: #fff;
  1843. border-radius: 16rpx;
  1844. max-width: 560rpx;
  1845. padding: 60rpx 40rpx;
  1846. margin-top: -100rpx;
  1847. box-sizing: border-box;
  1848. @include u-flex(column, center, flex-start);
  1849. font-family: PingFang SC, PingFang SC;
  1850. font-weight: 400;
  1851. font-size: 34rpx;
  1852. color: #222;
  1853. position: relative;
  1854. text-align: center;
  1855. .kfqrcode {
  1856. // height: 460rpx;
  1857. width: 460rpx;
  1858. }
  1859. }
  1860. .kfqrcode-close {
  1861. width: 64rpx;
  1862. height: 64rpx;
  1863. position: absolute;
  1864. bottom: -100rpx;
  1865. left: 50%;
  1866. transform: translateX(-50%);
  1867. }
  1868. .tipsPopup-mask {
  1869. position: relative;
  1870. width: 560rpx;
  1871. background-color: transparent;
  1872. .red_envelope_top {
  1873. width: 480rpx;
  1874. height: 360rpx;
  1875. margin: 0 auto;
  1876. display: inherit;
  1877. }
  1878. }
  1879. .tipsPopup-btn-box {
  1880. width: 456rpx;
  1881. height: 104rpx;
  1882. padding: 4rpx;
  1883. box-sizing: border-box;
  1884. background: linear-gradient(180deg, rgba(252, 209, 94, 1), rgba(254, 253, 251, 1));
  1885. border-radius: 52rpx;
  1886. }
  1887. .tipsPopup-btn {
  1888. width: 100%;
  1889. height: 100%;
  1890. background: linear-gradient(180deg, #FF9F22 0%, #FA1E05 100%);
  1891. border-radius: 52rpx 52rpx 52rpx 52rpx;
  1892. font-family: PingFang SC, PingFang SC;
  1893. font-weight: 500;
  1894. font-size: 36rpx;
  1895. color: #FFFFFF;
  1896. line-height: 96rpx;
  1897. text-align: center;
  1898. }
  1899. .tipsPopup {
  1900. width: 560rpx;
  1901. padding: 12rpx;
  1902. margin-top: -72rpx;
  1903. box-sizing: border-box;
  1904. background: linear-gradient(180deg, #FFFBEF 0%, #FFFFF5 43%, #F5EAC2 100%);
  1905. border-radius: 32rpx 32rpx 32rpx 32rpx;
  1906. position: relative;
  1907. &-close {
  1908. width: 64rpx;
  1909. height: 64rpx;
  1910. position: absolute;
  1911. right: 0;
  1912. top: -188rpx;
  1913. }
  1914. &-line {
  1915. padding: 3rpx;
  1916. box-sizing: border-box;
  1917. background: linear-gradient(180deg, rgba(247, 245, 220, 1), rgba(250, 220, 157, 1));
  1918. border-radius: 24rpx;
  1919. }
  1920. &-box {
  1921. padding: 0 40rpx 40rpx 40rpx;
  1922. box-sizing: border-box;
  1923. background: linear-gradient(180deg, #FFFBEF 0%, #FFFFF5 43%, #F5EAC2 100%);
  1924. border-radius: 24rpx;
  1925. @include u-flex(column, center, flex-start);
  1926. }
  1927. &-head {
  1928. @include u-flex(row, center, center);
  1929. &-title {
  1930. width: 364rpx;
  1931. height: auto;
  1932. margin-top: -22rpx;
  1933. }
  1934. }
  1935. &-content {
  1936. margin: 48rpx 0;
  1937. font-family: PingFang SC, PingFang SC;
  1938. font-weight: 500;
  1939. font-size: 32rpx;
  1940. color: #222222;
  1941. text-align: center;
  1942. &-title {
  1943. margin-bottom: 26rpx;
  1944. font-weight: 600;
  1945. font-size: 40rpx;
  1946. color: #FF5C03;
  1947. }
  1948. }
  1949. }
  1950. .video-controls-box {
  1951. width: 100%;
  1952. height: 420rpx;
  1953. overflow: hidden;
  1954. position: absolute;
  1955. bottom: 0;
  1956. left: 0;
  1957. z-index: 2;
  1958. background: rgba(0, 0, 0, 0.2);
  1959. .video-play {
  1960. height: 72rpx;
  1961. width: 72rpx;
  1962. position: absolute;
  1963. top: 50%;
  1964. left: 50%;
  1965. transform: translate(-50%, -50%);
  1966. }
  1967. }
  1968. .video-controls {
  1969. width: 100%;
  1970. height: 80rpx;
  1971. padding: 0 28rpx;
  1972. box-sizing: border-box;
  1973. position: absolute;
  1974. bottom: 0;
  1975. left: 0;
  1976. display: flex;
  1977. align-items: center;
  1978. justify-content: space-between;
  1979. background: linear-gradient(to top, #222 0%, transparent 80%);
  1980. .video-icon {
  1981. height: 44rpx;
  1982. width: 44rpx;
  1983. }
  1984. }
  1985. .errQuesbox {
  1986. width: 100%;
  1987. max-height: 260rpx;
  1988. overflow-y: auto;
  1989. margin-top: 24rpx;
  1990. font-family: PingFang SC, PingFang SC;
  1991. font-weight: 500;
  1992. font-size: 30rpx;
  1993. color: #222222;
  1994. &-item {
  1995. width: 100%;
  1996. height: 128rpx;
  1997. line-height: 128rpx;
  1998. margin-bottom: 24rpx;
  1999. padding: 0 30rpx;
  2000. box-sizing: border-box;
  2001. overflow: hidden;
  2002. background: #fff;
  2003. border-radius: 16rpx 16rpx 16rpx 16rpx;
  2004. position: relative;
  2005. &::after {
  2006. content: "题目";
  2007. min-width: 64rpx;
  2008. height: 36rpx;
  2009. padding: 0 12rpx;
  2010. line-height: 36rpx;
  2011. background: #FF5C03;
  2012. box-sizing: border-box;
  2013. border-radius: 0rpx 0rpx 16rpx 0rpx;
  2014. text-align: center;
  2015. font-family: PingFang SC, PingFang SC;
  2016. font-weight: 500;
  2017. font-size: 20rpx;
  2018. color: #fff;
  2019. position: absolute;
  2020. left: 0;
  2021. top: 0;
  2022. }
  2023. }
  2024. }
  2025. .bg {
  2026. background: #fff !important;
  2027. }
  2028. .timepopbox{
  2029. width: 560rpx;
  2030. padding: 32rpx;
  2031. box-sizing: border-box;
  2032. }
  2033. .answerPopup {
  2034. &-box {
  2035. width: 560rpx;
  2036. background: linear-gradient(180deg, #FFFAF6 0%, #FEECD8 100%);
  2037. border-radius: 32rpx 32rpx 32rpx 32rpx;
  2038. background-color: #fff;
  2039. font-weight: 400;
  2040. padding: 32rpx;
  2041. box-sizing: border-box;
  2042. position: relative;
  2043. @include u-flex(column, center, flex-start);
  2044. font-family: PingFang SC, PingFang SC;
  2045. font-weight: 400;
  2046. .tipimg {
  2047. width: 206rpx;
  2048. height: 206rpx;
  2049. margin-bottom: 16rpx;
  2050. }
  2051. }
  2052. &-title {
  2053. font-weight: 600;
  2054. font-size: 36rpx;
  2055. color: #222222;
  2056. }
  2057. &-desc {
  2058. margin-top: 10rpx;
  2059. font-size: 28rpx;
  2060. color: #757575;
  2061. }
  2062. &-btn {
  2063. width: 464rpx;
  2064. height: 84rpx;
  2065. margin-top: 54rpx;
  2066. margin-bottom: 16rpx;
  2067. background: #FF5C03;
  2068. border-radius: 42rpx;
  2069. font-weight: 500;
  2070. font-size: 32rpx;
  2071. color: #FFFFFF;
  2072. text-align: center;
  2073. line-height: 84rpx;
  2074. }
  2075. }
  2076. .popupbox {
  2077. width: 100%;
  2078. background-color: #fff;
  2079. border-radius: 16rpx 16rpx 0 0;
  2080. padding: 24rpx 32rpx;
  2081. position: relative;
  2082. &-head {
  2083. height: 60rpx;
  2084. margin-bottom: 30rpx;
  2085. text-align: center;
  2086. overflow-y: auto;
  2087. color: #414858;
  2088. font-size: 32rpx;
  2089. font-weight: bold;
  2090. position: relative;
  2091. .close-icon {
  2092. position: absolute;
  2093. right: 0;
  2094. top: 0;
  2095. height: 40rpx;
  2096. width: 40rpx;
  2097. }
  2098. }
  2099. &-content {
  2100. height: 20vh;
  2101. overflow-y: auto;
  2102. display: flex;
  2103. align-items: flex-start;
  2104. flex-wrap: wrap;
  2105. gap: 32rpx;
  2106. .line-item {
  2107. display: inline-block;
  2108. min-width: 200rpx;
  2109. min-height: 60rpx;
  2110. padding: 0 20rpx;
  2111. box-sizing: border-box;
  2112. border-radius: 50rpx;
  2113. overflow: hidden;
  2114. background-color: #f7f7f7;
  2115. text-align: center;
  2116. color: #414858;
  2117. font-size: 28rpx;
  2118. line-height: 60rpx;
  2119. }
  2120. .line-active {
  2121. color: #f56c6c !important;
  2122. background-color: #fef0f0 !important;
  2123. }
  2124. }
  2125. }
  2126. .content {
  2127. padding-bottom: calc(var(--window-bottom) + 100rpx);
  2128. .video-box {
  2129. width: 100%;
  2130. height: 420rpx;
  2131. overflow: hidden;
  2132. position: relative;
  2133. #myVideo {
  2134. width: 100%;
  2135. height: 100%;
  2136. }
  2137. }
  2138. .video-poster {
  2139. width: 100%;
  2140. height: 420rpx;
  2141. }
  2142. .miantitlebox {
  2143. padding: 30rpx 0;
  2144. border-bottom: 2rpx solid #F5F7FA;
  2145. font-family: PingFang SC, PingFang SC;
  2146. font-weight: 500;
  2147. font-size: 40rpx;
  2148. color: #222222;
  2149. }
  2150. .subtitlebox {
  2151. padding: 30rpx 0;
  2152. border-bottom: 2rpx solid #F5F7FA;
  2153. font-family: PingFang SC, PingFang SC;
  2154. font-weight: 500;
  2155. font-size: 40rpx;
  2156. color: #222222;
  2157. }
  2158. .title-content {
  2159. padding: 0 32rpx;
  2160. background-color: #fff;
  2161. font-size: 28rpx;
  2162. line-height: 1.6;
  2163. .title {
  2164. font-size: 36rpx;
  2165. font-weight: 500;
  2166. color: #414858;
  2167. }
  2168. .time-or-subtitle {
  2169. margin-top: 12rpx;
  2170. color: #666666;
  2171. }
  2172. }
  2173. .descbox {
  2174. padding: 36rpx 32rpx;
  2175. margin-bottom: 20rpx;
  2176. background-color: #fff;
  2177. font-family: PingFang SC, PingFang SC;
  2178. font-weight: 400;
  2179. font-size: 28rpx;
  2180. color: #222222;
  2181. line-height: 42rpx;
  2182. word-break: break-word;
  2183. &-title {
  2184. margin-bottom: 24rpx;
  2185. font-weight: 500;
  2186. font-size: 32rpx;
  2187. }
  2188. &-info {
  2189. margin-bottom: 24rpx;
  2190. @include u-flex(row, center, space-between);
  2191. font-size: 26rpx;
  2192. color: #757575;
  2193. &-l {
  2194. flex: 1;
  2195. @include u-flex(row, center, flex-start);
  2196. }
  2197. &-time {
  2198. margin-left: 18rpx;
  2199. padding-left: 18rpx;
  2200. position: relative;
  2201. &::after {
  2202. content: "";
  2203. width: 4rpx;
  2204. height: 4rpx;
  2205. background: #999999;
  2206. border-radius: 50%;
  2207. position: absolute;
  2208. left: 0;
  2209. top: 50%;
  2210. transform: translateY(-50%);
  2211. }
  2212. }
  2213. &-r {
  2214. background: transparent;
  2215. }
  2216. }
  2217. &-desc {
  2218. overflow: hidden;
  2219. position: relative;
  2220. }
  2221. }
  2222. .expand {
  2223. flex-shrink: 0;
  2224. @include u-flex(row, center, flex-end);
  2225. color: #FF5C03;
  2226. font-weight: 400;
  2227. font-size: 24rpx;
  2228. image {
  2229. width: 32rpx;
  2230. height: 32rpx;
  2231. }
  2232. }
  2233. .expand-ab {
  2234. position: absolute;
  2235. top: 0;
  2236. right: 0;
  2237. box-shadow: -50rpx 0 20rpx 8rpx #FFFFFF;
  2238. background-color: #fff;
  2239. }
  2240. .ques-content {
  2241. background-color: #fff;
  2242. padding: 40rpx 32rpx;
  2243. box-sizing: border-box;
  2244. font-family: PingFang SC, PingFang SC;
  2245. font-weight: 400;
  2246. font-size: 28rpx;
  2247. color: #222222;
  2248. }
  2249. .ques-content-tit {
  2250. font-family: PingFang SC, PingFang SC;
  2251. font-weight: 600;
  2252. font-size: 36rpx;
  2253. color: #222222;
  2254. }
  2255. .ques-title {
  2256. margin: 48rpx 0 34rpx 0;
  2257. font-weight: 500;
  2258. font-size: 32rpx;
  2259. white-space: normal;
  2260. }
  2261. .ques-type {
  2262. flex-shrink: 0;
  2263. min-width: 72rpx;
  2264. min-height: 40rpx;
  2265. padding: 0 12rpx;
  2266. margin: 0 12rpx;
  2267. box-sizing: border-box;
  2268. background: #FF5C03;
  2269. border-radius: 8rpx 8rpx 8rpx 8rpx;
  2270. line-height: 40rpx;
  2271. text-align: center;
  2272. font-family: PingFang SC, PingFang SC;
  2273. font-weight: 400;
  2274. font-size: 24rpx;
  2275. color: #FFFFFF;
  2276. display: inline-block;
  2277. }
  2278. .ques-option {
  2279. min-height: 88rpx;
  2280. padding: 24rpx 32rpx;
  2281. box-sizing: border-box;
  2282. margin-bottom: 24rpx;
  2283. background: #F5F7FA;
  2284. border-radius: 16rpx 16rpx 16rpx 16rpx;
  2285. display: flex;
  2286. align-items: center;
  2287. &-active {
  2288. color: #FF5C03 !important;
  2289. background: #FCF0E7 !important;
  2290. }
  2291. }
  2292. .video-line {
  2293. min-width: 140rpx;
  2294. max-width: 200rpx;
  2295. height: 60rpx;
  2296. padding: 0 20rpx;
  2297. box-sizing: border-box;
  2298. border-radius: 50rpx 0 0 50rpx;
  2299. overflow: hidden;
  2300. background-color: #fff;
  2301. text-align: center;
  2302. color: #888;
  2303. font-size: 28rpx;
  2304. line-height: 60rpx;
  2305. display: inline-flex;
  2306. align-items: center;
  2307. justify-content: center;
  2308. position: fixed;
  2309. right: 0;
  2310. z-index: 9;
  2311. bottom: calc(var(--window-bottom) + 280rpx);
  2312. box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, .12);
  2313. image {
  2314. flex-shrink: 0;
  2315. height: 30rpx;
  2316. width: 30rpx;
  2317. margin-right: 6rpx;
  2318. }
  2319. }
  2320. .footer {
  2321. border-top: 1rpx solid #ededef;
  2322. background: #fff;
  2323. width: 100%;
  2324. position: fixed;
  2325. bottom: 0;
  2326. padding: 32rpx;
  2327. // padding-bottom: calc(var(--window-bottom) + 14rpx);
  2328. box-sizing: border-box;
  2329. z-index: 0;
  2330. &-btn {
  2331. width: 100%;
  2332. height: 98rpx;
  2333. background: #FF5C03;
  2334. border-radius: 49rpx 49rpx 49rpx 49rpx;
  2335. line-height: 98rpx;
  2336. text-align: center;
  2337. font-family: PingFang SC, PingFang SC;
  2338. font-weight: 600;
  2339. font-size: 32rpx;
  2340. color: #FFFFFF;
  2341. @include u-flex(row, center, center);
  2342. &-img {
  2343. flex-shrink: 0;
  2344. width: 144rpx;
  2345. height: 144rpx;
  2346. margin-right: 8rpx;
  2347. margin-top: -24rpx;
  2348. }
  2349. }
  2350. &-btn-border {
  2351. position: relative;
  2352. &::after {
  2353. content: "";
  2354. background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
  2355. position: absolute;
  2356. top: -2rpx;
  2357. left: 0;
  2358. height: 103rpx;
  2359. width: 100%;
  2360. z-index: -1;
  2361. border-radius: 49rpx 49rpx 49rpx 49rpx;
  2362. box-shadow: 0rpx 8rpx 11rpx 0rpx rgba(255, 92, 3, 0.3);
  2363. overflow: hidden;
  2364. }
  2365. }
  2366. }
  2367. }
  2368. .agreement {
  2369. display: inline-flex;
  2370. margin-top: 16rpx;
  2371. font-size: 24rpx;
  2372. color: #525252;
  2373. align-items: center;
  2374. justify-content: center;
  2375. }
  2376. .nocourse {
  2377. display: flex;
  2378. flex-direction: column;
  2379. align-items: center;
  2380. padding-bottom: 88rpx;
  2381. justify-content: center;
  2382. font-family: PingFang SC, PingFang SC;
  2383. font-weight: 400;
  2384. font-size: 32rpx;
  2385. color: #757575;
  2386. line-height: 48rpx;
  2387. text-align: center;
  2388. image {
  2389. width: 328rpx;
  2390. height: auto;
  2391. margin-bottom: 30rpx;
  2392. }
  2393. }
  2394. .logo {
  2395. display: inline-block;
  2396. width: 30px;
  2397. height: auto;
  2398. margin: 20px 0 0 10px;
  2399. pointer-events: none;
  2400. object-fit: cover;
  2401. }
  2402. .logo-full {
  2403. display: inline-block;
  2404. width: 40px;
  2405. height: auto;
  2406. margin: 50px 0 0 30px;
  2407. pointer-events: none;
  2408. object-fit: cover;
  2409. }
  2410. </style>