周边服务修改
This commit is contained in:
qiuyuan
parent
7a3a2d50da
commit
e459fd740a
@ -1,19 +1,123 @@
|
||||
<template>
|
||||
<view class="kfc-container">
|
||||
<!-- 顶部商品图片 -->
|
||||
<view class="container-img">
|
||||
<view class="container">
|
||||
<!-- 商品图片（带轻微圆角和阴影） -->
|
||||
<view class="cover-container">
|
||||
<image
|
||||
class="kfc-bucket-img"
|
||||
class="store-cover"
|
||||
:src="detailInfo.storeCover"
|
||||
mode="aspectFill"
|
||||
></image>
|
||||
<view class="cover-overlay"></view>
|
||||
</view>
|
||||
|
||||
<!-- 店铺信息模块 -->
|
||||
<view class="store-info">
|
||||
<!-- 店铺信息卡片 -->
|
||||
<view class="store-card">
|
||||
<view class="store-header">
|
||||
<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 class="price-distance-row">
|
||||
<view class="price-tag" v-if="detailInfo.price !== undefined">
|
||||
{{ detailInfo.price > 0 ? '¥' + detailInfo.price : '免费' }}
|
||||
</view>
|
||||
<view class="distance-badge">
|
||||
<u-icon name="map" color="#fff" size="24"></u-icon>
|
||||
<text>{{ formatDistance(local) }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 标签展示 -->
|
||||
<view class="tags-container" v-if="detailInfo.labels && detailInfo.labels.length">
|
||||
<view class="tag" v-for="(tag, index) in detailInfo.labels" :key="index">
|
||||
<u-icon name="tags" size="20" color="#8dbafc" style="margin-right: 6rpx;"></u-icon>
|
||||
{{ tag }}
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="divider dotted"></view>
|
||||
|
||||
<view class="info-grid">
|
||||
<view class="info-item">
|
||||
<u-icon name="map" color="#8dbafc" size="36"></u-icon>
|
||||
<view class="info-content">
|
||||
<text class="info-label">详细地址</text>
|
||||
<text class="info-value">{{ detailInfo.storeAddress }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="info-item" v-if="detailInfo.openAt">
|
||||
<u-icon name="clock" color="#8dbafc" size="32"></u-icon>
|
||||
<view class="info-content">
|
||||
<text class="info-label">开放时间</text>
|
||||
<text class="info-value">{{ detailInfo.openAt }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="info-item" v-if="detailInfo.concatPhone">
|
||||
<u-icon name="phone" color="#8dbafc" size="32"></u-icon>
|
||||
<view class="info-content">
|
||||
<text class="info-label">联系电话</text>
|
||||
<text class="info-value">{{ detailInfo.concatPhone }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="info-item" v-if="detailInfo.content">
|
||||
<u-icon name="info-circle" color="#8dbafc" size="36"></u-icon>
|
||||
<view class="info-content">
|
||||
<text class="info-label">详情介绍</text>
|
||||
<text class="info-value">{{ detailInfo.content }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="info-item" v-if="detailInfo.remark">
|
||||
<u-icon name="chat-fill" color="#8dbafc" size="36"></u-icon>
|
||||
<view class="info-content">
|
||||
<text class="info-label">备注信息</text>
|
||||
<text class="info-value">{{ detailInfo.remark }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="info-item" v-if="detailInfo.link">
|
||||
<u-icon name="link" color="#8dbafc" size="36"></u-icon>
|
||||
<view class="info-content">
|
||||
<text class="info-label">相关链接</text>
|
||||
<text class="info-value">{{ detailInfo.link }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="divider dotted"></view>
|
||||
|
||||
<!-- 详情图片部分 -->
|
||||
<view class="detail-section" v-if="detailInfo.imgs && detailInfo.imgs.length">
|
||||
<text class="section-title">
|
||||
<u-icon name="photo-fill" color="#8dbafc" size="32" style="margin-right: 12rpx;"></u-icon>
|
||||
环境展示
|
||||
</text>
|
||||
<view class="image-grid">
|
||||
<image
|
||||
class="detail-image"
|
||||
v-for="(img, index) in detailInfo.imgs"
|
||||
:key="index"
|
||||
:src="IMAGE_BASE_URL + img"
|
||||
mode="aspectFill"
|
||||
@click="previewImage(index)"
|
||||
lazy-load
|
||||
></image>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 地图导航按钮 -->
|
||||
<view class="action-buttons">
|
||||
<button class="nav-button" @click="openMap">
|
||||
<u-icon name="map-fill" color="#fff" size="28"></u-icon>
|
||||
<text>导航前往</text>
|
||||
</button>
|
||||
<button class="share-button" @click="handleShare">
|
||||
<u-icon name="share-square" color="#8dbafc" size="28"></u-icon>
|
||||
<text>分享</text>
|
||||
</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
@ -22,14 +126,65 @@
|
||||
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,
|
||||
Id: null,
|
||||
defaultCover: '/static/images/default-store-cover.png',
|
||||
detailInfo: {
|
||||
storeName: '',
|
||||
storeCover: '',
|
||||
storeAddress: '',
|
||||
openAt: '',
|
||||
content: '',
|
||||
labels: [],
|
||||
remark: '',
|
||||
detailImages: [],
|
||||
id: '',
|
||||
createdAt: '',
|
||||
updatedAt: '',
|
||||
deletedAt: 0,
|
||||
createdId: '',
|
||||
deletedId: '',
|
||||
typeId: '',
|
||||
longitude: '',
|
||||
latitude: '',
|
||||
price: 0,
|
||||
sequence: 0,
|
||||
link: '',
|
||||
status: 1
|
||||
},
|
||||
local: null,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
statusText() {
|
||||
const statusMap = {
|
||||
1: '营业中',
|
||||
2: '已关闭',
|
||||
3: '即将开业',
|
||||
0: '未知状态'
|
||||
};
|
||||
return statusMap[this.detailInfo.status] || `状态: ${this.detailInfo.status}`;
|
||||
},
|
||||
statusClass() {
|
||||
const statusMap = {
|
||||
1: 'status-open',
|
||||
2: 'status-closed',
|
||||
3: 'status-soon'
|
||||
};
|
||||
return statusMap[this.detailInfo.status] || 'status-default';
|
||||
},
|
||||
statusIcon() {
|
||||
const iconMap = {
|
||||
1: 'home-fill',
|
||||
2: 'close-circle-fill',
|
||||
3: 'clock-fill'
|
||||
};
|
||||
return iconMap[this.detailInfo.status] || 'question-circle-fill';
|
||||
}
|
||||
},
|
||||
onLoad(options) {
|
||||
@ -38,74 +193,349 @@ export default {
|
||||
this.local = options.local;
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
mounted() {
|
||||
this.getAroundDetail();
|
||||
},
|
||||
methods: {
|
||||
async getAroundDetail(){
|
||||
formatDistance(distance) {
|
||||
if (!distance) return '未知距离';
|
||||
if (distance < 1000) {
|
||||
return `${distance}米`;
|
||||
} else {
|
||||
return `${(distance / 1000).toFixed(1)}公里`;
|
||||
}
|
||||
},
|
||||
|
||||
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);
|
||||
|
||||
if (res.data.storeCover) {
|
||||
res.data.storeCover = res.data.storeCover.startsWith('http') ? res.data.storeCover : IMAGE_BASE_URL + res.data.storeCover;
|
||||
}
|
||||
|
||||
this.detailInfo = {...this.detailInfo, ...res.data};
|
||||
} catch (err) {
|
||||
console.error('获取详情失败:', err);
|
||||
uni.showToast({
|
||||
title: '获取详情失败',
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
openMap() {
|
||||
const { latitude, longitude, storeName, storeAddress } = this.detailInfo;
|
||||
if (latitude && longitude) {
|
||||
uni.openLocation({
|
||||
latitude: Number(latitude),
|
||||
longitude: Number(longitude),
|
||||
name: storeName,
|
||||
address: storeAddress,
|
||||
success: () => {
|
||||
console.log('打开地图成功');
|
||||
},
|
||||
fail: (err) => {
|
||||
console.error('打开地图失败:', err);
|
||||
uni.showToast({
|
||||
title: '打开地图失败',
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
});
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: '暂无位置信息',
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
previewImage(index) {
|
||||
if (!this.detailInfo.detailImages || !this.detailInfo.detailImages.length) return;
|
||||
|
||||
uni.previewImage({
|
||||
current: index,
|
||||
urls: this.detailInfo.detailImages.map(img => img.startsWith('http') ? img : IMAGE_BASE_URL + img)
|
||||
});
|
||||
},
|
||||
|
||||
handleShare() {
|
||||
uni.showActionSheet({
|
||||
itemList: ['分享到微信', '分享到朋友圈', '复制链接'],
|
||||
success: (res) => {
|
||||
uni.showToast({
|
||||
title: `已选择: ${res.tapIndex === 0 ? '微信' : res.tapIndex === 1 ? '朋友圈' : '复制链接'}`,
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="scss" scoped>
|
||||
// 定义变量，便于统一修改和维护
|
||||
$primary-color: #999;
|
||||
$title-size: 36rpx;
|
||||
$text-size: 26rpx;
|
||||
$spacing: 30rpx;
|
||||
$border-radius: 10rpx;
|
||||
$primary-color: #8dbafc;
|
||||
$secondary-color: #00A699;
|
||||
$dark-color: #2D2D2D;
|
||||
$gray-color: #767676;
|
||||
$light-gray: #F7F7F7;
|
||||
$border-color: #EBEBEB;
|
||||
$success-color: #52c41a;
|
||||
$warning-color: #faad14;
|
||||
$danger-color: #ff4d4f;
|
||||
|
||||
.kfc-container {
|
||||
padding: 10px;
|
||||
$border-radius: 24rpx;
|
||||
$spacing: 32rpx;
|
||||
$card-padding: 40rpx;
|
||||
$shadow-light: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
|
||||
$shadow-medium: 0 10rpx 30rpx rgba(0, 0, 0, 0.08);
|
||||
|
||||
.container-img{
|
||||
max-width: 750rpx;
|
||||
.container {
|
||||
background-color: $light-gray;
|
||||
min-height: 100vh;
|
||||
padding-bottom: 80rpx;
|
||||
|
||||
.cover-container {
|
||||
width: 100%;
|
||||
height: 500rpx;
|
||||
// 图片样式
|
||||
.kfc-bucket-img {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border-bottom-left-radius: $border-radius;
|
||||
border-bottom-right-radius: $border-radius;
|
||||
|
||||
.store-cover {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
transition: transform 0.5s ease;
|
||||
}
|
||||
|
||||
.store-cover:active {
|
||||
transform: scale(1.02);
|
||||
}
|
||||
|
||||
.cover-overlay {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 160rpx;
|
||||
background: linear-gradient(transparent, rgba(0,0,0,0.6));
|
||||
}
|
||||
}
|
||||
|
||||
.store-card {
|
||||
background: #FFFFFF;
|
||||
border-radius: $border-radius;
|
||||
}
|
||||
margin: -60rpx $spacing 0;
|
||||
padding: $card-padding;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
box-shadow: $shadow-medium;
|
||||
transition: transform 0.3s, box-shadow 0.3s;
|
||||
|
||||
&:active {
|
||||
transform: translateY(2rpx);
|
||||
box-shadow: $shadow-light;
|
||||
}
|
||||
|
||||
|
||||
|
||||
// 店铺信息样式
|
||||
.store-info {
|
||||
margin-top: $spacing;
|
||||
.store-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 20rpx;
|
||||
|
||||
.store-name {
|
||||
font-size: $title-size;
|
||||
font-weight: bold;
|
||||
//margin-bottom: $spacing / 2;
|
||||
display: block;
|
||||
font-size: 44rpx;
|
||||
font-weight: 700;
|
||||
color: $dark-color;
|
||||
line-height: 1.3;
|
||||
word-break: break-word;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.business-hours,
|
||||
.address,
|
||||
.distance {
|
||||
font-size: $text-size;
|
||||
color: $primary-color;
|
||||
margin-bottom: 5px;
|
||||
display: block;
|
||||
text{
|
||||
color: #333;
|
||||
// font-weight: 900;
|
||||
|
||||
}
|
||||
.price-distance-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 30rpx;
|
||||
|
||||
|
||||
.price-tag {
|
||||
background: #f5f8ff;
|
||||
color: $primary-color;
|
||||
padding: 4rpx 16rpx;
|
||||
border-radius: 20rpx;
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
margin-right: 12rpx;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.distance-badge {
|
||||
background: $primary-color;
|
||||
border-radius: 40rpx;
|
||||
padding: 8rpx 20rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: white;
|
||||
font-size: 26rpx;
|
||||
white-space: nowrap;
|
||||
|
||||
.u-icon {
|
||||
margin-right: 8rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tags-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 24rpx;
|
||||
gap: 12rpx;
|
||||
|
||||
.tag {
|
||||
background-color: #f0f7ff;
|
||||
color: $primary-color;
|
||||
padding: 8rpx 20rpx;
|
||||
border-radius: 30rpx;
|
||||
font-size: 26rpx;
|
||||
border: 1rpx solid rgba($primary-color, 0.3);
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.divider {
|
||||
height: 2rpx;
|
||||
margin: $spacing 0;
|
||||
|
||||
&.dotted {
|
||||
background: repeating-linear-gradient(to right, $border-color, $border-color 4rpx, transparent 4rpx, transparent 8rpx);
|
||||
}
|
||||
}
|
||||
|
||||
.info-grid {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.info-item {
|
||||
display: flex;
|
||||
padding: 24rpx 0;
|
||||
align-items: flex-start;
|
||||
border-bottom: 2rpx dashed $border-color;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.u-icon {
|
||||
margin-right: 20rpx;
|
||||
margin-top: 4rpx;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.info-content {
|
||||
flex: 1;
|
||||
|
||||
.info-label {
|
||||
display: block;
|
||||
font-size: 26rpx;
|
||||
color: $gray-color;
|
||||
margin-bottom: 8rpx;
|
||||
padding-left: 10rpx;
|
||||
}
|
||||
|
||||
.info-value {
|
||||
display: block;
|
||||
font-size: 28rpx;
|
||||
color: $dark-color;
|
||||
line-height: 1.6;
|
||||
word-break: break-all;
|
||||
padding-left: 10rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.action-buttons {
|
||||
margin-top: 40rpx;
|
||||
display: flex;
|
||||
gap: 20rpx;
|
||||
|
||||
button {
|
||||
flex: 1;
|
||||
height: 80rpx;
|
||||
line-height: 80rpx;
|
||||
border-radius: 50rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 30rpx;
|
||||
border: none;
|
||||
transition: all 0.3s;
|
||||
font-weight: 500;
|
||||
|
||||
.u-icon {
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: scale(0.98);
|
||||
opacity: 0.9;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-button {
|
||||
background: $primary-color;
|
||||
color: white;
|
||||
box-shadow: 0 6rpx 16rpx rgba(141, 186, 252, 0.4);
|
||||
}
|
||||
|
||||
.share-button {
|
||||
background: #f0f7ff;
|
||||
color: $primary-color;
|
||||
border: 2rpx solid $primary-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.detail-section {
|
||||
margin-top: $spacing;
|
||||
|
||||
.section-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
color: $dark-color;
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
|
||||
.image-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 20rpx;
|
||||
margin-bottom: $spacing;
|
||||
}
|
||||
|
||||
.detail-image {
|
||||
width: 100%;
|
||||
height: 280rpx;
|
||||
border-radius: 16rpx;
|
||||
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
|
||||
transition: transform 0.3s, box-shadow 0.3s;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.detail-image:active {
|
||||
transform: scale(0.98);
|
||||
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,25 +1,27 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<view class="nearby-page">
|
||||
|
||||
<!-- 附近美食模块 -->
|
||||
<view class="section shadow" v-for="(item,index) in aroundList" :key="index">
|
||||
<view class="section-header" @click="goPage('aroundList')">
|
||||
<view class="section-title">{{item.label}}</view>
|
||||
<u-icon name="arrow-right" size="20" color="#999"></u-icon>
|
||||
</view>
|
||||
<view class="goods-list">
|
||||
<view class="goods-item" v-for="i in item.serviceList" @click="goDetail(i.id,i.distance)">
|
||||
<image class="goods-img" :src="`${IMAGE_BASE_URL}`+i.storeCover"></image>
|
||||
<!-- 优化：使用网格布局实现更稳定的四列 -->
|
||||
<view class="goods-grid">
|
||||
<view class="goods-item" v-for="i in item.serviceList" :key="i.id"
|
||||
@click="goDetail(i.id,i.distance)">
|
||||
<image class="goods-img" :src="`${IMAGE_BASE_URL}`+i.storeCover" mode="aspectFill"></image>
|
||||
<view class="goods-info">
|
||||
<text class="goods-name">{{ i.storeName }}</text>
|
||||
<view class="goods-distance">
|
||||
<u-icon name="map" size="18" color="#c6d8fa"></u-icon>
|
||||
{{ i.distance + '米'}}
|
||||
<text>{{ formatDistance(i.distance) }} </text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<Footer></Footer>
|
||||
</view>
|
||||
@ -27,78 +29,59 @@
|
||||
|
||||
<script>
|
||||
import Footer from '@/components/footer_common.vue';
|
||||
import {
|
||||
get,
|
||||
post
|
||||
} from '@/utils/request';
|
||||
import {
|
||||
IMAGE_BASE_URL,
|
||||
BASE_URL
|
||||
} from '@/utils/config';
|
||||
import {
|
||||
formatTime,
|
||||
formatRelativeTime
|
||||
} from '@/utils/timeFormat';
|
||||
import { get, post } from '@/utils/request';
|
||||
import { IMAGE_BASE_URL, BASE_URL } from '@/utils/config';
|
||||
import { formatTime, formatRelativeTime } from '@/utils/timeFormat';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Footer
|
||||
},
|
||||
components: { Footer },
|
||||
data() {
|
||||
return {
|
||||
IMAGE_BASE_URL,
|
||||
aroundList:[],
|
||||
aroundList:[]
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
|
||||
},
|
||||
onLoad() {},
|
||||
mounted() {
|
||||
this.surroundingList();
|
||||
},
|
||||
methods: {
|
||||
// 跳转不同页面
|
||||
goDetail(id,local) {
|
||||
goDetail(id, local) {
|
||||
uni.navigateTo({
|
||||
url: `/pages/aroundDetail/index?Id=${id}&local=${local}`,
|
||||
});
|
||||
},
|
||||
formatDistance(distance) {
|
||||
if (!distance) return '未知距离';
|
||||
if (distance < 1000) {
|
||||
return `${distance}米`;
|
||||
} else {
|
||||
return `${(distance / 1000).toFixed(1)}公里`;
|
||||
}
|
||||
},
|
||||
async surroundingList() {
|
||||
const position = await this.getCurrentPosition();
|
||||
let params = {
|
||||
current: 1,
|
||||
pageSize: 10,
|
||||
longitude: position.longitude,
|
||||
latitude: position.latitude,
|
||||
|
||||
// statusArray:"2,3,4",
|
||||
latitude: position.latitude
|
||||
};
|
||||
try {
|
||||
const res = await get('/api/v1/apps/surrounding-type', params);
|
||||
if (!res || !res.success) {
|
||||
throw new Error('获取周边服务失败');
|
||||
}
|
||||
console.log("---res", res)
|
||||
this.aroundList = [...res.data];
|
||||
// res.data.forEach(item => {
|
||||
// let imgUrl = item.cover;
|
||||
// if (!imgUrl.startsWith('http') && !imgUrl.startsWith('https')) {
|
||||
// item.cover = IMAGE_BASE_URL + imgUrl;
|
||||
// }
|
||||
// })
|
||||
// this.activityList = [...res.data];
|
||||
|
||||
} catch (err) {
|
||||
console.error('获取周边服务失败:', err);
|
||||
}
|
||||
|
||||
},
|
||||
getCurrentPosition() {
|
||||
return new Promise((resolve, reject) => {
|
||||
uni.getLocation({
|
||||
type: 'wgs84',
|
||||
success: (res) => {
|
||||
console.log('当前位置:', res);
|
||||
resolve({
|
||||
longitude: res.longitude,
|
||||
latitude: res.latitude
|
||||
@ -123,97 +106,127 @@
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
min-height: 100vh;
|
||||
background: #f8faff;
|
||||
padding-bottom: 400rpx;
|
||||
padding-bottom: 120rpx;
|
||||
}
|
||||
|
||||
.nearby-page {
|
||||
padding: 20rpx;
|
||||
padding: 20rpx 24rpx;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
// 优化后的section样式
|
||||
.section {
|
||||
margin: 30rpx 0; // 增大上下间距
|
||||
padding: 20rpx;
|
||||
border-radius: 16rpx; // 圆角更圆润
|
||||
margin: 32rpx 0;
|
||||
padding: 24rpx;
|
||||
border-radius: 20rpx;
|
||||
background-color: #fff;
|
||||
transition: transform 0.3s ease; // 添加过渡效果
|
||||
transition: all 0.3s ease;
|
||||
box-shadow: 0 4rpx 24rpx rgba(0, 0, 0, 0.06);
|
||||
|
||||
// 鼠标悬停效果
|
||||
&:hover {
|
||||
transform: translateY(-5rpx);
|
||||
&:active {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
}
|
||||
|
||||
// 添加阴影效果
|
||||
.shadow {
|
||||
box-shadow: 0 8rpx 16rpx rgba(0, 0, 0, 0.08); // 更细腻的阴影
|
||||
}
|
||||
|
||||
.section-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 20rpx;
|
||||
margin-bottom: 24rpx;
|
||||
padding: 0 10rpx;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 34rpx;
|
||||
font-size: 36rpx;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
/* 修正后的边框样式 */
|
||||
border-left: 10rpx solid rgba(141, 186, 252, 0.55);
|
||||
padding-left: 16rpx;
|
||||
border-left: 8rpx solid #8dbafc;
|
||||
padding-left: 20rpx;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.goods-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
// justify-content:;
|
||||
/* 优化：使用grid布局实现更稳定的四列分布 */
|
||||
.goods-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr); /* 强制四列布局 */
|
||||
gap: 10rpx; /* 统一间距 */
|
||||
}
|
||||
|
||||
.goods-item {
|
||||
width: 23%;
|
||||
text-align: center;
|
||||
margin-bottom: 20rpx;
|
||||
border-radius: 16rpx;
|
||||
overflow: hidden;
|
||||
background: #fff;
|
||||
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
|
||||
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
||||
|
||||
&:active {
|
||||
transform: scale(0.96);
|
||||
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
.goods-img {
|
||||
width: 150rpx;
|
||||
height: 150rpx;
|
||||
border-radius: 12rpx;
|
||||
// margin-bottom: 10rpx;
|
||||
object-fit: cover; // 确保图片比例正确
|
||||
width: 100%;
|
||||
height: 160rpx; /* 优化图片高度比例 */
|
||||
border-radius: 12rpx 12rpx 0 0;
|
||||
display: block;
|
||||
object-fit: cover; /* 确保图片不变形 */
|
||||
}
|
||||
|
||||
.goods-info {
|
||||
padding: 16rpx;
|
||||
}
|
||||
|
||||
.goods-name {
|
||||
font-size: 24rpx;
|
||||
display: block;
|
||||
margin-bottom: 6rpx;
|
||||
color: #333;
|
||||
white-space: nowrap;
|
||||
font-weight: 500;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
text-align: left;
|
||||
line-height: 1.5;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
|
||||
// 新增样式：使图标和文字在同一行显示
|
||||
.goods-distance {
|
||||
font-size: 22rpx;
|
||||
color: #999;
|
||||
color: #666;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
text-align: right;
|
||||
|
||||
// 调整图标与文字之间的间距
|
||||
.u-icon {
|
||||
margin-right: 6rpx;
|
||||
font-size: 18rpx;
|
||||
margin-right: 4rpx;
|
||||
}
|
||||
}
|
||||
|
||||
/* 响应式优化：小屏幕自动调整为两列 */
|
||||
@media (max-width: 750rpx) { /* 适配常见手机屏幕 */
|
||||
.goods-grid {
|
||||
grid-template-columns: repeat(2, 1fr); /* 小屏幕两列 */
|
||||
}
|
||||
|
||||
.goods-img {
|
||||
height: 200rpx; /* 增加小屏幕图片高度 */
|
||||
}
|
||||
|
||||
.goods-name {
|
||||
font-size: 26rpx; /* 增大字体 */
|
||||
}
|
||||
}
|
||||
|
||||
/* 针对超小屏幕的额外适配 */
|
||||
@media (max-width: 375rpx) {
|
||||
.goods-grid {
|
||||
grid-template-columns: 1fr; /* 极小屏幕单列 */
|
||||
}
|
||||
|
||||
.goods-img {
|
||||
height: 240rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
x
Reference in New Issue
Block a user