xmt/pages/user/joinMedia.vue

<template>
	<view class="table">
		<view class="content">
			<view class="left">
				姓名
			</view>
			<input type="text" value=""  placeholder="请输入姓名" v-model="name" />
		</view>
		<view class="content">
			<view class="left">
				联系电话
			</view>
			<input type="number" value=""  placeholder="请输入联系电话" v-model="phone" />
		</view>
		<view class="content">
			<view class="left">
				职务
			</view>
			<picker class="input" :range="choosePost" @change="bindPickerType">
				<view class="box-right" :class="{ 'hui' : post == '' }">{{ post || '请选择职务' }}</view>
			</picker>
			<!-- <input type="text" value="" focus placeholder="请选择所属行业" v-model="hangye"/> -->
		</view>
		<template v-if=" (post.indexOf('董事长') != -1)|| (post.indexOf('总经理') != -1)">
			<view class="content">
				<view class="left">
					学历
				</view>
				<picker class="input" :range="xlList" @change="bindXl">
					<view class="box-right" :class="{ 'hui' : xl == '' }">{{ xl|| '请选择学历' }}</view>
				</picker>
				<!-- <input type="text" value="" focus placeholder="请选择所属行业" v-model="hangye"/> -->
			</view>
			<view class="content">
				<view class="left">
					生日
				</view>
				<picker class="input" mode="date" @change="bindBrith">
					<view class="box-right" :class="{ 'hui' : brith == '' }">{{ brith|| '请选择生日' }}</view>
				</picker>
			</view>
			<view class="content">
				<view class="left">
					职称
				</view>
				<input type="text" value=""  placeholder="请输入职称(如高级工程师)" v-model="zc" />
			</view>
		</template>
		<view class="button" @click="commit()">
			提交
		</view>
	</view>
</template>

<script>
	import {
		postlist,
		joinSubmit
	} from '@/api/user.js'
	export default {
		data() {
			return {
				id: '',
				name: '', //姓名
				phone: '', //电话
				post: '', //职务
				choosePost: [], //职务列表名字
				postList: [], //职务列表详情
				index: '', //职务id
				xlList: ['博士','硕士','本科','专科','大专','高中','小学','其他'],
				xl:'',
				brith: '',
				zc: ''
			};
		},
		onLoad(option) {
			this.id = option.id;
			postlist().then(({
				data
			}) => {
				this.postList = data
				data.forEach(e => {
					this.choosePost.push(e.title)
				})
				console.log(data, "123456");
			})
		},
		methods: {
			commit() {
				if (this.name == '') {
					return this.$api.msg('请输入姓名')
				}
				if (this.post == '') {
					return this.$api.msg('请选择职务')
				}
				if (this.phone == '') {
					return this.$api.msg('请输入联系电话')
				}
				if((this.post.indexOf('董事长') != -1) || (this.post.indexOf('总经理') != -1)) {
					if(this.xl == '' ) {
						return this.$api.msg('请选择学历')
					}
					if(this.brith == '') {
						return this.$api.msg('请选择生日')
					}
					if(this.zc == '') {
						return this.$api.msg('请输入职称')
					}
				}
				joinSubmit({
					merId: this.id,
					applyUserName: this.name,
					applyUserMobile: this.phone,
					applyJobId: this.index,
					edu: this.xl,
					birthday:this.brith,
					title: this.zc
				}).then(e => {
					uni.navigateBack({
						delta: 1, //返回层数，2则上上页
					})
				})
			},
			//请选择职务
			bindPickerType(e) {
				this.post = this.choosePost[e.target.value];
				this.index = this.postList[e.target.value].id;
				console.log(this.index);
			},
			//
			bindXl(e) {
				this.xl = this.xlList[e.target.value];
			},
			bindBrith(e) {
				this.brith = e.detail.value
			}
		}
	}
</script>

<style lang="scss">
	.table {
		width: 750rpx;
		background: #FFFFFF;
		// margin: 30rpx auto;
	}

	.table-title {
		display: flex;
		align-items: center;

		.gg {
			margin-left: 30rpx;
			width: 3rpx;
			height: 30rpx;
			background: #FF6061;
			border-radius: 2px;
		}

		.title {
			margin-left: 15rpx;
			font-size: 30rpx;
			font-weight: bold;
			color: #333333;
			line-height: 80rpx;
		}
	}

	.content {

		border-top: 2rpx solid #F3F3F3;
		display: flex;

		align-items: center;
		line-height: 80rpx;

		.left {
			width: 120rpx;
			margin: 0 30rpx;
			font-size: 28rpx;
			font-weight: bold;
			color: #333333;

		}

		input {
			margin: 0;
		}

		.input {
			margin: 0;
		}
	}

	.button {
		margin: 100rpx auto;
		width: 650rpx;
		height: 80rpx;
		background: #FE5341;
		border-radius: 38rpx;
		font-size: 30rpx;
		font-weight: 500;
		color: #FFFFFF;
		line-height: 80rpx;
		text-align: center;
	}

	.hui {
		color: #999999 !important;
	}
</style>