sz-kjsxy-wx-new/packages/apply/index.vue

<template>
	<view class="container">
		<image class="cbg" src="../../static/common_bg.png"></image>
		<!-- <u-divider>个人信息</u-divider> -->
		<view class="wrap">
			<u-form :model="form" :label-width="140" ref="uForm" :label-align="'left'" error-type="toast">
				<u-form-item label="姓名" prop="name" required><u-input v-model="form.username" /></u-form-item>
				<u-form-item label="性别" prop="sex" required><u-input @click="showSex = true" v-model="form.sex"
						type="select" /></u-form-item>
				<u-form-item label="身份证号" prop="idcard" required><u-input type="idcard"
						v-model="form.idcard" /></u-form-item>
				<u-form-item label="手机号码" prop="mobile" required><u-input type="number"
						v-model="form.mobile" /></u-form-item>
				<u-form-item label="公司名称" prop="company_name"><u-input v-model="form.company_name" /></u-form-item>
				<u-form-item label="职务" prop="company_position"><u-input
						v-model="form.company_position" /></u-form-item>
			</u-form>
			<!-- <u-divider>报名信息</u-divider> -->
			<applyForm ref="applyForm" @backForm="backForm" :course_forms="course_forms"></applyForm>
		</view>

		<!-- <view class="form-btn">
			<view @click="submit" type="primary">提交</view>
		</view> -->
		<u-picker @confirm="selectSex" v-model="showSex" :range="sexList" range-key="value" mode="selector"></u-picker>
	</view>
</template>

<script>
	import applyForm from "@/components/applyForm/index.vue"
	export default {
		components: {
			applyForm
		},
		data() {
			return {
				course_id: '',
				form: {},
				apply_form: [],
				course_forms: [],
				showSex: false,
				sexList: [{
					label: '男',
					value: '男'
				}, {
					label: '女',
					value: '女'
				}],
				rules: {
					username: [{
						required: true,
						message: '请输入姓名',
						trigger: ['change', 'blur'],
					}],
					sex: [{
						required: true,
						message: '请选择性别',
						trigger: ['change', 'blur'],
					}],
				}
			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		onLoad(options) {
			this.course_id = options.id
			this.getCourseDetail(options.id)
			let user = uni.getStorageSync("stbc_lifeData") ? uni.getStorageSync("stbc_lifeData").vuex_user : {}
			this.form = user
		},
		methods: {
			selectSex(e) {
				console.log("e", e)
				this.form.sex = this.sexList[e[0]]['value']
			},
			async getCourseDetail(id) {
				const res = await this.$u.api.courseDetail({
					course_id: id
				})
				if (res.course_forms && res.course_forms.length > 0) {
					this.course_forms = res.course_forms
				}
			},
			backForm(e) {
				console.log("e", e)
				let _arr = []
				e.map(item => {
					_arr.push({
						name: item.name,
						field: item.field,
						value: item.value
					})
				})
				this.apply_form = _arr
				console.log("this.apply_form", this.apply_form)
				// return
				this.saveUser()
				this.applyCourse()


			},
			saveUser() {
				this.$u.api.saveUser(this.form).then(res => {
					this.base.toast("更新用户信息成功")
					this.$u.api.user().then(res => {
						// let stor = uni.getStorageSync('stbc_lifeData')
						// stor.vuex_user = res.user
						// uni.setStorageSync('stbc_lifeData',stor)
						this.$u.vuex('vuex_user', res.user)
					})
				})
			},
			applyCourse() {
				this.$u.api.courseSign({
					course_id: this.course_id,
					data: this.apply_form
				}).then(res => {
					this.base.toast("欢迎您报名本课程，我们将在1-3个工作日内审核并通知您报名结果…")
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.container {
		padding: 30rpx;
		height: 100vh;

		.cbg {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100vh;
		}

		.wrap {
			background-color: #fff;
			padding: 20rpx 50rpx;
			border-radius: 20rpx;
			position: relative;
		}

		.form-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;
			}
		}
	}
</style>