Merge remote-tracking branch 'origin/master'

# Conflicts:
#	src/pages-user/pages/add-card/index.vue
#	src/pages/home/index.vue
This commit is contained in:
帅气的boy
2026-03-03 11:35:42 +08:00
17 changed files with 1250 additions and 235 deletions
@@ -22,8 +22,8 @@
class="category-item"
@click="handleItemClick(item)"
>
<image :src="item.logoUrl" class="category-icon" mode="aspectFit" />
<text class="category-text">{{ item.categoryName }}</text>
<image v-if="item.categoryImage || item.logoUrl" :src="item.categoryImage || item.logoUrl" class="category-icon" mode="aspectFit" />
<text class="category-text">{{ item.categoryName || item.name }}</text>
</view>
<!-- 第二份重复内容用于无缝循环 -->
<view
@@ -32,8 +32,8 @@
class="category-item"
@click="handleItemClick(item)"
>
<image :src="item.categoryImage" class="category-icon" mode="aspectFit" />
<text class="category-text">{{ item.categoryName }}</text>
<image v-if="item.categoryImage || item.logoUrl" :src="item.categoryImage || item.logoUrl" class="category-icon" mode="aspectFit" />
<text class="category-text">{{ item.categoryName || item.name }}</text>
</view>
</view>
</scroll-view>
@@ -85,9 +85,10 @@ import { computed, ref, onMounted, nextTick, getCurrentInstance } from 'vue'
// 定义分类项接口(与模板字段一致)
interface CategoryItem {
id: number
categoryImage: string
name: string,
categoryName:any
categoryImage?: string
logoUrl?: string
name?: string
categoryName: string
}
// 定义组件属性
@@ -289,7 +290,7 @@ onMounted(() => {
justify-content: center;
min-width: 120rpx;
height: 60rpx;
padding: 0 16rpx;
padding: 0 20rpx;
border: 1px solid #C8C8C8;
border-radius: 30rpx;
cursor: pointer;
@@ -304,6 +305,7 @@ onMounted(() => {
width: 32rpx;
height: 32rpx;
margin-right: 8rpx;
flex-shrink: 0;
}
.category-text {
@@ -18,7 +18,7 @@ const props = defineProps({
},
imgKey: {
type: String,
default: 'categoryImage',
default: 'logoUrl',
},
})
const emit = defineEmits(['changeType']);
@@ -93,7 +93,7 @@ function appMarketActivityList() {
}
// 滚动信息获取 APP-商家标签分类控制器(用户端首页上面左右滚动的)
const appMerchantLabelList = ref([])
const appMerchantLabelList = ref<any>([])
function getAppMerchantLabelList() {
appRecipeCategoryListGet({}).then(res => {
console.log('滚动信息获取 APP-商家标签分类控制器(用户端首页上面左右滚动的)', res)
@@ -167,6 +167,20 @@ function getList(pageNum: number, pageSize: number) {
})
}
// 回到顶部
const showBackToTop = ref(false)
function scrollToTop() {
if (paging.value) {
paging.value.scrollToTop()
}
}
// 监听页面滚动
function onPageScroll(e: any) {
// 滚动距离大于60时显示,小于等于60时隐藏
showBackToTop.value = e.detail.scrollTop > 120
}
// 点击头部分类
const merchantLabelId = ref('')
function handleItemClick(e) {
@@ -186,7 +200,7 @@ const isShowMerchant = computed(()=> {
if(!selfPickup.value && !discount.value && !props.scoreRange && !props.price && !currentCategory.value) {
return true // 没有筛选条件时显示
} else {
return false // 有筛选条件时隐藏
return true // 有筛选条件时隐藏
}
})
@@ -249,7 +263,7 @@ const debouncedEmit = debounce(1300, (isCollected: boolean, id: string, type: Co
},
]"
>
<z-paging @onRefresh="onRefresh" ref="paging" v-model="dataList" :auto="false" @query="queryList" :refresher-enabled="true" :auto-show-back-to-top="false">
<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="flex items-center pt-18rpx px-30rpx pb-20rpx">
@@ -402,6 +416,11 @@ const debouncedEmit = debounce(1300, (isCollected: boolean, id: string, type: Co
<view class="w-8rpx h-8rpx rounded-50% bg-white mx-8rpx"></view>
<text>{{ userStore.userCartAllData[0]?.merchantCartVoList?.length || 0 }}</text>
</view>
<!-- 回到顶部按钮 -->
<view v-if="showBackToTop" @click="scrollToTop" class="back-to-top-btn">
<image src="@img/chef/119.png" class="w-40rpx h-40rpx shrink-0 rotate-180"></image>
</view>
</view>
</template>
@@ -426,4 +445,19 @@ const debouncedEmit = debounce(1300, (isCollected: boolean, id: string, type: Co
background-size: 100% 100%;
background-repeat: no-repeat;
}
.back-to-top-btn {
position: fixed;
bottom: 148rpx;
left: 30rpx;
width: 88rpx;
height: 88rpx;
background-color: #14181B;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.15);
z-index: 998;
}
</style>