Commit 36601a7b authored by Morson's avatar Morson
parents 923baff0 ae0a94c0
<template> <template>
<view class="learn-vedio"> <view class="learn-vedio">
<view class="uni-padding-wrap uni-common-mt"> <view class="uni-padding-wrap uni-common-mt">
<view><video object-fit="cover" class="course-video" id="courseVideo" :src="courseSrc" <view
@error="videoErrorCallback" controls></video></view> ><video
object-fit="cover"
class="course-video"
id="courseVideo"
:src="courseSrc"
@error="videoErrorCallback"
controls
></video
></view>
<view class="title-content"> <view class="title-content">
<view class="item-content"> <view class="item-content">
<view class="item-st"> <view class="item-st">
<text class="item-st-text">{{courseTitle.split(' ') ? courseTitle.split(' ')[0] : ''}}</text> <image style="width: 80rpx; height: 36rpx" :src="kcImage"></image>
<text class="item-st-text">{{
courseTitle.split(" ") ? courseTitle.split(" ")[0] : ""
}}</text>
</view> </view>
<view class="item-title">{{courseTitle.split(' ') ? courseTitle.split(' ')[1] : ''}}</view> <view class="item-title">{{
courseTitle.split(" ") ? courseTitle.split(" ")[1] : ""
}}</view>
</view> </view>
<view>接单操作须知有助你快速了解充电桩安装业务,提高接单效率,请认真查看及学习。</view> <view
>接单操作须知有助你快速了解充电桩安装业务,提高接单效率,请认真查看及学习。</view
>
</view> </view>
<view class="learn-view" v-if="courseId >= 0"> <view class="learn-view" v-if="courseId >= 0">
<view class="learn-view-title">视频内容介绍</view> <view class="learn-view-title">视频内容介绍</view>
<view class="learn-list" v-for="(item, key) in courseOutlines[courseId]" :key="key"> <view
<view class="learn-list-item">{{item}}</view> class="learn-list"
v-for="(item, key) in courseOutlines[courseId]"
:key="key"
>
<view class="learn-list-item">{{ item }}</view>
</view> </view>
</view> </view>
</view> </view>
...@@ -23,47 +42,47 @@ ...@@ -23,47 +42,47 @@
</template> </template>
<script> <script>
let app = getApp(); let app = getApp();
export default { export default {
data() { data() {
return { return {
courseId: '', courseId: "",
courseStatus: 0, courseStatus: 0,
courseSrc: '', courseSrc: "",
courseTitle: '', courseTitle: "",
courseDesc: '', courseDesc: "",
currentIndex: -1 // 第几个视频 currentIndex: -1, // 第几个视频
}; };
}, },
computed: { computed: {
courseOutlines() { // 视频内容介绍 courseOutlines() {
return {1:[ // 视频内容介绍
'1、考核规则:接单及时率', return {
'2、考核规则:上门及时率', 1: [
'3、考核规则:安装完工率', "1、考核规则:接单及时率",
'4、考核规则:资料提交及时率', "2、考核规则:上门及时率",
'5、考核规则:安装完工率', "3、考核规则:安装完工率",
'6、考核规则:客户满意度' "4、考核规则:资料提交及时率",
], "5、考核规则:安装完工率",
2:[ "6、考核规则:客户满意度",
'1、必备材料4大类',
'2、施工工具准备'
], ],
3:[ 2: ["1、必备材料4大类", "2、施工工具准备"],
'1、接线安装工艺标准', 3: [
'2、PVC、镀锌管电缆管明敷', "1、接线安装工艺标准",
'3、电缆敷设的防火要求', "2、PVC、镀锌管电缆管明敷",
'4、电源点标识', "3、电缆敷设的防火要求",
'5、配电箱接线及安装', "4、电源点标识",
'6、管线敷设接头处理', "5、配电箱接线及安装",
'7、充电桩内部接线', "6、管线敷设接头处理",
'8、配电箱安装' "7、充电桩内部接线",
"8、配电箱安装",
], ],
4:[ 4: ["1、勘测环节录单要求", "2、安装环节录单要求"],
'1、勘测环节录单要求', };
'2、安装环节录单要求' },
]} kcImage() {
} return qn_base_url + "kc.png";
},
}, },
onLoad(e) { onLoad(e) {
if (e) { if (e) {
...@@ -83,53 +102,55 @@ ...@@ -83,53 +102,55 @@
} }
} }
}, },
onReady: function(res) { onReady: function (res) {
// #ifndef MP-ALIPAY // #ifndef MP-ALIPAY
this.videoContext = uni.createVideoContext('courseVideo'); this.videoContext = uni.createVideoContext("courseVideo");
// #endif // #endif
}, },
methods: { methods: {
videoErrorCallback: function(e) { videoErrorCallback: function (e) {
uni.showModal({ uni.showModal({
content: e.target.errMsg, content: e.target.errMsg,
showCancel: false showCancel: false,
}); });
}, },
getRandomColor: function() { getRandomColor: function () {
const rgb = []; const rgb = [];
for (let i = 0; i < 3; ++i) { for (let i = 0; i < 3; ++i) {
let color = Math.floor(Math.random() * 256).toString(16); let color = Math.floor(Math.random() * 256).toString(16);
color = color.length == 1 ? '0' + color : color; color = color.length == 1 ? "0" + color : color;
rgb.push(color); rgb.push(color);
} }
return '#' + rgb.join(''); return "#" + rgb.join("");
}, },
changeCourseStatus() { changeCourseStatus() {
let that = this let that = this;
if (that.courseId) { if (that.courseId) {
that.$u.api.saveCourseRate({ that.$u.api
courseId: that.courseId .saveCourseRate({
}).then(res => { courseId: that.courseId,
})
.then((res) => {
if (res.code !== 200) { if (res.code !== 200) {
uni.showToast({ uni.showToast({
icon: "none", icon: "none",
title: "更新课程状态失败" title: "更新课程状态失败",
}) });
} }
}) });
} else { } else {
uni.showToast({ uni.showToast({
title: "课程ID为空,请重新选择课程" title: "课程ID为空,请重新选择课程",
}) });
} }
}, },
} },
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.learn-vedio { .learn-vedio {
background-color: #F4F5F7; background-color: #f4f5f7;
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
...@@ -137,94 +158,83 @@ ...@@ -137,94 +158,83 @@
height: 100%; height: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
.course-video { .course-video {
width: 100%; width: 100%;
} }
.course-title { .course-title {
font-size: 36rpx; font-size: 36rpx;
font-weight: 700; font-weight: 700;
padding: 80rpx 60rpx 40rpx 60rpx; padding: 80rpx 60rpx 40rpx 60rpx;
} }
.course-desc { .course-desc {
margin-left: 60rpx; margin-left: 60rpx;
} }
.title-content { .title-content {
padding: 40rpx 30rpx; padding: 40rpx 30rpx;
margin-bottom: 20rpx; margin-bottom: 20rpx;
background-color: #FFFFFF; background-color: #ffffff;
color: #999999; color: #999999;
font-size: 24rpx; font-size: 24rpx;
.item-content { .item-content {
display: flex; display: flex;
align-items: center;
} }
.item-st { .item-st {
width: 80rpx; width: 80rpx;
height: 36rpx; height: 36rpx;
background-image: linear-gradient(to right, #FF930D, #FFC174);
font-size: 16rpx;
border-radius: 6rpx 36rpx 36rpx 6rpx;
padding-top: 8rpx;
padding-right: 2rpx; padding-right: 2rpx;
text-align: center; text-align: center;
margin-right: 20rpx; margin-right: 20rpx;
line-height: 24rpx;
position: relative;
.item-st-text { .item-st-text {
color: #FFFFFF; color: #ffffff;
position: absolute;
font-size: 16rpx;
left: 20rpx;
top: 8rpx;
line-height: 28rpx;
} }
} }
.item-title { .item-title {
color: #333333; color: #333333;
font-size: 28rpx; font-size: 44rpx;
} font-weight: bold;
} }
}
.item-content { .item-content {
display: flex; display: flex;
padding-bottom: 30rpx; padding-bottom: 30rpx;
} }
.item-st {
width: 80rpx;
height: 36rpx;
background-image: linear-gradient(to right, #FF930D, #FFC174);
font-size: 16rpx;
border-radius: 6rpx 36rpx 36rpx 6rpx;
padding-top: 8rpx;
padding-right: 2rpx;
text-align: center;
margin-right: 20rpx;
}
.item-title { .item-title {
color: #333333; color: #333333;
font-size: 28rpx; font-size: 28rpx;
} }
.learn-view { .learn-view {
background-color: #FFFFFF; background-color: #ffffff;
border-radius: 12rpx; border-radius: 12rpx;
padding: 38rpx 30rpx 30rpx 30rpx; padding: 38rpx 30rpx 30rpx 30rpx;
margin-bottom: 20rpx; margin-bottom: 20rpx;
font-size: 32rpx; font-size: 32rpx;
color: #333333; color: #333333;
.learn-view-title { .learn-view-title {
font-size: 32rpx; font-size: 32rpx;
font-weight: bold; font-weight: bold;
margin-bottom: 10rpx; margin-bottom: 10rpx;
} }
.learn-list { .learn-list {
.learn-list-item { .learn-list-item {
font: 24rpx; font: 24rpx;
margin-top: 30rpx; margin-top: 30rpx;
...@@ -232,10 +242,10 @@ ...@@ -232,10 +242,10 @@
} }
.line-view { .line-view {
background-color: #F4F5F7; background-color: #f4f5f7;
height: 2rpx; height: 2rpx;
width: 100%; width: 100%;
} }
} }
} }
</style> </style>
...@@ -10,8 +10,9 @@ ...@@ -10,8 +10,9 @@
<view class="learn-list" v-for="(item, key) in tutorials" :key="key"> <view class="learn-list" v-for="(item, key) in tutorials" :key="key">
<view class="learn-list-item"> <view class="learn-list-item">
<view class="item-content"> <view class="item-content">
<view class="item-st"><text <view class="item-st">
class="item-st-text">{{item.title.split(' ') ? item.title.split(' ')[0] : ''}}</text> <image style="width: 80rpx;height: 36rpx;" :src="kcImage"></image>
<text class="item-st-text">{{item.title.split(' ') ? item.title.split(' ')[0] : ''}}</text>
</view> </view>
<view class="item-title">{{item.title.split(' ') ? item.title.split(' ')[1] : ''}}</view> <view class="item-title">{{item.title.split(' ') ? item.title.split(' ')[1] : ''}}</view>
</view> </view>
...@@ -148,6 +149,9 @@ ...@@ -148,6 +149,9 @@
}, },
tips1Image() { tips1Image() {
return qn_base_url + 'tips1.png' return qn_base_url + 'tips1.png'
},
kcImage() {
return qn_base_url + 'kc.png'
} }
}, },
onLoad() { onLoad() {
...@@ -301,16 +305,18 @@ ...@@ -301,16 +305,18 @@
.item-st { .item-st {
width: 80rpx; width: 80rpx;
height: 36rpx; height: 36rpx;
background-image: linear-gradient(to right, #FF930D, #FFC174);
font-size: 16rpx;
border-radius: 6rpx 36rpx 36rpx 6rpx;
padding-top: 8rpx;
padding-right: 2rpx; padding-right: 2rpx;
text-align: center; text-align: center;
margin-right: 20rpx; margin-right: 20rpx;
line-height: 24rpx; line-height: 24rpx;
position: relative;
.item-st-text { .item-st-text {
color: #FFFFFF; color: #FFFFFF;
position: absolute;
font-size: 16rpx;
left: 20rpx;
top: 8rpx;
line-height: 28rpx;
} }
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment