550 lines
12 KiB
Vue
550 lines
12 KiB
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> |