jdt-user/src/pages/index/index.vue

<template>
  <view class="app">
    <!--  搜索  -->
    <nut-searchbar
      v-model="searchValue"
      placeholder="要搜索点什么？"
    ></nut-searchbar>
    <view class="banner">
      <nut-swiper
        :init-page="0"
        :pagination-visible="true"
        pagination-color="#ff0000"
        auto-play="3000"
      >
        <nut-swiper-item v-for="(itm, idx) in bannerList" :key="idx">
          <img
            :src="itm.url"
            :alt="itm.ID.toString()"
            @click="toPage(itm.jump)"
          />
        </nut-swiper-item>
      </nut-swiper>
    </view>

    <!--  金刚区  -->
    <view class="navbar">
      <nut-grid :border="false" column-num="5">
        <nut-grid-item
          v-for="item in swiperList"
          :key="item.ID"
          :text="item.name"
          @click="toDetails(item)"
        >
          <image :src="item.icon" />
        </nut-grid-item>
      </nut-grid>
    </view>
    <MerList />
    <!--    签到弹窗    -->
    <Popup />
  </view>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import Taro from "@tarojs/taro";
import Popup from "@/components/Popup.vue";
import MerList from "@/components/MerList.vue";
import { getHomeList } from "@/api/home";
import { getBanner } from "@/api/user";
import { parseQueryString } from "@/utils";
import { getMerList } from "@/api/goods";

const searchValue = ref("");

interface SwiperList {
  ID?: number;
  icon?: string;
  name?: string;
  url?: string;
  type?: number;
}

const swiperList = ref<Array<SwiperList>>([]);

const bannerList = ref<any[]>([]);

Taro.useDidShow(async () => {
  await getBannerList();
  await get_banner_list();
});

Taro.useShareAppMessage(() => ({
  title: "捷兑通",
  path: `/pages/index/index?scene=${Taro.getStorageSync("token")}`,
  imageUrl:
    "https://upload.jdt168.com/1694242954957988438_微信图片_20230909150016.jpg",
}));

const getBannerList = async () => {
  swiperList.value = [
    {
      ID: 11224,
      type: 1,
      name: "全部服务",
      url: "/pages/allClassList/index",
      icon: "//upload.jdt168.com/1702296870765673412_%E5%85%A8%E9%83%A8%E6%9C%8D%E5%8A%A1.png",
    },
    {
      ID: 11225,
      type: 1,
      name: "活动游戏",
      url: `/pages/game/gamehome/index?uid=${Taro.getStorageSync("token")}`,
      icon: "//jdt168.com/uploads/merchant/20220829/caad6be8983e88c41d28da7d124bc37b.png",
    },
    {
      ID: 11226,
      type: 1,
      name: "商户入驻",
      url: "/pages/users/settled_mer/index",
      icon: "//jdt168.com/uploads/merchant/20220829/6fe67b93721a42aedc842c4f19d6f2d3.png",
    },
    // {
    //   ID: 11227,
    //   type: 1,
    //   name: "最新资讯",
    //   url: "",
    //   icon: "//jdt168.com/uploads/merchant/20220829/b975136a9b64aab69bf11d75a194f1ea.png",
    // },
  ];
  const { data } = await getHomeList();
  if (data.data.length > 0) {
    for (let i = 0; i < data.data.length; i++) {
      swiperList.value.push({
        type: 2,
        ...data.data[i],
      });
    }
  }
};

const get_banner_list = async () => {
  const { data }: any = await getBanner();
  bannerList.value = data.data;
};

const toDetails = (item: SwiperList) => {
  item.type !== 1
    ? Taro.navigateTo({
        url: `/pages/search/index?id=${item.ID}&name=${item.name}`,
      })
    : Taro.navigateTo({
        url: item.url as string,
      });
};

const toPage = async (url: string) => {
  // url转对象
  const obj = parseQueryString(url);
  if (obj.type === "1") {
    const { data: res } = await getMerList({});
    const mer = res.data.filter((item) => item.bid === obj.bid)[0];
    Taro.setStorageSync("mer_info", mer);
  }
  Taro.navigateTo({
    url,
  });
};
</script>

<style lang="scss">
.swiper {
  .nut-swiper {
    background: #ffffff;

    .nut-swiper-item {
      display: grid;
      grid-template-columns: repeat(5, 1fr);

      .item {
        display: flex;
        flex-direction: column;
        align-items: center;

        image {
          width: 100px;
          height: 100px;
          border-radius: 50%;
        }
      }
    }
  }
}

.banner {
  padding: 10px;
  .nut-swiper-item img {
    border-radius: 26rpx;
    width: 100%;
    height: 350px;
  }
}

.titleImg {
  margin-top: 10px;
  width: 100%;
  height: 50px;
  box-sizing: border-box;
  background-image: url("~@/static/index/index-title.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 50%;
  text-align: center;
  line-height: 50px;
  color: #ff0000;
  font-weight: bold;
}

.navbar {
  background-color: #ffffff;

  .nut-grid-item__content {
    padding: 15px;
  }

  image {
    width: 80px;
    height: 80px;
  }
}
</style>