applet/pages/tabtar/home.vue

<template>
  <view class="index" :style="{ backgroundImage: `url(${bgImage.image1})` }">
    <view class="top-box" :class="showTopSearch ? '' : 'hide'">
      <view :style="[{ height: `${statusBarHeight}px` }]"></view>
      <view class="title" :style="[{ height: `${menuButtonHeight}px` }]">
        <text class="titlt-txt">商城</text>
      </view>
      <view class="input-box">
        <view
          class="status-bar"
          :style="[{ height: `${statusBarHeight}px` }]"
          @click="searchClick"
        ></view>
        <view class="input-placeholder" @click="searchClick"
          >请输入检索关键字</view
        >
        <view class="msgCenter" @click="goToMsg()">
          <!-- &#xe67c; -->
          <uv-icon name="chat" color="#ffffff" size="28"></uv-icon>
          <text v-if="msgCenter == 0 ? false : msgCenter">{{ msgCenter }}</text>
        </view>
      </view>
    </view>
    <view class="u-skeleton">
      <view
        class="swiper u-skeleton-rect"
        :class="showTopSearch ? '' : 'mt120'"
        v-if="(shopBanner && shopBanner.length > 0) || skeletonShow"
      >
        <view class="uni-margin-wrap">
          <swiper
            class="swiper"
            :indicator-dots="true"
            :autoplay="true"
            :interval="2000"
            :duration="1000"
            circular="false"
          >
            <swiper-item
              v-for="item in skeletonShow ? 1 : shopBanner"
              :key="item.id"
            >
              <view class="swiper-item" @click="$mUtil.imgLink(item)">
                <image
                  class="bannersize"
                  :src="`${item.image}`"
                  mode="aspectFill"
                ></image>
              </view>
            </swiper-item>
          </swiper>
        </view>
      </view>
      <!-- 首页一级分类 -->
      <div class="one-cate">
        <!-- cateList.slice(0,4) -->
        <div
          class="item"
          v-for="item in skeletonShow ? 4 : cateList"
          @click="jumpHxCate(item, 0)"
          :key="item.id"
        >
          <!-- ?x-oss-process=style/w_350 -->
          <image
            class="u-skeleton-fillet"
            mode="widthFix "
            :src="`${item.icon}`"
          >
          </image>
          <div class="word u-skeleton-fillet u-font26">
            {{ item.name || "加载中" }}
          </div>
        </div>
      </div>
      <view
        v-if="(homeBanner1 && homeBanner1.image) || skeletonShow"
        class="banner1Cls"
        @click="$mUtil.imgLink(homeBanner1)"
      >
        <!-- ?x-oss-process=style/w_350 -->
        <image
          class="font u-skeleton-fillet"
          :src="`${homeBanner1.image}`"
          mode=""
        ></image>
      </view>
      <!-- 惠选专区 hxCateList-->
      <ChoiceZone
        ref="choiceZoneRef"
        :skeletonShow="skeletonShow"
        @jumpHxCate="jumpHxCate"
      />

      <!-- 限时秒杀 -->
      <Seckill
        ref="seckillRef"
        :skeletonShow="skeletonShow"
        @goDetail="goDetail"
        @goProductDetails="goProductDetails"
      />

      <!-- 拼团购 -->
      <GroupBuy
        ref="groupBuyRef"
        :skeletonShow="skeletonShow"
        :bgImage="bgImage.image2"
        @goDetail="goDetail"
        @goProductDetails="goProductDetails"
      />

      <!-- 热门推荐 -->
      <HotRecommend
        ref="hotRecommendRef"
        :skeletonShow="skeletonShow"
        :bgImage="bgImage.image3"
        @goDetail="goDetail"
        @goProductDetails="goProductDetails"
      />

      <!-- 本月热销 -->
      <MonthlyBestSeller
        ref="monthlyBestSellerRef"
        :skeletonShow="skeletonShow"
        :bgImage="bgImage.image4"
        @goDetail="goDetail"
        @goProductDetails="goProductDetails"
      />

      <!-- 猜你喜欢 -->
      <GuessYouLike
        ref="guessYouLikeRef"
        :goodsList="goodsList"
        :skeletonShow="skeletonShow"
        :bgImage="bgImage.image5"
        @goDetail="goDetail"
        @goProductDetails="goProductDetails"
      />

      <view class="cart-entrance" @click="toCartPage()">
        <!-- <image :src="imgUrl + '/static/czd/car.png'" alt=""></image> -->
        <uv-icon name="shopping-cart" color="#000" size="32"></uv-icon>
      </view>
      <uv-skeleton
        :loading="skeletonShow"
        :animation="true"
        bgColor="#FFF"
      ></uv-skeleton>
    </view>
  </view>
