|
|
|
|
@ -1,20 +1,18 @@
|
|
|
|
|
<template> |
|
|
|
|
<view class="course-detail-index"> |
|
|
|
|
<view v-if="$store.getters.token || userInfo.uid" class="content"> |
|
|
|
|
<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 v-for="(item,index) in detail.imageArr" :key="index"> |
|
|
|
|
<view class="swiper-item"><image :src="item" mode=""></image></view> |
|
|
|
|
</swiper-item> |
|
|
|
|
</swiper> |
|
|
|
|
</view> |
|
|
|
|
<view class="course-info-box"> |
|
|
|
|
<view class="course-title">【一代天骄王者少年】禪易课程教学</view> |
|
|
|
|
<view class="course-title">{{detail.courseName}}</view> |
|
|
|
|
<view class="tips-box"> |
|
|
|
|
<view class="tip-item blue">国学</view> |
|
|
|
|
<view class="tip-item orange">国学院</view> |
|
|
|
|
<view class="tip-item blue">{{detail.categoryName}}</view> |
|
|
|
|
<!-- <view class="tip-item orange">国学院</view> --> |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
<view class="tab-box acea-row row-around" :class="isFixedTop?'fixed':''"> |
|
|
|
|
@ -30,22 +28,21 @@
|
|
|
|
|
<view class="left-line"></view> |
|
|
|
|
<span>主讲人介绍</span> |
|
|
|
|
</view> |
|
|
|
|
<view class="info-box"> |
|
|
|
|
<image src="../../static/img1.png"></image> |
|
|
|
|
<view class="name">刘老师</view> |
|
|
|
|
<scroll-view class="scroll-view_H" scroll-x="true"> |
|
|
|
|
<view class="info-box" v-for="(item,index) in detail.masterDtos" :key="index"> |
|
|
|
|
<image :src="item.photoPath"></image> |
|
|
|
|
<view class="name">{{item.name}}</view> |
|
|
|
|
<view class="tip">禪易能量高级讲师</view> |
|
|
|
|
<view class="desc">抱朴书院孕育自华夏优秀传统文化，以“博学致用抱朴含虚”为院训，以“弘扬国粹，利益社会”为动力。</view> |
|
|
|
|
<view class="desc">{{item.introduction}}</view> |
|
|
|
|
</view> |
|
|
|
|
</scroll-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> |
|
|
|
|
<text class="desc">{{item.courseIntroduce}}</text> |
|
|
|
|
</view> |
|
|
|
|
<view class="course-desc-box content" id="content2"> |
|
|
|
|
<view class="title-box acea-row row-middle"> |
|
|
|
|
@ -56,39 +53,34 @@
|
|
|
|
|
<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 class="info">{{detail.courseStartTime}}</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 class="info">{{detail.coursePlace}}</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 class="info">{{detail.enterStartTime}}</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 class="info">{{detail.signEndTime}}</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 class="plan-box acea-row-nowrap" v-for="(item,index) in detail.courseScheduleList" :key="index"> |
|
|
|
|
<text class="plan-time">{{item.courseDate.split(' ')[0]}}</text> |
|
|
|
|
<text>{{item.courseContent}}</text> |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
<view class="recommend-box content" id="content3"> |
|
|
|
|
<view class="title-box acea-row row-middle row-center"> |
|
|
|
|
@ -97,29 +89,16 @@
|
|
|
|
|
<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="knowledge-item acea-row" v-for="(item,index) in detail.similarCourseList" :key="index" @click="toDetail(item.id)"> |
|
|
|
|
<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="title line1">{{item.courseName}}</view> |
|
|
|
|
<view class="time">{{setDate(item.courseStartTime)}}-{{setDate(item.courseEndTime)}}</view> |
|
|
|
|
<view class="address">{{item.coursePlace}}</view> |
|
|
|
|
<view class="type-box acea-row row-between row-middle"> |
|
|
|
|
<view class="price">￥3000</view> |
|
|
|
|
<view class="price">￥{{item.courseCharge}}</view> |
|
|
|
|
<view class="signin-btn red">去报名</view> |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
@ -130,72 +109,185 @@
|
|
|
|
|
</view> |
|
|
|
|
<view class="footer-box acea-row row-between-wrapper"> |
|
|
|
|
<view class="footer-left"> |
|
|
|
|
<view class="price"><span class="fz24">￥</span>199</view> |
|
|
|
|
<view class="price"><span class="fz24">￥</span>{{detail.courseCharge}}</view> |
|
|
|
|
</view> |
|
|
|
|
<view class="footer-right"> |
|
|
|
|
<view class="btn-box acea-row row-between-wrapper"> |
|
|
|
|
<view class="btn-box acea-row row-between-wrapper" v-if="detail.haveSeller && !detail.enterState"> |
|
|
|
|
<view class="count-down"> |
|
|
|
|
<view>距离截止时间还剩</view> |
|
|
|
|
<view class="colR">03:23:28</view> |
|
|
|
|
<uni-countdown color="#EB5744" :day="day" :hour="hour" :minute="minute" :second="second" /> |
|
|
|
|
</view> |
|
|
|
|
<view class="signin-btn" @click="signInClick">立即报名</view> |
|
|
|
|
</view> |
|
|
|
|
<!-- <view class="signin-btn call-btn" @click="call">联系服务老师</view> --> |
|
|
|
|
<view class="signin-btn call-btn" v-if="detail.enterState" >已报名</view> |
|
|
|
|
<view class="signin-btn call-btn" @click="signInClick" v-if="userInfo.phone && !detail.haveSeller">联系服务老师</view> |
|
|
|
|
<!-- #ifdef MP-WEIXIN --> |
|
|
|
|
<button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" v-if="userInfo.phone == '' && detail.haveSeller == 0" class="binding signin-btn call-btn" v-else> |
|
|
|
|
<text>联系服务老师2</text> |
|
|
|
|
</button> |
|
|
|
|
<!-- #endif --> |
|
|
|
|
|
|
|
|
|
<!-- #ifndef MP-WEIXIN --> |
|
|
|
|
<button class="binding" @click="goBindPhone()" v-if="userInfo.phone == '' && detail.haveSeller == 0"> |
|
|
|
|
<text>联系服务老师</text> |
|
|
|
|
</button> |
|
|
|
|
<!-- #endif --> |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
<view class="mask-box" v-if="dialog"> |
|
|
|
|
<view class="mask-box" v-if="maskDialog"> |
|
|
|
|
<view class="dialog-box"> |
|
|
|
|
<view class="close" @click="dialog = false">×</view> |
|
|
|
|
<view class="close" @click="closeDialog()">×</view> |
|
|
|
|
<view class="dialog-top acea-row-nowrap row-center-wrapper"> |
|
|
|
|
<image src="../../static/error-icon.png"></image> |
|
|
|
|
<view class="word">很遗憾，您的会员等级较低，无法报名该课程。请联系服务老师进行升级。</view> |
|
|
|
|
<view class="word">{{teacher.msg}}</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> |
|
|
|
|
<image :src="teacher.imgPath"></image> |
|
|
|
|
<view> |
|
|
|
|
<view>王小明</view> |
|
|
|
|
<view>15007992828</view> |
|
|
|
|
<view>{{teacher.name}}</view> |
|
|
|
|
<view>{{teacher.phone}}</view> |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
<view class="call-btn" @click="call">拨打电话</view> |
|
|
|
|
</view> |
|
|
|
|
<view class="call-btn">拨打电话</view> |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
<Authorization v-else /> |
|
|
|
|
</view> |
|
|
|
|
</template> |
|
|
|
|
|
|
|
|
|
<script> |
|
|
|
|
// import WucTab from '@/components/wuc-tab/wuc-tab.vue'; |
|
|
|
|
import { mapState, mapGetters, mapMutations, mapActions } from 'vuex' |
|
|
|
|
import { getCourseDetail ,enterCourse } from '@/api/knowledge'; |
|
|
|
|
import Authorization from '@/pages/authorization/index' |
|
|
|
|
export default { |
|
|
|
|
components: { |
|
|
|
|
Authorization, |
|
|
|
|
}, |
|
|
|
|
data() { |
|
|
|
|
return { |
|
|
|
|
id: '', |
|
|
|
|
detail:{courseScheduleList:[]}, |
|
|
|
|
active: '0', |
|
|
|
|
toView: '', |
|
|
|
|
heightArr:[], |
|
|
|
|
tabInitTop:'', |
|
|
|
|
isFixedTop: false, |
|
|
|
|
dialog:false |
|
|
|
|
maskDialog:false, |
|
|
|
|
day:'', |
|
|
|
|
hour:'', |
|
|
|
|
minute:'', |
|
|
|
|
second:'', |
|
|
|
|
teacher:{} |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
computed: mapGetters(['userInfo']), |
|
|
|
|
onLoad() { |
|
|
|
|
console.log(this.userInfo,'11') |
|
|
|
|
//获取节点距离顶部的距离 |
|
|
|
|
uni.createSelectorQuery().select('.tab-box').boundingClientRect((res) => { |
|
|
|
|
console.log(res); |
|
|
|
|
if (res && res.top > 0) { |
|
|
|
|
var tabInitTop= res.top; |
|
|
|
|
this.tabInitTop= tabInitTop |
|
|
|
|
} |
|
|
|
|
}).exec(); |
|
|
|
|
this.courseId = this.$yroute.query.id; |
|
|
|
|
this.getDetail() |
|
|
|
|
}, |
|
|
|
|
mounted() { |
|
|
|
|
this.getHeightArr() |
|
|
|
|
}, |
|
|
|
|
methods: { |
|
|
|
|
getPhoneNumber: function(e) { |
|
|
|
|
let thit = this |
|
|
|
|
console.log(e) |
|
|
|
|
// 判断一下这里是不是小程序 如果是小程序，走获取微信手机号进行绑定 |
|
|
|
|
if (e.mp.detail.errMsg == 'getPhoneNumber:ok') { |
|
|
|
|
uni.showLoading({ |
|
|
|
|
title: '绑定中', |
|
|
|
|
}) |
|
|
|
|
wxappBindingPhone({ |
|
|
|
|
encryptedData: e.mp.detail.encryptedData, |
|
|
|
|
iv: e.mp.detail.iv, |
|
|
|
|
}) |
|
|
|
|
.then(res => { |
|
|
|
|
// this.User(); |
|
|
|
|
thit.$store.dispatch('userInfo', true) |
|
|
|
|
uni.hideLoading() |
|
|
|
|
uni.showToast({ |
|
|
|
|
title: res.msg, |
|
|
|
|
icon: 'success', |
|
|
|
|
duration: 2000, |
|
|
|
|
}) |
|
|
|
|
}) |
|
|
|
|
.catch(error => { |
|
|
|
|
uni.hideLoading() |
|
|
|
|
thit.$store.dispatch('userInfo', true) |
|
|
|
|
uni.showToast({ |
|
|
|
|
title: error.msg || error.response.data.msg || error.response.data.message, |
|
|
|
|
icon: 'none', |
|
|
|
|
duration: 2000, |
|
|
|
|
}) |
|
|
|
|
}) |
|
|
|
|
} else { |
|
|
|
|
uni.showToast({ |
|
|
|
|
title: '已拒绝授权', |
|
|
|
|
icon: 'none', |
|
|
|
|
duration: 2000, |
|
|
|
|
}) |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
setDate(t){ |
|
|
|
|
let str = t.split(" ")[0].split("-")[1] + "." + t.split(" ")[0].split("-")[2] |
|
|
|
|
return str |
|
|
|
|
}, |
|
|
|
|
toDetail(id){ |
|
|
|
|
this.$yrouter.push({ |
|
|
|
|
path: '/pages/course/detail', |
|
|
|
|
query: { |
|
|
|
|
id:id, |
|
|
|
|
}, |
|
|
|
|
}) |
|
|
|
|
}, |
|
|
|
|
getDetail(){ |
|
|
|
|
let nowTime = Date.parse(new Date())/1000; |
|
|
|
|
getCourseDetail({"id":this.courseId,"uid":this.userInfo.uid}).then((res)=>{ |
|
|
|
|
this.detail = res.data |
|
|
|
|
let endTime = Date.parse(new Date(res.data.signEndTime))/1000 |
|
|
|
|
this.times = endTime - nowTime; |
|
|
|
|
this.day = Math.floor(this.times / (60 * 60 * 24)); |
|
|
|
|
this.hour = Math.floor(this.times / (60 * 60)) - (this.day * 24); |
|
|
|
|
this.minute = Math.floor(this.times / 60) - (this.day * 24 * 60) - (this.hour * 60); |
|
|
|
|
this.second = Math.floor(this.times) - (this.day * 24 * 60 * 60) - (this.hour * 60 * 60) - (this.minute * 60); |
|
|
|
|
}) |
|
|
|
|
}, |
|
|
|
|
signInClick(){ |
|
|
|
|
this.dialog = true |
|
|
|
|
enterCourse({courseId:this.courseId}).then((res)=>{ |
|
|
|
|
if(res.data.state == 0){ |
|
|
|
|
this.maskDialog = true |
|
|
|
|
this.teacher = res.data |
|
|
|
|
} else if(res.data.state == 1){ |
|
|
|
|
uni.showToast({ |
|
|
|
|
title: res.data.msg, |
|
|
|
|
duration: 2000, |
|
|
|
|
type: "success" |
|
|
|
|
}); |
|
|
|
|
this.getDetail() |
|
|
|
|
} |
|
|
|
|
}) |
|
|
|
|
}, |
|
|
|
|
call(){ |
|
|
|
|
uni.makePhoneCall({ |
|
|
|
|
phoneNumber: this.teacher.phone |
|
|
|
|
}); |
|
|
|
|
}, |
|
|
|
|
closeDialog(){ |
|
|
|
|
this.maskDialog = false |
|
|
|
|
}, |
|
|
|
|
handelScroll(id,idx){ |
|
|
|
|
uni.createSelectorQuery().select('#'+id).boundingClientRect(function(res){ |
|
|
|
|
@ -213,7 +305,7 @@
|
|
|
|
|
//selectAll会选择所要含有该类名的盒子 |
|
|
|
|
uni.createSelectorQuery().selectAll('.content').boundingClientRect((rect) => { |
|
|
|
|
}).exec((res) => { |
|
|
|
|
console.log(res) |
|
|
|
|
// console.log(res) |
|
|
|
|
res[0].forEach((item)=>{ |
|
|
|
|
h+=item.height; |
|
|
|
|
heightArr.push(h); |
|
|
|
|
@ -238,6 +330,9 @@
|
|
|
|
|
} |
|
|
|
|
this.isFixedTop = isSatisfy |
|
|
|
|
}, |
|
|
|
|
onHide() { |
|
|
|
|
clearInterval(this.timer); |
|
|
|
|
}, |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
</script> |
|
|
|
|
@ -255,6 +350,7 @@
|
|
|
|
|
.dialog-box{ |
|
|
|
|
width: 600rpx; |
|
|
|
|
border-radius: 12rpx; |
|
|
|
|
overflow: hidden; |
|
|
|
|
position: absolute; |
|
|
|
|
top: 50%; |
|
|
|
|
left: 50%; |
|
|
|
|
@ -313,6 +409,14 @@
|
|
|
|
|
height: 340rpx; |
|
|
|
|
swiper{ |
|
|
|
|
height: 100%; |
|
|
|
|
.swiper-item{ |
|
|
|
|
width: 100%; |
|
|
|
|
height: 100%; |
|
|
|
|
image{ |
|
|
|
|
width: 100%; |
|
|
|
|
height: 100%; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.course-info-box{ |
|
|
|
|
@ -393,26 +497,35 @@
|
|
|
|
|
color: #666666; |
|
|
|
|
line-height: 24px; |
|
|
|
|
} |
|
|
|
|
.scroll-view_H{ |
|
|
|
|
white-space: nowrap; |
|
|
|
|
width: 100%; |
|
|
|
|
} |
|
|
|
|
.info-box{ |
|
|
|
|
display: flex; |
|
|
|
|
flex-direction: column; |
|
|
|
|
align-items: center; |
|
|
|
|
justify-content: center; |
|
|
|
|
width: 100%; |
|
|
|
|
display: inline-block; |
|
|
|
|
text-align: center; |
|
|
|
|
image{ |
|
|
|
|
width: 100rpx; |
|
|
|
|
height: 100rpx; |
|
|
|
|
border-radius: 25px; |
|
|
|
|
} |
|
|
|
|
.name{ |
|
|
|
|
width: 100%; |
|
|
|
|
font-size: 32rpx; |
|
|
|
|
color: #3C464F; |
|
|
|
|
line-height: 44rpx; |
|
|
|
|
} |
|
|
|
|
.tip{ |
|
|
|
|
width: 100%; |
|
|
|
|
font-size: 24rpx; |
|
|
|
|
color: #999999; |
|
|
|
|
line-height: 34px; |
|
|
|
|
} |
|
|
|
|
.desc{ |
|
|
|
|
width: 100%; |
|
|
|
|
white-space: pre-wrap; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.title-box{ |
|
|
|
|
font-size: 36rpx; |
|
|
|
|
@ -427,6 +540,16 @@
|
|
|
|
|
margin-right: 16rpx; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.plan-box{ |
|
|
|
|
font-size: 28rpx; |
|
|
|
|
color: #666; |
|
|
|
|
line-height: 32rpx; |
|
|
|
|
margin-bottom: 12rpx; |
|
|
|
|
.plan-time{ |
|
|
|
|
width: 170rpx; |
|
|
|
|
margin-right: 22rpx; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.course-card-item{ |
|
|
|
|
font-size: 32rpx; |
|
|
|
|
image{ |
|
|
|
|
@ -572,6 +695,7 @@
|
|
|
|
|
text-align: center; |
|
|
|
|
line-height: 80rpx; |
|
|
|
|
color: #fff; |
|
|
|
|
font-size: 30rpx; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
