wlred/pages/cart/group.vue

<template>
	<view class="content">
		<view class="top-box">
			团队报名
		</view>
		<view class="box">
			<view class="box-1">
				<view class="box-left">
					单位名称
					<text class="imp"></text>
					：
				</view>
				<input type="text" value="" class="list-input" v-model="unit_name" placeholder="请输入单位名称" placeholder-class="placeholder" />
			</view>
			<view class="box-1">
				<view class="box-left">
					单位性质
					<text class="imp"></text>
					：
				</view>
				<input type="text" value="" class="list-input" v-model="unit_type" placeholder="请输入单位性质" placeholder-class="placeholder" />
			</view>
			<view class="box-1">
				<view class="box-left">
					法人代表
					<text class="imp"></text>
					：
				</view>
				<input type="text" value="" class="list-input" v-model="unit_peo" placeholder="请输入法人代表" placeholder-class="placeholder" />
			</view>
			<view class="box-1">
				<view class="box-left">
					单位人数
					<text class="imp"></text>
					：
				</view>
				<input type="number" value="" class="list-input" v-model="unit_num" placeholder="请输入单位人数" placeholder-class="placeholder" />
			</view>
			<view class="box-1">
				<view class="box-left">
					联系人
					<text class="imp"></text>
					：
				</view>
				<input type="text" value="" class="list-input" v-model="unit_concat" placeholder="请输入联系人" placeholder-class="placeholder" />
			</view>
			<view class="box-1">
				<view class="box-left">
					常驻地区
					<text class="imp"></text>
					：
				</view>
				<input type="text" value="" class="list-input" v-model="usually_area" placeholder="请输入常驻地区" placeholder-class="placeholder" />
			</view>
			<view class="box-1">
				<view class="box-left">
					邮政编码
					<text class="imp"></text>
					：
				</view>
				<input type="number" value="" class="list-input" v-model="postal_code" placeholder="请输入邮政编码" placeholder-class="placeholder" />
			</view>
			<view class="box-1">
				<view class="box-left">
					联系电话
					<text class="imp"></text>
					：
				</view>
				<input type="number" value="" class="list-input" v-model="concat_phone" placeholder="请输入联系电话" placeholder-class="placeholder" />
			</view>
			<view class="box-1">
				<view class="box-left">
					电子邮箱
					<text class="imp"></text>
					：
				</view>
				<input type="text" value="" class="list-input" v-model="email" placeholder="请输入电子邮箱" placeholder-class="placeholder" />
			</view>
			<view class="box-1">
				<view class="box-left">
					联系地址
					<text class="imp"></text>
					：
				</view>
				<input type="text" value="" class="list-input" v-model="concat_address" placeholder="请输入联系地址" placeholder-class="placeholder" />
			</view>
		</view>
		<!-- <view class="buttom-ts" ></view> -->
		<view class="buttom" :class="{ action: loding }" @click="!loding ? join() : ''">提交申请</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import {
		saveUrl,
		interceptor
	} from '@/utils/loginUtils.js';
