Onlife/pages/interstellareye/Registergame.vue

<template>
	<view class="container">
		<view class="tab-container">
			<view class="back">
				<u-icon name="arrow-left" color="#fff" size="24" @click="back"></u-icon>
			</view>
			<view class='tab register'>輪迴道</view>
		</view>
		<!-- 轮回到 -->
		<view class="content">
			<view class="gametop">
				<view class="gameimg">
					<image :src="publicURL + saosaraDaoObj.img" mode="heightFix"></image>
				</view>
				<text class="ganmetitle">
					{{ saosaraDaoObj.desc_cn }}
				</text>
			</view>
			<view class="recommender" v-if="chk">
				已註冊帳號：<text style="color: #505bd7;">{{gameeamil}}</text>
			</view>
			<view class="alreadyregistered" v-if="chk">
				<view class="already">
					此賬號已經註冊，請前往<text style="color: #505bd7;" @click="copy">https://www.samsaradao.com/</text>登錄。
				</view>
			</view>
			<view class="notregistered" v-else>
				<view class="input">
					<input v-model="username" type="text" color="black" placeholder="用戶名" class="input_aa"
						placeholder-style="color:#fff" />
				</view>
				<view class="input">
					<input v-model="email" data="passworedtype" placeholder="郵箱" class="input_aa"
						placeholder-style="color:#fff" />
				</view>
				<view class="input">
					<input v-model="password" :password="showPassword2" placeholder="註冊密碼" class="input_aa"
						placeholder-style="color:#fff" />
					<img :src="!showPassword2 ? showpwdImg : hidepwdImg" @tap="changePassword(2)"
						style="width: 50rpx;height: 50rpx;"></img>
				</view>
				<!-- 验证码 -->
				<view class="input">
					<input v-model="code" data="passworedtype" placeholder="郵箱驗證碼" class="input_aa"
						placeholder-style="color:#fff" />
					<view class="code" @click="getVerificationCode()">
						{{buttonText}}
					</view>
				</view>
				<!-- 谷歌验证码 -->
				<view class="input">
					<input v-model="googleauthcode" data="passworedtype" placeholder="穀歌驗證碼" class="input_aa"
						placeholder-style="color:#fff" />
					<view class="code" @click="getgoogleCode()">
						{{buttonText1}}
					</view>
				</view>
				<view class="googlecode" v-if="googleclose">
					<view class="icon" @click="closecode()">
						<u-icon name="close"></u-icon>
					</view>
					<view class="googletitle">
						掃一掃獲取穀歌驗證碼
					</view>
					<view class="googleimg">
						<image :src="googleimg" mode=""></image>
					</view>
					<view class="googlesecret" @click="copyadd()">
						{{secret}}
					</view>
				</view>
				<button class="btn primary" style="background-color: #505bd7;" @click="generateMnemonic">註冊</button>
			</view>
			<!-- <button class="btn primary" @click="yregistered">已註冊</button> -->
		</view>
	</view>
</template>

