<template>
|
<wd-tabbar
|
fixed
|
v-model="tabbarStore.curIdx"
|
bordered
|
safeAreaInsetBottom
|
placeholder
|
@change="selectTabBar"
|
active-color="#4D80F0"
|
inactive-color="#7d7e80"
|
>
|
<block v-for="(item, idx) in tabbarList" :key="item.path">
|
<wd-tabbar-item
|
v-if="idx !== 2 && item.iconType === 'wot'"
|
:title="item.text"
|
:icon="item.icon"
|
></wd-tabbar-item>
|
<!--TODO 扫码图标特殊处理-->
|
<wd-tabbar-item
|
v-if="idx === 2 && item.iconType === 'wot'"
|
:title="item.text"
|
:icon="item.icon"
|
>
|
<template #icon>
|
<view class="scan-box">
|
<wd-icon round name="scan" color="white" size="42rpx"></wd-icon>
|
</view>
|
</template>
|
</wd-tabbar-item>
|
<wd-tabbar-item
|
v-else-if="item.iconType === 'unocss' || item.iconType === 'iconfont'"
|
:title="item.text"
|
>
|
<template #icon>
|
<view
|
h-40rpx
|
w-40rpx
|
:class="[item.icon, idx === tabbarStore.curIdx ? 'is-active' : 'is-inactive']"
|
></view>
|
</template>
|
</wd-tabbar-item>
|
<wd-tabbar-item v-else-if="item.iconType === 'local'" :title="item.text">
|
<template #icon>
|
<image :src="item.icon" h-40rpx w-40rpx />
|
</template>
|
</wd-tabbar-item>
|
</block>
|
</wd-tabbar>
|
</template>
|
|
<script setup lang="ts">
|
// unocss icon 默认不生效，需要在这里写一遍才能生效！注释掉也是生效的，但是必须要有！
|
// i-carbon-code
|
import { tabBar } from '@/pages.json'
|
import { tabbarStore } from './tabbar'
|
import qrcode from "@/utils/qrcode";
|
|
/** tabbarList 里面的 path 从 pages.config.ts 得到 */
|
const tabbarList = tabBar.list.map((item) => ({ ...item, path: `/${item.pagePath}` }))
|
|
function selectTabBar({ value: index }: { value: number }) {
|
const url = tabbarList[index].path
|
// scan特殊处理
|
if (index === 2) {
|
tabbarStore.setCurIdx(tabbarStore.lastIdx)
|
|
// 模拟成功
|
// uni.navigateTo({
|
// url: `/pages/scan/index?result=GPA2024NL025`,
|
// })
|
// return false
|
// 模拟成功
|
const systemInfo = uni.getSystemInfoSync()
|
if (systemInfo.uniPlatform === 'app') {
|
// 只允许通过相机扫码
|
uni.scanCode({
|
onlyFromCamera: true,
|
success: function(res) {
|
console.log('条码类型：' + res.scanType)
|
console.log('条码内容：' + res.result)
|
if (res?.scanType !== 'QR_CODE') {
|
uni.showToast({
|
title: '请使用二维码进行扫码',
|
icon: 'none',
|
})
|
return false
|
}
|
|
// 使用split方法截取资产编号
|
// const assetCode = res.result.split('资产编号：')[1].split(' ')[0]
|
uni.navigateTo({
|
url: `/pages/scan/index?result=${res.result}`,
|
})
|
},
|
fail: function (res) {},
|
})
|
} else {
|
uni.chooseImage({
|
count: 1,
|
sizeType: ['original', 'compressed'],
|
sourceType: ['camera'],
|
success: function(response) {
|
qrcode.decode(response.tempFilePaths[0])
|
qrcode.callback = (res) => {
|
console.log('res', res)
|
if (res === 'error decoding QR Code') {
|
uni.showToast({
|
title: '二维码解析失败',
|
duration: 2000,
|
icon: 'none',
|
})
|
} else {
|
uni.navigateTo({
|
url: `/pages/scan/index?result=${res}`,
|
})
|
}
|
}
|
},
|
})
|
}
|
} else {
|
tabbarStore.setCurIdx(index)
|
tabbarStore.setLastIdx(index)
|
uni.switchTab({ url })
|
}
|
}
|
|
onLoad(() => {
|
// 解决原生 tabBar 未隐藏导致有2个 tabBar 的问题
|
// #ifdef APP-PLUS | H5
|
uni.hideTabBar({
|
fail(err) {
|
console.log('hideTabBar fail: ', err)
|
},
|
success(res) {
|
console.log('hideTabBar success: ', res)
|
},
|
})
|
// #endif
|
})
|
</script>
|
|
<style lang="scss" scoped>
|
.main-color {
|
color: $uni-color-primary;
|
}
|
.scan-box {
|
width: 100rpx;
|
height: 100rpx;
|
background-color: $uni-color-primary;
|
border-radius: 50%;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
z-index: 9999;
|
margin-bottom: 30rpx;
|
}
|
</style>
|