import { joinSec,add_company } from '@/api/index.js';
import { upload } from '@/api/ask.js';
export default {
	data() {
		const currentDate = this.getDate({
			format: true
		});
		return {
			loding: false, //是否提交中
			unit_name: '',//单位名称
			unit_peo: '',//法人代表
			unit_type: '',//单位性质
			unit_num: '',//单位人数
			unit_concat: '',//单位联系人
			usually_area: '',//常驻地区
			postal_code: '',//邮政编码
			concat_phone: '',//联系电话
			email: '',//电子邮箱
			concat_address: ''//联系地址
		};
	},
	onShow() {
		if (this.hasLogin) {
			// this.loadBaseData();
		} else {
			saveUrl();
			uni.showModal({
				title: '登录',
				content: '您未登录，是否马上登陆?',
				success: e => {
					if (e.confirm) {
						interceptor();
					}
				},
				fail: e => {
					console.log(e);
				}
			});
		}
	},
	computed: {
		...mapState('user', ['hasLogin', 'userInfo'])
	},
	methods: {
		async join() {
			let obj = this;
			if(obj.unit_name == '') {
				obj.$api.msg('请填写单位名称');
				return;
			}
			if(obj.unit_type == '') {
				obj.$api.msg('请填写单位性质');
				return;
			}
			if(obj.unit_peo == '') {
				obj.$api.msg('请填写法人代表');
				return;
			}
			if(obj.unit_num == '') {
				obj.$api.msg('请填写单位人数');
				return;
			}
			if(obj.unit_concat == '') {
				obj.$api.msg('请填写联系人');
				return;
			}
			if(obj.usually_area == '') {
				obj.$api.msg('请填写常驻地址');
				return;
			}
			if(obj.postal_code == '') {
				obj.$api.msg('请填写邮政编码');
				return;
			}
			if(obj.concat_phone == '') {
				obj.$api.msg('请填写联系电话');
				return;
			}
			if(!/^((\+?86)|(\(\+86\)))?1\d{10}$/.test(obj.concat_phone)) {
				obj.$api.msg('请填写正确的联系电话');
				return;
			}
			if(obj.email == '') {
				obj.$api.msg('请填写电子邮箱');
				return;
			}
			
			if (!/^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/.test(obj.email)) {
				obj.$api.msg('请填写正确的邮箱');
				return;
			}
			if(obj.concat_address == '') {
				obj.$api.msg('请填写联系地址');
				return;
			}
			obj.loding = true;
			add_company({
				
				company: obj.unit_name,//单位名称
				company_nature: obj.unit_type,//性质
				company_person: obj.unit_peo,//负责人
				company_member: obj.unit_num*1,//公司人数
				address: obj.concat_address,//联系地址
				zip: obj.postal_code,//邮编
				company_tel: obj.concat_phone,//联系电话
				email: obj.email,//邮箱
				permanent_address: obj.usually_area,//常驻地址
				person: obj.unit_concat,//联系人
			})
				.then(e => {
					if(e.status == 400) {
						obj.$api.msg(e.msg);
						return;
					}
					obj.unit_name = ''
					obj.unit_type= ''
					obj.unit_num= ''
					obj.concat_address= ''
					obj.postal_code= ''
					obj.concat_phone= ''
					obj.email= ''
					obj.usually_area= ''
					uni.navigateTo({
						url: '../joinSuc/joinNow'
					});
				})
				.catch(function(e) {
					console.log('出错了');
					console.log(e);
				});
		},
		imgsub() {
			console.log('imgsub');
			upload({
				filename: ''
			}).then(data => {
				this.cardimg = data[0].url;
			});
		},
		// 选择性别
		bindPickerSex: function(e) {
			console.log(this.array[e.target.value]);
			this.sex = this.array[e.target.value];
			this.index = e.target.value + 1;
		},
		// 选择教育程度
		bindPickerEdu: function(e) {
			this.education = this.chooseEdu[e.target.value];
			this.index = e.target.value + 1;
		},
		// 选择日期
		bindDateChange: function(e) {
			this.birth = e.target.value;
		},
		// 是否参加志愿活动
		bindPickerVol: function(e) {
			this.is_vol = this.chooseVol[e.target.value];
			this.index = e.target.value + 1;
		},
		// 有无服务经验
		bindPickerExp: function(e) {
			this.is_experience = this.chooseExp[e.target.value];
			this.index = e.target.value + 1;
		},
		getDate(type) {
			const date = new Date();
			let year = date.getFullYear();
			let month = date.getMonth() + 1;
			let day = date.getDate();

			if (type === 'start') {
				year = year - 60;
			} else if (type === 'end') {
				year = year + 2;
			}
			month = month > 9 ? month : '0' + month;
			day = day > 9 ? day : '0' + day;
			return `${year}-${month}-${day}`;
		},
		// 选择可提供时间

		// this.quantum = item.detail.value.join(',');

		checktime1(e) {
			// var items = this.timeList,
			// let quantum = [];
			this.quantum = e.detail.value.join(',');
			console.log(this.quantum);
		},
		checktime2(e) {
			// var items = this.timeList,
			let values = e.detail.value;
			// let quantum = [];
			console.log(values);
		},
		checktime3(e) {
			// var items = this.timeList,
			let values = e.detail.value;
			// let quantum = [];
			console.log(values);
		},
		//选择有兴趣参与的工作
		checkjob(item) {
			this.taste = item.detail.value.join(',');
		},
		// 选择专长checkspeciality
		checkspeciality(item) {
			this.speciali = item.detail.value.join(',');
		}
	}
};
</script>

