caimei-applets-caimei/pages/login/register.vue

<template>
	<view class="container register" :style="{ paddingTop: CustomBar + 'px' }">
		<cu-custom :navbar-data="nvabarData" @navigateBack="hanldNavigateBack"></cu-custom>
		<view class="register-main clearfix">
			<view class="register-logo">
				<image class="logo" src="https://static.caimei365.com/app/img/icon/logo@2x.png" mode=""></image>
			</view>
			<view class="register-row clearfix">
				<view class="register-from">
					<view class="label">联系人:</view>
					<input
						class="row-input"
						type="text"
						name="input"
						v-model="params.userName"
						placeholder="请输入机构联系人姓名"
						maxlength="6"
					/>
				</view>
			</view>
			<view class="register-row clearfix">
				<view class="register-from">
					<view class="label">手机号:</view>
					<input
						class="row-input"
						type="number"
						name="input"
						v-model="params.bindMobile"
						placeholder="请输入联系人常用手机号"
						maxlength="11"
					/>
				</view>
			</view>
			<view class="register-row clearfix">
				<view class="register-from">
					<view class="label">短信验证码:</view>
					<input
						class="row-input code"
						type="text"
						v-model="params.smsCode"
						placeholder="请输入短信验证码"
						maxlength="6"
					/>
					<view class="row-btn" :class="[isMobileDisabled ? 'disabled' : '']">
						<button
							class="row-input"
							type="button"
							@click.stop="getMobileCodeFn"
							:disabled="isMobileDisabled"
						>
							{{ mobileCodeText }}
						</button>
					</view>
				</view>
			</view>
			<view class="register-row clearfix">
				<view class="register-from">
					<view class="label">登录密码:</view>
					<input
						class="row-input"
						type="password"
						name="input"
						v-model="params.password"
						placeholder="密码必须为8-16位字母数字组合"
						maxlength="16"
					/>
				</view>
			</view>
			<view class="register-row clearfix">
				<view class="register-from">
					<view class="label">确认密码:</view>
					<input
						class="row-input"
						type="password"
						name="input"
						v-model="params.passWordConfirm"
						placeholder="请确认密码"
						maxlength="16"
					/>
				</view>
			</view>
			<view class="register-main clearfix">
				<view class="register-agree">
					<view class="agree-text" @tap.stop="agreeCheck()">
						<button
							class="checkbox iconfont"
							:class="[isCheck ? 'icon-gouxuan' : 'icon-weigouxuan']"
						></button>
						我已阅读并同意
						<text @click.stop="this.$api.navigateTo('/pages/service/service?id=1036&title=机构协议')"
							>《机构协议》</text
						>
						<text @click.stop="this.$api.navigateTo('/pages/service/service?id=1023&title=用户协议')"
							>《用户协议》</text
						>及
						<text @click.stop="this.$api.navigateTo('/pages/service/service?id=1013&title=隐私权政策')"
							>《隐私权政策》</text
						>
					</view>
				</view>
				<view class="register-row ">
					<view class="register-btn sub" @click.stop="registerStepsfirst">注册</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
