fix: 个人中心隐藏有奖邀请和邀请消费记录，多语言选择改为disable
This commit is contained in:
old burden
parent
55588504a1
commit
33a10f55a5
|
|
@ -24,11 +24,8 @@
|
|||
:title="$t('common.myAccount')">
|
||||
<UserAccount />
|
||||
</a-tab-pane>
|
||||
<a-tab-pane
|
||||
key="money"
|
||||
:title="$t('common.moneyInvite')">
|
||||
<Money />
|
||||
</a-tab-pane>
|
||||
<!-- 隐藏有奖邀请 -->
|
||||
<!-- <a-tab-pane key="money" :title="$t('common.moneyInvite')"><Money /></a-tab-pane> -->
|
||||
<!-- 隐藏快速充值入口 -->
|
||||
<!-- <a-tab-pane
|
||||
key="recharge"
|
||||
|
|
@ -40,11 +37,8 @@
|
|||
:title="$t('common.myProduct')">
|
||||
<ResumeRecord />
|
||||
</a-tab-pane>
|
||||
<a-tab-pane
|
||||
key="invite"
|
||||
:title="$t('common.inviteRecord')">
|
||||
<RewardRecord />
|
||||
</a-tab-pane>
|
||||
<!-- 隐藏邀请消费记录 -->
|
||||
<!-- <a-tab-pane key="invite" :title="$t('common.inviteRecord')"><RewardRecord /></a-tab-pane> -->
|
||||
</a-tabs>
|
||||
</div>
|
||||
</mf-dialog>
|
||||
|
|
@ -64,12 +58,8 @@
|
|||
<script>
|
||||
import Forgot from './Forgot.vue'
|
||||
import Register from './Register.vue'
|
||||
import { mapGetters } from 'vuex'
|
||||
import i18n from '@/lang/i18n'
|
||||
import Money from './Money.vue'
|
||||
import UserAccount from './UserAccount.vue'
|
||||
import ResumeRecord from './ResumeRecord.vue'
|
||||
import RewardRecord from './RewardRecord.vue'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
|
|
@ -91,13 +81,8 @@ export default {
|
|||
components: {
|
||||
Forgot,
|
||||
Register,
|
||||
Money,
|
||||
UserAccount,
|
||||
ResumeRecord,
|
||||
RewardRecord
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['lang'])
|
||||
ResumeRecord
|
||||
},
|
||||
mounted() {
|
||||
if (this.register) {
|
||||
|
|
@ -123,12 +108,6 @@ export default {
|
|||
this.registerVisible = true
|
||||
this.$emit('cancel')
|
||||
},
|
||||
changeLang(value) {
|
||||
if (value != this.lang) {
|
||||
this.$store.dispatch('main/setLanguage', value)
|
||||
i18n.global.locale = value
|
||||
}
|
||||
},
|
||||
back() {
|
||||
this.forgotVisible = false
|
||||
this.$emit('open')
|
||||
|
|
|
|||
|
|
@ -24,6 +24,8 @@
|
|||
<script>
|
||||
import { mapGetters } from 'vuex'
|
||||
import Breadcrumb from './Breadcrumb.vue'
|
||||
const LAYOUT_MOBILE_MAX = 768
|
||||
|
||||
export default {
|
||||
name: 'app-main',
|
||||
props: {
|
||||
|
|
@ -33,6 +35,21 @@ export default {
|
|||
}
|
||||
},
|
||||
components: { Breadcrumb },
|
||||
data() {
|
||||
return {
|
||||
layoutWidth:
|
||||
typeof window !== 'undefined' ? window.innerWidth : LAYOUT_MOBILE_MAX + 1
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this._layoutOnResize = () => {
|
||||
this.layoutWidth = window.innerWidth
|
||||
}
|
||||
window.addEventListener('resize', this._layoutOnResize)
|
||||
},
|
||||
beforeUnmount() {
|
||||
window.removeEventListener('resize', this._layoutOnResize)
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['cachedViews', 'sidebar']),
|
||||
// 相同路由，不同参数缓存问题
|
||||
|
|
@ -43,7 +60,10 @@ export default {
|
|||
return !this.sidebar.opened
|
||||
},
|
||||
style() {
|
||||
let sidebarWidth = this.isCollapsed ? '50px' : this.sidebar.width
|
||||
if (this.layoutWidth <= LAYOUT_MOBILE_MAX) {
|
||||
return { width: '100%' }
|
||||
}
|
||||
const sidebarWidth = this.isCollapsed ? '56px' : this.sidebar.width
|
||||
return {
|
||||
width: `calc(100% - ${sidebarWidth})`
|
||||
}
|
||||
|
|
@ -70,7 +90,7 @@ export default {
|
|||
}
|
||||
}
|
||||
|
||||
@media (max-width: 576px) {
|
||||
@media (max-width: 768px) {
|
||||
.app-main {
|
||||
&-wrap {
|
||||
width: 100% !important;
|
||||
|
|
|
|||
|
|
@ -1,11 +1,23 @@
|
|||
<template>
|
||||
<div class="navbar">
|
||||
<div class="left-menu">
|
||||
<mf-icon
|
||||
:class="['left-collapse', { isCollapse: isCollapse }]"
|
||||
cursor="pointer"
|
||||
@click="$store.dispatch('main/toggleSideBar')"
|
||||
value="icon-shrink" />
|
||||
<button
|
||||
type="button"
|
||||
class="sidebar-trigger"
|
||||
:aria-expanded="sidebar.opened"
|
||||
aria-label="展开或收起侧栏"
|
||||
@click="$store.dispatch('main/toggleSideBar')">
|
||||
<mf-icon
|
||||
class="sidebar-trigger__icon sidebar-trigger__icon--desktop"
|
||||
:class="{ isCollapse: isCollapse }"
|
||||
cursor="pointer"
|
||||
value="icon-shrink" />
|
||||
<span class="sidebar-trigger__icon sidebar-trigger__icon--mobile" aria-hidden="true">
|
||||
<span class="hamburger-line" />
|
||||
<span class="hamburger-line" />
|
||||
<span class="hamburger-line" />
|
||||
</span>
|
||||
</button>
|
||||
<div class="logo">
|
||||
<div
|
||||
class="logo-wrap"
|
||||
|
|
@ -31,20 +43,9 @@
|
|||
</mf-button>
|
||||
</div>
|
||||
<div class="right-menu-item language">
|
||||
<a-dropdown @select="handleSelect">
|
||||
<mf-button type="text">
|
||||
{{ localeName }}
|
||||
<icon-down />
|
||||
</mf-button>
|
||||
<template #content>
|
||||
<a-doption
|
||||
v-for="(name, code) in localeNames"
|
||||
:key="code"
|
||||
:value="code">
|
||||
{{ name }}
|
||||
</a-doption>
|
||||
</template>
|
||||
</a-dropdown>
|
||||
<mf-button type="text" disabled class="language-display">
|
||||
{{ localeName }}
|
||||
</mf-button>
|
||||
</div>
|
||||
<div
|
||||
class="right-menu-item user"
|
||||
|
|
@ -97,7 +98,7 @@ import { mapGetters, mapState } from 'vuex'
|
|||
import cloneDeep from 'lodash-es/cloneDeep'
|
||||
import { constantRoutes } from '@/router/index.js'
|
||||
import Login from './Login.vue'
|
||||
import i18n, { LOCALE_NAMES } from '@/lang/i18n'
|
||||
import { LOCALE_NAMES } from '@/lang/i18n'
|
||||
import User from './User.vue'
|
||||
|
||||
export default {
|
||||
|
|
@ -126,9 +127,6 @@ export default {
|
|||
demoEnv() {
|
||||
return import.meta.env.MODE === 'demo'
|
||||
},
|
||||
localeNames() {
|
||||
return LOCALE_NAMES
|
||||
},
|
||||
localeName() {
|
||||
return LOCALE_NAMES[this.lang] || 'English'
|
||||
},
|
||||
|
|
@ -219,12 +217,6 @@ export default {
|
|||
this.openLogin()
|
||||
}
|
||||
},
|
||||
handleSelect(value) {
|
||||
if (value != this.lang) {
|
||||
this.$store.dispatch('main/setLanguage', value)
|
||||
i18n.global.locale = value
|
||||
}
|
||||
},
|
||||
logout() {
|
||||
this.$store.dispatch('user/logout2').then((_) => {
|
||||
this.$router.replace('/')
|
||||
|
|
@ -246,39 +238,71 @@ export default {
|
|||
align-items: center;
|
||||
justify-content: space-between;
|
||||
box-sizing: content-box;
|
||||
padding-left: 30px;
|
||||
padding-left: 20px;
|
||||
padding-right: 30px;
|
||||
|
||||
.left {
|
||||
.left-menu {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
padding-left: 4px;
|
||||
height: 60px;
|
||||
gap: 8px;
|
||||
min-width: 0;
|
||||
|
||||
&-collapse {
|
||||
display: none;
|
||||
transition: 0.25s;
|
||||
.sidebar-trigger {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
padding: 8px;
|
||||
margin: 0;
|
||||
border: none;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
border-radius: 10px;
|
||||
color: rgba(255, 255, 255, 0.92);
|
||||
|
||||
&.isCollapse {
|
||||
transform: rotate(-180deg);
|
||||
&:hover {
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
|
||||
&__icon--desktop {
|
||||
display: flex;
|
||||
transition: transform 0.25s;
|
||||
|
||||
&.isCollapse {
|
||||
transform: rotate(-180deg);
|
||||
}
|
||||
}
|
||||
|
||||
&__icon--mobile {
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
gap: 5px;
|
||||
width: 22px;
|
||||
padding: 2px 0;
|
||||
}
|
||||
}
|
||||
|
||||
&-menu {
|
||||
padding-left: 8px;
|
||||
.hamburger-line {
|
||||
display: block;
|
||||
height: 2px;
|
||||
width: 100%;
|
||||
border-radius: 1px;
|
||||
background: currentColor;
|
||||
}
|
||||
|
||||
.logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 60px;
|
||||
align-items: flex-end;
|
||||
cursor: pointer;
|
||||
color: var(--color-text-1);
|
||||
|
||||
.logo {
|
||||
&-wrap {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
cursor: pointer;
|
||||
color: var(--color-text-1);
|
||||
|
||||
&-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -309,6 +333,12 @@ export default {
|
|||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.language-display[disabled] {
|
||||
color: #999999 !important;
|
||||
opacity: 0.85;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
&.logout {
|
||||
|
|
@ -410,23 +440,23 @@ export default {
|
|||
}
|
||||
}
|
||||
|
||||
@media (max-width: 576px) {
|
||||
@media (max-width: 768px) {
|
||||
.navbar {
|
||||
padding: 0 10px;
|
||||
.left {
|
||||
&-collapse {
|
||||
display: block;
|
||||
font-size: 18px;
|
||||
padding: 0 12px;
|
||||
|
||||
.left-menu {
|
||||
.sidebar-trigger {
|
||||
&__icon--desktop {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
&__icon--mobile {
|
||||
display: flex !important;
|
||||
}
|
||||
}
|
||||
|
||||
&-menu {
|
||||
display: flex;
|
||||
.logo {
|
||||
display: none;
|
||||
}
|
||||
.mf-icon {
|
||||
color: #fff;
|
||||
}
|
||||
.logo {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -124,7 +124,7 @@ export default {
|
|||
1 100%;
|
||||
|
||||
&.collapsed {
|
||||
width: 50px !important;
|
||||
width: 56px !important;
|
||||
overflow: hidden;
|
||||
|
||||
:deep(.arco-menu) {
|
||||
|
|
@ -134,20 +134,27 @@ export default {
|
|||
|
||||
:deep(.arco-menu) {
|
||||
background-color: transparent;
|
||||
padding-left: 16px;
|
||||
padding: 8px 12px 12px;
|
||||
|
||||
&-item {
|
||||
width: 180px;
|
||||
min-height: 48px;
|
||||
line-height: 1.4;
|
||||
font-size: 15px;
|
||||
background-color: transparent;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
border-radius: 10px;
|
||||
margin-bottom: 12px;
|
||||
margin-bottom: 10px;
|
||||
|
||||
&.arco-menu-selected,
|
||||
&:hover {
|
||||
background-color: rgb(var(--primary-6));
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.arco-menu-collapsed) .arco-menu-item {
|
||||
width: calc(100% - 8px);
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.toogle-menu {
|
||||
|
|
@ -172,18 +179,22 @@ export default {
|
|||
}
|
||||
}
|
||||
|
||||
@media (max-width: 576px) {
|
||||
@media (max-width: 768px) {
|
||||
.sidebar-container {
|
||||
position: fixed;
|
||||
left: 0px;
|
||||
top: 60px;
|
||||
z-index: 10;
|
||||
z-index: 100;
|
||||
height: calc(100% - 60px);
|
||||
overflow: hidden;
|
||||
|
||||
box-shadow: 8px 0 32px rgba(0, 0, 0, 0.35);
|
||||
|
||||
&.collapsed {
|
||||
width: 0px !important;
|
||||
min-width: 0 !important;
|
||||
border-right: 0;
|
||||
box-shadow: none;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,10 @@
|
|||
<template>
|
||||
<div class="app-wrapper">
|
||||
<div
|
||||
v-show="showSidebar && mobileDrawerOpen"
|
||||
class="sidebar-backdrop"
|
||||
aria-hidden="true"
|
||||
@click="closeMobileDrawer" />
|
||||
<div class="fixed-header">
|
||||
<nav-bar class="nav-bar" />
|
||||
</div>
|
||||
|
|
@ -18,6 +23,8 @@
|
|||
import { mapGetters } from 'vuex'
|
||||
import { sideBar, appMain, navBar, appFooter } from './components'
|
||||
|
||||
const LAYOUT_MOBILE_MAX = 768
|
||||
|
||||
export default {
|
||||
name: 'layout',
|
||||
components: {
|
||||
|
|
@ -26,16 +33,44 @@ export default {
|
|||
navBar,
|
||||
appFooter
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
layoutWidth:
|
||||
typeof window !== 'undefined' ? window.innerWidth : LAYOUT_MOBILE_MAX + 1
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['sidebar']),
|
||||
isCollapsed() {
|
||||
return !this.sidebar.opened
|
||||
},
|
||||
isMobileLayout() {
|
||||
return this.layoutWidth <= LAYOUT_MOBILE_MAX
|
||||
},
|
||||
mobileDrawerOpen() {
|
||||
return this.isMobileLayout && this.sidebar.opened
|
||||
},
|
||||
// 是否显示菜单
|
||||
showSidebar() {
|
||||
let { menu } = this.$route.query || {}
|
||||
return menu != 0
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this._layoutOnResize = () => {
|
||||
this.layoutWidth = window.innerWidth
|
||||
}
|
||||
window.addEventListener('resize', this._layoutOnResize)
|
||||
},
|
||||
beforeUnmount() {
|
||||
window.removeEventListener('resize', this._layoutOnResize)
|
||||
},
|
||||
methods: {
|
||||
closeMobileDrawer() {
|
||||
if (this.isMobileLayout && this.sidebar.opened) {
|
||||
this.$store.dispatch('main/closeSideBar')
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -49,6 +84,10 @@ export default {
|
|||
overflow: hidden;
|
||||
background: #0f0f12;
|
||||
|
||||
.sidebar-backdrop {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.fixed-header {
|
||||
z-index: 100;
|
||||
.navbar {
|
||||
|
|
@ -59,6 +98,18 @@ export default {
|
|||
.main-wrapper {
|
||||
display: flex;
|
||||
height: calc(100% - 60px);
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.app-wrapper .sidebar-backdrop {
|
||||
display: block;
|
||||
position: fixed;
|
||||
inset: 60px 0 0 0;
|
||||
z-index: 99;
|
||||
background: rgba(0, 0, 0, 0.55);
|
||||
backdrop-filter: blur(2px);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -16,11 +16,13 @@ const state = {
|
|||
sidebar: {
|
||||
opened: isMobile() ? false : true,
|
||||
withoutAnimation: false,
|
||||
width: Cookies.get('sidebarWidth') || '230px'
|
||||
// 左侧导航默认适中宽度（用户若需更窄/宽可本地调小范围会写 cookie）
|
||||
width: Cookies.get('sidebarWidth') || '268px'
|
||||
},
|
||||
topMenu: Cookies.get('topMenu'),
|
||||
// 当前语言
|
||||
language: Cookies.get('language') || 'en_US',
|
||||
// 多语言切换已禁用：全站固定繁体中文（zh_HK）
|
||||
language: 'zh_HK',
|
||||
// 主题 ''：亮色 / dark:暗黑
|
||||
theme: $storage.get('theme') || '',
|
||||
// 系统端
|
||||
|
|
|
|||
|
|
@ -27,9 +27,12 @@ export const isFirefox = (_) => {
|
|||
}
|
||||
}
|
||||
|
||||
export const isMobile = _=> {
|
||||
const userAgent = navigator.userAgent;
|
||||
const isMobile = /iPad|Android|webOS|iPhone|iPod|BlackBerry|IEMobile|Opera Mini/i.test(userAgent);
|
||||
const isSmallScreen = window.innerWidth <= 576;
|
||||
return isMobile || isSmallScreen;
|
||||
export const isMobile = (_) => {
|
||||
const userAgent = navigator.userAgent
|
||||
const uaMobile =
|
||||
/iPad|Android|webOS|iPhone|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
|
||||
userAgent
|
||||
)
|
||||
const isSmallScreen = typeof window !== 'undefined' && window.innerWidth <= 768
|
||||
return uaMobile || isSmallScreen
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue