You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
402 lines
10 KiB
402 lines
10 KiB
<template>
|
|
<view class="page flex-col" style=" position: relative;height: auto;background-color: #F8F6ED;">
|
|
<view class="group_1 flex-col" style=" height: calc(100% - 50px);">
|
|
|
|
<view class="section_2 flex-col" style="height: auto;">
|
|
<view class="block_1 flex-col" style="border-radius: 0;">
|
|
<view class="text-wrapper_1 flex-row">
|
|
<text class="text_2">{{list.b.title}}</text>
|
|
</view>
|
|
<view class="text-wrapper_2 flex-row justify-between">
|
|
<text class="text_3">￥{{list.b.price}}</text>
|
|
<text class="text_4">已有{{list.b.num}}人学习</text>
|
|
</view>
|
|
</view>
|
|
|
|
|
|
<video style="z-index: 3;" class="block_2 flex-col" :src="videoUrl" controls
|
|
@timeupdate="handleTimeUpdate" @play="play" :poster="poster" object-fit="fill">
|
|
|
|
<!-- <image class="block_2 flex-col" v-if="poster" :src="poster"
|
|
style="width: 100%;height: 100%;z-index: 2;opacity: 0.5; pointer-events: none;" /> -->
|
|
|
|
</video>
|
|
|
|
|
|
</view>
|
|
|
|
<view class="section_3 flex-col"
|
|
style="height: auto;border-radius: 0;margin-top: 20rpx;padding-bottom: 20rpx;">
|
|
<div class="tabs_1 flex-col" style="height: 70rpx;">
|
|
<view class="text-wrapper_3 flex-row justify-between">
|
|
<text style="height:50rpx;width:100rpx;text-align: center;" class="text_5"
|
|
:class="{ active: activeTab === '介绍' }" @click="changeTab('介绍')">介绍</text>
|
|
<text style="height:50rpx;width:100rpx;text-align: center;" class="text_6"
|
|
:class="{ active: activeTab === '目录' }" @click="changeTab('目录')">目录</text>
|
|
</view>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<view v-if="activeTab === '介绍'" style=";">
|
|
<view style="margin-left: 5%;font-weight: 900;font-size:18px;">授课老师</view>
|
|
|
|
<view style="margin-left: 3%;width: 94%;margin-top: 20rpx;margin-bottom: 20rpx;" @tap="go1()">
|
|
<image :src="list.a.image"
|
|
style="width: 120rpx;height: 120rpx;border-radius: 100px;float: left;" />
|
|
<view style="float: left;margin-left: 20rpx;margin-top: 15rpx;">
|
|
<view style="font-size: 16px;font-weight: 900;">{{list.a.name}}</view>
|
|
<view style="font-size: 12px;margin-top: 10rpx;color: gray;">共计{{list.a.num}}课时</view>
|
|
</view>
|
|
|
|
<image src="/static/lanhu_kechengxiangqingmulu/4467bb13053bcc92fb9c10452b036fd7.png"
|
|
style="width: 20rpx;height: 30rpx;margin-top:50rpx;float: right;" />
|
|
</view>
|
|
<view style="width: 100%;height: 20rpx;background-color: #F8F6ED;clear: both;"></view>
|
|
<view
|
|
style="margin-left: 5%;font-weight: 900;font-size:18px;margin-top: 20rpx;margin-bottom: 10rpx;">
|
|
课程介绍</view>
|
|
<rich-text :nodes="list.b.content" style="width: 95%;margin-left: 2.5%;"></rich-text>
|
|
<!-- <view style="height:60rpx;padding-left: 5%;line-height: 50rpx;" v-for="(item, index) in list.c"
|
|
:key="index">
|
|
<view style="float: left;margin-top: -20rpx;font-size: 30px;font-weight: 999;color: darkgray;">.
|
|
</view>
|
|
<view style="float: left;color: darkgray;margin-left:5rpx;">{{item.unit_name}}</view>
|
|
</view> -->
|
|
|
|
</view>
|
|
|
|
|
|
|
|
<view v-if="activeTab === '目录'" style="height: auto;padding-bottom: 200rpx;">
|
|
<text class="text_7" style="">可免费试看视频/音频前60s</text>
|
|
|
|
<view v-for="(item, index) in list.d" :key="index">
|
|
|
|
<view class="box_2 flex-row" style="" @tap="hideElement(index)">
|
|
<text class="text_8">{{item[0].title2}}</text>
|
|
<image class="label_1" referrerpolicy="no-referrer"
|
|
src="/static/lanhu_kechengxiangqingmulu/4fcce6f6b93750a3be24b81f9dbaa542.png" />
|
|
</view>
|
|
|
|
<view :id="index">
|
|
<view class="box_3 flex-row" v-for="(item2, index2) in item" :key="index2">
|
|
<image class="icon_2" @tap="bofang(item2.mp4)"
|
|
src="/static/lanhu_kechengxiangqingmulu/35d5a4228d4ae5e616779e122f9cd5fa.png" />
|
|
<text class="text_9">{{item2.title}}</text>
|
|
<text class="text_10">{{item2.min}}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
|
|
<!-- <view class="cu-modal bottom-modal" :class="modalName == 'share' ? 'show' : ''" @tap="hideModal">
|
|
<view class="cu-dialog" @tap.stop="">
|
|
<wanl-share :scrollAnimation="scrollAnimation" :shareTitle="goodsData.title"
|
|
:shareText="goodsData.description" :image="$wanlshop.oss(goodsData.image,50, 50)"
|
|
:href="common.appConfig.domain + '/pages/product/goods?id='+ goodsData.id +'&QRtype=goods'"
|
|
isReport @change="wanlShare" />
|
|
</view>
|
|
</view> -->
|
|
|
|
|
|
|
|
</view>
|
|
<!-- <view class="image-text_1 flex-row justify-between">
|
|
<text class="text-group_1">查看全部</text>
|
|
<image class="icon_4" referrerpolicy="no-referrer"
|
|
src="/static/lanhu_kechengxiangqingmulu/32abf597bb1d6f7c108813a8fa472960.png" />
|
|
</view> -->
|
|
</view>
|
|
|
|
</view>
|
|
|
|
<view class="section_4 flex-row" style="margin: 0;position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100rpx;
|
|
background-color: #f0f0f0;">
|
|
<!-- <view class="image-text_2 flex-col justify-between" @tap="showModal('share')">
|
|
<image class="icon_5" referrerpolicy="no-referrer"
|
|
src="/static/lanhu_kechengxiangqingmulu/aa83c3ee47d3a2604d5b1d453e21d0d8.png" />
|
|
<text class="text-group_2">分享</text>
|
|
</view> -->
|
|
|
|
<view class="image-text_3 flex-col justify-between" @tap="shoucang1">
|
|
<image class="icon_6" v-if="!shoucang"
|
|
src="/static/lanhu_kechengxiangqingmulu/02f3eef93d8ab189249aebc2d123e124.png" />
|
|
|
|
<image class="icon_6" v-if="shoucang" src="/static/lanhu_kechengxiangqingmulu/22.png" />
|
|
|
|
<text class="text-group_3" style="">收藏</text>
|
|
</view>
|
|
|
|
|
|
<view class="image-text_2 flex-col justify-between" @tap="showModal('share')">
|
|
|
|
</view>
|
|
|
|
|
|
|
|
|
|
<button class="button_1 flex-col" @tap="go(list.b.id)" v-if="list.buy == 0 && !is_buy">
|
|
<text class="text_12">￥{{list.b.price}}</text>
|
|
</button>
|
|
|
|
|
|
<button class="button_1 flex-col" v-if="list.buy == 1 || is_buy">
|
|
<text class="text_12">已购买</text>
|
|
</button>
|
|
|
|
</view>
|
|
|
|
</view>
|
|
|
|
</template>
|
|
<script>
|
|
import {
|
|
mapState
|
|
} from 'vuex';
|
|
export default {
|
|
data() {
|
|
return {
|
|
videoUrl: '',
|
|
poster: '',
|
|
poster2: '',
|
|
shoucang: '',
|
|
modalName: '',
|
|
url2: '',
|
|
maxDuration: 2, // 最大播放时长，单位：秒
|
|
pause: false, // 是否暂停视频播放
|
|
list: '',
|
|
is_buy: '',
|
|
vip: '',
|
|
list2: [],
|
|
activeTab: "介绍",
|
|
|
|
constants: {}
|
|
};
|
|
},
|
|
onLoad(id) {
|
|
if (id.is_buy == 1) {
|
|
this.is_buy = 1;
|
|
}
|
|
this.id = id.id
|
|
uni.setNavigationBarColor({
|
|
backgroundColor: '#802931', // 背景颜色
|
|
frontColor: '#ffffff' // 前景颜色（包括标题、返回图标等）
|
|
}),
|
|
this.getData()
|
|
this.getVip()
|
|
},
|
|
|
|
computed: {
|
|
...mapState(['user', 'statistics', 'common'])
|
|
},
|
|
methods: {
|
|
shoucang1() {
|
|
if (this.shoucang) {
|
|
this.shoucang = ''
|
|
} else {
|
|
this.shoucang = 1
|
|
}
|
|
this.$api.get({
|
|
url: '/wanlshop/data/shoucang',
|
|
data: {
|
|
id: this.id,
|
|
type: 1
|
|
},
|
|
success: res => {
|
|
|
|
}
|
|
});
|
|
},
|
|
getVip() {
|
|
if (this.user.id) {
|
|
this.$api.get({
|
|
url: '/wanlshop/data/getVip',
|
|
data: {
|
|
id: this.user.id
|
|
},
|
|
success: res => {
|
|
this.vip = res
|
|
console.log(4445, res)
|
|
}
|
|
});
|
|
}
|
|
},
|
|
hideElement(id) {
|
|
if (document.getElementById(id).style.display == 'none') {
|
|
document.getElementById(id).style.display = '';
|
|
} else {
|
|
document.getElementById(id).style.display = 'none';
|
|
}
|
|
|
|
},
|
|
|
|
// 弹出层
|
|
showModal(name) {
|
|
console.log(name)
|
|
this.modalName = name;
|
|
},
|
|
// 关闭弹出层
|
|
hideModal(name) {
|
|
if (name) {
|
|
this.showModal(name);
|
|
} else {
|
|
this.modalName = null;
|
|
}
|
|
},
|
|
// 分享回调
|
|
wanlShare(e) {
|
|
if (e) {
|
|
this.$wanlshop.auth(`/pages/user/complaint/complaint?id=${this.goodsData.id}&type=1`);
|
|
} else {
|
|
this.modalName = null;
|
|
}
|
|
},
|
|
|
|
bofang(mp4) {
|
|
// this.poster = this.poster2
|
|
this.videoUrl = mp4
|
|
this.url2 = mp4
|
|
|
|
console.log(this.videoUrl)
|
|
},
|
|
handleTimeUpdate(event) {
|
|
if (this.list.buy == 0 && !this.is_buy) {
|
|
if (event.detail.currentTime > 60) {
|
|
this.url2 = this.videoUrl
|
|
this.videoUrl = ''
|
|
this.$wanlshop.msg('试看60秒结束');
|
|
}
|
|
}
|
|
|
|
},
|
|
play(event) {
|
|
//我的学习
|
|
this.xuexi()
|
|
this.videoUrl = this.url2
|
|
this.poster = ''
|
|
},
|
|
go(id) {
|
|
|
|
uni.navigateTo({
|
|
url: '/pages/user/money/pay?groups=kecheng&&order_id=' + id
|
|
});
|
|
},
|
|
go1() {
|
|
uni.navigateTo({
|
|
url: '/pages/lanhu_renmaixiangqing/index?id=' + this.list.a.id
|
|
});
|
|
},
|
|
changeTab(tab) {
|
|
this.activeTab = tab;
|
|
},
|
|
xuexi() {
|
|
this.$api.get({
|
|
url: '/wanlshop/data/xuexi',
|
|
data: {
|
|
id: this.id
|
|
},
|
|
success: res => {
|
|
|
|
}
|
|
});
|
|
},
|
|
getData() {
|
|
this.$api.get({
|
|
url: '/wanlshop/data/getDetail',
|
|
data: {
|
|
id: this.id
|
|
},
|
|
success: res => {
|
|
console.log(44, res)
|
|
this.list = res
|
|
this.shoucang = this.list.e
|
|
this.poster = this.list.b.cover
|
|
this.poster2 = this.list.b.cover
|
|
this.videoUrl = this.list.d[0][0].mp4
|
|
this.url2 = this.list.d[0][0].mp4
|
|
}
|
|
});
|
|
},
|
|
}
|
|
};
|
|
</script>
|
|
<style lang='css'>
|
|
@import '../common/common.css';
|
|
@import './assets/style/index.rpx.css';
|
|
|
|
.active {
|
|
|
|
border-bottom: 3px solid #802931;
|
|
}
|
|
|
|
toast,
|
|
uni-toast {
|
|
z-index: 9999;
|
|
}
|
|
|
|
.cu-custom .cu-bar .search-form {
|
|
background-color: #fff;
|
|
}
|
|
|
|
.cu-custom .cu-bar {
|
|
background-color: #f3f3f3;
|
|
}
|
|
|
|
.cu-custom .bar-bg {
|
|
background-color: rgba(243, 243, 243, 0.96);
|
|
}
|
|
|
|
.cu-custom .cu-bar {
|
|
z-index: 99;
|
|
}
|
|
|
|
/* #ifdef MP */
|
|
.cu-custom .cu-bar .search-form {
|
|
margin: 0 0 0 25rpx;
|
|
}
|
|
|
|
/* #endif */
|
|
|
|
.cu-custom .cu-bar .nav .cu-item {
|
|
line-height: 70rpx;
|
|
height: 70rpx;
|
|
}
|
|
|
|
.swiper-box {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 100vw;
|
|
}
|
|
|
|
.swiper-box swiper {
|
|
width: 100%;
|
|
height: 100vw;
|
|
}
|
|
|
|
.swiper-box swiper swiper-item image {
|
|
width: 100%;
|
|
height: 100vw;
|
|
}
|
|
|
|
.swiper-box .indicator {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
padding: 0 25upx;
|
|
height: 40upx;
|
|
border-radius: 40upx;
|
|
font-size: 22upx;
|
|
position: absolute;
|
|
bottom: 20upx;
|
|
right: 20upx;
|
|
color: #fff;
|
|
background-color: rgba(0, 0, 0, 0.2);
|
|
}
|
|
</style> |