php
/
ZhiHuiJiaoWu_UniApp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

feat(student): 体育馆列表功能- 新增体育馆列表接口和相关页面 

- 实现用户定位和计算距离功能
- 优化列表展示，增加距离显示
- 添加跳转到课程列表的功能
- 更新小程序配置，增加定位权限
master
liutong 1 year ago
parent
f7e4b438dc
commit
d74f295e5b
4 changed files with 123 additions and 128 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 8
      api/member.js
  2. 7
      manifest.json
  3. 6
      pages/student/timetable/index.vue
  4. 230
      pages/student/timetable/list.vue

8
api/member.js
View File

@ -67,6 +67,14 @@ export default {
})
},
//场地列表
venuesList(data) {
let url = '/member/venues_list'
return http.get(url, data).then(res => {
return res;
})
},
}

7
manifest.json
View File

@ -62,7 +62,7 @@
"quickapp" : {},
/* 小程序特有相关 */
"mp-weixin" : {
"appid" : "wx42762c713f7bfa2e",
"appid" : "wx675f2696abf932c5",
"setting" : {
"urlCheck" : false,
"minified" : true,
@ -74,7 +74,10 @@
"desc" : "你的位置信息将用于小程序位置接口的效果展示"
}
},
"requiredPrivateInfos" : [ "getFuzzyLocation" ]
"requiredPrivateInfos": [
"getLocation",
"chooseLocation"
]
},
"mp-alipay" : {
"usingComponents" : true

6
pages/student/timetable/index.vue
View File

@ -110,7 +110,7 @@ export default {
//今日日期
today: '',
dateList: []//日期列表
dateList: [],//日期列表
}
},
onLoad(options) {
@ -248,8 +248,10 @@ export default {
},
//体育馆列表
more() {
let schedule_date = this.filteredData.schedule_date
let venue_id = this.venuesInfo.id//当前场馆id
uni.navigateTo({
url: '/pages/student/timetable/list'
url: `/pages/student/timetable/list?schedule_date=${schedule_date}&venue_id=${venue_id}`
})
}
}

230
pages/student/timetable/list.vue
View File

