pcwl_yancheng/cheflinkuser
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修复bug

Browse Source
This commit is contained in:
ISFP_T
2026-05-11 22:22:18 +08:00
parent 03bc46df29
commit 7d891c9f7b
22 changed files with 2198 additions and 181 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/home/components/tabbar-home/components/home-skeleton.vue
+82 -44
View File
@@ -1,20 +1,26 @@
<template>
<view class="home-skeleton">
<!-- 头部区域 -->
<!-- 顶部头部（与 home-top-header 对齐） -->
<view class="header-section">
<view class="app-title-skeleton skeleton-item"></view>
<view class="delivery-info-skeleton skeleton-item"></view>
<view class="header-left">
<view class="brand-row">
<view class="logo-skeleton skeleton-item"></view>
<view class="app-title-skeleton skeleton-item"></view>
</view>
<view class="delivery-info-skeleton skeleton-item"></view>
</view>
<view class="header-right">
<view class="location-pill-skeleton skeleton-item"></view>
<view class="cart-btn-skeleton skeleton-item"></view>
</view>
</view>
<!-- 位置和通知区域 -->
<view class="location-notification">
<view class="location-skeleton skeleton-item"></view>
<view class="notification-skeleton skeleton-item"></view>
</view>
<!-- 搜索栏 -->
<!-- 搜索栏 + 消息按钮 -->
<view class="search-section">
<view class="search-bar-skeleton skeleton-item"></view>
<view class="search-row">
<view class="search-bar-skeleton skeleton-item"></view>
<view class="message-btn-skeleton skeleton-item"></view>
</view>
</view>
<!-- 分类滚动区域 -->
@@ -107,59 +113,91 @@
}
.home-skeleton {
background-color: #fff;
background-color: #f2f2f2;
min-height: 100vh;
}
// 头部区域
.header-section {
padding: 18rpx 30rpx 0;
padding: 18rpx 24rpx 0;
display: flex;
align-items: center;
gap: 14rpx;
.app-title-skeleton {
width: 241rpx;
align-items: flex-start;
justify-content: space-between;
gap: 12rpx;
.header-left {
flex: 1;
min-width: 0;
}
.brand-row {
display: flex;
align-items: center;
gap: 14rpx;
}
.logo-skeleton {
width: 52rpx;
height: 52rpx;
border-radius: 50%;
flex-shrink: 0;
}
.app-title-skeleton {
width: 210rpx;
height: 36rpx;
border-radius: 8rpx;
}
.delivery-info-skeleton {
width: 266rpx;
height: 28rpx;
border-radius: 6rpx;
}
}
// 位置和通知区域
.location-notification {
padding: 22rpx 30rpx 0;
display: flex;
justify-content: space-between;
align-items: center;
.location-skeleton {
width: 329rpx;
margin-top: 12rpx;
width: 300rpx;
height: 30rpx;
border-radius: 6rpx;
border-radius: 8rpx;
}
.notification-skeleton {
width: 132rpx;
height: 60rpx;
border-radius: 30rpx;
.header-right {
display: flex;
align-items: center;
gap: 10rpx;
}
.location-pill-skeleton {
width: 200rpx;
height: 72rpx;
border-radius: 999rpx;
}
.cart-btn-skeleton {
width: 72rpx;
height: 72rpx;
border-radius: 50%;
}
}
// 搜索栏
// 搜索栏 + 消息按钮
.search-section {
padding: 32rpx 30rpx 0;
padding: 20rpx 24rpx 0;
.search-row {
display: flex;
align-items: center;
gap: 14rpx;
}
.search-bar-skeleton {
width: 690rpx;
flex: 1;
min-width: 0;
height: 88rpx;
border-radius: 44rpx;
}
.message-btn-skeleton {
width: 74rpx;
height: 74rpx;
border-radius: 50%;
flex-shrink: 0;
}
}
// 分类滚动区域
src/pages/home/components/tabbar-home/components/home-top-header.vue
+105
View File
@@ -0,0 +1,105 @@
<script setup lang="ts">
import { useI18n } from 'vue-i18n'
const { t } = useI18n()
const props = defineProps<{
appName: string
locationText: string
appointmentTimeShow?: string
cartBadgeTotal?: number
isLogin?: boolean
}>()
const emit = defineEmits<{
(e: 'clickAddress'): void
(e: 'clickLocation'): void
(e: 'clickCart'): void
}>()
</script>
<template>
<view class="home-top-header px-24rpx pt-12rpx pb-8rpx">
<view class="flex items-center justify-between gap-12rpx">
<view class="min-w-0 flex-1">
<view class="flex items-center gap-14rpx min-w-0">
<image src="@img/logo.png" class="w-52rpx h-52rpx shrink-0" style="border-radius: 50%;"></image>
<text class="text-32rpx lh-36rpx text-#1a1a1a font-bold tracking-tight shrink-0">{{ appName }}</text>
</view>
<view @click="emit('clickAddress')" class="home-delivery-row mt-10rpx flex items-center min-w-0 text-26rpx lh-32rpx text-#00A76D">
<text v-if="appointmentTimeShow">{{ t('pages.address.appTime') }}: {{ appointmentTimeShow }}</text>
<text v-else>{{ t('pages.address.reservation') }}</text>
<image src="@img/chef/119.png" class="w-22rpx h-22rpx ml-8rpx shrink-0"></image>
</view>
</view>
<view class="flex items-center gap-10rpx shrink-0">
<view class="home-loc-pill" @click="emit('clickLocation')">
<text class="home-loc-pill__text line-clamp-1">{{ locationText || t('pages.home.default-location') }}</text>
<image src="@img/chef/119.png" class="home-loc-pill__arrow w-20rpx h-20rpx shrink-0 op-50 mt-2rpx"></image>
</view>
<view class="home-cart-btn" @click="emit('clickCart')">
<view class="i-carbon:shopping-cart text-36rpx text-#14181b"></view>
<view v-if="isLogin && (cartBadgeTotal || 0) > 0" class="home-cart-badge">
{{ (cartBadgeTotal || 0) > 99 ? '99+' : cartBadgeTotal }}
</view>
</view>
</view>
</view>
</view>
</template>
<style scoped lang="scss">
.home-top-header {
background: #f2f2f2;
}
.home-loc-pill {
display: flex;
align-items: center;
gap: 8rpx;
max-width: 200rpx;
padding: 12rpx 18rpx;
background: #fff;
border-radius: 999rpx;
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
}
.home-loc-pill__text {
flex: 1;
min-width: 0;
font-size: 22rpx;
line-height: 28rpx;
font-weight: 500;
color: #333;
}
.home-cart-btn {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 72rpx;
height: 72rpx;
flex-shrink: 0;
background: #fff;
border-radius: 50%;
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.07);
}
.home-cart-badge {
position: absolute;
top: 4rpx;
right: 4rpx;
min-width: 28rpx;
height: 28rpx;
padding: 0 6rpx;
font-size: 18rpx;
line-height: 28rpx;
font-weight: 600;
color: #fff;
text-align: center;
background: #e23636;
border-radius: 999rpx;
}
</style>
src/pages/home/components/tabbar-home/components/msg-box.vue
+89 -26
View File
@@ -1,14 +1,10 @@
<script setup lang="ts">
import { ref } from 'vue'
import { useUserStore } from "@/store";
const props = withDefaults(
defineProps<{
/** 首页顶栏紧凑模式：更小图标与间距 */
compact?: boolean
}>(),
{ compact: false }
)
const emit = defineEmits(['toggleNotOpen']);
const userStore = useUserStore();
const expanded = ref(true)
const touchStartX = ref(0)
function navigateTo(url: string) {
if(userStore.checkLogin()) {
uni.navigateTo({
@@ -16,31 +12,98 @@ function navigateTo(url: string) {
});
}
}
function togglePanel() {
expanded.value = !expanded.value
}
function onFabClick() {
if (!expanded.value) {
expanded.value = true
return
}
navigateTo('/pages/ai/recommend/index')
}
function onHandleTouchStart(e: any) {
touchStartX.value = Number(e?.touches?.[0]?.clientX || 0)
}
function onHandleTouchEnd(e: any) {
const endX = Number(e?.changedTouches?.[0]?.clientX || 0)
const delta = endX - touchStartX.value
if (delta > 20) {
expanded.value = true
} else if (delta < -20) {
expanded.value = false
}
}
</script>
<template>
<view class="flex items-center" :class="compact ? 'gap-20rpx' : ''">
<view
@click="navigateTo('/pages-user/pages/message/index')"
:class="compact ? 'w-34rpx h-34rpx mr-0' : 'w-40rpx h-40rpx mr-42rpx'"
class="relative shrink-0"
>
<view
v-if="userStore.isLogin && userStore.unreadMessageCount > 0"
:class="compact ? 'h-26rpx top--10rpx right--10rpx text-20rpx px-8rpx' : 'w-32rpx h-32rpx top--16rpx right--16rpx text-24rpx line-height-32rpx'"
class="bg-#E23636 absolute z-2 rounded-50% text-#fff text-center font-500"
>{{ userStore.unreadMessageCount }}</view>
<image src="@img/chef/114.png" :class="compact ? 'w-34rpx h-34rpx' : 'w-40rpx h-40rpx'"></image>
<!-- 仅 AI 跳转做右侧球体悬浮 -->
<view
class="ai-floating"
:class="{ 'is-collapsed': !expanded }"
@touchstart.stop="onHandleTouchStart"
@touchend.stop="onHandleTouchEnd"
@touchcancel.stop="onHandleTouchEnd"
>
<view v-if="expanded" class="ai-close" @click.stop="expanded = false">×</view>
<view class="ai-fab" @click="onFabClick">
<image src="@img/chef/115.png" class="ai-icon"></image>
</view>
<image
@click="emit('toggleNotOpen')"
src="@img/chef/115.png"
:class="compact ? 'w-34rpx h-34rpx' : 'w-40rpx h-40rpx'"
class="shrink-0"
></image>
</view>
</template>
<style scoped lang="scss">
.ai-floating {
position: fixed;
right: 12rpx;
top: 83%;
z-index: 88;
display: block;
transform: translateY(-50%) translateX(0);
transition: transform 0.22s ease;
}
.ai-floating.is-collapsed {
transform: translateY(-50%) translateX(55rpx);
}
.ai-close {
position: absolute;
left: -18rpx;
top: -15rpx;
width: 34rpx;
height: 34rpx;
z-index: 2;
border-radius: 999rpx;
background: #ffffff;
border: 1rpx solid #e5e7eb;
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
display: flex;
align-items: center;
justify-content: center;
color: #7b8794;
font-size: 24rpx;
line-height: 1;
}
.ai-fab {
width: 92rpx;
height: 92rpx;
border-radius: 50%;
background: #e2e7eb;
box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.18);
display: flex;
align-items: center;
justify-content: center;
}
.ai-icon {
width: 44rpx;
height: 44rpx;
}
</style>
src/pages/home/components/tabbar-home/components/search.vue
+56 -8
View File
@@ -1,5 +1,7 @@
<script setup lang="ts">
const { t } = useI18n()
import { useUserStore } from '@/store'
const userStore = useUserStore()
const props = defineProps({
isAutoJump: {
@@ -20,17 +22,36 @@ function handleClickSearch() {
emit('clickSearch')
}
}
function goMessage() {
if (userStore.checkLogin()) {
uni.navigateTo({
url: '/pages-user/pages/message/index',
})
}
}
</script>
<template>
<view
@click="handleClickSearch"
class="home-search-bar flex items-center h-88rpx rounded-44rpx pl-36rpx pr-28rpx bg-white"
>
<image src="@img/chef/100222.png" class="w-28rpx h-28rpx shrink-0"></image>
<text class="home-search-placeholder text-28rpx ml-16rpx tracking-[.04em] font-500 truncate">{{
t('components.search.placeholder')
}}</text>
<view class="home-search-row flex items-center gap-14rpx">
<view
@click="handleClickSearch"
class="home-search-bar flex-1 min-w-0 flex items-center h-88rpx rounded-44rpx pl-36rpx pr-28rpx bg-white"
>
<image src="@img/chef/100222.png" class="w-28rpx h-28rpx shrink-0"></image>
<text class="home-search-placeholder text-28rpx ml-16rpx tracking-[.04em] font-500 truncate">{{
t('components.search.placeholder')
}}</text>
</view>
<view class="home-msg-btn" @click="goMessage">
<view
v-if="userStore.isLogin && userStore.unreadMessageCount > 0"
class="home-msg-badge"
>
{{ userStore.unreadMessageCount > 99 ? '99+' : userStore.unreadMessageCount }}
</view>
<image src="@img/chef/114.png" class="w-34rpx h-34rpx"></image>
</view>
</view>
</template>
@@ -41,4 +62,31 @@ function handleClickSearch() {
.home-search-placeholder {
color: #9a9a9a;
}
.home-msg-btn {
position: relative;
width: 74rpx;
height: 74rpx;
border-radius: 50%;
background: #fff;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4rpx 24rpx rgba(0, 0, 0, 0.06);
flex-shrink: 0;
}
.home-msg-badge {
position: absolute;
right: -6rpx;
top: -6rpx;
min-width: 26rpx;
height: 26rpx;
padding: 0 5rpx;
border-radius: 999rpx;
background: #E23636;
color: #fff;
font-size: 16rpx;
line-height: 26rpx;
text-align: center;
font-weight: 500;
}
</style>
src/pages/home/components/tabbar-home/tabbar-home.vue
+14 -85
View File
@@ -6,6 +6,7 @@ import Config from '@/config/index'
import { debounce } from 'throttle-debounce'
import MsgBox from "@/pages/home/components/tabbar-home/components/msg-box.vue";
import Search from "@/pages/home/components/tabbar-home/components/search.vue";
import HomeTopHeader from "@/pages/home/components/tabbar-home/components/home-top-header.vue";
import ClassBullet from "./components/class-bullet.vue";
import TabsType from "./components/tabs-type.vue";
import FeaturedOn from "./components/featured-on/index.vue";
@@ -309,36 +310,16 @@ const debouncedEmit = debounce(1300, (isCollected: boolean, id: string, type: Co
<z-paging @onRefresh="onRefresh" ref="paging" v-model="dataList" :auto="false" @query="queryList" @scroll="onPageScroll" :refresher-enabled="true" :auto-show-back-to-top="false">
<template #top>
<status-bar />
<!-- 设计稿：品牌行 + 右侧地址胶囊、消息/客服、购物车 -->
<view class="home-top-header px-24rpx pt-12rpx pb-8rpx">
<view class="flex items-center justify-between gap-12rpx">
<view class="flex items-center gap-14rpx min-w-0 flex-1">
<image src="@img/logo.png" class="w-52rpx h-52rpx shrink-0" style="border-radius: 50%;"></image>
<text class="text-32rpx lh-36rpx text-#1a1a1a font-bold tracking-tight shrink-0">{{ Config.appName }}</text>
</view>
<view class="flex items-center gap-10rpx shrink-0">
<view class="home-loc-pill" @click="navigateTo('/pages-user/pages/search-address/index')">
<!-- <image src="@img/chef/101.png" class="home-loc-pill__pin w-22rpx h-22rpx shrink-0"></image> -->
<text class="home-loc-pill__text line-clamp-1">{{
userStore.userLocation.location || t('pages.home.default-location')
}}</text>
<image src="@img/chef/119.png" class="home-loc-pill__arrow w-20rpx h-20rpx shrink-0 op-50 mt-2rpx"></image>
</view>
<view class="home-cart-btn" @click="goCart">
<view class="i-carbon:shopping-cart text-36rpx text-#14181b"></view>
<view v-if="userStore.isLogin && cartBadgeTotal > 0" class="home-cart-badge">{{ cartBadgeTotal > 99 ? '99+' : cartBadgeTotal }}</view>
</view>
</view>
</view>
<view class="home-delivery-actions-row mt-14rpx flex items-center justify-between gap-16rpx">
<view @click="navigateTo('/pages/address/index')" class="home-delivery-row flex items-center min-w-0 flex-1 text-26rpx lh-32rpx text-#00A76D">
<text v-if="userStore.appointmentTimeShow">{{ t('pages.address.appTime') }}: {{ userStore.appointmentTimeShow }}</text>
<text v-else>{{ t('pages.address.reservation') }}</text>
<image src="@img/chef/119.png" class="w-22rpx h-22rpx ml-8rpx shrink-0"></image>
</view>
<msg-box compact class="shrink-0" @toggleNotOpen="toggleNotOpen" />
</view>
</view>
<home-top-header
:app-name="Config.appName"
:location-text="userStore.userLocation.location"
:appointment-time-show="userStore.appointmentTimeShow"
:cart-badge-total="cartBadgeTotal"
:is-login="userStore.isLogin"
@click-address="navigateTo('/pages/address/index')"
@click-location="navigateTo('/pages-user/pages/search-address/index')"
@click-cart="goCart"
/>
</template>
<view
class="animate-in fade-in animate-ease-out animate-duration-300"
@@ -348,6 +329,7 @@ const debouncedEmit = debounce(1300, (isCollected: boolean, id: string, type: Co
</view>
<view class="px-24rpx pt-12rpx pb-8rpx">
<search />
<msg-box />
<!-- 分类标签（双行横滑） -->
<view class="mt-28rpx" v-if="appMerchantLabelList.length > 0">
<class-bullet :categories="appMerchantLabelList" @itemClick="handleItemClick" />
@@ -452,7 +434,7 @@ const debouncedEmit = debounce(1300, (isCollected: boolean, id: string, type: Co
<view class="featured-dish-body">
<view class="featured-dish-meta flex items-start justify-between gap-12rpx mb-14rpx">
<view class="min-w-0 flex-1">
<text class="featured-dish-price">US${{ getFeaturedDishDisplayPrice(item) }}</text>
<text class="featured-dish-price">US${{item?.originalPrice }}</text>
<!-- <text
v-if="Number(item?.originalPrice) > Number(item?.discountPrice)"
class="featured-dish-original"
@@ -506,59 +488,6 @@ const debouncedEmit = debounce(1300, (isCollected: boolean, id: string, type: Co
background: #f2f2f2;
}
.home-top-header {
background: #f2f2f2;
}
.home-loc-pill {
display: flex;
align-items: center;
gap: 8rpx;
max-width: 200rpx;
padding: 12rpx 18rpx;
background: #fff;
border-radius: 999rpx;
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
}
.home-loc-pill__text {
flex: 1;
min-width: 0;
font-size: 22rpx;
line-height: 28rpx;
font-weight: 500;
color: #333;
}
.home-cart-btn {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 72rpx;
height: 72rpx;
flex-shrink: 0;
background: #fff;
border-radius: 50%;
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.07);
}
.home-cart-badge {
position: absolute;
top: 4rpx;
right: 4rpx;
min-width: 28rpx;
height: 28rpx;
padding: 0 6rpx;
font-size: 18rpx;
line-height: 28rpx;
font-weight: 600;
color: #fff;
text-align: center;
background: #e23636;
border-radius: 999rpx;
}
.home-delivery-row {
padding-left: 2rpx;
}
@@ -633,7 +562,7 @@ const debouncedEmit = debounce(1300, (isCollected: boolean, id: string, type: Co
width: 100%;
height: 100%;
z-index: 2;
// background: rgba(62, 66, 70, 0.6);
background: rgba(201, 197, 197, 0.6);
pointer-events: none;
}