driverSchool/pages/index/courseInfo.vue

<template>
	<view class="content">
		<view class="container">
			<headers :titles="titles"><uni-icons @click="goback()" type="arrow-left" color="#000000"
					size="22px"></uni-icons></headers>
			<u-loadmore :status="status" v-if="show == true" />
		</view>

		<view class="kc-page">
			<image class="kc-page-img" :src="baseUrl + kcInfo.photo" mode=""></image>
			<view class="kc-page-main">
				<view class="kc-page-title" v-if="kcInfo.name == 1 ">
					成人班
				</view>
				<view class="kc-page-title" v-if="kcInfo.name == 2 ">
					学生班
				</view>
				<view class="kc-page-type">
					{{kcInfo.type || ''}}
				</view>
				<view class="bm-page-right-2">
					<view class="bm-page-right-zd">{{kcInfo.automatic || '' }}</view>
					<view class="bm-page-right-c2">{{kcInfo.license || ''}}</view>
					<view>{{kcInfo.dayStart || ''}} {{kcInfo.dayEnd || ''}}</view>
					<!-- <view>{{kcInfo.createTime}}</view> - <view>{{kcInfo.updateTime}}</view> -->
				</view>
				<view class="bm-page-price">
					￥{{kcInfo.price || ''}}
					<view style="margin-left: 10px;">
						支付定金 优惠{{kcInfo.favour || ''}}元
					</view>
				</view>
				<view class="xl-type">
					<view class="type">
						{{kcInfo.type || ''}}
					</view>
					<view class="_yn">
						{{kcInfo.license || ''}}
					</view>
				</view>
			</view>
		</view>

		<view class="info">
			<view class="box_">
				<u-parse :content="content"></u-parse>
			</view>
			<u-loadmore :status="status" v-if="show == true" />
		</view>

		<view class="bm">
			<view class="bm-left" @click="zxkf()">
				<image class="bm-left-img" src="../../static/imgs/ptkf.png" mode=""></image>
				<view class="bm-left-title">咨询客服</view>
			</view>
			<button @click="goBmPage()" class="bm-right">点击报名</button>
		</view>
	</view>
</template>

<script>
	import headers from '../../components/header/headers.vue'
	import tabbar from '../../components/tabbar/tabbar.vue'
	import constant from '../../utils/constant'
	import request from '@/utils/request.js'
	export default {
		data() {
			return {
				titles: "课程详情",
				msg: "1",
				List: [],
				show: false,
				status: 'loading',
				courseId: null,
				baseUrl: this.$baseUrl,
				bmTypeById: [],
				content: '',
				kcInfo: null,
				jxId: null,
			}
		},
		onLoad: function(option) {
			uni.showToast({
				title: '请点击报名',
				icon: 'none'
			})
			this.courseId = option.courseId,
				this.jxId = option.jxId
			console.log("驾校id", this.jxId, "课程id", this.courseId)
		},
		onShow() {
			// this.actList = ["1", "1", "1", "1", "1", ]
			// this.status = "nomore" 底部刷新结束
			this.getBmTypeById()
		},
		onPullDownRefresh() {
			console.log("刷新");
			uni.stopPullDownRefresh()
		},
		onReachBottom() {
			// this.show = true
			setTimeout(() => {
				console.log("加载执行");
			}, 2000)
		},
		// 发送好友
		onShareAppMessage(res) {
			return {
				title: this.titles,
				path: '/pages/index/index',
			}
		},
		// 分享朋友圈
		onShareTimeline(res) {
			return {
				title: this.titles,
				path: '/pages/index/index',
			}
		},
		components: {
			headers,
			tabbar
		},
		methods: {
			zxkf() {
				console.log("this.Phone:", this.kcInfo.phone);
				uni.makePhoneCall({
					phoneNumber: this.kcInfo.phone //仅为示例
				});
			},
			goback() {
				uni.navigateBack()
			},
			async getBmTypeById() {
				let res = await request({
					url: `/drivingSchool/system/driveSchoolCourse/list?id=` + this.courseId,
				})
				this.content = res.rows[0].describ,
					this.kcInfo = res.rows[0],
					console.log("课程详情", this.kcInfo)
			},
			goBmPage() {
				uni.navigateTo({
					url: `/pages/index/bmPage?courseId=${this.courseId}&jxId=${this.jxId}`
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.box_ {
		box-sizing: border-box;
		padding: 15px;
	}

	.kc-page {
		.kc-page-img {
			width: 100%;
			height: 400rpx;
		}

		.kc-page-main {
			padding: 20rpx 0;

			.xl-type {
				border-top: 15rpx solid #eee;
				border-bottom: 15rpx solid #eee;
				padding: 20rpx;

				.type {
					padding: 0 20rpx 20rpx 20rpx;
				}

				._yn {
					padding: 0 20rpx 20rpx 20rpx;
				}
			}

			.bm-page-price {
				padding: 20rpx;
				color: red;
				font-size: 34rpx;
				display: flex;
				align-items: center;

			}

			.bm-page-right-2 {
				padding: 0 20rpx 20rpx 20rpx;
				display: flex;
				font-size: 22rpx;
				border-bottom: 1rpx solid #eee;

				.bm-page-right-zd {
					background-color: rgba(94, 255, 153, 0.2);
				}

				.bm-page-right-c2 {
					background-color: rgba(255, 208, 112, 0.2);
				}

				view {
					text-align: center;
					border-radius: 12rpx;
					padding: 10rpx;
					margin-right: 10rpx;
				}

				&:last-child {
					margin-right: 20rpx;
				}
			}

			.kc-page-type {
				padding: 20rpx;
			}

			.kc-page-title {
				padding: 0 20rpx;
				font-weight: 800;
				font-size: 34rpx;
			}
		}
	}

	.bm {
		position: fixed;
		bottom: 0px;
		width: 100%;
		background-color: #fff;
		display: flex;
		justify-content: space-between;
		padding: 20rpx 30rpx;
		box-sizing: border-box;

		.bm-right {
			flex: 3;
			border-radius: 50rpx;
			background-color: #4aa76f;
			color: #fff;
		}

		.bm-left {
			flex: 1;
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-right: 20rpx;

			.bm-left-title {
				font-size: 24rpx;
				color: #4aa76f;
			}

			.bm-left-img {
				height: 40rpx;
				width: 40rpx;
			}
		}
	}

	.info {}

	.content {
		background: #f4f5f6;
		height: 100vh;
	}

	.container {
		width: 100%;
		background: #f4f5f6;
		box-sizing: border-box;
		padding-top: 88px;
	}
</style>