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
<!--
* @Date: 2026-01-08 13:02:27
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2026-01-13 21:25:38
* @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">{{ weak_network_title }}</view>
<view class="desc">{{ weak_network_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 { weak_network_text, get_weak_network_modal_no_cache_options } from '@/utils/uiText'
import icon_invite from '@/assets/images/二维码@2x2.png'
const go = useGo();
const weak_network_title = weak_network_text.title
const weak_network_desc = weak_network_text.offline_page_desc
onMounted(async () => {
if (has_offline_booking_cache()) return
try {
await Taro.showModal(get_weak_network_modal_no_cache_options())
} 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>