import authorize from '@/common/config/authorize.js'
import wxLogin from '@/common/config/wxLogin.js'
import mpvueCityPicker from '@/components/mpvue-citypicker/mpvueCityPicker.vue'
import { beautyList, mentuzCampNullList, medicaCampNullList } from '@/common/json/data.json.js' //本地数据
import { uploadFileImage } from '@/services/public.js'
export default {
	components: {
		mpvueCityPicker
	},
	data() {
		return {
			nvabarData: {
				//顶部自定义导航
				showCapsule: 1, // 是否显示左上角图标  1表示显示  0表示不显示,
				showSearch: 0,
				title: '机构注册', // 导航栏 中间的标题
				haveBack: true,
				textLeft: this.$store.state.isIphone
			},
			CustomBar: this.CustomBar, // 顶部导航栏高度
			isMobileDisabled: false, //手机验证码按钮控制
			mobilCount: '', //倒计时
			mobileCodeText: '获取验证码',
			mobilTime: null,
			params: {
				userName: '',
				bindMobile: '',
				isAgreed: 0,
				password: '',
				passWordConfirm: '',
				smsCode: '',
				avatarUrl: '',
				nickName: '',
				source: 1,
				unionId: ''
			},
			imageCode: '', //图形验证码
			imageCodeUrl: '', //图形验证码图片
			imageCodetoken: '', //图形验证校验
			isCheck: false, //是否勾选协议
			userID: '', //机构userID
			clubID: '' //机构ID
		}
	},
	onLoad(option) {},
	computed: {
		...mapState(['isWxAuthorize'])
	},
	methods: {
		...mapMutations(['login', 'wxLogin']),
		hanldNavigateBack() {
			this.$util.modal('', '注册尚未完成，确定放弃注册吗？', '确定', '取消', true, () => {
				uni.navigateBack({
					delta: 1
				})
			})
		},

		registerStepsfirst() {
			if (this.params.userName == '') {
				this.$util.msg('请输入联系人名称', 2000)
				return
			}
			if (this.params.bindMobile == '') {
				this.$util.msg('请输入手机号', 2000)
				return
			}
			if (!this.$reg.isMobile(this.params.bindMobile)) {
				this.$util.msg('手机格式不正确', 2000)
				return
			}
			if (this.params.smsCode == '') {
				this.$util.msg('请输入手机验证码', 2000)
				return
			}
			if (!this.$reg.isMobileCode(this.params.smsCode)) {
				this.$util.msg('验证码格式不正确', 2000)
				return
			}
			if (this.params.password == '') {
				this.$util.msg('请输入密码', 2000)
				return
			}
			if (!this.$reg.checkPwd(this.params.password)) {
				this.$util.msg('密码必须为8-16位字母数字的组合', 2000)
				return
			}
			if (this.params.passWordConfirm == '') {
				this.$util.msg('请再次确认密码', 2000)
				return
			}
			if (this.params.passWordConfirm !== this.params.password) {
				this.$util.msg('两次输入的密码不一致', 2000)
				return
			}
			if (this.params.isAgreed == 0) {
				this.$util.msg('请勾选同意协议', 2000)
				return
			}
			this.params.unionId = uni.getStorageSync('unionId')
			this.GetUserProfile()
		},
		GetUserProfile() {
			//获取用户微信个人信息
			const self = this
			wx.getUserProfile({
				desc: '采美采购商城小程序获取您的信息', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
				success(res) {
					console.log('微信获取用户信息新API', res)
					self.wxLogin(res.userInfo)
					self.params.nickName = res.userInfo.nickName
					self.params.avatarUrl = res.userInfo.avatarUrl
					self.UserRegisterClub(self.params)
					// 友盟自定义事件
					if (process.env.NODE_ENV != 'development') {
						self.$uma.trackEvent('Um_Event_ConfirmRegister', {
							Um_Key_PageName: '注册机构',
							Um_Key_PageCategory: '注册机构页面'
						})
					}
				},
				fail() {
					self.$util.msg('授权失败', 2000)
				}
			})
		},
		UserRegisterClub(params) {
			this.UserService.UserRegisterClub(params)
				.then(response => {
					wxLogin.wxLoginAuthorize()
					setTimeout(() => {
						this.$api.switchTabTo('/pages/tabBar/user/user')
					}, 2000)
				})
				.catch(error => {
					this.$util.msg(error.msg, 2000)
				})
		},
		storeUpdataeStatus(data) {
			uni.setStorageSync('token', data.token)
			this.$store.commit('updateStatus', data)
			this.login(data)
		},
		getMobileCodeFn() {
			if (this.params.bindMobile == '') {
				this.$util.msg('请输入手机号', 2000)
				return
			}
			if (!this.$reg.isMobile(this.params.bindMobile)) {
				this.$util.msg('请输入正确的手机号', 2000)
				return
			}
			let params = {
				mobile: this.params.bindMobile,
				isCheckCaptcha: 1,
				activateCodeType: 2,
				platformType: 2
			}
			this.isMobileDisabled = true
			this.PublicService.GetRegisterMobileCode(params)
				.then(response => {
					this.$util.msg('验证短信已发送', 2000)
					const TIME_COUNT = 60
					if (!this.mobilTime) {
						this.mobilCount = TIME_COUNT
						this.isMobileDisabled = true
						this.mobilTime = setInterval(() => {
							if (this.mobilCount > 1 && this.mobilCount <= TIME_COUNT) {
			  			this.mobilCount--
								this.mobileCodeText = this.mobilCount + 's重新发送'
							} else {
								this.isMobileDisabled = false
								clearInterval(this.mobilTime)
								this.mobilTime = null
								this.mobileCodeText = '获取验证码'
							}
						}, 1000)
					}
				})
				.catch(error => {
					this.$util.msg(error.msg, 2000)
					this.isMobileDisabled = false
				})
		},
		agreeCheck() {
			this.isCheck = !this.isCheck
			if (this.isCheck) {
				this.params.isAgreed = 1
			} else {
				this.params.isAgreed = 0
			}
		},
		async InitAuthorize() {
			//是否已授权 0:为取消授权 1:为已授权 2:为未操作
			wxLogin.wxLoginQuick()
		}
	},
	onShow() {
		this.InitAuthorize()
	}
}
</script>

