index.vue
3.64 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
138
139
140
141
<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>
<view class="index-nav">
<view class="nav-logo" @tap="toHome">
<image :src="icon_3" style="width: 48rpx; height: 48rpx;" />
首页
</view>
<view class="nav-logo" @tap="toCode">
<image :src="icon_4" style="width: 140rpx; height: 140rpx; position: absolute; top: -100rpx;" />
<view style="width: 48rpx; height: 48rpx;"></view>
预约码
</view>
<view class="nav-logo">
<image :src="icon_5" style="width: 48rpx; height: 48rpx;" />
我的
</view>
</view>
</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 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'
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({
title: '网络连接不畅',
content: '当前网络信号较弱，是否进入离线预约记录？',
confirmText: '离线记录',
cancelText: '知道了',
})
if (modal_res?.confirm) {
go('/pages/offlineBookingList/index')
}
return
}
Taro.showToast({ 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 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;
}
}
.index-nav {
position: fixed;
bottom: 0;
left: 0;
width: 750rpx;
height: 134rpx;
background: #FFFFFF;
box-shadow: 0 -10rpx 8rpx 0 rgba(0,0,0,0.12);
display: flex;
align-items: center;
justify-content: space-around;
color: #A67939;
.nav-logo {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
}
}
}
</style>