修改样式,修复bug
This commit is contained in:
@@ -3,7 +3,7 @@ import Search from "../tabbar-home/components/search.vue";
|
||||
import { useConfigStore, useUserStore } from "@/store";
|
||||
import BrowseSkeleton from "./components/browse-skeleton.vue";
|
||||
import {
|
||||
appMerchantDishNearbyListPost,
|
||||
appMerchantNearbyListPost,
|
||||
appSearchSearchRecipePost,
|
||||
} from "@/service";
|
||||
import {thumbnailImg} from "@/utils/utils";
|
||||
@@ -28,8 +28,7 @@ async function initData() {
|
||||
loading.value = true;
|
||||
}
|
||||
getRecipeData()
|
||||
// 获取菜品数据
|
||||
appMerchantDishNearbyList()
|
||||
getNearbyStoreList()
|
||||
}
|
||||
|
||||
// 获取菜谱数据
|
||||
@@ -56,38 +55,44 @@ function navigateToRecipeList() {
|
||||
navigateTo('/pages-user/pages/recipe/list')
|
||||
}
|
||||
|
||||
// 获取附近的菜品
|
||||
const dishData = ref<any[]>([]);
|
||||
function appMerchantDishNearbyList() {
|
||||
appMerchantDishNearbyListPost({
|
||||
params: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
},
|
||||
// 获取附近店铺
|
||||
const nearbyStoreList = ref<any[]>([]);
|
||||
const nearbyStoreLoaded = ref(false);
|
||||
function getNearbyStoreList() {
|
||||
nearbyStoreLoaded.value = false;
|
||||
appMerchantNearbyListPost({
|
||||
body: {
|
||||
lat: String(userStore.userLocation.latitude ?? ''),
|
||||
lng: String(userStore.userLocation.longitude ?? ''),
|
||||
}
|
||||
}).then(res=> {
|
||||
console.log('菜品数据', res)
|
||||
dishData.value = res.rows;
|
||||
lat: userStore.userLocation.latitude,
|
||||
lng: userStore.userLocation.longitude,
|
||||
},
|
||||
})
|
||||
}
|
||||
function handleClickDish(item: any) {
|
||||
navigateTo(`/pages-store/pages/store/index?id=${item.merchantId}`)
|
||||
.then((res) => {
|
||||
console.log("附近店铺", res);
|
||||
nearbyStoreList.value = res.data || [];
|
||||
})
|
||||
.catch(() => {
|
||||
nearbyStoreList.value = [];
|
||||
})
|
||||
.finally(() => {
|
||||
nearbyStoreLoaded.value = true;
|
||||
});
|
||||
}
|
||||
|
||||
function getMerchantName(item: any) {
|
||||
return item?.merchantVo?.merchantName || item?.merchantName||item?.dishName || '--'
|
||||
function handleClickStore(item: any) {
|
||||
navigateTo(`/pages-store/pages/store/index?id=${item.id}`);
|
||||
}
|
||||
|
||||
function getMerchantLogo(item: any) {
|
||||
return item?.merchantVo?.logo || item?.logo || item?.dishImage?.split?.(',')?.[0] || item?.dishImage || ''
|
||||
function getStoreName(item: any) {
|
||||
return item?.merchantName || "--";
|
||||
}
|
||||
|
||||
function getMerchantRate(item: any) {
|
||||
const rating = Number(item?.merchantVo?.rating ?? item?.rating ?? 0)
|
||||
return Number.isFinite(rating) && rating > 0 ? rating.toFixed(1) : '5.0'
|
||||
function getStoreLogo(item: any) {
|
||||
return item?.logo || "";
|
||||
}
|
||||
|
||||
function getStoreRate(item: any) {
|
||||
const rating = Number(item?.rating ?? 0);
|
||||
return Number.isFinite(rating) && rating > 0 ? rating.toFixed(1) : "5.0";
|
||||
}
|
||||
|
||||
function getPreviewRecipeList() {
|
||||
@@ -161,17 +166,28 @@ defineExpose({
|
||||
</view>
|
||||
|
||||
<view class="section-title mt-54rpx">{{ t("pages.browse.titleCuisine") }}</view>
|
||||
<scroll-view scroll-x class="store-scroll mt-28rpx pb-40rpx" :show-scrollbar="false" :enable-flex="true">
|
||||
<scroll-view
|
||||
v-if="nearbyStoreList.length > 0"
|
||||
scroll-x
|
||||
class="store-scroll mt-28rpx pb-40rpx"
|
||||
:show-scrollbar="false"
|
||||
:enable-flex="true"
|
||||
>
|
||||
<view class="store-track">
|
||||
<view v-for="item in dishData" :key="item.id" @click="handleClickDish(item)" class="store-card">
|
||||
<view
|
||||
v-for="item in nearbyStoreList"
|
||||
:key="item.id"
|
||||
@click="handleClickStore(item)"
|
||||
class="store-card"
|
||||
>
|
||||
<image
|
||||
:src="thumbnailImg(getMerchantLogo(item))"
|
||||
:src="thumbnailImg(getStoreLogo(item))"
|
||||
class="store-card__cover"
|
||||
mode="aspectFill"
|
||||
/>
|
||||
<view class="store-card__right">
|
||||
<view class="store-card__name line-clamp-2">{{ getMerchantName(item) }}</view>
|
||||
<view class="store-card__rating">★★★★★ {{ getMerchantRate(item) }}</view>
|
||||
<view class="store-card__name line-clamp-2">{{ getStoreName(item) }}</view>
|
||||
<view class="store-card__rating">★★★★★ {{ getStoreRate(item) }}</view>
|
||||
<view class="store-card__brand">{{ t("pages.browse.brandTag") }}</view>
|
||||
<view class="store-card__arrow center">
|
||||
<i class="i-carbon:chevron-right text-30rpx text-white"></i>
|
||||
@@ -180,6 +196,15 @@ defineExpose({
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
<view
|
||||
v-else-if="nearbyStoreLoaded && !loading"
|
||||
class="store-empty mt-28rpx pb-40rpx"
|
||||
>
|
||||
<view class="store-empty__icon-wrap center">
|
||||
<i class="i-carbon:location-off store-empty__icon"></i>
|
||||
</view>
|
||||
<text class="store-empty__text">{{ t("pages.browse.nearbyEmpty") }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
@@ -335,4 +360,35 @@ defineExpose({
|
||||
border-radius: 50%;
|
||||
background: #111;
|
||||
}
|
||||
|
||||
.store-empty {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 220rpx;
|
||||
padding: 48rpx 32rpx;
|
||||
border-radius: 20rpx;
|
||||
background: #f7f7f7;
|
||||
}
|
||||
|
||||
.store-empty__icon-wrap {
|
||||
width: 96rpx;
|
||||
height: 96rpx;
|
||||
border-radius: 50%;
|
||||
background: #ececec;
|
||||
}
|
||||
|
||||
.store-empty__icon {
|
||||
font-size: 44rpx;
|
||||
color: #b0b0b0;
|
||||
}
|
||||
|
||||
.store-empty__text {
|
||||
margin-top: 24rpx;
|
||||
font-size: 28rpx;
|
||||
line-height: 40rpx;
|
||||
color: #8a8a8a;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user