<style lang="scss">
.register {
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	background-size: contain;
	.register-main {
		width: 100%;
		height: auto;
		position: relative;
		.register-consult {
			width: 110rpx;
			height: 68rpx;
			background: linear-gradient(223deg, rgba(225, 86, 21, 0.6) 0%, rgba(225, 86, 10, 0.3) 100%);
			border-radius: 34rpx 0 0 34rpx;
			position: absolute;
			right: 0;
			bottom: 120rpx;
			text-align: left;
			line-height: 68rpx;
			padding-left: 20rpx;
			.icon-kefunv {
				font-size: 48rpx;
				color: #31313b;
				float: left;
			}
			.text {
				font-size: $font-size-24;
				display: block;
				float: left;
				width: 60rpx;
				line-height: 30rpx;
				color: #ffffff;
				margin-top: 6rpx;
			}
		}
		.register-agree {
			display: flex;
			flex-direction: column;
			align-items: center;
			margin: 100rpx 0 20rpx 0;
			.agree-text {
				.checkbox {
					float: left;
					margin: 4rpx 6rpx 0 0;
					color: #999999;
					font-size: $font-size-34;
					&.icon-gouxuan {
						color: $color-system;
					}
				}
				font-size: $font-size-22;
				line-height: 44rpx;
				color: #999999;
				text {
					color: #1890f9;
				}
			}
		}
		.register-logo {
			width: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
			height: 284rpx;
			padding: 60rpx 0 40rpx 0;
			.logo {
				width: 611rpx;
				height: 284rpx;
				display: block;
			}
		}
		&.detailed {
			padding-bottom: 330rpx;
		}
		.register-row {
			width: 100%;
			height: auto;
			padding: 0 75rpx;
			margin-bottom: 30rpx;
			box-sizing: border-box;
			&.none {
				margin-bottom: 0;
			}
			&.login {
				display: flex;
			}
			.register-text {
				line-height: 44rpx;
				margin-top: 100rpx;
				font-size: $font-size-24;
				color: #999999;
				text-align: justify;
				.txt {
					margin-right: 15rpx;
				}
			}
			.register-title {
				line-height: 44rpx;
				font-size: $font-size-24;
				color: $text-color;
				text-align: left;
				&.first {
					margin-top: 20rpx;
				}
			}
			.register-tip {
				line-height: 64rpx;
				font-size: $font-size-24;
				color: #cecece;
				text-align: left;
			}
			.register-from {
				width: 100%;
				height: 80rpx;
				background: #ffffff;
				position: relative;
				border-bottom: 1px solid #e1e1e1;
				.label {
					text-align: left;
					font-size: $font-size-28;
					color: #666666;
					line-height: 88rpx;
					float: left;
				}
				.row-input {
					width: 440rpx;
					padding-left: 10rpx;
					font-size: $font-size-28;
					color: $text-color;
					line-height: 80rpx;
					float: left;
					height: 80rpx;
					&.none {
						color: #999999;
					}
					&.picker {
						text-align: left;
						color: #333333;
					}
					&.keshi {
						width: 550rpx;
					}
					&.code {
						width: 264rpx;
					}
				}
				&.img-btn {
					width: 220rpx;
					height: 80rpx;
					padding: 0;
					float: left;
					background: #ffffff;
					display: block;
					.vscodeimg {
						width: 150rpx;
						height: 80rpx;
						float: left;
						display: flex;
						flex-direction: column;
						align-items: center;
						border-radius: 14rpx;
						image {
							width: 150rpx;
							height: 80rpx;
							border-radius: 14rpx;
						}
					}
					.vscod-refresh {
						width: 70rpx;
						float: right;
						text-align: right;
						display: flex;
						flex-direction: column;
						align-items: center;
						line-height: 44rpx;
						.icon-shuaxin {
							font-size: 48rpx;
							color: #333333;
						}
						.ref-text {
							font-size: 24rpx;
							color: #333333;
						}
					}
				}
				&.imgcode {
					width: 410rpx;
					float: left;
					margin-right: 20rpx;
					.row-input {
						width: 230rpx;
					}
				}
				.row-btn {
					width: 180rpx;
					height: 64rpx;
					float: left;
					background: $btn-confirm;
					padding: 0;
					border-radius: 32rpx;
					.row-input {
						width: 180rpx;
						height: 64rpx;
						line-height: 64rpx;
						padding: 0;
						color: #ffffff;
						background: $btn-confirm;
						text-align: center;
						border-radius: 32rpx;
						&.other {
							width: 180rpx;
							background: #f7f7f7;
							margin-right: 20rpx;
						}
						&.none {
							background: #f7f7f7;
						}
					}
					&.disabled {
						background: #f7f7f7;
						.row-input {
							background: #f7f7f7;
							color: #999999;
							font-size: 24rpx;
						}
					}
				}
				&.picker {
					padding: 0 24rpx;
					width: 654rpx;
					height: 88rpx;
					line-height: 88rpx;
					.label {
						line-height: 88rpx;
					}
					.row-input {
						width: 470rpx;
						height: 88rpx;
						line-height: 88rpx;
						padding-left: 30rpx;
					}
				}
				&.radio {
					padding: 0 24rpx;
					width: 654rpx;
					height: 288rpx;
					.row-input {
						width: 100%;
						height: 88rpx;
						line-height: 88rpx;
						padding-left: 0;
					}
					.row-radio {
						float: left;
						transform: scale(0.8);
					}
					.row-text {
						width: 100rpx;
						text-align: center;
						float: left;
					}
				}
				&.group {
					padding: 0 24rpx;
					width: 654rpx;
					height: auto;
					background: #ffffff;
					margin-top: 30rpx;
					.label {
						line-height: 76rpx;
					}
					.row-input {
						width: 100%;
						height: 88rpx;
						line-height: 88rpx;
						padding-left: 0;
					}
					.row-radio {
						float: left;
					}
					.row-text {
						width: 100rpx;
						text-align: center;
						float: left;
					}
				}
				&.btn {
					margin-top: 0;
				}
				.content-class {
					margin: 20rpx auto;
					display: flex;
					flex-flow: row wrap;
					justify-content: space-between;
					align-items: center;
					&.btn {
						margin: 0 auto;
						margin-left: 116rpx;
					}
					.row-input {
						display: flex;
						width: 220rpx;
						height: 40rpx;
						padding: 24rpx;
						text-align: left;
						border-radius: 10rpx;
						font-size: $font-size-28;
						color: $text-color;
					}
					.confirm-btn {
						width: 200rpx;
						height: 88rpx;
						border-radius: 10rpx;
						line-height: 88rpx;
						text-align: center;
						&.other {
							width: 213rpx;
						}
						&.none {
							color: #ffffff;
							background: $btn-confirm;
						}
						&.disabled {
							color: #999999;
						}
					}
					.item {
						width: 155rpx;
						height: 60rpx;
						font-size: $font-size-28;
						line-height: 60rpx;
						border-radius: 10rpx;
						margin: 10rpx;
						text-align: center;
						box-sizing: border-box;
						border: 1rpx solid #efefef;
						float: left;
						checkbox {
							display: none;
						}
					}
					.on {
						border-color: $color-system;
						color: $color-system;
					}
				}
			}
			.row-login {
				flex: 1;
				font-size: $font-size-28;
				color: $text-color;
				text-align: left;
			}
			.row-logincode {
				flex: 1;
				font-size: $font-size-28;
				color: $text-color;
				text-align: right;
			}
			.icon-xiayibu {
				width: 88rpx;
				height: 88rpx;
				position: absolute;
				right: 0;
				top: 0;
				line-height: 88rpx;
				text-align: center;
			}
			&.text-textarea {
				background: #ffffff;
				.textarea {
					width: 654rpx;
					height: 180rpx;
					background: #f7f7f7;
					padding: 24rpx;
					font-size: $font-size-28;
					color: $text-color;
					z-index: 1;
					border-radius: 14rpx;
				}
				.textarea.hide {
					opacity: 0;
				}
				.textarea.show {
					color: #999999;
				}
			}
		}
		.register-picture {
			height: 102rpx;
			margin: 30rpx 0;
			width: 42%;
			float: left;
			&.zz {
				width: 100%;
			}
			.label {
				float: left;
				font-size: $font-size-28;
				color: $text-color;
				line-height: 102rpx;
				width: 150rpx;
				text-align: right;
				&.zz {
					width: 230rpx;
				}
			}
			.upload-picture {
				float: left;
				height: 100rpx;
				.upload-none {
					width: 100rpx;
					height: 100rpx;
					text-align: center;
					line-height: 100rpx;
					color: #999999;
					border: 1px solid #999999;
					border-radius: 10rpx;
					margin: 0 20rpx;
					.iconfont {
						font-size: $font-size-28;
					}
				}
				.upload-image {
					width: 100rpx;
					height: 100rpx;
					border-radius: 10rpx;
					margin: 0 20rpx;
					position: relative;
					image {
						width: 100rpx;
						height: 100rpx;
						border-radius: 10rpx;
					}
					.upload-del {
						width: 40rpx;
						height: 40rpx;
						position: absolute;
						top: -20rpx;
						right: -20rpx;
						line-height: 40rpx;
						text-align: center;
						.iconfont {
							font-size: $font-size-32;
							color: #999999;
						}
					}
				}
			}
		}
		.register-input {
			width: 654rpx;
			height: 40rpx;
			padding: 24rpx;
			margin: 0 auto;
			margin-bottom: 60rpx;
			background: #f7f7f7;
			border-radius: 14rpx;
			.input {
				width: 100%;
				height: 100%;
				background: #f7f7f7;
				font-size: $font-size-28;
				line-height: 40rpx;
				color: #333333;
				border-radius: 14rpx;
			}
		}
		.register-fiexd {
			width: 100%;
			height: auto;
			position: fixed;
			bottom: 0;
			left: 0;
			z-index: 999;
			background: #ffffff;
		}
		.register-btn {
			width: 100%;
			height: 88rpx;
			border-radius: 44rpx;
			font-size: $font-size-28;
			line-height: 88rpx;
			color: #ffffff;
			margin: 0 auto;
			text-align: center;
			background: $btn-confirm;
			margin-top: 96rpx;
			&.none {
				border: 1px solid $color-system;
				background: #ffffff;
				color: $color-system;
				margin-top: 0;
			}
			&.sub {
				margin-top: 0;
			}
		}
	}
}
</style>