index.vue
4.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
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
<!--
* @Date: 2024-01-16 10:06:47
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2026-01-13 16:21:40
* @FilePath: /xyxBooking-weapp/src/pages/bookingCode/index.vue
* @Description: 预约码页面
-->
<template>
<view class="booking-code-page">
<view style="padding: 32rpx;">
<qrCode></qrCode>
<view class="warning">
<view style="display: flex; align-items: center; justify-content: center;"><IconFont name="tips" /><text style="margin-left: 10rpx;">温馨提示</text></view>
<view style="margin-top: 16rpx;">一人一码，扫码或识别身份证成功后进入</view>
<view style="height: 256rpx;"></view>
</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">
<image :src="icon_4" style="width: 48rpx; height: 48rpx; margin-bottom: 3rpx;" />
预约码
</view>
<view class="nav-logo" @tap="toMy">
<image :src="icon_5" style="width: 48rpx; height: 48rpx;" />
我的
</view>
</view>
</view>
</template>
<script setup>
import { ref } from 'vue'
import Taro, { useDidShow } from '@tarojs/taro'
import qrCode from '@/components/qrCode';
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/我的01@2x.png'
import { useGo } from '@/hooks/useGo'
import { has_offline_booking_cache } from '@/composables/useOfflineBookingCache'
import { is_usable_network } from '@/utils/network'
const go = useGo();
useDidShow(() => {
Taro.getNetworkType({
success: async (res) => {
const isConnected = is_usable_network(res.networkType);
if (isConnected) return
if (has_offline_booking_cache()) {
Taro.redirectTo({ url: '/pages/offlineBookingList/index' })
return
}
try {
await Taro.showModal({
title: '网络连接不畅',
content: '当前网络信号较弱，暂无法使用小程序，请到网络更好的地方重试。',
confirmText: '知道了',
showCancel: false,
})
} catch (e) {
console.error('show weak network modal failed:', e)
}
Taro.redirectTo({ url: '/pages/index/index' })
},
fail: async () => {
if (has_offline_booking_cache()) {
Taro.redirectTo({ url: '/pages/offlineBookingList/index' })
return
}
try {
await Taro.showModal({
title: '网络连接不畅',
content: '当前网络信号较弱，暂无法使用小程序，请到网络更好的地方重试。',
confirmText: '知道了',
showCancel: false,
})
} catch (e) {
console.error('show weak network modal failed:', e)
}
Taro.redirectTo({ url: '/pages/index/index' })
}
});
})
const toMy = () => { // 跳转到我的
Taro.redirectTo({
url: '/pages/me/index'
})
}
const toHome = () => { // 跳转到首页
Taro.redirectTo({
url: '/pages/index/index'
})
}
</script>
<style lang="less">
.booking-code-page {
position: relative;
min-height: 100vh;
background-color: #F6F6F6;
.warning {
text-align: center;
color: #A67939;
margin-top: 32rpx;
}
.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>