sz-kjsxy-wx-new/packages/course/detail.vue

<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: {}
			}
		},

		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
			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.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>