558 lines
15 KiB
Vue
558 lines
15 KiB
Vue
<template>
|
||
<view class="page flex-col">
|
||
<view style="width: 100%;background: #f4f5f6;box-sizing: border-box;padding-top: 88px;">
|
||
<headers titles="驾校">
|
||
<uni-icons type="left" color="#000000" size="22px"></uni-icons>
|
||
</headers>
|
||
</view>
|
||
<view class="group_4 flex-col">
|
||
<image style="width: 100%; height: 100%;" referrerpolicy="no-referrer"
|
||
:src="imagesUrl + '/' + schoolInfo.photo" v-if="schoolInfo.photo" />
|
||
<!-- src="/static/lanhu_jiaxiaoxiangqing/FigmaDDSSlicePNGcd54efcc9a8c89af0ef99c8275464828.png" -->
|
||
</view>
|
||
<view class="group_5 flex-col">
|
||
<text class="text_3">{{ schoolInfo.corpName }}</text>
|
||
<view class="text-wrapper_1 flex-row justify-between">
|
||
<text class="text_4">营业时间</text>
|
||
<text class="text_5" v-if=" schoolInfo.businessStartTime && schoolInfo.businessEndTime ">
|
||
{{ schoolInfo.businessStartTime }} - {{ schoolInfo.businessEndTime }}</text>
|
||
<text class="text_5" v-else>08:00-18:00</text>
|
||
</view>
|
||
|
||
</view>
|
||
<!-- 地图 -->
|
||
<view class="map_whole flex-row">
|
||
<!-- <view class="map_body flex-col" @click="bookingInfoClick(schoolInfo.lat, schoolInfo.lgt)"> -->
|
||
<view class="map_body flex-col">
|
||
<view class="map_container"
|
||
@click="bookingInfoClick(schoolInfo.lat, schoolInfo.lgt, schoolInfo.corpName, schoolInfo.address)">
|
||
<image class="bg-img" src="/static/imgs/mapBackground.png" mode="scaleToFill" />
|
||
<view class="map-text-1">{{ schoolInfo.address }}</view>
|
||
<!-- <view class="map-text-2">距离 {{ distance }}</view> -->
|
||
<view class="map-text-2" v-if="showDistance">距离 {{ distance }} </view>
|
||
<view class="get-distance-btn" v-else @click.stop="requestLocationPermission">
|
||
<text>获取距离</text>
|
||
</view>
|
||
|
||
</view>
|
||
</view>
|
||
|
||
</view>
|
||
|
||
|
||
<view class="group_6 flex-col">
|
||
<view class="box_4 flex-row justify-between">
|
||
<view class="box_5 flex-col"></view>
|
||
<text class="text_8">报名类型</text>
|
||
</view>
|
||
<view v-if="schoolClassList.length > 0">
|
||
<view class="box_6 flex-row" v-for="(item, index) in schoolClassList" :key="index"
|
||
@click="goToDetail(item.id)">
|
||
<view class="image-text_1 flex-row">
|
||
<image class="image_2" referrerpolicy="no-referrer" :src="imagesUrl + '/' + item.photo" />
|
||
<view class="text-group_2 flex-col justify-between">
|
||
<text class="text_9">{{ item.name }}</text>
|
||
<view class="text-wrapper_2 flex-row justify-between">
|
||
<text class="text_10">￥{{ item.price }}</text>
|
||
</view>
|
||
</view>
|
||
<view class="text-wrapper_4 flex-col">
|
||
<view style="display: flex">
|
||
<text class="text_13"
|
||
style="background-color: rgba(223, 235, 255, 1);padding: 5rpx 15rpx"
|
||
v-if="item.tittle">{{ item.tittle }}
|
||
</text>
|
||
<text class="text-wrapper_3 text_13" v-if="item.type"
|
||
style="color: black;padding: 5rpx 10rpx">{{ item.type }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="box_12 flex-row">
|
||
<view class="image-text_2 flex-row justify-between" @click="goClassList()">
|
||
<text class="text-group_3">查看全部班型({{ schoolAllClassList.length }})</text>
|
||
<image class="thumbnail_2" referrerpolicy="no-referrer"
|
||
src="/static/lanhu_jiaxiaoxiangqing/FigmaDDSSlicePNGb5045194768d2baa618848ea60e5a9e4.png" />
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view v-else>
|
||
<u-empty mode="data" text="该驾校没有课程...">
|
||
</u-empty>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="group_8 flex-col">
|
||
<view class="group_9 flex-row justify-between">
|
||
<view class="block_3 flex-col"></view>
|
||
<text class="text_24">团队教练</text>
|
||
</view>
|
||
<view v-if="schoolCoachList.length > 0">
|
||
<view class="group_10 flex-row justify-between" v-for="(item, index) in schoolCoachList" :key="index">
|
||
<view class="image-text_3 flex-row justify-between">
|
||
<image class="label_3" referrerpolicy="no-referrer" :src="imagesUrl + '/' + item.image" />
|
||
<view class="text-group_4 flex-col justify-between">
|
||
<text class="text_25">{{ item.name }}</text>
|
||
<text class="text_27" v-if="item.seniority">教龄 {{ item.seniority }}年</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view v-else>
|
||
<u-empty mode="list" text="该驾校没有团队教练...">
|
||
</u-empty>
|
||
</view>
|
||
|
||
</view>
|
||
|
||
</view>
|
||
</template>
|
||
<script>
|
||
import request from "@/utils/request";
|
||
import config from "@/config.js"
|
||
import headers from "@/components/header/headers.vue";
|
||
import * as auth from '@/utils/auth';
|
||
|
||
export default {
|
||
components: {
|
||
headers
|
||
},
|
||
data() {
|
||
return {
|
||
imagesUrl: config.imagesUrl,
|
||
constants: {},
|
||
schoolId: undefined,
|
||
tenantId: undefined,
|
||
schoolName: undefined,
|
||
schoolDetails: {},
|
||
schoolInfo: [],
|
||
schoolClassList: [],
|
||
schoolAllClassList: [],
|
||
schoolCoachList: [],
|
||
|
||
latitude: 0, // 地图中心纬度
|
||
longitude: 0, // 地图中心经度
|
||
scale: 16, // 地图缩放级别
|
||
markers: [], // 地图标记点
|
||
|
||
distance: '0.0', // 初始距离
|
||
|
||
showDistance: true, // 控制是否显示距离
|
||
locationPermissionDenied: false // 记录用户是否拒绝了位置权限
|
||
|
||
|
||
};
|
||
},
|
||
async onShow() {
|
||
// const res = await this.getLocation();
|
||
// console.log('位置信息',res)
|
||
|
||
},
|
||
onLoad(options) {
|
||
this.schoolId = options.id;
|
||
this.tenantId = options.tenantId;
|
||
this.schoolName = options.schoolName;
|
||
// this.getSchoolDetails();
|
||
this.getSchoolInfo()
|
||
this.getSchoolClass();
|
||
this.getSchoolAllClass()
|
||
this.getSchoolCoach()
|
||
},
|
||
methods: {
|
||
|
||
bookingInfoClick(lat, lgt, name, address) {
|
||
// 进行导航
|
||
uni.openLocation({
|
||
latitude: lat,
|
||
longitude: lgt,
|
||
name: name,
|
||
address: address,
|
||
success: function() {
|
||
console.log('success');
|
||
}
|
||
});
|
||
},
|
||
handleBack() {
|
||
uni.navigateBack({
|
||
delta: 1
|
||
});
|
||
},
|
||
getSchoolDetails() {
|
||
request({
|
||
url: '/userClient/base/companySmallProgram/noTenantIdGet',
|
||
method: 'GET',
|
||
params: {
|
||
id: this.schoolId
|
||
},
|
||
tenantIdFlag: false
|
||
}).then(res => {
|
||
this.schoolDetails = res.data;
|
||
this.tenantId = res.data.tenantId
|
||
}).catch(err => {
|
||
console.error('获取驾校详情失败', err);
|
||
});
|
||
},
|
||
/* async getSchoolInfo() {
|
||
try {
|
||
const res = await request({
|
||
url: '/userClient/base/companySmallProgram/getCompanyByTenantId',
|
||
method: 'GET',
|
||
params: {
|
||
tenantId: this.tenantId,
|
||
systemCode: 'jiaxiao',
|
||
}
|
||
});
|
||
|
||
this.schoolInfo = res.data;
|
||
|
||
// 获取用户位置并计算距离
|
||
const userLocation = await this.getLocation();
|
||
if (userLocation.lat && userLocation.lng && this.schoolInfo.lat && this.schoolInfo.lgt) {
|
||
const distance = this.calculateDistance({
|
||
latitude: userLocation.lat,
|
||
longitude: userLocation.lng
|
||
}, {
|
||
latitude: parseFloat(this.schoolInfo.lat),
|
||
longitude: parseFloat(this.schoolInfo.lgt)
|
||
});
|
||
this.distance = distance; // 保存距离到data中
|
||
}
|
||
} catch (error) {
|
||
console.error('获取驾校信息失败', error);
|
||
}
|
||
}, */
|
||
|
||
async getSchoolInfo() {
|
||
try {
|
||
const res = await request({
|
||
url: '/userClient/base/companySmallProgram/getCompanyByTenantId',
|
||
method: 'GET',
|
||
params: {
|
||
tenantId: this.tenantId,
|
||
systemCode: 'jiaxiao',
|
||
}
|
||
});
|
||
|
||
this.schoolInfo = res.data;
|
||
|
||
// 获取用户位置并计算距离
|
||
try {
|
||
const userLocation = await this.getLocation();
|
||
if (userLocation.lat && userLocation.lng && this.schoolInfo.lat && this.schoolInfo.lgt) {
|
||
const distance = this.calculateDistance({
|
||
latitude: userLocation.lat,
|
||
longitude: userLocation.lng
|
||
}, {
|
||
latitude: parseFloat(this.schoolInfo.lat),
|
||
longitude: parseFloat(this.schoolInfo.lgt)
|
||
});
|
||
this.distance = distance;
|
||
this.showDistance = true;
|
||
this.locationPermissionDenied = false;
|
||
}
|
||
} catch (error) {
|
||
console.error('获取位置失败', error);
|
||
this.showDistance = false;
|
||
this.locationPermissionDenied = true;
|
||
}
|
||
} catch (error) {
|
||
console.error('获取驾校信息失败', error);
|
||
}
|
||
},
|
||
|
||
getSchoolClass() {
|
||
request({
|
||
url: '/app-api/dl-drive-school-course-small/noTenantIdPage',
|
||
method: 'GET',
|
||
params: {
|
||
pageNo: 1,
|
||
pageSize: 3,
|
||
tenantId: this.tenantId,
|
||
},
|
||
tenantIdFlag: false
|
||
}).then(res => {
|
||
this.schoolClassList = res.data.records;
|
||
this.total = res.data.total;
|
||
})
|
||
},
|
||
//获取当前位置
|
||
getLocation() {
|
||
return new Promise((resolve, reject) => {
|
||
uni.getLocation({
|
||
type: 'gcj02',
|
||
success: (res) => {
|
||
resolve({
|
||
lat: res.latitude,
|
||
lng: res.longitude
|
||
});
|
||
},
|
||
fail: (err) => {
|
||
console.error('获取位置失败', err);
|
||
// 用户拒绝了位置授权
|
||
if (err.errMsg.includes('auth deny') || err.errMsg.includes(
|
||
'fail auth deny')) {
|
||
this.showDistance = false;
|
||
this.locationPermissionDenied = true;
|
||
}
|
||
reject(err);
|
||
}
|
||
});
|
||
});
|
||
},
|
||
|
||
// 计算两点间距离（单位：米）
|
||
calculateDistance(loc1, loc2) {
|
||
const {
|
||
latitude: lat1,
|
||
longitude: lng1
|
||
} = loc1;
|
||
const {
|
||
latitude: lat2,
|
||
longitude: lng2
|
||
} = loc2;
|
||
|
||
// 将经纬度转换为弧度
|
||
const rad = (d) => d * Math.PI / 180.0;
|
||
const radLat1 = rad(lat1);
|
||
const radLat2 = rad(lat2);
|
||
const a = radLat1 - radLat2;
|
||
const b = rad(lng1) - rad(lng2);
|
||
|
||
// 使用Haversine公式计算距离
|
||
const s = 2 * Math.asin(Math.sqrt(
|
||
Math.pow(Math.sin(a / 2), 2) +
|
||
Math.cos(radLat1) *
|
||
Math.cos(radLat2) *
|
||
Math.pow(Math.sin(b / 2), 2)
|
||
));
|
||
|
||
const EARTH_RADIUS = 6378.137; // 地球半径（千米）
|
||
const distance = s * EARTH_RADIUS;
|
||
|
||
// 小于1公里显示米，大于等于1公里显示千米
|
||
if (distance < 1) {
|
||
return (distance * 1000).toFixed(0) + '米';
|
||
} else {
|
||
return distance.toFixed(2) + '公里';
|
||
}
|
||
},
|
||
|
||
wxGeocoder(address) {
|
||
return new Promise((resolve, reject) => {
|
||
// 需要先通过chooseLocation获取坐标（用户交互触发）
|
||
uni.chooseLocation({
|
||
success: (res) => {
|
||
resolve({
|
||
latitude: res.latitude,
|
||
longitude: res.longitude
|
||
});
|
||
},
|
||
fail: (err) => reject(err)
|
||
});
|
||
});
|
||
},
|
||
|
||
|
||
getSchoolAllClass() {
|
||
request({
|
||
url: '/app-api/dl-drive-school-course-small/list',
|
||
method: 'GET',
|
||
params: {
|
||
tenantId: this.tenantId,
|
||
},
|
||
tenantIdFlag: false
|
||
}).then(res => {
|
||
this.schoolAllClassList = res.data;
|
||
this.total = res.data.total;
|
||
})
|
||
},
|
||
|
||
getSchoolCoach() {
|
||
console.log('执行');
|
||
request({
|
||
url: '/app-api/dl-drive-school-coach-small/page',
|
||
method: 'GET',
|
||
params: {
|
||
tenantId: this.tenantId,
|
||
pageNo: 1,
|
||
pageSize: 100000
|
||
},
|
||
tenantIdFlag: false
|
||
}).then(res => {
|
||
// 对数据进行排序
|
||
const sortedList = res.data.records.sort((a, b) => b.seniority - a.seniority);
|
||
const coachId = auth.getCoachId()
|
||
const staffType = auth.getStaffType()
|
||
console.log(coachId, 'coachId');
|
||
if (coachId && staffType === '02') {
|
||
const coach = res.data.records.find(item => item.userId == coachId)
|
||
console.log(coach, 'coach');
|
||
if (coach) {
|
||
this.schoolCoachList.push(coach)
|
||
} else {
|
||
// 取排序后的前三条数据
|
||
this.schoolCoachList = sortedList.slice(0, 3);
|
||
this.total = res.data.total;
|
||
}
|
||
} else {
|
||
// 取排序后的前三条数据
|
||
this.schoolCoachList = sortedList.slice(0, 3);
|
||
this.total = res.data.total;
|
||
}
|
||
}).catch(e => {
|
||
console.log(e);
|
||
})
|
||
},
|
||
|
||
goClassList() {
|
||
uni.navigateTo({
|
||
url: '/newPages/courseList/index?tenantId=' + this.tenantId,
|
||
});
|
||
},
|
||
// 跳转到详情页
|
||
goToDetail(courseId) {
|
||
uni.navigateTo({
|
||
url: `/pagesA/courseDetail/index?courseId=${courseId}&tenantId=${this.tenantId}`,
|
||
});
|
||
},
|
||
|
||
// 请求位置权限
|
||
requestLocationPermission() {
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: '需要获取您的位置信息才能计算距离，是否前往设置开启权限？',
|
||
success: (res) => {
|
||
if (res.confirm) {
|
||
// 打开设置页面
|
||
uni.openSetting({
|
||
success: (res) => {
|
||
if (res.authSetting['scope.userLocation']) {
|
||
// 用户授权了位置权限，重新获取位置
|
||
this.getSchoolInfo();
|
||
}
|
||
}
|
||
});
|
||
}
|
||
}
|
||
});
|
||
},
|
||
|
||
// 初始化地图
|
||
/* initMap() {
|
||
// 假设驾校地址的经纬度已经获取或通过接口返回
|
||
if (this.schoolInfo.lat && this.schoolInfo.lgt) {
|
||
this.latitude = parseFloat(this.schoolInfo.lat);
|
||
this.longitude = parseFloat(this.schoolInfo.lgt);
|
||
|
||
this.markers = [{
|
||
id: 1,
|
||
latitude: this.latitude,
|
||
longitude: this.longitude,
|
||
title: this.schoolInfo.corpName,
|
||
iconPath: '/static/location.png', // 自定义标记图标
|
||
width: 30,
|
||
height: 30
|
||
}];
|
||
}
|
||
}, */
|
||
|
||
|
||
|
||
|
||
// 点击地图事件
|
||
/* handleMapTap() {
|
||
// 打开地图APP或导航
|
||
uni.openLocation({
|
||
latitude: this.latitude,
|
||
longitude: this.longitude,
|
||
name: this.schoolInfo.corpName,
|
||
address: this.schoolInfo.address
|
||
});
|
||
}, */
|
||
|
||
}
|
||
};
|
||
</script>
|
||
<style lang='scss'>
|
||
@import '../common/common.scss';
|
||
@import './assets/style/index.rpx.scss';
|
||
|
||
.map_whole {
|
||
width: 100%;
|
||
height: 180rpx;
|
||
/* background-color: #000000; */
|
||
margin: 0 0 10rpx 0;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
|
||
.map_body {
|
||
width: 92%;
|
||
height: 95%;
|
||
/* background-color: #00aaff; */
|
||
border-radius: 16rpx;
|
||
}
|
||
|
||
.map_container {
|
||
position: relative;
|
||
width: 100%;
|
||
height: 300rpx;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.bg-img {
|
||
position: absolute;
|
||
width: 100%;
|
||
height: 100%;
|
||
top: 0;
|
||
left: 0;
|
||
z-index: 0;
|
||
}
|
||
|
||
.map-text-1 {
|
||
width: 70%;
|
||
position: absolute;
|
||
top: 30rpx;
|
||
left: 20rpx;
|
||
z-index: 1;
|
||
color: #000;
|
||
font-size: 26rpx;
|
||
right: 20rpx;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
display: -webkit-box;
|
||
-webkit-line-clamp: 2;
|
||
-webkit-box-orient: vertical;
|
||
word-break: break-word;
|
||
|
||
}
|
||
|
||
.map-text-2 {
|
||
margin-top: 30rpx;
|
||
position: absolute;
|
||
top: 80rpx;
|
||
left: 20rpx;
|
||
z-index: 1;
|
||
color: #5f5f5f;
|
||
font-size: 26rpx;
|
||
}
|
||
|
||
.get-distance-btn {
|
||
margin-top: 30rpx;
|
||
position: absolute;
|
||
top: 80rpx;
|
||
left: 20rpx;
|
||
z-index: 1;
|
||
color: #007AFF;
|
||
font-size: 26rpx;
|
||
padding: 5rpx 15rpx;
|
||
background-color: rgba(223, 235, 255, 1);
|
||
border-radius: 8rpx;
|
||
}
|
||
|
||
.get-distance-btn text {
|
||
color: #007AFF;
|
||
}
|
||
</style> |