|
|
@@ -18,6 +18,7 @@ definePage({
|
|
|
},
|
|
|
})
|
|
|
const activeFilter = ref<number>(1)
|
|
|
+const loading = ref(true)
|
|
|
const filterOptions = [
|
|
|
{ key: 1, label: '离我最近', widthClass: 'w-152rpx' },
|
|
|
{ key: 2, label: '空闲最多', widthClass: '' },
|
|
|
@@ -29,19 +30,26 @@ const filterOptions = [
|
|
|
*/
|
|
|
const { data: stationList, isLastPage, page, refresh, reload } = usePagination((pageNum, pageSize) =>
|
|
|
Apis.charge.getStationInfoPage({ data: { pageNum, pageSize, sortType: activeFilter.value, longitude: Location.value.longitude || 106.620256, latitude: Location.value.latitude || 26.648327, userId: userInfo.value.id } }), {
|
|
|
- data: resp => resp.data?.list,
|
|
|
+ data: (resp) => {
|
|
|
+ return resp.data?.list
|
|
|
+ },
|
|
|
initialData: [],
|
|
|
initialPage: 1,
|
|
|
initialPageSize: 10,
|
|
|
append: true,
|
|
|
immediate: true,
|
|
|
middleware: createGlobalLoadingMiddleware(),
|
|
|
+}).onSuccess(() => {
|
|
|
+ loading.value = false
|
|
|
})
|
|
|
onMounted(() => {
|
|
|
getUserAccountInfo()
|
|
|
opcity.value = 0
|
|
|
})
|
|
|
-onShow(() => refresh())
|
|
|
+onShow(() => {
|
|
|
+ refresh()
|
|
|
+ getUserAccountInfo()
|
|
|
+})
|
|
|
onPageScroll((e) => {
|
|
|
const calculatedOpacity = e.scrollTop / 100
|
|
|
opcity.value = Math.min(1, Math.max(0.1, calculatedOpacity))
|
|
|
@@ -123,7 +131,7 @@ function handleFilterClick(filterKey: number) {
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
- <view class="flex items-center gap-20rpx bg-#F3FFD1 p-24rpx">
|
|
|
+ <view class="flex items-center gap-20rpx bg-#F3FFD1 p-24rpx" @click="router.push({ name: 'smqjh-order' })">
|
|
|
<view>
|
|
|
<view class="text-28rpx font-bold">
|
|
|
充电订单
|
|
|
@@ -152,88 +160,90 @@ function handleFilterClick(filterKey: number) {
|
|
|
{{ option.label }}
|
|
|
</view>
|
|
|
</view>
|
|
|
- <view>
|
|
|
- <view v-for="item in stationList" :key="item.stationId" class="relative mt-24rpx rounded-16rpx bg-#FFFFFF p-24rpx" @click="router.push({ name: 'charge-site-detail', params: { stationId: String(item.stationId) } })">
|
|
|
- <image
|
|
|
- class="absolute right-0 top-0 h-52rpx w-186rpx"
|
|
|
- :src="`${StaticUrl}/charge-firm-tag.png`"
|
|
|
- />
|
|
|
- <view class="text-32rpx text-#2B303A font-bold">
|
|
|
- {{ item.stationName }}
|
|
|
- </view>
|
|
|
- <view class="mt-20rpx text-24rpx text-#aaa">
|
|
|
- {{ item.tips || '暂无提示' }}
|
|
|
- </view>
|
|
|
- <view class="mt-24rpx flex items-center rounded-16rpx bg-[linear-gradient(90deg,rgba(170,255,235,0.3)_0%,rgba(175,247,252,0.2)_43.57%,rgba(139,232,252,0)_100%)] p-20rpx">
|
|
|
- <view class="flex items-center gap-16rpx">
|
|
|
- <view class="h-40rpx w-40rpx rounded-8rpx bg-[linear-gradient(180deg,#4FEF86_0%,#00AA3A_100%)] text-center text-28rpx text-#FFF font-bold line-height-[40rpx]">
|
|
|
- 快
|
|
|
- </view>
|
|
|
- <view class="flex items-center">
|
|
|
- <text class="text-32rpx font-bold">
|
|
|
- {{ item.fastCharging }}
|
|
|
- </text>
|
|
|
- </view>
|
|
|
+ <view :class="[loading ? 'pt-24rpx' : '']">
|
|
|
+ <wd-skeleton theme="paragraph" animation="gradient" :loading="loading" :row-col="[{ height: '100px', width: '100%' }, { height: '100px', width: '100%' }, { height: '100px', width: '100%' }]">
|
|
|
+ <view v-for="item in stationList" :key="item.stationId" class="relative mt-24rpx rounded-16rpx bg-#FFFFFF p-24rpx" @click="router.push({ name: 'charge-site-detail', params: { stationId: String(item.stationId) } })">
|
|
|
+ <image
|
|
|
+ class="absolute right-0 top-0 h-52rpx w-186rpx"
|
|
|
+ :src="`${StaticUrl}/charge-firm-tag.png`"
|
|
|
+ />
|
|
|
+ <view class="text-32rpx text-#2B303A font-bold">
|
|
|
+ {{ item.stationName }}
|
|
|
</view>
|
|
|
- <view class="ml-40rpx flex items-center gap-16rpx">
|
|
|
- <view class="h-40rpx w-40rpx rounded-8rpx bg-[linear-gradient(180deg,#8EB1FF_0%,#3071FF_100%)] text-center text-28rpx text-#FFF font-bold line-height-[40rpx]">
|
|
|
- 慢
|
|
|
- </view>
|
|
|
- <view class="flex items-center">
|
|
|
- <text class="text-32rpx font-bold">
|
|
|
- {{ item.slowCharging }}
|
|
|
- </text>
|
|
|
- </view>
|
|
|
+ <view class="mt-20rpx text-24rpx text-#aaa">
|
|
|
+ {{ item.tips || '暂无提示' }}
|
|
|
</view>
|
|
|
- <view class="ml-150rpx h-44rpx w-148rpx flex items-center border-2rpx border-#3EB6F8 rounded-34rpx border-solid line-height-[44rpx]">
|
|
|
- <view class="w-44rpx rounded-[34rpx_0rpx_0rpx_34rpx] bg-#3EB6F8 text-center">
|
|
|
- <wd-icon name="location" size="16px" color="#FFF" />
|
|
|
+ <view class="mt-24rpx flex items-center rounded-16rpx bg-[linear-gradient(90deg,rgba(170,255,235,0.3)_0%,rgba(175,247,252,0.2)_43.57%,rgba(139,232,252,0)_100%)] p-20rpx">
|
|
|
+ <view class="flex items-center gap-16rpx">
|
|
|
+ <view class="h-40rpx w-40rpx rounded-8rpx bg-[linear-gradient(180deg,#4FEF86_0%,#00AA3A_100%)] text-center text-28rpx text-#FFF font-bold line-height-[40rpx]">
|
|
|
+ 快
|
|
|
+ </view>
|
|
|
+ <view class="flex items-center">
|
|
|
+ <text class="text-32rpx font-bold">
|
|
|
+ {{ item.fastCharging }}
|
|
|
+ </text>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
- <view class="text-24rpx text-#3EB6F8">
|
|
|
- {{ item.distance }}km
|
|
|
+ <view class="ml-40rpx flex items-center gap-16rpx">
|
|
|
+ <view class="h-40rpx w-40rpx rounded-8rpx bg-[linear-gradient(180deg,#8EB1FF_0%,#3071FF_100%)] text-center text-28rpx text-#FFF font-bold line-height-[40rpx]">
|
|
|
+ 慢
|
|
|
+ </view>
|
|
|
+ <view class="flex items-center">
|
|
|
+ <text class="text-32rpx font-bold">
|
|
|
+ {{ item.slowCharging }}
|
|
|
+ </text>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view v-if="!item.enterprisePrice" class="mt-28rpx flex items-center justify-between">
|
|
|
- <view class="relative flex">
|
|
|
- <view class="absolute left-30rpx z-10 flex items-center -top-26rpx">
|
|
|
- <text class="text-40rpx text-#FF6464 font-bold">
|
|
|
- {{ item.platformPrice }}
|
|
|
- </text>
|
|
|
- <text class="w-100rpx text-24rpx">
|
|
|
- 元/度
|
|
|
- </text>
|
|
|
+ <view class="ml-150rpx h-44rpx w-148rpx flex items-center border-2rpx border-#3EB6F8 rounded-34rpx border-solid line-height-[44rpx]">
|
|
|
+ <view class="w-44rpx rounded-[34rpx_0rpx_0rpx_34rpx] bg-#3EB6F8 text-center">
|
|
|
+ <wd-icon name="location" size="16px" color="#FFF" />
|
|
|
+ </view>
|
|
|
+ <view class="text-24rpx text-#3EB6F8">
|
|
|
+ {{ item.distance }}km
|
|
|
+ </view>
|
|
|
</view>
|
|
|
- <image
|
|
|
- class="absolute h-60rpx w-365rpx -top-30rpx"
|
|
|
- :src="`${StaticUrl}/to-charge-tag.png`"
|
|
|
- />
|
|
|
- </view>
|
|
|
- <view class="text-24rpx text-#2B303A">
|
|
|
- {{ item.peakValue }}:{{ item.peakTime }}
|
|
|
</view>
|
|
|
- </view>
|
|
|
- <view v-else class="mt-20rpx flex items-center justify-between">
|
|
|
- <view class="flex items-center">
|
|
|
- <view class="flex items-center -mt-10rpx">
|
|
|
- <text class="text-40rpx text-#FF6464 font-bold">
|
|
|
- {{ item.platformPrice }}
|
|
|
- </text>
|
|
|
- <text class="w-100rpx text-24rpx">
|
|
|
- 元/度
|
|
|
- </text>
|
|
|
+ <view v-if="!item.enterprisePrice" class="mt-28rpx flex items-center justify-between">
|
|
|
+ <view class="relative flex">
|
|
|
+ <view class="absolute left-30rpx z-10 flex items-center -top-26rpx">
|
|
|
+ <text class="text-40rpx text-#FF6464 font-bold">
|
|
|
+ {{ item.platformPrice }}
|
|
|
+ </text>
|
|
|
+ <text class="w-100rpx text-24rpx">
|
|
|
+ 元/度
|
|
|
+ </text>
|
|
|
+ </view>
|
|
|
+ <image
|
|
|
+ class="absolute h-60rpx w-365rpx -top-30rpx"
|
|
|
+ :src="`${StaticUrl}/to-charge-tag.png`"
|
|
|
+ />
|
|
|
</view>
|
|
|
- <view class="h-52rpx w-212rpx text-center" :style="{ backgroundImage: `url(${StaticUrl}/charge-firm.png)`, backgroundSize: 'cover', backgroundPosition: 'center' }">
|
|
|
- <text class="ml-70rpx text-28rpx text-#FF6464">
|
|
|
- {{ item.enterprisePrice }}
|
|
|
- </text>
|
|
|
+ <view class="text-24rpx text-#2B303A">
|
|
|
+ {{ item.peakValue }}:{{ item.peakTime }}
|
|
|
</view>
|
|
|
</view>
|
|
|
- <view class="text-24rpx text-#2B303A">
|
|
|
- {{ item.peakValue }}:{{ item.peakTime }}
|
|
|
+ <view v-else class="mt-20rpx flex items-center justify-between">
|
|
|
+ <view class="flex items-center">
|
|
|
+ <view class="flex items-center -mt-10rpx">
|
|
|
+ <text class="text-40rpx text-#FF6464 font-bold">
|
|
|
+ {{ item.platformPrice }}
|
|
|
+ </text>
|
|
|
+ <text class="w-100rpx text-24rpx">
|
|
|
+ 元/度
|
|
|
+ </text>
|
|
|
+ </view>
|
|
|
+ <view class="h-52rpx w-212rpx text-center" :style="{ backgroundImage: `url(${StaticUrl}/charge-firm.png)`, backgroundSize: 'cover', backgroundPosition: 'center' }">
|
|
|
+ <text class="ml-70rpx text-28rpx text-#FF6464">
|
|
|
+ {{ item.enterprisePrice }}
|
|
|
+ </text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="text-24rpx text-#2B303A">
|
|
|
+ {{ item.peakValue }}:{{ item.peakTime }}
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</view>
|
|
|
- </view>
|
|
|
+ </wd-skeleton>
|
|
|
</view>
|
|
|
<view class="h-160rpx" />
|
|
|
</view>
|