first commit
This commit is contained in:
PC-202306242200\Administrator
389
pages/home/components/user/home.vue
Normal file
389
pages/home/components/user/home.vue
Normal file
@@ -0,0 +1,389 @@
|
||||
<template>
|
||||
<view>
|
||||
<z-paging ref="paging" v-model="dataList" @query="queryList">
|
||||
<view class="search_header p30">
|
||||
<view style="margin: 30rpx 0 0">
|
||||
<up-swiper :list="list1" height="320rpx" keyName="imageUrl" indicator></up-swiper>
|
||||
</view>
|
||||
</view>
|
||||
<view style="height: 35rpx"></view>
|
||||
<view class="p30" style="width: 100%">
|
||||
<search :top="false" @search="searchChange" />
|
||||
</view>
|
||||
<view style="height: 25rpx"></view>
|
||||
<view style="padding: 0 30rpx">
|
||||
<view class="order_list" style="position: sticky; top: 0; left: 0">
|
||||
<view class="order_list_header">
|
||||
<view class="order_list_header_view" @click="tabChange(1)">
|
||||
<view>距我最近</view>
|
||||
<view v-if="query.orderByType == 1" class="order_list_header_view_dian"></view>
|
||||
</view>
|
||||
<view class="order_list_header_view" @click="tabChange(2)">
|
||||
<view>空闲最多</view>
|
||||
<view v-if="query.orderByType == 2" class="order_list_header_view_dian"></view>
|
||||
</view>
|
||||
</view>
|
||||
<image class="filter-btn" src="/static/icon/icon-filter.png" @click="filterBtn"></image>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view style="margin-bottom: 30rpx; padding: 0 30rpx" v-for="(item, index) in dataList" :key="index">
|
||||
<orderList toNav :info="item"></orderList>
|
||||
</view>
|
||||
</z-paging>
|
||||
<view style="height: 180rpx"></view>
|
||||
<u-popup
|
||||
:show="popupShow"
|
||||
mode="top"
|
||||
:safeAreaInsetBottom="false"
|
||||
@close="popupClose"
|
||||
@open="popupOpen"
|
||||
>
|
||||
<view class="filter-area">
|
||||
<view class="filter-label">充电方式</view>
|
||||
<view class="filter-value">
|
||||
<view
|
||||
class="filter-value-item"
|
||||
v-for="(item, index) in filterData.chargeWay"
|
||||
:key="index"
|
||||
:class="{'filter-value-item-active': item.value === query.chargeWay}"
|
||||
@click="clickChargeWay(item)"
|
||||
>
|
||||
{{ item.label }}
|
||||
</view>
|
||||
</view>
|
||||
<view class="filter-label">停车费</view>
|
||||
<view class="filter-value">
|
||||
<view
|
||||
class="filter-value-item"
|
||||
v-for="(item, index) in filterData.serviceInfo"
|
||||
:key="index"
|
||||
:class="{'filter-value-item-active': item.value === query.serviceInfo}"
|
||||
@click="clickServiceInfo(item)"
|
||||
>
|
||||
{{ item.label }}
|
||||
</view>
|
||||
</view>
|
||||
<view class="filter-label">终端功率（kw）</view>
|
||||
<view class="filter-value">
|
||||
<SlideFilter
|
||||
style="width: 100%;padding: 0 40rpx;"
|
||||
v-model="query.maxPower"
|
||||
:option="[0, 20, 40, 80, 120, 240, 360, 480, 720, 960]"
|
||||
@change="slideFilterChange"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
</u-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive } from 'vue';
|
||||
import { onLoad, onShow, onPullDownRefresh, onPageScroll, onReachBottom } from '@dcloudio/uni-app';
|
||||
import { aroundAreaApi, bannerList } from '@/api/api.js';
|
||||
import SlideFilter from '@/components/slide-filter/index.vue';
|
||||
import { useNav } from '@/hooks/useNav.js';
|
||||
const { nav, navTo } = useNav();
|
||||
|
||||
const dataList = ref([]);
|
||||
const paging = ref(null);
|
||||
const query = reactive({
|
||||
lon: '',
|
||||
lat: '',
|
||||
orderByType: 1, //1-最近;2-空闲较多
|
||||
chargeWay: "",
|
||||
serviceInfo: "",
|
||||
maxPower: "",
|
||||
keyWord: ''
|
||||
});
|
||||
|
||||
const list1 = ref([]);
|
||||
|
||||
onLoad(async () => {
|
||||
let _res = await bannerList();
|
||||
list1.value = _res;
|
||||
});
|
||||
|
||||
onShow(() => {
|
||||
uni.hideTabBar();
|
||||
});
|
||||
|
||||
let toKft = (e) => {
|
||||
uni.makePhoneCall({
|
||||
phoneNumber: '4008005326' //仅为示例
|
||||
});
|
||||
};
|
||||
|
||||
const queryList = async () => {
|
||||
uni.showLoading({
|
||||
title: '加载中...'
|
||||
});
|
||||
try {
|
||||
if (!query.lon && !query.lat) {
|
||||
const { longitude: lon, latitude: lat } = await uni.getLocation();
|
||||
query.lon = lon;
|
||||
query.lat = lat;
|
||||
}
|
||||
} catch (err) {
|
||||
console.log(err);
|
||||
}
|
||||
console.log(query);
|
||||
aroundAreaApi(query)
|
||||
.then((res) => {
|
||||
console.log(res, 'list');
|
||||
paging.value.complete(res);
|
||||
uni.hideLoading();
|
||||
})
|
||||
.catch((res) => {
|
||||
paging.value.complete(false);
|
||||
uni.hideLoading();
|
||||
});
|
||||
};
|
||||
|
||||
let tabChange = (e) => {
|
||||
query.orderByType = e;
|
||||
paging.value.reload();
|
||||
};
|
||||
|
||||
let isPagingRefNotFound = () => {
|
||||
return !paging.value;
|
||||
};
|
||||
|
||||
onPullDownRefresh(() => {
|
||||
if (isPagingRefNotFound()) return;
|
||||
paging.value.reload().catch(() => {});
|
||||
});
|
||||
|
||||
onPageScroll((e) => {
|
||||
if (isPagingRefNotFound()) return;
|
||||
paging.value.updatePageScrollTop(e.scrollTop);
|
||||
e.scrollTop < 10 && paging.value.doChatRecordLoadMore();
|
||||
});
|
||||
|
||||
onReachBottom(() => {
|
||||
if (isPagingRefNotFound()) return;
|
||||
paging.value.pageReachBottom();
|
||||
});
|
||||
|
||||
const toOrder = () => {
|
||||
uni.switchTab({
|
||||
url: '/pages/order/order'
|
||||
});
|
||||
};
|
||||
|
||||
let searchChange = (e) => {
|
||||
query.keyWord = e;
|
||||
paging.value.reload();
|
||||
};
|
||||
|
||||
let showMode = () => {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '暂未开放',
|
||||
showCancel: false,
|
||||
confirmText: '确认',
|
||||
success: () => {}
|
||||
});
|
||||
};
|
||||
|
||||
const popupShow = ref(false);
|
||||
const filterData = reactive({
|
||||
chargeWay: [
|
||||
{ label: "慢充<20kw", value: "1" },
|
||||
{ label: "快充20~360kw", value: "2" },
|
||||
{ label: "超充≥360kw", value: "3" },
|
||||
],
|
||||
serviceInfo: [
|
||||
{ label: "停车免费", value: "1" },
|
||||
{ label: "限时免费", value: "2" },
|
||||
{ label: "停车收费", value: "3" },
|
||||
]
|
||||
})
|
||||
|
||||
// 筛选电站
|
||||
const filterBtn = () => {
|
||||
popupShow.value = true;
|
||||
}
|
||||
const popupClose = () => {
|
||||
console.log("popupClose");
|
||||
popupShow.value = false;
|
||||
}
|
||||
const popupOpen = () => {
|
||||
console.log("popupOpen");
|
||||
}
|
||||
const clickChargeWay = (item) => {
|
||||
if(query.chargeWay == item.value){
|
||||
query.chargeWay = ""
|
||||
}else{
|
||||
query.chargeWay = item.value;
|
||||
}
|
||||
paging.value.reload();
|
||||
}
|
||||
const clickServiceInfo = (item) => {
|
||||
if(query.serviceInfo == item.value){
|
||||
query.serviceInfo = ""
|
||||
}else{
|
||||
query.serviceInfo = item.value;
|
||||
}
|
||||
paging.value.reload();
|
||||
}
|
||||
const slideFilterChange = () => {
|
||||
console.log("query.maxPower", query.maxPower)
|
||||
paging.value.reload();
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
page {
|
||||
/* background: linear-gradient(180deg, #ffffff 0%, #f7f7f7 100%); */
|
||||
background-color: #f7f7f7;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.search_header {
|
||||
position: relative;
|
||||
&_blur {
|
||||
width: 100%;
|
||||
height: 185rpx;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background: #dbe6ff;
|
||||
opacity: 0.8;
|
||||
filter: blur(50px);
|
||||
/* #ifdef MP-ALIPAY */
|
||||
z-index: 0;
|
||||
/* #endif */
|
||||
/* #ifdef MP-WEIXIN */
|
||||
z-index: -1;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
&_grid {
|
||||
// margin: 35rpx 0;
|
||||
margin-top: 25rpx;
|
||||
border-radius: 15rpx;
|
||||
@include flex($space: space-between);
|
||||
&_view {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: 126rpx;
|
||||
font-size: 26rpx;
|
||||
// background: #ffffff;
|
||||
// border-radius: 24rpx 24rpx 24rpx 24rpx;
|
||||
image {
|
||||
width: 99rpx;
|
||||
height: 99rpx;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.order_list {
|
||||
box-sizing: border-box;
|
||||
view {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 15rpx;
|
||||
margin-bottom: 30rpx;
|
||||
font-size: 30rpx;
|
||||
// background-color: #fff;
|
||||
width: 690rpx;
|
||||
border-radius: 15rpx;
|
||||
|
||||
// width: 690rpx;
|
||||
// background: linear-gradient(180deg, #ffffff 0%, #f6f6f6 100%);
|
||||
// box-shadow: 0rpx -6rpx 12rpx 2rpx rgba(88, 140, 255, 0.1);
|
||||
// border-radius: 44rpx 44rpx 0rpx 0rpx;
|
||||
|
||||
&_view {
|
||||
padding: 15rpx 30rpx;
|
||||
background-color: #fff;
|
||||
border-radius: 15rpx;
|
||||
margin-right: 30rpx;
|
||||
}
|
||||
|
||||
&_active {
|
||||
background-color: #6FA256;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
&_header {
|
||||
width: 100%;
|
||||
height: 100rpx;
|
||||
@include flex;
|
||||
font-weight: bold;
|
||||
font-size: 36rpx;
|
||||
color: #232323;
|
||||
// background-color: #ffffff;
|
||||
|
||||
position: sticky;
|
||||
top: 360rpx;
|
||||
left: 0;
|
||||
|
||||
&_view {
|
||||
position: relative;
|
||||
margin-right: 50rpx;
|
||||
view {
|
||||
position: relative;
|
||||
z-index: 99;
|
||||
}
|
||||
&_dian {
|
||||
position: absolute !important;
|
||||
bottom: 0rpx;
|
||||
right: 20rpx;
|
||||
width: 66rpx;
|
||||
height: 20rpx;
|
||||
background-color: #6FA256;
|
||||
border-radius: 10rpx;
|
||||
z-index: 1 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
.filter-btn {
|
||||
width: 72rpx;
|
||||
height: 72rpx;
|
||||
}
|
||||
}
|
||||
|
||||
button::after {
|
||||
all: unset;
|
||||
}
|
||||
|
||||
.filter-area {
|
||||
padding: 30rpx 30rpx 56rpx;
|
||||
.filter-label {
|
||||
font-weight: bold;
|
||||
font-size: 36rpx;
|
||||
color: #232323;
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
.filter-value {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 36rpx;
|
||||
&-item {
|
||||
font-weight: bold;
|
||||
font-size: 24rpx;
|
||||
color: #232323;
|
||||
padding: 8rpx 0;
|
||||
border-radius: 8rpx;
|
||||
border: 2rpx solid #666666;
|
||||
width: 220rpx;
|
||||
text-align: center;
|
||||
}
|
||||
&-item-active {
|
||||
background: #6FA256;
|
||||
color: #FFFFFF;;
|
||||
border: 2rpx solid #428A1F;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user