Portal/pages/register.vue

<template>
	<view class="register">
		<view class="content">
			<view class="logo">
				<u--image :showLoading="false" :src="loginLogo" width="125px" height="119px" mode="scaleToFill"></u--image>
			</view>
			<u-input class="input" :focus='focusUsername' v-model="username" type="number" clearable :placeholder="$lang.enterAccount">
				<text class="text" slot="prefix">{{ $lang.account }}</text>
			</u-input>
			<u-input class="input" :focus='focusPassword' v-model="password" :password="true" :placeholder="$lang.enterPassword" autocomplete="new-password">
				<text class="text" slot="prefix">{{ $lang.password }}</text>
			</u-input>
			<u-input class="input" :focus='focusRepass' v-model="repass" :password="true" :placeholder="$lang.enterPasswordAgain">
				<text class="text" slot="prefix">{{ $lang.confirmPassword }}</text>
			</u-input>
			<u-input class="input" :focus='focusPhone' v-model="phone" type="number" clearable
				:placeholder="`${$lang.enterPhone}`">
				<view class="phone-code" slot="prefix" @click="countryShow = true">
					{{ countryData.country_code }}
				</view>
			</u-input>
			<u-input class="input" v-model="referral_code" placeholder="TC176852" :disabled="referral_disabled">
				<text class="text" slot="prefix">{{ $lang.invitationCode }}</text>
			</u-input>
			<view class="btn-box">
				<view class="btn" @tap="register()">{{ $lang.register }}</view>
			</view>
			<view class="tip" @tap="goLogin">{{ $lang.goLogin }}</view>
		</view>
		<!-- 提示 -->
		<u-toast ref="uToast" />
		<!-- 区号 -->
		<country-code class="country" :show="countryShow" :anchor="countryData.anchor_index"
			:country="countryData.country_en" @select="selectCountryTap" @close="countryShow = false"></country-code>
		<view class="mb60"></view>
	</view>
</template>

<script>
	import {
		mapState
	} from "vuex";
	export default {
		data() {
			return {
				username: "",
				password: "",
				repass: "",
				phone: "",
				referral_code: undefined,
				countryShow: false,
				referral_disabled: false,
				countryData: {
					anchor_index: 2,
					country_en: "Philippines",
					country_cn: "菲律宾",
					country_code: "+63"
				},
				// 焦点
				focusUsername: false,
				focusPassword: false,
				focusRepass: false,
				focusPhone: false
			};
		},
		computed: {
			...mapState({
				$lang: state => state.app.lang[state.app.language],
				loginLogo: state => state.app.loginLogo
			})
		},
		onLoad() {
			const {
				invitedCode = null
			} = this.$route.query;
			if (invitedCode) {
				this.referral_code = invitedCode;
				this.referral_disabled = true;
			}
		},
		methods: {
			selectCountryTap(data) {
				this.countryData = data;
				this.countryShow = false;
			},
			goLogin() {
				this.$router.replace({
					path: "/pages/login"
				});
			},
			register() {
				if (!this.username) {
					this.$toast({
						message: this.$lang.enterAccount,
						duration: 2000
					});
					this.focusUsername = true
				} else if (!this.password) {
					this.$toast({
						message: this.$lang.enterPassword,
						duration: 2000
					});
					this.focusPassword = true
				} else if (!this.repass) {
					this.$toast({
						message: this.$lang.enterPasswordAgain,
						duration: 2000
					});
					this.focusRepass = true
				} else if (!this.phone) {
					this.$toast({
						message: this.$lang.enterPhone,
						duration: 2000
					});
					this.focusPhone = true
				} else {
					const o = navigator.userAgent;
					const isAndroid = o.indexOf("Android") > -1 || o.indexOf("Adr") > -1; //android终端
					const isiOS = !!o.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
					const client = isAndroid ? 3 : isiOS ? 2 : 1;
					const referralCode = this.referral_code ? this.referral_code : 'TC176852'
					const params = {
						username: this.username,
						pass: this.password,
						repass: this.repass,
						mobile: this.phone,
						code: this.countryData.country_code,
						referral_code: referralCode,
						area_id: 2,
						client
					};
					this.$toast({
						type: "loading",
						message: `${this.$lang.register}...`,
						duration: 200000
					});
					this.$api
						.register(params)
						.then(res => {
							this.$toastHide();
							if (res.Success == 1) {
								this.$store.commit("app/updateUserInfo", {
									...res.Data
								});
								uni.switchTab({
									url: "/pages/login"
								});
								this.$toast({
									message: this.$lang.register+this.$lang.success,
									duration: 2000
								});
							} else {
								this.$toast({
									message: res.Msg,
									duration: 2000
								});
							}
						}).catch(err => {
							this.$toastHide();
						})
				}
			}
		}
	};
</script>

<style lang="scss" scoped>
	.register {
		width: 100%;
		height: 100%;
		position: fixed;
		left: 0;
		top: 0;
		background: url("~@/static/images/login_bg.png") no-repeat;
		background-size: 100% auto;
		background-position: bottom left;
		overflow-y: auto;

		.content {
			width: 280px;
			padding-bottom: 50px;
			margin: 0 auto;

			.logo {
				display: flex;
				align-items: center;
				justify-content: center;
				margin-bottom: 20px;
				margin-top: 20%;
			}

			.input {
				height: 30px;
				line-height: 30px;
				margin-bottom: 15px;
				background: #fff;
				border-radius: 8px;
				overflow: hidden;
			}

			.phone-code {
				min-width: 50px;
				text-align: center;
				border-right: 1px solid #ddd;
			}

			.text {
				padding-right: 5px;
			}

			.btn-box {
				margin-top: 20px;

				.btn {
					width: 100%;
					height: 48px;
					line-height: 48px;
					text-align: center;
					font-size: 16px;
					background: url("~@/static/images/btn_bg.png") no-repeat;
					background-size: 100% 100%;
					font-weight: 600;
					margin-top: 15px;

					&:active {
						opacity: 0.8;
					}
				}
			}
		}

		.country {
			position: fixed;
			bottom: 0;
			left: 0;
		}

		.tip {
			font-size: 12px;
			color: #b38f3c;
			margin-top: 20px;
			text-align: center;
			margin-bottom: 20px;

			&:active {
				opacity: 0.6;
			}
		}
	}
</style>