Commit 03028cd0 authored by 李俊赕's avatar 李俊赕
parents 02a1db7c a9d72104
<template> <template>
<view> <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" @error="videoErrorCallback" controls></video></view> <view><video object-fit="cover" class="course-video" id="courseVideo" :src="courseSrc"
<uni-group> @error="videoErrorCallback" controls></video></view>
<view class="course-title">{{ courseTitle }}</view> <view class="title-content">
<view class="course-desc">{{ courseDesc }}</view> <view class="item-content">
</uni-group> <view class="item-st">
</view> <text class="item-st-text">{{courseTitle.split(' ') ? courseTitle.split(' ')[0] : ''}}</text>
</view> </view>
</template> <view class="item-title">{{courseTitle.split(' ') ? courseTitle.split(' ')[1] : ''}}</view>
</view>
<script> <view>接单操作须知有助你快速了解充电桩安装业务,提高接单效率,请认真查看及学习。</view>
let app = getApp(); </view>
export default { <view class="learn-view">
data() { <view class="learn-view-title">内容大纲</view>
return { <view class="learn-list" v-for="(item, key) in courseOutline" :key="key">
courseId: '', <view class="learn-list-item">{{item}}</view>
courseStatus: 0, <view class="line-view"></view>
courseSrc: '', </view>
courseTitle: '', </view>
courseDesc: '', </view>
}; </view>
}, </template>
onLoad(e) {
if (e) { <script>
if(e.courseId) { let app = getApp();
this.courseId = e.courseId; export default {
} data() {
if(e.id) { return {
this.courseId = e.courseId; courseId: '',
this.courseSrc = app.globalData.service_standard[e.id].url; courseStatus: 0,
this.courseTitle = app.globalData.service_standard[e.id].title; courseSrc: '',
this.courseDesc = app.globalData.service_standard[e.id].desc; courseTitle: '',
this.changeCourseStatus(); courseDesc: '',
} courseOutline: ['1 aaa', '2 bbb'] // 视频大纲
};
if(e.status) { },
this.courseStatus = e.status; onLoad(e) {
} if (e) {
} if (e.courseId) {
}, this.courseId = e.courseId;
onReady: function(res) { }
// #ifndef MP-ALIPAY if (e.id) {
this.videoContext = uni.createVideoContext('courseVideo'); this.courseId = e.courseId;
// #endif this.courseSrc = app.globalData.service_standard[e.id].url;
}, this.courseTitle = app.globalData.service_standard[e.id].title;
methods: { this.courseDesc = app.globalData.service_standard[e.id].desc;
videoErrorCallback: function(e) { this.changeCourseStatus();
uni.showModal({ }
content: e.target.errMsg,
showCancel: false if (e.status) {
}); this.courseStatus = e.status;
}, }
getRandomColor: function() { }
const rgb = []; },
for (let i = 0; i < 3; ++i) { onReady: function(res) {
let color = Math.floor(Math.random() * 256).toString(16); // #ifndef MP-ALIPAY
color = color.length == 1 ? '0' + color : color; this.videoContext = uni.createVideoContext('courseVideo');
rgb.push(color); // #endif
} },
return '#' + rgb.join(''); methods: {
}, videoErrorCallback: function(e) {
changeCourseStatus() { uni.showModal({
let that = this content: e.target.errMsg,
if(that.courseId) { showCancel: false
that.$u.api.saveCourseRate({courseId: that.courseId}).then(res => { });
if(res.code == 200) { },
// uni.navigateBack({delta: 1}) getRandomColor: function() {
uni.navigateTo({ const rgb = [];
url: "/pages/learn/exam" for (let i = 0; i < 3; ++i) {
}) let color = Math.floor(Math.random() * 256).toString(16);
} else { color = color.length == 1 ? '0' + color : color;
uni.showToast({ rgb.push(color);
icon: "none", }
title: "更新课程状态失败" return '#' + rgb.join('');
}) },
} changeCourseStatus() {
}).catch(e=> { let that = this
if (that.courseId) {
}) that.$u.api.saveCourseRate({
} else { courseId: that.courseId
uni.showToast({ }).then(res => {
title: "课程ID为空,请重新选择课程" if (res.code == 200) {
}) // uni.navigateBack({delta: 1})
} uni.navigateTo({
}, url: "/pages/learn/exam"
} })
}; } else {
</script> uni.showToast({
icon: "none",
<style lang="scss"> title: "更新课程状态失败"
.course-video { })
width: 750rpx; }
} }).catch(e => {
.course-title {
font-size: 36rpx; })
font-weight: 700; } else {
padding: 80rpx 60rpx 40rpx 60rpx; uni.showToast({
} title: "课程ID为空,请重新选择课程"
.course-desc { })
margin-left: 60rpx; }
} },
}
};
</script>
<style lang="scss" scoped>
.learn-vedio {
background-color: #F4F5F7;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
}
.course-video {
width: 100%;
}
.course-title {
font-size: 36rpx;
font-weight: 700;
padding: 80rpx 60rpx 40rpx 60rpx;
}
.course-desc {
margin-left: 60rpx;
}
.title-content {
padding: 40rpx 30rpx;
margin-bottom: 20rpx;
background-color: #FFFFFF;
color: #999999;
font-size: 24rpx;
.item-content {
display: flex;
}
.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-st-text {
color: #FFFFFF;
}
}
.item-title {
color: #333333;
font-size: 28rpx;
}
}
.item-content {
display: flex;
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 {
color: #333333;
font-size: 28rpx;
}
.learn-view {
background-color: #FFFFFF;
border-radius: 12rpx;
padding: 38rpx 30rpx 30rpx 30rpx;
margin-bottom: 20rpx;
font-size: 32rpx;
color: #333333;
.learn-view-title {
font-size: 32rpx;
font-weight: bold;
margin-bottom: 10rpx;
}
.learn-list {
.learn-list-item {
font: 24rpx;
margin-top: 30rpx;
margin-bottom: 30rpx;
}
.line-view {
background-color: #F4F5F7;
height: 2rpx;
width: 100%;
}
}
}
</style> </style>
...@@ -130,7 +130,7 @@ ...@@ -130,7 +130,7 @@
buttonStyle() { buttonStyle() {
return { return {
'color': '#FFFFFF', 'color': '#FFFFFF',
'width': '300rpx', 'width': '500rpx',
'height': '112rpx', 'height': '112rpx',
'background-color': '#2272FF', 'background-color': '#2272FF',
'font-size': '32rpx', 'font-size': '32rpx',
...@@ -292,7 +292,10 @@ ...@@ -292,7 +292,10 @@
padding-top: 8rpx; padding-top: 8rpx;
padding-right: 2rpx; padding-right: 2rpx;
text-align: center; text-align: center;
margin-right: 20rpx; margin-right: 20rpx;
.item-st-text {
color: #FFFFFF;
}
} }
.item-title { .item-title {
......
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