index.vue
3.02 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
<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 { 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 Taro.showModal(get_weak_network_modal_go_offline_records_options())
if (modal_res?.confirm) {
go('/pages/offlineBookingList/index')
}
return
}
Taro.showToast({ title: weak_network_text.toast_title, icon: 'none', duration: 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>