|
@@ -15,15 +15,17 @@
|
|
@ended="_videoEnd"
|
|
@ended="_videoEnd"
|
|
@fullscreenchange="screenChange"
|
|
@fullscreenchange="screenChange"
|
|
></video>
|
|
></video>
|
|
- <cover-view
|
|
|
|
- v-if="videoInfo.learn_status == 0"
|
|
|
|
- :class="bigsScreen ? 'bigScreen' : 'cover'"
|
|
|
|
- ></cover-view>
|
|
|
|
|
|
+ <cover-view v-if="videoInfo.learn_status == 0" :class="bigsScreen ? 'bigScreen' : 'cover'"></cover-view>
|
|
</view>
|
|
</view>
|
|
<view class="video_title">{{ videoInfo.name }}</view>
|
|
<view class="video_title">{{ videoInfo.name }}</view>
|
|
<view class="rich_text">
|
|
<view class="rich_text">
|
|
<rich-text :nodes="videoInfo.content"></rich-text>
|
|
<rich-text :nodes="videoInfo.content"></rich-text>
|
|
</view>
|
|
</view>
|
|
|
|
+ <view class="contact_follow" v-if="videoInfo.service?.url">
|
|
|
|
+ <button class="contact_btn" @click.stop="openCustomer()">
|
|
|
|
+ <uni-icons type="headphones" size="30" color="#FFFFFF"></uni-icons>
|
|
|
|
+ </button>
|
|
|
|
+ </view>
|
|
<uni-popup ref="questionRef" type="center" :is-mask-click="false">
|
|
<uni-popup ref="questionRef" type="center" :is-mask-click="false">
|
|
<view class="popup_content">
|
|
<view class="popup_content">
|
|
<!-- 答题区域 -->
|
|
<!-- 答题区域 -->
|
|
@@ -32,45 +34,22 @@
|
|
<view class="question_content">{{ questinInfo.question_title }}</view>
|
|
<view class="question_content">{{ questinInfo.question_title }}</view>
|
|
<!-- 问题选项 -->
|
|
<!-- 问题选项 -->
|
|
<view class="question_options">
|
|
<view class="question_options">
|
|
- <view
|
|
|
|
- v-for="(option, index) in questinInfo.answer_list"
|
|
|
|
- :key="index"
|
|
|
|
- :class="['question_answer', { active: answer_id == option.id }]"
|
|
|
|
- @click="_selectAnswer(option.id)"
|
|
|
|
- >
|
|
|
|
|
|
+ <view v-for="(option, index) in questinInfo.answer_list" :key="index" :class="['question_answer', { active: answer_id == option.id }]" @click="_selectAnswer(option.id)">
|
|
{{ option.value }}
|
|
{{ option.value }}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
- <view
|
|
|
|
- :class="['submit_btn', { active: answer_id }]"
|
|
|
|
- @click="_submitAnswer"
|
|
|
|
- >提交</view
|
|
|
|
- >
|
|
|
|
|
|
+ <view :class="['submit_btn', { active: answer_id }]" @click="_submitAnswer">提交</view>
|
|
</view>
|
|
</view>
|
|
<!-- 结果区域 -->
|
|
<!-- 结果区域 -->
|
|
<view class="content" v-else>
|
|
<view class="content" v-else>
|
|
- <icon
|
|
|
|
- :type="answerInfo.is_answer == 1 ? 'success' : 'cancel'"
|
|
|
|
- size="64"
|
|
|
|
- />
|
|
|
|
- <view class="title">{{
|
|
|
|
- answerInfo.is_answer == 1 ? "恭喜您,答对啦!" : "很遗憾,答错了"
|
|
|
|
- }}</view>
|
|
|
|
- <view class="tip">{{
|
|
|
|
- answerInfo.is_answer == 1
|
|
|
|
- ? "继续保持,你正在进步!"
|
|
|
|
- : "别灰心,再接再厉!"
|
|
|
|
- }}</view>
|
|
|
|
|
|
+ <icon :type="answerInfo.is_answer == 1 ? 'success' : 'cancel'" size="64" />
|
|
|
|
+ <view class="title">{{ answerInfo.is_answer == 1 ? '恭喜您,答对啦!' : '很遗憾,答错了' }}</view>
|
|
|
|
+ <view class="tip">{{ answerInfo.is_answer == 1 ? '继续保持,你正在进步!' : '别灰心,再接再厉!' }}</view>
|
|
<view class="score_content">
|
|
<view class="score_content">
|
|
<view>得分</view>
|
|
<view>得分</view>
|
|
- <view
|
|
|
|
- :style="answerInfo.get_score == 0 ? 'color:red' : 'color:green'"
|
|
|
|
- >+{{ answerInfo.get_score }}</view
|
|
|
|
- >
|
|
|
|
|
|
+ <view :style="answerInfo.get_score == 0 ? 'color:red' : 'color:green'">+{{ answerInfo.get_score }}</view>
|
|
</view>
|
|
</view>
|
|
- <view class="submit_btn active" @click="_goPlayVedio"
|
|
|
|
- >继续学习视频</view
|
|
|
|
- >
|
|
|
|
|
|
+ <view class="submit_btn active" @click="_goPlayVedio">继续学习视频</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</uni-popup>
|
|
</uni-popup>
|
|
@@ -83,9 +62,9 @@ export default {
|
|
return {
|
|
return {
|
|
videoInfo: {
|
|
videoInfo: {
|
|
id: 0,
|
|
id: 0,
|
|
- name: "",
|
|
|
|
- content: "",
|
|
|
|
- video_src: "",
|
|
|
|
|
|
+ name: '',
|
|
|
|
+ content: '',
|
|
|
|
+ video_src: '',
|
|
},
|
|
},
|
|
// 请求参数
|
|
// 请求参数
|
|
requestParam: {
|
|
requestParam: {
|
|
@@ -113,43 +92,40 @@ export default {
|
|
//分享按钮
|
|
//分享按钮
|
|
uni.showShareMenu({
|
|
uni.showShareMenu({
|
|
withShareTicket: true,
|
|
withShareTicket: true,
|
|
- menus: ["shareAppMessage", "shareTimeline"],
|
|
|
|
|
|
+ menus: ['shareAppMessage', 'shareTimeline'],
|
|
});
|
|
});
|
|
// #endif
|
|
// #endif
|
|
uni.enableAlertBeforeUnload({
|
|
uni.enableAlertBeforeUnload({
|
|
- message: "您确定要退出学习吗?",
|
|
|
|
|
|
+ message: '您确定要退出学习吗?',
|
|
success: function (res) {
|
|
success: function (res) {
|
|
- console.log("方法注册成功:", res);
|
|
|
|
|
|
+ console.log('方法注册成功:', res);
|
|
},
|
|
},
|
|
fail: function (errMsg) {
|
|
fail: function (errMsg) {
|
|
- console.log("方法注册失败:", errMsg);
|
|
|
|
|
|
+ console.log('方法注册失败:', errMsg);
|
|
},
|
|
},
|
|
});
|
|
});
|
|
},
|
|
},
|
|
onUnload() {
|
|
onUnload() {
|
|
- console.log("页面卸载");
|
|
|
|
|
|
+ console.log('页面卸载');
|
|
clearInterval(this.timer);
|
|
clearInterval(this.timer);
|
|
},
|
|
},
|
|
onShareAppMessage(obj) {
|
|
onShareAppMessage(obj) {
|
|
return {
|
|
return {
|
|
title: `999智控终端平台\n${this.videoInfo.title}`,
|
|
title: `999智控终端平台\n${this.videoInfo.title}`,
|
|
- path: "/pages/video/detail?id=" + this.videoInfo.id,
|
|
|
|
|
|
+ path: '/pages/video/detail?id=' + this.videoInfo.id,
|
|
promise: new Promise((resolve, reject) => {
|
|
promise: new Promise((resolve, reject) => {
|
|
this.$http
|
|
this.$http
|
|
- .request("api/share_message/get_item", {
|
|
|
|
|
|
+ .request('api/share_message/get_item', {
|
|
item_id: this.videoInfo.id,
|
|
item_id: this.videoInfo.id,
|
|
- pages: "/pages/video/detail",
|
|
|
|
|
|
+ pages: '/pages/video/detail',
|
|
})
|
|
})
|
|
.then((callback) => {
|
|
.then((callback) => {
|
|
- console.log(callback, "api/share_message/get_item");
|
|
|
|
|
|
+ console.log(callback, 'api/share_message/get_item');
|
|
let obj = {
|
|
let obj = {
|
|
- title:
|
|
|
|
- callback.data?.title == ""
|
|
|
|
- ? `999智控终端平台\n${this.videoInfo.title}`
|
|
|
|
- : callback.data.title,
|
|
|
|
- path: "/pages/video/detail?id=" + this.videoInfo.id,
|
|
|
|
|
|
+ title: callback.data?.title == '' ? `999智控终端平台\n${this.videoInfo.title}` : callback.data.title,
|
|
|
|
+ path: '/pages/video/detail?id=' + this.videoInfo.id,
|
|
};
|
|
};
|
|
- if (callback.data?.image_url !== "") {
|
|
|
|
|
|
+ if (callback.data?.image_url !== '') {
|
|
obj.imageUrl = callback.data.image_url;
|
|
obj.imageUrl = callback.data.image_url;
|
|
}
|
|
}
|
|
resolve(obj);
|
|
resolve(obj);
|
|
@@ -162,34 +138,40 @@ export default {
|
|
// 如果存在产品ID的话
|
|
// 如果存在产品ID的话
|
|
if (this.requestParam.id > 0) {
|
|
if (this.requestParam.id > 0) {
|
|
// 请求详情
|
|
// 请求详情
|
|
- this.$http
|
|
|
|
- .request("api/video_course/get_detail", this.requestParam)
|
|
|
|
- .then((re) => {
|
|
|
|
- // 成功渲染数据
|
|
|
|
- if (re.code == "success") {
|
|
|
|
- // 刷新数据
|
|
|
|
- this.videoInfo = re.data;
|
|
|
|
- if (re.data.question_list) {
|
|
|
|
- this.questionTime_list = re.data?.question_list.map(
|
|
|
|
- (item) => item.play_time
|
|
|
|
- );
|
|
|
|
- }
|
|
|
|
- // 获取视频容器的上下文
|
|
|
|
- this.videoContext = uni.createVideoContext("myVideo");
|
|
|
|
- // 暂停播放
|
|
|
|
- this.videoContext.stop();
|
|
|
|
- } else {
|
|
|
|
- if (re.code != "no_login") {
|
|
|
|
- uni.showModal({
|
|
|
|
- content: re.msg,
|
|
|
|
- showCancel: false,
|
|
|
|
- });
|
|
|
|
- }
|
|
|
|
|
|
+ this.$http.request('api/video_course/get_detail', this.requestParam).then((re) => {
|
|
|
|
+ // 成功渲染数据
|
|
|
|
+ if (re.code == 'success') {
|
|
|
|
+ // 刷新数据
|
|
|
|
+ this.videoInfo = re.data;
|
|
|
|
+ if (re.data.question_list) {
|
|
|
|
+ this.questionTime_list = re.data?.question_list.map((item) => item.play_time);
|
|
}
|
|
}
|
|
- });
|
|
|
|
|
|
+ // 获取视频容器的上下文
|
|
|
|
+ this.videoContext = uni.createVideoContext('myVideo');
|
|
|
|
+ // 暂停播放
|
|
|
|
+ this.videoContext.stop();
|
|
|
|
+ } else {
|
|
|
|
+ if (re.code != 'no_login') {
|
|
|
|
+ uni.showModal({
|
|
|
|
+ content: re.msg,
|
|
|
|
+ showCancel: false,
|
|
|
|
+ });
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ });
|
|
}
|
|
}
|
|
},
|
|
},
|
|
methods: {
|
|
methods: {
|
|
|
|
+ openCustomer() {
|
|
|
|
+ // #ifdef MP-WEIXIN
|
|
|
|
+ console.log(1);
|
|
|
|
+ wx.openCustomerServiceChat({
|
|
|
|
+ extInfo: { url: this.videoInfo.service?.url },
|
|
|
|
+ corpId: this.videoInfo.service?.corpid,
|
|
|
|
+ success(res) {},
|
|
|
|
+ });
|
|
|
|
+ // #endif
|
|
|
|
+ },
|
|
timeUpdate(event) {
|
|
timeUpdate(event) {
|
|
this.currentTime = event.detail.currentTime; // 更新当前播放时间
|
|
this.currentTime = event.detail.currentTime; // 更新当前播放时间
|
|
|
|
|
|
@@ -204,23 +186,15 @@ export default {
|
|
this._postVideoDuration(this.currentTime, 1);
|
|
this._postVideoDuration(this.currentTime, 1);
|
|
}
|
|
}
|
|
// 判断当前时间是否接近答题时间,并且该问题尚未回答
|
|
// 判断当前时间是否接近答题时间,并且该问题尚未回答
|
|
- if (
|
|
|
|
- this.questionTime_list.includes(parseInt(this.currentTime) + 3) &&
|
|
|
|
- !this.answeredQuestions.has(parseInt(this.currentTime) + 3)
|
|
|
|
- ) {
|
|
|
|
|
|
+ if (this.questionTime_list.includes(parseInt(this.currentTime) + 3) && !this.answeredQuestions.has(parseInt(this.currentTime) + 3)) {
|
|
this.countdown = 3;
|
|
this.countdown = 3;
|
|
this._startCountdown();
|
|
this._startCountdown();
|
|
}
|
|
}
|
|
- if (
|
|
|
|
- this.questionTime_list.includes(parseInt(this.currentTime)) &&
|
|
|
|
- !this.answeredQuestions.has(parseInt(this.currentTime))
|
|
|
|
- ) {
|
|
|
|
- this.questinInfo = this.videoInfo.question_list.find(
|
|
|
|
- (item) => item.play_time == parseInt(this.currentTime)
|
|
|
|
- );
|
|
|
|
|
|
+ if (this.questionTime_list.includes(parseInt(this.currentTime)) && !this.answeredQuestions.has(parseInt(this.currentTime))) {
|
|
|
|
+ this.questinInfo = this.videoInfo.question_list.find((item) => item.play_time == parseInt(this.currentTime));
|
|
this.videoContext.pause();
|
|
this.videoContext.pause();
|
|
this.videoContext.exitFullScreen();
|
|
this.videoContext.exitFullScreen();
|
|
- this.$refs.questionRef.open("center");
|
|
|
|
|
|
+ this.$refs.questionRef.open('center');
|
|
//答题时间停止上报
|
|
//答题时间停止上报
|
|
clearInterval(this.timer);
|
|
clearInterval(this.timer);
|
|
this.timer = null;
|
|
this.timer = null;
|
|
@@ -228,7 +202,7 @@ export default {
|
|
}
|
|
}
|
|
},
|
|
},
|
|
_videoPlay() {
|
|
_videoPlay() {
|
|
- console.log("开始播放");
|
|
|
|
|
|
+ console.log('开始播放');
|
|
this.videoContext.requestFullScreen();
|
|
this.videoContext.requestFullScreen();
|
|
},
|
|
},
|
|
//上报视频播放时间
|
|
//上报视频播放时间
|
|
@@ -238,14 +212,14 @@ export default {
|
|
this.timer = null;
|
|
this.timer = null;
|
|
}
|
|
}
|
|
this.$http
|
|
this.$http
|
|
- .request("api/video_learn_record/update_playtime", {
|
|
|
|
|
|
+ .request('api/video_learn_record/update_playtime', {
|
|
record_id: this.videoInfo.record_id,
|
|
record_id: this.videoInfo.record_id,
|
|
video_playtime,
|
|
video_playtime,
|
|
status,
|
|
status,
|
|
})
|
|
})
|
|
.then((re) => {
|
|
.then((re) => {
|
|
- if (re.code == "success") {
|
|
|
|
- console.log("上报成功", video_playtime, status);
|
|
|
|
|
|
+ if (re.code == 'success') {
|
|
|
|
+ console.log('上报成功', video_playtime, status);
|
|
}
|
|
}
|
|
});
|
|
});
|
|
},
|
|
},
|
|
@@ -254,14 +228,14 @@ export default {
|
|
},
|
|
},
|
|
_submitAnswer() {
|
|
_submitAnswer() {
|
|
this.$http
|
|
this.$http
|
|
- .request("api/video_learn_answer/play_exam", {
|
|
|
|
|
|
+ .request('api/video_learn_answer/play_exam', {
|
|
record_id: this.videoInfo.record_id,
|
|
record_id: this.videoInfo.record_id,
|
|
course_id: this.questinInfo.course_id,
|
|
course_id: this.questinInfo.course_id,
|
|
question_id: this.questinInfo.question_id,
|
|
question_id: this.questinInfo.question_id,
|
|
answer_id: this.answer_id,
|
|
answer_id: this.answer_id,
|
|
})
|
|
})
|
|
.then((re) => {
|
|
.then((re) => {
|
|
- if (re.code == "success") {
|
|
|
|
|
|
+ if (re.code == 'success') {
|
|
this.show_answer = true;
|
|
this.show_answer = true;
|
|
this.answerInfo = re.data;
|
|
this.answerInfo = re.data;
|
|
// 将当前问题标记为已回答
|
|
// 将当前问题标记为已回答
|
|
@@ -274,8 +248,8 @@ export default {
|
|
this.show_answer = false;
|
|
this.show_answer = false;
|
|
this.$refs.questionRef.close();
|
|
this.$refs.questionRef.close();
|
|
uni.showToast({
|
|
uni.showToast({
|
|
- title: "2秒后切换横屏",
|
|
|
|
- icon: "none",
|
|
|
|
|
|
+ title: '2秒后切换横屏',
|
|
|
|
+ icon: 'none',
|
|
duration: 2000,
|
|
duration: 2000,
|
|
});
|
|
});
|
|
setTimeout(() => {
|
|
setTimeout(() => {
|
|
@@ -287,7 +261,7 @@ export default {
|
|
if (this.countdown > 0) {
|
|
if (this.countdown > 0) {
|
|
uni.showToast({
|
|
uni.showToast({
|
|
title: `${this.countdown}秒后进入答题`,
|
|
title: `${this.countdown}秒后进入答题`,
|
|
- icon: "none",
|
|
|
|
|
|
+ icon: 'none',
|
|
duration: 1000,
|
|
duration: 1000,
|
|
});
|
|
});
|
|
this.countdown--;
|
|
this.countdown--;
|
|
@@ -302,9 +276,9 @@ export default {
|
|
this.videoContext.exitFullScreen();
|
|
this.videoContext.exitFullScreen();
|
|
this._postVideoDuration(this.currentTime, 1);
|
|
this._postVideoDuration(this.currentTime, 1);
|
|
uni.showModal({
|
|
uni.showModal({
|
|
- title: "学习结束",
|
|
|
|
- content: "恭喜您学习结束,是否查看报告?",
|
|
|
|
- cancelText: "重新学习",
|
|
|
|
|
|
+ title: '学习结束',
|
|
|
|
+ content: '恭喜您学习结束,是否查看报告?',
|
|
|
|
+ cancelText: '重新学习',
|
|
success: (res) => {
|
|
success: (res) => {
|
|
if (res.confirm) {
|
|
if (res.confirm) {
|
|
uni.redirectTo({
|
|
uni.redirectTo({
|
|
@@ -323,7 +297,7 @@ export default {
|
|
},
|
|
},
|
|
screenChange(event) {
|
|
screenChange(event) {
|
|
let fullScreen = event.detail.fullScreen;
|
|
let fullScreen = event.detail.fullScreen;
|
|
- console.log("fullScreen", fullScreen);
|
|
|
|
|
|
+ console.log('fullScreen', fullScreen);
|
|
this.bigsScreen = fullScreen;
|
|
this.bigsScreen = fullScreen;
|
|
},
|
|
},
|
|
},
|
|
},
|
|
@@ -527,4 +501,28 @@ export default {
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
+.contact_follow {
|
|
|
|
+ bottom: 30%;
|
|
|
|
+ right: 20rpx;
|
|
|
|
+ width: 100rpx;
|
|
|
|
+ height: 100rpx;
|
|
|
|
+ display: block;
|
|
|
|
+ position: fixed;
|
|
|
|
+ border-radius: 50%;
|
|
|
|
+ background-color: #1296db;
|
|
|
|
+ .contact_btn {
|
|
|
|
+ border: none;
|
|
|
|
+ width: 100rpx;
|
|
|
|
+ color: #ffffff;
|
|
|
|
+ height: 100rpx;
|
|
|
|
+ padding: 0rpx 0rpx;
|
|
|
|
+ line-height: 100rpx;
|
|
|
|
+ text-align: center;
|
|
|
|
+ border-radius: 50%;
|
|
|
|
+ background-color: #1296db;
|
|
|
|
+ }
|
|
|
|
+ .contact_btn::after {
|
|
|
|
+ border: none;
|
|
|
|
+ }
|
|
|
|
+}
|
|
</style>
|
|
</style>
|