index.vue
3.19 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
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
<template>
<view class="my-page">
<view v-for="(item, index) in menu_list" :key="index" class="my-item" @tap="on_menu_tap(item)">
<view class="left">
<image :src="item.icon" style="width: 38rpx; height: 38rpx; margin-right: 16rpx" />
{{ item.name }}
</view>
<view>
<IconFont name="rect-right" size="38rpx" />
</view>
</view>
<indexNav
:icons="nav_icons"
active="me"
position="fixed"
center_variant="raised"
@select="on_nav_select"
/>
</view>
</template>
<script setup>
import { ref } from 'vue'
import Taro from '@tarojs/taro'
import { useGo } from '@/hooks/useGo'
import { showInfo, showConfirm } from '@/utils/toast'
import { IconFont } from '@nutui/icons-vue-taro'
import indexNav from '@/components/indexNav.vue'
import icon_3 from '@/assets/images/首页01@2x.png'
import icon_4 from '@/assets/images/二维码icon.png'
import icon_5 from '@/assets/images/我的02@2x.png'
import { has_offline_booking_cache } from '@/composables/useOfflineBookingCache'
import { is_usable_network, get_network_type } from '@/utils/network'
import icon_booking from '@/assets/images/预约记录@2x.png'
import icon_visitor from '@/assets/images/我的01@2x.png'
import icon_invite from '@/assets/images/二维码@2x2.png'
import {
weak_network_text,
get_weak_network_modal_go_offline_records_options
} from '@/utils/uiText'
const go = useGo()
const on_menu_tap = async item => {
if (!item?.to) {
return
}
if (item.to === '/pages/bookingList/index') {
const network_type = await get_network_type()
const is_weak_network = !is_usable_network(network_type)
if (is_weak_network) {
if (has_offline_booking_cache()) {
const modal_res = await showConfirm(
get_weak_network_modal_go_offline_records_options().content,
get_weak_network_modal_go_offline_records_options().title
)
if (modal_res?.confirm) {
go('/pages/offlineBookingList/index')
}
return
}
showInfo(weak_network_text.toast_title, 2000)
return
}
}
go(item.to)
}
const toCode = () => {
// 跳转到预约码
Taro.redirectTo({
url: '/pages/bookingCode/index'
})
}
const toHome = () => {
// 跳转到首页
Taro.redirectTo({
url: '/pages/index/index'
})
}
const nav_icons = { home: icon_3, code: icon_4, me: icon_5 }
const on_nav_select = key => {
if (key === 'home') {
return toHome()
}
if (key === 'code') {
return toCode()
}
}
const menu_list = [
{
icon: icon_booking,
name: '预约记录',
to: '/pages/bookingList/index'
},
{
icon: icon_visitor,
name: '参观者',
to: '/pages/visitorList/index'
},
{
icon: icon_invite,
name: '邀请码',
to: '/pages/search/index'
}
]
</script>
<style lang="less">
.my-page {
position: relative;
min-height: 100vh;
background-color: #f6f6f6;
padding: 32rpx;
.my-item {
padding: 32rpx;
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 32rpx;
background-color: #fff;
border-radius: 10rpx;
.left {
color: #a67939;
display: flex;
align-items: center;
}
}
}
</style>