NavBar.vue
2.1 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
<template>
<view class="navbar">
<u-navbar :title="props.title" :safeAreaInsetTop="true" :bgColor="isShowBgColor ? '#deeefd' : 'transparent'" :placeholder="true">
<template #left>
<view v-if="props.isShowLeft">
<image src="/static/images/setting.png" class="navbar-icon" mode="aspectFill" @click="proxy.$h.jumpUrl(`/pages/mine/setting`)" />
</view>
<view v-else></view>
</template>
<template #right>
<view v-if="props.isShowRight" class="flexA">
<view class="pobox">
<image src="/static/images/xin.png" class="navbar-icon" mode="aspectFill" @click="proxy.$h.jumpUrl(`/pages2/message/index`)" />
<view class="dot" v-if="props.showDot"></view>
</view>
<image
v-if="props.isShowQrCode"
src="/static/images/mineqr.png"
class="navbar-icon"
mode="aspectFill"
style="margin-right: 0"
@click=";[20, '20'].includes(props.examineState) ? proxy.$h.jumpUrl(`/pages2/mineinfo/qrcode`) : $u.toast('请先完成认证')"
/>
</view>
<view v-else></view>
</template>
</u-navbar>
</view>
</template>
<script setup lang="ts">
import { ref, getCurrentInstance, ComponentPublicInstance } from 'vue'
const { proxy } = getCurrentInstance() as { proxy: ComponentPublicInstance }
interface IProps {
isShowQrCode?: boolean
isShowLeft?: boolean
isShowRight?: boolean
title: string
isShowBgColor: boolean
isplaceholder: boolean
examineState?: string | number
showDot?: boolean
}
const props = withDefaults(defineProps<IProps>(), {
isShowQrCode: false,
isShowLeft: false,
isShowRight: false,
title: '',
isShowBgColor: true,
isplaceholder: true,
showDot: false
})
</script>
<style lang="scss" scoped>
.navbar {
&-icon {
width: 60rpx;
height: 60rpx;
margin-right: 32rpx;
}
}
.pobox {
position: relative;
.dot {
position: absolute;
top: 6rpx;
right: 32rpx;
width: 12rpx;
height: 12rpx;
background-color: red;
border-radius: 50%;
}
}
</style>