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

<template>
	<view class="container">
		<image class="cbg" :src="base.imgHost('common_bg.png')"></image>
		<view class="detail">
			<view class="detail-name">
				<text v-if="info.type">{{info.type_detail?info.type_detail.name+' | ':''}}</text>
				{{info.name}}
			</view>
			<view class="detail-time">课程日期：{{info.start_date?info.start_date:''}}至{{info.end_date?info.end_date:''}}
			</view>
			<view class="detail-tips">
				<view>请及时扫码进群</view>
			</view>
			<view class="detail-code">
				<image show-menu-by-longpress :src="info.qun_image?info.qun_image.url:''"></image>
			</view>
			<view class="detail-tips2">请长按扫码，添加班主任进群，及时了解详细信息</view>
			
			<!-- 显示通讯录 -->
			<view class="detail-btn" v-if="info.show_txl===1">
				<view @click="toTxl">
					<image class="course-btn" :src="base.imgHost('course-btn.png')"></image>
					<text>通讯录</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				course_id: '',
				info: {},
			}
		},

		// onShareAppMessage(res) {
		// 	return {
		// 		path: "/packages/course/freeDetail?id=" + this.course_id, //这是为了传参 onload(data){let id=data.id;}
		// 		title: this.info.name,
		// 		imageUrl: '/static/share.jpg'
		// 	}
		// },
		// onShareTimeline() {
		// 	return {
		// 		path: "/packages/course/freeDetail?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 {
				this.getCourseDetail(this.course_id)
			}
		},
		onHide() {},
		methods: {
			toTxl(){
				uni.navigateTo({
					url:'/packages/mycourse/courseTxl?id='+this.course_id+"&show_mobile="+this.info.show_mobile
				})
			},
			async getToken() {
				let that = this
				await uni.login({
					provider: 'weixin',
					success: (res) => {
						this.$u.api.login({
							code: res.code
						}).then(res1 => {
							uni.setStorageSync("stbc1_lifeData", {
								'vuex_token': res1.token
							})
							uni.request({
								url: baseUrl + '/api/mobile/user/get-user-info',
								header: {
									Authorization: `Bearer ${res1.token}`
								},
								method: "GET",
								success(res2) {
									uni.setStorageSync("stbc1_lifeData", {
										'vuex_token': res1.token,
										"vuex_user": res2.data.user
									})
									that.getCourseDetail(that.course_id)
								},
								fail(err) {
									console.log("err", err)
								}
							})
						}).catch(err => {
							console.log('login-error:', JSON.stringify(err))
						})
					},
					fail: (res) => {
						console.log("errtoken", JSON.stringify(res))
					}
				});
			},
			async getCourseDetail(id) {
				const res = await this.$u.api.courseDetail({
					course_id: id
				})
				this.info = this.base.requestToForm(this.info, res)
				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);
					}
				});
			},
		}

	}
</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: 115rpx 60rpx;
			padding-bottom: 115rpx;
			text-align: center;

			&>view {
				margin-bottom: 30rpx;
			}

			&-name {
				font-size: 32rpx;
				color: #333333;
			}

			&-time {
				font-size: 24rpx;
				color: #666666;
			}

			&-tips {

				&>view {
					padding: 10rpx 20rpx;
					background-color: #fff;
					color: #b08c6c;
					font-size: 28rpx;
					width: 260rpx;
					border-radius: 30rpx;
					margin: 0 auto;
					box-shadow: 0 -1rpx 20rpx #bed2ec;

				}
			}
			&-tips2{
				color:#999;
				font-size: 24rpx;
			}

			&-code {

				width: 400rpx;
				height: 400rpx;
				padding: 20rpx;
				background-color: #fff;
				border-radius: 10rpx;
				margin: 0 auto;
				box-shadow: 0 -1rpx 20rpx #bed2ec;

				image {
					width: 100%;
					height: 100%;
					border-radius: 10rpx;
				}
			}
			&-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;
					}
				}
			}
		}

	}
</style>