syyxuniapp/pages/users/login/register.vue

<template>
	<view class="login-wrapper" :style="colorStyle">
		<view class="login-top"></view>
		<view class="shading">
			<image :src="logoUrl" v-if="logoUrl" />
			<image src="../static/logo2.png" v-else />
		</view>
		<view class="whiteBg">
			<view class="tips">
				<view class="tips-btn on">
					<view>注册账号</view>
					<view class="line"></view>
				</view>
			</view>
			<view class="list">
				<view class="item">
					<view class="acea-row row-middle">
						<image src="../static/phone_1.png" class="itemImg-add"></image>
						<input type="text" placeholder="输入手机号码" v-model="account" maxlength="11" />
					</view>
				</view>
				<view class="item">
					<view class="acea-row row-middle">
						<image src="../static/phone_1.png" class="itemImg-add"></image>
						<input type="text" placeholder="输入邀请码" v-model="spread_spid" maxlength="11" />
					</view>
				</view>
				<view class="item">
					<view class="acea-row row-middle">
						<image src="../static/code_2.png" class="item-img"></image>
						<input type="text" placeholder="填写验证码" maxlength="6" class="codeIput" v-model="captcha" />
						<button class="code" :disabled="disabled" :class="disabled === true ? 'on' : ''" @click="code">
							{{ text }}
						</button>
					</view>
				</view>
			</view>
			<view class="logon" @click="loginMobile">注册</view>
			<!-- #ifdef H5 -->
			<view class="logon" style="margin-top: 20rpx;" @click="domApp">下载APP</view>
			<!-- #endif -->
			<view class="protocol">
				<checkbox-group @change='ChangeIsDefault'>
					<checkbox :class="inAnimation?'trembling':''" @animationend='inAnimation=false'
						:checked="protocol ? true : false" />已阅读并同意 <text class="main-color"
						@click="privacy('user')">《用户协议》</text>
					与<text class="main-color" @click="privacy('privacy ')">《隐私协议》</text>
				</checkbox-group>
			</view>
		</view>
		<view class="bottom"></view>
		<Verify @success="success" :captchaType="'blockPuzzle'" :imgSize="{ width: '330px', height: '155px' }"
			ref="verify"></Verify>
		<view class="copyright" v-if="copyrightContext">{{copyrightContext}}</view>

	</view>
