first commit

src/pages/home/components/tabbar-home/tabbar-home.vue

@@ -0,0 +1,424 @@
+<script setup lang="ts">
+import useEventEmit from "@/hooks/useEventEmit";
+import {CollectionType, EventEnum} from "@/constant/enums";
+import { useConfigStore, useUserStore } from "@/store";
+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 ClassBullet from "./components/class-bullet.vue";
+import TabsType from "./components/tabs-type.vue";
+import FeaturedOn from "./components/featured-on/index.vue";
+import FiltrateTool from "@/components/filtrate-tool/index.vue";
+import NearbyMerchants from "./components/nearby-merchants/index.vue";
+import FoodBox from "./components/food-box/index.vue";
+import HomeSkeleton from "./components/home-skeleton.vue";
+import {
+  appMarketActivityListPost,
+  appMerchantCartListMerchantPost,
+  appMerchantCategoryListGet,
+  appMerchantFeaturedListPost,
+  appMerchantLabelListGet,
+  appMerchantNearbyListPost, appMerchantRecommendListPost,
+  appCollectCollectPost
+} from "@/service";
+import usePage from "@/hooks/usePage";
+import {getFeaturedDishList} from "@/pages-store/service";
+const configStore = useConfigStore();
+const userStore = useUserStore();
+const props = defineProps<{
+  scoreRange?: string;
+  price?: Array<string> | string;
+}>();
+const emit = defineEmits(["toggleScore", "togglePrice", "toggleNotOpen"]);
+const { t } = useI18n();
+
+const loading = ref(false)
+
+function navigateTo(url: string) {
+  if(userStore.checkLogin()) {
+    uni.navigateTo({
+      url,
+    });
+  }
+}
+
+const swiperList = ref([]);
+const currentSwiper = ref(0);
+
+async function initData() {
+  // 只在首次加载时显示骨架屏，避免切换时的白屏
+  if(featuredList.value.length === 0) {
+    loading.value = true
+  }
+  appMarketActivityList()
+  getAppMerchantLabelList()
+  getAppMerchantCategoryList()
+  getAppFeaturedList()
+  getAppNearbyListPost()
+  // 获取当前用户购物车信息
+  userStore.getUserCartAllData()
+}
+
+// 筛选事件触发
+function toggleScore() {
+  emit("toggleScore");
+}
+function togglePrice() {
+  emit("togglePrice");
+}
+function toggleNotOpen() {
+  emit("toggleNotOpen");
+}
+
+async function getIndexList() {
+  // 切换时立即刷新列表，无需等待nextTick
+  if (paging.value) {
+    paging.value.refresh()
+  }
+}
+
+defineExpose({
+  initData,
+  init: getIndexList,
+});
+
+// 获取轮播图列表
+function appMarketActivityList() {
+  appMarketActivityListPost({}).then(res=> {
+    console.log('互动列表', res)
+    swiperList.value = res.data
+  })
+}
+
+// 滚动信息获取 APP-商家标签分类控制器(用户端首页上面左右滚动的)
+const appMerchantLabelList = ref([])
+function getAppMerchantLabelList() {
+  appMerchantLabelListGet({}).then(res => {
+    console.log('滚动信息获取 APP-商家标签分类控制器(用户端首页上面左右滚动的)', res)
+    appMerchantLabelList.value = res.data || []
+  })
+}
+// 查询所有商家分类数据
+const appMerchantCategoryList = ref([])
+const currentCategory = ref('')
+function getAppMerchantCategoryList() {
+  appMerchantCategoryListGet({}).then((res: any) => {
+    console.log('查询所有商家分类数据', res)
+    appMerchantCategoryList.value = res.data || []
+  })
+}
+
+// 查询精选商家列表(首页)
+const featuredList = ref([])
+function getAppFeaturedList() {
+  appMerchantFeaturedListPost({
+    body: {
+      lat: userStore.userLocation.latitude,
+      lng: userStore.userLocation.longitude,
+    }
+  }).then(res=> {
+    featuredList.value = res.data || []
+  }).finally(()=> {
+    loading.value = false
+  })
+}
+
+// 查询附近商家列表(首页) /app/merchant/nearbyList
+const nearbyList = ref([])
+function getAppNearbyListPost() {
+  appMerchantNearbyListPost({
+    body: {
+      lat: userStore.userLocation.latitude,
+      lng: userStore.userLocation.longitude,
+    }
+  }).then(res=> {
+    nearbyList.value = res.data || []
+  })
+}
+
+// 是否自提
+const selfPickup = ref<number | null>(null)
+function togglePickup(value: number) {
+  selfPickup.value = value;
+  // paging.value.refresh()
+}
+// 是否有折扣
+const discount = ref<number | null>(null)
+function toggleDiscount(value: number) {
+  discount.value = value;
+  // paging.value.refresh()
+}
+const {paging, dataList, queryList} = usePage(getList)
+function getList(pageNum: number, pageSize: number) {
+  return new Promise(resolve => {
+    getFeaturedDishList({
+      pageNum,
+      pageSize,
+    }).then(res => {
+      console.log('查询精选菜品列表', res)
+      resolve({rows: res.rows})
+    })
+  })
+}
+
+// 点击头部分类
+const merchantLabelId = ref('')
+function handleItemClick(e) {
+  console.log(e, '点击头部分类')
+  merchantLabelId.value = e.id
+  // paging.value.refresh()
+}
+function tabsTypeChange(id: string) {
+  currentCategory.value = id
+  navigateTo('/pages-store/pages/home-store/index?merchantCategoryIds=' + id)
+  // console.log('分类切换', id)
+  // paging.value.refresh()
+}
+
+// 是否展示精选商家和附近商家 true 显示 false隐藏
+const isShowMerchant = computed(()=> {
+  if(!selfPickup.value && !discount.value && !props.scoreRange && !props.price && !currentCategory.value) {
+    return true // 没有筛选条件时显示
+  } else {
+    return false // 有筛选条件时隐藏
+  }
+})
+
+// 手动触发下拉刷新了
+function onRefresh() {
+  console.log('手动触发下拉刷新了')
+  merchantLabelId.value = ''
+  currentCategory.value = ''
+  paging.value.refresh()
+}
+
+function handleClickSwiper(item: any) {
+  console.log(item, '点击轮播图')
+  switch (Number(item.activityType)) {
+    case 1: // 商家列表
+      navigateTo('/pages-store/pages/list/index?id=')
+      break
+    case 2: // 活动菜品列表
+      navigateTo('/pages-store/pages/dishes/index?id=' + item.id)
+      break
+    case 3: // 会员
+      navigateTo('/pages-user/pages/member/index')
+      break
+  }
+}
+
+function navigateToDishes(item: any) {
+  uni.navigateTo({
+    url: '/pages-store/pages/store/dishes?id=' + item.id + '&storeId=' + item.merchantId,
+  })
+}
+// 收藏菜品
+function handleDishCollectionClick(item: any) {
+  debouncedEmit(item.isCollect, item.id, CollectionType.DISH, ()=> {
+    item.isCollect = !item.isCollect
+  })
+}
+// 防抖处理函数
+const debouncedEmit = debounce(1300, (isCollected: boolean, id: string, type: CollectionType, callback: ()=> void) => {
+  // 收藏接口
+  appCollectCollectPost({
+    body: {
+      targetId: id,
+      targetType: type
+    }
+  }).then(res=> {
+    callback()
+  })
+}, {
+  atBegin: true, // 立即触发
+})
+</script>
+
+<template>
+  <view
+    class="bg-#fff"
+    :style="[
+      {
+        height: configStore.windowHeight + 'px',
+      },
+    ]"
+  >
+      <z-paging @onRefresh="onRefresh" ref="paging" v-model="dataList" :auto="false" @query="queryList" :refresher-enabled="true" :auto-show-back-to-top="false">
+        <template #top>
+          <status-bar />
+          <view class="flex items-center pt-18rpx px-30rpx pb-20rpx">
+<!--            <text class="text-52rpx lh-52rpx text-#333 font-bold shrink-0">{{Config.appName}}</text>-->
+            <image
+                src="@img/logo.png"
+                class="w-52rpx h-52rpx shrink-0"
+            ></image>
+            <view class="bg-#D8D8D8 w-1rpx h-40rpx mx-14rpx"></view>
+            <view @click="navigateTo('/pages/address/index')" class="text-#00A76D text-28rpx lh-28rpx flex items-center">
+              <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-24rpx h-24rpx ml-6rpx mt-4rpx shrink-0"
+              ></image>
+            </view>
+          </view>
+        </template>
+        <view
+            class="animate-in fade-in animate-ease-out animate-duration-300"
+            v-show="loading && featuredList.length === 0"
+        >
+          <home-skeleton />
+        </view>
+        <view class="flex-center-sb px-30rpx pt-34rpx">
+          <!--展示用户的定位城市，如果用户没有使用定位则展示选择的城市，用户选择城市后，需要更新定位城市-->
+          <view @click="navigateTo('/pages-user/pages/search-address/index')" class="flex items-center text-30rpx text-#333 font-500">
+            <text class="line-clamp-1">
+              {{ userStore.userLocation.location || t('pages.home.default-location') }}
+            </text>
+            <image
+                src="@img/chef/101.png"
+                class="w-24rpx h-24rpx ml-10rpx mt-6rpx shrink-0"
+            ></image>
+          </view>
+          <view class="shrink-0 ml-40rpx">
+            <msg-box @toggleNotOpen="toggleNotOpen" />
+          </view>
+        </view>
+        <view class="px-30rpx mt-32rpx pb-22rpx">
+          <search />
+          <!-- 分类滚动区域 -->
+          <view class="mt-40rpx" v-if="appMerchantLabelList.length > 0">
+            <class-bullet :categories="appMerchantLabelList" @itemClick="handleItemClick" />
+          </view>
+        </view>
+        <swiper
+            class="card-swiper"
+            :circular="true"
+            :autoplay="true"
+            previous-margin="60rpx"
+            next-margin="60rpx"
+        >
+          <template v-for="item in swiperList" :key="item.id">
+            <swiper-item @click="handleClickSwiper(item)" class="">
+              <image
+                  :src="item.activityImage"
+                  class="swiper-item-content w-full h-100% rounded-24rpx bg-common"
+              ></image>
+            </swiper-item>
+          </template>
+        </swiper>
+
+        <!-- 分类滚动区域 -->
+        <tabs-type @changeType="tabsTypeChange" v-if="appMerchantCategoryList.length > 0" :list="appMerchantCategoryList" :currentId="currentCategory" class="mt-22rpx" />
+
+        <!-- 筛选工具 -->
+<!--        <filtrate-tool class="mt-32rpx" @togglePickup="togglePickup" @toggleDiscount="toggleDiscount" @toggleScore="toggleScore" @togglePrice="togglePrice" />-->
+
+        <view class="animate-in fade-in animate-ease-in animate-duration-300" v-if="isShowMerchant">
+          <!-- Featured on ChefLink 精选商家 -->
+          <view v-if="featuredList.length > 0" class="mt-56rpx">
+            <view
+                class="mb-30rpx pl-30rpx text-36rpx lh-36rpx text-#333 font-bold"
+            >{{ t('pages.home.featured-on') }}</view>
+            <featured-on :list="featuredList" />
+          </view>
+
+          <!-- Nearby Merchants 附近商家 -->
+          <view v-if="nearbyList.length > 0" class="mt-56rpx">
+            <view
+                class="mb-32rpx pl-30rpx text-36rpx lh-36rpx text-#333 font-bold"
+            >{{ t('pages.home.nearby-merchants') }}</view>
+            <nearby-merchants :list="nearbyList" />
+          </view>
+        </view>
+
+        <!-- List -->
+        <view class="mt-56rpx px-30rpx">
+          <view class="mb-32rpx text-36rpx lh-36rpx text-#333 font-bold"
+          >{{ t('pages.home.featured-dishes') }}</view>
+          <template v-for="(item, index) in dataList" :key="index">
+            <view @click="navigateToDishes(item)" class="w-100% mb-30rpx">
+              <view class="relative h-448rpx rounded-24rpx mb-28rpx">
+                <view @click.stop="handleDishCollectionClick(item)" class="w-68rpx h-68rpx absolute z-2 top-0 right-0">
+                  <image
+                      v-if="!item.isCollect"
+                      src="@img-store/1334.png"
+                      mode="aspectFill"
+                      class="w-full h-full"
+                  />
+                  <image
+                      v-else
+                      src="@img-store/1337.png"
+                      mode="aspectFill"
+                      class="w-full h-full"
+                  />
+                </view>
+                <image
+                    :src="item?.dishImage?.split(',')[0]"
+                    mode="aspectFill"
+                    class="w-full h-full rounded-24rpx bg-common"
+                />
+              </view>
+              <view class="line-clamp-1 text-30rpx text-#333 font-500">
+                {{ item?.dishName }}
+              </view>
+              <view class="flex-center-sb mt-12rpx">
+                <text class="text-32rpx lh-30rpx text-#333 font-500">US${{ item?.discountPrice }}</text>
+                <view class="member-price-tag text-[#FBE3C3] font-500 text-30rpx lh-30rpx center pl-6rpx break-all">
+                  <text>{{ t('pages-store.store.members') }}: </text>
+                  ${{ item?.memberPrice }}
+                </view>
+              </view>
+              <view class="flex-center-sb mt-12rpx">
+                <view class="text-28rpx text-#999">
+                  <view class="line-through">US${{ item?.originalPrice }}</view>
+                  <view>{{ t('pages-store.store.sales') }}:{{ item?.salesCount }}</view>
+                </view>
+
+                <view class="center w-64rpx h-64rpx rounded-50% bg-white shadow-lg">
+                  <image
+                      src="@img/chef/1285.png"
+                      class="w-30rpx h-30rpx shrink-0"
+                  ></image>
+                </view>
+              </view>
+            </view>
+          </template>
+        </view>
+        <template #bottom>
+          <view class="h-50px"></view>
+          <view :style="[configStore.iosSafeBottomPlaceholder]"></view>
+        </template>
+      </z-paging>
+    <view v-if="userStore.isLogin && userStore.userCartAllData.length > 0" @click="navigateTo('/pages-user/pages/cart/index')" class="fixed bottom-138rpx left-50% translate-x--50% px-26rpx h-88rpx bg-#14181B rounded-44rpx center text-28rpx text-#fff font-500">
+      <image src="@img/chef/125.png" class="w-28rpx h-28rpx shrink-0"></image>
+      <view class="ml-10rpx whitespace-nowrap">{{ userStore.userCartAllData[0]?.merchantName }}</view>
+      <view class="w-8rpx h-8rpx rounded-50% bg-white mx-8rpx"></view>
+      <text>{{ userStore.userCartAllData[0]?.merchantCartVoList?.length || 0 }}</text>
+    </view>
+  </view>
+</template>
+
+<style scoped lang="scss">
+.card-swiper {
+  height: 420rpx;
+}
+.swiper-item-content {
+  width: 100%;
+  height: 100%;
+  transform: scale(0.95);
+  border-radius: 20rpx;
+  transition: transform 0.3s;
+}
+.swiper-item-active .swiper-item-content {
+  transform: scale(1);
+}
+.member-price-tag {
+  min-width: 220rpx;
+  height: 42rpx;
+  background-image: url("/static/images/chef/1282.png");
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+}
+</style>