|
|
<template>
|
|
|
<view class="container">
|
|
|
<image class="cbg" :src="base.imgHost('course-bg.png')"></image>
|
|
|
<view v-if="!hasImg"></view>
|
|
|
<view v-else>
|
|
|
<view class="detail">
|
|
|
<!-- <view class="detail-title">{{info.name}}</view>
|
|
|
<view class="detail-time" v-if="info.start_date">
|
|
|
<u-icon name="clock"></u-icon>
|
|
|
<text>开课日期：{{info.start_date}} 至 {{info.end_date}}</text>
|
|
|
</view> -->
|
|
|
<block v-if="imgList.length>0">
|
|
|
<view v-for="item in imgList">
|
|
|
<image mode="widthFix" :src="item.url"></image>
|
|
|
</view>
|
|
|
</block>
|
|
|
<block v-else>
|
|
|
<view class="detail-noinfo">
|
|
|
<image mode="widthFix" :src="base.imgHost('mycourse-status.png')"></image>
|
|
|
<text>课程详情敬请期待...</text>
|
|
|
</view>
|
|
|
</block>
|
|
|
</view>
|
|
|
<view class="detail-btn" v-if="info.sign_status===10">
|
|
|
<view @click="toApply">
|
|
|
<image class="course-btn" :src="base.imgHost('course-btn.png')"></image>
|
|
|
<text>我要报名</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
<!-- 悬浮按钮：当不可报名且有url时显示 -->
|
|
|
<view class="floating-btn" v-if="info.sign_status !== 10 && info.url && info.url_title">
|
|
|
<view @click="openWebview" class="url-container">
|
|
|
<image class="url-bg" :src="base.imgHost('urlbtn.png')" mode="aspectFill"></image>
|
|
|
<text class="url-text">查看精彩回顾</text>
|
|
|
<!-- {{ info.url_title }} -->
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
|
|
|
<tabbar :currentPage="1"></tabbar>
|
|
|
<view class="modal">
|
|
|
<u-popup v-model="showRegister" mode="bottom">
|
|
|
<view>
|
|
|
<view class="modal-tip">提示</view>
|
|
|
<view class="modal-content">
|
|
|
<view>如您已是我方校友，请先绑定账号</view>
|
|
|
<view @click="goBind" class="modal-bind">
|
|
|
去绑定
|
|
|
</view>
|
|
|
<view>如您还不是我方校友，请先注册</view>
|
|
|
<view @click="toRegister" class="modal-register">
|
|
|
去注册
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
</u-popup>
|
|
|
</view>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import tabbar from '@/components/tabbar/tabbar.vue';
|
|
|
import {
|
|
|
ROOTPATH as baseUrl
|
|
|
} from "@/common/config.js"
|
|
|
export default {
|
|
|
components: {
|
|
|
tabbar,
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
hasMobile: false,
|
|
|
course_id: '',
|
|
|
info: {},
|
|
|
imgList: [],
|
|
|
showRegister: false,
|
|
|
hasImg: false,
|
|
|
sign_info: {},
|
|
|
newsUrl: ''
|
|
|
}
|
|
|
},
|
|
|
|
|
|
onShareAppMessage(res) {
|
|
|
return {
|
|
|
path: "/packages/course/detail?id=" + this.course_id, //这是为了传参 onload(data){let id=data.id;}
|
|
|
title: this.info.name,
|
|
|
imageUrl: '/static/share.jpg'
|
|
|
}
|
|
|
},
|
|
|
onShareTimeline() {
|
|
|
return {
|
|
|
path: "/packages/course/detail?id=" + this.course_id, //这是为了传参 onload(data){let id=data.id;}
|
|
|
title: this.info.name,
|
|
|
imageUrl: '/static/share.jpg'
|
|
|
}
|
|
|
},
|
|
|
onLoad(options) {
|
|
|
this.course_id = options.id
|
|
|
this.newsUrl = options.newsUrl?options.newsUrl:''
|
|
|
let token = uni.getStorageSync('stbc1_lifeData') ? uni.getStorageSync('stbc1_lifeData').vuex_token : ''
|
|
|
if (this.base.isNull(token)) {
|
|
|
this.getToken()
|
|
|
} else {
|
|
|
let user = uni.getStorageSync("stbc1_lifeData") ? uni.getStorageSync("stbc1_lifeData").vuex_user : {}
|
|
|
if (!this.base.isNull(user.mobile)) {
|
|
|
this.hasMobile = true
|
|
|
} else {
|
|
|
this.hasMobile = false
|
|
|
}
|
|
|
this.getCourseDetail(this.course_id)
|
|
|
}
|
|
|
},
|
|
|
onHide() {
|
|
|
this.showRegister = false
|
|
|
},
|
|
|
methods: {
|
|
|
async getToken() {
|
|
|
let that = this
|
|
|
const loginResult = await new Promise((resolve, reject) => {
|
|
|
uni.login({
|
|
|
provider: 'weixin',
|
|
|
success: (res) => {
|
|
|
resolve(res.code);
|
|
|
},
|
|
|
fail: (err) => {
|
|
|
console.error('uni.login失败:', err);
|
|
|
reject(err);
|
|
|
}
|
|
|
});
|
|
|
});
|
|
|
const tokenResult = await new Promise((resolve, reject) => {
|
|
|
this.$u.api.login({
|
|
|
code: loginResult
|
|
|
}).then(res1 => {
|
|
|
console.log("res1", res1)
|
|
|
uni.setStorageSync("stbc1_lifeData", {
|
|
|
'vuex_token': res1.token
|
|
|
})
|
|
|
resolve(res1.token);
|
|
|
}).catch(err => {
|
|
|
reject(err)
|
|
|
console.log('login-error:', JSON.stringify(err))
|
|
|
})
|
|
|
});
|
|
|
await this.getUserInfo(tokenResult)
|
|
|
await this.getCourseDetail(this.course_id)
|
|
|
},
|
|
|
async getUserInfo(tokenResult) {
|
|
|
let that = this
|
|
|
await this.$u.api.user().then(res2 => {
|
|
|
uni.setStorageSync("stbc1_lifeData", {
|
|
|
'vuex_token': tokenResult,
|
|
|
"vuex_user": res2.user
|
|
|
})
|
|
|
if (!that.base.isNull(res2.user.mobile)) {
|
|
|
that.hasMobile = true
|
|
|
} else {
|
|
|
that.hasMobile = false
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
|
|
|
async getCourseDetail(id) {
|
|
|
const res = await this.$u.api.courseDetail({
|
|
|
course_id: id
|
|
|
})
|
|
|
this.info = this.base.requestToForm(this.info, res)
|
|
|
if (res.publicize && res.publicize.length > 0) {
|
|
|
this.imgList = res.publicize
|
|
|
}
|
|
|
this.hasImg = true
|
|
|
let typeName = res.type_detail ? res.type_detail.name + " | " : ''
|
|
|
uni.setNavigationBarTitle({
|
|
|
title: typeName + res.name,
|
|
|
success: function() {
|
|
|
console.log('标题设置成功');
|
|
|
},
|
|
|
fail: function(err) {
|
|
|
console.error('标题设置失败', err);
|
|
|
}
|
|
|
});
|
|
|
},
|
|
|
|
|
|
// 是否有手机号，有则是学员， 没有就是游客。
|
|
|
// 游客可以选择绑定 或 注册报名
|
|
|
// 报名
|
|
|
async toApply() {
|
|
|
let that = this
|
|
|
// 我已报名该课程
|
|
|
if (this.info.my_user) {
|
|
|
const res = await this.$u.api.courseGetSign({
|
|
|
course_id: this.course_id
|
|
|
})
|
|
|
this.sign_info = res.detail
|
|
|
// 默认状态页
|
|
|
let url = '/packages/mycourse/courseStatus?id=' + this.course_id
|
|
|
// 审核通过
|
|
|
if (this.sign_info.status === 1) {
|
|
|
// 不需要付费 有群聊二维码进详情，没有进状态
|
|
|
if (this.info.is_fee === 0) {
|
|
|
if (!this.base.isNull(this.info.qun_image_id)) {
|
|
|
url = '/packages/course/freeDetail?id=' + this.course_id
|
|
|
}
|
|
|
} else {
|
|
|
// 付费 进详情
|
|
|
url = '/packages/mycourse/detail?id=' + this.course_id
|
|
|
}
|
|
|
} else {
|
|
|
// 待审核 不通过 备选 放弃 4取消 6黑名单
|
|
|
url = '/packages/mycourse/courseStatus?id=' + this.course_id
|
|
|
}
|
|
|
|
|
|
this.base.toast("您已报名该课程", 2000, function() {
|
|
|
setTimeout(function() {
|
|
|
uni.navigateTo({
|
|
|
url: url
|
|
|
})
|
|
|
}, 500)
|
|
|
})
|
|
|
return
|
|
|
}
|
|
|
// 收费的不限制报名人数 total没值也不限制
|
|
|
// 免费的限制报名人数
|
|
|
if (!this.info.is_fee && (this.info.total && this.info.total > 0)) {
|
|
|
// 报名人数已满
|
|
|
if (this.info.course_signs_count >= this.info.total) {
|
|
|
this.base.toast("当前报名人数已满")
|
|
|
return
|
|
|
}
|
|
|
}
|
|
|
// 游客就登录 或 注册
|
|
|
if (!this.hasMobile) {
|
|
|
this.showRegister = true
|
|
|
return
|
|
|
} else {
|
|
|
uni.navigateTo({
|
|
|
url: '/packages/apply/index?id=' + this.course_id
|
|
|
})
|
|
|
}
|
|
|
},
|
|
|
// 去绑定登录
|
|
|
goBind() {
|
|
|
uni.navigateTo({
|
|
|
url: '/packages/register/login?id=' + this.course_id
|
|
|
})
|
|
|
},
|
|
|
// 去注册
|
|
|
toRegister() {
|
|
|
uni.navigateTo({
|
|
|
url: '/packages/register/index?id=' + this.course_id
|
|
|
})
|
|
|
},
|
|
|
|
|
|
// 打开webview页面
|
|
|
openWebview() {
|
|
|
if (this.newsUrl) {
|
|
|
uni.navigateTo({
|
|
|
url: `/packages/webview/index?type=3&url=${this.newsUrl}`
|
|
|
})
|
|
|
return
|
|
|
}
|
|
|
if (this.info.url) {
|
|
|
uni.navigateTo({
|
|
|
url: `/packages/webview/index?type=3&url=${this.info.url}`
|
|
|
})
|
|
|
}
|
|
|
},
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
.container {
|
|
|
width: 100%;
|
|
|
height: 100vh;
|
|
|
|
|
|
.cbg {
|
|
|
position: absolute;
|
|
|
top: 0;
|
|
|
left: 0;
|
|
|
width: 100%;
|
|
|
height: 100vh;
|
|
|
}
|
|
|
|
|
|
.detail {
|
|
|
width: 100%;
|
|
|
height: 100vh;
|
|
|
overflow: scroll;
|
|
|
// padding: 40rpx 80rpx;
|
|
|
position: relative;
|
|
|
padding-bottom: 115rpx;
|
|
|
|
|
|
image {
|
|
|
width: 100%;
|
|
|
}
|
|
|
|
|
|
&-title {
|
|
|
font-size: 32rpx;
|
|
|
color: #000096;
|
|
|
text-align: center;
|
|
|
padding: 40rpx 0rpx;
|
|
|
}
|
|
|
|
|
|
&-time {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
padding-bottom: 40rpx;
|
|
|
color: rgba(0, 0, 0, 0.4);
|
|
|
justify-content: center;
|
|
|
|
|
|
&>text {
|
|
|
margin-left: 10rpx;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
&-noinfo {
|
|
|
width: calc(100% - 160rpx);
|
|
|
position: absolute;
|
|
|
top: calc(50% - 540rpx);
|
|
|
left: 50%;
|
|
|
transform: translate(-50%, 0%);
|
|
|
|
|
|
&>image {
|
|
|
width: 100%;
|
|
|
}
|
|
|
|
|
|
&>text {
|
|
|
font-size: 42rpx;
|
|
|
color: #000;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.detail-btn {
|
|
|
width: 100%;
|
|
|
height: 199rpx;
|
|
|
position: fixed;
|
|
|
left: 0;
|
|
|
bottom: 160rpx;
|
|
|
text-align: center;
|
|
|
|
|
|
&>view {
|
|
|
|
|
|
>image {
|
|
|
width: 580rpx;
|
|
|
height: 199rpx;
|
|
|
margin: 0 auto;
|
|
|
display: block;
|
|
|
}
|
|
|
|
|
|
>text {
|
|
|
position: absolute;
|
|
|
top: 50%;
|
|
|
left: 50%;
|
|
|
transform: translate(-50%, -50%);
|
|
|
color: #fff;
|
|
|
font-size: 32rpx;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.floating-btn {
|
|
|
position: fixed;
|
|
|
bottom: 180rpx;
|
|
|
right: 0rpx;
|
|
|
z-index: 10;
|
|
|
width: 100%;
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
.url-container {
|
|
|
width: 614rpx;
|
|
|
height: 172rpx;
|
|
|
position: relative;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
overflow: hidden;
|
|
|
padding: 40rpx 0;
|
|
|
|
|
|
.url-bg {
|
|
|
position: absolute;
|
|
|
top: 0;
|
|
|
left: 0;
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
z-index: 1;
|
|
|
}
|
|
|
|
|
|
.url-text {
|
|
|
font-size: 36rpx;
|
|
|
color: #28499a;
|
|
|
text-align: left;
|
|
|
position: relative;
|
|
|
z-index: 2;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.modal {
|
|
|
::v-deep .u-drawer-bottom {
|
|
|
border-radius: 40rpx;
|
|
|
}
|
|
|
|
|
|
&-tip {
|
|
|
text-align: center;
|
|
|
padding: 30rpx;
|
|
|
font-size: 32rpx;
|
|
|
}
|
|
|
|
|
|
&-content {
|
|
|
height: 450rpx;
|
|
|
padding: 0 30rpx;
|
|
|
font-size: 32rpx;
|
|
|
text-align: center;
|
|
|
|
|
|
&>view {
|
|
|
margin: 30rpx auto;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
&-bind {
|
|
|
width: 45%;
|
|
|
text-align: center;
|
|
|
margin: 0 auto;
|
|
|
color: #fff;
|
|
|
border-radius: 30rpx;
|
|
|
padding: 20rpx;
|
|
|
background: linear-gradient(to right, #e4cdb4, #c69c6d);
|
|
|
}
|
|
|
|
|
|
&-register {
|
|
|
width: 45%;
|
|
|
text-align: center;
|
|
|
margin: 0 auto;
|
|
|
color: #fff;
|
|
|
border-radius: 30rpx;
|
|
|
padding: 20rpx;
|
|
|
background: linear-gradient(to right, #5e5fbc, #0d0398);
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</style> |