</template>
<script>
	import dayjs from "@/plugin/dayjs/dayjs.min.js";
	import sendVerifyCode from "@/mixins/SendVerifyCode";
	import {
		getAppVersion
	} from '@/api/api.js';
	import {
		loginMobile,
		registerVerify,
		getCodeApi,
		getUserInfo,
	} from "@/api/user";
	import attrs, {
		required,
		alpha_num,
		chs_phone
	} from "@/utils/validate";
	import {
		validatorDefaultCatch
	} from "@/utils/dialog";
	import {
		getLogo
	} from "@/api/public";
	// import cookie from "@/utils/store/cookie";
	import {
		VUE_APP_API_URL
	} from "@/utils";
	// #ifdef APP-PLUS
	import {
		wechatAppAuth
	} from '@/api/api.js'
	// #endif
	const BACK_URL = "login_back_url";
	import colors from '@/mixins/color.js';
	import Verify from '../components/verify/verify.vue';
	export default {
		name: "Login",
		components: {
			Verify
		},
		mixins: [sendVerifyCode, colors],
		data: function() {
			return {
				inAnimation: false,
				protocol: false,
				account: "",
				password: "",
				spread_spid: '',
				captcha: "",
				type: "login",
				logoUrl: "",
				keyCode: "",
				keyLock: true,
				copyrightContext: ''
			};
		},
		onLoad(res) {
			let self = this;
			if (res.spid) {
				self.spread_spid = res.spid;
			}
		},
		mounted: function() {
			// this.getCode();
			this.getLogoImage();
			this.spread_spid = this.$Cache.get("spid");
			if (!this.spid) {
				this.spread_spid = this.$Cache.get("spid");
			}
		},
		methods: {
			// #ifdef H5
			domApp() {
				const bool = navigator.userAgent.toLowerCase().match(/MicroMessenger/i) == 'micromessenger';
				if (bool) {
					uni.showModal({
						title: '提示',
						content: '无法在微信中下载，请用浏览器打开下载',
						showCancel: false,
					});
				} else {
					getAppVersion().then((res) => {
						console.log(res, 'res');
						window.open(res.data.apk)
					}).catch((err) => {
						console.log(err, 'err');
					})
				}
			},
			// #endif
			ChangeIsDefault(e) {
				this.$set(this, 'protocol', !this.protocol);
			},
			success(data) {
				this.$refs.verify.hide()
				getCodeApi()
					.then(res => {
						this.keyCode = res.data.key;
						this.getCode(data);
					})
					.catch(res => {
						this.$util.Tips({
							title: res
						});
					});
			},
			code() {
				let that = this
				if (!that.protocol) {
					this.inAnimation = true
					return that.$util.Tips({
						title: '请先阅读并同意协议'
					});
				}
				if (!that.account) return that.$util.Tips({
					title: '请填写手机号码'
				});
				if (!/^1(3|4|5|7|8|9|6)\d{9}$/i.test(that.account)) return that.$util.Tips({
					title: '请输入正确的手机号码'
				});
				this.$refs.verify.show()
			},
			async getLogoImage() {
				let that = this;
				getLogo(2).then(res => {
					that.logoUrl = res.data.logo_url;
					that.copyrightContext = res.data.copyrightContext;
				});
			},
			async loginMobile() {
				let that = this;
				if (!that.protocol) {
					this.inAnimation = true
					return that.$util.Tips({
						title: '请先阅读并同意协议'
					});
				}
				if (!that.account) return that.$util.Tips({
					title: '请填写手机号码'
				});
				if (!/^1(3|4|5|7|8|9|6)\d{9}$/i.test(that.account)) return that.$util.Tips({
					title: '请输入正确的手机号码'
				});
				if (!that.captcha) return that.$util.Tips({
					title: '请填写验证码'
				});
				if (!/^[\w\d]+$/i.test(that.captcha)) return that.$util.Tips({
					title: '请输入正确的验证码'
				});


				if (this.keyLock) {
					this.keyLock = !this.keyLock
				} else {
					return that.$util.Tips({
						title: '请勿重复点击'
					});
				}
				loginMobile({
						phone: that.account,
						captcha: that.captcha,
						spread_spid: that.spread_spid
					})
					.then(res => {
						let data = res.data;
						that.$store.commit("LOGIN", {
							'token': data.token,
							'time': data.expires_time - this.$Cache.time()
						});
						let backUrl = that.$Cache.get(BACK_URL) || "/pages/index/index";
						that.$Cache.clear(BACK_URL);
						uni.showToast({
							title: '注册成功'
						});
						getUserInfo().then(res => {
							this.keyLock = true
							that.$store.commit("SETUID", res.data.uid);
							that.$store.commit("UPDATE_USERINFO", res.data);
							if (backUrl.indexOf('/pages/users/login/index') !== -1) {
								backUrl = '/pages/index/index';
							}
							// uni.reLaunch({
							// 	url: backUrl
							// });
						})
					})
					.catch(res => {
						this.keyLock = true
						that.$util.Tips({
							title: res
						});
					});


			},
			async getCode(data) {
				console.log('data-------', data);
				let that = this;
				if (!that.account) return that.$util.Tips({
					title: '请填写手机号码'
				});
				if (!/^1(3|4|5|7|8|9|6)\d{9}$/i.test(that.account)) return that.$util.Tips({
					title: '请输入正确的手机号码'
				});
				await registerVerify({
						phone: that.account,
						type: that.type,
						key: that.keyCode,
						captchaType: 'blockPuzzle',
						captchaVerification: data.captchaVerification
					})
					.then(res => {
						that.$util.Tips({
							title: res.msg
						});
						that.sendCode();
					})
					.catch(res => {
						that.$util.Tips({
							title: res
						});
					});
			},
			privacy(type) {
				uni.navigateTo({
					url: "/pages/users/privacy/index?type=" + type
				})
			}
		}
	};
</script>