<script>
	import axios from "axios";
	import {
		_userInfos
	} from "@/request/api.js"
	export default {
		data() {
			return {
				publicURL:"https://onlif.klinygm.com",
				saosaraDaoObj: {},
				showPassword2: true,
				showpwdImg: "static/icon/eye_on.png",
				hidepwdImg: "static/icon/eye_off.png",
				username: "",
				email: "",
				password: "",
				code: "",
				isCounting: false,
				count: 60,
				gugeisCounting: false,
				gugecount: 60,
				buttonText: "獲取驗證碼",
				buttonText1: "獲取驗證碼",
				googleauthcode: '',
				googleimg: '', //谷歌二維碼
				googleclose: false, //谷歌验证码状态
				userInfos: '', //用户信息
				address: '',
				gameeamil: '', // 已关联账号
				chk: false, // 关联状态
				secret: '' //谷歌私鑰
			}
		},
		onLoad(e) {
			if (e.item) {
				this.saosaraDaoObj = JSON.parse(e.item);
			}
		},
		onShow() {
			this.getUserInfos()
		},
		methods: {
			// 查询元算力用户是否在系统注册过了
			Searchregistration() {
				uni.request({
					url: `https://www.samsaradao.com/api/common/schyzsreg?address=${this.address}`, //仅为示例，并非真实接口地址。
					method: 'GET',
					success: (res) => {
						// console.log('reeeeeee', res.data);
						this.gameeamil = res.data.data.gameeamil
						this.chk = res.data.data.chk
					}
				});
			},
			//用户信息
			async getUserInfos() {
				await _userInfos().then(res => {
					this.userInfos = res.data.userinfo;
					this.address = this.userInfos.wallet.address
					// console.log('res', this.address)
				}).catch(err => {
					console.log('eeer', err)
				})
				// 查询元算力用户是否在系统注册过了
				this.Searchregistration()
			},
			changePassword(n) {
				switch (n) {
					case 2:
						this.showPassword2 = !this.showPassword2;
						break;
				}
			},
			async generateMnemonic() {
				if (!this.username) {
					uni.showToast({
						title: '請輸入用戶名',
						icon: 'none'
					});
					return;
				}
				if (!this.email) {
					uni.showToast({
						title: '請輸入郵箱',
						icon: 'none'
					});
					return;
				}
				if (!this.password) {
					uni.showToast({
						title: '請輸入密碼',
						icon: 'none'
					});
					return;
				}
				if (!this.code || !this.googleauthcode) {
					uni.showToast({
						title: '請輸入驗證碼',
						icon: 'none'
					});
					return;
				}
				uni.request({
					url: 'https://www.samsaradao.com/api/user/register', //仅为示例，并非真实接口地址。
					method: 'POST', // 请求方法为POST
					data: {
						username: this.username,
						email: this.email,
						password: this.password,
						code: this.code,
						googleauthcode: this.googleauthcode
					},
					success: (res) => {
						// console.log(res, 777777)
						if(res.data.code === 1){
							let token = res.data.data.userinfo.token
							// 關聯錢包地址
							uni.request({
								url: 'https://www.samsaradao.com/api/user/refyzswallet', //仅为示例，并非真实接口地址。
								method: 'POST',
								data: {
									wallet: this.address
								},
								header: {
									token: token //自定义请求头信息
								},
								success: (res) => {
									console.log('关联钱包地址res', res);
									uni.showToast({
										title: '註冊成功！！'
									})
									this.Searchregistration()
									uni.switchTab({
										url: "/pages/interstellareye/interstellareye", // 注意路径
									});
								}
							});
						}else{
							uni.showToast({
								title:res.data.msg,
								icon:"error"
							})
						}
					},
					fail(rej) {
						uni.showToast({
							title: rej,
							icon:'none'
						})
					}
				});
			},
			// 验证码
			async getVerificationCode() {
				console.log('验证码');
				if (this.email == '') {
					uni.showToast({
						title: '請輸入郵箱',
						icon: 'none'
					});
					return;
				}
				if (this.isCounting) return;
				// 调用后端接口获取邮箱验证码
				uni.request({
					url: 'https://www.samsaradao.com/api/ems/send', //仅为示例，并非真实接口地址。
					method: 'POST',
					data: {
						email: this.email
					},
					success: (res) => {
						// 如果接口调用成功，开始倒计时
						if (res.data.code == 1) {
							console.log('驗證碼yanyanyan', res)
							uni.showToast({
								title: '發送成功'
							})
							console.log('wolai', res);
							this.isCounting = true;
							this.buttonText = `${this.count}秒後重獲`;

							const timer = setInterval(() => {
								this.count--;
								this.buttonText = `${this.count}秒後重獲`;

								if (this.count <= 0) {
									clearInterval(timer);
									this.isCounting = false;
									this.count = 60;
									this.buttonText = '獲取驗證碼';
								}
							}, 1000);
						} else {
							uni.showToast({
								title: '郵箱' + res.data.msg,
								icon: 'none'
							})
						}
					}
				});
			},
			// 谷歌
			async getgoogleCode() {
				console.log('谷歌')
				if (this.email == '') {
					uni.showToast({
						title: '請输入郵箱',
						icon: 'none'
					});
					return;
				}
				if (this.gugeisCounting) return;
				// 调用后端接口获取谷歌验证码
				uni.request({
					url: 'https://www.samsaradao.com/api/user/getgoogleauthurl2', //仅为示例，并非真实接口地址。
					method: 'POST',
					data: {
						email: this.email
					},
					success: (res) => {
						uni.showToast({
							title: '獲取成功'
						})
						console.log('response', res)
						this.gugeisCounting = true;
						this.buttonText1 = `${this.gugecount}秒後重獲`;

						const timer = setInterval(() => {
							this.gugecount--;
							this.buttonText1 = `${this.gugecount}秒後重獲`;

							if (this.gugecount <= 0) {
								clearInterval(timer);
								this.gugeisCounting = false;
								this.gugecount = 60;
								this.buttonText1 = '獲取驗證碼';
							}
						}, 1000);
						this.googleimg = res.data.data.url
						this.secret = res.data.data.secret
						this.googleclose = true
					}
				})
			},
			// 已經註冊
			yregistered() {
				uni.showToast({
					title: '賬號已被註冊',
					icon: 'none'
				})
			},
			closecode() {
				this.googleclose = false
			},
			back() {
				uni.navigateBack()
			},
			// 複製網址
			copy() {
				uni.setClipboardData({
					data: 'https://www.samsaradao.com/',
					success: () => {
						uni.showToast({
							title: '複製成功',
							icon: 'success'
						})
					}
				})
			},
			//複製地址
			copyadd() {
				uni.setClipboardData({
					data: this.secret,
					success: () => {
						uni.showToast({
							title: '複製成功',
							icon: 'success'
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.alreadyregistered {
		width: 100%;
		color: #fff;
		justify-content: center;
		align-items: center;
	}

	.googlecode {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		width: 500rpx;
		height: 500rpx;
		background-color: #fff;
		position: fixed;
		left: 18%;
		top: 40%;

		.icon {
			width: 100%;
			display: flex;
			justify-content: end;
		}

		.googleimg {
			width: 300rpx;
			height: 300rpx;
			padding: 20rpx;
		}
	}

	.container {
		padding: 20px;
		background: linear-gradient(to bottom, #000033, #51599b);
		min-height: 100vh;
	}

	.tab-container {
		display: flex;
		align-items: center;
		background-color: rgba(255, 255, 255, 0.1);
		border-radius: 8px;
		overflow: hidden;
		margin-bottom: 20px;
	}

	.tab {
		flex: 1;
		text-align: center;
		padding: 15px 0;
		font-size: 16px;
		color: #ffffff;
	}

	.tab.active {
		background-color: rgba(0, 122, 255, 0.6);
		color: white;
	}

	.content {
		// background-color: rgba(255, 255, 255, 0.1);
		background: linear-gradient(to bottom, #393C84, #9193C6);
		border-radius: 8px;
		padding: 20px;

		.gametop {
			color: #fff;
			margin-bottom: 30rpx;

			.gameimg {
				width: 100%;
				height: 250rpx;
				margin-bottom: 20rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				image{
					height: 90%;
				}
			}

			.ganmetitle {
				// font-weight: 600;
			}
		}

		.recommender {
			color: #fff;
			margin-bottom: 20rpx;
		}
	}

	.btn {
		width: 100%;
		height: 50px;
		line-height: 50px;
		text-align: center;
		border-radius: 25px;
		font-size: 18px;
		margin-top: 20px;
	}

	.btn.primary {
		background-color: rgba(0, 122, 255, 0.8);
		color: white;
	}

	.mnemonic-container {
		margin-top: 20px;
		background-color: rgba(240, 240, 240, 0.1);
		padding: 15px;
		border-radius: 8px;
	}

	.mnemonic {
		font-size: 16px;
		line-height: 1.5;
		word-break: break-all;
		color: #ffffff;
	}

	.copy-hint {
		font-size: 12px;
		color: #aaaaaa;
		margin-left: 5px;
	}

	.warning {
		color: #ff9900;
		font-size: 14px;
		margin-top: 10px;
		display: block;
	}

	.input {
		width: 95%;
		height: 60px;
		// border: 1px solid rgba(221, 221, 221, 0.3);
		border-radius: 8px;
		padding: 0 10px;
		/* box-sizing: border-box; */
		font-size: 16px;
		margin-bottom: 10px;
		// background-color: rgba(255, 255, 255, 0.1);
		background-color: #9B9DCA;
		color: #ffffff;
		display: flex;
		align-items: center;
		position: relative;

		.code {
			width: 200rpx;
			height: 100%;
			font-size: 26rpx;
			background-color: #4F5AD8;
			position: absolute;
			top: 0;
			right: 0;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 0 16rpx 16rpx 0;
		}
	}

	.input_aa {
		width: 90%;
		font-size: 16px;
		height: 60%;
		color: #fff;
	}

	.input.textarea {
		height: 100px;
	}

	.input::placeholder {
		color: rgba(0, 0, 0, 0.5);
	}

	image {
		width: 100%;
		height: 100%;
	}
</style>