Skip to content

广
广东建设用地-前端
提交 a9a0ecaa authored 作者: 王培喜's avatar 王培喜
浏览文件
操作

top分支为准

上级 1d139bd5
全部展开 隐藏空白字符变更
内嵌 并排
正在显示 包含 190 行增加 和 160 行删除
.env
浏览文件 @ a9a0ecaa
......@@ -5,7 +5,7 @@ VITE_PORT = 3100
VITE_GLOB_APP_TITLE = 广东省建设用地污染地块信息系统
# 简称，用于配置文件名字 不要出现空格、数字开头等特殊字符
VITE_GLOB_APP_SHORT_NAME = Admin
VITE_GLOB_APP_SHORT_NAME = JeecgBootAdmin
# 单点登录服务端地址
VITE_GLOB_APP_CAS_BASE_URL=http://cas.test.com:8443/cas
......
src/components/Application/src/AppLogo.vue
浏览文件 @ a9a0ecaa
......@@ -4,8 +4,8 @@
-->
<template>
<div class="anticon" :class="getAppLogoClass" @click="goHome">
<img style="width: 38px;height: 38px;" src="../../../assets/loginmini/icon/title_logo.png" />
<div class="ml-2 truncate md:opacity-100" style="font-size: 24px;font-weight: normal;" :class="getTitleClass" v-show="showTitle">
<img src="../../../assets/loginmini/icon/title_logo.png" />
<div class="ml-2 truncate md:opacity-100" :class="getTitleClass" v-show="showTitle">
{{ title }}
</div>
</div>
......@@ -64,7 +64,7 @@
transition: all 0.2s ease;
&.light {
border-bottom: 1px solid @border-color-base;
// border-bottom: 1px solid @border-color-base;
}
&.collapsed-show-title {
......@@ -72,7 +72,7 @@
}
&.light &__title {
color: @white;
color: @white;
}
&.dark &__title {
......
src/components/Drawer/src/useDrawer.ts
浏览文件 @ a9a0ecaa
......@@ -22,7 +22,6 @@ export function useDrawer(): UseDrawerReturnType {
const uid = ref<string>('');
function register(drawerInstance: DrawerInstance, uuid: string) {
isProdMode() &&
tryOnUnmounted(() => {
drawer.value = null;
......
src/components/Menu/src/components/MenuItemContent.vue
浏览文件 @ a9a0ecaa
<template>
<div style="text-align: center;height: 61px;line-height: 15px;">
<Icon v-if="getIcon" :icon="getIcon" :size="22" style="margin-top: 10px;" :class="`${prefixCls}-wrapper__icon`" />
<div>{{ getI18nName }}</div>
</div>
<span :class="`${prefixCls}- flex items-center `">
<Icon v-if="getIcon" :icon="getIcon" :size="18" :class="`${prefixCls}-wrapper__icon mr-2`" />
{{ getI18nName }}
</span>
</template>
<script lang="ts">
import { computed, defineComponent } from 'vue';
......
src/components/Menu/src/index.less
浏览文件 @ a9a0ecaa
......@@ -59,7 +59,6 @@
}
}
}
}
}
......
src/components/SimpleMenu/src/components/MenuItem.vue
浏览文件 @ a9a0ecaa
......@@ -66,11 +66,11 @@
});
function handleClickItem() {
const { disabled } = props;
if (disabled) {
return;
}
rootMenuEmitter.emit('on-menu-item-select', props.name);
if (unref(getCollapse)) {
return;
......
src/components/SimpleMenu/src/index.less
浏览文件 @ a9a0ecaa
......@@ -3,17 +3,21 @@
.@{prefix-cls} {
&-dark&-vertical .@{simple-prefix-cls}__parent {
background-color: @sider-dark-bg-color;
background-color: #F7F7F7;
color: #000;
> .@{prefix-cls}-submenu-title {
background-color: @sider-dark-bg-color;
background-color: #F7F7F7;
color: #000;
}
}
&-dark&-vertical .@{simple-prefix-cls}__children,
&-dark&-popup .@{simple-prefix-cls}__children {
background-color: @sider-dark-lighten-bg-color;
background-color: #F7F7F7;
color: #000;
> .@{prefix-cls}-submenu-title {
background-color: @sider-dark-lighten-bg-color;
background-color: #F7F7F7;
color: #000;
}
}
......
src/layouts/default/content/index.vue
浏览文件 @ a9a0ecaa
<template>
<div :class="[prefixCls, getLayoutContentMode]" v-loading="getOpenPageLoading && getPageLoading">
<MultipleTabs v-if="getShowTabs" />
<PageLayout />
<!-- update-begin-author:zyf date:20211129 for:qiankun 挂载子应用盒子 -->
<div id="content" class="app-view-box" v-if="openQianKun == 'true'"></div>
<!-- update-end-author:zyf date:20211129 for: qiankun 挂载子应用盒子-->
</div>
</template>
<script lang="ts">
import { defineComponent, onMounted,computed,unref ,CSSProperties} from 'vue';
import { defineComponent, onMounted } from 'vue';
import PageLayout from '/@/layouts/page/index.vue';
import { useDesign } from '/@/hooks/web/useDesign';
import { useRootSetting } from '/@/hooks/setting/useRootSetting';
import { useTransitionSetting } from '/@/hooks/setting/useTransitionSetting';
import { useContentViewHeight } from './useContentViewHeight';
// import registerApps from '/@/qiankun';
import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
import { useHeaderSetting } from '/@/hooks/setting/useHeaderSetting';
import { useFullContent } from '/@/hooks/web/useFullContent';
import { useMultipleTabSetting } from '/@/hooks/setting/useMultipleTabSetting';
import { useGlobSetting } from '/@/hooks/setting';
import MultipleTabs from '../tabs/index.vue';
import { TabsThemeEnum } from '/@/enums/appEnum';
import { useLayoutHeight } from './useContentViewHeight';
import { useContentViewHeight } from './useContentViewHeight';
// import registerApps from '/@/qiankun';
import { useGlobSetting } from '/@/hooks/setting';
export default defineComponent({
name: 'LayoutContent',
components: { PageLayout ,MultipleTabs},
components: { PageLayout },
setup() {
const { prefixCls } = useDesign('layout-content');
const { getOpenPageLoading } = useTransitionSetting();
const { getLayoutContentMode, getPageLoading } = useRootSetting();
const globSetting = useGlobSetting();
const openQianKun = globSetting.openQianKun;
useContentViewHeight();
// tab start
const HEADER_HEIGHT = 48;
const TABS_HEIGHT = 32;
const TABS_HEIGHT_CARD = 50;
const TABS_HEIGHT_SMOOTH = 50;
const { setHeaderHeight } = useLayoutHeight();
const { prefixCls } = useDesign('layout-multiple-header');
const { getSplit } = useMenuSetting();
const { getFixed, getShowFullHeaderRef, getHeaderTheme, getShowHeader } = useHeaderSetting();
const { getFullContent } = useFullContent();
const { getShowMultipleTab, getTabsTheme } = useMultipleTabSetting();
const getShowTabs = computed(() => {
return unref(getShowMultipleTab) && !unref(getFullContent);
});
const getIsFixed = computed(() => {
return unref(getFixed) || unref(getShowFullHeaderRef);
});
// updateBy:sunjianlei---updateDate:2021-09-08---根据主题的不同，动态计算tabs高度
const getTabsThemeHeight = computed(() => {
let tabsTheme = unref(getTabsTheme);
if (tabsTheme === TabsThemeEnum.CARD) {
return TABS_HEIGHT_CARD;
} else if (tabsTheme === TabsThemeEnum.SMOOTH) {
return TABS_HEIGHT_SMOOTH;
} else {
return TABS_HEIGHT;
}
});
const getPlaceholderDomStyle = computed((): CSSProperties => {
let height = 0;
if ((unref(getShowFullHeaderRef) || !unref(getSplit)) && unref(getShowHeader) && !unref(getFullContent)) {
height += HEADER_HEIGHT;
}
if (unref(getShowMultipleTab) && !unref(getFullContent)) {
height += unref(getTabsThemeHeight);
}
setHeaderHeight(height);
return {
height: `${height}px`,
};
});
const getClass = computed(() => {
return [prefixCls, `${prefixCls}--${unref(getHeaderTheme)}`, { [`${prefixCls}--fixed`]: unref(getIsFixed) }];
});
// tab end
onMounted(() => {
// //注册openQianKun
// if (openQianKun == 'true') {
......@@ -108,9 +40,6 @@ import { useLayoutHeight } from './useContentViewHeight';
getOpenPageLoading,
getLayoutContentMode,
getPageLoading,
getClass,
getShowTabs,
getPlaceholderDomStyle,
};
},
});
......
src/layouts/default/header/MultipleHeader.vue
浏览文件 @ a9a0ecaa
<template>
<!-- <div :style="getPlaceholderDomStyle" style="background-color: #438EB9;" v-if="getIsShowPlaceholderDom"></div> -->
<div :style="getWrapStyle" :class="getClass" style="height: 61px;background-color: #438EB9;">
<LayoutHeader v-if="getShowInsetHeaderRef" />
<!-- <MultipleTabs v-if="getShowTabs" /> -->
<!-- <div :style="getPlaceholderDomStyle" v-if="getIsShowPlaceholderDom"></div> -->
<div :style="getWrapStyle" :class="getClass">
<!-- <LayoutHeader v-if="getShowInsetHeaderRef" /> -->
<MultipleTabs v-if="getShowTabs" />
</div>
</template>
<script lang="ts">
......@@ -53,7 +53,8 @@
const getWrapStyle = computed((): CSSProperties => {
const style: CSSProperties = {};
if (unref(getFixed)) {
style.width = unref(getIsMobile) ? '100%' : unref(getCalcContentWidth);
// style.width = unref(getIsMobile) ? '100%' : unref(getCalcContentWidth);
style.width = "100%"
}
if (unref(getShowFullHeaderRef)) {
style.top = `${HEADER_HEIGHT}px`;
......@@ -87,7 +88,7 @@
}
setHeaderHeight(height);
return {
height: `${height-30}px`,
height: `${height}px`,
};
});
......
src/layouts/default/header/index.less
浏览文件 @ a9a0ecaa
......@@ -5,10 +5,10 @@
.@{header-prefix-cls} {
display: flex;
height: @header-height;
height: 61px;
padding: 0;
margin-left: -1px;
line-height: @header-height;
line-height: 61px;
color: @white;
background-color: @white;
align-items: center;
......@@ -142,7 +142,7 @@
color: @text-color-base;
&:hover {
background-color: @header-light-bg-hover-color;
// background-color: @header-light-bg-hover-color;
}
}
......
src/layouts/default/index.vue
浏览文件 @ a9a0ecaa
<template>
<Layout :class="prefixCls" v-bind="lockEvents">
<LayoutFeatures />
<LayoutHeader fixed v-if="getShowFullHeaderRef" />
<!-- <LayoutFeatures /> -->
<LayoutHeader />
<Layout :class="[layoutClass]">
<LayoutSideBar v-if="getShowSidebar || getIsMobile" />
<!-- 左边 -->
<LayoutSideBar v-if="menus?.menus?.title!='首页'&&menus?.menus?.title!='待办事项'" />
<!-- 左边结束 -->
<Layout :class="`${prefixCls}-main`">
<LayoutMultipleHeader />
<LayoutMultipleHeader v-if="menus?.menus?.title!='首页'&&menus?.menus?.title!='待办事项'" />
<LayoutContent />
<LayoutFooter />
</Layout>
......@@ -17,7 +19,7 @@
import { defineComponent, computed, unref, ref } from 'vue';
import { Layout } from 'ant-design-vue';
import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
import menusStore from '/@/store/menu'
import LayoutHeader from './header/index.vue';
import LayoutContent from './content/index.vue';
import LayoutSideBar from './sider/index.vue';
......@@ -46,7 +48,8 @@
const { getIsMobile } = useAppInject();
const { getShowFullHeaderRef } = useHeaderSetting();
const { getShowSidebar, getIsMixSidebar, getShowMenu } = useMenuSetting();
const menus = menusStore()
console.log(menus.menus,55)
// Create a lock screen monitor
const lockEvents = useLockPage();
......@@ -66,6 +69,7 @@
getIsMixSidebar,
layoutClass,
lockEvents,
menus,
};
},
});
......
src/layouts/default/menu/index.vue
浏览文件 @ a9a0ecaa
......@@ -4,22 +4,21 @@
import { computed, defineComponent, unref, toRef } from 'vue';
import { BasicMenu } from '/@/components/Menu';
import { SimpleMenu } from '/@/components/SimpleMenu';
import { AppLogo } from '/@/components/Application';
import { MenuModeEnum, MenuSplitTyeEnum } from '/@/enums/menuEnum';
import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
import { ScrollContainer } from '/@/components/Container';
import { useSimpleRootMenuContext } from '/@/components/SimpleMenu/src/components/useSimpleMenuContext';
import { useGo } from '/@/hooks/web/usePage';
import { useSplitMenu } from './useLayoutMenu';
import { openWindow } from '/@/utils';
import { propTypes } from '/@/utils/propTypes';
import { isUrl } from '/@/utils/is';
import { useRootSetting } from '/@/hooks/setting/useRootSetting';
import { useAppInject } from '/@/hooks/web/useAppInject';
import { useDesign } from '/@/hooks/web/useDesign';
import { useLocaleStore } from '/@/store/modules/locale';
import { useLocaleStore } from '/@/store/modules/locale';
import menusStore from '/@/store/menu'
export default defineComponent({
name: 'LayoutMenu',
......@@ -56,8 +55,8 @@
const { prefixCls } = useDesign('layout-menu');
const { menusRef } = useSplitMenu(toRef(props, 'splitType'));
// const { menusRef } = useSplitMenu(toRef(props, 'splitType'));
const chliderMenu= menusStore()
const { getIsMobile } = useAppInject();
const getComputedMenuMode = computed(() => (unref(getIsMobile) ? MenuModeEnum.INLINE : props.menuMode || unref(getMenuMode)));
......@@ -90,7 +89,8 @@
});
const getCommonProps = computed(() => {
const menus = unref(menusRef);
const menus = chliderMenu?.menus?.children ? unref(chliderMenu.menus.children) : [unref(chliderMenu.menus)];
localeStore.setPathTitle(menus[0].path, menus[0].title || '');
return {
menus,
beforeClickFn: beforeMenuClickFn,
......@@ -131,7 +131,7 @@
function renderHeader() {
if (!unref(getIsShowLogo) && !unref(getIsMobile)) return null;
return <AppLogo showTitle={!unref(getCollapsed)} class={unref(getLogoClass)} theme={unref(getComputedMenuTheme)} />;
// return <AppLogo showTitle={!unref(getCollapsed)} class={unref(getLogoClass)} theme={unref(getComputedMenuTheme)} />;
}
function renderMenu() {
......
src/layouts/default/setting/SettingDrawer.tsx
浏览文件 @ a9a0ecaa
......@@ -80,7 +80,6 @@ export default defineComponent({
});
function renderSidebar() {
console.log(menuTypeList,888)
return (
<>
<TypePicker
......@@ -329,7 +328,24 @@ export default defineComponent({
return () => (
<BasicDrawer {...attrs} title={t('layout.setting.drawerTitle')} width={330} class="setting-drawer">
{unref(getShowDarkModeToggle) && <Divider>{() => t('layout.setting.darkMode')}</Divider>}
{unref(getShowDarkModeToggle) && <AppDarkModeToggle class="mx-auto" />}
<Divider>{() => t('layout.setting.navMode')}</Divider>
{renderSidebar()}
<Divider>{() => t('layout.setting.sysTheme')}</Divider>
{renderMainTheme()}
<Divider>{() => t('layout.setting.headerTheme')}</Divider>
{renderHeaderTheme()}
<Divider>{() => t('layout.setting.sidebarTheme')}</Divider>
{renderSiderTheme()}
<Divider>{() => t('layout.setting.interfaceFunction')}</Divider>
{renderFeatures()}
{/*<Divider>{() => t('layout.setting.interfaceDisplay')}</Divider>*/}
{renderContent()}
{/*<Divider>{() => t('layout.setting.animation')}</Divider>*/}
{/*{renderTransition()}*/}
<Divider />
<SettingFooter />
</BasicDrawer>
);
},
......
src/layouts/default/sider/LayoutSider.vue
浏览文件 @ a9a0ecaa
......@@ -126,9 +126,9 @@
&--fixed {
position: fixed;
top: 0;
top: 60px;
left: 0;
height: 100%;
height: calc(100% - 60px);
}
&--mix {
......@@ -137,7 +137,7 @@
}
&.ant-layout-sider-dark {
background-color: @sider-dark-bg-color;
background-color: #F7F7F7;
.ant-layout-sider-trigger {
color: darken(@white, 25%);
......
src/layouts/default/sider/MixSider.vue
浏览文件 @ a9a0ecaa
......@@ -14,6 +14,7 @@
v-bind="getMenuEvents"
>
<AppLogo :showTitle="false" :class="`${prefixCls}-logo`" />
<LayoutTrigger :class="`${prefixCls}-trigger`" />
<ScrollContainer>
......@@ -247,6 +248,7 @@
}
function handleMenuClick(path: string) {
go(path);
}
......@@ -555,5 +557,10 @@
border-bottom: none;
box-shadow: 0 0 4px 0 rgba(28, 36, 56, 0.15);
}
}
.jeecg-menu-dark.jeecg-menu-vertical .jeecg-menu-item-active:not(.jeecg-menu-submenu),.jeecg-menu-dark.jeecg-menu-vertical .jeecg-menu-item:hover{
background-color:#EDEDED!important;
color:#2B7DBC!important;
}
</style>
src/layouts/default/tabs/index.less
浏览文件 @ a9a0ecaa
......@@ -32,7 +32,7 @@ html[data-theme='light'] {
padding-left: 10px;
.ant-tabs-nav {
height: calc(@multiple-height);
height: 100%;
margin: 0;
background-color: @component-background;
border: 0;
......
src/layouts/default/tabs/index.vue
浏览文件 @ a9a0ecaa
......@@ -40,7 +40,7 @@
import { useMultipleTabStore } from '/@/store/modules/multipleTab';
import { useUserStore } from '/@/store/modules/user';
import menusStore from '/@/store/menu'
import { initAffixTabs, useTabsDrag } from './useMultipleTabs';
import { useDesign } from '/@/hooks/web/useDesign';
import { useMultipleTabSetting } from '/@/hooks/setting/useMultipleTabSetting';
......@@ -73,7 +73,13 @@
const { getShowQuick, getShowRedo, getShowFold, getTabsTheme } = useMultipleTabSetting();
const getTabsState = computed(() => {
return tabStore.getTabList.filter((item) => !item.meta?.hideTab);
// const menus = menusStore()
const arry = tabStore.getTabList.filter((item) => !item.meta?.hideTab);
const arry1 = arry.filter((item) => (item.meta?.title != '首页' && item.meta?.title != '待办事项'));
// console.log(arry1,222)
// if (arry1?.length == 0)
// menus.setMenus({ title:'首页'})
return arry1;
});
const unClose = computed(() => unref(getTabsState).length === 1);
......
src/layouts/default/tabs/useTabDropdown.ts
浏览文件 @ a9a0ecaa
......@@ -54,13 +54,13 @@ export function useTabDropdown(tabContentProps: TabContentProps, getIsTabs: Comp
text: t('layout.multipleTab.reload'),
disabled: refreshDisabled,
},
{
icon: 'clarity:close-line',
event: MenuEventEnum.CLOSE_CURRENT,
text: t('layout.multipleTab.close'),
disabled: !!meta?.affix || disabled,
divider: true,
},
// {
// icon: 'clarity:close-line',
// event: MenuEventEnum.CLOSE_CURRENT,
// text: t('layout.multipleTab.close'),
// disabled: !!meta?.affix || disabled,
// divider: true,
// },
{
icon: 'line-md:arrow-close-left',
event: MenuEventEnum.CLOSE_LEFT,
......
src/locales/lang/zh-CN/layout.ts
浏览文件 @ a9a0ecaa
export default {
footer: { onlinePreview: '首页', onlineDocument: '在线文档' },
footer: { onlinePreview: 'JEECG首页', onlineDocument: '在线文档' },
header: {
// user dropdown
dropdownItemDoc: '官网',
......
src/settings/projectSetting.ts
浏览文件 @ a9a0ecaa
......@@ -104,9 +104,9 @@ const setting: ProjectConfig = {
// 菜单宽度
menuWidth: 210,
// 菜单模式
mode: MenuModeEnum.HORIZONTAL,
mode: MenuModeEnum.INLINE,
// 菜单类型
type: MenuTypeEnum.TOP_MENU,
type: MenuTypeEnum.SIDEBAR,
// 菜单主题
theme: ThemeEnum.DARK,
// 分割菜单
......
src/store/menu.ts 0 → 100644
浏览文件 @ a9a0ecaa
import { defineStore } from 'pinia'
interface MenusState {
menus: any,
}
const menusStore = defineStore('menus', {
state: (): MenusState => ({
menus:[],
}),
getters: {
getMenus(): any {
return this.menus
}
},
actions: {
setMenus(text:any) {
this.menus= text
}
}
})
export default menusStore
\ No newline at end of file
src/store/modules/multipleTab.ts
浏览文件 @ a9a0ecaa
......@@ -3,6 +3,8 @@ import type { RouteLocationNormalized, RouteLocationRaw, Router } from 'vue-rout
import { toRaw, unref } from 'vue';
import { defineStore } from 'pinia';
import { store } from '/@/store';
import menusStore from '/@/store/menu'
import { useGo, useRedo } from '/@/hooks/web/usePage';
import { Persistent } from '/@/utils/cache/persistent';
......@@ -292,6 +294,8 @@ export const useMultipleTabStore = defineStore({
this.tabList = this.tabList.filter((item) => item?.meta?.affix ?? false);
this.clearCacheTabs();
this.goToPage(router);
const menus = menusStore()
menus.setMenus({title:'首页'})
},
/**
......
src/store/modules/permission.ts
浏览文件 @ a9a0ecaa
......@@ -8,6 +8,7 @@ import { useAppStoreWithOut } from './app';
import { toRaw } from 'vue';
import { transformObjToRoute, flatMultiLevelRoutes, addSlashToRouteComponent } from '/@/router/helper/routeHelper';
import { transformRouteToMenu } from '/@/router/helper/menuHelper';
import menusStore from '/@/store/menu'
import projectSetting from '/@/settings/projectSetting';
......@@ -219,6 +220,10 @@ export const usePermissionStore = defineStore({
try {
this.changePermissionCode();
routeList = (await getMenuList()) as AppRouteRecordRaw[];
// 进来默认设置首页
const menus = menusStore()
menus.setMenus(routeList[0].meta)
// update-begin----author:sunjianlei---date:20220315------for: 判断是否是 vue3 版本的菜单 ---
let hasIndex: boolean = false;
let hasIcon: boolean = false;
......@@ -237,22 +242,22 @@ export const usePermissionStore = defineStore({
}
}
// 两个条件都不满足，就弹出提示框
// if (!hasIcon && !hasIndex) {
// // 延迟1.5秒之后再出现提示，否则提示框出不来
// setTimeout(
// () =>
// createWarningModal({
// title: '检测提示',
// content:
// '当前菜单表是 <b>Vue2版本</b>，导致菜单加载异常!<br>点击确认，切换到Vue3版菜单！',
// onOk:function () {
// switchVue3Menu();
// location.reload();
// }
// }),
// 100
// );
// }
if (!hasIcon && !hasIndex) {
// 延迟1.5秒之后再出现提示，否则提示框出不来
setTimeout(
() =>
createWarningModal({
title: '检测提示',
content:
'当前菜单表是 <b>Vue2版本</b>，导致菜单加载异常!<br>点击确认，切换到Vue3版菜单！',
onOk:function () {
switchVue3Menu();
location.reload();
}
}),
100
);
}
// update-end----author:sunjianlei---date:20220315------for: 判断是否是 vue3 版本的菜单 ---
} catch (error) {
console.error(error);
......@@ -274,7 +279,7 @@ export const usePermissionStore = defineStore({
routes = [PAGE_NOT_FOUND_ROUTE, ...routeList];
break;
}
console.log(ERROR_LOG_ROUTE,'ERROR_LOG_ROUTE')
routes.push(ERROR_LOG_ROUTE);
patchHomeAffix(routes);
return routes;
......
src/views/system/loginmini/MiniLogin.vue
浏览文件 @ a9a0ecaa
......@@ -73,12 +73,13 @@
</div>
</template>
<script lang="ts" setup name="login-mini">
import { getCodeInfo } from '/@/api/sys/user';
import { onMounted, reactive, ref, toRaw, unref } from 'vue';
import { getCaptcha, getCodeInfo } from '/@/api/sys/user';
import { computed, onMounted, reactive, ref, toRaw, unref } from 'vue';
import codeImg from '/@/assets/images/checkcode.png';
import { useUserStore } from '/@/store/modules/user';
import { useMessage } from '/@/hooks/web/useMessage';
import { useI18n } from '/@/hooks/web/useI18n';
import { SmsEnum } from '/@/views/sys/login/useLogin';
import { useDesign } from "/@/hooks/web/useDesign";
......@@ -107,6 +108,13 @@ const phoneFormData = reactive<any>({
});
const loginRef = ref();
//是否显示获取验证码
const showInterval = ref<boolean>(true);
//60s
const timeRuning = ref<number>(60);
//定时器
const timer = ref<any>(null);
const loginLoading = ref<boolean>(false);
defineProps({
......@@ -213,7 +221,32 @@ async function phoneLogin() {
}
}
/**
* 获取手机验证码
*/
async function getLoginCode() {
if (!phoneFormData.mobile) {
createMessage.warn(t('sys.login.mobilePlaceholder'));
return;
}
const result = await getCaptcha({ mobile: phoneFormData.mobile, smsmode: SmsEnum.FORGET_PASSWORD });
if (result) {
const TIME_COUNT = 60;
if (!unref(timer)) {
timeRuning.value = TIME_COUNT;
showInterval.value = false;
timer.value = setInterval(() => {
if (unref(timeRuning) > 0 && unref(timeRuning) <= TIME_COUNT) {
timeRuning.value = timeRuning.value - 1;
} else {
showInterval.value = true;
clearInterval(unref(timer));
timer.value = null;
}
}, 1000);
}
}
}
......@@ -399,11 +432,10 @@ html[data-theme='dark'] {
background: transparent;
}
}
.aui-formButton {
.ant-btn-primary {
border-color: #3183FF;
background: #3183FF;
}
}
.ant-btn-primary {
border-color: #3183FF;
background: #3183FF;
}
}
</style>
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论