112 lines
2.3 KiB
Vue
112 lines
2.3 KiB
Vue
<template>
|
||
<view class="kfc-container">
|
||
<!-- 顶部商品图片 -->
|
||
<view class="container-img">
|
||
<image
|
||
class="kfc-bucket-img"
|
||
:src="detailInfo.storeCover"
|
||
></image>
|
||
</view>
|
||
|
||
<!-- 店铺信息模块 -->
|
||
<view class="store-info">
|
||
<text class="store-name">{{ detailInfo.storeName }}</text>
|
||
<view class="business-hours">营业时间：<text>{{ detailInfo.openAt}}</text></view>
|
||
<view class="address">地址：<text>{{ detailInfo.storeAddress }}</text></view>
|
||
<view class="distance">距您{{ local }}米</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { get, post } from '@/utils/request';
|
||
import { IMAGE_BASE_URL, BASE_URL } from '@/utils/config';
|
||
import { formatTime, formatRelativeTime } from '@/utils/timeFormat';
|
||
export default {
|
||
data() {
|
||
return {
|
||
formatTime,
|
||
IMAGE_BASE_URL,
|
||
Id:null,
|
||
detailInfo: {},
|
||
local:null,
|
||
}
|
||
},
|
||
onLoad(options) {
|
||
if (options && options.Id && options.local) {
|
||
this.Id = options.Id;
|
||
this.local = options.local;
|
||
}
|
||
},
|
||
mounted(){
|
||
this.getAroundDetail();
|
||
},
|
||
methods: {
|
||
async getAroundDetail(){
|
||
try {
|
||
const res = await get(`/api/v1/apps/surrounding/${this.Id}`);
|
||
if (!res || !res.success) {
|
||
throw new Error('获取详情失败');
|
||
}
|
||
res.data.storeCover = IMAGE_BASE_URL + res.data.storeCover;
|
||
this.detailInfo = {...res.data};
|
||
} catch (err) {
|
||
console.error('获取详情失败:', err);
|
||
}
|
||
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
|
||
<style lang="scss" scoped>
|
||
// 定义变量，便于统一修改和维护
|
||
$primary-color: #999;
|
||
$title-size: 36rpx;
|
||
$text-size: 26rpx;
|
||
$spacing: 30rpx;
|
||
$border-radius: 10rpx;
|
||
|
||
.kfc-container {
|
||
padding: 10px;
|
||
|
||
.container-img{
|
||
max-width: 750rpx;
|
||
height: 500rpx;
|
||
// 图片样式
|
||
.kfc-bucket-img {
|
||
width: 100%;
|
||
height: 100%;
|
||
border-radius: $border-radius;
|
||
}
|
||
}
|
||
|
||
|
||
|
||
// 店铺信息样式
|
||
.store-info {
|
||
margin-top: $spacing;
|
||
|
||
.store-name {
|
||
font-size: $title-size;
|
||
font-weight: bold;
|
||
//margin-bottom: $spacing / 2;
|
||
display: block;
|
||
}
|
||
|
||
.business-hours,
|
||
.address,
|
||
.distance {
|
||
font-size: $text-size;
|
||
color: $primary-color;
|
||
margin-bottom: 5px;
|
||
display: block;
|
||
text{
|
||
color: #333;
|
||
// font-weight: 900;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style> |