Skip to content

C
CFFP-HB
Commit 368b0c70 by huSun
Options

添加分享快捷入口功能。

parent b193ccdd
Showing with 327 additions and 182 deletions
pages/courseDetail/courseDetail.vue
......@@ -2,25 +2,25 @@
<view class="container">
<view class="shareheader" style="">
<view class="">
<!-- <text>1</text> -->
<view class="iconfont icon-youjiantou" @click="goBack()">
</view>
<view class="share-entrance">
<view>
<uni-popup ref="share" type="top" safeArea backgroundColor="#fff">
<uni-popup-share @select="sharechange"></uni-popup-share>
</uni-popup>
</view>
<view class="" >
<img src="../../static/share.png" alt="">
<img @click="reinvite" src="../../static/fastentry/Slice122.png" alt="">
<img @click="shareToggle" src="../../static/fastentry/Slice12.png" alt="">
</view>
</view>
<!-- 课程banner图 -->
<view class="courseBannerBox">
<video id="myVideo" :src="courseInfo.filePathOss"
:initial-time="videoPlaybackInfo.maxViewTime"
object-fit="contain" class="videoBox"
:poster="courseInfo.fileFirstImage" :title="courseInfo.fileTitle"
@loadedmetadata="loadedmetadata"
@play="playVideo"
@pause="pause"
@ended="ended"
@timeupdate="timeupdate"
></video>
<video id="myVideo" :src="courseInfo.filePathOss" :initial-time="videoPlaybackInfo.maxViewTime"
object-fit="contain" class="videoBox" :poster="courseInfo.fileFirstImage" :title="courseInfo.fileTitle"
@loadedmetadata="loadedmetadata" @play="playVideo" @pause="pause" @ended="ended"
@timeupdate="timeupdate"></video>
</view>
<!-- 课程详情图 -->
<view class="courseTitleContent">
......@@ -33,7 +33,8 @@
</view>
<view class="dataBox">
<strong v-if="courseInfo.status==1">￥{{courseInfo.coursePrice}}</strong>
<text v-if="courseInfo.status==2" style="color: #F15A1F;margin-right: 20rpx;"><i class="iconfont icon-yifukuan"></i>已购</text>
<text v-if="courseInfo.status==2" style="color: #F15A1F;margin-right: 20rpx;"><i
class="iconfont icon-yifukuan"></i>已购</text>
<text>{{courseInfo.salesNumber}}人购买</text>
</view>
</view>
......@@ -59,13 +60,17 @@
</view>
<view class="courseItemContent" v-for="(item,index) in relatedCoursesLists" :key="item.fileId">
<view class="courseInfoContent">
<h4>{{index + 1}}.{{item.fileTitle}}<text class="courseType">{{item.fileType=='1' ? '必修' : '选修'}}</text></h4>
<h4>{{index + 1}}.{{item.fileTitle}}<text
class="courseType">{{item.fileType=='1' ? '必修' : '选修'}}</text></h4>
<view class="timeContent">
<view class="">{{secondsTransferPipe(Number(item.maxViewTime))}}/{{secondsTransferPipe(Number(item.courseTotalTime))}}</view>
<view class="">
{{secondsTransferPipe(Number(item.maxViewTime))}}/{{secondsTransferPipe(Number(item.courseTotalTime))}}
</view>
</view>
</view>
<view class="statusBtnContent" @click="play(item)">
<i class="iconfont icon-24gf-playCircle" :style="{'opacity':courseInfo.status == 1 ? '0.5' : '1'}"></i>
<i class="iconfont icon-24gf-playCircle"
:style="{'opacity':courseInfo.status == 1 ? '0.5' : '1'}"></i>
<text>{{courseInfo.status == 1 ? '不可播放' : '播放'}}</text>
</view>
</view>
......@@ -79,7 +84,8 @@
<view>
<p><text class="lecturerName">{{lecturerInfo.lecturerName}}</text></p>
<template v-if="lecturerInfo?.lecturerRankNames">
<p v-for="item in lecturerInfo.lecturerRankNames.split(',')" class="lecturerTitle"><text>{{item}}</text></p>
<p v-for="item in lecturerInfo.lecturerRankNames.split(',')" class="lecturerTitle">
<text>{{item}}</text></p>
</template>
</view>
</view>
......@@ -94,6 +100,30 @@
</view>
</view>
</view>
<!-- 分享信息 -->
<view>
<uni-popup ref="sharewx" type="bottom" backgroundColor="#fff">
<view class="popup-content">
<view class="shareBox">
<view class="shareOptionItem" @click="uniShare(1)">
<view class="imgBox">
<image src="../../static/app-plus/sharemenu/wechatfriend.png" mode="widthFix"></image>
</view>
<text>微信好友</text>
</view>
<view class="shareOptionItem" @click="uniShare(2)">
<view class="imgBox">
<image src="../../static/app-plus/sharemenu/wechatmoments.png" mode="widthFix"></image>
</view>
<text>分享朋友圈</text>
</view>
</view>
</view>
<view class="popup-footer" @click="closeShare()">
<view>取消</view>
</view>
</uni-popup>
</view>
</view>
</template>
......@@ -103,55 +133,76 @@
export default {
data() {
return {
fileId:null,
lecturerId:null,
tabType:3,
lecturerInfo:{},
courseInfo:{},
relatedCoursesLists:[],
orderId:'',
fileId: null,
lecturerId: null,
tabType: 3,
lecturerInfo: {},
courseInfo: {},
relatedCoursesLists: [],
orderId: '',
userId: uni.getStorageSync('cffp_userId'),
shareUserId:'',
shareCode:'',
shareReadId:'',
dataSource:'1',
requiredCount:0,
nonRequiredCount:0,
videoPlaybackInfo:{},
playbackId:'',
totalTime:0,
auditionTime:0,
viewTime:0,
timer:null,
loginType:'',
nonRequiredCount:0,
requiredCount:0
shareUserId: '',
shareCode: '',
shareReadId: '',
dataSource: '1',
requiredCount: 0,
nonRequiredCount: 0,
videoPlaybackInfo: {},
playbackId: '',
totalTime: 0,
auditionTime: 0,
viewTime: 0,
timer: null,
loginType: '',
nonRequiredCount: 0,
requiredCount: 0
};
},
methods:{
methods: {
goBack() {
console.log(12121232)
uni.navigateBack(1)
},
// 打开微信分享啊
reinvite() {
this.$refs.sharewx.open()
},
// 关闭微信分享啊
closeShare() {
this.$refs.sharewx.close()
},
shareToggle() {
this.$refs.share.open()
},
sharechange(val){
console.log(val, 423)
uni.navigateTo({
url:val.item.link
})
},
// 订单保存
saveOrder(){
if(this.loginType==='visitor'){
saveOrder() {
if (this.loginType === 'visitor') {
uni.navigateTo({
url:'/components/login/login'
url: '/components/login/login'
})
}else{
} else {
const param = {
productType:'1',
productId:this.courseInfo.fileId,
userId:this.userId,
shareUserId:this.shareUserId,
shareReadId:this.shareReadId,
shareCode:this.shareCode,
dataSource:this.dataSource
}
api.saveOrder(param).then(res=>{
if(res['success']){
productType: '1',
productId: this.courseInfo.fileId,
userId: this.userId,
shareUserId: this.shareUserId,
shareReadId: this.shareReadId,
shareCode: this.shareCode,
dataSource: this.dataSource
}
api.saveOrder(param).then(res => {
if (res['success']) {
this.orderId = res['data']['id'];
uni.navigateTo({
url:`/pages/orderConfirm/orderConfirm?fileId=${this.fileId}&orderId=${this.orderId}`
url: `/pages/orderConfirm/orderConfirm?fileId=${this.fileId}&orderId=${this.orderId}`
})
}else{
} else {
uni.showToast({
title: res['message'],
duration: 2000
......@@ -174,12 +225,14 @@
}
},
// 讲师信息查询
lecturerQuery(){
api.lecturerQuery({id:this.lecturerId}).then(res=>{
console.log('讲师信息',res);
if(res['success']){
lecturerQuery() {
api.lecturerQuery({
id: this.lecturerId
}).then(res => {
console.log('讲师信息', res);
if (res['success']) {
this.lecturerInfo = res['data']['lecturerInfos'][0];
}else{
} else {
uni.showToast({
title: res['message'],
duration: 2000,
......@@ -189,24 +242,31 @@
})
},
// 课程详情页面
courseDetail(){
api.courseDetail({fileId:this.fileId,userId:1,packFileId:this.courseInfo.packFileId}).then(res=>{
console.log('课程详情',res);
if(res['success']){
courseDetail() {
api.courseDetail({
fileId: this.fileId,
userId: 1,
packFileId: this.courseInfo.packFileId
}).then(res => {
console.log('课程详情', res);
if (res['success']) {
this.courseInfo = res['data']['data'];
this.lecturerId = res['data']['data']['fileLecturerId'];
this.lecturerQuery();
if(this.courseInfo.status === 2){
if (this.courseInfo.status === 2) {
this.findVideoPlayback()
}
}
})
},
// 相关课程查询
relatedCoursesList(){
api.relatedCoursesList({fileId:this.fileId,packFileId:this.courseInfo.packFileId}).then(res=>{
console.log('相关课程详情',res);
if(res['success']){
relatedCoursesList() {
api.relatedCoursesList({
fileId: this.fileId,
packFileId: this.courseInfo.packFileId
}).then(res => {
console.log('相关课程详情', res);
if (res['success']) {
this.relatedCoursesLists = res['data']['data']['relatedCourseList'];
this.nonRequiredCount = res['data']['data']['nonRequiredCount'];
this.requiredCount = res['data']['data']['requiredCount'];
......@@ -214,101 +274,101 @@
})
},
// 秒转时分秒格式
secondsTransferPipe(value){
secondsTransferPipe(value) {
return dataHandling.secondsTransferPipe(value)
},
play(item){
if(this.courseInfo.status == 1){
play(item) {
if (this.courseInfo.status == 1) {
// 不可播放
uni.showToast({
title: '购买才可观看哦~',
icon:'none',
icon: 'none',
duration: 2000
});
}else{
} else {
this.fileId = item.fileId;
this.courseInfo.packFileId = item.packFileId;
this.courseDetail()
}
},
saveVideoPlayback(){
saveVideoPlayback() {
// 视频播放轨迹保存
const param = {
id:this.playbackId ? this.playbackId : null,
systemType:1,
userId:this.userId,
fileId:this.fileId,
packFileId:this.courseInfo.packFileId,
totalTime:Math.floor(this.totalTime * 100) / 100,
viewTime:Math.floor(this.viewTime * 100) / 100,
playbackStatus:this.viewTime >= this.totalTime ? '2' : '1'
}
api.saveVideoPlayback(param).then(res=>{
if(res['success']){
id: this.playbackId ? this.playbackId : null,
systemType: 1,
userId: this.userId,
fileId: this.fileId,
packFileId: this.courseInfo.packFileId,
totalTime: Math.floor(this.totalTime * 100) / 100,
viewTime: Math.floor(this.viewTime * 100) / 100,
playbackStatus: this.viewTime >= this.totalTime ? '2' : '1'
}
api.saveVideoPlayback(param).then(res => {
if (res['success']) {
this.playbackId = res['data']['id'];
}
})
},
findVideoPlayback(){
findVideoPlayback() {
// 查询视频播放最新记录
const param = {
systemType:1,
userId:this.userId,
fileId:this.fileId,
packFileId:this.courseInfo.packFileId
systemType: 1,
userId: this.userId,
fileId: this.fileId,
packFileId: this.courseInfo.packFileId
}
api.findVideoPlayback(param).then(res=>{
if(res['success']){
api.findVideoPlayback(param).then(res => {
if (res['success']) {
this.videoPlaybackInfo = res['data']
}
})
},
loadedmetadata(e){
loadedmetadata(e) {
this.totalTime = e.detail.duration;
},
playVideo(e){
playVideo(e) {
// 开始/继续播放
if(this.courseInfo.status === 2){
if(this.timer){
if (this.courseInfo.status === 2) {
if (this.timer) {
clearInterval(this.timer)
}
this.saveVideoPlayback();
this.timer = setInterval(()=>{
this.timer = setInterval(() => {
this.saveVideoPlayback()
},20*1000)
}, 20 * 1000)
}
},
pause(){
pause() {
// 暂停播放
if(this.timer){
if (this.timer) {
clearInterval(this.timer)
}
if(this.viewTime >= this.totalTime){
if (this.viewTime >= this.totalTime) {
// 当播放完成的时候这里不触发
return;
}else{
} else {
this.saveVideoPlayback();
}
},
ended(){
ended() {
// 播放到末尾
if(this.timer){
if (this.timer) {
clearInterval(this.timer)
}
this.saveVideoPlayback();
},
timeupdate(e){
timeupdate(e) {
// 播放进度变化
this.viewTime = e.detail.currentTime > this.totalTime ? this.totalTime : e.detail.currentTime;
if(this.courseInfo.status === 1){
if (this.courseInfo.status === 1) {
// 如果是试听，那么当观看时间大于等于试听时间的时候，强制暂停，并出弹窗
if(this.viewTime >= this.courseInfo.auditionTime){
if (this.viewTime >= this.courseInfo.auditionTime) {
this.videoContext.pause();
// // 不可播放
uni.showModal({
content: '购买之后才可继续播放哦~',
showCancel:false,
success: function (res) {
showCancel: false,
success: function(res) {
if (res.confirm) {
console.log('用户点击确定');
} else if (res.cancel) {
......@@ -321,18 +381,18 @@
}
}
},
mounted(){
mounted() {
this.switchTab(1);
this.loginType = uni.getStorageSync('loginType')
},
onLoad(option){
onLoad(option) {
this.fileId = option.fileId;
},
onReady(){
onReady() {
this.videoContext = uni.createVideoContext('myVideo');
},
onUnload(){
if(this.timer){
onUnload() {
if (this.timer) {
clearInterval(this.timer)
}
}
......@@ -340,86 +400,152 @@
</script>
<style lang="scss">
.courseBannerBox{
.popup-content {
font-size: 32rpx;
color: #666;
padding-bottom: 40rpx;
.shareBox {
display: flex;
justify-content: space-around;
align-items: center;
.shareOptionItem {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
.imgBox {
width: 100rpx;
}
}
}
}
.popup-footer {
color: #666;
font-size: 36rpx;
border-top: 2rpx solid #f0f0f0;
display: flex;
justify-content: center;
align-items: center;
padding-top: 36rpx;
}
.courseBannerBox {
height: 300rpx;
background-color: #ebebeb;
display: flex;
justify-content: center;
.videoBox{
.videoBox {
max-width: 100%;
height: 100%;
}
}
.courseTitleContent{
.courseTitleContent {
height: 150rpx;
background-color: #fff;
margin-bottom: 10rpx;
padding: 20rpx 30rpx;
box-sizing: border-box;
.courseTitle{
.courseTitle {
display: flex;
justify-content: space-between;
margin-bottom: 16rpx;
h4{
h4 {
font-size: 40rpx;
}
}
.dataBox{
strong{
.dataBox {
strong {
font-size: 30rpx;
color: #F15A1F;
margin-right: 30rpx;
}
text{
text {
font-size: 28rpx;
color: #333;
}
}
}
.shareheader{
display: flex;justify-content: space-between;
.shareheader {
display: flex;
justify-content: space-between;
align-items: center;
height: 60rpx;
.icon-youjiantou{
display: inline-block;
transform: rotate(180deg);
font-size: 30rpx;
// width: 50rpx;
// height: 50rpx;
z-index: 1;
}
.share-entrance{
align-items: center;
img{
width: 40rpx;
height: 40rpx;
margin-top: 10rpx;
margin-right: 25rpx;
}
}
// border: 1rpx solid #999;
}
.image{
.image {
width: 30rpx;
height: 30rpx;
}
.courseProBox{
.tab{
.courseProBox {
.tab {
display: flex;
justify-content: space-between;
padding: 40rpx 30rpx 0;
background-color: #fff;
color: #666;
font-size: 32rpx;
text.actived{
text.actived {
border-bottom: 2px solid #20269B;
color: #333;
}
}
.tabContent{
.tabContent {
padding-bottom: 200rpx;
background-color: #fff;
.statusBtnContent{
.statusBtnContent {
display: flex;
flex-direction: column;
align-items: center;
color: #999;
font-size: 20rpx;
.iconfont{
.iconfont {
font-size: 60rpx;
color: #5359CD;
}
}
.lecturerContent{
.lecturerIntro{
.lecturerContent {
.lecturerIntro {
display: flex;
padding: 40rpx 50rpx;
border-bottom: 2rpx solid #fbfbfb;
.lecturerUrl{
.lecturerUrl {
width: 200rpx;
height: 200rpx;
border-radius: 50%;
......@@ -427,7 +553,8 @@
overflow: hidden;
margin-right: 40rpx;
}
.lecturerName{
.lecturerName {
display: inline-block;
background: #5359CD;
border-radius: 10rpx;
......@@ -435,23 +562,27 @@
font-size: 28rpx;
padding: 4rpx 20rpx;
}
.lecturerTitle{
.lecturerTitle {
font-size: 28rpx;
color: #5359CD;
margin-top: 16rpx;
}
}
h4{
h4 {
padding-left: 30rpx;
padding-top: 10rpx;
padding-bottom: 20rpx;
background-color: #fff;
text{
text {
border-bottom: 1px solid #333;
font-size: 30rpx;
}
}
.lecturerText{
.lecturerText {
padding: 0 28rpx;
background-color: #fff;
white-space: pre-wrap;
......@@ -460,15 +591,18 @@
}
}
.courseIntroContent,.relationCourseListsContent{
.courseIntroContent,
.relationCourseListsContent {
padding: 0 28rpx;
background-color: #fff;
white-space: pre-wrap;
width: 100%;
box-sizing: border-box;
}
.relationCourseListsContent{
.courseType{
.relationCourseListsContent {
.courseType {
background-color: #5359CD;
color: #fff;
border-radius: 2rpx;
......@@ -476,7 +610,8 @@
font-size: 16rpx;
margin-left: 10rpx;
}
.totalCourseCount{
.totalCourseCount {
color: #20269B;
font-size: 24rpx;
padding: 8rpx 0;
......@@ -484,17 +619,20 @@
border-left: none;
border-right: none;
}
.courseItemContent{
.courseItemContent {
padding: 16rpx 0;
border-bottom: 1px solid #fbfbfb;
display: flex;
align-items: center;
justify-content: space-between;
.courseInfoContent{
h4{
.courseInfoContent {
h4 {
color: #666;
}
.timeContent{
.timeContent {
color: #999;
padding-left: 28rpx;
......@@ -503,7 +641,8 @@
}
}
.buyBox{
.buyBox {
position: fixed;
bottom: 0;
left: 0;
......
uni_modules/uni-popup/components/uni-popup-share/uni-popup-share.vue
......@@ -4,12 +4,14 @@
<view class="uni-share-content">
<view class="uni-share-content-box">
<view class="uni-share-content-item" v-for="(item,index) in bottomData" :key="index" @click.stop="select(item,index)">
<image class="uni-share-image" :src="item.icon" mode="aspectFill"></image>
<!-- <image class="uni-share-image" :src="item.icon" mode="aspectFill"></image> -->
<img class="uni-share-image" :src="item.icon" alt="">
<text class="uni-share-text">{{item.text}}</text>
</view>
</view>
</view>
<!-- <image src="" mode=""></image> -->
<view class="uni-share-button-box">
<button class="uni-share-button" @click="close">{{cancelText}}</button>
</view>
......@@ -40,24 +42,28 @@
data() {
return {
bottomData: [{
text: '微信',
icon: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/c2b17470-50be-11eb-b680-7980c8a877b8.png',
name: 'wx'
text: '首页',
icon: '../../../../static/fastentry/homepage.png',
name: 'home',
link:'/pages/index/index'
},
{
text: '支付宝',
icon: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/d684ae40-50be-11eb-8ff1-d5dcf8779628.png',
name: 'wx'
text: '搜索',
icon: '../../../../static/fastentry/search.png',
name: 'searh',
link:''
},
{
text: 'QQ',
icon: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/e7a79520-50be-11eb-b997-9918a5dda011.png',
name: 'qq'
text: '我的',
icon: '../../../../static/fastentry/user.png',
name: 'user',
link:'/pages/personalCenter/personalCenter'
},
{
text: '新浪',
icon: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/0dacdbe0-50bf-11eb-8ff1-d5dcf8779628.png',
name: 'sina'
text: '消息',
icon: '../../../../static/fastentry/news.png',
name: 'news',
link:'/pages/systemMsg/system_msg'
},
// {
// text: '百度',
......@@ -78,7 +84,7 @@
return t("uni-popup.cancel")
},
shareTitleText() {
return this.title || t("uni-popup.shareTitle")
return this.title || '快捷入口'
}
},
methods: {
......@@ -106,8 +112,8 @@
<style lang="scss" >
.uni-popup-share {
background-color: #fff;
border-top-left-radius: 11px;
border-top-right-radius: 11px;
border-top-left-radius: 11rpx;
border-top-right-radius: 11rpx;
}
.uni-share-title {
/* #ifndef APP-NVUE */
......@@ -116,10 +122,10 @@
flex-direction: row;
align-items: center;
justify-content: center;
height: 40px;
height: 40rpx;
}
.uni-share-title-text {
font-size: 14px;
font-size: 14rpx;
color: #666;
}
.uni-share-content {
......@@ -128,7 +134,7 @@
/* #endif */
flex-direction: row;
justify-content: center;
padding-top: 10px;
padding-top: 10rpx;
}
.uni-share-content-box {
......@@ -137,17 +143,17 @@
/* #endif */
flex-direction: row;
flex-wrap: wrap;
width: 360px;
// width: 360rpx;
}
.uni-share-content-item {
width: 90px;
width: 90rpx;
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: column;
justify-content: center;
padding: 10px 0;
padding: 10rpx 30rpx;
align-items: center;
}
......@@ -156,13 +162,13 @@
}
.uni-share-image {
width: 30px;
height: 30px;
width: 60rpx;
height: 60rpx;
}
.uni-share-text {
margin-top: 10px;
font-size: 14px;
margin-top: 10rpx;
font-size: 14rpx;
color: #3B4144;
}
......@@ -171,17 +177,17 @@
display: flex;
/* #endif */
flex-direction: row;
padding: 10px 15px;
padding: 10rpx 15rpx;
}
.uni-share-button {
flex: 1;
border-radius: 50px;
border-radius: 50rpx;
color: #666;
font-size: 16px;
font-size: 16rpx;
}
.uni-share-button::after {
border-radius: 50px;
border-radius: 50rpx;
}
</style>
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