Skip to content

C
CFFP-HB
Commit 368b0c70 by huSun
Options

添加分享快捷入口功能。

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