</template>

<script setup>
import { ref, reactive } from "vue";
import {
  onLoad,
  onShow,
  onPullDownRefresh,
  onPageScroll,
  onShareAppMessage,
} from "@dcloudio/uni-app";
import { getAdList_Api, getQuickLinkList_Api } from "@/api/index.js";
import { messageUnreadNum_Api } from "@/api/userInfo.js";

import ChoiceZone from "./components/ChoiceZone.vue";
import Seckill from "./components/Seckill.vue";
import GroupBuy from "./components/GroupBuy.vue";
import HotRecommend from "./components/HotRecommend.vue";
import MonthlyBestSeller from "./components/MonthlyBestSeller.vue";
import GuessYouLike from "./components/GuessYouLike.vue";
import utils from "@/util/index.js";

const choiceZoneRef = ref(null);
const seckillRef = ref(null);
const groupBuyRef = ref(null);
const hotRecommendRef = ref(null);
const monthlyBestSellerRef = ref(null);
// const guessYouLikeRef = ref(null);

// 响应式数据
const statusBarHeight = ref(uni.getSystemInfoSync().statusBarHeight);
const menuButtonHeight = ref(0);
try {
  menuButtonHeight.value = uni.getSystemInfoSync().menuButtonHeight + 10;
} catch (error) {
  console.log(error);
}
const showTopSearch = ref(true);
const shopBanner = ref([]); //轮播图
const goodsList = ref([]); //猜你喜欢
const msgCenter = ref(null);
const cateList = ref([]); // 一级分类
const homeBanner1 = ref({});
const skeletonShow = ref(true);

// 背景图片
const bgImage = reactive({
  // image1: "/static/home/home_bg1.png",
  // image2: "/static/home/home_bg2.png",
  // image3: "/static/home/home_bg3.png",
  // image4: "/static/home/home_bg4.png",
  // image5: "/static/home/home_bg5.png",
  image1:
    "https://chaonong-shop.oss-cn-beijing.aliyuncs.com/20260104/fc2943f1d3894cf6aebe9a4ed5455cec.png", // 顶部背景图
  image2:
    "https://chaonong-shop.oss-cn-beijing.aliyuncs.com/20260104/c99cd4841fca414bbc5bc0bb21b6e0f3.png", // 拼团购背景图
  image3:
    "https://chaonong-shop.oss-cn-beijing.aliyuncs.com/20260104/21296e0cec1e49e6aa44bca3d7758362.png", // 热门推荐背景图
  image4:
    "https://chaonong-shop.oss-cn-beijing.aliyuncs.com/20260104/afc6def5b92a41eaa243c557d73b588c.png", // 本月热销背景图
  image5:
    "https://chaonong-shop.oss-cn-beijing.aliyuncs.com/20260104/67d5c6eebace46f1abd3435352561968.png", // 猜你喜欢背景图
});

// 方法定义
const getHomeBanner1 = () => {
  getAdList_Api("home_ad").then((res) => {
    if (res && res.data && res.data.length > 0) {
      homeBanner1.value = res.data[0];
      // console.log("homeBanner1", homeBanner1.value);
    }
  });
};

const init = () => {  
  getBanner();
  getOneCate();
  getHomeBanner1();
};

// 跳转消息页面
const goToMsg = () => {
  if (!utils.isLoginTo(true)) {
    uni.navigateTo({
      url: "/pages/user/myMsg",
    });
  }
};

const searchClick = () => {
  uni.navigateTo({
    url: "/pages/research/homepage/search",
  });
};

const goProductDetails = (url) => {
  uni.navigateTo({
    url: url,
  });
};


/**获得消息数量 */
const getmessageNum = () => {
  let token = uni.getStorageSync("apiToken");
  if (token) {
    messageUnreadNum_Api().then((res) => {
      if (res && res.code == 200) {
        msgCenter.value = res.data;
      }
    });
  } else {
    msgCenter.value = 0;
  }
};

// 一级分类
const getOneCate = () => {
  getQuickLinkList_Api("home").then((res) => {
    if (res && res.code == 200) {
      cateList.value = res.data || [];
      // console.log("cateList", cateList.value);
    }
  });
};


