wangluohuoyun-app/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" />
				</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;' class="flex">
				<view style='width:70%;position:relative;'>
					<u-input border="none" v-model='verifyCode' class="Regular" placeholder="请输入验证码" type="number" />
					<!-- <image v-if='verifyCode' @click='verifyCode=""' class='close1' src='../../static/img/login/guanbi@2x.png'></image> -->
				</view>
				<button :class='codestatus&&!sendDisabled?"active":""' @click='getcode'
					class='getcode Regular'>{{sendText}}</button>
			</view>
			<view style='border-bottom:1px solid #E8E9ED;padding:10px;position:relative;'>
				<u-input border="none" maxlength='16' class='Regular input-style' style='height:30px;'
					v-model='password' placeholder="请输入密码，6-16位字符" :type="type" />
				<!-- 				<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='register'
				class='verificationCode'>注册</button>
			<view style='color:#6A6A6A;margin-top:10px;font-size:30rpx;display:flex;justify-content:center;align-items: center;'>
				<u--image @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/sale/webview?can_share=false&url=https://liangxin.zthymaoyi.com/userAgreement.html"
					class="path" hover-class="navigator-hover">《服务协议》</navigator>和<navigator
					url="/pages/sale/webview?can_share=false&url=https://liangxin.zthymaoyi.com/screctAgreement.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.length == 11) {
					this.codestatus = true
				}
			},
			getcode() {
				var that = this
				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
						}).then(res => {
							if (res.code == 200) {
								that.sendDisabled = true
								let sec = 60
								let interval = setInterval(() => {
									sec--;
									that.sendText = sec + 's后重发'
									if (sec <= 0) {
										that.sendDisabled = false
										that.sendText = "获取验证码"
										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.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
					}).then(res => {
						if (res.code == '11002') {
							uni.showToast({
								title: '验证码错误或过期，请重新获取',
								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:2
								}).then(res => {

									if (res.data.code == 200) {
										// pc登录
										that.$request.baseRequest('post', '/commonUser/api/loginQuickly', {
											mobilePhone: this.phone,
											veriCode: "123456",
										}).then(res1 => {
											if (res1.data.code == 200) {
												uni.setStorageSync('pcUserInfo', res1.data.data)

												helper.getListByUserId()
											} else {
												that.$api.doRequest('post',
													'/commonUser/api/loginQuickly', {
														mobilePhone: '14444444444',
														veriCode: "123456",
													}).then(res2 => {
													uni.setStorageSync('pcUserInfo', res2.data
														.data)
													helper.getListByUserId()
												})
											}
										})
										uni.setStorageSync('userInfo', res.data.data)
										that.$store.commit('login', res.data.data)
										// that.liangxinLogin()
										uni.switchTab({
											url: '/pages/sale/information'
										});
									} else {
										uni.showToast({
											title: res.data.message,
											icon: 'none',
											duration: 2000
										})
									}
									uni.hideLoading()
								})
								.catch(res => {
									console.log(res);
								});
						}
					})
					.catch(res => {
						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 - 85px) ;
		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;
	}

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

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

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