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

<template>
	<view class="container">
		<view class="detail">
			<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 v-html="info.content"></view>
			</block>

		</view>
		<view class="detail-btn" >
			<view @click="apply">在线报名</view>
		</view>

		<view class="modal">
			<u-popup v-model="showRegister" mode="bottom">
				<view class="modal-tip">提示</view>
				<view class="modal-content">
					<view>如您已是我方校友，请先绑定账号。</view>
					<view>如您还不是我方校友，请先注册。</view>
				</view>
				
				<view class="modal-btn">
					<u-button type="primary" @click="showBind = true,showRegister=false">绑定</u-button>
					<u-button type="primary" @click="toApply">注册报名</u-button>
				</view>
			</u-popup>
		</view>
		
		<view class="modal">
			<u-popup v-model="showBind" mode="bottom">
				<view class="modal-tip">提示</view>
				<view class="modal-content">
					<view>
						<u-input v-model="form.mobile" placeholder="手机号" type="number" :maxlength="11"/>
					</view>
					<view style="display: flex;justify-content: space-between;">
						<u-input v-model="form.code" placeholder="验证码"/> 
						<u-button type="primary" @click="getSmsCode">获取验证码</u-button>
					</view>
				</view>
				
				<view class="modal-btn">
					<u-button type="primary" @click="toBind">绑定</u-button>
				</view>
			</u-popup>
		</view>
	</view>
</template>

<script>
	export default {
		components: {

		},
		data() {
			return {
				hasMobile:false,
				showBind:false,
				form:{
					mobile:'',
					code:''
				},
				course_id:'',
				info: {},
				imgList: [],
				showRegister:false
			}
		},
		onLoad(options) {
			this.course_id = options.id
			this.getCourseDetail(options.id)
			let user = uni.getStorageSync("stbc_lifeData")?uni.getStorageSync("stbc_lifeData").vuex_user:{}
			if(!this.base.isNull(user.mobile)){
				this.hasMobile = true
			}else{
				this.hasMobile = false
			}
		},
		methods: {
			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
				}
			},
			// 是否有手机号，有则是学员， 没有就是游客。
			// 游客可以选择绑定  或  注册报名
			apply(){
				if(this.hasMobile){
					this.toApply()
				}else{
					this.showRegister = true
					// this.toRegister()
				}
			},
			// 去注册 其实就是直接跳过手机绑定 去课程报名更新自己的用户信息
			toRegister() {
				uni.navigateTo({
					url:'/packages/apply/register?id='+this.course_id
				})
			},
			//  直接去注册报名
			toApply() {
				// 直接去填写报名
				uni.navigateTo({
					url:'/packages/apply/index?id='+this.course_id
				})
			},
			
			// 获取验证码 绑定
			getSmsCode(){
				if(this.base.isNull(this.form.mobile)){
					this.base.toast('手机号码不能为空')
					return
				}
				if(!this.base.isMobile(this.form.mobile)){
					this.base.toast('手机号码错误')
					return
				}
				this.$u.api.sendSms({
					mobile:this.form.mobile
				}).then(res=>{
					this.base.toast("发送成功")
				})
			},
			//  绑定手机号 就是
			toBind(){
				if(this.base.isNull(this.form.mobile)){
					this.base.toast('手机号码不能为空')
					return
				}
				if(!this.base.isMobile(this.form.mobile)){
					this.base.toast('手机号码错误')
					return
				}
				if(this.base.isNull(this.form.code)){
					this.base.toast('验证码不能为空')
					return
				}
				this.$u.api.bindMobile({
					mobile:this.form.mobile,
					code:this.form.code,
					is_bind:this.form.is_bind
				}).then(res=>{
					this.base.toast("绑定成功")
					this.showBind = false
					uni.navigateTo({
						url:'/packages/apply/index?id='+this.course_id
					})
				})
				
			},

		}

	}
</script>

<style lang="scss" scoped>
	.container {
		.detail {
			width: 100%;
			padding-bottom: 120rpx;
			image {
				width: 100%;
			}
		}
		.detail-btn {
			width: 100%;
			position: fixed;
			left: 0;
			bottom: 0;
			padding: 20rpx 0;
			&>view {
				width: 70%;
				text-align: center;
				margin: 0 auto;
				color: #fff;
				background-color: #010296;
				border-radius: 10rpx;
				padding: 20rpx;
			}
		}
		.modal{
			&-tip{
				text-align: center;
				padding:30rpx;
				font-size: 28rpx;
			}
			&-content{
				height:300rpx;
				padding:0 30rpx;
			}
			&-btn{
				display: flex;
				justify-content: space-between;
				padding:30rpx;
				u-button{
					width:45%;
				}
			}
		}
	}
</style>