company_h5/src/views/HomeView.vue

<template>
  <div class="home">
    <homeNavBar @getlist="onRefresh" v-model="page.params.oilProductCode" :productCodeList="productCodeList" @seach="seach" ref="homeNavBar" />
    <div :style="{}" id="list" class="list">
      <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
        <van-list id="vanList" ref="vanList" @load="onLoad" v-model="loading" :finished="finished" finished-text="没有更多了">
          <van-cell v-for="(item, index) in list" :key="index">
            <div @click="toDetails(item)" slot>
              <listItem ref="listItem" :index="index" :listItem="item" />
            </div>
          </van-cell>
        </van-list>
      </van-pull-refresh>
    </div>
  </div>
</template>

<script>
import homeNavBar from '@/components/homeNavBar.vue'
import listItem from '@/components/listItem.vue'
import oilSiteApi from '@/api/oil-site.js'

import initAMap from '@/utils/amap.js'

import { Notify } from 'vant'

export default {
  components: {
    homeNavBar,
    listItem
  },
  name: 'HomeView',
  props: {},
  data() {
    return {
      productCodeList: [],
      refreshing: false,
      // homeNavBarStyle: null,
      show: false,
      loading: false,
      finished: false,
      msg: process.env.VUE_APP_ENV,
      position: null,
      list: [],
      page: {
        pageSize: 10,
        currentPage: 1,
        params: {
          //类型：Object  必有字段  备注：// 筛选对象
          accuracy: '',
          errMsg: '',
          horizontalAccuracy: '',
          latitude: '',
          longitude: '',
          oilProductCode: '',
          siteName: '',
          sort: '',
          speed: '',
          verticalAccuracy: ''
        }
      }
    }
  },
  created() {
    // console.log('created')
  },
  mounted() {
    this.init()
  },
  // watch: {
  //   'page.params.oilProductCode': function (n) {}
  // },
  methods: {
    getmenu() {
      // return
      oilSiteApi.getCheckInfo().then(res => {
        this.productCodeList = []
        Object.keys(res.data.productCodeList).forEach(key => {
          this.productCodeList.push({
            text: key,
            children: res.data.productCodeList[key].map(item => {
              return { text: item, id: item }
            })
          })
        })
      })
    },
    seach(e) {
      this.page.params.siteName = e
      this.onRefresh()
    },
    onLoad() {
      if (this.refreshing) return
      this.page.currentPage += 1
      this.getlist()
    },
    toDetails(item) {
      this.$router.push({
        path: '/orderDetails',
        query: { seleItem: JSON.stringify(item) }
      })
    },
    onRefresh() {
      this.loading = false
      this.finished = false
      this.page.currentPage = 1
      this.getlist()
    },
    onscroll() {
      let container = document.getElementById('vanList')
      container.onscroll = function (e) {
        console.log(e.currentTarget.scrollTop, '滚动到底部')
        if (Math.ceil(e.currentTarget.scrollTop + e.currentTarget.clientHeight) >= e.currentTarget.scrollHeight) {
          //容差：20px
          console.log(e.currentTarget.scrollTop, '滚动到底部')
        }
      }
    },
    init() {
      this.getmenu()
      this.getlist()
      // this.homeNavBarStyle = this.$refs.homeNavBar.$el.clientHeight

      // this.onscroll()
    },
    positionChenk(position) {
      return !position?.latitude && !position?.longitude ? true : false
    },
    getlist() {
      if (this.position) {
        this.obtainData()
        return
      }
      initAMap().then(() => {
        let AMap = this.$AMap
        let geolocation = new AMap.Geolocation({
          // enableHighAccuracy: true // 是否使用高精度定位，默认：true
        })
        geolocation.getCurrentPosition((status, result) => {
          console.log('status', status)
          console.log('result', result)
          if (status === 'complete') {
            let { lat: latitude, lng: longitude } = result.position
            this.position = { latitude, longitude }
            this.obtainData()
          } else {
            switch (result.status) {
              case 1:
                Notify({
                  message: '用户拒绝对获取地理位置的请求。',
                  type: 'danger',
                  duration: 1000
                })
                break
              default:
                Notify({
                  message: '定位获取失败，请退出重试。',
                  type: 'danger',
                  duration: 1000
                })
                break
            }
          }
        })
      })
    },
    obtainData() {
      this.page.params = Object.assign(this.page.params, this.position)
      this.loading = true
      oilSiteApi
        .getSiteList(this.page)
        .then(res => {
          if (res.code == 20000) {
            if (res.data.list.length < 10) {
              this.finished = true
            }
            if (this.page.currentPage == 1) {
              this.list = res.data.list
            } else {
              this.list = this.list.concat(res.data.list)
            }
            this.loading = false
            this.refreshing = false
          }
        })
        .catch(error => {
          this.finished = true
        })
    }
  }
}
</script>
<style scoped>
.home {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.list {
  flex: 1;
  overflow: auto;
}
</style>