const jumpHxCate = (item, area_feature) => {
  let url = `/pages/freeCollection/index`;
  if (area_feature == 0) {
    url += `?categoryId=${item.id}&title=${item.name}`;
  } else {
    url += `?hxCategoryId=${item.id}&title=${item.name}`;
  }
  uni.navigateTo({
    url: url,
  });
};

/**轮播图 */
const getBanner = () => {
  getAdList_Api("home_banner")
    .then((res) => {
      uni.stopPullDownRefresh();
      if (res && res.code == 200) {
        shopBanner.value = res.data || [];
      }
    })
    .catch((err) => {
      console.log("err");
      console.log(err);
    });
};

const goDetail = (url, isNeedLogin, tabShow = false) => {
  if ((isNeedLogin && uni.getStorageSync("apiToken") == "") || null) {
    uni.$uv.toast("请先登录");
    return false;
  }
  if (tabShow) {
    uni.switchTab({
      url: url,
    });
  } else {
    uni.navigateTo({
      url: url,
    });
  }
};

const toCartPage = () => {
  uni.switchTab({
    url: "/pages/tabtar/shoppingCart",
  });
};

// 生命周期钩子
onLoad(() => {
  skeletonShow.value = false;
  init();
});

onShow(() => {
  getmessageNum();
});

onPullDownRefresh(() => {
  init();
  if(choiceZoneRef.value) choiceZoneRef.value.init();
  if(seckillRef.value) seckillRef.value.init();
  if(groupBuyRef.value) groupBuyRef.value.init();
  if(hotRecommendRef.value) hotRecommendRef.value.init();
  if(monthlyBestSellerRef.value) monthlyBestSellerRef.value.init();
  // if(guessYouLikeRef.value) guessYouLikeRef.value.init();

  setTimeout(() => {
    uni.stopPullDownRefresh();
  }, 300);
});

// onReachBottom(() => {
//   return;
//   if (status.value == "more") {
//     page.value++;
//     guessLike();
//   }
// });

onPageScroll((e) => {
  //nvue暂不支持滚动监听，可用bindingx代替
  if (e.scrollTop > uni.upx2px(49 + 30)) {
    showTopSearch.value = false;
  } else {
    showTopSearch.value = true;
  }
});

onShareAppMessage((res) => {
  let user = uni.getStorageSync("personal");
  if (res.from === "button") {
    // 来自页面内分享按钮
    console.log(res.target);
  }
  return {
    title: "商城",
    path: `/pages/tabtar/home?shareId=${user.id || ""}`,
  };
});
</script>

<style scoped lang="scss">
.swiper {
  width: 690rpx;
  height: 370rpx !important;
  // border-radius: 20rpx;
  overflow: hidden;
  margin: 0 auto;

  ::v-deep .uni-swiper-dot {
    width: 16rpx !important;
    height: 6rpx;
    border-radius: 4rpx !important;
    background-color: #ffffff !important;
    opacity: 0.5;
  }

  ::v-deep .uni-swiper-dot-active {
    width: 32rpx !important;
    height: 6rpx;
    border-radius: 4rpx !important;
    background-color: #ffffff !important;
    opacity: 1;
  }
}

::v-deep.hx-navbar__content__main_search_hxicon {
  span {
    font-size: 30rpx;
  }
}

::v-deep.hx-navbar__content__main_search_input {
  background-color: #4a705e;
}

