cnq/pages/cart/personal.vue

<template>
	<view class="content">
		<view class="top-box">报名参与</view>
		<view class="b">
			
		</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="name" placeholder="请输入您的姓名" placeholder-class="placeholder" />
			</view>
			<view class="box-1">
				<view class="box-left">出生年月：</view>
				<picker mode="date" :value="birth" :start="startDate" :end="endDate" @change="bindDateChange" class="box-right">
					<view class="placeholder" v-if="birth === ''">请输入您的生日</view>
					<view v-else>{{ birth }}</view>
				</picker>
			</view>
			<view class="box-1">
				<view class="box-left">性别：</view>
				<picker @change="bindPickerSex" :value="sex" :range="array" class="box-right">
					<view class="placeholder" v-if="sex === ''">请输入您的性别</view>
					<text>{{ sex == '0' ? '男' : sex == '1' ? '女' : sex }}</text>
				</picker>
			</view>
			<view class="box-1">
				<view class="box-left">文化程度：</view>
				<picker @change="bindPickerEdu" :value="education" :range="chooseEdu" class="box-right">
					<view class="placeholder" v-if="education === ''">请输入您的文化程度</view>
					<text>{{ education }}</text>
				</picker>
			</view>
			<view class="box-1">
				<view class="box-left">民族：</view>
				<input type="text" value="" class="list-input" v-model="mz" placeholder="请输入您的民族" placeholder-class="placeholder" />
			</view>
			<view class="box-1">
				<view class="box-left">地址：</view>
				<input type="text" value="" class="list-input" v-model="address" placeholder="请输入您的地址" placeholder-class="placeholder" />
			</view>
			<view class="box-1">
				<view class="box-left">身份证号码：</view>
				<input type="text" value="" class="list-input" v-model="card" placeholder="请输入您的身份证号码" placeholder-class="placeholder" />
			</view>
			<view class="box-1">
				<view class="box-left">联系方式：</view>
				<input type="text" value="" class="list-input" v-model="phone" placeholder="请输入您的联系方式" placeholder-class="placeholder" />
			</view>
			<view class="box-1">
				<view class="box-left">工作单位：</view>
				<input type="text" value="" class="list-input" v-model="work" placeholder="请输入您的工作单位" placeholder-class="placeholder" />
			</view>
			<view class="box-1">
				<view class="box-left">职位：</view>
				<input type="text" value="" class="list-input" v-model="specialty" placeholder="请输入您的职位" placeholder-class="placeholder" />
			</view>
			<view class="upload-box">
				<view class="upload-left">证件：</view>
				<view class="upload-right">
					<image :src="cardimg" mode="" class="upload-img" @click.stop="imgsub" v-if="cardimg"></image>
					<image src="../../static/images/upload.png" class="upload-img" mode="" v-if="!cardimg" @click.stop="imgsub"></image>
				</view>
			</view>
		</view>
		<view class="buttom" :class="{ action: loding }" @click="!loding ? join() : ''">提交申请</view>
		<uni-popup ref="popup1" type="center">
			<view class="popup-box">
				<!-- <view class="img">
					<image src="../../static/img/WechatIMG662.png" mode=""></image>
				</view> -->
				<view class="mian">
					<view class="delivery">
						支付失败
						<!-- {{ i18n.qrhwsdm }} -->
					</view>
					<view class="nocancel">
						请退出页面，重新登录
						<!-- {{ i18n.wfcx }} -->
					</view>
					<view class="comfirm-box">
						<view class="cancel" @click="cancel1">
							取消
						</view>
						<view class="comfirm" @click="comfirmExit()">
							确认
						</view>
					</view>
				</view>
			</view>
		
		</uni-popup>
	</view>
</template>

