|
|
<template> |
|
|
<view class="course-detail-index"> |
|
|
<view class="swiper-box"> |
|
|
<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000"> |
|
|
<swiper-item> |
|
|
<view class="swiper-item"></view> |
|
|
</swiper-item> |
|
|
<swiper-item> |
|
|
<view class="swiper-item"></view> |
|
|
</swiper-item> |
|
|
</swiper> |
|
|
</view> |
|
|
<view class="course-info-box"> |
|
|
<view class="course-title">【一代天骄王者少年】禪易课程教学</view> |
|
|
<view class="tips-box"> |
|
|
<view class="tip-item blue">国学</view> |
|
|
<view class="tip-item orange">国学院</view> |
|
|
</view> |
|
|
</view> |
|
|
<view class="tab-box acea-row row-around" :class="isFixedTop?'fixed':''"> |
|
|
<view class="tab-item" :class="active == '0' ? 'tab-item-active' : ''" @click="handelScroll('content1','0')">简介</view> |
|
|
<view class="tab-item" :class="active == '1' ? 'tab-item-active' : ''" @click="handelScroll('content2','1')">课程安排</view> |
|
|
<view class="tab-item" :class="active == '2' ? 'tab-item-active' : ''" @click="handelScroll('content3','2')">相关推荐</view> |
|
|
</view> |
|
|
|
|
|
<view class="content-box" bindscroll="scroll"> |
|
|
<scroll-view scroll-y="true" scroll-with-animation="true" style="height:100%;" :scroll-into-view="toView" > |
|
|
<view class="teacher-info-box content" id="content1"> |
|
|
<view class="title-box acea-row row-middle"> |
|
|
<view class="left-line"></view> |
|
|
<span>主讲人介绍</span> |
|
|
</view> |
|
|
<view class="info-box"> |
|
|
<image src="../../static/img1.png"></image> |
|
|
<view class="name">刘老师</view> |
|
|
<view class="tip">禪易能量高级讲师</view> |
|
|
<view class="desc">抱朴书院孕育自华夏优秀传统文化，以“博学致用抱朴含虚”为院训，以“弘扬国粹，利益社会”为动力。</view> |
|
|
</view> |
|
|
</view> |
|
|
<view class="course-desc-box"> |
|
|
<view class="title-box acea-row row-middle"> |
|
|
<view class="left-line"></view> |
|
|
<span>课程简介</span> |
|
|
</view> |
|
|
<text class="desc"> |
|
|
抱朴书院孕育自华夏优秀传统文化，以“博学致用抱朴含虚”为院训，以“弘扬国粹，利益社会”为动力。\n |
|
|
抱朴书院孕育自华夏优秀传统文化，以“博学致用抱朴含虚”为院训，以“弘扬国粹，利益社会”为动力。 |
|
|
</text> |
|
|
</view> |
|
|
<view class="course-desc-box content" id="content2"> |
|
|
<view class="title-box acea-row row-middle"> |
|
|
<view class="left-line"></view> |
|
|
<span>课程表</span> |
|
|
</view> |
|
|
<view class="course-card-list"> |
|
|
<view class="course-card-item acea-row row-middle"> |
|
|
<image src="../../static/course-icon1.png"></image> |
|
|
<view class="label">课程时间</view> |
|
|
<view class="info">2021.5.31 - 2021.6.3</view> |
|
|
</view> |
|
|
<view class="course-card-item acea-row row-middle"> |
|
|
<image src="../../static/course-icon2.png"></image> |
|
|
<view class="label">课程地点</view> |
|
|
<view class="info">湖北 武汉</view> |
|
|
</view> |
|
|
<view class="course-card-item acea-row row-middle"> |
|
|
<image src="../../static/course-icon3.png"></image> |
|
|
<view class="label">签到时间</view> |
|
|
<view class="info">2021.5.31 - 2021.6.3</view> |
|
|
</view> |
|
|
<view class="course-card-item acea-row row-middle"> |
|
|
<image src="../../static/course-icon4.png"></image> |
|
|
<view class="label">报名截止</view> |
|
|
<view class="info">2021.5.31 - 2021.6.3</view> |
|
|
</view> |
|
|
</view> |
|
|
</view> |
|
|
|
|
|
<view class="course-desc-box" > |
|
|
<view class="title-box acea-row row-middle"> |
|
|
<view class="left-line"></view> |
|
|
<span>课程安排</span> |
|
|
</view> |
|
|
<text class="desc"> |
|
|
1.1、如何设定自己的吸财、守财的银行卡密码 |
|
|
1.2、如何设定自己的吸财、守财的银行卡号 |
|
|
1.3、如何设定自己的利财运、利婚姻、利子孙，名利双收手机号 |
|
|
1.4、如何选择自己用不发生车祸的车牌号 |
|
|
1.5、如何选择家族兴旺的门牌号 |
|
|
1.6、如何运用数字进行预测 |
|
|
</text> |
|
|
</view> |
|
|
<view class="recommend-box content" id="content3"> |
|
|
<view class="title-box acea-row row-middle row-center"> |
|
|
<view class="row-line"></view> |
|
|
<view class="title">相关推荐</view> |
|
|
<view class="row-line"></view> |
|
|
</view> |
|
|
<view class="knowledge-list"> |
|
|
<view class="knowledge-item acea-row" v-for="item in articleList" @click="toDetail(item.id)"> |
|
|
<view class="img-box"> |
|
|
<image :src="item.imageInput" mode=""></image> |
|
|
</view> |
|
|
<view class="knowledge-info-box"> |
|
|
<view class="title line1">{{item.title}}</view> |
|
|
<view class="intro line2">{{item.synopsis}}</view> |
|
|
<view class="type-box acea-row"> |
|
|
<view class="tip blue">{{item.chargeType == 0 ? '免费' : item.articleCharge}}</view> |
|
|
<view class="time">{{item.addTime}}</view> |
|
|
</view> |
|
|
</view> |
|
|
</view> |
|
|
<view class="knowledge-item acea-row"> |
|
|
<view class="img-box"> |
|
|
<image src="../../static/img1.png" mode=""></image> |
|
|
</view> |
|
|
<view class="knowledge-info-box"> |
|
|
<view class="title line1">《阴阳五行》一个人的阴阳五的阴阳五行…</view> |
|
|
<view class="time">2021-5-31-6.3 8:30-18:30</view> |
|
|
<view class="address">中国 武汉</view> |
|
|
<view class="type-box acea-row row-between row-middle"> |
|
|
<view class="price">￥3000</view> |
|
|
<view class="signin-btn red">去报名</view> |
|
|
</view> |
|
|
</view> |
|
|
</view> |
|
|
</view> |
|
|
</view> |
|
|
</scroll-view> |
|
|
</view> |
|
|
<view class="footer-box acea-row row-between-wrapper"> |
|
|
<view class="footer-left"> |
|
|
<view class="price"><span class="fz24">￥</span>199</view> |
|
|
</view> |
|
|
<view class="footer-right"> |
|
|
<view class="btn-box acea-row row-between-wrapper"> |
|
|
<view class="count-down"> |
|
|
<view>距离截止时间还剩</view> |
|
|
<view class="colR">03:23:28</view> |
|
|
</view> |
|
|
<view class="signin-btn" @click="signInClick">立即报名</view> |
|
|
</view> |
|
|
<!-- <view class="signin-btn call-btn" @click="call">联系服务老师</view> --> |
|
|
</view> |
|
|
</view> |
|
|
<view class="mask-box" v-if="dialog"> |
|
|
<view class="dialog-box"> |
|
|
<view class="close" @click="dialog = false">×</view> |
|
|
<view class="dialog-top acea-row-nowrap row-center-wrapper"> |
|
|
<image src="../../static/error-icon.png"></image> |
|
|
<view class="word">很遗憾，您的会员等级较低，无法报名该课程。请联系服务老师进行升级。</view> |
|
|
</view> |
|
|
<view class="dialog-btm"> |
|
|
<view class="l-box acea-row row-between-wrapper"> |
|
|
<view class="acea-row row-middle"> |
|
|
<image src="../../static/img1.png"></image> |
|
|
<view> |
|
|
<view>王小明</view> |
|
|
<view>15007992828</view> |
|
|
</view> |
|
|
</view> |
|
|
<view class="call-btn">拨打电话</view> |
|
|
</view> |
|
|
</view> |
|
|
</view> |
|
|
</view> |
|
|
</view> |
|
|
</template> |
|
|
|
|
|
<script> |
|
|
// import WucTab from '@/components/wuc-tab/wuc-tab.vue'; |
|
|
export default { |
|
|
data() { |
|
|
return { |
|
|
active: '0', |
|
|
toView: '', |
|
|
heightArr:[], |
|
|
tabInitTop:'', |
|
|
isFixedTop: false, |
|
|
dialog:false |
|
|
} |
|
|
}, |
|
|
onLoad() { |
|
|
//获取节点距离顶部的距离 |
|
|
uni.createSelectorQuery().select('.tab-box').boundingClientRect((res) => { |
|
|
console.log(res); |
|
|
if (res && res.top > 0) { |
|
|
var tabInitTop= res.top; |
|
|
this.tabInitTop= tabInitTop |
|
|
} |
|
|
}).exec(); |
|
|
}, |
|
|
mounted() { |
|
|
this.getHeightArr() |
|
|
}, |
|
|
methods: { |
|
|
signInClick(){ |
|
|
this.dialog = true |
|
|
}, |
|
|
handelScroll(id,idx){ |
|
|
uni.createSelectorQuery().select('#'+id).boundingClientRect(function(res){ |
|
|
uni.pageScrollTo({ |
|
|
scrollTop:res.top, |
|
|
duration: 300 |
|
|
}); |
|
|
}).exec() |
|
|
this.active = idx; |
|
|
this.toView = id |
|
|
}, |
|
|
getHeightArr(){ |
|
|
let h=0; |
|
|
let heightArr = []; |
|
|
//selectAll会选择所要含有该类名的盒子 |
|
|
uni.createSelectorQuery().selectAll('.content').boundingClientRect((rect) => { |
|
|
}).exec((res) => { |
|
|
console.log(res) |
|
|
res[0].forEach((item)=>{ |
|
|
h+=item.height; |
|
|
heightArr.push(h); |
|
|
}) |
|
|
this.heightArr = heightArr; |
|
|
}) |
|
|
}, |
|
|
onPageScroll(res) { |
|
|
let scrollTop = res.scrollTop; |
|
|
let scrollArr = this.heightArr; |
|
|
for (let i = 0; i < scrollArr.length; i++) { |
|
|
if (scrollTop >= 0 && scrollTop < scrollArr[0]) { |
|
|
this.active = 0; |
|
|
} else if (scrollTop >= (scrollArr[i - 1]) && scrollTop < scrollArr[i]) { |
|
|
this.active= i; |
|
|
} |
|
|
} |
|
|
var isSatisfy = scrollTop >= this.tabInitTop? true : false; |
|
|
//只有处于吸顶的临界值才会不相等 |
|
|
if (this.isFixedTop === isSatisfy) { |
|
|
return false; |
|
|
} |
|
|
this.isFixedTop = isSatisfy |
|
|
}, |
|
|
} |
|
|
} |
|
|
</script> |
|
|
|
|
|
<style scoped lang="less"> |
|
|
.course-detail-index{ |
|
|
width: 100%; |
|
|
box-sizing: border-box; |
|
|
.mask-box{ |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
background: rgba(0,0,0,.6); |
|
|
position: fixed; |
|
|
top: 0; |
|
|
.dialog-box{ |
|
|
width: 600rpx; |
|
|
border-radius: 12rpx; |
|
|
position: absolute; |
|
|
top: 50%; |
|
|
left: 50%; |
|
|
transform: translate(-50%,-50%); |
|
|
.close{ |
|
|
width: 38rpx; |
|
|
height: 38rpx; |
|
|
position: absolute; |
|
|
right: 12rpx; |
|
|
top: 12rpx; |
|
|
font-size: 36rpx; |
|
|
} |
|
|
.dialog-top{ |
|
|
width: 100%; |
|
|
height: 212rpx; |
|
|
box-sizing: border-box; |
|
|
padding: 30rpx 38rpx 0; |
|
|
background: linear-gradient(180deg, #FFE8E8 0%, #FFFFF8 100%); |
|
|
image{ |
|
|
width: 154rpx; |
|
|
height: 162rpx; |
|
|
margin-right: 12rpx; |
|
|
} |
|
|
.word{ |
|
|
width: calc(100% - 164rpx); |
|
|
height: 108rpx; |
|
|
font-size: 28rpx; |
|
|
color: #666; |
|
|
} |
|
|
} |
|
|
.dialog-btm{ |
|
|
background-color: #fff; |
|
|
padding: 30rpx 32rpx; |
|
|
color: #666; |
|
|
font-size: 28rpx; |
|
|
image{ |
|
|
width: 100rpx; |
|
|
height: 100rpx; |
|
|
border-radius: 25px; |
|
|
margin-right: 20rpx; |
|
|
} |
|
|
.call-btn{ |
|
|
width: 192rpx; |
|
|
height: 60rpx; |
|
|
background: #ECEFFD; |
|
|
border-radius: 12rpx; |
|
|
text-align: center; |
|
|
line-height: 60rpx; |
|
|
color: #6E85EB; |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
.swiper-box{ |
|
|
width: 100%; |
|
|
height: 340rpx; |
|
|
swiper{ |
|
|
height: 100%; |
|
|
} |
|
|
} |
|
|
.course-info-box{ |
|
|
box-sizing: border-box; |
|
|
padding: 30rpx 30rpx 50rpx; |
|
|
background: #fff; |
|
|
.course-title{ |
|
|
font-size: 40rpx; |
|
|
font-weight: 500; |
|
|
color: #333333; |
|
|
line-height: 56rpx; |
|
|
margin: 0rpx 0 20rpx; |
|
|
} |
|
|
.tips-box{ |
|
|
display: flex; |
|
|
.tip-item{ |
|
|
min-width: 60rpx; |
|
|
height: 34rpx; |
|
|
text-align: center; |
|
|
line-height: 34rpx; |
|
|
font-size: 24rpx; |
|
|
margin-left: 20rpx; |
|
|
padding: 0 5rpx; |
|
|
} |
|
|
.blue{ |
|
|
color: #6E85EB; |
|
|
border: 1px solid #6E85EB; |
|
|
background: #EDEFF8; |
|
|
} |
|
|
.orange{ |
|
|
color: #EF644E; |
|
|
border: 1px solid #EF644E; |
|
|
background: #FFF4F2; |
|
|
} |
|
|
} |
|
|
} |
|
|
.tab-box{ |
|
|
white-space: nowrap; |
|
|
width: 100%; |
|
|
background: #fff; |
|
|
padding: 18rpx 34rpx 0; |
|
|
.tab-item{ |
|
|
width: 33%; |
|
|
text-align: center; |
|
|
display: inline-block; |
|
|
padding-bottom: 18rpx; |
|
|
font-size: 32rpx; |
|
|
color: #222; |
|
|
} |
|
|
.tab-item-active{ |
|
|
font-size: 40rpx; |
|
|
font-weight: bold; |
|
|
border-bottom: 4rpx solid #EB5744; |
|
|
} |
|
|
} |
|
|
.fixed{ |
|
|
position: -webkit-sticky; |
|
|
position: sticky; |
|
|
top: 0; |
|
|
z-index: 99; |
|
|
} |
|
|
|
|
|
.content-box{ |
|
|
width: 100%; |
|
|
box-sizing: border-box; |
|
|
background: #F5F6F7; |
|
|
padding: 24rpx 22rpx; |
|
|
.teacher-info-box,.course-desc-box{ |
|
|
width: 100%; |
|
|
background:#fff; |
|
|
border-radius: 8rpx; |
|
|
padding: 18rpx 24rpx 30rpx; |
|
|
margin-bottom: 20rpx; |
|
|
} |
|
|
.desc{ |
|
|
text-indent: 2em; |
|
|
font-size: 28rpx; |
|
|
color: #666666; |
|
|
line-height: 24px; |
|
|
} |
|
|
.info-box{ |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
image{ |
|
|
width: 100rpx; |
|
|
height: 100rpx; |
|
|
border-radius: 25px; |
|
|
} |
|
|
.name{ |
|
|
font-size: 32rpx; |
|
|
color: #3C464F; |
|
|
line-height: 44rpx; |
|
|
} |
|
|
.tip{ |
|
|
font-size: 24rpx; |
|
|
color: #999999; |
|
|
line-height: 34px; |
|
|
} |
|
|
} |
|
|
.title-box{ |
|
|
font-size: 36rpx; |
|
|
font-weight: bold; |
|
|
color: #3C464F; |
|
|
line-height: 50rpx; |
|
|
margin-bottom: 20rpx; |
|
|
.left-line{ |
|
|
width: 6rpx; |
|
|
height: 32rpx; |
|
|
background-color: #EB5744; |
|
|
margin-right: 16rpx; |
|
|
} |
|
|
} |
|
|
.course-card-item{ |
|
|
font-size: 32rpx; |
|
|
image{ |
|
|
width: 30rpx; |
|
|
height: 30rpx; |
|
|
} |
|
|
.label{ |
|
|
color: #999999; |
|
|
line-height: 34rpx; |
|
|
margin: 0 32rpx 0 18rpx; |
|
|
} |
|
|
.info{ |
|
|
color: #666666; |
|
|
line-height: 34px; |
|
|
} |
|
|
} |
|
|
.recommend-box{ |
|
|
.title-box{ |
|
|
font-size: 32rpx; |
|
|
color: #EB5744; |
|
|
.title{ |
|
|
margin: 0 10rpx; |
|
|
} |
|
|
.row-line{ |
|
|
width: 36rpx; |
|
|
height: 2rpx; |
|
|
border: 2rpx solid #EB5744; |
|
|
} |
|
|
} |
|
|
.knowledge-list { |
|
|
width: 100%; |
|
|
.knowledge-item { |
|
|
background: #fff; |
|
|
padding: 32rpx; |
|
|
.img-box { |
|
|
width: 204rpx; |
|
|
height: 200rpx; |
|
|
margin-right: 30rpx; |
|
|
image { |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
} |
|
|
} |
|
|
.knowledge-info-box { |
|
|
width: calc(100% - 234rpx); |
|
|
.title { |
|
|
font-size: 28rpx; |
|
|
color: #333; |
|
|
font-size: 500; |
|
|
line-height: 40rpx; |
|
|
} |
|
|
.time,.address{ |
|
|
color: #999; |
|
|
font-size: 24rpx; |
|
|
margin-top: 5rpx; |
|
|
line-height: 34rpx; |
|
|
} |
|
|
.intro { |
|
|
font-size: 28rpx; |
|
|
color: #999999; |
|
|
line-height: 40rpx; |
|
|
margin: 8rpx 0 36rpx; |
|
|
} |
|
|
.type-box { |
|
|
font-size: 24rpx; |
|
|
color: #999; |
|
|
margin-top: 28rpx; |
|
|
.price{ |
|
|
font-size: 36rpx; |
|
|
color: #EA533E; |
|
|
font-weight: 600; |
|
|
} |
|
|
.signin-btn{ |
|
|
width: 156rpx; |
|
|
height: 60rpx; |
|
|
text-align: center; |
|
|
line-height: 60rpx; |
|
|
background: #FFEAE7; |
|
|
border-radius: 12rpx; |
|
|
font-size: 32rpx; |
|
|
} |
|
|
.red{ |
|
|
background: #FFEAE7; |
|
|
color: #EE7060; |
|
|
} |
|
|
.blue { |
|
|
color: #6E85EB; |
|
|
background: #ECEFFD; |
|
|
} |
|
|
.yellow { |
|
|
color: #F99C10; |
|
|
background: #FFEDCC; |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
.footer-box{ |
|
|
width: 100%; |
|
|
padding: 24rpx 26rpx 66rpx 44rpx; |
|
|
background: #fff; |
|
|
.price{ |
|
|
font-size: 44rpx; |
|
|
color: #EA533E; |
|
|
} |
|
|
.fz24{ |
|
|
font-size: 24rpx; |
|
|
} |
|
|
.footer-right{ |
|
|
.btn-box{ |
|
|
text-align: center; |
|
|
width: 410rpx; |
|
|
height: 80rpx; |
|
|
border-radius: 44px; |
|
|
border: 2rpx solid #EB5744; |
|
|
box-sizing: border-box; |
|
|
overflow: hidden; |
|
|
.count-down{ |
|
|
width: calc(100% - 178rpx); |
|
|
text-align: center; |
|
|
font-size: 24rpx; |
|
|
color: #999; |
|
|
} |
|
|
.colR{ |
|
|
color: #EB5744; |
|
|
} |
|
|
.signin-btn{ |
|
|
width: 178rpx; |
|
|
height: 100%; |
|
|
line-height: 84rpx; |
|
|
font-size: 32rpx; |
|
|
color: #fff; |
|
|
background: #EB5744; |
|
|
} |
|
|
} |
|
|
.call-btn{ |
|
|
width: 268rpx; |
|
|
height: 80rpx; |
|
|
background: #F99C10; |
|
|
border-radius: 44rpx; |
|
|
text-align: center; |
|
|
line-height: 80rpx; |
|
|
color: #fff; |
|
|
} |
|
|
} |
|
|
|
|
|
} |
|
|
} |
|
|
</style>
|
|
|
|
