xhlred/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 { vip, getVipmoney, createOrder } 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: '', //电子邮箱
			id: '',
			money: '',
			concat_address: '' //联系地址
		};
	},
	onShow() {
		if (this.hasLogin) {
			// this.loadBaseData();
			const obj = this
			getVipmoney().then(({ data }) => {
				console.log(data);
				data.forEach(e => {
					if (e.name == '企业会员') {
						obj.money = e.pay_price;
						obj.id = e.id;
						console.log(obj.money,obj.id)
					}
				});
			});
		} else {
			saveUrl();
			uni.showModal({
				title: '登录',
				content: '您未登录，是否马上登陆?',
				success: e => {
					if (e.confirm) {
						interceptor();
					}
				},
				fail: e => {
					console.log(e);
				}
			});
		}
	},
	computed: {
		...mapState('user', ['hasLogin', 'userInfo']),
		...mapState(['weichatObj']),
		// startDate() {
		// 	return this.getDate('start');
		// },
		// endDate() {
		// 	return this.getDate('end');
		// }
	},
	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;
			vip({
				company: obj.unit_name, //单位名称
				nature: obj.unit_type, //性质
				legal_person: obj.unit_peo, //法人
				// company_member: obj.unit_num * 1, //公司人数
				company_address: obj.concat_address, //联系地址
				zip_code: obj.postal_code, //邮编
				mobile: obj.concat_phone, //联系电话
				company_email: obj.email, //邮箱
				address: obj.usually_area, //常驻地址
				full_name: obj.unit_concat ,//联系人
				user_type: 2
			})
				.then(e => {
					if (e.status == 400) {
						obj.$api.msg(e.msg);
						return;
					}
					uni.showModal({
						title: '提示',
						content: '成为企业会员需要缴纳' + obj.money + '员年费，是否前往提交',
						success: function(res) {
							if (res.confirm) {
								console.log('用户点击确定');
								createOrder({
									level_id: obj.id,
									body: '企业红会年费',
									pay_type: 0,
									// name: obj.name,
									pay_price: obj.money,
									from: 'weixin'
								}).then(({ data }) => {
									let res = data.jsConfig;
									console.log(res);
									obj.weichatObj.chooseWXPay({
										timestamp: res.timestamp,
										nonceStr: res.nonceStr,
										package: res.package,
										signType: res.signType,
										paySign: res.paySign,
										success: function(res) {
											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'
											});
										},
										fail: function(res) {
											this.$refs.popup1.open();
											console.log(res, '失败');
											console.log(res.errMsg);
										}
									});
								});
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
				})
				.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: #fa7e67;
		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>