注册页面第三页初步完成
需要进一步改进
This commit is contained in:
张宇衡
parent
ed74cf9aca
commit
b1f5ec45be
143
src/web/src/components/Finish.vue
Normal file
143
src/web/src/components/Finish.vue
Normal file
@ -0,0 +1,143 @@
|
||||
<template>
|
||||
|
||||
<n-grid :x-gap="12" :y-gap="12">
|
||||
|
||||
<n-grid-item span="24">
|
||||
<n-h2>#1 下载一些东西</n-h2>
|
||||
</n-grid-item>
|
||||
|
||||
<n-grid-item span="24">
|
||||
<n-h5>下面的按钮从左向右依次是我们推荐的启动器、java运行环境、微软官方启动器。</n-h5>
|
||||
<n-h5>如果你是正版账号用户，你最好选择正版启动器。因为正版启动器的使用十分简易，只是安装速度拉胯。（但是不需要自己安装Java）</n-h5>
|
||||
<n-h5>如果你是外置登录用户，请下载我们推荐的启动器，同时需要下载Java并安装。假如你有更喜欢的启动器当然也可以使用自己最习惯的，但是请记住我们没有对其进行过测试，如果存在使用问题只能自行处理。</n-h5>
|
||||
</n-grid-item>
|
||||
|
||||
<n-grid-item span="8">
|
||||
<n-button type="primary" @click="recommend" style="width: 100%;">推荐的启动器</n-button>
|
||||
</n-grid-item>
|
||||
|
||||
<n-grid-item span="8">
|
||||
<n-button type="info" @click="download_java" style="width: 100%;">Java</n-button>
|
||||
</n-grid-item>
|
||||
|
||||
<n-grid-item span="8">
|
||||
<n-button type="warning" @click="click_btn_to_microsoft" style="width: 100%;">正版启动器</n-button>
|
||||
</n-grid-item>
|
||||
|
||||
<n-grid-item span="24"><n-divider /></n-grid-item>
|
||||
|
||||
|
||||
<n-grid-item span="24">
|
||||
<n-h2>#2 登录账户并安装游戏</n-h2>
|
||||
</n-grid-item>
|
||||
|
||||
<n-grid-item span="20" offset="2">
|
||||
<n-timeline>
|
||||
<n-timeline-item type="success" title="打开启动器" content="就是双击启动，记得给启动器新建一个文件夹单独存放" />
|
||||
<n-timeline-item type="success" title="添加账户" content="在左上角，点那个史蒂夫头像" />
|
||||
<n-timeline-item type="success" title="添加认证服务器" content="左下角的加号 下面有行小字（外置登录）" />
|
||||
<n-timeline-item type="success" title="输入这个地址" :content="yag_server" />
|
||||
<n-timeline-item type="success" title="点击下一步、完成" content="此时应该已经可以看到我们服务器的信息了" />
|
||||
<n-timeline-item type="success" title="点击刚刚添加的认证" content="应该就在“微软账户”下面" />
|
||||
<n-timeline-item type="success" title="登录外置登录账号" content="刚刚第一步注册账号的邮箱密码" />
|
||||
<n-timeline-item type="info" title="点左上角的返回" content="回到启动器刚打开的界面" />
|
||||
<n-timeline-item type="success" title="添加游戏版本" content="点“没有游戏版本”，下面有小字（进入下载页安装游戏）" />
|
||||
<n-timeline-item type="success" title="点击安装新版本" :content="current_version" />
|
||||
<n-timeline-item type="success" title="安装游戏" content="点击右下角的安装等待完成后回到主页面" />
|
||||
<n-timeline-item type="success" title="大功告成！" :content="server_url" />
|
||||
</n-timeline>
|
||||
</n-grid-item>
|
||||
|
||||
<n-grid-item span="24"><n-divider /></n-grid-item>
|
||||
|
||||
<n-grid-item span="24">
|
||||
<n-button type="primary" @click="copy_to_clipboard" style="width: 100%;">点击复制</n-button>
|
||||
</n-grid-item>
|
||||
|
||||
<n-grid-item span="24"><n-divider /></n-grid-item>
|
||||
|
||||
<n-grid-item span="24">
|
||||
<n-button type="primary" @click="back_to_home" style="width: 100%;">回到主页</n-button>
|
||||
</n-grid-item>
|
||||
|
||||
|
||||
</n-grid>
|
||||
|
||||
|
||||
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { NH2, NP, NButton, NGridItem, NGrid, NH5, NDivider, NTimeline, NTimelineItem, useDialog, useNotification } from 'naive-ui';
|
||||
import { ref, onMounted } from 'vue';
|
||||
import axios from 'axios';
|
||||
|
||||
const yag_server = ref('Loading...')
|
||||
const current_version = ref('本服务目前的版本是: Loading...') // TODO: 从服务器获取
|
||||
const server_url = ref("启动游戏选择多人，输入本服务器地址: Loading...") // TODO: 从服务器获取
|
||||
|
||||
const dialog = useDialog()
|
||||
const notification = useNotification() // 通知
|
||||
|
||||
function click_btn_to_microsoft(){
|
||||
dialog.info({
|
||||
title: '你居然要下载这个',
|
||||
content: '说实话我觉得这个选项挺废的...因为从逻辑上来说你如果有正版账号你应该不需要这个按钮，那我只能当你觉得微软官网找起来比较麻烦了。',
|
||||
positiveText: '是的太麻烦了，带我去',
|
||||
negativeText: '不了，我就开个玩笑',
|
||||
onPositiveClick: () => {
|
||||
window.open('https://www.minecraft.net/zh-hans/get-minecraft')
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
function download_java(){
|
||||
dialog.info({
|
||||
title: '关于Java',
|
||||
content: '因为不同系统需要不同的Java，比较杂乱。所以这里我们会带你前往Java官网下载。',
|
||||
positiveText: '前往下载',
|
||||
negativeText: '取消',
|
||||
onPositiveClick: () => {
|
||||
window.open('https://www.oracle.com/java/technologies/javase/jdk17-archive-downloads.html')
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
function recommend(){
|
||||
window.open('https://hmcl.huangyuhui.net')
|
||||
}
|
||||
|
||||
function back_to_home() {
|
||||
window.location.href = '/'
|
||||
}
|
||||
|
||||
// 点击后复制内容到剪贴板
|
||||
function copy_to_clipboard() {
|
||||
const input = document.createElement('input');
|
||||
input.setAttribute('readonly', 'readonly');
|
||||
input.setAttribute('value', yag_server.value);
|
||||
document.body.appendChild(input);
|
||||
input.select();
|
||||
if (document.execCommand('copy')) {
|
||||
document.execCommand('copy');
|
||||
notification.info({
|
||||
title: '复制成功',
|
||||
content: '赶快前往启动器粘贴吧！',
|
||||
duration: 5000
|
||||
})
|
||||
}
|
||||
document.body.removeChild(input);
|
||||
}
|
||||
|
||||
// 加载页面时
|
||||
onMounted(() => {
|
||||
axios.get('/api/webmeta').then((response) => {
|
||||
console.log(response.data)
|
||||
current_version.value = "本服务目前的版本是: " + response.data.data.version
|
||||
server_url.value = "启动游戏选择多人，输入本服务器地址: " + response.data.data.serverUrl
|
||||
yag_server.value = response.data.data.yagUrl
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
</script>
|
||||
143
src/web/src/components/WhiteList.vue
Normal file
143
src/web/src/components/WhiteList.vue
Normal file
@ -0,0 +1,143 @@
|
||||
<template>
|
||||
|
||||
<h2>实名认证白名单</h2>
|
||||
<n-divider />
|
||||
<n-form>
|
||||
<n-grid :x-gap="12">
|
||||
|
||||
<n-grid-item span="24">
|
||||
<n-form-item label="账户类型">
|
||||
<n-radio-group v-model:value="(user_type as number)" name="radiobuttongroup1" style="width: 100%;">
|
||||
<n-radio-button style="width: 50%; text-align: center" v-for="type in user_types" :key="type.value" :value="type.value" :label="type.label"/>
|
||||
</n-radio-group>
|
||||
</n-form-item>
|
||||
</n-grid-item>
|
||||
|
||||
<n-grid-item span="24">
|
||||
<n-form-item label="游戏昵称">
|
||||
<n-input @input="ifSubmitSatisifed" v-model:value="profile_name" placeholder="请输入游戏ID" />
|
||||
</n-form-item>
|
||||
</n-grid-item>
|
||||
|
||||
<n-grid-item span="24">
|
||||
<n-form-item label="身份证号码">
|
||||
<n-input @input="ifSubmitSatisifed" v-model:value="id" placeholder="请输入18位身份证号码 本服务不会保存个人信息" />
|
||||
</n-form-item>
|
||||
</n-grid-item>
|
||||
|
||||
<n-grid-item span="24">
|
||||
<n-form-item label="真实姓名">
|
||||
<n-input @input="ifSubmitSatisifed" v-model:value="name" placeholder="此信息仅用于实名制认证" />
|
||||
</n-form-item>
|
||||
</n-grid-item>
|
||||
|
||||
|
||||
|
||||
<n-grid-item span="24">
|
||||
<n-divider />
|
||||
<n-button :disabled="submit_btn_disabled" strong secondary @click="submit" type="warning" style="width: 100%;">{{submit_btn_text}}</n-button>
|
||||
</n-grid-item>
|
||||
|
||||
</n-grid>
|
||||
</n-form>
|
||||
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import type { CSSProperties } from 'vue'
|
||||
import type { NotificationType } from 'naive-ui';
|
||||
import { NButton, NDivider, NForm, NFormItem, NGrid, NGridItem, NInput, NRadioGroup, NRadioButton, useDialog, useNotification } from 'naive-ui';
|
||||
import axios from 'axios';
|
||||
|
||||
const props = defineProps(['user_type']);
|
||||
|
||||
const id = ref('');
|
||||
const name = ref('');
|
||||
const profile_name = ref('');
|
||||
|
||||
const submit_btn_text = ref('提交认证');
|
||||
const submit_btn_disabled = ref(true);
|
||||
|
||||
const user_types: { value: number, label: string }[] = [
|
||||
{ value: 0, label: '外置登录' },
|
||||
{ value: 1, label: '正版账号' },
|
||||
]
|
||||
|
||||
const dialog = useDialog() // 弹窗
|
||||
const notification = useNotification() // 通知
|
||||
|
||||
const emit = defineEmits(['to-finish', 'to-previews']);
|
||||
|
||||
// 60秒后才能再次提交
|
||||
function submitBtnCountDown() {
|
||||
let time = 60
|
||||
let timer = setInterval(() => {
|
||||
time--
|
||||
submit_btn_text.value = time + '秒后重试'
|
||||
if (time == 0) {
|
||||
clearInterval(timer)
|
||||
submit_btn_text.value = '发送验证码'
|
||||
submit_btn_disabled.value = false
|
||||
}
|
||||
}, 1000)
|
||||
}
|
||||
|
||||
// 提交认证
|
||||
function submit(this: any) {
|
||||
submit_btn_disabled.value = true
|
||||
submit_btn_text.value = '提交中...'
|
||||
axios.post('/api/signWhiteList', {
|
||||
id: id.value,
|
||||
name: name.value,
|
||||
username: profile_name.value,
|
||||
is_genuine: (props.user_type as boolean),
|
||||
}).then(res => {
|
||||
if (res.data.code != 200) {
|
||||
dialog.error({
|
||||
title: '好像出了点问题...',
|
||||
content: res.data.msg,
|
||||
positiveText: '创建一个外置登录账户',
|
||||
negativeText: '我再试试',
|
||||
onPositiveClick: () => {
|
||||
// window.location.href = '/newjoin'
|
||||
emit('to-previews')
|
||||
},
|
||||
})
|
||||
submit_btn_disabled.value = true
|
||||
submitBtnCountDown()
|
||||
return
|
||||
}
|
||||
notify('success', '验证通过', '一切看起来非常完美！')
|
||||
emit('to-finish')
|
||||
})
|
||||
}
|
||||
|
||||
// 正则表达式判断身份证
|
||||
function verifyId(){
|
||||
if (id.value.length != 18) {
|
||||
return false
|
||||
}
|
||||
const reg = /^[0-9x]+$/;
|
||||
return reg.test(id.value);
|
||||
}
|
||||
|
||||
function ifSubmitSatisifed() {
|
||||
if (verifyId() && name.value.length > 0 && profile_name.value.length > 0) {
|
||||
submit_btn_disabled.value = false
|
||||
} else {
|
||||
submit_btn_disabled.value = true
|
||||
}
|
||||
}
|
||||
|
||||
function notify(type: NotificationType, content: string, meta: string) {
|
||||
notification[type]({
|
||||
content: content,
|
||||
meta: meta,
|
||||
duration: 5000,
|
||||
keepAliveOnHover: true
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
62
src/web/src/views/NewJoin.vue
Normal file
62
src/web/src/views/NewJoin.vue
Normal file
@ -0,0 +1,62 @@
|
||||
<template>
|
||||
|
||||
<Steps :current=current_step />
|
||||
|
||||
<n-divider />
|
||||
|
||||
<main v-if="(current_step === 1)" class="panel">
|
||||
<Registration @geniue_btn_pressed="geniue_user" @ingeniue_btn_pressed="ingeniue_user" />
|
||||
</main>
|
||||
|
||||
<main v-if="(current_step === 2)" class="panel">
|
||||
<WhiteList @to-finish="whitelist_to_finish" @to-previews="whitelist_to_register" :user_type="is_geniue" />
|
||||
</main>
|
||||
|
||||
<main v-if="(current_step === 3)" class="panel">
|
||||
<Finish />
|
||||
</main>
|
||||
|
||||
</template>
|
||||
|
||||
|
||||
<script setup lang="ts">
|
||||
import Registration from '../components/Registration.vue'
|
||||
import WhiteList from '../components/WhiteList.vue'
|
||||
import Finish from '../components/Finish.vue'
|
||||
import Steps from '../components/Steps.vue'
|
||||
import { ref } from 'vue'
|
||||
import { NButton, NDivider, NGrid, NGridItem } from 'naive-ui'
|
||||
|
||||
const is_geniue = ref(1)
|
||||
|
||||
const current_step = ref(3)
|
||||
|
||||
function geniue_user() {
|
||||
is_geniue.value = 1
|
||||
current_step.value = 2
|
||||
}
|
||||
|
||||
function ingeniue_user() {
|
||||
is_geniue.value = 0
|
||||
current_step.value = 2
|
||||
}
|
||||
|
||||
function whitelist_to_register() {
|
||||
current_step.value = 1
|
||||
}
|
||||
|
||||
function whitelist_to_finish() {
|
||||
current_step.value = 3
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.panel {
|
||||
margin: auto;
|
||||
padding: 20px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
text-align: left;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user