detail.vue 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464
  1. <template>
  2. <view>
  3. <view class="video_play" v-if="videoInfo.video_src">
  4. <video
  5. id="myVideo"
  6. class="video_control"
  7. @play="_videoPlay"
  8. :src="videoInfo.video_src"
  9. @timeupdate="timeUpdate"
  10. :enable-progress-gesture="false"
  11. :enable-play-gesture="true"
  12. :enable-auto-rotation="true"
  13. :initial-time="videoInfo.inittime || 0"
  14. :show-bottom-progress="videoInfo.learn_status == 1"
  15. @ended="_videoEnd"
  16. @fullscreenchange="screenChange"
  17. ></video>
  18. <cover-view v-if="videoInfo.learn_status == 0" :class="bigsScreen ? 'bigScreen' : 'cover'"></cover-view>
  19. </view>
  20. <view class="video_title">{{ videoInfo.name }}</view>
  21. <view class="rich_text">
  22. <rich-text :nodes="videoInfo.content"></rich-text>
  23. </view>
  24. <uni-popup ref="questionRef" type="center" :is-mask-click="false">
  25. <view class="popup_content">
  26. <!-- 答题区域 -->
  27. <view class="content" v-if="!show_answer">
  28. <!-- 问题内容 -->
  29. <view class="question_content">{{ questinInfo.question_title }}</view>
  30. <!-- 问题选项 -->
  31. <view class="question_options">
  32. <view v-for="(option, index) in questinInfo.answer_list" :key="index" :class="['question_answer', { active: answer_id == option.id }]" @click="_selectAnswer(option.id)">
  33. {{ option.value }}
  34. </view>
  35. </view>
  36. <view :class="['submit_btn', { active: answer_id }]" @click="_submitAnswer">提交</view>
  37. </view>
  38. <!-- 结果区域 -->
  39. <view class="content" v-else>
  40. <icon :type="answerInfo.is_answer == 1 ? 'success' : 'cancel'" size="64" />
  41. <view class="title">{{ answerInfo.is_answer == 1 ? "恭喜您,答对啦!" : "很遗憾,答错了" }}</view>
  42. <view class="tip">{{ answerInfo.is_answer == 1 ? "继续保持,你正在进步!" : "别灰心,再接再厉!" }}</view>
  43. <view class="score_content">
  44. <view>得分</view>
  45. <view :style="answerInfo.get_score == 0 ? 'color:red' : 'color:green'">+{{ answerInfo.get_score }}</view>
  46. </view>
  47. <view class="submit_btn active" @click="_goPlayVedio">继续学习视频</view>
  48. </view>
  49. </view>
  50. </uni-popup>
  51. </view>
  52. </template>
  53. <script>
  54. export default {
  55. data() {
  56. return {
  57. videoInfo: {
  58. id: 0,
  59. name: "",
  60. content: "",
  61. video_src: "",
  62. },
  63. // 请求参数
  64. requestParam: {
  65. id: 0,
  66. },
  67. isReqing: false,
  68. videoContext: null,
  69. isAnswerQuestion: false,
  70. timer: null,
  71. currentTime: 0, // 新增变量用于存储当前播放时间
  72. questionTime_list: [],
  73. questinInfo: {},
  74. answer_id: null,
  75. is_correct: false,
  76. show_answer: false,
  77. answeredQuestions: new Set(), // 新增变量用于存储已回答的问题
  78. countdown: 0, // 新增变量用于存储倒计时时间
  79. bigsScreen: false,
  80. };
  81. },
  82. onLoad(param) {
  83. // 参数接收
  84. this.requestParam.id = param.id;
  85. // #ifdef MP-WEIXIN
  86. //分享按钮
  87. uni.showShareMenu({
  88. withShareTicket: true,
  89. menus: ["shareAppMessage", "shareTimeline"],
  90. });
  91. // #endif
  92. uni.enableAlertBeforeUnload({
  93. message: "您确定要退出学习吗?",
  94. success: function (res) {
  95. console.log("方法注册成功:", res);
  96. },
  97. fail: function (errMsg) {
  98. console.log("方法注册失败:", errMsg);
  99. },
  100. });
  101. },
  102. onUnload() {
  103. console.log("页面卸载");
  104. clearInterval(this.timer);
  105. },
  106. onShareAppMessage(obj) {
  107. return {
  108. title: `999智控终端平台\n${this.videoInfo.title}`,
  109. path: "/pages/video/detail?id=" + this.videoInfo.id,
  110. promise: new Promise((resolve, reject) => {
  111. this.$http.request("api/share_message/get_item", { item_id: this.videoInfo.id, pages: "/pages/video/detail" }).then((callback) => {
  112. console.log(callback, "api/share_message/get_item");
  113. let obj = {
  114. title: callback.data?.title == "" ? `999智控终端平台\n${this.videoInfo.title}` : callback.data.title,
  115. path: "/pages/video/detail?id=" + this.videoInfo.id,
  116. };
  117. if (callback.data?.image_url !== "") {
  118. obj.imageUrl = callback.data.image_url;
  119. }
  120. resolve(obj);
  121. });
  122. }),
  123. };
  124. },
  125. onReady: function (res) {},
  126. onShow() {
  127. // 如果存在产品ID的话
  128. if (this.requestParam.id > 0) {
  129. // 请求详情
  130. this.$http.request("api/video_course/get_detail", this.requestParam).then((re) => {
  131. // 成功渲染数据
  132. if (re.code == "success") {
  133. // 刷新数据
  134. this.videoInfo = re.data;
  135. if (re.data.question_list) {
  136. this.questionTime_list = re.data?.question_list.map((item) => item.play_time);
  137. }
  138. // 获取视频容器的上下文
  139. this.videoContext = uni.createVideoContext("myVideo");
  140. // 暂停播放
  141. this.videoContext.stop();
  142. } else {
  143. if (re.code != "no_login") {
  144. uni.showModal({
  145. content: re.msg,
  146. showCancel: false,
  147. });
  148. }
  149. }
  150. });
  151. }
  152. },
  153. methods: {
  154. timeUpdate(event) {
  155. this.currentTime = event.detail.currentTime; // 更新当前播放时间
  156. // 播放到对应的
  157. if (this.currentTime) {
  158. if (!this.timer) {
  159. this.timer = setInterval(() => {
  160. this._postVideoDuration(this.currentTime, 0);
  161. }, 3000);
  162. }
  163. if (this.currentTime == event.detail.duration) {
  164. this._postVideoDuration(this.currentTime, 1);
  165. }
  166. // 判断当前时间是否接近答题时间,并且该问题尚未回答
  167. if (this.questionTime_list.includes(parseInt(this.currentTime) + 3) && !this.answeredQuestions.has(parseInt(this.currentTime) + 3)) {
  168. this.countdown = 3;
  169. this._startCountdown();
  170. }
  171. if (this.questionTime_list.includes(parseInt(this.currentTime)) && !this.answeredQuestions.has(parseInt(this.currentTime))) {
  172. this.questinInfo = this.videoInfo.question_list.find((item) => item.play_time == parseInt(this.currentTime));
  173. this.videoContext.pause();
  174. this.videoContext.exitFullScreen();
  175. this.$refs.questionRef.open("center");
  176. //答题时间停止上报
  177. clearInterval(this.timer);
  178. }
  179. }
  180. },
  181. _videoPlay() {
  182. console.log("开始播放");
  183. this.videoContext.requestFullScreen();
  184. },
  185. //上报视频播放时间
  186. _postVideoDuration(video_playtime, status) {
  187. if (status == 1) clearInterval(this.timer);
  188. this.$http.request("api/video_learn_record/update_playtime", { record_id: this.videoInfo.record_id, video_playtime, status }).then((re) => {
  189. if (re.code == "success") {
  190. console.log("上报成功");
  191. }
  192. });
  193. },
  194. _selectAnswer(answer_id) {
  195. this.answer_id = answer_id;
  196. },
  197. _submitAnswer() {
  198. this.$http
  199. .request("api/video_learn_answer/play_exam", {
  200. record_id: this.videoInfo.record_id,
  201. course_id: this.questinInfo.course_id,
  202. question_id: this.questinInfo.question_id,
  203. answer_id: this.answer_id,
  204. })
  205. .then((re) => {
  206. if (re.code == "success") {
  207. this.show_answer = true;
  208. this.answerInfo = re.data;
  209. // 将当前问题标记为已回答
  210. this.answeredQuestions.add(this.questinInfo.play_time);
  211. }
  212. });
  213. },
  214. _goPlayVedio() {
  215. this.questinInfo.isAnswer = true;
  216. this.show_answer = false;
  217. this.$refs.questionRef.close();
  218. uni.showToast({
  219. title: "2秒后切换横屏",
  220. icon: "none",
  221. duration: 2000,
  222. });
  223. setTimeout(() => {
  224. this.videoContext.play();
  225. }, 2000);
  226. },
  227. _startCountdown() {
  228. const countdownInterval = setInterval(() => {
  229. if (this.countdown > 0) {
  230. uni.showToast({
  231. title: `${this.countdown}秒后进入答题`,
  232. icon: "none",
  233. duration: 1000,
  234. });
  235. this.countdown--;
  236. } else {
  237. clearInterval(countdownInterval);
  238. }
  239. }, 1000);
  240. },
  241. _videoEnd() {
  242. this.videoContext.pause();
  243. this.videoContext.exitFullScreen();
  244. uni.showModal({
  245. title: "学习结束",
  246. content: "恭喜您学习结束,是否查看报告?",
  247. success: (res) => {
  248. if (res.confirm) {
  249. uni.redirectTo({
  250. url: `/pages/video/record?type=learn&record_id=${this.videoInfo.record_id}`,
  251. });
  252. }
  253. },
  254. });
  255. },
  256. screenChange(event) {
  257. let fullScreen = event.detail.fullScreen;
  258. console.log("fullScreen", fullScreen);
  259. this.bigsScreen = fullScreen;
  260. },
  261. },
  262. };
  263. </script>
  264. <style lang="less">
  265. .video_play {
  266. width: 750rpx;
  267. display: block;
  268. font-size: 36rpx;
  269. overflow: hidden;
  270. font-weight: bold;
  271. line-height: 60rpx;
  272. background-color: #ffffff;
  273. position: relative;
  274. .video_control {
  275. width: 750rpx;
  276. display: block;
  277. font-size: 36rpx;
  278. overflow: hidden;
  279. font-weight: bold;
  280. line-height: 60rpx;
  281. background-color: #ffffff;
  282. }
  283. .cover {
  284. position: absolute;
  285. bottom: 0;
  286. z-index: 998;
  287. height: 20%;
  288. /* background-color: red; */
  289. background-color: rgba(255, 255, 255, 0.007);
  290. margin-left: 60px;
  291. width: 70%;
  292. }
  293. .bigScreen {
  294. position: absolute;
  295. bottom: -60%;
  296. z-index: 998;
  297. height: 20%;
  298. /* background-color: red; */
  299. background-color: rgba(255, 255, 255, 0.007);
  300. margin-left: 70px;
  301. width: 80%;
  302. }
  303. }
  304. .video_title {
  305. width: 700rpx;
  306. display: block;
  307. font-size: 36rpx;
  308. overflow: hidden;
  309. font-weight: bold;
  310. line-height: 60rpx;
  311. padding: 0rpx 25rpx;
  312. padding-top: 60rpx;
  313. background-color: #ffffff;
  314. }
  315. .video_time {
  316. width: 700rpx;
  317. color: #999999;
  318. display: block;
  319. font-size: 26rpx;
  320. overflow: hidden;
  321. line-height: 40rpx;
  322. padding: 0rpx 25rpx;
  323. background-color: #ffffff;
  324. }
  325. .rich_text {
  326. width: 700rpx;
  327. display: block;
  328. overflow: hidden;
  329. font-size: 26rpx;
  330. margin: 0rpx auto;
  331. min-height: 800rpx;
  332. line-height: 50rpx;
  333. padding: 10rpx 25rpx;
  334. background-color: #ffffff;
  335. [alt] {
  336. //web_view图片
  337. max-width: 100%; // 避免图片超宽
  338. vertical-align: bottom; // 避免图片之间间隙
  339. }
  340. }
  341. .video_poster {
  342. width: 700rpx;
  343. display: block;
  344. overflow: hidden;
  345. margin: 6rpx auto;
  346. padding: 10rpx 25rpx;
  347. background-color: #ffffff;
  348. .poster_img {
  349. width: 700rpx;
  350. display: block;
  351. }
  352. }
  353. .read_total {
  354. width: 700rpx;
  355. color: #999999;
  356. display: block;
  357. font-size: 26rpx;
  358. overflow: hidden;
  359. line-height: 60rpx;
  360. padding: 0rpx 25rpx;
  361. margin-bottom: 122rpx;
  362. background-color: #ffffff;
  363. }
  364. .handle_box {
  365. left: 0rpx;
  366. width: 700rpx;
  367. height: 120rpx;
  368. display: block;
  369. position: fixed;
  370. overflow: hidden;
  371. padding: 20rpx 25rpx;
  372. background-color: #ffffff;
  373. bottom: var(--window-bottom);
  374. border-top: 2rpx solid #dddddd;
  375. .click_box {
  376. border: none;
  377. float: right;
  378. display: block;
  379. height: 120rpx;
  380. padding: 0rpx 0rpx;
  381. line-height: 120rpx;
  382. margin-right: 20rpx;
  383. font-size: 24rpx !important;
  384. background-color: transparent;
  385. .uni-icons {
  386. font-size: 36rpx !important;
  387. }
  388. }
  389. .click_box::after {
  390. border: none;
  391. background-color: transparent;
  392. }
  393. }
  394. .popup_content {
  395. width: 600rpx;
  396. height: 800rpx;
  397. background-color: #ffffff;
  398. padding: 40rpx;
  399. border-radius: 10rpx;
  400. overflow: auto;
  401. .content {
  402. display: flex;
  403. flex-direction: column;
  404. gap: 20rpx;
  405. justify-content: space-around;
  406. height: 100%;
  407. align-items: center;
  408. .question_content {
  409. overflow-y: auto;
  410. font-size: 30rpx;
  411. font-weight: bold;
  412. }
  413. .question_options {
  414. display: flex;
  415. flex-direction: column;
  416. gap: 40rpx;
  417. width: 100%;
  418. .question_answer {
  419. height: 80rpx;
  420. width: 100%;
  421. border: 4rpx solid #e3e3e3;
  422. border-radius: 20rpx;
  423. display: flex;
  424. align-items: center;
  425. justify-content: center;
  426. &.active {
  427. border-color: #3c7aff;
  428. background-color: #dbeafe;
  429. }
  430. }
  431. }
  432. .submit_btn {
  433. width: 100%;
  434. display: flex;
  435. align-items: center;
  436. justify-content: center;
  437. color: #fff;
  438. height: 100rpx;
  439. background-color: #dddddd;
  440. border-radius: 20rpx;
  441. &.active {
  442. background-color: #5045e6;
  443. }
  444. }
  445. .title {
  446. font-size: 64rpx;
  447. font-weight: bold;
  448. }
  449. .score_content {
  450. background-color: #f3f5f7;
  451. padding: 40rpx;
  452. display: flex;
  453. align-items: center;
  454. justify-content: space-between;
  455. width: 100%;
  456. border-radius: 20rpx;
  457. box-sizing: border-box;
  458. }
  459. }
  460. }
  461. </style>