@@ -26,12 +41,14 @@
记住我
- 忘记密码
+
+ 忘记密码
- 立即登录
+
+ {{ !isRegister ? '立 即 登 录' : '开 始 体 验' }}
@@ -43,13 +60,25 @@ import { useStorage } from '@vueuse/core'
import { getImageCaptcha } from '@/apis/common'
import { useTabsStore, useUserStore } from '@/stores'
import { encryptByRsa } from '@/utils/encrypt'
+import { timeFix } from '@/utils'
+import { useAuthStore } from '@/stores/modules/auth'
+
+// 定义组件的 props
+const props = defineProps({
+ isRegister: {
+ type: Boolean,
+ },
+})
+
+const inputRef = ref
(null)
const loginConfig = useStorage('login-config', {
- rememberMe: true,
- username: 'admin', // 演示默认值
- password: 'admin123', // 演示默认值
- // username: debug ? 'admin' : '', // 演示默认值
- // password: debug ? 'admin123' : '', // 演示默认值
+ // rememberMe: true,
+ // username: debug ? 'admin' : '',
+ // password: debug ? 'admin123' : ''
+ rememberMe: props.isRegister,
+ username: '',
+ password: '',
})
// 是否启用验证码
const isCaptchaEnabled = ref(true)
@@ -58,15 +87,22 @@ const captchaImgBase64 = ref()
const formRef = ref()
const form = reactive({
- username: loginConfig.value.username,
- password: loginConfig.value.password,
+ // username: loginConfig.value.username,
+ // password: loginConfig.value.password,
+ username: !props.isRegister ? loginConfig.value.username : '',
+ nickname: '',
+ password: !props.isRegister ? loginConfig.value.password : '',
+ gender: 0,
+ deptId: 1,
+ roleIds: ['547888897925840928'],
+ status: 1,
captcha: '',
uuid: '',
expired: false,
})
const rules: FormInstance['rules'] = {
- username: [{ required: true, message: '请输入用户名' }],
- password: [{ required: true, message: '请输入密码' }],
+ username: [{ required: true, message: '请设置用户名，4-64个字符' }],
+ password: [{ required: true, message: '请设置登录密码' }],
captcha: [{ required: isCaptchaEnabled.value, message: '请输入验证码' }],
}
@@ -100,6 +136,7 @@ const getCaptcha = () => {
captchaImgBase64.value = img
form.uuid = uuid
form.expired = false
+ form.captcha = ''
startTimer(expireTime, Number(res.timestamp))
})
}
@@ -108,12 +145,33 @@ const userStore = useUserStore()
const tabsStore = useTabsStore()
const router = useRouter()
const loading = ref(false)
-// 登录
+
+const getPlaceholder = () => {
+ return !props.isRegister ? '请输入用户名' : '请设置用户名，4-64个字符'
+}
+
+const authStore = useAuthStore()
+// const toggleForgotPasswordMode = inject<() => void>('toggleForgotPasswordMode')
+
+// 登录或注册
const handleLogin = async () => {
try {
const isInvalid = await formRef.value?.validate()
if (isInvalid) return
loading.value = true
+ if (props.isRegister) {
+ await userStore.accountSignup({
+ username: form.username,
+ nickname: form.username,
+ password: encryptByRsa(form.password) || '',
+ captcha: form.captcha,
+ uuid: form.uuid,
+ gender: 0,
+ deptId: 1,
+ roleIds: ['547888897925840928'],
+ status: 1,
+ })
+ }
await userStore.accountLogin({
username: form.username,
password: encryptByRsa(form.password) || '',
@@ -122,19 +180,19 @@ const handleLogin = async () => {
})
tabsStore.reset()
const { redirect, ...othersQuery } = router.currentRoute.value.query
- const { rememberMe } = loginConfig.value
- loginConfig.value.username = rememberMe ? form.username : ''
await router.push({
path: (redirect as string) || '/',
query: {
...othersQuery,
},
})
- Message.success('欢迎使用')
+ const { rememberMe } = loginConfig.value
+ loginConfig.value.username = rememberMe ? form.username : ''
+ loginConfig.value.password = rememberMe ? form.password : ''
+ Message.success(`${props.isRegister ? '注册' : '登录'}成功，${form.username} ${timeFix()}，欢迎使用`)
} catch (error) {
- console.error(error)
+ // Message.error(String(error))
getCaptcha()
- form.captcha = ''
} finally {
loading.value = false
}
@@ -142,9 +200,14 @@ const handleLogin = async () => {
onMounted(() => {
getCaptcha()
+ inputRef.value?.focus()
})
+
+
diff --git a/src/views/login/components/background/index.vue b/src/views/login/components/background/index.vue
index e6847a3..a822e2b 100644
--- a/src/views/login/components/background/index.vue
+++ b/src/views/login/components/background/index.vue
@@ -1,16 +1,46 @@
+
-
-
+
+
-
+
+
+
+
+
diff --git a/src/views/login/components/email/index.vue b/src/views/login/components/email/index.vue
index 5f3f1eb..9067803 100644
--- a/src/views/login/components/email/index.vue
+++ b/src/views/login/components/email/index.vue
@@ -9,14 +9,24 @@
@submit="handleLogin"
>
-
+
+
+
+
+
+
-
+
+
+
+
+
+
@@ -25,7 +35,8 @@
- 立即登录
+
+ 立 即 登 录
import { type FormInstance, Message } from '@arco-design/web-vue'
-import type { BehaviorCaptchaReq } from '@/apis'
+import { type BehaviorCaptchaReq, getEmailCaptcha } from '@/apis'
// import { type BehaviorCaptchaReq, getEmailCaptcha } from '@/apis'
import { useTabsStore, useUserStore } from '@/stores'
import * as Regexp from '@/utils/regexp'
+import { timeFix } from '@/utils'
+const inputRefd = ref(null)
const formRef = ref()
const form = reactive({
email: '',
@@ -59,6 +72,67 @@ const rules: FormInstance['rules'] = {
captcha: [{ required: true, message: '请输入验证码' }],
}
+const VerifyRef = ref>()
+const captchaType = ref('blockPuzzle')
+const captchaMode = ref('pop')
+const captchaLoading = ref(false)
+
+const captchaTimer = ref()
+const captchaTime = ref(60)
+const captchaBtnName = ref('获取验证码')
+const captchaDisable = ref(false)
+
+const validatePhone = () => {
+ const email = form.email
+ const isValid = Regexp.Email.test(email)
+ captchaDisable.value = isValid
+}
+
+// 重置验证码
+const resetCaptcha = () => {
+ window.clearInterval(captchaTimer.value)
+ captchaTime.value = 60
+ captchaBtnName.value = '获取验证码'
+ captchaDisable.value = true
+}
+
+// 弹出行为验证码
+const onCaptcha = async () => {
+ if (captchaLoading.value) return
+ const isInvalid = await formRef.value?.validateField('email')
+ if (isInvalid) return
+ VerifyRef.value.show()
+}
+// 获取验证码
+const getCaptcha = async (captchaReq: BehaviorCaptchaReq) => {
+ if (captchaLoading.value) return
+ const isInvalid = await formRef.value?.validateField('email')
+ if (isInvalid) return
+ try {
+ captchaLoading.value = true
+ captchaBtnName.value = '发送中...'
+ // await getEmailCaptcha(form.email, captchaReq)
+ // const captchaReq: BehaviorCaptchaReq = { /* 根据需要填充属性 */ }
+ await getEmailCaptcha(form.email, captchaReq)
+ captchaLoading.value = false
+ captchaDisable.value = false
+ captchaBtnName.value = `获取验证码(${(captchaTime.value -= 1)}s)`
+ Message.success('邮件发送成功，请前往邮箱查看验证码')
+ // Message.success('仅提供效果演示，实际使用请查看代码取消相关注释')
+ captchaTimer.value = window.setInterval(() => {
+ captchaTime.value -= 1
+ captchaBtnName.value = `获取验证码(${captchaTime.value}s)`
+ if (captchaTime.value <= 0) {
+ resetCaptcha()
+ }
+ }, 1000)
+ } catch (error) {
+ resetCaptcha()
+ } finally {
+ captchaLoading.value = false
+ }
+}
+
const userStore = useUserStore()
const tabsStore = useTabsStore()
const router = useRouter()
@@ -72,70 +146,26 @@ const handleLogin = async () => {
await userStore.emailLogin(form)
tabsStore.reset()
const { redirect, ...othersQuery } = router.currentRoute.value.query
- await router.push({
+ router.push({
path: (redirect as string) || '/',
query: {
...othersQuery,
},
})
- Message.success('欢迎使用')
+ Message.success(`登录成功，${form.email} ${timeFix()}，欢迎使用`)
} catch (error) {
form.captcha = ''
} finally {
loading.value = false
}
}
+onMounted(() => {
+ inputRefd.value?.focus()
+})
+
-const VerifyRef = ref>()
-const captchaType = ref('blockPuzzle')
-const captchaMode = ref('pop')
-const captchaLoading = ref(false)
-
-// 弹出行为验证码
-const onCaptcha = async () => {
- if (captchaLoading.value) return
- const isInvalid = await formRef.value?.validateField('email')
- if (isInvalid) return
- VerifyRef.value.show()
-}
-
-const captchaTimer = ref()
-const captchaTime = ref(60)
-const captchaBtnName = ref('获取验证码')
-const captchaDisable = ref(false)
-// 重置验证码
-const resetCaptcha = () => {
- window.clearInterval(captchaTimer.value)
- captchaTime.value = 60
- captchaBtnName.value = '获取验证码'
- captchaDisable.value = false
-}
-
-// 获取验证码
-// eslint-disable-next-line unused-imports/no-unused-vars
-const getCaptcha = async (captchaReq: BehaviorCaptchaReq) => {
- try {
- captchaLoading.value = true
- captchaBtnName.value = '发送中...'
- // await getEmailCaptcha(form.email, captchaReq)
- captchaLoading.value = false
- captchaDisable.value = true
- captchaBtnName.value = `获取验证码(${(captchaTime.value -= 1)}s)`
- // Message.success('邮件发送成功')
- Message.success('仅提供效果演示，实际使用请查看代码取消相关注释')
- captchaTimer.value = window.setInterval(() => {
- captchaTime.value -= 1
- captchaBtnName.value = `获取验证码(${captchaTime.value}s)`
- if (captchaTime.value <= 0) {
- resetCaptcha()
- }
- }, 1000)
- } catch (error) {
- resetCaptcha()
- } finally {
- captchaLoading.value = false
- }
-}
+
diff --git a/src/views/login/components/phone/code.ts b/src/views/login/components/phone/code.ts
new file mode 100644
index 0000000..69a3ff6
--- /dev/null
+++ b/src/views/login/components/phone/code.ts
@@ -0,0 +1,762 @@
+export const countryNameMap = [
+ {
+ code: '+86',
+ name: '中国'
+ },
+ {
+ code: '+852',
+ name: '中国香港'
+ },
+ {
+ code: '+853',
+ name: '中国澳门'
+ },
+ {
+ code: '+886',
+ name: '中国台湾'
+ },
+ {
+ code: '+1',
+ name: '美国/加拿大'
+ },
+ {
+ code: '+7',
+ name: '俄罗斯/哈萨克斯坦'
+ },
+ {
+ code: '+81',
+ name: '日本'
+ },
+ {
+ code: '+1473',
+ name: '格林纳达'
+ },
+ {
+ code: '+41',
+ name: '瑞士'
+ },
+ {
+ code: '+232',
+ name: '塞拉利昂'
+ },
+ {
+ code: '+36',
+ name: '匈牙利'
+ },
+ {
+ code: '+1246',
+ name: '巴巴多斯'
+ },
+ {
+ code: '+216',
+ name: '突尼斯'
+ },
+ {
+ code: '+39',
+ name: '意大利'
+ },
+ {
+ code: '+229',
+ name: '贝宁'
+ },
+ {
+ code: '+62',
+ name: '印度尼西亚'
+ },
+ {
+ code: '+1869',
+ name: '圣基茨和尼维斯'
+ },
+ {
+ code: '+856',
+ name: '老挝'
+ },
+ {
+ code: '+256',
+ name: '乌干达'
+ },
+ {
+ code: '+376',
+ name: '安道尔'
+ },
+ {
+ code: '+257',
+ name: '布隆迪'
+ },
+ {
+ code: '+27',
+ name: '南非'
+ },
+ {
+ code: '+33',
+ name: '法国'
+ },
+ {
+ code: '+218',
+ name: '利比亚'
+ },
+ {
+ code: '+52',
+ name: '墨西哥'
+ },
+ {
+ code: '+241',
+ name: '加蓬'
+ },
+ {
+ code: '+389',
+ name: '北马其顿'
+ },
+ {
+ code: '+967',
+ name: '也门'
+ },
+ {
+ code: '+677',
+ name: '所罗门群岛'
+ },
+ {
+ code: '+998',
+ name: '乌兹别克斯坦'
+ },
+ {
+ code: '+20',
+ name: '埃及'
+ },
+ {
+ code: '+221',
+ name: '塞内加尔'
+ },
+ {
+ code: '+94',
+ name: '斯里兰卡'
+ },
+ {
+ code: '+970',
+ name: '巴勒斯坦'
+ },
+ {
+ code: '+880',
+ name: '孟加拉国'
+ },
+ {
+ code: '+51',
+ name: '秘鲁'
+ },
+ {
+ code: '+65',
+ name: '新加坡'
+ },
+ {
+ code: '+90',
+ name: '土耳其'
+ },
+ {
+ code: '+93',
+ name: '阿富汗'
+ },
+ {
+ code: '+44',
+ name: '英国'
+ },
+ {
+ code: '+260',
+ name: '赞比亚'
+ },
+ {
+ code: '+358',
+ name: '芬兰'
+ },
+ {
+ code: '+227',
+ name: '尼日尔'
+ },
+ {
+ code: '+245',
+ name: '几内亚比绍'
+ },
+ {
+ code: '+994',
+ name: '阿塞拜疆'
+ },
+ {
+ code: '+253',
+ name: '吉布提'
+ },
+ {
+ code: '+850',
+ name: '朝鲜'
+ },
+ {
+ code: '+230',
+ name: '毛里求斯'
+ },
+ {
+ code: '+57',
+ name: '哥伦比亚'
+ },
+ {
+ code: '+30',
+ name: '希腊'
+ },
+ {
+ code: '+385',
+ name: '克罗地亚'
+ },
+ {
+ code: '+212',
+ name: '摩洛哥'
+ },
+ {
+ code: '+213',
+ name: '阿尔及利亚'
+ },
+ {
+ code: '+31',
+ name: '荷兰'
+ },
+ {
+ code: '+249',
+ name: '苏丹'
+ },
+ {
+ code: '+679',
+ name: '斐济'
+ },
+ {
+ code: '+423',
+ name: '列支敦士登'
+ },
+ {
+ code: '+977',
+ name: '尼泊尔'
+ },
+ {
+ code: '+995',
+ name: '格鲁吉亚'
+ },
+ {
+ code: '+92',
+ name: '巴基斯坦'
+ },
+ {
+ code: '+377',
+ name: '摩纳哥'
+ },
+ {
+ code: '+267',
+ name: '博茨瓦纳'
+ },
+ {
+ code: '+961',
+ name: '黎巴嫩'
+ },
+ {
+ code: '+675',
+ name: '巴布亚新几内亚'
+ },
+ {
+ code: '+1809',
+ name: '多米尼加共和国'
+ },
+ {
+ code: '+974',
+ name: '卡塔尔'
+ },
+ {
+ code: '+261',
+ name: '马达加斯加'
+ },
+ {
+ code: '+91',
+ name: '印度'
+ },
+ {
+ code: '+963',
+ name: '叙利亚'
+ },
+ {
+ code: '+382',
+ name: '黑山'
+ },
+ {
+ code: '+595',
+ name: '巴拉圭'
+ },
+ {
+ code: '+503',
+ name: '萨尔瓦多'
+ },
+ {
+ code: '+380',
+ name: '乌克兰'
+ },
+ {
+ code: '+264',
+ name: '纳米比亚'
+ },
+ {
+ code: '+971',
+ name: '阿拉伯联合酋长国'
+ },
+ {
+ code: '+359',
+ name: '保加利亚'
+ },
+ {
+ code: '+49',
+ name: '德国'
+ },
+ {
+ code: '+855',
+ name: '柬埔寨'
+ },
+ {
+ code: '+964',
+ name: '伊拉克'
+ },
+ {
+ code: '+46',
+ name: '瑞典'
+ },
+ {
+ code: '+53',
+ name: '古巴'
+ },
+ {
+ code: '+996',
+ name: '吉尔吉斯斯坦'
+ },
+ {
+ code: '+60',
+ name: '马来西亚'
+ },
+ {
+ code: '+357',
+ name: '塞浦路斯'
+ },
+ {
+ code: '+265',
+ name: '马拉维'
+ },
+ {
+ code: '+966',
+ name: '沙特阿拉伯'
+ },
+ {
+ code: '+387',
+ name: '波斯尼亚和黑塞哥维那'
+ },
+ {
+ code: '+251',
+ name: '埃塞俄比亚'
+ },
+ {
+ code: '+34',
+ name: '西班牙'
+ },
+ {
+ code: '+386',
+ name: '斯洛文尼亚'
+ },
+ {
+ code: '+968',
+ name: '阿曼'
+ },
+ {
+ code: '+378',
+ name: '圣马力诺'
+ },
+ {
+ code: '+266',
+ name: '莱索托'
+ },
+ {
+ code: '+692',
+ name: '马绍尔群岛'
+ },
+ {
+ code: '+354',
+ name: '冰岛'
+ },
+ {
+ code: '+352',
+ name: '卢森堡'
+ },
+ {
+ code: '+54',
+ name: '阿根廷'
+ },
+ {
+ code: '+674',
+ name: '瑙鲁'
+ },
+ {
+ code: '+1767',
+ name: '多米尼克'
+ },
+ {
+ code: '+506',
+ name: '哥斯达黎加'
+ },
+ {
+ code: '+61',
+ name: '澳大利亚'
+ },
+ {
+ code: '+66',
+ name: '泰国'
+ },
+ {
+ code: '+509',
+ name: '海地'
+ },
+ {
+ code: '+688',
+ name: '图瓦卢'
+ },
+ {
+ code: '+504',
+ name: '洪都拉斯'
+ },
+ {
+ code: '+240',
+ name: '赤道几内亚'
+ },
+ {
+ code: '+1758',
+ name: '圣卢西亚'
+ },
+ {
+ code: '+375',
+ name: '白俄罗斯'
+ },
+ {
+ code: '+371',
+ name: '拉脱维亚'
+ },
+ {
+ code: '+680',
+ name: '帕劳'
+ },
+ {
+ code: '+63',
+ name: '菲律宾'
+ },
+ {
+ code: '+45',
+ name: '丹麦'
+ },
+ {
+ code: '+237',
+ name: '喀麦隆'
+ },
+ {
+ code: '+224',
+ name: '几内亚'
+ },
+ {
+ code: '+973',
+ name: '巴林'
+ },
+ {
+ code: '+597',
+ name: '苏里南'
+ },
+ {
+ code: '+252',
+ name: '索马里'
+ },
+ {
+ code: '+678',
+ name: '瓦努阿图'
+ },
+ {
+ code: '+228',
+ name: '多哥'
+ },
+ {
+ code: '+254',
+ name: '肯尼亚'
+ },
+ {
+ code: '+250',
+ name: '卢旺达'
+ },
+ {
+ code: '+372',
+ name: '爱沙尼亚'
+ },
+ {
+ code: '+40',
+ name: '罗马尼亚'
+ },
+ {
+ code: '+1868',
+ name: '特立尼达和多巴哥'
+ },
+ {
+ code: '+592',
+ name: '圭亚那'
+ },
+ {
+ code: '+670',
+ name: '东帝汶'
+ },
+ {
+ code: '+84',
+ name: '越南'
+ },
+ {
+ code: '+598',
+ name: '乌拉圭'
+ },
+ {
+ code: '+3906698',
+ name: '梵蒂冈'
+ },
+ {
+ code: '+43',
+ name: '奥地利'
+ },
+ {
+ code: '+1268',
+ name: '安提瓜和巴布达'
+ },
+ {
+ code: '+993',
+ name: '土库曼斯坦'
+ },
+ {
+ code: '+258',
+ name: '莫桑比克'
+ },
+ {
+ code: '+507',
+ name: '巴拿马'
+ },
+ {
+ code: '+691',
+ name: '密克罗尼西亚'
+ },
+ {
+ code: '+353',
+ name: '爱尔兰'
+ },
+ {
+ code: '+47',
+ name: '挪威'
+ },
+ {
+ code: '+236',
+ name: '中非共和国'
+ },
+ {
+ code: '+226',
+ name: '布基纳法索'
+ },
+ {
+ code: '+291',
+ name: '厄立特里亚'
+ },
+ {
+ code: '+255',
+ name: '坦桑尼亚'
+ },
+ {
+ code: '+82',
+ name: '韩国'
+ },
+ {
+ code: '+962',
+ name: '约旦'
+ },
+ {
+ code: '+222',
+ name: '毛里塔尼亚'
+ },
+ {
+ code: '+370',
+ name: '立陶宛'
+ },
+ {
+ code: '+421',
+ name: '斯洛伐克'
+ },
+ {
+ code: '+244',
+ name: '安哥拉'
+ },
+ {
+ code: '+76',
+ name: '哈萨克斯坦'
+ },
+ {
+ code: '+373',
+ name: '摩尔多瓦'
+ },
+ {
+ code: '+223',
+ name: '马里'
+ },
+ {
+ code: '+374',
+ name: '亚美尼亚'
+ },
+ {
+ code: '+685',
+ name: '萨摩亚'
+ },
+ {
+ code: '+591',
+ name: '玻利维亚'
+ },
+ {
+ code: '+56',
+ name: '智利'
+ },
+ {
+ code: '+1784',
+ name: '圣文森特和格林纳丁斯'
+ },
+ {
+ code: '+248',
+ name: '塞舌尔'
+ },
+ {
+ code: '+502',
+ name: '危地马拉'
+ },
+ {
+ code: '+593',
+ name: '厄瓜多尔'
+ },
+ {
+ code: '+992',
+ name: '塔吉克斯坦'
+ },
+ {
+ code: '+356',
+ name: '马耳他'
+ },
+ {
+ code: '+220',
+ name: '冈比亚'
+ },
+ {
+ code: '+234',
+ name: '尼日利亚'
+ },
+ {
+ code: '+1242',
+ name: '巴哈马'
+ },
+ {
+ code: '+965',
+ name: '科威特'
+ },
+ {
+ code: '+960',
+ name: '马尔代夫'
+ },
+ {
+ code: '+211',
+ name: '南苏丹'
+ },
+ {
+ code: '+98',
+ name: '伊朗'
+ },
+ {
+ code: '+355',
+ name: '阿尔巴尼亚'
+ },
+ {
+ code: '+55',
+ name: '巴西'
+ },
+ {
+ code: '+381',
+ name: '塞尔维亚'
+ },
+ {
+ code: '+501',
+ name: '伯利兹'
+ },
+ {
+ code: '+95',
+ name: '缅甸'
+ },
+ {
+ code: '+975',
+ name: '不丹'
+ },
+ {
+ code: '+58',
+ name: '委内瑞拉'
+ },
+ {
+ code: '+231',
+ name: '利比里亚'
+ },
+ {
+ code: '+1876',
+ name: '牙买加'
+ },
+ {
+ code: '+48',
+ name: '波兰'
+ },
+ {
+ code: '+673',
+ name: '文莱'
+ },
+ {
+ code: '+269',
+ name: '科摩罗'
+ },
+ {
+ code: '+676',
+ name: '汤加'
+ },
+ {
+ code: '+686',
+ name: '基里巴斯'
+ },
+ {
+ code: '+233',
+ name: '加纳'
+ },
+ {
+ code: '+235',
+ name: '乍得'
+ },
+ {
+ code: '+263',
+ name: '津巴布韦'
+ },
+ {
+ code: '+976',
+ name: '蒙古'
+ },
+ {
+ code: '+351',
+ name: '葡萄牙'
+ },
+ {
+ code: '+32',
+ name: '比利时'
+ },
+ {
+ code: '+972',
+ name: '以色列'
+ },
+ {
+ code: '+64',
+ name: '新西兰'
+ },
+ {
+ code: '+505',
+ name: '尼加拉瓜'
+ }
+]
diff --git a/src/views/login/components/phone/index copy.vue b/src/views/login/components/phone/index copy.vue
new file mode 100644
index 0000000..0e4afae
--- /dev/null
+++ b/src/views/login/components/phone/index copy.vue
@@ -0,0 +1,177 @@
+
+
+
+
+
+
+
+
+ {{ captchaBtnName }}
+
+
+
+
+ 立即登录
+
+
+
+
+
+
+
+
+
diff --git a/src/views/login/components/phone/index.vue b/src/views/login/components/phone/index.vue
index 0e4afae..89c37d1 100644
--- a/src/views/login/components/phone/index.vue
+++ b/src/views/login/components/phone/index.vue
@@ -9,14 +9,42 @@
@submit="handleLogin"
>
-
+
+
+
+
+
+ {{ country.code }} {{ country.name }}
+
+
+
+
+
-
+
+
+
+
+
@@ -25,7 +53,7 @@
- 立即登录
+ {{ !isRegister ? '立 即 登 录' : '开 始 体 验' }}
import { type FormInstance, Message } from '@arco-design/web-vue'
+import axios from 'axios'
+import { countryNameMap } from './code'
import type { BehaviorCaptchaReq } from '@/apis'
// import { type BehaviorCaptchaReq, getSmsCaptcha } from '@/apis'
import { useTabsStore, useUserStore } from '@/stores'
import * as Regexp from '@/utils/regexp'
+import { getSmsCaptcha } from '@/apis'
+import { timeFix } from '@/utils'
+import { encryptByRsa } from '@/utils/encrypt'
+import { getPhoneCountryCode } from '@/apis/auth'
+
+// 定义组件的 props
+const props = defineProps({
+ isRegister: {
+ type: Boolean,
+ },
+})
const formRef = ref()
const form = reactive({
phone: '',
+ username: '',
+ nickname: '',
+ password: 'qq111111',
+ gender: 0,
+ deptId: 1,
+ roleIds: ['547888897925840928'],
+ status: 1,
+ uuid: '',
captcha: '',
})
@@ -59,30 +108,34 @@ const rules: FormInstance['rules'] = {
captcha: [{ required: true, message: '请输入验证码' }],
}
-const userStore = useUserStore()
-const tabsStore = useTabsStore()
-const router = useRouter()
-const loading = ref(false)
-// 登录
-const handleLogin = async () => {
- const isInvalid = await formRef.value?.validate()
- if (isInvalid) return
+// 定义国家和地区数据
+interface Country {
+ code: string
+ name: string
+}
+const countries = ref([])
+const selectedCountry = ref() // 默认值
+const inputRefd = ref(null)
+
+// 处理选择变化
+const handleChange = (value) => {
+ selectedCountry.value = value
+}
+
+// 获取国家和地区数据
+// eslint-disable-next-line unused-imports/no-unused-vars
+const fetchCountries = async () => {
try {
- loading.value = true
- await userStore.phoneLogin(form)
- tabsStore.reset()
- const { redirect, ...othersQuery } = router.currentRoute.value.query
- await router.push({
- path: (redirect as string) || '/',
- query: {
- ...othersQuery,
- },
- })
- Message.success('欢迎使用')
+ // const response = await getPhoneCountryCode()
+ const response = await axios.get('https://restcountries.com/v3.1/all')
+ const data = response.data.map((country: any) => ({
+ code: country.idd.root + (country.idd.suffixes ? country.idd.suffixes[0] : ''),
+ name: countryNameMap[country.name.common],
+ })).filter((country: { code: string, name: string | undefined }) => country.name !== undefined)
+ countries.value = data
+ console.warn(countries.value)
} catch (error) {
- form.captcha = ''
- } finally {
- loading.value = false
+ console.error('获取国家数据失败:', error)
}
}
@@ -104,26 +157,34 @@ const captchaTimer = ref()
const captchaTime = ref(60)
const captchaBtnName = ref('获取验证码')
const captchaDisable = ref(false)
+
+const validatePhone = () => {
+ const phone = form.phone
+ const isValid = Regexp.Phone.test(phone)
+ captchaDisable.value = isValid
+}
+
// 重置验证码
const resetCaptcha = () => {
window.clearInterval(captchaTimer.value)
captchaTime.value = 60
captchaBtnName.value = '获取验证码'
- captchaDisable.value = false
+ captchaDisable.value = true
}
// 获取验证码
-// eslint-disable-next-line unused-imports/no-unused-vars
+
const getCaptcha = async (captchaReq: BehaviorCaptchaReq) => {
try {
captchaLoading.value = true
captchaBtnName.value = '发送中...'
// await getSmsCaptcha(form.phone, captchaReq)
captchaLoading.value = false
- captchaDisable.value = true
+ captchaDisable.value = false
captchaBtnName.value = `获取验证码(${(captchaTime.value -= 1)}s)`
- // Message.success('短信发送成功')
- Message.success('仅提供效果演示，实际使用请查看代码取消相关注释')
+ Message.success('短信发送成功，演示默认【111111】')
+ form.captcha = '111111'
+ // Message.success('仅提供效果演示，实际使用请查看代码取消相关注释')
captchaTimer.value = window.setInterval(() => {
captchaTime.value -= 1
captchaBtnName.value = `获取验证码(${captchaTime.value}s)`
@@ -133,13 +194,97 @@ const getCaptcha = async (captchaReq: BehaviorCaptchaReq) => {
}, 1000)
} catch (error) {
resetCaptcha()
+ // Message.error(String(error))
} finally {
captchaLoading.value = false
}
}
+
+const userStore = useUserStore()
+const tabsStore = useTabsStore()
+const router = useRouter()
+const loading = ref(false)
+// 登录或注册
+const handleLogin = async () => {
+ const isInvalid = await formRef.value?.validate()
+ if (isInvalid) return
+ try {
+ loading.value = true
+ if (props.isRegister) {
+ await userStore.phoneSignup({
+ phone: form.phone,
+ captcha: form.captcha,
+ username: form.phone,
+ nickname: form.phone,
+ password: encryptByRsa(form.password) || '',
+ gender: 0,
+ deptId: 1,
+ roleIds: ['547888897925840928'],
+ status: 1,
+ })
+ }
+ await userStore.phoneLogin({
+ phone: form.phone,
+ captcha: form.captcha,
+ })
+ tabsStore.reset()
+ const { redirect, ...othersQuery } = router.currentRoute.value.query
+ router.push({
+ path: (redirect as string) || '/',
+ query: {
+ ...othersQuery,
+ },
+ })
+ if (props.isRegister) {
+ Message.success(`注册成功，${form.phone} ${timeFix()}，欢迎使用`)
+ Message.info(`初始密码【qq111111】，可前往个人中心修改密码`)
+ } else {
+ Message.success(`登录成功，${form.phone} ${timeFix()}，欢迎使用`)
+ }
+ } catch (error) {
+ form.captcha = ''
+ } finally {
+ loading.value = false
+ }
+}
+
+// watch(form, (newForm, oldForm) => {
+// // console.log('新的表单值:', newForm)
+// // console.log('旧的表单值:', oldForm)
+// // 这里可以添加更多的处理逻辑
+// }, { deep: true })
+
+// 在组件挂载时获取数据
+onMounted(() => {
+ // fetchCountries()
+ countries.value = countryNameMap
+ inputRefd.value?.focus()
+})
+
+
+
diff --git a/src/views/login/index copy.vue b/src/views/login/index copy.vue
new file mode 100644
index 0000000..aa12811
--- /dev/null
+++ b/src/views/login/index copy.vue
@@ -0,0 +1,518 @@
+
+
+
+ ![logo]()
+ 
+ {{ title }}
+
+
+
+
+
+
+
+
邮箱登录
+
+
+
+
+
+
+
+
+
+
+
其他登录方式
+
+
账号/手机号登录
+
邮箱登录
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
![logo]()
+
+
{{ title }}
+
+
+
+
+
邮箱登录
+
+
+
+
+
+
+
+
+
+
+
+
其他登录方式
+
+
账号/手机号登录
+
邮箱登录
+
+
+
+
+
+
+
+
+
-
- ![logo]()
-
+
+
+ ![logo]()
{{ title }}
-
-
-
-
+
+
+
+
![logo]()
+
{{ title === 'SakurA Platform' ? 'SakurA 自动化平台' : title }}
+
{{ version }}
-
+
-
邮箱登录
-
-
-
-
+
+
+
-
-
+
+
+
+
+
+
+
+
+ 邮箱登录
+
+ 修改密码
+
-
其他登录方式
-
-
账号/手机号登录
-
邮箱登录
-
-
-
-
-
-
+
+
其他登录方式
+
+
账号/手机号登录
+
邮箱登录
+
+
+
+
+
+
+
+
+
+
{{ !authStore.isRegister ? '没有账号？' : '已有账号？' }}
+
{{ !authStore.isRegister ? '去注册' : '立即登录' }}
-
-
![logo]()
+
+
+
![logo]()
{{ title }}
-
邮箱登录
-
-
-
-
+
+
+
-
-
+
+
+
+
+
+
+
+
+ 邮箱登录
+
+ 修改密码
+
-
其他登录方式
-
-
账号/手机号登录
-
邮箱登录
-
-
-
-
-
-
+
+
其他登录方式
+
+
账号/手机号登录
+
邮箱登录
+
+
+
+
+
+
+
+
+
+
{{ !authStore.isRegister ? '没有账号？' : '已有账号？' }}
+
{{ !authStore.isRegister ? '去注册' : '立即登录' }}
-
diff --git a/src/views/setting/components/VerifyModel.vue b/src/views/setting/components/VerifyModel.vue
index a42f5fc..d75778a 100644
--- a/src/views/setting/components/VerifyModel.vue
+++ b/src/views/setting/components/VerifyModel.vue
@@ -6,10 +6,7 @@
-
+
{{ captchaBtnName }}
@@ -51,37 +48,48 @@ const [form, resetForm] = useResetReactive({
oldPassword: '',
newPassword: '',
rePassword: '',
+ captchaDisable: false,
})
const columns: ColumnItem[] = reactive([
{
- label: '手机号',
+ label: '新手机号',
field: 'phone',
type: 'input',
span: 24,
- props: {
- showWordLimit: false,
- },
rules: [
- { required: true, message: '请输入手机号' },
- { match: Regexp.Phone, message: '请输入正确的手机号' },
+ { required: true, message: '请输入新手机号' },
+ { match: Regexp.Phone, message: '请输入正确的新手机号' },
],
hide: () => {
return verifyType.value !== 'phone'
},
+ props: {
+ allowClear: true,
+ maxLength: 11,
+ onInput: () => {
+ form.captchaDisable = Regexp.Phone.test(form.phone)
+ },
+ },
},
{
- label: '邮箱',
+ label: '新邮箱',
field: 'email',
type: 'input',
span: 24,
rules: [
- { required: true, message: '请输入邮箱' },
- { match: Regexp.Email, message: '请输入正确的邮箱' },
+ { required: true, message: '请输入新邮箱' },
+ { match: Regexp.Email, message: '请输入正确的新邮箱' },
],
hide: () => {
return verifyType.value !== 'email'
},
+ props: {
+ allowClear: true,
+ onInput: () => {
+ form.captchaDisable = Regexp.Email.test(form.email)
+ },
+ },
},
{
label: '验证码',
@@ -165,20 +173,13 @@ const onCaptcha = async () => {
const captchaTimer = ref()
const captchaTime = ref(60)
const captchaBtnName = ref('获取验证码')
-const captchaDisable = ref(false)
+
// 重置验证码
const resetCaptcha = () => {
window.clearInterval(captchaTimer.value)
captchaTime.value = 60
captchaBtnName.value = '获取验证码'
- captchaDisable.value = false
-}
-
-// 重置
-const reset = () => {
- formRef.value?.formRef?.resetFields()
- resetForm()
- resetCaptcha()
+ form.captchaDisable = true
}
// 获取验证码
@@ -189,14 +190,16 @@ const getCaptcha = async (captchaReq: BehaviorCaptchaReq) => {
captchaBtnName.value = '发送中...'
if (verifyType.value === 'phone') {
// await getSmsCaptcha(form.phone, captchaReq)
+ Message.success('短信发送成功，演示默认【111111】')
+ form.captcha = '111111'
} else if (verifyType.value === 'email') {
await getEmailCaptcha(form.email, captchaReq)
+ Message.success('邮件发送成功，请前往邮箱查看验证码')
}
captchaLoading.value = false
- captchaDisable.value = true
+ form.captchaDisable = false
captchaBtnName.value = `获取验证码(${(captchaTime.value -= 1)}s)`
- // Message.success('发送成功')
- Message.success('仅提供效果演示，实际使用请查看代码取消相关注释')
+ // Message.success('仅提供效果演示，实际使用请查看代码取消相关注释')
captchaTimer.value = window.setInterval(() => {
captchaTime.value -= 1
captchaBtnName.value = `获取验证码(${captchaTime.value}s)`
@@ -211,6 +214,13 @@ const getCaptcha = async (captchaReq: BehaviorCaptchaReq) => {
}
}
+// 取消
+const reset = () => {
+ formRef.value?.formRef?.resetFields()
+ resetForm()
+ resetCaptcha()
+}
+
// 保存
const save = async () => {
const isInvalid = await formRef.value?.formRef?.validate()
diff --git a/src/views/system/config/components/SiteSetting.vue b/src/views/system/config/components/SiteSetting.vue
index 317deb5..d7777be 100644
--- a/src/views/system/config/components/SiteSetting.vue
+++ b/src/views/system/config/components/SiteSetting.vue
@@ -73,7 +73,7 @@
-
+