星油闪充小程序
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

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>