weapp-online/pages/sign_up/sign_up.vue

<template>
	<view class="page_body">
		<view class="banner_container"><image :src="banner" mode="scaleToFill" class="banner_img" /></view>
		<view class="season">
			<view class="title">
				<image src="../../static/imgs/offline.png" mode="scaleToFill"></image>
				<text>第{{ userInfo.season }}届大卫博士创业{{ userInfo.season_type | activityType }}</text>
			</view>
			<view class="con">
				<view class="course_info">
					<view style="margin-right:102rpx;">
						<text>名额限制：</text>
						<text>{{ userInfo.is_limit && userInfo.limit_num ? userInfo.limit_num : '无限制' }}</text>
						<text v-if="userInfo.is_limit && userInfo.limit_num">名</text>
					</view>
					<view>
						<text>已报名：</text>
						<text class="count">
							<text>{{ userInfo.count }}</text>
							<text>人</text>
						</text>
					</view>
				</view>
				<view class="course_time">
					<text>时间：</text>
					<text>{{ getTime(userInfo.time_start) }}</text>
					<text>-</text>
					<text>{{ getTime(userInfo.time_end) }}</text>
				</view>
			</view>
		</view>
		<view class="block"></view>
		<view class="sign_info">
			<view class="user_con">
				<view class="user_title">请确认本人信息</view>
				<view class="info_fixed">
					<view class="info_con">
						<view class="label">昵称：</view>
						<view class="label_con">{{ userInfo.nickname }}</view>
					</view>
					<view class="info_con">
						<view class="label">手机号：</view>
						<view class="label_con">{{ userInfo.phone }}</view>
					</view>
					<view class="info_con">
						<view class="label">代理级别：</view>
						<view class="label_con">{{ userInfo.level }}</view>
					</view>
				</view>
				<view class="dynamic_info">
					<view class="info_con">
						<view class="label">
							<text>性别: </text>
							<text class="star">*</text>
						</view>
						<view class="label_con">
							<radio-group @change="e => signedInfo.sex = Number(e.detail.value)">
								<view
									v-for="(sex, i) in sexList"
									:key="i"
									class="radio_con"
								>
									<radio
										:value="sex"
										:checked="signedInfo.sex === sex"
										:disabled="signedRevise.sex"
									/>
									<text>{{ sex ? '女' : '男' }}</text>
								</view>
							</radio-group>
						</view>
					</view>
					<view class="info_con">
						<view class="label">
							<text>身份证号: </text>
							<text class="star">*</text>
						</view>
						<view class="label_con">
							<textarea
								v-model="signedInfo.id_code"
								:disabled="signedRevise.id_code"
								auto-height
								placeholder='请输入身份证号'
								:class="brand ? 'textareaIp' : ''"
								maxlength="18"
							/>
						</view>
					</view>
					<view class="info_con">
						<view class="label">
							<text>来自哪里: </text>
							<text class="star">*</text>
						</view>
						<template v-if="signedRevise.province">
							<view class="label_con">
								{{ baseInfo_region.join('-') }}
							</view>
						</template>
						<template v-else>
							<picker
								mode="region"
								:value="baseInfo_region"
								@change="RegionChange2"
							>
								<view class="picker flexB">
									<view class="address_name">
										<text v-if="baseInfo_region[0] != null">
											{{ baseInfo_region.join('-') }}
										</text>
										<text v-else>省-市-区</text>
									</view>
									<text class="iconfont iconyoujiantou" style="color:#999;"></text>
								</view>
							</picker>
						</template>
					</view>
					<view class="info_con">
						<view class="label">
							<text>详细地址</text>
							<text class="star">*</text>
						</view>
						<view class="label_con">
							<textarea
								v-model="signedInfo.detail"
								:disabled="signedRevise.detail"
								auto-height
								placeholder="请输入详细地址"
								:class="brand ? 'textareaIp' : ''"
							/>
						</view>
					</view>
					<view class="info_con">
						<view class="label">
							<text>参加次数: </text>
							<text class="star">*</text>
						</view>
						<view class="label_con">
							<input
								v-model="join_num"
								:disabled="Number(userInfo.season_type) ? Boolean(signedRevise.join_two_num) : Boolean(signedRevise.join_one_num)"
								type="number"
								placeholder="请输入参加次数"
							/>
						</view>
					</view>
				</view>
				<view class="dynamic_info" v-if="formList.length > 0">
					<view class="info_con" v-for="(item, idx) in formList" :key="item.id">
						<view class="label">
							<text>{{ item.form_name }}</text>
							<text class="star">*</text>
						</view>
						<radio-group @change="radioChange($event, item.id, idx)" v-if="item.style == 1">
							<label v-for="(temp, index) in item.form_value" :key="index">
								<view class="radio_con">
									<radio
										:value="temp"
										:checked="item.form_default === temp"
									/>
									<!-- :disabled="signedInfo.sex && item.form_name === '性别'" -->
									<!-- :checked="index === current" -->
									<text>{{ temp }}</text>
								</view>
							</label>
						</radio-group>
						<checkbox-group @change="checkboxChange($event, item.id, idx)" v-if="item.style == 2">
							<label v-for="(temp, index) in item.form_value" :key="index">
								<view class="check_con">
									<checkbox :value="index" />
									<text>{{ item.form_value[index] }}</text>
								</view>
							</label>
						</checkbox-group>
						<view v-if="item.style == 3" class="label_con">
							<textarea
								v-model="item.form_default"
								auto-height
								:placeholder="'请输入' + item.form_name"
								:class="brand ? 'textareaIp' : ''"
							/>
						</view>
						<template v-if="item.style === 4">
							<picker
								mode="region"
								@change="RegionChange($event, item.id, idx)"
								:value="region"
							>
								<view class="picker flexB">
									<view class="address_name">
										<text v-if="region[0] != null">
											{{ region.join('-') }}
										</text>
										<text v-else>省-市-区</text>
									</view>
									<text class="iconfont iconyoujiantou" style="color:#999;"></text>
								</view>
							</picker>
							<view>
								<view class="label">
									<text>详细地址</text>
									<text class="star">*</text>
								</view>
								<view class="label_con">
									<textarea
										auto-height
										placeholder="请输入详细地址"
										v-model="address"
										:class="brand ? 'textareaIp' : ''"
									/>
								</view>
							</view>
						</template>
					</view>
				</view>
			</view>
		</view>
		<view class="submit_container">
			<view
				@click.stop="toSignUp"
				class="sign_up flexC"
			>
				支付￥{{ userInfo.cost }} 报名
			</view>
		</view>
	</view>
