|
|
@@ -1,10 +1,32 @@
|
|
1
|
1
|
<script setup lang="ts">
|
|
2
|
|
-import { ref } from 'vue'
|
|
3
|
|
-import { onLoad } from '@dcloudio/uni-app'
|
|
4
|
|
-import { getParkServiceOil, getParkServicePower, getParkServiceShopList } from '@/api/home'
|
|
|
2
|
+import { ref, computed } from 'vue'
|
|
|
3
|
+import { onLoad, onPageScroll, onShow } from '@dcloudio/uni-app'
|
|
|
4
|
+import {
|
|
|
5
|
+ getParkServiceOil,
|
|
|
6
|
+ getParkServicePower,
|
|
|
7
|
+ getParkServiceShopList,
|
|
|
8
|
+ getParkServiceScenicList,
|
|
|
9
|
+ getParkServiceFacility,
|
|
|
10
|
+ getParkServiceNoticeList
|
|
|
11
|
+} from '@/api/home'
|
|
|
12
|
+import { getParkWebAPI } from '@/api/system'
|
|
|
13
|
+import { useListLoader } from '@/composables/useListLoader'
|
|
5
|
14
|
import { useGlobal } from '@/composables/index'
|
|
|
15
|
+import { user } from '@/stores/modules/user'
|
|
|
16
|
+
|
|
|
17
|
+const userStore = user()
|
|
6
|
18
|
const { minioUrl } = useGlobal()
|
|
7
|
19
|
|
|
|
20
|
+const angle = ref(45)
|
|
|
21
|
+// 监听页面滚动
|
|
|
22
|
+onPageScroll((e) => {
|
|
|
23
|
+ if (e.scrollTop > 80) {
|
|
|
24
|
+ angle.value = 90
|
|
|
25
|
+ } else {
|
|
|
26
|
+ angle.value = 45
|
|
|
27
|
+ }
|
|
|
28
|
+})
|
|
|
29
|
+
|
|
8
|
30
|
// 轮播图数据
|
|
9
|
31
|
const list = ref([`${minioUrl}/home_banner.png`])
|
|
10
|
32
|
|
|
|
@@ -33,16 +55,42 @@ const isRescueShow = ref(false)
|
|
33
|
55
|
const isLostFoundShow = ref(false)
|
|
34
|
56
|
|
|
35
|
57
|
onLoad(() => {
|
|
36
|
|
- const parkId = '1998662443205042178'
|
|
37
|
|
- selectedValue.value = parkId
|
|
38
|
|
- // 存储到本地缓存中
|
|
39
|
|
- uni.setStorageSync('parkId', parkId)
|
|
|
58
|
+ // 页面加载时从本地缓存获取园区ID
|
|
|
59
|
+ const cachedParkId = uni.getStorageSync('parkId')
|
|
|
60
|
+ if (cachedParkId) {
|
|
|
61
|
+ selectedValue.value = cachedParkId
|
|
|
62
|
+ params.value.parkId = cachedParkId
|
|
|
63
|
+ }
|
|
|
64
|
+})
|
|
|
65
|
+
|
|
|
66
|
+const init = () => {
|
|
40
|
67
|
// 获取我要加油数据
|
|
41
|
68
|
getOilList()
|
|
42
|
69
|
// 获取我要充电数据
|
|
43
|
70
|
getPowerList()
|
|
44
|
71
|
// 获取精选商家数据
|
|
45
|
72
|
getShopList()
|
|
|
73
|
+ // 获取服务设施数据
|
|
|
74
|
+ getFacilityList()
|
|
|
75
|
+ // 获取出行提醒数据
|
|
|
76
|
+ getNoticeList()
|
|
|
77
|
+}
|
|
|
78
|
+
|
|
|
79
|
+// 处理园区选择变化
|
|
|
80
|
+const handleParkChange = () => {
|
|
|
81
|
+ params.value.parkId = selectedValue.value
|
|
|
82
|
+ oilInfo.value = {}
|
|
|
83
|
+ listOli.value = []
|
|
|
84
|
+ powerInfo.value = {}
|
|
|
85
|
+ // 初始化数据
|
|
|
86
|
+ init()
|
|
|
87
|
+ // 重新加载列表数据
|
|
|
88
|
+ handleSearch()
|
|
|
89
|
+}
|
|
|
90
|
+
|
|
|
91
|
+onShow(() => {
|
|
|
92
|
+ // 初始化数据
|
|
|
93
|
+ init()
|
|
46
|
94
|
})
|
|
47
|
95
|
|
|
48
|
96
|
// 获取我要加油数据
|
|
|
@@ -50,31 +98,35 @@ const oilInfo = ref<any>({})
|
|
50
|
98
|
const listOli = ref<any>([])
|
|
51
|
99
|
const getOilList = async () => {
|
|
52
|
100
|
const res = (await getParkServiceOil(selectedValue.value)) as any
|
|
53
|
|
- oilInfo.value = JSON.parse(res.data.content)
|
|
54
|
|
- const {
|
|
55
|
|
- oil92ActivityPrice,
|
|
56
|
|
- oil92OriginalPrice,
|
|
57
|
|
- oil95ActivityPrice,
|
|
58
|
|
- oil95OriginalPrice,
|
|
59
|
|
- oil89ActivityPrice,
|
|
60
|
|
- oil89OriginalPrice,
|
|
61
|
|
- dieselActivityPrice,
|
|
62
|
|
- dieselOriginalPrice
|
|
63
|
|
- } = oilInfo.value
|
|
64
|
|
- const _list = [
|
|
65
|
|
- { name: '92#', activityPrice: oil92ActivityPrice, originalPrice: oil92OriginalPrice },
|
|
66
|
|
- { name: '95#', activityPrice: oil95ActivityPrice, originalPrice: oil95OriginalPrice },
|
|
67
|
|
- { name: '89#', activityPrice: oil89ActivityPrice, originalPrice: oil89OriginalPrice },
|
|
68
|
|
- { name: '柴油#', activityPrice: dieselActivityPrice, originalPrice: dieselOriginalPrice }
|
|
69
|
|
- ]
|
|
70
|
|
- listOli.value = _list
|
|
|
101
|
+ if (res.data) {
|
|
|
102
|
+ oilInfo.value = JSON.parse(res.data.content)
|
|
|
103
|
+ const {
|
|
|
104
|
+ oil92ActivityPrice,
|
|
|
105
|
+ oil92OriginalPrice,
|
|
|
106
|
+ oil95ActivityPrice,
|
|
|
107
|
+ oil95OriginalPrice,
|
|
|
108
|
+ oil89ActivityPrice,
|
|
|
109
|
+ oil89OriginalPrice,
|
|
|
110
|
+ dieselActivityPrice,
|
|
|
111
|
+ dieselOriginalPrice
|
|
|
112
|
+ } = oilInfo.value
|
|
|
113
|
+ const _list = [
|
|
|
114
|
+ { name: '92#', activityPrice: oil92ActivityPrice, originalPrice: oil92OriginalPrice },
|
|
|
115
|
+ { name: '95#', activityPrice: oil95ActivityPrice, originalPrice: oil95OriginalPrice },
|
|
|
116
|
+ { name: '89#', activityPrice: oil89ActivityPrice, originalPrice: oil89OriginalPrice },
|
|
|
117
|
+ { name: '柴油#', activityPrice: dieselActivityPrice, originalPrice: dieselOriginalPrice }
|
|
|
118
|
+ ]
|
|
|
119
|
+ listOli.value = _list
|
|
|
120
|
+ }
|
|
71
|
121
|
}
|
|
72
|
122
|
|
|
73
|
123
|
// 获取我要充电数据
|
|
74
|
124
|
const powerInfo = ref<any>({})
|
|
75
|
125
|
const getPowerList = async () => {
|
|
76
|
126
|
const res = (await getParkServicePower(selectedValue.value)) as any
|
|
77
|
|
- powerInfo.value = JSON.parse(res.data.content)
|
|
|
127
|
+ if (res.data) {
|
|
|
128
|
+ powerInfo.value = JSON.parse(res.data.content)
|
|
|
129
|
+ }
|
|
78
|
130
|
}
|
|
79
|
131
|
|
|
80
|
132
|
// 获取精选商家数据
|
|
|
@@ -87,6 +139,46 @@ const getShopList = async () => {
|
|
87
|
139
|
}))
|
|
88
|
140
|
}
|
|
89
|
141
|
|
|
|
142
|
+// 获取服务设施数据
|
|
|
143
|
+const facilityList = ref<any>([])
|
|
|
144
|
+const getFacilityList = async () => {
|
|
|
145
|
+ const res = (await getParkServiceFacility({
|
|
|
146
|
+ parkId: selectedValue.value
|
|
|
147
|
+ })) as any
|
|
|
148
|
+ facilityList.value = res.rows
|
|
|
149
|
+ .slice(0, 6)
|
|
|
150
|
+ .reverse()
|
|
|
151
|
+ .map((item: any) => ({
|
|
|
152
|
+ ...item,
|
|
|
153
|
+ content: JSON.parse(item.content)
|
|
|
154
|
+ }))
|
|
|
155
|
+}
|
|
|
156
|
+
|
|
|
157
|
+// 获取附近景区数据
|
|
|
158
|
+const scenicList = computed(() => {
|
|
|
159
|
+ return listData.value.map((item: any) => ({
|
|
|
160
|
+ ...item,
|
|
|
161
|
+ content: JSON.parse(item.content)
|
|
|
162
|
+ }))
|
|
|
163
|
+})
|
|
|
164
|
+
|
|
|
165
|
+// 获取出行提醒数据
|
|
|
166
|
+const noticeList = ref<any>([])
|
|
|
167
|
+const getNoticeList = async () => {
|
|
|
168
|
+ const res = (await getParkServiceNoticeList({
|
|
|
169
|
+ top: 1
|
|
|
170
|
+ })) as any
|
|
|
171
|
+ noticeList.value = res.rows.map((v: any) => v.title)
|
|
|
172
|
+}
|
|
|
173
|
+
|
|
|
174
|
+// 列表加载
|
|
|
175
|
+const { listData, upCallback, downCallback, handleSearch, mescrollInit, params } = useListLoader({
|
|
|
176
|
+ apiFn: getParkServiceScenicList,
|
|
|
177
|
+ initialParams: {
|
|
|
178
|
+ parkId: selectedValue.value
|
|
|
179
|
+ }
|
|
|
180
|
+})
|
|
|
181
|
+
|
|
90
|
182
|
// 金刚区点击事件
|
|
91
|
183
|
const navClick = (item: { path: string; type?: string; text?: string }) => {
|
|
92
|
184
|
if (item.type === 'popup') {
|
|
|
@@ -118,22 +210,17 @@ const navigateToShop = () => {
|
|
118
|
210
|
}
|
|
119
|
211
|
|
|
120
|
212
|
// 景点点击事件
|
|
121
|
|
-const navigateToSpot = () => {
|
|
|
213
|
+const navigateToSpot = (id: string) => {
|
|
122
|
214
|
uni.navigateTo({
|
|
123
|
|
- url: '/base/common/spot'
|
|
|
215
|
+ url: '/base/common/spot?id=' + id
|
|
124
|
216
|
})
|
|
125
|
217
|
}
|
|
126
|
218
|
|
|
127
|
|
-// 导航功能实现
|
|
128
|
|
-const goToNavigation = () => {
|
|
129
|
|
- // 这里需要替换为实际的景点坐标
|
|
130
|
|
- const latitude = 35.86166 // 示例纬度（琅琊台风景区）
|
|
131
|
|
- const longitude = 119.97444 // 示例经度（琅琊台风景区）
|
|
132
|
|
- const name = '琅琊台风景区'
|
|
133
|
|
- // 使用uni-app的地图API打开系统地图进行导航
|
|
|
219
|
+// 导航功能
|
|
|
220
|
+const goToNavigation = (longitude: string, latitude: string, name: string) => {
|
|
134
|
221
|
uni.openLocation({
|
|
135
|
|
- latitude: latitude,
|
|
136
|
|
- longitude: longitude,
|
|
|
222
|
+ latitude: Number(latitude),
|
|
|
223
|
+ longitude: Number(longitude),
|
|
137
|
224
|
name: name,
|
|
138
|
225
|
success: () => {
|
|
139
|
226
|
console.log('导航功能调用成功')
|
|
|
@@ -150,170 +237,223 @@ const callPhone = (phone: string) => {
|
|
150
|
237
|
</script>
|
|
151
|
238
|
|
|
152
|
239
|
<template>
|
|
153
|
|
- <view class="index-container">
|
|
154
|
|
- <!-- 头部背景 -->
|
|
155
|
|
- <view class="header-bg" :style="{ backgroundImage: 'url(' + minioUrl + '/index_bg.png)' }"></view>
|
|
156
|
|
- <!-- header -->
|
|
157
|
|
- <view class="index-header-wrapper">
|
|
158
|
|
- <image :src="minioUrl + '/logo.png'" mode="scaleToFill" class="logo" />
|
|
159
|
|
- <view class="header-right-wrap">
|
|
160
|
|
- <view class="top-title-box">
|
|
161
|
|
- <HySelect v-model="selectedValue" />
|
|
162
|
|
- </view>
|
|
163
|
|
- <image class="star-img" :src="minioUrl + '/star.png'" mode="scaleToFill" />
|
|
164
|
|
- <view class="bottom-box">
|
|
165
|
|
- <!-- 天气 -->
|
|
166
|
|
- <iframe
|
|
167
|
|
- scrolling="no"
|
|
168
|
|
- src="https://widget.tianqiapi.com/?style=tv&skin=cucumber&color=333"
|
|
169
|
|
- frameborder="0"
|
|
170
|
|
- width="130"
|
|
171
|
|
- height="25"
|
|
172
|
|
- allowtransparency="true"
|
|
173
|
|
- ></iframe>
|
|
174
|
|
- <!-- 营业状态 -->
|
|
175
|
|
- <view class="bottom-tag-item">正常营业</view>
|
|
|
240
|
+ <mescroll-body
|
|
|
241
|
+ @init="mescrollInit"
|
|
|
242
|
+ :down="{ use: true, minAngle: angle }"
|
|
|
243
|
+ :bottombar="false"
|
|
|
244
|
+ :up="{ bgColor: '#f6f7fb', textColor: '#999', empty: { use: false } }"
|
|
|
245
|
+ @down="downCallback"
|
|
|
246
|
+ @up="upCallback"
|
|
|
247
|
+ >
|
|
|
248
|
+ <view class="index-container">
|
|
|
249
|
+ <!-- 头部背景 -->
|
|
|
250
|
+ <view class="header-bg" :style="{ backgroundImage: 'url(' + minioUrl + '/index_bg.png)' }"></view>
|
|
|
251
|
+ <!-- header -->
|
|
|
252
|
+ <view class="index-header-wrapper">
|
|
|
253
|
+ <image :src="minioUrl + '/logo.png'" mode="scaleToFill" class="logo" />
|
|
|
254
|
+ <view class="header-right-wrap">
|
|
|
255
|
+ <view class="top-title-box">
|
|
|
256
|
+ <HySelect v-model="selectedValue" @change="handleParkChange" />
|
|
|
257
|
+ </view>
|
|
|
258
|
+ <image class="star-img" :src="minioUrl + '/star.png'" mode="scaleToFill" />
|
|
|
259
|
+ <view class="bottom-box">
|
|
|
260
|
+ <!-- 天气 -->
|
|
|
261
|
+ <iframe
|
|
|
262
|
+ scrolling="no"
|
|
|
263
|
+ src="https://widget.tianqiapi.com/?style=tv&skin=cucumber&color=333"
|
|
|
264
|
+ frameborder="0"
|
|
|
265
|
+ width="130"
|
|
|
266
|
+ height="25"
|
|
|
267
|
+ allowtransparency="true"
|
|
|
268
|
+ ></iframe>
|
|
|
269
|
+ <!-- 营业状态 -->
|
|
|
270
|
+ <view class="bottom-tag-item">正常营业</view>
|
|
|
271
|
+ </view>
|
|
176
|
272
|
</view>
|
|
177
|
273
|
</view>
|
|
178
|
|
- </view>
|
|
179
|
|
- <!-- 轮播图 -->
|
|
180
|
|
- <u-swiper :height="306" :list="list"></u-swiper>
|
|
181
|
|
- <!-- 金刚区 -->
|
|
182
|
|
- <view class="index-nav-wrapper">
|
|
183
|
|
- <view class="nav-item" v-for="(item, index) in navList" :key="index" @click="navClick(item)">
|
|
184
|
|
- <view class="nav-image">
|
|
185
|
|
- <image :src="item.image" mode="scaleToFill" :style="{ width: item.w, height: item.h }" />
|
|
|
274
|
+ <!-- 轮播图 -->
|
|
|
275
|
+ <u-swiper :height="306" :list="list"></u-swiper>
|
|
|
276
|
+ <!-- 金刚区 -->
|
|
|
277
|
+ <view class="index-nav-wrapper">
|
|
|
278
|
+ <view class="nav-item" v-for="(item, index) in navList" :key="index" @click="navClick(item)">
|
|
|
279
|
+ <view class="nav-image">
|
|
|
280
|
+ <image :src="item.image" mode="scaleToFill" :style="{ width: item.w, height: item.h }" />
|
|
|
281
|
+ </view>
|
|
|
282
|
+ <view class="nav-item-text">{{ item.text }}</view>
|
|
186
|
283
|
</view>
|
|
187
|
|
- <view class="nav-item-text">{{ item.text }}</view>
|
|
188
|
284
|
</view>
|
|
189
|
|
- </view>
|
|
190
|
|
- <!-- 出行提示 -->
|
|
191
|
|
- <view class="index-tips-wrapper" @click="navigateToTips">
|
|
192
|
|
- <image class="tips-img" :src="minioUrl + '/icon_chuxing.png'" mode="scaleToFill" />
|
|
193
|
|
- <view class="tips-line"></view>
|
|
194
|
|
- <view class="tips-content">临时交通管制的通知</view>
|
|
195
|
|
- </view>
|
|
196
|
|
- <!-- 加油充电 -->
|
|
197
|
|
- <view class="index-tabs-wrapper">
|
|
198
|
|
- <u-tabs
|
|
199
|
|
- v-model="tabActive"
|
|
200
|
|
- :list="tabs"
|
|
201
|
|
- active-color="#333"
|
|
202
|
|
- :font-size="31"
|
|
203
|
|
- :height="60"
|
|
204
|
|
- :gutter="20"
|
|
205
|
|
- :bar-style="{
|
|
206
|
|
- width: '30rpx',
|
|
207
|
|
- height: '6rpx',
|
|
208
|
|
- backgroundImage: 'linear-gradient(90deg, #0f91f8 0%, #32a9c8 68%, #54c197 100%), linear-gradient(#6c85fc, #6c85fc)',
|
|
209
|
|
- backgroundBlendMode: 'normal, normal',
|
|
210
|
|
- borderRadius: '2rpx'
|
|
211
|
|
- }"
|
|
212
|
|
- ></u-tabs>
|
|
213
|
|
- <template v-if="tabActive === 0">
|
|
214
|
|
- <view class="tab-station-wrap">
|
|
215
|
|
- <HyStation v-for="(item, index) in listOli" :key="index" :item="item"></HyStation>
|
|
216
|
|
- </view>
|
|
217
|
|
- </template>
|
|
218
|
|
- <template v-if="tabActive === 1">
|
|
219
|
|
- <view class="tab-station-wrap column">
|
|
220
|
|
- <HyCharge title="快充" :freeNum="powerInfo?.fastChargeFree" :totalNum="powerInfo?.fastChargeTotal" :status="powerInfo?.fastChargeStatus" />
|
|
221
|
|
- <HyCharge title="慢充" :freeNum="powerInfo?.slowChargeFree" :totalNum="powerInfo?.slowChargeTotal" :status="powerInfo?.slowChargeStatus" />
|
|
222
|
|
- </view>
|
|
223
|
|
- </template>
|
|
224
|
|
- </view>
|
|
225
|
|
- <!-- 服务设施 -->
|
|
226
|
|
- <HyCard title="服务设施" :marginBottom="24">
|
|
227
|
|
- <view class="index-service-wrapper">
|
|
228
|
|
- <HyService v-for="index in 6" :key="index"></HyService>
|
|
|
285
|
+ <!-- 出行提示 -->
|
|
|
286
|
+ <view class="index-tips-wrapper" @click="navigateToTips">
|
|
|
287
|
+ <image class="tips-img" :src="minioUrl + '/icon_chuxing.png'" mode="scaleToFill" />
|
|
|
288
|
+ <view class="tips-line"></view>
|
|
|
289
|
+ <u-notice-bar
|
|
|
290
|
+ mode="vertical"
|
|
|
291
|
+ style="width: 100%"
|
|
|
292
|
+ :list="noticeList"
|
|
|
293
|
+ :volume-icon="false"
|
|
|
294
|
+ type="none"
|
|
|
295
|
+ padding="10rpx"
|
|
|
296
|
+ font-size="25"
|
|
|
297
|
+ color="#333"
|
|
|
298
|
+ ></u-notice-bar>
|
|
229
|
299
|
</view>
|
|
230
|
|
- </HyCard>
|
|
231
|
|
- <!-- 人气优选商家 -->
|
|
232
|
|
- <HyCard title="人气优选商家" rightText="更多商家" isShowRight :marginBottom="24" @clickRight="navigateToShop">
|
|
233
|
|
- <view class="index-shop-wrapper">
|
|
234
|
|
- <view class="shop-item" v-for="(item, index) in shopList" :key="index">
|
|
235
|
|
- <view class="img-wrap">
|
|
236
|
|
- <image :src="item.content.image" mode="scaleToFill" />
|
|
|
300
|
+ <!-- 加油充电 -->
|
|
|
301
|
+ <view class="index-tabs-wrapper">
|
|
|
302
|
+ <u-tabs
|
|
|
303
|
+ v-model="tabActive"
|
|
|
304
|
+ :list="tabs"
|
|
|
305
|
+ active-color="#333"
|
|
|
306
|
+ :font-size="31"
|
|
|
307
|
+ :height="60"
|
|
|
308
|
+ :gutter="20"
|
|
|
309
|
+ :bar-style="{
|
|
|
310
|
+ width: '30rpx',
|
|
|
311
|
+ height: '6rpx',
|
|
|
312
|
+ backgroundImage: 'linear-gradient(90deg, #0f91f8 0%, #32a9c8 68%, #54c197 100%), linear-gradient(#6c85fc, #6c85fc)',
|
|
|
313
|
+ backgroundBlendMode: 'normal, normal',
|
|
|
314
|
+ borderRadius: '2rpx'
|
|
|
315
|
+ }"
|
|
|
316
|
+ ></u-tabs>
|
|
|
317
|
+ <template v-if="tabActive === 0">
|
|
|
318
|
+ <view class="tab-station-wrap" v-if="listOli.length > 0">
|
|
|
319
|
+ <HyStation v-for="(item, index) in listOli" :key="index" :item="item"></HyStation>
|
|
237
|
320
|
</view>
|
|
238
|
|
- <view class="item-text u-line-1">{{ item.title }}</view>
|
|
239
|
|
- </view>
|
|
240
|
|
- </view>
|
|
241
|
|
- </HyCard>
|
|
242
|
|
- <!-- 附近景点 -->
|
|
243
|
|
- <HyCard title="附近景点" isBg :bgImg="minioUrl + '/index_spot_bg.png'">
|
|
244
|
|
- <view class="index-spot-wrapper">
|
|
245
|
|
- <view class="spot-item" v-for="index in 5" :key="index" @click="navigateToSpot">
|
|
246
|
|
- <view class="spot-img-wrap">
|
|
247
|
|
- <image src="" mode="scaleToFill" />
|
|
|
321
|
+ <view class="no-data-wrap" v-else>
|
|
|
322
|
+ <u-empty />
|
|
248
|
323
|
</view>
|
|
249
|
|
- <view class="spot-right-wrap">
|
|
250
|
|
- <view class="right-header">
|
|
251
|
|
- <view class="title">琅琊台风景区</view>
|
|
252
|
|
- <view class="price">50元</view>
|
|
|
324
|
+ </template>
|
|
|
325
|
+ <template v-if="tabActive === 1">
|
|
|
326
|
+ <view class="tab-station-wrap column" v-if="powerInfo?.fastChargeTotal > 0">
|
|
|
327
|
+ <HyCharge
|
|
|
328
|
+ title="快充"
|
|
|
329
|
+ :freeNum="powerInfo?.fastChargeFree"
|
|
|
330
|
+ :totalNum="powerInfo?.fastChargeTotal"
|
|
|
331
|
+ :status="powerInfo?.fastChargeStatus"
|
|
|
332
|
+ />
|
|
|
333
|
+ <HyCharge
|
|
|
334
|
+ title="慢充"
|
|
|
335
|
+ :freeNum="powerInfo?.slowChargeFree"
|
|
|
336
|
+ :totalNum="powerInfo?.slowChargeTotal"
|
|
|
337
|
+ :status="powerInfo?.slowChargeStatus"
|
|
|
338
|
+ />
|
|
|
339
|
+ </view>
|
|
|
340
|
+ <view class="no-data-wrap" v-else>
|
|
|
341
|
+ <u-empty />
|
|
|
342
|
+ </view>
|
|
|
343
|
+ </template>
|
|
|
344
|
+ </view>
|
|
|
345
|
+ <!-- 服务设施 -->
|
|
|
346
|
+ <HyCard title="服务设施" :marginBottom="24">
|
|
|
347
|
+ <view class="index-service-wrapper" v-if="facilityList.length > 0">
|
|
|
348
|
+ <HyService v-for="(item, index) in facilityList" :key="index" :item="item"></HyService>
|
|
|
349
|
+ </view>
|
|
|
350
|
+ <view class="no-data-wrap" v-else>
|
|
|
351
|
+ <u-empty text="暂无服务设施数据" />
|
|
|
352
|
+ </view>
|
|
|
353
|
+ </HyCard>
|
|
|
354
|
+ <!-- 人气优选商家 -->
|
|
|
355
|
+ <HyCard title="人气优选商家" rightText="更多商家" isShowRight :marginBottom="24" @clickRight="navigateToShop">
|
|
|
356
|
+ <view class="index-shop-wrapper" v-if="shopList.length > 0">
|
|
|
357
|
+ <view class="shop-item" v-for="(item, index) in shopList" :key="index">
|
|
|
358
|
+ <view class="img-wrap">
|
|
|
359
|
+ <image :src="item.content.image" mode="scaleToFill" />
|
|
253
|
360
|
</view>
|
|
254
|
|
- <view class="right-tag-box">
|
|
255
|
|
- <view class="s-tag-green">自然风光</view>
|
|
256
|
|
- <view class="s-tag-green">历史遗迹</view>
|
|
257
|
|
- <view class="s-tag-green">休闲度假</view>
|
|
|
361
|
+ <view class="item-text u-line-1">{{ item.title }}</view>
|
|
|
362
|
+ </view>
|
|
|
363
|
+ </view>
|
|
|
364
|
+ <view class="no-data-wrap" v-else>
|
|
|
365
|
+ <u-empty text="暂无商家数据" />
|
|
|
366
|
+ </view>
|
|
|
367
|
+ </HyCard>
|
|
|
368
|
+ <!-- 附近景点 -->
|
|
|
369
|
+ <HyCard title="附近景点" isBg :bgImg="minioUrl + '/index_spot_bg.png'">
|
|
|
370
|
+ <view class="index-spot-wrapper" v-if="scenicList.length > 0">
|
|
|
371
|
+ <view class="spot-item" v-for="(item, index) in scenicList" :key="index" @click="navigateToSpot(item.id)">
|
|
|
372
|
+ <view class="spot-img-wrap">
|
|
|
373
|
+ <image :src="item.content.image" mode="scaleToFill" />
|
|
258
|
374
|
</view>
|
|
259
|
|
- <view class="right-location-box">
|
|
260
|
|
- <view class="left">
|
|
261
|
|
- <image class="icon-address" :src="minioUrl + '/icon_address.png'" mode="scaleToFill" />
|
|
262
|
|
- <view class="address-text-wrap">距您<text>30.5</text>公里，驾车预计<text>40</text>分钟</view>
|
|
|
375
|
+ <view class="spot-right-wrap">
|
|
|
376
|
+ <view class="right-header">
|
|
|
377
|
+ <view class="title">{{ item.title }}</view>
|
|
|
378
|
+ <view class="price">{{ item.content.isFree === 1 ? '免费' : item.content.price + '元' }}</view>
|
|
263
|
379
|
</view>
|
|
264
|
|
- <view class="right-go-icon" @click.stop="goToNavigation">
|
|
265
|
|
- <image :src="minioUrl + '/icon_go.png'" mode="scaleToFill" />
|
|
|
380
|
+ <view class="right-tag-box">
|
|
|
381
|
+ <view class="s-tag-green" v-for="(tag, index) in item.content.tags" :key="index">{{ tag }}</view>
|
|
|
382
|
+ </view>
|
|
|
383
|
+ <view class="right-location-box">
|
|
|
384
|
+ <view class="left">
|
|
|
385
|
+ <image class="icon-address" :src="minioUrl + '/icon_address.png'" mode="scaleToFill" />
|
|
|
386
|
+ <view class="address-text-wrap"
|
|
|
387
|
+ >距您<text>{{ item.content.distance }}</text
|
|
|
388
|
+ >公里，驾车预计<text>{{ item.content.driveTime }}</text
|
|
|
389
|
+ >分钟</view
|
|
|
390
|
+ >
|
|
|
391
|
+ </view>
|
|
|
392
|
+ <view class="right-go-icon" @click.stop="goToNavigation(item.content.longitude, item.content.latitude, item.title)">
|
|
|
393
|
+ <image :src="minioUrl + '/icon_go.png'" mode="scaleToFill" />
|
|
|
394
|
+ </view>
|
|
266
|
395
|
</view>
|
|
267
|
396
|
</view>
|
|
268
|
397
|
</view>
|
|
269
|
398
|
</view>
|
|
270
|
|
- </view>
|
|
271
|
|
- </HyCard>
|
|
272
|
|
- <!-- 一键救援 -->
|
|
273
|
|
- <HyPopup v-model="isRescueShow" width="700rpx" showClose>
|
|
274
|
|
- <view class="popup-content-wrapper">
|
|
275
|
|
- <view class="popup-content-item" @click="callPhone('96659')">
|
|
276
|
|
- <view class="p-item-left">
|
|
277
|
|
- <view class="left-title">车辆救援</view>
|
|
278
|
|
- <view class="left-sub-title">山东高速集团出行服务热线</view>
|
|
|
399
|
+ <view class="no-data-wrap" v-else>
|
|
|
400
|
+ <u-empty text="暂无景点数据" />
|
|
|
401
|
+ </view>
|
|
|
402
|
+ </HyCard>
|
|
|
403
|
+ <!-- 一键救援 -->
|
|
|
404
|
+ <HyPopup v-model="isRescueShow" width="700rpx" showClose>
|
|
|
405
|
+ <view class="popup-content-wrapper">
|
|
|
406
|
+ <view class="popup-content-item" @click="callPhone('96659')">
|
|
|
407
|
+ <view class="p-item-left">
|
|
|
408
|
+ <view class="left-title">车辆救援</view>
|
|
|
409
|
+ <view class="left-sub-title">山东高速集团出行服务热线</view>
|
|
|
410
|
+ </view>
|
|
|
411
|
+ <view class="p-item-right">
|
|
|
412
|
+ <view class="mobile">96659</view>
|
|
|
413
|
+ <view class="icon-box">
|
|
|
414
|
+ <u-icon name="phone-fill" color="#fff" size="24"></u-icon>
|
|
|
415
|
+ </view>
|
|
|
416
|
+ </view>
|
|
279
|
417
|
</view>
|
|
280
|
|
- <view class="p-item-right">
|
|
281
|
|
- <view class="mobile">96659</view>
|
|
282
|
|
- <view class="icon-box">
|
|
283
|
|
- <u-icon name="phone-fill" color="#fff" size="24"></u-icon>
|
|
|
418
|
+ <view class="popup-content-item" @click="callPhone('12122')">
|
|
|
419
|
+ <view class="p-item-left">
|
|
|
420
|
+ <view class="left-title">事故报警</view>
|
|
|
421
|
+ <view class="left-sub-title">山东高速交警报警热线</view>
|
|
|
422
|
+ </view>
|
|
|
423
|
+ <view class="p-item-right">
|
|
|
424
|
+ <view class="mobile">12122</view>
|
|
|
425
|
+ <view class="icon-box">
|
|
|
426
|
+ <u-icon name="phone-fill" color="#fff" size="24"></u-icon>
|
|
|
427
|
+ </view>
|
|
284
|
428
|
</view>
|
|
285
|
429
|
</view>
|
|
286
|
430
|
</view>
|
|
287
|
|
- <view class="popup-content-item" @click="callPhone('12122')">
|
|
288
|
|
- <view class="p-item-left">
|
|
289
|
|
- <view class="left-title">事故报警</view>
|
|
290
|
|
- <view class="left-sub-title">山东高速交警报警热线</view>
|
|
291
|
|
- </view>
|
|
292
|
|
- <view class="p-item-right">
|
|
293
|
|
- <view class="mobile">12122</view>
|
|
|
431
|
+ </HyPopup>
|
|
|
432
|
+ <!-- 失物招领 -->
|
|
|
433
|
+ <HyPopup v-model="isLostFoundShow" width="700rpx" showClose>
|
|
|
434
|
+ <view class="popup-content-wrapper">
|
|
|
435
|
+ <view class="popup-content-item column" @click="callPhone('0532-8889999')">
|
|
|
436
|
+ <view class="column-title">失物招领</view>
|
|
|
437
|
+ <view class="column-mobile">0532-8889999</view>
|
|
294
|
438
|
<view class="icon-box">
|
|
295
|
439
|
<u-icon name="phone-fill" color="#fff" size="24"></u-icon>
|
|
296
|
440
|
</view>
|
|
297
|
441
|
</view>
|
|
298
|
442
|
</view>
|
|
299
|
|
- </view>
|
|
300
|
|
- </HyPopup>
|
|
301
|
|
- <!-- 失物招领 -->
|
|
302
|
|
- <HyPopup v-model="isLostFoundShow" width="700rpx" showClose>
|
|
303
|
|
- <view class="popup-content-wrapper">
|
|
304
|
|
- <view class="popup-content-item column" @click="callPhone('0532-8889999')">
|
|
305
|
|
- <view class="column-title">失物招领</view>
|
|
306
|
|
- <view class="column-mobile">0532-8889999</view>
|
|
307
|
|
- <view class="icon-box">
|
|
308
|
|
- <u-icon name="phone-fill" color="#fff" size="24"></u-icon>
|
|
309
|
|
- </view>
|
|
310
|
|
- </view>
|
|
311
|
|
- </view>
|
|
312
|
|
- </HyPopup>
|
|
313
|
|
- </view>
|
|
|
443
|
+ </HyPopup>
|
|
|
444
|
+ </view>
|
|
|
445
|
+ </mescroll-body>
|
|
314
|
446
|
</template>
|
|
315
|
447
|
|
|
316
|
448
|
<style lang="scss" scoped>
|
|
|
449
|
+.no-data-wrap {
|
|
|
450
|
+ width: 100%;
|
|
|
451
|
+ height: 400rpx;
|
|
|
452
|
+ display: flex;
|
|
|
453
|
+ align-items: center;
|
|
|
454
|
+ justify-content: center;
|
|
|
455
|
+ box-sizing: border-box;
|
|
|
456
|
+}
|
|
317
|
457
|
.popup-content-wrapper {
|
|
318
|
458
|
height: 330rpx;
|
|
319
|
459
|
background-color: #fff;
|
|
|
@@ -383,6 +523,9 @@ const callPhone = (phone: string) => {
|
|
383
|
523
|
}
|
|
384
|
524
|
}
|
|
385
|
525
|
}
|
|
|
526
|
+:deep(.mescroll-upwarp) {
|
|
|
527
|
+ padding-top: 0;
|
|
|
528
|
+}
|
|
386
|
529
|
.index-container {
|
|
387
|
530
|
width: 100%;
|
|
388
|
531
|
min-height: 100dvh;
|
|
|
@@ -498,7 +641,7 @@ const callPhone = (phone: string) => {
|
|
498
|
641
|
width: 4rpx;
|
|
499
|
642
|
height: 34rpx;
|
|
500
|
643
|
background-color: #3866ae;
|
|
501
|
|
- margin: 0 23rpx 0 13rpx;
|
|
|
644
|
+ margin: -1rpx 0 0 24rpx;
|
|
502
|
645
|
}
|
|
503
|
646
|
.tips-content {
|
|
504
|
647
|
font-size: 25rpx;
|
|
|
@@ -607,6 +750,7 @@ const callPhone = (phone: string) => {
|
|
607
|
750
|
.right-tag-box {
|
|
608
|
751
|
display: flex;
|
|
609
|
752
|
align-items: center;
|
|
|
753
|
+ flex-wrap: wrap;
|
|
610
|
754
|
margin-top: 6rpx;
|
|
611
|
755
|
.s-tag-green {
|
|
612
|
756
|
width: 125rpx;
|
|
|
@@ -618,11 +762,12 @@ const callPhone = (phone: string) => {
|
|
618
|
762
|
justify-content: center;
|
|
619
|
763
|
font-size: 21rpx;
|
|
620
|
764
|
color: #239450;
|
|
621
|
|
- margin-right: 20rpx;
|
|
|
765
|
+ margin-right: 16rpx;
|
|
|
766
|
+ margin-bottom: 10rpx;
|
|
622
|
767
|
}
|
|
623
|
768
|
}
|
|
624
|
769
|
.right-location-box {
|
|
625
|
|
- margin-top: 50rpx;
|
|
|
770
|
+ margin-top: 8rpx;
|
|
626
|
771
|
display: flex;
|
|
627
|
772
|
align-items: center;
|
|
628
|
773
|
justify-content: space-between;
|