<script>
import { vip, getVipmoney,createOrder } from '@/api/index.js';
import { upload } from '@/api/ask.js';
import { mapState, mapMutations } from 'vuex';
export default {
	data() {
		const currentDate = this.getDate({
			format: true
		});
		return {
			loding: false, //是否提交中
			array: ['男', '女'],
			chooseEdu: ['小学以下', '小学', '初中', '高中/中专', '大专/本科', '硕士', '博士', '博士后'],
			chooseVol: ['是', '否'],
			chooseExp: ['是', '否'],
			index: 0,
			mz: '',
			cardimg: '', //证件照
			card: '',
			checklist: [],
			name: '',
			sex: '',
			birth: '',
			phone: '',
			address: '',
			work: '',
			specialty: '',
			education: '',
			educationid: '',
			money: '',
			id:''
		};
	},
	computed: {
		...mapState('user', ['hasLogin', 'userInfo']),
		...mapState(['weichatObj']),
		startDate() {
			return this.getDate('start');
		},
		endDate() {
			return this.getDate('end');
		}
	},
	onLoad() {
		console.log(this.userInfo)
		const obj = this;
		getVipmoney().then(({ data }) => {
			console.log(data);
			data.forEach(e => {
				if (e.name == '个人会员') {
					obj.money = e.pay_price;
					obj.id = e.id;
				}
			});
		});
	},
	methods: {
		async join() {
			let obj = this;
			if (obj.name == '') {
				obj.$api.msg('请输入您的姓名');
				return;
			}
			if (obj.birth == '') {
				obj.$api.msg('请选择出生年月');
				return;
			}
			if (obj.sex === '') {
				obj.$api.msg('请输入您的性别');
				return;
			}
			if (obj.education == '') {
				obj.$api.msg('请选择您的文化程度');
				return;
			}
			if (obj.mz == '') {
				obj.$api.msg('请填写您所属的民族');
				return;
			}
			if (obj.specialty == '') {
				obj.$api.msg('请填写您的职位');
				return;
			}
			if (obj.address == '') {
				obj.$api.msg('请填写您的地址');
				return;
			}
			let reg1 = /^(^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$)|(^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])((\d{4})|\d{3}[Xx])$)$/;
			if (!reg1.test(obj.card)) {
				obj.$api.msg('请填写正确的身份证信息');
				return;
			}
			const reg = /^(\+?0?86-?)?1[\d]\d{9}$/;
			if (!reg.test(obj.phone)) {
				obj.$api.msg('请填写正确的手机号码');
				return;
			}

			// /^(^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$)|(^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])((\d{4})|\d{3}[Xx])$)$/

			if (obj.work == '') {
				obj.$api.msg('请填写您的工作单位');
				return;
			}
			if (obj.cardimg == '') {
				obj.$api.msg('请上传您的证件');
				return;
			}

			if (obj.specialty == '') {
				obj.$api.msg('请填写您的职位');
				return;
			}
			// if (obj.education == '') {
			// 	obj.$api.msg('请填写您的教育程度');
			// 	return;
			// }
			// if (obj.is_vol == '') {
			// 	obj.$api.msg('请填写您的是否受过志愿服务');
			// 	return;
			// }
			// if (obj.is_experience == '') {
			// 	obj.$api.msg('请填写您的有无服务经验');
			// 	return;
			// }
			// obj.loding = true;
			vip({
				full_name: obj.name, //姓名
				sex: obj.sex, //性别
				education: obj.educationid, //学历
				birth: obj.birth, //生日
				nation: obj.mz, //民族
				mobile: obj.phone,
				address: obj.address, //居住地址
				company_name: obj.work, //工作单位
				position: obj.specialty, //职位
				certificateimage: obj.cardimg,
				id_card: obj.card,
				user_type: 1
			})
				.then(e => {
					// uni.navigateTo({
					// 	url: '../joinSuc/joinNow'
					// });
					if(obj.money) {
						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}) =>{
										obj.name = '';
										obj.sex = '';
										obj.educationid = '';
										obj.birth = '';
										(obj.mz = ''), (obj.phone = '');
										obj.address = '';
										obj.work = '';
										obj.specialty = '';
										(obj.cardimg = ''), (obj.card = '');
										let res = data.jsConfig;
										obj.weichatObj.chooseWXPay({
											timestamp: res.timestamp,
											nonceStr: res.nonceStr,
											package: res.package,
											signType: res.signType,
											paySign: res.paySign,
											success: function(res) {
												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('用户点击取消');
								}
							}
						});
					}else {
						uni.navigateTo({
							url: '../joinSuc/joinNow'
						});
						// createOrder({
						// 	level_id: obj.id,
						// 	body: '个人红会年费',
						// 	pay_type: 0,
						// 	pay_price: obj.money,
						// 	from: 'weixin'
						// }).then(({data}) =>{
						// 	obj.name = '';
						// 	obj.sex = '';
						// 	obj.educationid = '';
						// 	obj.birth = '';
						// 	(obj.mz = ''), (obj.phone = '');
						// 	obj.address = '';
						// 	obj.work = '';
						// 	obj.specialty = '';
						// 	(obj.cardimg = ''), (obj.card = '');
							
						// })
					}
					
				})
				.catch(function(e) {
					console.log('出错了');
					console.log(e);
				});
		},
		cancel1() {
			this.$refs.popup1.close();
		},
		comfirmExit() {
			console.log('点击comfirmExit')
			this.$refs.popup1.close()
			uni.switchTab({
				url: '/pages/index/index'
			});
		
		},
		imgsub() {
			console.log('imgsub');
			upload({
				filename: ''
			}).then(data => {
				this.cardimg = data[0].fullurl;
			});
		},
		// 选择性别
		bindPickerSex: function(e) {
			this.sex = e.target.value;
			this.index = e.target.value + 1;
		},
		// 选择教育程度
		bindPickerEdu: function(e) {
			this.education = this.chooseEdu[e.target.value];
			this.educationid = e.target.value;
			console.log(this.educationid);
		},
		// 选择日期
		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 {
	
}

.content {
	padding-top: 44rpx;
	// background-color: #fdcbc2;

	.buttom {
		margin: 60rpx auto 0;
		width: 750rpx;
		height: 100rpx;
		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;
	line-height: 58rpx;
	
	font-size: 38rpx;
	font-family: PingFang SC;
	font-weight: bold;
	color: #FF4C4C;
	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;
	}
}
.b{
position: relative;
	margin: 0 auto;
	margin-top: -20rpx;
	width: 215rpx;
	height: 17rpx;
	background: #FF4C4C;
	opacity: 0.26;
}
</style>