feat:增加tabbar
This commit is contained in:
dzc committed
1 parent
cc39f190d0
commit
108521704f
47 files changed
+201
-79
No files matched your search
@@ -1,13 +1,12 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, watch, reactive, onMounted, computed } from "vue"
|
||||
|
||||
import { router, constant } from "@@/index"
|
||||
import { router, hooks, constant } from "@@/index"
|
||||
import { useTabbarStore } from "@@/stores/tabbar"
|
||||
import { jump } from "@/sheep/router";
|
||||
import { userApi } from "@@/api/index"
|
||||
|
||||
import VerifyDeviceImpModel from "../../verify-device-imp-model.vue"
|
||||
import { getMiniUniqueCode, getDeviceKey } from "@@/utils/mini-tool"
|
||||
|
||||
const tabbarStore = useTabbarStore()
|
||||
|
||||
@@ -22,6 +21,8 @@ export type Props = {
|
||||
bg: string
|
||||
}
|
||||
|
||||
const { scanCodeAction, processUrlScanResult, processBase64ScanResult } = hooks.useScanCode(false)
|
||||
|
||||
const verifyDeviceImpModelRef = ref()
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
tabBarType: "default",
|
||||
@@ -94,6 +95,35 @@ function tabbarChange(index: number) {
|
||||
jump(target.pagePath, {}, 3)
|
||||
}
|
||||
|
||||
function rootTabbarChange(index: number) {
|
||||
// 扫一扫
|
||||
if (index == 1) {
|
||||
appScanCode()
|
||||
return
|
||||
}
|
||||
tabbarStore.setRootActiveIndex(index)
|
||||
const target = tabbarStore.rootTabbarList[index]
|
||||
if (!target) return
|
||||
jump(target.pagePath, {}, 3)
|
||||
}
|
||||
|
||||
const appScanCode = async () => {
|
||||
const scanResult = await scanCodeAction()
|
||||
if (!scanResult) {
|
||||
// uni.showToast({ title: "扫码错误", icon: "none" })
|
||||
return
|
||||
}
|
||||
// 判断扫码结果
|
||||
if (scanResult.startsWith("http")) {
|
||||
// 扫码结果是url链接
|
||||
processUrlScanResult(scanResult.replace("/#", ""))
|
||||
} else {
|
||||
// 扫码结果是base64字符串
|
||||
processBase64ScanResult(scanResult)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// 校验该设备是否被验证
|
||||
async function checkVerifyDevice() {
|
||||
// 从本地存储中获取用户信息
|
||||
@@ -152,12 +182,15 @@ defineExpose({
|
||||
<slot name="main-bottom"></slot>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="tabbarStore.isTabbar" class="layout_foot">
|
||||
<tm-tabbar class="layout_foot" :activeIndex="tabbarStore.activeIndex" :list="tabbarStore.pageTabbarList"
|
||||
:outIndex="-1" fontSize="12px" iconSize="24px" bgColor="#F6F5FA" :zIndex="99999" darkBgColor="#F6F5FA"
|
||||
borderColor="#DBDDDE" color="#8E8E8E" selected-color="#0094ff" position="relative"
|
||||
@change="tabbarChange">
|
||||
</tm-tabbar>
|
||||
<view class="layout_foot">
|
||||
<tm-tabbar v-if="tabbarStore.isTabbar && tabbarStore.rootActiveIndex != 2" class="layout_foot"
|
||||
:activeIndex="tabbarStore.activeIndex" :list="tabbarStore.pageTabbarList" :outIndex="-1" fontSize="12px"
|
||||
iconSize="24px" bgColor="#F6F5FA" :zIndex="99999" darkBgColor="#F6F5FA" borderColor="#DBDDDE"
|
||||
color="#8E8E8E" selected-color="#0094ff" position="fixed" @change="tabbarChange" />
|
||||
<tm-tabbar v-else class="layout_foot" :activeIndex="tabbarStore.rootActiveIndex"
|
||||
:list="tabbarStore.rootPageTabbarList" :outIndex="1" fontSize="12px" iconSize="24px" bgColor="#F6F5FA"
|
||||
:zIndex="99999" darkBgColor="#F6F5FA" borderColor="#DBDDDE" color="#8E8E8E" outBgColor="#0094ff"
|
||||
selected-color="#0094ff" position="fixed" @change="rootTabbarChange" />
|
||||
</view>
|
||||
<VerifyDeviceImpModel ref="verifyDeviceImpModelRef" :close="verifyDeviceImpModelClose" />
|
||||
</view>
|
||||
|
||||
@@ -13,6 +13,8 @@ type TabbarItem = {
|
||||
}
|
||||
|
||||
type StoreState = {
|
||||
rootTabbarList: Array<TabbarItem>
|
||||
rootActiveIndex: number
|
||||
tabbarList: Array<TabbarItem>
|
||||
launchParam: string | null
|
||||
currentRoute: string
|
||||
@@ -126,9 +128,38 @@ const TABBAR_CONSTANT: Array<TabbarItem> = [
|
||||
},
|
||||
]
|
||||
|
||||
const defaultRootTabbarList: Array<TabbarItem> = [
|
||||
{
|
||||
pagePath: "/pages/root/dashboard",
|
||||
text: "首页",
|
||||
iconPath: "/static/tabbar/home.png",
|
||||
selectedIconPath: "/static/tabbar/home-select.png",
|
||||
launchParam: [],
|
||||
auth: [],
|
||||
},
|
||||
{
|
||||
pagePath: "/pages/tabbar/scan",
|
||||
text: "扫一扫",
|
||||
iconPath: "/static/tabbar/scan.png",
|
||||
selectedIconPath: "/static/tabbar/scan.png",
|
||||
launchParam: [],
|
||||
auth: [],
|
||||
},
|
||||
{
|
||||
pagePath: "/pages/tabbar/my",
|
||||
text: "我的",
|
||||
iconPath: "/static/tabbar/my.png",
|
||||
selectedIconPath: "/static/tabbar/my-select.png",
|
||||
launchParam: [],
|
||||
auth: [],
|
||||
},
|
||||
]
|
||||
|
||||
// tabbar
|
||||
export const useTabbarStore = defineStore("tabbarStore", {
|
||||
state: (): StoreState => ({
|
||||
rootTabbarList: defaultRootTabbarList,
|
||||
rootActiveIndex: 0,
|
||||
tabbarList: [],
|
||||
launchParam: null,
|
||||
currentRoute: "/pages/root/dashboard",
|
||||
@@ -149,6 +180,16 @@ export const useTabbarStore = defineStore("tabbarStore", {
|
||||
}
|
||||
})
|
||||
},
|
||||
rootPageTabbarList(state) {
|
||||
return defaultRootTabbarList.map((item, index) => {
|
||||
return {
|
||||
title: item.text,
|
||||
icon: item.iconPath,
|
||||
selectedIcon: item.selectedIconPath,
|
||||
disabled: index == 1 ? true : false,
|
||||
}
|
||||
})
|
||||
},
|
||||
},
|
||||
actions: {
|
||||
async componetTabbarList(launchParam?: string) {
|
||||
@@ -184,5 +225,8 @@ export const useTabbarStore = defineStore("tabbarStore", {
|
||||
}
|
||||
this.currentRoute = route
|
||||
},
|
||||
setRootActiveIndex(index: number) {
|
||||
this.rootActiveIndex = index
|
||||
},
|
||||
},
|
||||
})
|
||||
+18
-10
@@ -1,11 +1,10 @@
|
||||
import Request from "luch-request"
|
||||
import base64 from "base64-utf8"
|
||||
import { isEmpty } from "radash"
|
||||
|
||||
import { router, constant } from "@@/index"
|
||||
import { createCooldown, getBaseApiUrl, getAppInfo, isDevEnv } from "@@/utils/app"
|
||||
|
||||
import { userApi } from "../api"
|
||||
import { APPENV } from "../constant"
|
||||
import * as router from "@@/router"
|
||||
import * as constant from "@@/constant"
|
||||
import { createCooldown, getBaseApiUrl } from "@@/utils/app"
|
||||
|
||||
const TOKEN_KEY = constant.storageConstant.TOKEN
|
||||
const USER_INFO_KEY = constant.storageConstant.USERINFO
|
||||
@@ -20,8 +19,7 @@ const SKIP_REFRESH_TOKEN = ["/sys/auth/refresh-token", "/auth/token/check_token"
|
||||
|
||||
let refreshTokenLock = true
|
||||
const runLoginRedirect = createCooldown(1500)
|
||||
|
||||
console.log("getBaseApiUrl:", getBaseApiUrl())
|
||||
const BASIC_AUTH = "Basic " + base64.encode(import.meta.env.VITE_OAUTH2_APP_CLIENT)
|
||||
|
||||
const https = new Request({
|
||||
baseURL: getBaseApiUrl(),
|
||||
@@ -124,18 +122,28 @@ const isTokenExpires = (tokenStorage: GlobalSetting.TokenStorage): boolean => {
|
||||
async function refreshToken(): Promise<any> {
|
||||
refreshTokenLock = false
|
||||
try {
|
||||
// 调用接口判断token是否过期
|
||||
const tokenStorage = uni.getStorageSync(TOKEN_KEY) as GlobalSetting.TokenStorage
|
||||
const { data } = await userApi.refreshToken(tokenStorage.refreshToken)
|
||||
const res: any = await https.middleware({
|
||||
url: "/auth/oauth2/token",
|
||||
header: {
|
||||
skipToken: "true",
|
||||
Authorization: BASIC_AUTH,
|
||||
"Content-Type": "application/x-www-form-urlencoded",
|
||||
},
|
||||
method: "POST",
|
||||
params: { refresh_token: tokenStorage.refreshToken, grant_type: "refresh_token", scope: "server" },
|
||||
})
|
||||
const { data } = res || {}
|
||||
if (data) {
|
||||
tokenStorage.accessToken = data?.accessToken?.tokenValue
|
||||
tokenStorage.refreshToken = data?.refreshToken?.tokenValue
|
||||
tokenStorage.accessTokenExpiresIn = data?.accessToken?.expiresAt
|
||||
tokenStorage.refreshTokenExpiresIn = data?.refreshToken?.expiresAt
|
||||
uni.setStorageSync(TOKEN_KEY, tokenStorage)
|
||||
return tokenStorage
|
||||
}
|
||||
return null
|
||||
} catch (error) {
|
||||
console.log("APP登录意外的错误error:", error)
|
||||
return false
|
||||
} finally {
|
||||
refreshTokenLock = true
|
||||
|
||||
Reference in new issue
Block a user