ZhiHuiJiaoWu_UniApp/pages/student/timetable/list.vue

<!--课程-详情-->
<template>
	<view class="main_box">
    <scroll-view scroll-y="true" :lower-threshold="lowerThreshold"
			@scrolltolower="loadMoreData"  style="height: 100vh;">

      <view class="main_section" v-for="(v,k) in tableList" :key="k" @click="opebViewTimetable(v)">
        <view class="title">{{v.name}}</view>
        <view class="con">{{v.address}}</view>
        <view class="con" v-if="v.distance === null ">无法获取定位</view>
        <view class="con" v-else-if="v.distance">距您{{v.distance}}km</view>
        <view class="current-venue" v-if="venue_id == v.id">
          当前场馆
        </view>
      </view>
    </scroll-view>
    <!--      加载状态-->
<!--    <fui-loading :isFixed="true" srcCol="/static/icon-img/loading_white.png" text="正在加载..." v-if="loading"></fui-loading>-->
	</view>
</template>

<script>
	import memberApi from '@/api/member.js';
	import AQTabber from "@/components/AQ/AQTabber.vue"


	export default {
		components: {
			AQTabber,
		},
		data() {
			return {
        loading:false,//加载状态
        lowerThreshold: 100,//距离底部多远触发
        isReachedBottom: false,//防止重复加载|true=不可加载|false=可加载

        //筛选条件
        filteredData:{
          // page:1,//当前页码
          // limit:10,//每页返回数据条数
          // total:10,//数据总条数
          schedule_date:'',//日期
        },

        tableList:[],//表格数据

        longitude:'',//当前用户经度
        latitude:'',//当前用户纬度
        venue_id:'',//当前场馆id
			}
		},
		onLoad(options) {
      this.filteredData.schedule_date = options.schedule_date//日期
      //场馆id
      this.venue_id = options.venue_id || ''
    },
    onShow() {
      this.init()//初始化
    },
		methods: {
		  //初始化
      async init() {
        await this.getUserLocation();
        await this.getList();
      },


      // 获取用户当前位置（支持多端）
      async getUserLocation() {
        try {
          const location = await this.getLocation();
          this.longitude = location.longitude;
          this.latitude = location.latitude;
        } catch (error) {
          console.log(error);
          uni.showToast({
            title: '获取位置失败',
            icon: 'none'
          });
          // throw error; // 重新抛出错误，以便在 init 方法中捕获
        }
      },

      // 封装 uni.getLocation 为一个返回 Promise 的函数
      getLocation() {
        return new Promise((resolve, reject) => {
          uni.getLocation({
            type: 'wgs84',
            success: (res) => {
              console.log('当前位置的经度：' + res.longitude);
              console.log('当前位置的纬度：' + res.latitude);
              resolve(res);
            },
            fail: (err) => {
              console.log(err);
              reject(err);
            }
          });
        });
      },

      //计算距离
      getDistance(lat1, lng1, lat2, lng2) {
        const R = 6371; // 地球半径，单位为公里
        const dLat = this.deg2rad(lat2 - lat1);
        const dLon = this.deg2rad(lng2 - lng1);
        const a =
            Math.sin(dLat / 2) * Math.sin(dLat / 2) +
            Math.cos(this.deg2rad(lat1)) * Math.cos(this.deg2rad(lat2)) *
            Math.sin(dLon / 2) * Math.sin(dLon / 2);
        const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
        const distance = R * c; // 距离，单位为公里

        return distance.toFixed(2); // 保留两位小数
      },
      // 将角度转换为弧度
      deg2rad(deg) {
        return deg * (Math.PI / 180);
      },


		  //加载更多(下一页)
      loadMoreData() {
        return //本页面无需下一页
        //判断是否加载
        if (!this.isReachedBottom) {
          this.isReachedBottom = true;//设置为不可请求状态
          this.getList();
        }
      },
      //重置为第一页
      loadData() {
        setTimeout(() => {
          this.isReachedBottom = false; // 重置状态，以便下次触发加载更多
        }, 1000);
      },

      //获取场地列表
      async getList(){
        this.loading = true

        let data = {...this.filteredData}

        //判断是否还有数据
        if(this.filteredData.page * this.filteredData.limit > this.total){
          this.loading = false
          uni.showToast({
            title: '暂无更多',
            icon: 'none'
          })
          return
        }

        let res = await memberApi.venuesList(data)
        this.loading = false
        this.isReachedBottom = false;
        if (res.code != 1){
          uni.showToast({
            title: res.msg,
            icon: 'none'
          })
          return
        }

        this.tableList = res.data



        this.tableList.forEach((v,k)=>{
          if(this.longitude && this.latitude && v.longitude && v.latitude){
            v.distance = this.getDistance(this.latitude, this.longitude, v.latitude, v.longitude)
          }else{
            v.distance = null
          }
        })

        console.log('列表',this.tableList)





      },

      //跳转页面-课程列表
      opebViewTimetable(item) {
        let venue_id = item.id
        uni.navigateTo({
          url: `/pages/student/timetable/index?venue_id=${venue_id}`
        })
      },

		}
	}
</script>

<style lang="less" scoped>
	.main_box {
		width: 100%;
		height: 100vh;
		overflow: auto;
		background: #292929;
	}
	.main_section{
		width: 92%;
		border-radius: 15rpx;
		background-color: #404045;
		margin: 20rpx auto;
		padding: 40rpx 0 40rpx 80rpx;
		color: #fff;
		position: relative;
	}
	.title{
		font-size: 32rpx;
	}
	.con{
		color: #D7D7D7;
		font-size: 26rpx;
		margin-top: 20rpx;
	}
	.current-venue{
		border-radius: 8rpx;
		border: 2rpx #F59A23 solid;
		width: 120rpx;
		text-align: center;
		color: #F59A23;
		position: absolute;
		top: 10%;
		right: 3%;
	}
</style>