wangluohuoyun-huozhuapp/pages/public/register.vue

<template>
	<view class="container">
		<u-icon class="back-btn" name="arrow-left" color="black" size="20" @click="navBack"></u-icon>
		<view class="wrapper">
			<h2 class="Semibold">手机号注册</h2>
			<view style='width:100%;margin-top:50px;border-bottom:1px solid #E8E9ED;padding:10px;position:relative;'
				class="flex">
				<view class="NumberMedium" style='width:15%;border-right:1px solid #E8E9ED;'>+86</view>
				<view style='width:85%;'>
					<!-- <u-input border="none" maxlength="11" v-model='phone' @input='phoneinput' style='padding-left:10px;'
						placeholder="请输入手机号码" type="number" class="Regular" /> -->
					<input placeholder-style="color:#AFB3BF" border="none" maxlength="11" v-model='phone'
						@input='phoneinput' style='padding-left:10px;' placeholder="请输入手机号码" type="number"
						class="Regular" />
				</view>
				<!-- <image v-if='phone!=""' @click='phone=""' class='close' src='../../static/img/login/guanbi@2x.png'></image> -->
			</view>
			<view style='width:100%;border-bottom:1px solid #E8E9ED;position:relative;padding:10px 0;' class="flex">
				<view style='width:70%;position:relative;'>
					<!-- 	<u-input border="none" v-model='verifyCode' class="Regular" placeholder="请输入验证码" type="number" maxlength="6" />
					 -->
					<input placeholder-style="color:#AFB3BF" border="none" maxlength="6" v-model='verifyCode' style=''
						placeholder="请输入验证码" type="number" class="Regular" />
				</view>
				<!--  -->
				<button :class='codestatus?"activeCode":""' @click='getcode'
					class='getcode Regular'>{{sendText}}</button>
			</view>
			<view style='border-bottom:1px solid #E8E9ED;padding:10px 0;position:relative;'>
				<!-- <u-input border="none" maxlength='16' class='Regular input-style' style='height:30px;'
					v-model='password' placeholder="请输入密码，6-16位字符" :type="type" /> -->
				<input placeholder-style="color:#AFB3BF" border="none" maxlength="16" v-model='password' style=''
					placeholder="请输入密码，6-16位字符" :type="type" class="Regular input-style" />
				<!-- 				<input maxlength='16' class='password Regular input-style' style='height:30px;' v-model='password' placeholder="请输入密码，6-16位字符" :type="type"> -->
				<!-- <image v-if='password!=""' @click='password=""' class='close2' src='../../static/img/login/guanbi@2x.png'></image> -->
				<!-- <view @click='switchover' style='position:absolute;right:0;top:38%;z-index:10;cursor:pointer;' class="iconfont " :class='type=="password"?"icon-yanjing-biyan":"icon-yanjing-zhengyan"'></view> -->
			</view>
			<button :class='phone!=""&&verifyCode!=""&&password!=""?"active":""' @click='$u.throttle(register(), 5000)'
				class='verificationCode'>注册</button>
			<view
				style='color:#6A6A6A;margin-top:10px;font-size:30rpx;display:flex;justify-content:center;align-items: center;'>
				<u--image style='margin-right:3px;position:relative;top:1rpx;' @click='consent'
					:src="consentStatus==true?'../../static/images/mine/duihao@2x.png':'../../static/images/mine/wxz.png'"
					width="17px" height="17px"></u--image>
				已阅读并同意
				<navigator
					url="/pages/public/serviceAgreement/serviceAgreement?url=http://liangxin.zthymaoyi.com/cytUserAgreement.html"
					class="path" hover-class="navigator-hover">《服务协议》</navigator>和<navigator
					url="/pages/public/cytScrectAgreement/cytScrectAgreement?url=http://liangxin.zthymaoyi.com/cytScrectAgreement.html"
					class="path" hover-class="navigator-hover">《隐私政策》</navigator>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapMutations
	} from 'vuex';
	import {
		openFSqlite,
		createFSQL,
		selectFSQL,
		addFSQL
	} from '../../util/f.js'
	import helper from '@/common/helper.js';
	import {
		queryData,
		upData,
		initData
	} from '../../util/dbUtil.js'
	export default {
		data() {
			return {
				inputContent: null,
				loginType: "wechat",
				phone: '',
				password: '',
				logining: false,
				isPhone: false,
				isApple: true,
				accessToken: '',
				params: {
					encryptedData: '',
					session_key: '',
					iv: '',
				},
				userInfo: {
					nickName: '',
					avatarUrl: '',
					gender: '',
					phone: ''
				},
				consentStatus: false,
				codestatus: false,
				type: 'password',
				inputStatus: 'none',
				verifyCode: null,
				sendText: '获取验证码',
				sendDisabled: false,
				system: '',
				platform: '',
				canIUseProfile: false
			}
		},

		onShow() {
			// this.loginType = "wechat"

			// this.$api.logout()
		},
		onLoad(options) {
			if (wx.getUserProfile) {
				console.log('--check getUserProfile--OK');
				this.canIUseProfile = true;
			}
			console.log("login on load")
			var that = this
			// that.$api.request('user', 'sendIsApple', {}).then(res => {
			// 	that.isApple = res.data
			// })
			// uni.getSystemInfo({
			// 	success: (res) => {
			// 		// console.log(res)
			// 		this.system = res.system // ios
			// 		this.platform = res.platform // 14.3
			// 	}
			// })
		},
		methods: {
			// 随机数
			randomAccess(min, max) {
				return Math.floor(Math.random() * (min - max) + max)
			},
			// 解码
			decodeUnicode(str) {
				//Unicode显示方式是\u4e00
				str = "\\u" + str
				str = str.replace(/\\/g, "%");
				//转换中文
				str = unescape(str);
				//将其他受影响的转换回原来
				str = str.replace(/%/g, "\\");
				return str;
			},
			/*
			 *@param Number NameLength 要获取的名字长度
			 */
			getRandomName(NameLength) {
				let name = ""
				for (let i = 0; i < NameLength; i++) {
					let unicodeNum = ""
					unicodeNum = this.randomAccess(0x4e00, 0x9fa5).toString(16)
					name += this.decodeUnicode(unicodeNum)
				}
				return name
			},
			phoneinput(e) {
				if (e.detail.value.length == 11) {
					this.codestatus = true
				} else {
					this.codestatus = false
				}
			},
			getcode() {
				var that = this
				if (this.sendText != "获取验证码") {
					return
				}
				if (/^0?1[3|4|5|6|7|8][0-9]\d{8}$/.test(this.phone)) {
					that.$request.baseRequest('get', '/commonUser/sendVerifyCode', {
							phone: this.phone,
							flag: 3
						}).then(res => {
							if (res.code == 200) {
								that.codestatus = false
								let sec = 60
								let interval = setInterval(() => {
									sec--;
									that.sendText = sec + 's后重发'
									if (sec <= 0) {
										that.sendDisabled = true
										that.sendText = "获取验证码"
										that.codestatus = true
										clearInterval(interval)
									}
								}, 1000)
							} else {
								uni.showToast({
									title: res.message,
									icon: 'none',
									duration: 2000
								})
							}
						})
						.catch(res => {
							uni.showToast({
								title: res.data.message,
								icon: 'none',
								duration: 2000
							})
						});
				} else {
					uni.showToast({
						title: '请输入正确的手机号',
						icon: 'none',
						duration: 2000
					})
				}

			},
			register() {
				var that = this
				if (!this.consentStatus) {
					uni.showToast({
						title: '请勾选协议',
						icon: 'none',
						duration: 2000
					})
					return
				}
				if (!this.phone) {
					uni.showToast({
						title: '手机号不能为空',
						icon: 'none',
						duration: 2000
					})
					return
				}
				if (!this.verifyCode) {
					uni.showToast({
						title: '验证码不能为空',
						icon: 'none',
						duration: 2000
					})
					return
				}
				if (!this.password) {
					uni.showToast({
						title: '密码不能为空',
						icon: 'none',
						duration: 2000
					})
					return
				}
				if (this.verifyCode.length > 6) {
					uni.showToast({
						title: '验证码错误',
						icon: 'none',
						duration: 2000
					})
					return
				}
				if (this.password.length < 6) {
					uni.showToast({
						title: '密码输入错误',
						icon: 'none',
						duration: 2000
					})
					return
				}
				var username = this.getRandomName(3)
				that.$request.baseRequest('post', '/commonUser/register', {
						phone: this.phone,
						password: this.password,
						verifyCode: this.verifyCode,
						userName: username,
						identification: 2,
						avatarUrl: "https://taohaoliang.oss-cn-beijing.aliyuncs.com/appData/165672849620975.png" //司机默认头像
					}).then(res => {
						if (res.code == '11003') {
							uni.showToast({
								title: res.message,
								icon: 'none',
								duration: 2000
							})
							return
						} else if (res.code == '11004') {
							uni.showToast({
								title: '该手机号已注册，可直接登录',
								icon: 'none',
								duration: 2000
							})
							return
						} else {
							uni.showLoading({
								title: '登录中',
								mask: true
							})
							that.$request.baseRequest('get', '/commonUser/login', {
									phone: this.phone,
									password: this.password,
									loginFlag: 1,
									identification: 2
								}).then(res => {
									if (res.code == 200) {
										console.log("userInfo", res.data)
										uni.setStorageSync('userInfo', res.data)
										that.$request.baseRequest('get', '/newsInfo/unreadMessage', {
											reCommonId: this.userInfo.id,
										}).then(res3 => {
											if (res3.data || res3.data == 0) {
												let name = 'myTip';
												let value = res3.data
												if (value == 0) {
													uni.removeTabBarBadge({
														index: 2
													})
												}
												that.$store.commit('$uStore', {
													name,
													value
												});
												if (value != 0 && value) {
													uni.setTabBarBadge({
														index: 2,
														text: value + ""
													})
												}
											}
										})
										uni.hideLoading()
										that.$store.commit('login', res.data)
										var name = 'userInfo';
										var value = res.data;
										that.$store.commit('$uStore', {
											name,
											value
										});
										uni.switchTab({
											url: '/pages/mine/index'
										});
									} else {
										uni.hideLoading()
										uni.showToast({
											title: res.message,
											icon: 'none',
											duration: 2000
										})
									}
									uni.hideLoading()
								})
								.catch(res => {
									uni.hideLoading()
									console.log(res);
								});
						}
					})
					.catch(res => {
						uni.hideLoading()
						console.log(res);
					});
			},
			consent() {
				this.consentStatus = !this.consentStatus
				uni.setStorage({
					key: 'policyStorageKey',
					data: this.consentStatus
				});
			},
			switchover() {
				if (this.type == 'password') {
					this.type = 'text'
				} else {
					this.type = 'password'
				}
			},
			...mapMutations(['login']),
			navBack() {
				uni.navigateBack();
			},
		},

	}
