beauty.vue
2.35 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<template>
<div>
<div class="mt30"></div>
<div class="box">
<beauty-step :active-step="activeStep"/>
<el-card class="mt20 mb20" v-if="activeStep == 0">
<div class="pt30">
<el-form class="d-form" size="large" :label-width="language==0?120:200" style="max-width: 500px;margin: auto">
<el-form-item :label="language==0?'邮箱':'E-mail'" required>
<el-input type="text" v-model="form.account" @change="resetCode" @blur="verifyCode"
/>
<div class="tip" v-if="language==0">
（请填写正确的邮箱信息，邮箱信息在注册完成后无法修改。
该邮箱后续会会作为您登录的账户）
</div>
<div v-else class="tip">
Please fill in a correct mailbox information, which cannot be modified after registration.
The mailbox will receive your registration review.
</div>
</el-form-item>
<el-form-item :label="language==0?'验证码':'Code'" required>
<el-input v-model="form.code">
<template #append>
<el-button type="primary" plain style="width: 110px" @click="sendsmsMsg">
<count-down v-if="counting" v-slot="{ totalSeconds }" :time="60000" @end="counting=false">
{{ totalSeconds }} {{ language == 0 ? '秒' : 's' }}
</count-down>
<span v-else>
{{ language == 0 ? '发送验证码' : 'Send code' }}
</span>
</el-button>
</template>
</el-input>
<div class="vcodeBox" :style="isShow?'height:240px':'height:0'">
<Vcode :show="isShow" :successText="successVcode" :failText="failVcode" :slider-text="sliderText"
type="inside" @success="codeSuccess"></Vcode>
</div>
</el-form-item>
</el-form>
</div>
</el-card>
</div>
</div>
</template>
<script setup>
import {ref} from "vue"
import BeautyStep from "./components/beauty-step"
import {useStorage} from "@vueuse/core/index";
const activeStep = ref(0)
const form = ref({})
const language = useStorage('language', 0)
</script>
<style scoped lang="scss">
.tip{line-height: 1.6;margin-top: 10px;}
</style>