</template>

<script>
import { toSign, poyStatus, getFrom, subFrom, userSignUpInfo } from '../../api/sign.js';
export default {
	data() {
		return {
			userInfo: {}, //用户信息
			payStatus: true, //支付按钮是否能点击
			tab_type: 1, //tab切换 1 信息填写 2 课程介绍 3报名须知
			formList: [], //问题列表
			params: {
				id: [],
				value: []
			},
			banner: '', //banner图
			region: [], //地址区域选择
			address: '', //详细地址
			state: '', //订阅消息状态
			brand: false, //手机品牌
			signedInfo: {},
			signedRevise: {},
			sexList: [0, 1],
			baseInfo_region: [],
			join_num: ''
		};
	},
	onLoad(options) {
		this.banner = options.banner;
		this.getFrom()
	},
	onShow() {
		this.getSystem();
		
		if (!uni.getStorageSync('token')) {
			uni.showModal({
				content: '登录过期，请重新登录',
				showCancel: false,
				success: res => {
					if (res.confirm) {
						uni.switchTab({
							url: '../index/index'
						});
					}
				}
			});
		}
		this.userInfo = uni.getStorageSync('userInfo');
		if (+this.userInfo.season_type === 1) {
			uni.setNavigationBarTitle({
				title: '密训营报名'
			});
		} else {
			uni.setNavigationBarTitle({
				title: '实战营报名'
			});
		}
		this.getFormSignedInfo()
	},
	methods: {
		// 报名
		async toSignUp() {
			const f = this.checkError()
			if(!f) return false
			const [, { subscriptionsSetting: { itemSettings: s } }] = await uni.getSetting({ withSubscriptions: true })
			const go = () => {
				const f_len = this.formList.length
				f_len ? this.formSign() : this.toSubmitNoOther()
			}
			const tmplIds = [
				'BTmiw1Lr630I5ADYVX8Pzy75e4M7OmtgUBcCPVj7CKo',
				'dgL9BVJ65H7aeGJuQB3J9H3EqlqYsN2GRj_wWrGLVkQ',
				'__-SjTtxTWmfAVwOyy7J9WXBuu8P7pJsJOXM6xCDSWw',
			]
			const t_alen = tmplIds.length
			let t_len = 0
			if(s) {
				const s_k = Object.keys(s)
				const s_v = Object.values(s)
				t_len = tmplIds.filter(id => s_k.indexOf(id) !== -1).length
			}
			if(!s || t_len !== t_alen) {
				uni.requestSubscribeMessage({
					tmplIds,
					success(res) {
						const _o = Object.assign({}, res)
						Reflect.deleteProperty(_o, 'errMsg')
						const a_len = Object.values(_o).filter(s => s === 'accept').length
						if(a_len !== t_alen){
							uni.showModal({
								title: '提示',
								content: '请选择订阅服务,以便我们通知您活动信息',
								showCancel: false
							})
						} else {
							go()
						}
					},
					fail() {
						uni.showModal({
							title: '失败',
							content: '打开订阅服务失败',
							showCancel: false
						})
					}
				})
			} else {
				go()
			}
		},
		// 错误检测
		checkError() {
			const em = new Map([
				[1, '请选择您的性别'],
				[2, '请填写您的身份证号'],
				[3, '请填写真实的身份证号'],
				[4, '请选择您来自哪里'],
				[5, '请填写您的详细地址'],
				[6, '请填写您参加的次数'],
				[7, '请正确填写您参加的次数']
			])
			const e_fn = s => {
				uni.showModal({
					title:'提示',
					content: em.get(s),
					showCancel: false
				})
				return false
			}
			const { sex, id_code, detail } = this.signedInfo
			if(!sex && sex !== 0) return e_fn(1)
			if(!id_code) return e_fn(2)
			const id_reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/
			if(!id_reg.test(id_code)) return e_fn(3)
			const rlen = this.baseInfo_region.length
			if(!rlen) return e_fn(4)
			if(!detail) return e_fn(5)
			const n = this.join_num
			if(!n) return e_fn(6)
			const n_reg = /^\d{1,}$/
			if(!n_reg.test(n)) return e_fn(7);
			return true
		},
		
		
		getFormSignedInfo(cb) {
			userSignUpInfo().then(res => {
				if(res.code === 200) {
					this.signedInfo = res.data
					this.join_num = Number(this.userInfo.season_type) ? String(res.data.join_two_num) : String(res.data.join_one_num)
					if(res.data.province) {
						this.baseInfo_region = [res.data.province, res.data.city, res.data.area]
					}
					Object.keys(res.data).forEach(k => {
						this.signedRevise[k] = res.data[k] === 0
					})
					cb && cb(res.data)
				}
			})
		},
		//获取手机版本动态设置textarea的padinng值 解决安卓机跟ios的textarea的高度不一致
		getSystem() {
			uni.getSystemInfo({
				success: res => {
					if (res.brand == 'iPhone') {
						this.brand = true;
					}
				}
			});
		},
		RegionChange2(e) {
			this.baseInfo_region = e.detail.value;
		},
		// 区域选择
		RegionChange(e, id, idx) {
			this.region = e.detail.value;
			this.$set(this.formList[idx], 'form_default', e.detail.value);
		},
		//单选
		radioChange(e, id, idx) {
			this.$set(this.formList[idx], 'form_default', e.detail.value);
		},
		//多选
		checkboxChange(e, id, idx) {
			this.$set(this.formList[idx], 'form_default', e.detail.value);
		},
		// 获取要填写的表单名称
		getFrom() {
			getFrom().then(res => {
				if (res.code == 200) {
					let list = res.data.list;
					list.map(i => {
						this.$set(i, 'form_default', '');
					});
					this.formList = list;
				} else {
					uni.showModal({
						content: res.message || '请求失败',
						showCancel: false
					});
				}
			});
		},
		/*提交表单
		 * @params id 获取的表单label的id
		 * @params value 与表单label对应的value值
		 * @params address 详细地址
		 */
		formSign() {
			let that = this;
			let id = [];
			let value = [];
			if (this.formList) {
				let list = this.formList;
				for (var i = 0; i < list.length; i++) {
					if (list[i].style == 4 && !this.address) {
						uni.showModal({
							content: '详细地址不能为空',
							showCancel: false
						});
						return false;
					}
					if (!list[i].form_default) {
						uni.showModal({
							content: list[i].form_name + '不能为空',
							showCancel: false
						});
						break;
					}
					if (list[i].get_verify.value) {
						let reg = new RegExp(list[i].get_verify.value);
						if (!reg.test(list[i].form_default)) {
							uni.showModal({
								content: `${list[i].form_name}要求为: ${list[i].get_verify.name}` || list[i].form_name + '格式不正确',
								showCancel: false
							});
							return false;
						}
					}
					id.push(list[i].id);
					value.push(list[i].form_default);
				}
				if (id.length == this.formList.length && value.length == this.formList.length) {
					subFrom({
						id,
						value,
						address: this.address || this.signedInfo.detail,
						base_info: {
							region: this.baseInfo_region,
							id_code: this.signedInfo.id_code,
							detail: this.signedInfo.detail,
							sex: this.signedInfo.sex,
							join_one_num: Number(this.userInfo.season_type) ? this.join_num : '',
							join_two_num: Number(this.userInfo.season_type) ? this.join_num : ''
						}
					}).then(res => {
						if (res.code == 200) {
							this.toPay();
						} else {
							uni.showModal({
								content: res.message || '提交信息失败',
								showCancel: false
							});
						}
					});
				}
			}
		},
		
		toSubmitNoOther() {
			subFrom({
				id: [],
				value: [],
				address: this.address || this.signedInfo.detail,
				base_info: {
					region: this.baseInfo_region,
					id_code: this.signedInfo.id_code,
					detail: this.signedInfo.detail,
					sex: this.signedInfo.sex,
					join_one_num: Number(this.userInfo.season_type) ? this.join_num : '',
					join_two_num: Number(this.userInfo.season_type) ? this.join_num : ''
				}
			}).then(res => {
				if (res.code == 200) {
					this.toPay();
				} else {
					uni.showModal({
						content: res.message || '提交信息失败',
						showCancel: false
					});
				}
			});
		},
		// 支付报名
		toPay() {
			const _this = this
			toSign().then(res => {
				if (res.code === 200) {
					uni.requestPayment({
						provider: 'weixin',
						...res.data,
						success() {
							_this.poyStatus();
						},
						fail() {
							uni.showModal({
								title: '失败',
								content: '支付失败',
								showCancel: false
							});
						},
						complete() {
							_this.payStatus = true;
						}
					});
				} else {
					uni.showModal({
						content: res.message || '报名失败',
						showCancel: false
					});
					_this.payStatus = true;
				}
			}).catch(e => {
				_this.payStatus = true;
			});
		},
		getTime(date) {
			if (date != NaN) {
				var time = new Date(Number(date) * 1000);
				var year = time.getFullYear();
				var month = time.getMonth() + 1 < 10 ? '0' + (time.getMonth() + 1) : time.getMonth() + 1;
				var day = time.getDate() < 10 ? '0' + time.getDate() : time.getDate();
				var nowDate = year + '年' + month + '月' + day + '日';
				return nowDate;
			}
		},
		//支付状态
		poyStatus() {
			poyStatus().then(res => {
				console.log(res);
				if (res.code == 200) {
					uni.redirectTo({
						url: '../sign_up_suce/sign_up_suce'
					});
				}
			});
		}
	}
};
</script>
<style>
page {
	height: 100%;
	width: 100%;
	background-color: #fff;
}
radio .wx-radio-input {
	border-radius: 50%;
	border: 2rpx solid #999;
	background: transparent !important;
	width: 40rpx;
	height: 40rpx;
}
radio .wx-radio-input.wx-radio-input-checked::before {
	border-radius: 100%;
	width: 60%;
	height: 60%;
	content: '';
	background-color: #ea4a42;
	transform: translate(-50%, -50%) scale(1);
	-webkit-transform: translate(-50%, -50%) scale(1);
}
radio .wx-radio-input.wx-radio-input-checked {
	border-color: #ea4a42;
}
checkbox .wx-checkbox-input {
	border: 2rpx solid #999;
	background: transparent !important;
	width: 40rpx;
	height: 40rpx;
}
checkbox .wx-checkbox-input.wx-checkbox-input-checked {
	border-color: #ea4a42;
}
checkbox .wx-checkbox-input.wx-checkbox-input-checked::before {
	width: 60%;
	height: 60%;
	background: #ea4a42;
	content: '';
	transform: translate(-50%, -50%) scale(1);
	-webkit-transform: translate(-50%, -50%) scale(1);
}
</style>
<style lang="scss" scoped>
.block {
	height: 15rpx;
	width: 100%;
	background-color: #f5f5f5;
}
.page_body {
	padding-bottom: 200rpx;
	overflow-x: hidden;
	.banner_container {
		width: 730rpx;
		height: 369rpx;
		margin: 0 auto;
		.banner_img {
			width: 100%;
			height: 100%;
		}
	}
	.season {
		width: 100%;
		padding: 20rpx 30rpx;
		box-sizing: box-sizing;
		.title {
			display: flex;
			align-items: center;
			font-size: 36rpx;
			color: #333;
			font-weight: 500;
			image {
				height: 44rpx;
				width: 44rpx;
				font-size: 32rpx;
				color: #333;
				margin-right: 17rpx;
			}
		}
		.course_info {
			display: flex;
			.count {
				font-weight: bold;
				font-size: 28rpx;
				color: #ea4a41;
			}
		}
		.course_info > view,
		.course_time {
			display: flex;
			align-items: center;
			font-size: 26rpx;
			color: #333;
			&::before {
				content: '';
				display: block;
				width: 10rpx;
				height: 10rpx;
				border-radius: 50%;
				margin-right: 14rpx;
				background-color: #ea4a41;
			}
		}
		.course_time,
		.course_info {
			margin-top: 33rpx;
		}
	}
	.sign_info {
		width: 100%;
		background: #fff;
		.user_con {
			width: 90%;
			margin: 0 auto;
			.user_title {
				font-size: 32rpx;
				color: #333;
				padding: 35rpx 0rpx;
				text-align: center;
				font-weight: bold;
			}
			.label {
				font-size: 28rpx;
				margin: 30rpx 0 20rpx;
				.star {
					color: #f00;
					margin-left: 10rpx;
					font-size: 40rpx;
				}
			}
			.label_con {
				font-size: 32rpx;
				font-weight: 600;
				padding-bottom: 15rpx;
				image {
					height: 40rpx;
					width: 40rpx;
					margin-right: 10rpx;
					flex-shrink: 0;
				}
			}
			textarea {
				width: 100%;
				padding: 10rpx 0;
			}
			.textareaIp {
				padding: 0;
			}
			.info_con {
				border-bottom: 1rpx solid #bfbfbf;
				.picker {
					display: flex;
					align-items: center;
					min-height: 82rpx;
					border-bottom: 1rpx solid #bfbfbf;
					.address_name {
						width: 90%;
						text {
							font-size: 32rpx;
							font-weight: 600;
						}
					}
					image {
						height: 37rpx;
						width: 39rpx;
					}
				}
				.check_con,
				.radio_con {
					width: 100%;
					display: flex;
					justify-content: flex-start;
					align-items: center;
					padding-bottom: 15rpx;
					text {
						font-size: 32rpx;
						font-weight: 600;
						margin-left: 20rpx;
					}
				}
			}
		}
	}
	.submit_container {
		width: 100%;
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 9999;
		height: 118rpx;
		background-color: #fff;
		.sign_up {
			width: 690rpx;
			height: 90rpx;
			margin: 0 auto;
			background-color: #ea4a41;
			font-size: 36rpx;
			border-radius: 45rpx;
			color: #ffffff;
		}
	}
}
</style>