|
|
@@ -5,10 +5,16 @@
|
|
|
<view class="nav-left" @click="leftTypeComputed !== 'none' && handleLeft()">
|
|
|
<template v-if="leftTypeComputed === 'back'">
|
|
|
<!-- <uni-icons type="back" size="20" color="#333"></uni-icons> -->
|
|
|
- <text class="home-text">返回</text>
|
|
|
+ <!-- <text class="home-text">返回</text> -->
|
|
|
+ <image src="/static/icons/remixicon/arrow-go-back-line.svg" class="icon" mode="widthFix" />
|
|
|
</template>
|
|
|
<template v-else-if="leftTypeComputed === 'home'">
|
|
|
- <text class="home-text">返回首页</text>
|
|
|
+ <image src="/static/icons/remixicon/home-3-line.svg" class="icon" mode="widthFix" />
|
|
|
+ <!-- <text class="home-text">返回首页</text> -->
|
|
|
+ </template>
|
|
|
+ <template v-else-if="leftTypeComputed === 'scan'">
|
|
|
+ <image src="/static/icons/remixicon/qr-scan-2-line.svg" class="icon" mode="widthFix" />
|
|
|
+ <!-- <text class="home-text">扫一扫</text> -->
|
|
|
</template>
|
|
|
<template v-else>
|
|
|
<!-- 占位，保持左右对称 -->
|
|
|
@@ -25,8 +31,8 @@ import { computed } from 'vue'
|
|
|
|
|
|
interface Props {
|
|
|
title: string
|
|
|
- // leftType: 'back' | 'home' | 'none'，默认 'back'
|
|
|
- leftType?: 'back' | 'home' | 'none'
|
|
|
+ // leftType: 'back' | 'home' | 'none' | 'scan'，默认 'back'
|
|
|
+ leftType?: 'back' | 'home' | 'none' | 'scan'
|
|
|
}
|
|
|
|
|
|
const props = withDefaults(defineProps<Props>(), {
|
|
|
@@ -35,6 +41,11 @@ const props = withDefaults(defineProps<Props>(), {
|
|
|
|
|
|
const leftTypeComputed = computed(() => props.leftType || 'back')
|
|
|
|
|
|
+const emit = defineEmits<{
|
|
|
+ (e: 'scan', payload: any): void
|
|
|
+ (e: 'scanError', err: any): void
|
|
|
+}>()
|
|
|
+
|
|
|
const handleLeft = () => {
|
|
|
const t = leftTypeComputed.value
|
|
|
if (t === 'home') {
|
|
|
@@ -51,6 +62,28 @@ const handleLeft = () => {
|
|
|
}
|
|
|
return
|
|
|
}
|
|
|
+
|
|
|
+ if (t === 'scan') {
|
|
|
+ // 发起扫一扫，并将结果通过事件抛出给使用者（页面）处理
|
|
|
+ try {
|
|
|
+ uni.scanCode({
|
|
|
+ onlyFromCamera: false,
|
|
|
+ success: (res: any) => {
|
|
|
+ console.log('[custom-nav] scan success', res)
|
|
|
+ emit('scan', res)
|
|
|
+ },
|
|
|
+ fail: (err: any) => {
|
|
|
+ console.error('[custom-nav] scan failed', err)
|
|
|
+ emit('scanError', err)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ } catch (err) {
|
|
|
+ console.error('[custom-nav] scan exception', err)
|
|
|
+ emit('scanError', err)
|
|
|
+ }
|
|
|
+ return
|
|
|
+ }
|
|
|
+
|
|
|
if (t === 'back') {
|
|
|
uni.navigateBack()
|
|
|
}
|
|
|
@@ -58,6 +91,12 @@ const handleLeft = () => {
|
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
|
+.icon {
|
|
|
+ width: 40rpx;
|
|
|
+ height: 40rpx;
|
|
|
+ margin-left: -30px;
|
|
|
+ display: inline-block;
|
|
|
+}
|
|
|
.custom-nav {
|
|
|
position: fixed;
|
|
|
top: 0;
|
|
|
@@ -78,7 +117,8 @@ const handleLeft = () => {
|
|
|
margin-top: 2px;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
- height: 44px; /* increased to give more vertical space */
|
|
|
+ height: 44px;
|
|
|
+ /* increased to give more vertical space */
|
|
|
padding: 3px 15px;
|
|
|
}
|
|
|
|
|
|
@@ -97,10 +137,12 @@ const handleLeft = () => {
|
|
|
.nav-title {
|
|
|
flex: 1;
|
|
|
text-align: center;
|
|
|
- font-size: 18px; /* slightly larger */
|
|
|
+ font-size: 18px;
|
|
|
+ /* slightly larger */
|
|
|
font-weight: 600;
|
|
|
color: #333;
|
|
|
- padding-block: 6px; /* nudge title down a bit for more top margin */
|
|
|
+ padding-block: 6px;
|
|
|
+ /* nudge title down a bit for more top margin */
|
|
|
}
|
|
|
|
|
|
.nav-right {
|
mcbaiyun