</script>

<style lang='scss' scoped>
	uni-navigator {
		display: inline-block;
		color: #2772FB;
	}

	.password {
		border: none;
		outline: none;

	}

	.apple {
		background: #000;
		width: 35px;
		height: 35px;
		padding: 8px;
		border-radius: 50%;
		vertical-align: middle;
	}

	page {
		background: #fff;
	}

	.cuIcon-weixin {
		background: #2772FB;
		color: #fff;
		font-size: 18px;
		padding: 9px;
		border-radius: 50%;
		vertical-align: middle;
		margin-right: 5px;
	}

	.container {
		padding-top: 85px;
		position: relative;
		width: 100vw;
		height: calc(100vh - 13vh);
		overflow: hidden;
		background: url('~@/static/images/mine/bg@2x.png');
		/* background-size: 100%; */
	}

	.close {
		width: 20px;
		height: 20px;
		position: absolute;
		right: 0px;
	}

	.close1 {
		width: 20px;
		height: 20px;
		position: absolute;
		right: 10px;
		top: 0;
	}

	.close2 {
		width: 15px;
		height: 15px;
		position: absolute;
		right: 19px;
		top: 50%;
		transform: translateY(-45%);
	}

	.wrapper {
		position: relative;
		z-index: 90;
		padding-bottom: 40upx;
		height: 100%;
		padding: 0 30px;
	}

	.back-btn {
		position: absolute;
		left: 40upx;
		z-index: 9999;
		padding-top: var(--status-bar-height);
		top: 40upx;
		font-size: 40upx;
		color: black;
	}

	.verificationCode {
		margin-top: 20px;
		background: #F5F6F9;
		color: #AFB3BF;
	}

	.verificationCode:after {
		border: none;
	}

	.register {
		position: absolute;
		bottom: 20px;
		left: 50%;
		transform: translateX(-50%);
		color: #333333;
		height: 50px;
		line-height: 50px;
		border-radius: 30px;
		border: 1px solid #444444;
	}

	.register:after {
		border: none;
	}

	.verificationCode.active {
		background: #2772FB;
		color: #fff;
	}

	.getcode {
		font-size: 14px;
		position: absolute;
		right: 0;
		top: 50%;
		transform: translateY(-50%);
		color: #AFB3BF;
		background: #F5F6F9;
		height: 30px;
		line-height: 30px;

	}

	.getcode:after {
		border: none;
	}

	uni-navigator {
		display: inline-block;
		color: #2772FB;
	}

	.activeCode {
		background: #2772FB;
		color: #fff;
	}

	.NumberMedium {
		display: flex;
		align-items: center;
	}

	.flex {
		align-items: center;
	}
</style>