@ -4,122 +4,18 @@
<scroll-view scroll-y="true" :lower-threshold="lowerThreshold"
@scrolltolower="loadMoreData" style="height: 100vh;">
<view class="main_section">
<view class="title">XXX体育馆</view>
<view class="con">南山区科苑路15号科兴科学园</view>
<view class="con">距您1km</view>
<view class="current-venue" v-if="true">
<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>
<view class="main_section">
<view class="title">XXX体育馆</view>
<view class="con">南山区科苑路15号科兴科学园</view>
<view class="con">距您1km</view>
<view class="current-venue" v-if="true">
当前场馆
</view>
</view>
<view class="main_section">
<view class="title">XXX体育馆</view>
<view class="con">南山区科苑路15号科兴科学园</view>
<view class="con">距您1km</view>
<view class="current-venue" v-if="true">
当前场馆
</view>
</view>
<view class="main_section">
<view class="title">XXX体育馆</view>
<view class="con">南山区科苑路15号科兴科学园</view>
<view class="con">距您1km</view>
<view class="current-venue" v-if="true">
当前场馆
</view>
</view>
<view class="main_section">
<view class="title">XXX体育馆</view>
<view class="con">南山区科苑路15号科兴科学园</view>
<view class="con">距您1km</view>
<view class="current-venue" v-if="true">
当前场馆
</view>
</view>
<view class="main_section">
<view class="title">XXX体育馆</view>
<view class="con">南山区科苑路15号科兴科学园</view>
<view class="con">距您1km</view>
<view class="current-venue" v-if="true">
当前场馆
</view>
</view>
<view class="main_section">
<view class="title">XXX体育馆</view>
<view class="con">南山区科苑路15号科兴科学园</view>
<view class="con">距您1km</view>
<view class="current-venue" v-if="true">
当前场馆
</view>
</view>
<view class="main_section">
<view class="title">XXX体育馆</view>
<view class="con">南山区科苑路15号科兴科学园</view>
<view class="con">距您1km</view>
<view class="current-venue" v-if="true">
当前场馆
</view>
</view>
</scroll-view>
<!-- 加载状态-->
<fui-loading :isFixed="true" srcCol="/static/icon-img/loading_white.png" text="正在加载..." v-if="loading"></fui-loading>
<!-- <view class="main_section">-->
<!-- <view class="title">XXX体育馆</view>-->
<!-- <view class="con">南山区科苑路15号科兴科学园</view>-->
<!-- <view class="con">距您1km</view>-->
<!-- </view>-->
<!-- <view class="main_section">-->
<!-- <view class="title">XXX体育馆</view>-->
<!-- <view class="con">南山区科苑路15号科兴科学园</view>-->
<!-- <view class="con">距您1km</view>-->
<!-- </view>-->
<!-- <view class="main_section">-->
<!-- <view class="title">XXX体育馆</view>-->
<!-- <view class="con">南山区科苑路15号科兴科学园</view>-->
<!-- <view class="con">距您1km</view>-->
<!-- </view>-->
<!-- <view class="main_section">-->
<!-- <view class="title">XXX体育馆</view>-->
<!-- <view class="con">南山区科苑路15号科兴科学园</view>-->
<!-- <view class="con">距您1km</view>-->
<!-- </view>-->
<!-- <view class="main_section">-->
<!-- <view class="title">XXX体育馆</view>-->
<!-- <view class="con">南山区科苑路15号科兴科学园</view> -->
<!-- <view class="con">距您1km</view>-->
<!-- </view>-->
<!-- <view class="main_section">-->
<!-- <view class="title">XXX体育馆</view>-->
<!-- <view class="con">南山区科苑路15号科兴科学园</view>-->
<!-- <view class="con">距您1km</view>-->
<!-- </view>-->
<!-- <view class="main_section">-->
<!-- <view class="title">XXX体育馆</view>-->
<!-- <view class="con">南山区科苑路15号科兴科学园</view>-->
<!-- <view class="con">距您1km</view>-->
<!-- </view>-->
<!-- <view class="main_section">-->
<!-- <view class="title">XXX体育馆</view>-->
<!-- <view class="con">南山区科苑路15号科兴科学园</view>-->
<!-- <view class="con">距您1km</view>-->
<!-- </view>-->
<!-- <view class="main_section">-->
<!-- <view class="title">XXX体育馆</view>-->
<!-- <view class="con">南山区科苑路15号科兴科学园</view>-->
<!-- <view class="con">距您1km</view>-->
<!-- </view>-->
<!-- <fui-loading :isFixed="true" srcCol="/static/icon-img/loading_white.png" text="正在加载..." v-if="loading"></fui-loading>-->
</view>
</template>
@ -140,29 +36,92 @@
//筛选条件
filteredData:{
page:1,//当前页码
limit:10,//每页返回数据条数
total:10,//数据总条数
// page:1,//当前页码
// limit:10,//每页返回数据条数
// total:10,//数据总条数
schedule_date:'',//日期
},
tableList:[],//表格数据
longitude:'',//当前用户经度
latitude:'',//当前用户纬度
venue_id:'',//当前场馆id
}
},
onLoad() {},
onLoad(options) {
this.filteredData.schedule_date = options.schedule_date//日期
//场馆id
this.venue_id = options.venue_id || ''
},
onShow() {
this.init()//初始化
},
methods: {
//初始化
async init() {
await this.getList()
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;//设置为不可请求状态
@ -176,7 +135,7 @@
}, 1000);
},
//获取列表
//获取场地列表
async getList(){
this.loading = true
@ -192,7 +151,7 @@
return
}
let res = await memberApi.courseList(data)
let res = await memberApi.venuesList(data)
this.loading = false
this.isReachedBottom = false;
if (res.code != 1){
@ -203,11 +162,34 @@
return
}
this.tableList = res.data.data
this.tableList = res.data
this.total = res.data.total
this.page++
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>

Write Preview
Loading…
Cancel
Save