feat(custom): 首页微调

2023-12-11 20:44:52 +08:00
parent eb7f411802
commit 878c421fe0
8 changed files with 195 additions and 90 deletions
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "jdt-user",
-  "version": "3.0.3",
+  "version": "3.0.4",
  "private": true,
  "description": "",
  "templateInfo": {
@@ -9,7 +9,7 @@
    "css": "sass"
  },
  "taroConfig": {
-    "version": "3.0.3"
+    "version": "3.0.4"
  },
  "scripts": {
    "build:weapp": "taro build --type weapp",
--- a/src/api/goods.ts
+++ b/src/api/goods.ts
@@ -74,3 +74,7 @@ export const getGoodList = (data: object) =>
 // // 获取活动商家商品
 // export const getHotGoodList = (data: object) =>
 //     request("/store/goods", data, "POST");
+
+// 获取全部商家类目
+export const getAllMerCategory = () =>
+  request("/home/all/classify", {}, "POST");
--- a/src/api/user.ts
+++ b/src/api/user.ts
@@ -69,6 +69,7 @@ export const userSign = () => request("/sign/user", {}, "POST");

 // 获取签到记录
 export const getSignRecord = () => request("/sign/pulse/count", {}, "POST");
+
 // 获取赠送总记录
 export const getGiftRecord = (data: object) =>
  request("/user/giftPulseRecord", data, "POST");
--- a/src/app.config.ts
+++ b/src/app.config.ts
@@ -4,6 +4,7 @@ export default defineAppConfig({
    "pages/category/index",
    "pages/cart/index",
    "pages/user/index",
+    "pages/allClassList/index",
  ],
  subPackages: [
    {
--- a/src/pages/allClassList/index.config.ts
+++ b/src/pages/allClassList/index.config.ts
@@ -0,0 +1,3 @@
+export default definePageConfig({
+  navigationBarTitleText: "全部服务",
+});
--- a/src/pages/allClassList/index.vue
+++ b/src/pages/allClassList/index.vue
@@ -0,0 +1,84 @@
+<template>
+  <view class="app">
+    <view class="container" v-for="(item, index) in list" :key="index">
+      <view class="title">{{ item.name }}</view>
+      <view class="navbar" v-if="Array.isArray(item.Classify)">
+        <nut-grid :border="false" column-num="5">
+          <nut-grid-item
+            v-for="itm in item.Classify"
+            :key="itm.ID"
+            :text="itm.name"
+            @click="toDetails(itm)"
+          >
+            <image :src="itm.icon" />
+          </nut-grid-item>
+        </nut-grid>
+      </view>
+      <nut-empty v-else description="该分类暂无类目" image-size="0"></nut-empty>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+import Taro from "@tarojs/taro";
+import { getAllMerCategory } from "@/api/goods";
+
+const list = ref<
+  {
+    ID?: number;
+    name?: string;
+    Classify: {
+      ID?: number;
+      name?: string;
+      icon?: string;
+    }[];
+  }[]
+>([]);
+
+Taro.useLoad(() => {
+  get_all_mer_category();
+});
+
+const get_all_mer_category = async () => {
+  const res = await getAllMerCategory();
+  list.value = res.data.data || [];
+};
+
+const toDetails = (item: any) => {
+  Taro.navigateTo({
+    url: `/pages/search/index?id=${item.ID}&name=${item.name}`,
+  });
+};
+</script>
+
+<style lang="scss">
+.app {
+  padding: 20px;
+}
+
+.container {
+  background-color: #fff;
+  padding: 10px;
+  border-radius: 10px;
+  margin-bottom: 20px;
+
+  .title {
+    font-weight: bold;
+    margin: 10px;
+  }
+
+  .navbar {
+    background-color: #ffffff;
+
+    .nut-grid-item__content {
+      padding: 15px;
+    }
+
+    image {
+      width: 80px;
+      height: 80px;
+    }
+  }
+}
+</style>
--- a/src/pages/index/index.vue
+++ b/src/pages/index/index.vue
@@ -5,34 +5,27 @@
      v-model="searchValue"
      placeholder="要搜索点什么？"
    ></nut-searchbar>
-    <!--  幻灯片  -->
-    <nut-swiper
-      :init-page="0"
-      :pagination-visible="true"
-      pagination-color="#000"
-      duration="1000"
-      :loop="false"
-    >
-      <nut-swiper-item v-for="(itm, idx) in swiperList" :key="idx">
-        <view
-          class="item"
-          v-for="(item, index) in itm"
-          :key="index"
-          @click="toDetails(item)"
-        >
-          <image :src="item.icon" />
-          <text>{{ item.name }}</text>
-        </view>
-      </nut-swiper-item>
-    </nut-swiper>
+    <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()" />
+        </nut-swiper-item>
+      </nut-swiper>
+    </view>
+
    <!--  金刚区  -->
    <view class="navbar">
-      <nut-grid :gutter="10" :border="false">
+      <nut-grid :border="false" column-num="5">
        <nut-grid-item
-          v-for="item in userMenuList"
-          :key="item.id"
-          :text="item.label"
-          @click="toPage(item.url)"
+          v-for="item in swiperList"
+          :key="item.ID"
+          :text="item.name"
+          @click="toDetails(item)"
        >
          <image :src="item.icon" />
        </nut-grid-item>
@@ -50,46 +43,25 @@ 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";

 const searchValue = ref("");

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

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

-const userMenuList = ref([
-  {
-    id: 1,
-    label: "活动游戏",
-    url: `/pages/game/gamehome/index?uid=${Taro.getStorageSync("token")}`,
-    icon: "//jdt168.com/uploads/merchant/20220829/caad6be8983e88c41d28da7d124bc37b.png",
-  },
-  // {
-  //   id: 2,
-  //   label: "活动商品",
-  //   url: "/pages/hotGoods/index/index",
-  //   icon: "//jdt168.com/uploads/def/20230509/d59e7fcb65a88bc56694dae4f9d21b51.png",
-  // },
-  {
-    id: 3,
-    label: "商户入驻",
-    url: "/pages/users/settled_mer/index",
-    icon: "//jdt168.com/uploads/merchant/20220829/6fe67b93721a42aedc842c4f19d6f2d3.png",
-  },
-  {
-    id: 4,
-    label: "最新资讯",
-    url: "",
-    icon: "//jdt168.com/uploads/merchant/20220829/b975136a9b64aab69bf11d75a194f1ea.png",
-  },
-]);
+const bannerList = ref<any[]>([]);

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

 Taro.useShareAppMessage(() => ({
@@ -100,59 +72,96 @@ Taro.useShareAppMessage(() => ({
 }));

 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 < 31; i++) {
-    //   data.data.push({
-    //     ID: i,
-    //     icon: "//jdt168.com/uploads/def/20230509/d59e7fcb65a88bc56694dae4f9d21b51.png",
-    //     name: "活动商品",
-    //   });
-    // }
-    // 数组分组
-    const arr = [];
-    for (let i = 0; i < data.data.length; i += 10) {
-      arr.push(data.data.slice(i, i + 10));
+    for (let i = 0; i < data.data.length; i++) {
+      swiperList.value.push({
+        type: 2,
+        ...data.data[i],
+      });
    }
-    swiperList.value = arr;
  }
 };

-const toPage = (url: string) => {
-  Taro.navigateTo({
-    url: url,
-  });
+const get_banner_list = async () => {
+  const { data }: any = await getBanner();
+  bannerList.value = data.data;
 };

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

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

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

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

-      image {
-        width: 100px;
-        height: 100px;
-        border-radius: 50%;
+        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%;
@@ -171,6 +180,10 @@ const toDetails = (item: SwiperList) => {
 .navbar {
  background-color: #ffffff;

+  .nut-grid-item__content {
+    padding: 15px;
+  }
+
  image {
    width: 80px;
    height: 80px;
--- a/src/pages/search/index.vue
+++ b/src/pages/search/index.vue
@@ -6,7 +6,6 @@ import MerList from "@/components/MerList.vue";
 const classId = ref<null | number>(null);

 Taro.useLoad((e) => {
-  console.log(e);
  Taro.setNavigationBarTitle({
    title: e.name,
  });