<template>
|
<view class="page-wrapper">
|
<div class="bg-top"></div>
|
|
<!--<view class="text-2xl font-bold mb-4 text-center">🏨 酒店介绍</view> -->
|
|
<div class="content-wrapper">
|
<!-- 遍历推荐餐饮数据 -->
|
<view v-for="(item, index) in restaurants" :key="index"
|
class="flex rounded-lg overflow-hidden shadow-md mt-10 h-40 items-center">
|
<!-- 左侧图片，占30% -->
|
<image :src="item.imgPath" mode="aspectFill" class="w-1-3 h-9-10 rounded-lg object-cover mr-2 ml-2">
|
</image>
|
|
<!-- 右侧信息，占70% -->
|
<view class="flex-1 p-4 flex flex-col justify-between">
|
<div class="space-y-1">
|
<div class="text-lg font-bold text-gray-800 break-words">{{ item.name }}</div>
|
<div class="text-gray-600 break-words">位置：{{ item.location }}</div>
|
<div class="text-gray-600 break-words">类别：{{ item.type }}</div>
|
<div class="text-gray-600 break-words">距离：{{ item.distance }}</div>
|
</div>
|
</view>
|
</view>
|
</div>
|
<div class="bg-bottom"></div>
|
</view>
|
</template>
|
|
<script setup>
|
import {
|
ref,
|
onMounted
|
} from 'vue';
|
import { restaurants as rawRestaurants } from './foods';
|
|
const restaurants = ref(rawRestaurants);
|
|
|
function calculateDistance(lat1, lon1, lat2, lon2) {
|
const R = 6371000; // 地球半径，单位：米
|
const toRad = angle => angle * Math.PI / 180;
|
|
const dLat = toRad(lat2 - lat1);
|
const dLon = toRad(lon2 - lon1);
|
|
const radLat1 = toRad(lat1);
|
const radLat2 = toRad(lat2);
|
|
const a = Math.sin(dLat / 2) ** 2 +
|
Math.cos(radLat1) * Math.cos(radLat2) *
|
Math.sin(dLon / 2) ** 2;
|
|
const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
|
|
return Math.round(R * c); // 返回单位：米
|
}
|
|
// 页面加载后执行
|
onMounted(() => {
|
console.log('页面加载完成，执行初始化逻辑');
|
uni.getLocation({
|
type: 'gcj02',
|
isHighAccuracy: true,
|
success: (data) => {
|
console.log(data);
|
restaurants.value.forEach(item => {
|
if (item.longitude != null && item.latitude != null) {
|
const distance = calculateDistance(
|
data.latitude,
|
data.longitude,
|
item.latitude,
|
item.longitude
|
);
|
console.log(distance)
|
item.distance = distance.toLocaleString() +"米"; // 更新 distance 为字符串
|
}
|
});
|
},
|
})
|
});
|
</script>
|
|
<style>
|
.items-center {
|
align-items: center;
|
}
|
|
.h-9-10 {
|
height: 90%;
|
}
|
|
/* 自定义类，90% */
|
.rounded-lg {
|
border-radius: 0.5rem;
|
}
|
|
.mr-2 {
|
margin-right: 0.5rem;
|
}
|
|
.ml-2 {
|
margin-left: 0.5rem
|
}
|
|
.mt-10 {
|
margin-top: 10rpx;
|
}
|
|
.h-40 {
|
height: 130px;
|
}
|
|
/* 外层容器 */
|
.p-4 {
|
padding: 1rem;
|
}
|
|
.bg-gray-100 {
|
background-color: #f3f4f6;
|
}
|
|
.min-h-screen {
|
min-height: 100vh;
|
}
|
|
.space-y-4 {
|
margin-top: 1rem;
|
}
|
|
/* 卡片 */
|
.flex {
|
display: flex;
|
}
|
|
.bg-white {
|
background-color: #ffffff;
|
}
|
|
.rounded-lg {
|
border-radius: 0.5rem;
|
}
|
|
.overflow-hidden {
|
overflow: hidden;
|
}
|
|
.shadow-md {
|
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
}
|
|
/* 左侧图片 */
|
.w-1-3 {
|
width: 30%;
|
}
|
|
.h-full {
|
height: 100%;
|
}
|
|
.object-cover {
|
object-fit: cover;
|
}
|
|
/* 右侧内容 */
|
.flex-1 {
|
flex: 1 1 0%;
|
}
|
|
.p-4 {
|
padding: 1rem;
|
}
|
|
.flex-col {
|
display: flex;
|
flex-direction: column;
|
}
|
|
.justify-between {
|
justify-content: space-between;
|
}
|
|
/* 文字 */
|
.space-y-1 {
|
margin-top: 0.25rem;
|
}
|
|
.text-lg {
|
font-size: 1.125rem;
|
line-height: 1.75rem;
|
}
|
|
.font-bold {
|
font-weight: 700;
|
}
|
|
.text-gray-800 {
|
color: #1f2937;
|
}
|
|
.text-gray-600 {
|
color: #4b5563;
|
}
|
|
.break-words {
|
word-break: break-word;
|
white-space: normal;
|
}
|
.page-wrapper {
|
position: relative;
|
min-height: 100vh; /* 确保小内容时填满视口 */
|
overflow: hidden;
|
}
|
|
/* 顶部背景 */
|
.bg-top {
|
position: absolute;
|
top: 0;
|
left: 0;
|
width: 100%;
|
height: 500rpx; /* 可用固定像素或图片高度 */
|
background: url('https://farm.evcc.top/Uploads/yuanboyuan/background/bg_top.jpg') no-repeat top center;
|
background-size: cover;
|
z-index: 0;
|
}
|
|
/* 底部背景 */
|
.bg-bottom {
|
position: absolute;
|
bottom: 0;
|
left: 0;
|
width: 100%;
|
height: 500rpx; /* 可用固定像素或图片高度 */
|
background: url('https://farm.evcc.top/Uploads/yuanboyuan/background/bg_bottom.jpg') no-repeat bottom center;
|
background-size: cover;
|
z-index: 0;
|
}
|
|
/* 内容层 */
|
.content-wrapper {
|
position: relative;
|
z-index: 1;
|
padding: 2rem 1rem;
|
}
|
</style>
|
