|
@@ -26,7 +26,6 @@
|
|
|
</h1>
|
|
|
<p class="text-base font-bold leading-normal text-white-dark">欢迎登录V3StudioApp</p>
|
|
|
</div>
|
|
|
- {{ $t('dashboard') }}
|
|
|
<!-- <form class="space-y-5 dark:text-white" @submit.prevent="router.push('/')">
|
|
|
<div>
|
|
|
<label for="Email">请输入账号</label>
|
|
@@ -59,38 +58,41 @@
|
|
|
登录
|
|
|
</button>
|
|
|
</form> -->
|
|
|
- <!-- <el-form :model="loginForm" :rules="loginRules" ref="loginForm" class="login-input">
|
|
|
+ <el-form :model="loginForm" ref="loginFormRef" class="login-input">
|
|
|
<el-form-item prop="username">
|
|
|
<el-input v-model="loginForm.username" :placeholder="$t('username')" autofocus
|
|
|
clearable>
|
|
|
- <svg-icon #prefix class="el-input__icon" icon-class="user" />
|
|
|
+ <template v-slot:prefix>
|
|
|
+ <svg-icon class="el-input__icon" icon-class="user" />
|
|
|
+ </template>
|
|
|
</el-input>
|
|
|
</el-form-item>
|
|
|
<el-form-item prop="password">
|
|
|
- <el-input v-model="loginForm.password" type="password" autocompete="off"
|
|
|
+ <el-input v-model="loginForm.password" type="password" autocomplete="off"
|
|
|
:placeholder="$t('password')" :minlength="6" :maxlength="20" clearable>
|
|
|
- <svg-icon slot="prefix" class="el-input__icon" icon-class="password" />
|
|
|
+ <template v-slot:prefix>
|
|
|
+ <svg-icon class="el-input__icon" icon-class="password" />
|
|
|
+ </template>
|
|
|
</el-input>
|
|
|
</el-form-item>
|
|
|
- <div style="margin-bottom: 20px" v-if="validateInFO.validator_type === 'ALIYUN'">
|
|
|
- <div id="pc-valid" class="nc-container"></div>
|
|
|
- </div>
|
|
|
- <el-form-item prop="validcode" v-else-if="validateInFO.validator_type === 'IMAGE'">
|
|
|
- <el-input v-model="loginForm.validcode" :placeholder="$t('validcode')"
|
|
|
- :maxlength="4" clearable>
|
|
|
- <template slot="append">
|
|
|
+ <el-form-item prop="validcode" v-if="validateInFO.validator_type === 'IMAGE'">
|
|
|
+ <el-input v-model="loginForm.validcode" :placeholder="$t('validcode')" :maxlength="4"
|
|
|
+ clearable>
|
|
|
+ <template v-slot:append>
|
|
|
<img class="login-validcode-img" :src="validcodeImg" @click="changeValidcode">
|
|
|
</template>
|
|
|
</el-input>
|
|
|
</el-form-item>
|
|
|
- <div v-else></div>
|
|
|
+ <div v-else-if="validateInFO.validator_type === 'ALIYUN'" style="margin-bottom: 20px">
|
|
|
+ <div id="pc-valid" class="nc-container"></div>
|
|
|
+ </div>
|
|
|
<el-form-item>
|
|
|
<el-button type="primary" :loading="loading" :disabled="!accountAfsSuccess" class="btn"
|
|
|
- @click="submitLogin">{{
|
|
|
- $t('logIn') }}</el-button>
|
|
|
+ @click="submitLogin(loginFormRef)">
|
|
|
+ {{ $t('logIn') }}
|
|
|
+ </el-button>
|
|
|
</el-form-item>
|
|
|
- </el-form> -->
|
|
|
-
|
|
|
+ </el-form>
|
|
|
<!-- 新用户注册账号--暂不开放 -->
|
|
|
<!-- <div class="relative my-7 text-center md:mb-9">
|
|
|
<span class="absolute inset-x-0 top-1/2 h-px w-full -translate-y-1/2 bg-white-light dark:bg-white-dark"></span>
|
|
@@ -112,45 +114,65 @@
|
|
|
</div>
|
|
|
</template>
|
|
|
<script lang="ts" setup>
|
|
|
-import { computed, reactive, ref } from 'vue';
|
|
|
+import { computed, onMounted, reactive, ref } from 'vue';
|
|
|
+import Vue from 'vue'
|
|
|
import { useI18n } from 'vue-i18n';
|
|
|
import appSetting from '@/app-setting';
|
|
|
import { useAppStore } from '@/stores/index';
|
|
|
-import { useRouter } from 'vue-router';
|
|
|
+import { useRouter, useRoute } from 'vue-router';
|
|
|
import { useMeta } from '@/composables/use-meta';
|
|
|
+import Storage from '@/utils/storage'
|
|
|
+import * as API_common from '@/api/common'
|
|
|
+import { v4 as uuidv4 } from "uuid";
|
|
|
+import AliyunAfs from '@/composables/AliyunAfs'
|
|
|
+import type { FormInstance } from 'element-plus'
|
|
|
|
|
|
-/* import IconCaretDown from '@/components/icon/icon-caret-down.vue';
|
|
|
-import IconMail from '@/components/icon/icon-mail.vue';
|
|
|
-import IconLockDots from '@/components/icon/icon-lock-dots.vue';
|
|
|
-import IconInstagram from '@/components/icon/icon-instagram.vue';
|
|
|
-import IconFacebookCircle from '@/components/icon/icon-facebook-circle.vue';
|
|
|
-import IconTwitter from '@/components/icon/icon-twitter.vue';
|
|
|
-import IconGoogle from '@/components/icon/icon-google.vue'; */
|
|
|
|
|
|
-const loginForm: any = reactive({
|
|
|
+const loading: any = ref(false)
|
|
|
+const loginForm = reactive({
|
|
|
username: '',
|
|
|
password: '',
|
|
|
scene: 'LOGIN',
|
|
|
validcode: ''
|
|
|
-})
|
|
|
-const loginRules = reactive({
|
|
|
+});
|
|
|
+const { t } = useI18n();
|
|
|
+/* const loginRules = reactive({
|
|
|
username: [
|
|
|
- { required: true, message: $t('val_username'), trigger: 'blur' }
|
|
|
+ { required: true, message: t('val_username'), trigger: 'blur' }
|
|
|
],
|
|
|
password: [
|
|
|
- { required: true, message: $t('val_password'), trigger: 'blur' }
|
|
|
+ { required: true, message: t('val_password'), trigger: 'blur' }
|
|
|
],
|
|
|
validcode: [
|
|
|
- { required: true, message: $t('val_validcode'), trigger: 'blur' }
|
|
|
+ { required: true, message: t('val_validcode'), trigger: 'blur' }
|
|
|
]
|
|
|
+}); */
|
|
|
+// 验证信息
|
|
|
+const validateInFO: any = ref({})
|
|
|
+let validcodeImg: any = ref('')
|
|
|
+let uuid: any = ref(Storage.getItem('admin_uuid'))
|
|
|
+// 阿里云验证条实例
|
|
|
+let afs: any = ref(null)
|
|
|
+// 当滑动验证成功之后返回的参数
|
|
|
+const afsParam: any = ref({
|
|
|
+ c_sessionid: '',
|
|
|
+ sig: '',
|
|
|
+ nc_token: ''
|
|
|
})
|
|
|
+// 阿里云滑动验证是否通过 && 如果不是 阿里云验证则直接设置为 true
|
|
|
+const accountAfsSuccess: any = ref(false)
|
|
|
+// 是否为加盟商登录
|
|
|
+const is_franchise: any = ref(false)
|
|
|
+const loginFormRef = ref<FormInstance>()
|
|
|
+
|
|
|
|
|
|
useMeta({ title: 'Login Boxed' });
|
|
|
const router = useRouter();
|
|
|
-
|
|
|
+const route = useRoute()
|
|
|
const store = useAppStore();
|
|
|
// multi language
|
|
|
const i18n = reactive(useI18n());
|
|
|
+console.log(i18n);
|
|
|
const changeLanguage = (item: any) => {
|
|
|
i18n.locale = item.code;
|
|
|
appSetting.toggleLanguage(item);
|
|
@@ -158,4 +180,102 @@ const changeLanguage = (item: any) => {
|
|
|
const currentFlag = computed(() => {
|
|
|
return `/assets/images/flags/${i18n.locale.toUpperCase()}.svg`;
|
|
|
});
|
|
|
+
|
|
|
+onMounted(() => {
|
|
|
+ const uuids = Storage.getItem('admin_uuid')
|
|
|
+ if (uuids) {
|
|
|
+ uuid = uuids
|
|
|
+ } else {
|
|
|
+ const _uuid = uuidv4()
|
|
|
+ uuid = _uuid
|
|
|
+ Storage.setItem('admin_uuid', _uuid, { expires: 30 })
|
|
|
+ }
|
|
|
+ changeValidcode();
|
|
|
+ API_common.getValidator().then(res => {
|
|
|
+ validateInFO.value = res
|
|
|
+ const { validator_type, aliyun_afs } = res
|
|
|
+ if (validator_type === 'ALIYUN') {
|
|
|
+ //afs = new AliyunAfs('#pc-valid', aliyun_afs.scene, aliyun_afs.app_key, initCaptcha)
|
|
|
+ afs.init()
|
|
|
+ } else {
|
|
|
+ accountAfsSuccess.value = true
|
|
|
+ }
|
|
|
+ })
|
|
|
+});
|
|
|
+
|
|
|
+/** 阿里云滑动验证 通过后的回调函数 **/
|
|
|
+const initCaptcha = (data) => {
|
|
|
+ afsParam.c_sessionid = data.csessionid
|
|
|
+ afsParam.sig = data.sig
|
|
|
+ afsParam.nc_token = data.nc_token
|
|
|
+ accountAfsSuccess.value = true
|
|
|
+}
|
|
|
+
|
|
|
+/** 更换图片验证码 */
|
|
|
+const changeValidcode = () => {
|
|
|
+ validcodeImg = API_common.getValidateCodeUrl('LOGIN', uuid)
|
|
|
+ console.log(validcodeImg);
|
|
|
+}
|
|
|
+const MixinClone = (obj) => {
|
|
|
+ return JSON.parse(JSON.stringify(obj))
|
|
|
+}
|
|
|
+
|
|
|
+/** 登录处理 */
|
|
|
+const dispatchLoginAction = (params) => {
|
|
|
+ loading = true
|
|
|
+ return new Promise((resolve, reject) => {
|
|
|
+ useAppStore.dispatch('loginAction', params).then((res) => {
|
|
|
+ loading = false
|
|
|
+ if (res && api.adminWS) {
|
|
|
+ try {
|
|
|
+ const WS = new WebSocket(api.adminWS, res.access_token)
|
|
|
+ Vue.prototype.$WS = WS
|
|
|
+ } catch (error) {
|
|
|
+ console.log('websocket 实例化失败:', error)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ const forward = route.query.forward
|
|
|
+ console.log(forward);
|
|
|
+ let query = JSON.parse(JSON.stringify(route.query))
|
|
|
+
|
|
|
+ //delete query.forward
|
|
|
+ router.push({ path: '/', query }).catch(() => { })//forward ||
|
|
|
+ }).catch(() => {
|
|
|
+ loading = false
|
|
|
+ reject()
|
|
|
+ })
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+const submitLogin = (formEl: FormInstance | undefined) => {
|
|
|
+ if (!accountAfsSuccess) return
|
|
|
+ if (afs) {
|
|
|
+ const params = MixinClone(loginForm)
|
|
|
+ params.c_sessionid = afsParam.c_sessionid
|
|
|
+ params.sig = afsParam.sig
|
|
|
+ params.nc_token = afsParam.nc_token
|
|
|
+ delete params.validcode
|
|
|
+ delete params.scene
|
|
|
+ dispatchLoginAction(params).catch(() => {
|
|
|
+ // this.afs.reload()
|
|
|
+ accountAfsSuccess.value = false
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ formEl.validate((valid) => {
|
|
|
+ if (valid) {
|
|
|
+ const params = MixinClone(loginForm)
|
|
|
+ params.uuid = uuid
|
|
|
+ params.captcha = params.validcode
|
|
|
+ delete params.validcode
|
|
|
+ dispatchLoginAction(params).catch(() => {
|
|
|
+ changeValidcode()
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ //this.$message.error(this.translateKey('val_form'))
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
</script>
|