<style lang="scss">
	.copyright {
		width: 650rpx;
		position: fixed;
		bottom: 30rpx;
		left: 50%;
		margin-left: -325rpx;
		font-size: 20rpx;
		color: #999999;
		text-align: center;

		.domain {
			color: #478BF1;
			margin-left: 6rpx;
		}
	}

	.itemImg-add {
		width: 24rpx;
		height: 34rpx;
	}

	.item-img {
		width: 28rpx;
		height: 32rpx;
	}

	/deep/uni-checkbox .uni-checkbox-input {
		margin-top: -6rpx;
	}

	.appLogin {
		margin-top: 60rpx;

		.hds {
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 24rpx;
			color: #B4B4B4;

			.line {
				width: 68rpx;
				height: 1rpx;
				background: #CCCCCC;
			}

			p {
				margin: 0 20rpx;
			}
		}

		.btn-wrapper {
			display: flex;
			align-items: center;
			justify-content: center;
			margin-top: 30rpx;

			.btn {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 68rpx;
				height: 68rpx;
				border-radius: 50%;
			}

			.apple-btn {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 246rpx;
				height: 66rpx;
				margin-left: 30rpx;
				background: #EAEAEA;
				border-radius: 34rpx;
				font-size: 24rpx;

				.icon-s-pingguo {
					color: #333;
					margin-right: 10rpx;
					font-size: 34rpx;
				}
			}

			.iconfont {
				font-size: 40rpx;
				color: #fff;
			}

			.wx {
				background-color: #61C64F;
			}

			.mima {
				background-color: #28B3E9;
			}

			.yanzheng {
				background-color: #F89C23;
			}

			.pingguo {
				margin-left: 60rpx;
				background-color: #000;
			}

		}
	}

	.main-color {
		color: var(--view-theme);
	}

	.code img {
		width: 100%;
		height: 100%;
	}

	.acea-row.row-middle {
		input {
			margin-left: 20rpx;
			display: block;
		}
	}

	.login-wrapper {
		.login-top {
			height: 358rpx;
			background-color: var(--view-theme);
			background-image: url(../static/login.png);
			background-size: cover;
			background-repeat: no-repeat;

			image {
				width: 101%;
				height: 100%;
			}
		}

		.shading {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			margin-top: -230rpx;
			position: relative;
			z-index: 8;

			image {
				width: 180rpx;
				height: 180rpx;
				top: 40rpx;
			}
		}

		.whiteBg {
			background-color: #fff;
			margin: -30rpx 56rpx 0rpx 56rpx;
			box-shadow: 0px 2px 14px 0px rgba(0, 0, 0, 0.08);
			border-radius: 8px;
			padding: 60rpx;
			position: relative;
			z-index: 6;

			.tips {
				display: flex;
				align-items: center;
				justify-content: center;
				height: 50rpx;
				margin: 40rpx;
				color: #999;

				.tips-btn {
					margin: 0 31rpx 0 48rpx;
					color: #999999;
					font-weight: bold;
					font-size: 32rpx;


					/* Safari 与 Chrome */
					.line {
						width: 80rpx;
						height: 6rpx;
						background: linear-gradient(135deg, var(--view-minorColor) 0%, var(--view-theme) 100%);
						border-radius: 2px;
						margin: 10rpx auto 0 auto;
						animation: myfirst .3s;
						-webkit-animation: myfirst .3s;
					}

					.none {
						width: 80rpx;
						background: #fff;
						height: 6rpx;
					}
				}

				@keyframes myfirst {
					0% {
						width: 0rpx;
					}

					100% {
						width: 80rpx;
					}
				}

				@-webkit-keyframes myfirst

				/* Safari 与 Chrome */
					{
					0% {
						width: 0rpx;
					}

					100% {
						width: 80rpx;
					}
				}

				.tips-btn.on {
					font-size: 36rpx;
					color: var(--view-theme);
				}
			}

			.list {
				border-radius: 16rpx;
				overflow: hidden;

				.forgetPwd {
					text-align: right;
					margin-top: 10rpx;
					color: #666666;
					font-size: 24rpx;
				}

				.item {
					border-bottom: 1px solid #F0F0F0;
					background: #fff;

					.row-middle {
						position: relative;
						padding: 16rpx 25rpx;

						input {
							flex: 1;
							font-size: 28rpx;
							height: 80rpx;
						}

						.code {
							position: absolute;
							right: 30rpx;
							top: 50%;
							color: var(--view-theme);
							font-size: 26rpx;
							transform: translateY(-50%);
						}
					}
				}
			}

			.logon {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 100%;
				height: 86rpx;
				margin-top: 48rpx;
				background: linear-gradient(135deg, var(--view-minorColor) 0%, var(--view-theme) 100%);
				border-radius: 120rpx;
				color: #FFFFFF;
				font-size: 30rpx;
			}
		}

		.protocol {
			margin-top: 40rpx;
			color: #999999;
			font-size: 24rpx;
		}

		.trembling {
			animation: shake 0.6s;
		}

		@keyframes shake {

			0%,
			100% {
				-webkit-transform: translateX(0);
			}

			10%,
			30%,
			50%,
			70%,
			90% {
				-webkit-transform: translateX(-5rpx);
			}

			20%,
			40%,
			60%,
			80% {
				-webkit-transform: translateX(5rpx);
			}
		}

		@-o-keyframes shake {

			/* Opera */
			0%,
			100% {
				-webkit-transform: translateX(0);
			}

			10%,
			30%,
			50%,
			70%,
			90% {
				-webkit-transform: translateX(-5rpx);
			}

			20%,
			40%,
			60%,
			80% {
				-webkit-transform: translateX(5rpx);
			}
		}

		@-webkit-keyframes shake {

			/* Safari 和 Chrome */
			0%,
			100% {
				-webkit-transform: translateX(0);
			}

			10%,
			30%,
			50%,
			70%,
			90% {
				-webkit-transform: translateX(-5rpx);
			}

			20%,
			40%,
			60%,
			80% {
				-webkit-transform: translateX(5rpx);
			}
		}

		@-moz-keyframes shake {

			/* Firefox */
			0%,
			100% {
				-moz-transform: translateX(0);
			}

			10%,
			30%,
			50%,
			70%,
			90% {
				-moz-transform: translateX(-5rpx);
			}

			20%,
			40%,
			60%,
			80% {
				-moz-transform: translateX(5rpx);
			}
		}
	}
</style>