.one-cate {
  display: flex;
  // width: 750rpx;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 0 31rpx;
  margin-top: 30rpx;
  color: #373737;

  .item {
    width: 120rpx;
    text-align: center;
    // margin-right: 40rpx;

    // &:last-child {
    //   margin-right: 0;
    // }

    image {
      width: 94rpx !important;
      height: 94rpx !important;
    }

    .word {
      // margin-top: 17rpx;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }

  .item:first-child {
    margin-left: 0;
  }

  .item:nth-child(5n + 1) {
    margin-left: 0;
  }
}

.bannersize {
  display: block;
  overflow: hidden;
  width: 100%;
  height: 100%;
  border-radius: 10rpx;
}

.classlist {
  margin: 30rpx;
  display: flex;
  justify-content: space-between;
  color: #373737;

  .item {
    width: 120rpx;
    text-align: center;
    // margin-right: 38rpx;

    // &:last-child {
    //   margin-right: 0;
    // }

    .img-box {
      width: 100%;
      // height: 110rpx;
      display: flex;
      align-items: center;
      justify-content: center;

      image {
        width: 70rpx;
        height: 70rpx;
        margin-bottom: 8rpx;
      }

      text {
        font-size: 70rpx;
      }

      .word {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .alarmClock {
        color: #eb963a;
      }

      .spell {
        color: #4581f6;
      }

      .integral {
        color: #4ea700;
      }

      .discounts {
        color: #f55f40;
      }

      .activeRegion {
        color: #4581f6;
      }
    }

    .font {
      // margin-top: 17rpx;
    }

    .imgbox {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      // height: 110rpx;

      image {
        width: 70rpx;
        height: 70rpx !important;
        margin-bottom: 8rpx;
      }
    }
  }
}

.swiper {
  // margin-top: 105rpx;
  height: 360rpx;

  .swiper-item {
    width: 100%;
    height: 100%;
  }
}

.index {
  position: relative;
  background-color: #f5f5f5;
  overflow-x: hidden;

  background-repeat: no-repeat;
  background-size: 100% 509rpx;
}

.cart-entrance {
  position: fixed;
  right: 30rpx;
  bottom: 180rpx;
  width: 50px;
  height: 50px;
  background-size: 100% 100%;
  border-radius: 50%;
  filter: drop-shadow(1px 2px 4px rgba(26, 58, 70, 0.3));
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;

  image {
    width: 55%;
    height: 55%;
    margin-right: 5rpx;
  }
}

.top-box {
  width: 100%;

  &.hide {
    background: #fa6138;
  }

  .title {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    margin: 0 auto;
    // height: 45rpx;
    padding: 0 30rpx;
    font-size: 36rpx;
    font-family: PingFang SC, PingFang SC-Bold;
    font-weight: 700;
    color: #fff;
    // line-height: 45rpx;
    text-align: center;

    image {
      width: 41rpx;
      height: 31rpx;
      margin-right: 4rpx;
    }

    .titlt-txt {
      font-size: 36rpx;
    }
  }

  .input-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 100;
    width: 100%;
    padding: 23rpx 30rpx 30rpx;
    box-sizing: border-box;

    .text {
      margin-right: 20rpx;
      margin-left: 0rpx;
      font-weight: 500;
      font-size: 28rpx;
      color: #aed8b9;
    }

    .input-placeholder {
      // flex: 1;
      box-sizing: border-box;
      display: inline-block;
      vertical-align: middle;
      width: 630rpx;
      height: 70rpx;
      line-height: 66rpx;
      // background: rgba(2,81,43,0.3);
      background: rgba(255, 255, 255, 0.3);
      padding-left: 80rpx;
      // color: #666666;
      background: rgba(255, 255, 255, 0.3);
      background-image: url("/static/search.png");
      background-size: 40rpx 40rpx;
      background-position: 24rpx 50%;
      background-repeat: no-repeat;
      border: 1rpx solid rgba(255, 255, 255, 0.36);
      border-radius: 36rpx;
    }

    text {
      margin-left: 10rpx;
      display: inline-block;
      vertical-align: middle;
      font-size: 42rpx;
      font-weight: 400;
      text-align: right;
      color: #ffffff;
      line-height: 42rpx;

      &.iconfont2 {
        font-size: 55rpx;
      }
    }

    .msgCenter {
      position: relative;

      text {
        min-width: 50rpx;
        font-size: 20rpx;
        color: #ffffff;
        font-weight: 400;
        padding: 0 4rpx;
        background-color: #ff0000;
        border-radius: 13rpx;
        border: 2rpx solid #fff;
        text-align: center;
        position: absolute;
        left: 10rpx;
        top: -30rpx;
        line-height: normal;
      }
    }
  }

  .input-placeholder {
    color: #fee3cf;
    opacity: 0.74;
    font-size: 28rpx;
    font-family: PingFang SC, PingFang SC-Regular;
    font-weight: 400;
    text-align: left;
    line-height: 70rpx;
  }
}

.top-box.hide {
  position: fixed;
  z-index: 9999;
}

.notice-box {
  height: 92rpx;
  font-size: 28rpx;
  margin-bottom: 0;

  ::v-deep .uni-noticebar-icon {
    width: 40rpx;
    // background-image: url('/static/home/noticebar-icon.png');
    background-size: cover;
    color: transparent !important;
  }
}

.mt120 {
  margin-top: 240rpx;
}

.banner1Cls {
  text-align: center;
  margin-top: 20rpx;

  image {
    width: 690rpx;
    height: 200rpx;
  }
}
</style>