<style lang="scss">
page {
	// background-color: #fdcbc2;
	height: 100%;
}

.content {
	max-height: 100%;
	padding-top: 44rpx;
	// background-color: #fdcbc2;
	.buttom-ts {
		height: 120rpx;
	}
	.buttom {
		margin: 60rpx auto 0;
		// position: absolute;
		// bottom: 0;
		width: 600rpx;
		height: 100rpx;
		border-radius: 50rpx;
		background: #FF4C4C;
		font-size: 34rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		line-height: 100rpx;
		text-align: center;
		&.action {
			background: #999999;
		}
	}

	.box {
		// margin-top: 44rpx;
		width: 690rpx;
		margin: 20rpx auto 0;
		background-color: #ffffff;
		border-radius: 20rpx;
		// padding: 28rpx 20rpx 32rpx 20rpx;
		position: relative;

		.red-box {
			width: 405rpx;
			line-height: 66rpx;
			text-align: center;
			background: linear-gradient(0deg, #c90f1b, #f14d33);
			// background-color: #c62316;
			border-radius: 10rpx;
			font-size: 30rpx;
			font-weight: 500;
			color: #ffffff;
			// position: relative;
			position: absolute;
			top: -36rpx;
			left: 50%;
			transform: translateX(-50%);
			z-index: 1;
		}

		.box-check {
			font-size: 28rpx;
			font-weight: 500;
			color: #666666;
			line-height: 100rpx;
		}

		.imp {
			color: red;
			margin-left: 5rpx;
		}
		.box-1 {
			height: 98rpx;
			padding: 0 20rpx;
			display: flex;
			justify-content: space-between;
			border-bottom: 1px solid #f0f0f0;
			line-height: 98rpx;
			align-items: center;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #333333;
			// .box-left {
			// 	width: 120rpx;
			// }
			// .list-input {
			// 	width: 440rpx;
			// }
			// .box-right {
			// 	width: 440rpx
			// }
			.list-input {
				width: 440rpx;
				// height: 26rpx;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #000;
			}
			.placeholder {
				color: #999999;
			}
			.box-right {
				width: 440rpx;
			}
		}
	}
}
.upload-box {
	// height: 247rpx;
	background: #ffffff;
	border-radius: 27rpx;
	display: flex;
	flex-direction: column;
	padding: 30rpx 40rpx 30rpx 0;
	margin: 15rpx auto 30rpx;
	width: 690rpx;
	background: #ffffff;
	border-radius: 10rpx;
	.upload-left {
		padding-left: 20rpx;
		font-weight: 400;
		color: #000;
	}

	.upload-right {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;

		.upload-img {
			width: 160rpx;
			height: 160rpx;
			margin-top: 24rpx;
		}
	}
}
.top-box {
	height: 58rpx;
	font-size: 38rpx;
	line-height: 58rpx;
	font-family: PingFang SC;
	font-weight: bold;
	color: #FA7E67;
	text-align: center;
	position: relative;
	&::before {
		content: '';
		width: 215rpx;
		height: 17rpx;
		background: #fff;
		opacity: 0.26;
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		margin: 0 auto;
	}
}

</style>