xmt/pages/user/registerMember.vue

<template>
	<view class="table">
		<view class="table-title">
			<view class="gg"></view>
			<view class="title">
				会员资料
			</view>
		</view>
		<view class="content">
			<view class="left">
				真实姓名
			</view>
			<input type="text" value="" v-model="name" style="color: #999; font-size:24rpx" placeholder="请输入您的姓名"/>
		</view>
		<view class="content">
			<view class="left">
				联系电话
			</view>
			<input type="number" value="" style="color: #999; font-size:24rpx" placeholder="联系电话(登录账号)" v-model="phone" />
		</view>
		<view class="content">
			<view class="left">
				担任职务
			</view>
			<picker class="input" :range="zhiwuList" @change="bindZhiwu">
				<view class="box-right" :class="{ 'hui' : zhiwu == '' }">{{ zhiwu || '请选择职务' }}</view>
			</picker>
		</view>
		<view class="content">
			<view class="left">
				企业名称
			</view>
			<input type="text" value="" style="color: #999; font-size:24rpx" placeholder="请输入企业名称" v-model="qiyeName" />
		</view>
		<view class="content">
			<view class="left">
				高新技术
			</view>
			<picker class="input" :range="gxjsList" @change="bindGxjs">
				<view class="box-right" :class="{ 'hui' : gxjs == '' }">{{ gxjs || '请选择' }}</view>
			</picker>
		</view>
		<view class="content">
			<!-- <view class="left" style="line-height: 1.5;padding: 10rpx 0;"> -->
			<!-- 专精特新<br />(小巨人) -->
			<view class="left">
				专精特新
			</view>
			<picker class="input" :range="zjtxList" @change="bindZjtx">
				<view class="box-right" :class="{ 'hui' : zjtx == '' }">{{ zjtx || '请选择' }}</view>
			</picker>
		</view>
		<view class="content">
			<view class="left">
				是否上市
			</view>
			<picker class="input" :range="ssList" @change="bindSs">
				<view class="box-right" :class="{ 'hui' : ss == '' }">{{ ss || '请选择' }}</view>
			</picker>
		</view>
		<template v-if="ss == '是'">
			<view class="content">
				<view class="left">
					上市公司类型
				</view>
				<picker class="input" :range="ssTypeList" @change="bindSsType">
					<view class="box-right" :class="{ 'hui' : ssType == '' }">{{ ssType || '请选择' }}</view>
				</picker>
			</view>
			<view class="content">
				<view class="left">
					上市时间
				</view>
				<picker mode="date" @change="bindDateChange" class="input">
					<view class="box-right" :class="{ 'hui' : ssTime == '' }">{{ssTime || '请选择上市时间'}}</view>
				</picker>
			</view>
			<view class="content">
				<view class="left">
					上市地点
				</view>
				<input type="text" value="" placeholder="请输入上市地点" v-model="ssAddress" class="clamp box-right" />
			</view>
		</template>
		<view class="content">
			<view class="left">
				所属行业
			</view>
			<picker class="input clamp" :range="choosehangye" @change="bindPickerType">
				<view class="box-right" :class="{ 'hui' : hangye == '请选择所属行业' }">{{ hangye }}</view>
			</picker>
		</view>
		<view class="content">
			<view class="left">
				产业类别
			</view>
			<picker class="input clamp" :range="chooseCyTypeList" @change="bindCyType">
				<view class="box-right " :class="{ 'hui' : cyType == '' }">{{ cyType || '请选择产业类别' }}</view>
			</picker>
		</view>
		<view class="content">
			<view class="left">
				两会职务
			</view>
			<picker class="input clamp" :range="lhList" @change="bindLh">
				<view class="box-right " :class="{ 'hui' : lh == '' }">{{ lh || '请选择两会职务' }}</view>
			</picker>
		</view>
		<!-- 		<view class="content">
			<view class="left">
				联系人
			</view>
			<input type="text" value="" focus placeholder="请输入联系人" v-model="name" />
		</view> -->
		<view class="content">
			<view class="left">
				公司地址
			</view>
			<input type="text" value="" style="color: #999; font-size:24rpx" focus placeholder="请输入公司地址" v-model="txaddress" />
		</view>
		<view class="content">
			<view class="left">
				初始密码
			</view>
			<input type="password" style="color: #999; font-size:24rpx" value="" placeholder="请输入初始密码" v-model="password" />
		</view>
		<view class="button" @click="commit()">
			申请注册
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import {
		stylelist,
		auth,
		postlist,
		getCyType
	} from '@/api/user.js'
	export default {
		data() {
			return {
				txaddress: '',
				qiyeName: '', //企业名称
				hangye: '请选择所属行业', //所属行业姓名
				choosehangye: [], //所属行业列表名字
				hangyeList: [], //所属行业列表详情
				name: '', //联系人
				zhiwu: '', //职务
				zhiwuId: '',
				zhiwuList1: [],
				phone: '', //电话
				password: '', //初始密码
				index: '', //所属行业id
				zhiwuList: [],//职位列表
				gxjsList: ['国家级', '省级', '市级', '无'],//高新技术企业列表
				gxjs: '',//高新技术企业
				zjtxList: ['国家级', '省级', '市级', '无'],//专精特新列表
				zjtx: '',//专精特新
				ssList: ['是', '否'],
				ss: '',//是否上市
				ssAddress: '',//上市地点
				ssTime: '',//上市时间
				cyTypeList: [],//产业类型列表
				chooseCyTypeList: [],
				cyType: '',//产业类型
				lhList: ['会长', '常务副会长', '副会长', '理事', '会员'],//两会职位列表
				lh: '',//两会职
				ssTypeList: ['主板', '创业板', '科创板', '新三板', '无'],//上市类型列表
				ssType: '',//上市类型
			};
		},
		onLoad() {
			stylelist().then(({
				data
			}) => {
				this.hangyeList = data
				data.forEach(e => {
					this.choosehangye.push(e.title)
				})
				
				console.log(data, "123456");
			})
			this.getPostList()
			this.getCyTypeList()
		},
		computed: {
			...mapState('user', ['hasLogin', 'userInfo']),
		},
		methods: {
			// 获取职务列表
			getPostList() {
				postlist().then(({
					data
				}) => {
					
					data.forEach(e => {
						this.zhiwuList.push(e.title)
					})
					this.zhiwuList1 = data
					console.log(data, "zhiwuList");
				})
			},
			// 获取产业列表
			getCyTypeList() {
				let obj = this
				getCyType().then(({data}) => {
					obj.cyTypeList = data.list
					data.list.forEach(e => {
						obj.chooseCyTypeList.push(e.job_name)
					})
					
				})
			},
			commit() {
				let obj = this
				if (this.name == '') {
					return this.$api.msg('请输入用户名称')
				}
				if (this.phone == '') {
					return this.$api.msg('请输入联系电话')
				}
				if (this.zhiwu == '') {
					return this.$api.msg('请选择担任职务')
				}
				if (this.qiyeName == '') {
					return this.$api.msg('请输入企业名称')
				}
				if(obj.gxjs == '') {
					return this.$api.msg('请选择高新技术类型')
				}
				if(obj.zjtx == '') {
					return this.$api.msg('请选择专精特新类型')
				}
				if(obj.ss == '') {
					return this.$api.msg('请选择是否上市')
				}
				// 上市校验
				if(obj.ss == '是') {
					if(obj.ssType == '') {
						return this.$api.msg('请选择上市公司类型')
					}
					if(obj.ssTime == '') {
						return this.$api.msg('请输入上市时间')
					}
					if(obj.ssAddress == '') {
						return this.$api.msg('请输入上市地点')
					}
				}
				if (this.hangye == '请选择所属行业') {
					return this.$api.msg('请选择所属行业')
				}
				if(obj.cyType == '') {
					return this.$api.msg('请选择产业类型')
				}
				if(obj.lh == '') {
					return this.$api.msg('请选择两会职务')
				}
				if(obj.txaddress == '') {
					return this.$api.msg('请输入公司地址')
				}
				if (this.password == '') {
					return this.$api.msg('请输入初始密码')
				}
				auth({
					name: this.qiyeName,
					type: this.index,
					contacts: this.name,
					post_id: this.zhiwuId,
					phone: this.phone,
					password: this.password,
					towpost: obj.lh,
					industry: obj.cyType,
					tech: obj.gxjs,
					mastery: obj.zjtx,
					list: obj.ss == '是'? 1:0,
					list_time: obj.ss == '是' ? obj.ssTime : '',
					list_place: obj.ss == '是' ?obj.ssAddress : '',
					address: obj.txaddress
				}).then(e => {
					// uni.navigateTo({
					// 	url: '../money/success'
					// })
					obj.$api.msg('已申请成功，等待后台审核')
				})

			},
			//选择所属行业
			bindPickerType(e) {
				this.hangye = this.choosehangye[e.target.value];
				this.index = this.hangyeList[e.target.value].id;
				console.log(this.index);
			},
			//选择职务
			bindZhiwu(e) {
				this.zhiwu = this.zhiwuList[e.target.value];
				this.zhiwuId = this.zhiwuList1[e.target.value].id
				console.log(this.zhiwuId)
			},
			//选择高新技术企业
			bindGxjs(e) {
				this.gxjs = this.gxjsList[e.target.value]
			},
			//选择小巨人
			bindZjtx(e) {
				this.zjtx = this.zjtxList[e.target.value]
			},
			//是否上市
			bindSs(e) {
				this.ss = this.ssList[e.target.value]
			},
			// 上市时间
			bindDateChange(e) {
				this.ssTime = e.target.value
			},
			// 选择产业分类
			bindCyType(e) {
				this.cyType = this.chooseCyTypeList[e.target.value]
			},
			// 选择两会职务
			bindLh(e) {
				this.lh = this.lhList[e.target.value]
			},
			// 选择上市类型
			bindSsType(e) {
				this.ssType = this.ssTypeList[e.target.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: 180rpx;
			margin: 0 30rpx;
			font-size: 28rpx;
			font-weight: bold;
			color: #333333;
			flex-shrink: 0;

		}

		.box-right {
			flex-grow: 1;
		}

		.input {
			font-size: 24rpx;
			margin: 0;
			flex-grow: 1;
		}
	}

	.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>