JDD-WXCP/pages/station/index.vue

<template>
  <div>
    <van-nav-bar title="油站列表" fixed placeholder safe-area-inset-top />
    <van-search placeholder="请输入搜索关键词" />
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
        <van-card :desc="item.stationAddress" :title="item.stationName" :thumb="item.mno" centered v-for="item in list"
          :key="item.stationId">
          <template #footer>
            <van-row>
              <van-col span="8" offset="1">
                <van-button plain round block size="small" type="primary" @click="goHere">去这里</van-button>
              </van-col>
              <van-col span="8" offset="5">
                <!-- <router-link :to="{path:'/order/create',query: {stationId: item.stationId,stationName:item.stationName}}"> -->
                <van-button round block size="small" type="primary" @click="goPay(item.stationId,item.stationName)">去买单</van-button>
              </van-col>
            </van-row>
          </template>
        </van-card>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script type="text/javascript">
  import Vue from 'vue';
  import {
    NavBar,
    PullRefresh,
    List,
    Card,
    Col,
    Row,
    Button
  } from 'vant';
  import {
    Search
  } from 'vant';

  Vue.use(NavBar);
  Vue.use(PullRefresh);
  Vue.use(List);
  Vue.use(Card);
  Vue.use(Col);
  Vue.use(Row);
  Vue.use(Button);
  Vue.use(Search);

  export default ({
    head() {
      return {
        title: '油站列表'
      }
    },
    data() {
      return {
        list: [],
        loading: false, //加载状态
        finished: false, //是否加载
        refreshing: false, //是否正在上拉刷新
        page: 1, //页数
        limit: 5, //每页几条记录
        openId: ""
      };
    },
    created() {
    },
    mounted() {
    },
    methods: {
      goHere(){
        let from = ["116.478346","39.997361","startpoint"].join(",")
        let to = ["116.3246","39.966577","endpoint"].join(",")
        window.location=`//uri.amap.com/navigation?from=${from}&to=${to}&mode=car&policy=1&coordinate=gaode&callnative=0`
      },
      onLoad() {
        var r = this.$axios.get('/getStationInfoList', {
          params: {
            stationLongitude: '117.12011',
            stationLatitude: '36.65188',
            pageNum: 0,
            pageSize: 0
          },
        });
        r.then(res => {
          if (res.data.retCode == 0) {
            // 加载状态结束
            this.loading = false;
            this.list = this.list.concat(res.data.data.stationInfoResponseList); //追加数据
            if (res.data.data.page == res.data.data.stationInfoResponseList.pageNum ||
              res.data.data.stationInfoResponseList
              .length == 0) { //数据全部加载完成
              this.finished = true;
            } else {
              this.finished = false;
            }
          }
        })
      },
      //去买单按钮方法
      goPay: function(stationId, stationName) {
        let openId=this.$route.query.openid;
        this.$router.push({
          path: '/order/create',
          query: {
            stationId: stationId,
            stationName: stationName,
            openId: openId
          }
        });
      },
      onRefresh() {
        // 清空列表数据
        this.finished = false;
        // 重新加载数据
        // 将 loading 设置为 true，表示处于加载状态
        this.loading = true;
        this.onLoad();
      },
    }
  })
</script>

<style lang="less">
  body {
    background-color: #f8f8f8;
  }

  .van-card {
    border-bottom: 1px solid #ebedf0;
    background-color: #ffffff !important;
  }
</style>