NebulaFlashCharge_MP-WEIXIN/pages/home/index.vue

<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>