|
|
@@ -0,0 +1,324 @@
|
|
|
+<template>
|
|
|
+ <custom-layout class="main">
|
|
|
+ <div class="w_1200">
|
|
|
+ <div class="one">
|
|
|
+ <a-steps :current="current" :items="items"></a-steps>
|
|
|
+ </div>
|
|
|
+ <div class="two">
|
|
|
+ <div class="find_2" v-if="current == 0">
|
|
|
+ <div class="find_2_1">请选择一种验证方式</div>
|
|
|
+ <div class="find_2_2">
|
|
|
+ <div class="list" @click="toSelect('1')" :class="[select == '1' ? 'select' : '']">
|
|
|
+ <el-image class="image1" :src="phone" fit="fill" />
|
|
|
+ <div class="title">
|
|
|
+ <div class="title_1">手机号验证</div>
|
|
|
+ <div class="title_2">通过手机号+短信的验证方式进行安全校验</div>
|
|
|
+ </div>
|
|
|
+ <el-image v-if="select == '1'" class="image2" :src="dui" fit="fill" />
|
|
|
+ <el-image v-else class="image3" :src="quan" fit="fill" />
|
|
|
+ </div>
|
|
|
+ <div class="list" @click="toSelect('2')" :class="[select == '2' ? 'select' : '']">
|
|
|
+ <el-image class="image1" :src="email" fit="fill" />
|
|
|
+ <div class="title">
|
|
|
+ <div class="title_1">电子邮箱验证</div>
|
|
|
+ <div class="title_2">通过电子邮箱+短信的验证方式进行安全校验</div>
|
|
|
+ </div>
|
|
|
+ <el-image v-if="select == '2'" class="image2" :src="dui" fit="fill" />
|
|
|
+ <el-image v-else class="image3" :src="quan" fit="fill" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="find_2" v-if="current == 1">
|
|
|
+ <div class="form" v-if="select == '1'">
|
|
|
+ <el-form ref="ruleFormRef" :model="form" :rules="rules1" label-width="70px" class="form" label-position="top">
|
|
|
+ <el-form-item label="手机号" prop="phone">
|
|
|
+ <el-input size="large" clearable v-model="form.phone" placeholder="请输入手机号" style="width: 100%">
|
|
|
+ <template #prefix>
|
|
|
+ <el-icon>
|
|
|
+ <Iphone />
|
|
|
+ </el-icon>
|
|
|
+ </template>
|
|
|
+ </el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="验证码" prop="checkCode">
|
|
|
+ <el-input size="large" class="check-code-box" v-model.number="form.checkCode" placeholder="请输入验证码">
|
|
|
+ <template #prefix>
|
|
|
+ <el-icon>
|
|
|
+ <Message />
|
|
|
+ </el-icon>
|
|
|
+ </template>
|
|
|
+ <template v-slot:append>
|
|
|
+ <el-button :disabled="codeCd1" @click="handleCaptcha1('form')"
|
|
|
+ >获取验证码
|
|
|
+ <span v-if="codeCd1">({{ long1 }})</span>
|
|
|
+ </el-button>
|
|
|
+ </template>
|
|
|
+ </el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+ <div class="form" v-else>
|
|
|
+ <el-form ref="ruleFormRef" :model="form" :rules="rules2" label-width="70px" class="form" label-position="top">
|
|
|
+ <el-form-item label="电子邮箱" prop="email">
|
|
|
+ <el-input size="large" clearable v-model="form.email" placeholder="请输入电子邮箱">
|
|
|
+ <template #prefix>
|
|
|
+ <el-icon>
|
|
|
+ <Briefcase />
|
|
|
+ </el-icon>
|
|
|
+ </template>
|
|
|
+ </el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="验证码" prop="checkCode">
|
|
|
+ <el-input size="large" class="check-code-box" v-model.number="form.checkCode" placeholder="请输入验证码">
|
|
|
+ <template #prefix>
|
|
|
+ <el-icon>
|
|
|
+ <Message />
|
|
|
+ </el-icon>
|
|
|
+ </template>
|
|
|
+ <template v-slot:append>
|
|
|
+ <el-button :disabled="codeCd2" @click="handleCaptcha2('form')"
|
|
|
+ >获取验证码
|
|
|
+ <span v-if="codeCd2">({{ long2 }})</span>
|
|
|
+ </el-button>
|
|
|
+ </template>
|
|
|
+ </el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="find_2" v-if="current == 2">
|
|
|
+ <el-form label-position="top" ref="ruleFormRef" :model="form" :rules="rules" label-width="80px" class="form">
|
|
|
+ <el-form-item label="新密码" prop="password">
|
|
|
+ <el-input size="large" v-model="form.password" type="password" show-password placeholder="请输入新密码">
|
|
|
+ <template #prefix>
|
|
|
+ <el-icon>
|
|
|
+ <Unlock />
|
|
|
+ </el-icon>
|
|
|
+ </template>
|
|
|
+ </el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="确认密码" prop="refpassword">
|
|
|
+ <el-input size="large" v-model="form.refpassword" type="password" show-password placeholder="请再次确认输入密码">
|
|
|
+ <template #prefix>
|
|
|
+ <el-icon>
|
|
|
+ <Unlock />
|
|
|
+ </el-icon>
|
|
|
+ </template>
|
|
|
+ </el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+ <div class="find_2" v-if="current == 3">
|
|
|
+ <el-image class="image1" :src="dui" fit="fill" />
|
|
|
+ <div class="text">密码修改成功 欢迎登录！</div>
|
|
|
+ </div>
|
|
|
+ <div class="bottom">
|
|
|
+ <button v-if="current == 3" @click="toNext(ruleFormRef, current)">完成</button>
|
|
|
+ <button v-else @click="toNext(ruleFormRef, current)">下一步</button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </custom-layout>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup>
|
|
|
+// 图片引入
|
|
|
+import phone from '/images/phone.png'
|
|
|
+import email from '/images/email.png'
|
|
|
+import dui from '/images/dui.png'
|
|
|
+import quan from '/images/quan.png'
|
|
|
+
|
|
|
+import { cloneDeep } from 'lodash-es'
|
|
|
+import { UserStore } from '@/store/user'
|
|
|
+const userStore = UserStore()
|
|
|
+const user = computed(() => userStore.user)
|
|
|
+
|
|
|
+import { LoginStore } from '@/store/api/login'
|
|
|
+const store = LoginStore()
|
|
|
+const router = useRouter()
|
|
|
+const $checkRes = inject('$checkRes')
|
|
|
+
|
|
|
+const select = ref('1')
|
|
|
+const current = ref(0)
|
|
|
+const items = ref([{ title: '选择验证方式' }, { title: '身份验证' }, { title: '重置密码' }, { title: '完成' }])
|
|
|
+
|
|
|
+const validatePhoneNumber = (rule, value, callback) => {
|
|
|
+ const reg = /^1[3-9]\d{9}$/
|
|
|
+ if (!value) {
|
|
|
+ return callback(new Error('手机号不能为空'))
|
|
|
+ }
|
|
|
+ if (!reg.test(value)) {
|
|
|
+ return callback(new Error('请输入正确的手机号'))
|
|
|
+ }
|
|
|
+ callback()
|
|
|
+}
|
|
|
+const codeCd1 = ref(false)
|
|
|
+const codeCd2 = ref(false)
|
|
|
+const long1 = ref('0')
|
|
|
+const long2 = ref('0')
|
|
|
+const ruleFormRef = ref()
|
|
|
+const form = ref({})
|
|
|
+const validatePassword = (rule, value, callback) => {
|
|
|
+ if (!value) {
|
|
|
+ return callback(new Error('请输入确认密码'))
|
|
|
+ }
|
|
|
+ if (form.value.password !== value) {
|
|
|
+ callback(new Error('两次输入的密码不一致'))
|
|
|
+ } else {
|
|
|
+ callback()
|
|
|
+ }
|
|
|
+}
|
|
|
+const rules = reactive({
|
|
|
+ password: [{ required: true, message: '请输入新密码', trigger: 'blur' }],
|
|
|
+ refpassword: [{ required: true, validator: validatePassword, trigger: 'blur' }]
|
|
|
+})
|
|
|
+const rules1 = reactive({
|
|
|
+ phone: [{ required: true, validator: validatePhoneNumber, trigger: 'blur' }],
|
|
|
+ checkCode: [{ required: true, message: '请输入验证码', trigger: 'blur' }]
|
|
|
+})
|
|
|
+const rules2 = reactive({
|
|
|
+ email: [{ required: true, message: '请输入电子邮箱', trigger: 'blur' }],
|
|
|
+ checkCode: [{ required: true, message: '请输入验证码', trigger: 'blur' }]
|
|
|
+})
|
|
|
+// 选择那种类型
|
|
|
+const toSelect = (item) => {
|
|
|
+ select.value = item
|
|
|
+}
|
|
|
+const toNext = async (formEl, item) => {
|
|
|
+ console.log(formEl, item)
|
|
|
+ if (item == 0) current.value = item + 1
|
|
|
+ else if (item == 1) {
|
|
|
+ if (!formEl) return
|
|
|
+ await formEl.validate(async (valid, fields) => {
|
|
|
+ if (valid) {
|
|
|
+ const data = cloneDeep(form.value)
|
|
|
+ console.log(data)
|
|
|
+ current.value = item + 1
|
|
|
+ toClear()
|
|
|
+ } else {
|
|
|
+ console.log('error submit!', fields)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ } else if (item == 2) {
|
|
|
+ if (!formEl) return
|
|
|
+ await formEl.validate(async (valid, fields) => {
|
|
|
+ if (valid) {
|
|
|
+ const data = cloneDeep(form.value)
|
|
|
+ // const res = await store.rp({
|
|
|
+ // type: 'User',
|
|
|
+ // id: user.value.id,
|
|
|
+ // password: data.password
|
|
|
+ // })
|
|
|
+ // if ($checkRes(res, true)) {
|
|
|
+ // current.value = item + 1
|
|
|
+ // toClear()
|
|
|
+ // }
|
|
|
+ console.log(data)
|
|
|
+ current.value = item + 1
|
|
|
+ toClear()
|
|
|
+ } else {
|
|
|
+ console.log('error submit!', fields)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ } else router.push({ path: '/login', query: { status: '1' } })
|
|
|
+}
|
|
|
+// 获取验证码
|
|
|
+const handleCaptcha1 = (item) => {
|
|
|
+ console.log(item)
|
|
|
+}
|
|
|
+// 获取验证码
|
|
|
+const handleCaptcha2 = (item) => {
|
|
|
+ console.log(item)
|
|
|
+}
|
|
|
+// 清空form
|
|
|
+const toClear = () => {
|
|
|
+ form.value = {}
|
|
|
+ ruleFormRef.value = null
|
|
|
+}
|
|
|
+</script>
|
|
|
+<style scoped lang="scss">
|
|
|
+.main {
|
|
|
+ background: #f3f5f9;
|
|
|
+ .w_1200 {
|
|
|
+ height: 100%;
|
|
|
+ margin: 30px auto;
|
|
|
+ padding: 52px 0;
|
|
|
+ width: 1200px;
|
|
|
+ background: #fff;
|
|
|
+ padding: 40px;
|
|
|
+ .two {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ .find_2 {
|
|
|
+ text-align: center;
|
|
|
+ width: 600px;
|
|
|
+ margin: 30px 0 0 0;
|
|
|
+ font-size: 18px;
|
|
|
+ .text {
|
|
|
+ margin: 20px 0 0 0;
|
|
|
+ font-size: $global-font-size-20;
|
|
|
+ font-weight: 600;
|
|
|
+ text-align: center;
|
|
|
+ cursor: pointer; /* 改变鼠标样式为手形 */
|
|
|
+ }
|
|
|
+ .find_2_2 {
|
|
|
+ margin: 20px 0 0 0;
|
|
|
+ width: 100%;
|
|
|
+ .list {
|
|
|
+ width: 100%;
|
|
|
+ border: 1px solid rgba(0, 0, 0, 0.1);
|
|
|
+ cursor: pointer;
|
|
|
+ font-weight: 400;
|
|
|
+ margin-top: 12px;
|
|
|
+ padding: 20px 32px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ .image1 {
|
|
|
+ height: 54px;
|
|
|
+ width: 54px;
|
|
|
+ }
|
|
|
+ .image2 {
|
|
|
+ height: 30px;
|
|
|
+ width: 30px;
|
|
|
+ }
|
|
|
+ .image3 {
|
|
|
+ height: 30px;
|
|
|
+ width: 30px;
|
|
|
+ }
|
|
|
+ .title {
|
|
|
+ width: 330px;
|
|
|
+ .title_1 {
|
|
|
+ color: rgba(0, 0, 0, 0.9);
|
|
|
+ font-size: 18px;
|
|
|
+ margin: 0 0 5px 0;
|
|
|
+ }
|
|
|
+ .title_2 {
|
|
|
+ color: rgba(0, 0, 0, 0.6);
|
|
|
+ font-size: 16px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .select {
|
|
|
+ border: 2px solid #0366f1;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .bottom {
|
|
|
+ text-align: center;
|
|
|
+ button {
|
|
|
+ border: none;
|
|
|
+ margin-top: 50px;
|
|
|
+ width: 360px;
|
|
|
+ color: #fff;
|
|
|
+ background: #0366f1;
|
|
|
+ box-shadow: 0 2px 0 rgba(5, 145, 255, 0.1);
|
|
|
+ border-radius: 4px;
|
|
|
+ height: 48px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
