You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
172 lines
4.9 KiB
172 lines
4.9 KiB
![]()
1 year ago
|
<template>
|
||
|
<!-- <view :style="{paddingTop:`${titleStyle.top}px`}" class="page_body"> -->
|
||
|
<view style="width: 100vw;height: 100%;">
|
||
|
<view v-if="viewData" class="home_container" style="height: 100%;overflow: hidden;">
|
||
|
<view @click="init"
|
||
|
:style="{height:`${titleStyle.height}px`,paddingRight:`${titleStyle.width + 10 }px`}"
|
||
|
class="home_title flex">
|
||
|
<image src="../../static/position.png" class="home_title_logo"></image>
|
||
|
<view style="" class="oneflex textov"> {{ location.address?location.address:'北京市天安门'}}</view>
|
||
|
</view>
|
||
|
<!-- 列表 -->
|
||
|
<view style="overflow: hidden;" class="home_list_container flex column">
|
||
|
<!-- 搜索框 -->
|
||
|
<view class="home_list_header">
|
||
|
<!-- 输入框 -->
|
||
|
<view class="home_list_header_input">
|
||
|
<uni-icons class="home_list_header_input_icon" type="search" size="20"></uni-icons>
|
||
|
<input @confirm="seach" v-model="pageData.stationName" placeholder="搜索" type="text">
|
||
|
<uni-icons v-if="pageData.stationName!==''"
|
||
|
@click="pageData.stationName = '';getList() " type="clear" size="20"></uni-icons>
|
||
|
</view>
|
||
|
<!-- 选项 -->
|
||
|
<view class="home_list_option_list flex around">
|
||
|
<view @click="pageData.sortType = item.value" v-for="(item,index) in options"
|
||
|
:key="index"
|
||
|
:class=" `home_list_option_list_item flex jc ac` + ( item.value==pageData.sortType?' select_home_list_option_list_item':'') ">
|
||
|
{{item.label}}
|
||
|
</view>
|
||
|
</view>
|
||
|
</view>
|
||
|
<!-- 列表 -->
|
||
|
<view class="home_list">
|
||
|
<scroll-view @refresherrefresh='refresherrefresh' :refresher-enabled='true'
|
||
|
:refresher-triggered='refresherTriggered' v-if="viewData.list.length"
|
||
|
style="height: 100%;" scroll-y="true" @scrolltolower='scrolltolower'>
|
||
|
<station-item :data="item" :key="index"
|
||
|
v-for="(item,index) in viewData.list"></station-item>
|
||
|
</scroll-view>
|
||
|
<image class="qx" v-else src="../../static/qs.png" mode=""></image>
|
||
|
</view>
|
||
|
</view>
|
||
|
</view>
|
||
|
<view v-else>
|
||
|
<skeleton></skeleton>
|
||
|
</view>
|
||
|
</view>
|
||
|
</template>
|
||
|
|
||
|
<script>
|
||
|
import station from '@/api/station.js'
|
||
|
import stationItem from "@/components/stationItem/stationItem.vue"
|
||
|
import tool from '../../utils/tool.js'
|
||
|
import skeleton from './skeleton.vue'
|
||
|
import {
|
||
|
page
|
||
|
} from './AntiCorruptionLayer.js'
|
||
|
export default {
|
||
|
components: {
|
||
|
stationItem,
|
||
|
skeleton
|
||
|
},
|
||
|
data() {
|
||
|
return {
|
||
|
agreementList:uni.getStorageSync('agreementList'),
|
||
|
token: uni.getStorageSync('Authorization'),
|
||
|
user: uni.getStorageSync('user'),
|
||
|
location: null,
|
||
|
refresherTriggered: false,
|
||
|
pageData: {
|
||
|
currentPage: 1,
|
||
|
stationName: '',
|
||
|
stationLng: 116.38,
|
||
|
stationLat: 39.90,
|
||
|
sortType: ''
|
||
|
},
|
||
|
viewData: null,
|
||
|
titleStyle: {},
|
||
|
selectOptions: 0,
|
||
|
options: [{
|
||
|
label: '距离最近',
|
||
|
value: ''
|
||
|
}, {
|
||
|
label: '最便宜',
|
||
|
value: 'cheap'
|
||
|
}, {
|
||
|
label: '快充',
|
||
|
value: 'fast'
|
||
|
}, {
|
||
|
label: '空闲',
|
||
|
value: 'idle'
|
||
|
}]
|
||
|
}
|
||
|
},
|
||
|
created() {
|
||
|
this.init()
|
||
|
},
|
||
|
watch: {
|
||
|
'pageData.sortType'(e) {
|
||
|
this.seach()
|
||
|
}
|
||
|
},
|
||
|
onShow() {
|
||
|
this.showInit()
|
||
|
},
|
||
|
methods: {
|
||
|
showInit() {
|
||
|
this.tool.getCards();
|
||
|
},
|
||
|
refresherrefresh() {
|
||
|
this.refresherTriggered = true;
|
||
|
this.seach()
|
||
|
},
|
||
|
seach() {
|
||
|
this.pageData.currentPage = 1;
|
||
|
this.getList()
|
||
|
},
|
||
|
scrolltolower() {
|
||
|
this.pageData.currentPage += 1;
|
||
|
this.getList()
|
||
|
},
|
||
|
async init() {
|
||
|
this.titleStyle = wx.getMenuButtonBoundingClientRect(); //获取高度
|
||
|
await this.getPosition();
|
||
|
this.getList();
|
||
|
},
|
||
|
async getPosition() {
|
||
|
// if(!this.user){
|
||
|
// return Promise.resolve();
|
||
|
// }
|
||
|
await this.tool.userLocationChenk().then(res => {}).catch(err => {});
|
||
|
await this.tool.getLocation().then(res => {
|
||
|
this.location = uni.getStorageSync('location')
|
||
|
}).catch(err => {
|
||
|
this.location = null
|
||
|
});
|
||
|
},
|
||
|
async getList() {
|
||
|
if (this.location) {
|
||
|
this.pageData.stationLat = this.location.latitude;
|
||
|
this.pageData.stationLng = this.location.longitude;
|
||
|
}
|
||
|
station[this.token ? 'getNearbySites' : 'getTouristSites'](this.pageData).then(res => {
|
||
|
if(res.data.length==0){
|
||
|
setTimeout(()=>{
|
||
|
uni.showToast({
|
||
|
title:'到底了',
|
||
|
icon:'none'
|
||
|
})
|
||
|
},500)
|
||
|
}
|
||
|
if (res.code == 20000) {
|
||
|
this.tool.difTags(res);
|
||
|
if (this.pageData.currentPage !== 1) {
|
||
|
let data = new this.tool.Anticorrosive(res, page);
|
||
|
this.viewData.list = this.viewData.list.concat(data.list)
|
||
|
} else {
|
||
|
this.viewData = new this.tool.Anticorrosive(res, page);
|
||
|
// this.viewData.list = [...this.viewData.list]
|
||
|
}
|
||
|
}
|
||
|
this.refresherTriggered = false
|
||
|
})
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
</script>
|
||
|
<style>
|
||
|
</style>
|
||
|
<style lang="scss" scoped>
|
||
|
@import 'index.scss';
|
||
|
@import '../index/index.scss'
|
||
|
</style>
|