index.vue
3.37 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
<!--
* @Date: 2026-01-08 13:02:27
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2026-01-08 13:02:39
* @FilePath: /xyxBooking-weapp/src/pages/weakNetwork/index.vue
* @Description: 弱网络提示页面
-->
<template>
<view class="weak-network-page">
<view class="content">
<view class="icon-wrapper">
<IconFont name="mask-close" size="60" color="#A67939" />
</view>
<view class="title">网络连接不畅</view>
<view class="desc">当前网络信号较弱，已自动为您切换至离线模式</view>
<view class="offline-entry" @tap="toOfflineCode">
<view class="circle-btn">
<image :src="icon_invite" style="width: 60rpx; height: 60rpx; margin-bottom: 16rpx;" />
<text>预约记录</text>
</view>
</view>
<view class="sub-action" @tap="retry">
<text>尝试刷新重试</text>
</view>
</view>
</view>
</template>
<script setup>
import Taro from '@tarojs/taro'
import { IconFont } from '@nutui/icons-vue-taro'
import { useGo } from '@/hooks/useGo'
import { onMounted } from 'vue'
import { has_offline_booking_cache } from '@/composables/useOfflineBookingCache'
import icon_invite from '@/assets/images/二维码@2x2.png'
const go = useGo();
onMounted(async () => {
if (has_offline_booking_cache()) return
try {
await Taro.showModal({
title: '网络连接不畅',
content: '当前网络信号较弱，暂无法使用小程序，请到网络更好的地方重试。',
confirmText: '知道了',
showCancel: false,
})
} catch (e) {
console.error('show weak network modal failed:', e)
}
Taro.reLaunch({ url: '/pages/index/index' })
})
const toOfflineCode = () => {
go('/pages/offlineBookingList/index');
}
const retry = () => {
// 尝试重新加载当前页或者是返回上一页重试
// 这里简单做成返回首页
Taro.reLaunch({ url: '/pages/index/index' });
}
</script>
<style lang="less">
.weak-network-page {
min-height: 100vh;
background-color: #fff;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
.content {
display: flex;
flex-direction: column;
align-items: center;
margin-top: -100rpx;
.icon-wrapper {
margin-bottom: 40rpx;
}
.title {
font-size: 40rpx;
color: #333;
font-weight: bold;
margin-bottom: 20rpx;
}
.desc {
font-size: 28rpx;
color: #999;
margin-bottom: 80rpx;
text-align: center;
padding: 0 60rpx;
}
.offline-entry {
margin-bottom: 60rpx;
.circle-btn {
width: 240rpx;
height: 240rpx;
border-radius: 50%;
background: #FFFFFF;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
box-shadow: 0 10rpx 30rpx rgba(166, 121, 57, 0.4);
text {
color: #A67939;
font-size: 32rpx;
font-weight: bold;
letter-spacing: 2rpx;
}
&:active {
transform: scale(0.95);
}
}
}
.sub-action {
padding: 20rpx;
text {
color: #A67939;
font-size: 28rpx;
text-decoration: underline;
}
}
}
}
</style>