feat(home): 工作台新增 FAB 快捷操作,优化 tabbar 扫码和微信登录
- index.vue:新增 FAB 按钮(选择区域巡检 + 新增工单),合并原工单和巡检列表的入口 - menu-section.vue:新增蓝牙调试快捷入口 - tabbar:扫码巡检改用 parseQrCode 解析,取消扫码不再跳转 - wechat-login-panel:手机号授权拒绝后 emit phone-refused,回退到账号密码登录 Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -43,6 +43,10 @@ const props = defineProps<{
|
|||||||
validateTenant: () => boolean
|
validateTenant: () => boolean
|
||||||
}>()
|
}>()
|
||||||
|
|
||||||
|
const emit = defineEmits<{
|
||||||
|
(e: 'phone-refused'): void
|
||||||
|
}>()
|
||||||
|
|
||||||
const toast = useToast()
|
const toast = useToast()
|
||||||
const loading = ref(false)
|
const loading = ref(false)
|
||||||
const needPhoneAuth = ref(false)
|
const needPhoneAuth = ref(false)
|
||||||
@@ -79,7 +83,8 @@ async function handleWechatLogin() {
|
|||||||
/** 第二步:手机号授权后完成登录 */
|
/** 第二步:手机号授权后完成登录 */
|
||||||
async function handleGetPhoneNumber(e: any) {
|
async function handleGetPhoneNumber(e: any) {
|
||||||
if (e.detail.errMsg !== 'getPhoneNumber:ok') {
|
if (e.detail.errMsg !== 'getPhoneNumber:ok') {
|
||||||
toast.warning('未获取到手机号授权,无法继续登录')
|
toast.warning('为方便工作,建议授权手机号')
|
||||||
|
emit('phone-refused')
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -22,6 +22,7 @@
|
|||||||
:agreed="agreed"
|
:agreed="agreed"
|
||||||
:redirect-url="redirectUrl"
|
:redirect-url="redirectUrl"
|
||||||
:validate-tenant="validateTenant"
|
:validate-tenant="validateTenant"
|
||||||
|
@phone-refused="activeTab = 'username'"
|
||||||
/>
|
/>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
|
|||||||
@@ -97,6 +97,7 @@ const quickApps = [
|
|||||||
{ key: 'inspection', name: '巡检记录', icon: 'i-carbon-list-checked', color: '#8B5CF6', bgLight: '#F5F3FF', url: '/pages/scan/inspection/list' },
|
{ key: 'inspection', name: '巡检记录', icon: 'i-carbon-list-checked', color: '#8B5CF6', bgLight: '#F5F3FF', url: '/pages/scan/inspection/list' },
|
||||||
{ key: 'workOrderStats', name: '工单统计', icon: 'i-carbon-chart-bar', color: '#3B82F6', bgLight: '#EFF6FF', url: '/pages/scan/work-order/stats' },
|
{ key: 'workOrderStats', name: '工单统计', icon: 'i-carbon-chart-bar', color: '#3B82F6', bgLight: '#EFF6FF', url: '/pages/scan/work-order/stats' },
|
||||||
{ key: 'trafficStats', name: '客流统计', icon: 'i-carbon-pedestrian', color: '#10B981', bgLight: '#ECFDF5', url: '/pages/scan/traffic/index' },
|
{ key: 'trafficStats', name: '客流统计', icon: 'i-carbon-pedestrian', color: '#10B981', bgLight: '#ECFDF5', url: '/pages/scan/traffic/index' },
|
||||||
|
{ key: 'bluetoothDebug', name: '蓝牙调试', icon: 'i-carbon-bluetooth', color: '#0EA5E9', bgLight: '#F0F9FF', url: '/pages/scan/bluetooth-debug/index' },
|
||||||
]
|
]
|
||||||
|
|
||||||
function handleQuickApp(app: any) {
|
function handleQuickApp(app: any) {
|
||||||
|
|||||||
@@ -4,10 +4,46 @@
|
|||||||
<UserHeader />
|
<UserHeader />
|
||||||
<!-- 常用应用 + 区域预警 + 菜单分组 -->
|
<!-- 常用应用 + 区域预警 + 菜单分组 -->
|
||||||
<MenuSection />
|
<MenuSection />
|
||||||
|
|
||||||
|
<!-- FAB 遮罩 -->
|
||||||
|
<view v-if="showFabMenu" class="fab-overlay" @click="showFabMenu = false" />
|
||||||
|
|
||||||
|
<!-- FAB 展开菜单 -->
|
||||||
|
<view v-if="showFabMenu" class="fab-menu">
|
||||||
|
<view class="fab-menu-item" @click="handleManualInspection">
|
||||||
|
<view class="fab-menu-icon" style="background: #10B981">
|
||||||
|
<view class="i-carbon-list-checked text-18px text-white" />
|
||||||
|
</view>
|
||||||
|
<text class="fab-menu-label">选择区域巡检</text>
|
||||||
|
</view>
|
||||||
|
<view class="fab-menu-item" @click="handleCreateOrder">
|
||||||
|
<view class="fab-menu-icon" style="background: #F97316">
|
||||||
|
<view class="i-carbon-document-add text-18px text-white" />
|
||||||
|
</view>
|
||||||
|
<text class="fab-menu-label">新增工单</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- FAB 按钮 -->
|
||||||
|
<view
|
||||||
|
class="fab-btn"
|
||||||
|
:class="{ 'fab-btn--active': showFabMenu }"
|
||||||
|
@click="showFabMenu = !showFabMenu"
|
||||||
|
>
|
||||||
|
<view
|
||||||
|
class="text-24px text-white transition-transform"
|
||||||
|
:class="showFabMenu ? 'i-carbon-close rotate-0' : 'i-carbon-add'"
|
||||||
|
/>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 区域级联选择器 -->
|
||||||
|
<AreaPicker ref="areaPickerRef" @select="handleSelectArea" />
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
|
import { ref } from 'vue'
|
||||||
|
import AreaPicker from '@/components/area-picker/index.vue'
|
||||||
import MenuSection from './components/menu-section.vue'
|
import MenuSection from './components/menu-section.vue'
|
||||||
import UserHeader from './components/user-header.vue'
|
import UserHeader from './components/user-header.vue'
|
||||||
|
|
||||||
@@ -21,6 +57,26 @@ definePage({
|
|||||||
navigationStyle: 'custom',
|
navigationStyle: 'custom',
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
|
|
||||||
|
const showFabMenu = ref(false)
|
||||||
|
const areaPickerRef = ref<InstanceType<typeof AreaPicker>>()
|
||||||
|
|
||||||
|
/** 选择区域巡检 */
|
||||||
|
function handleManualInspection() {
|
||||||
|
showFabMenu.value = false
|
||||||
|
areaPickerRef.value?.open()
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 区域选择完成 → 跳转巡检页 */
|
||||||
|
function handleSelectArea({ areaId, areaName }: { areaId: number, areaName: string }) {
|
||||||
|
uni.navigateTo({ url: `/pages/scan/inspection/index?areaId=${areaId}&areaName=${encodeURIComponent(areaName)}` })
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 新增工单 */
|
||||||
|
function handleCreateOrder() {
|
||||||
|
showFabMenu.value = false
|
||||||
|
uni.navigateTo({ url: '/pages/scan/work-order/create' })
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
@@ -39,4 +95,93 @@ page {
|
|||||||
height: 100%;
|
height: 100%;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.fab-overlay {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
background: rgba(0, 0, 0, 0.3);
|
||||||
|
z-index: 98;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fab-menu {
|
||||||
|
position: fixed;
|
||||||
|
right: 40rpx;
|
||||||
|
bottom: 360rpx;
|
||||||
|
z-index: 100;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-end;
|
||||||
|
gap: 24rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fab-menu-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 16rpx;
|
||||||
|
animation: fabSlideUp 0.2s ease-out both;
|
||||||
|
&:nth-child(1) {
|
||||||
|
animation-delay: 0.05s;
|
||||||
|
}
|
||||||
|
&:nth-child(2) {
|
||||||
|
animation-delay: 0s;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.fab-menu-icon {
|
||||||
|
width: 80rpx;
|
||||||
|
height: 80rpx;
|
||||||
|
border-radius: 50%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.15);
|
||||||
|
}
|
||||||
|
|
||||||
|
.fab-menu-label {
|
||||||
|
background: #fff;
|
||||||
|
padding: 12rpx 24rpx;
|
||||||
|
border-radius: 16rpx;
|
||||||
|
font-size: 26rpx;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #1f2937;
|
||||||
|
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes fabSlideUp {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(20rpx);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.fab-btn {
|
||||||
|
position: fixed;
|
||||||
|
right: 40rpx;
|
||||||
|
bottom: 230rpx;
|
||||||
|
width: 112rpx;
|
||||||
|
height: 112rpx;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: linear-gradient(135deg, #fb923c, #f97316);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
box-shadow: 0 8rpx 32rpx rgba(249, 115, 22, 0.4);
|
||||||
|
z-index: 100;
|
||||||
|
transition: transform 0.2s;
|
||||||
|
&:active {
|
||||||
|
transform: scale(0.92);
|
||||||
|
}
|
||||||
|
&--active {
|
||||||
|
background: linear-gradient(135deg, #6b7280, #4b5563);
|
||||||
|
box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.3);
|
||||||
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -2,6 +2,7 @@
|
|||||||
/* eslint-disable brace-style */ // 原因:unibest 官方维护的代码,尽量不要大概,避免难以合并
|
/* eslint-disable brace-style */ // 原因:unibest 官方维护的代码,尽量不要大概,避免难以合并
|
||||||
// i-carbon-code
|
// i-carbon-code
|
||||||
import type { CustomTabBarItem } from './types'
|
import type { CustomTabBarItem } from './types'
|
||||||
|
import { parseQrCode } from '@/utils/qrcode'
|
||||||
import { customTabbarEnable, needHideNativeTabbar, tabbarCacheEnable } from './config'
|
import { customTabbarEnable, needHideNativeTabbar, tabbarCacheEnable } from './config'
|
||||||
import { tabbarList, tabbarStore } from './store'
|
import { tabbarList, tabbarStore } from './store'
|
||||||
|
|
||||||
@@ -25,12 +26,18 @@ function handleClickBulge() {
|
|||||||
uni.navigateTo({ url: fallbackUrl })
|
uni.navigateTo({ url: fallbackUrl })
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
uni.navigateTo({
|
const parsed = parseQrCode(res.result)
|
||||||
url: `/pages/scan/inspection/index?code=${encodeURIComponent(res.result)}`,
|
if (parsed) {
|
||||||
})
|
uni.navigateTo({
|
||||||
|
url: `/pages/scan/inspection/index?areaId=${parsed.areaId}&areaName=${encodeURIComponent(parsed.areaName)}`,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
uni.showToast({ title: '无法识别该二维码', icon: 'none' })
|
||||||
|
}
|
||||||
},
|
},
|
||||||
fail: () => {
|
fail: () => {
|
||||||
uni.navigateTo({ url: fallbackUrl })
|
// 用户取消扫码,不跳转(避免进入 scan/index 又自动触发一次扫码)
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user