BiKing/.history/pages/login/register_20230522094454.vue

<template>
	<view>
		<headContent>
			<template #left>
				<view class="head-revers-back iconfont" @click.stop="reversBackBtn()">&#xe604;</view>
			</template>
		</headContent>

		<view class="page-content">
			<text class="login-title">注册</text>
			<text class="login-content">立即注册属于您的币王账号</text>
			<tabList ref="tabListRef" :tabIndex.sync="tabIndexs" />

			<phoneRegister v-show="tabIndexs === 0" :accounts="accounts" />

			<email-register v-show="tabIndexs === 1" :accounts="accounts" />

			<view class="form-agreement" @click.stop="readAgreement = !readAgreement">
				<view class="agreement-confirm">
					<text class="confirm-icon iconfont" v-show="readAgreement">&#xe6c5;</text>
				</view>
				<text>我已阅读并同意</text>
				<text class="agreement-name" @click.stop="readAgreementText">《用户协议》</text>
			</view>
			<view class="form-btn" @click.stop="formSubmit">
				下一步
			</view>
			<view class="form-hint">
				已有账号？<text class="hint-btn"> 立即登录</text>
			</view>
		</view>

		<slider-verify ref="sliderVerifyRef" @slideImgSuccess="slideImgSuccess" />
	</view>
</template>

<script>
	import {
		reverseBack
	} from "@/utils/common.js"
	import tabList from "./modules/tab.vue"
	import emailRegister from "./modules/email-register.vue"
	import phoneRegister from "./modules/phone-register.vue"

	export default {
		name: 'register',
		components: {
			tabList,
			emailRegister,
			phoneRegister
		},
		data() {
			return {
				readAgreement: false,
				tabIndexs: 0,
				accounts: {
					areaCode: 86,
					phone: '',
					email: '',
					invitationCode: '',
				}


			};
		},
		methods: {
			// 阅读协议
			readAgreementText() {
				uni.navigateTo({
					url: this.$path.articleDetails + '8'
				})
			},
			setAreaCode(e) {
				if (e) {
					this.accounts.areaCode = e.area_code;
				}
			},
			reversBackBtn() {
				reverseBack()
			},
			formSubmit(e) {
				// tabIndexs: 0,
				// accounts: {
				// 	areaCode:86,
				// 	phone: '',
				// 	email: '',
				// 	invitationCode: '',
				// }
				if (this.tabIndexs === 0 && !this.accounts.phone) {
					uni.showToast({
						title: '请填写手机号',
						icon: "none"
					})
					return false
				}
				if (this.tabIndexs === 1 && !this.accounts.email) {
					uni.showToast({
						title: '请填写邮箱',
						icon: "none"
					})
					return false
				}
				if (!this.accounts.invitationCode) {
					uni.showToast({
						title: '请填写邀请码',
						icon: "none"
					})
					return false
				}
				if (!this.readAgreement) {
					uni.showToast({
						title: '请先阅读用户协议',
						icon: "none"
					})
					return false
				}
				this.$nextTick(() => {
					this.$refs.sliderVerifyRef.open();
				})
			},
			slideImgSuccess() {
				// tabIndexs: 1,
				// accounts: {
				// 	phone: '13133111133',
				// 	email:'biking2023@163.com',
				// 	invitationCode: '',
				// }
				let data = ''
				switch (this.tabIndexs) {
					case 0:
						data =
							`type=${this.tabIndexs}&areaCode=${this.accounts.areaCode}&account=${this.accounts.phone}&invitationCode=${this.accounts.invitationCode}`;
						break;
					case 1:
						data =
							`type=${this.tabIndexs}&account=${this.accounts.email}&invitationCode=${this.accounts.invitationCode}`;
						break;

				}
				uni.navigateTo({
					url: `/pages/login/email-verify?${data}`
				})
			},
			// formReset() {

			// }
		}
	}
</script>

<style lang="scss" scoped>
	@import "~./common.scss"
</style>