feat(custom): build

src/pages/index/index.vue

@@ -9,11 +9,20 @@
     <nut-swiper
       :init-page="0"
       :pagination-visible="true"
-      pagination-color="#426543"
-      auto-play="3000"
+      pagination-color="#000"
+      duration="1000"
+      :loop="false"
     >
       <nut-swiper-item v-for="(itm, idx) in swiperList" :key="idx">
-        <img :alt="itm.ID.toString()" :src="itm.url" />
+        <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>
     <!--  金刚区  -->
@@ -29,29 +38,7 @@
         </nut-grid-item>
       </nut-grid>
     </view>
-    <view class="goodBox">
-      <view
-        class="good"
-        v-for="item in (merdata as any[])"
-        :key="item.ID"
-        @click.stop="toMerDetails(item)"
-      >
-        <image :src="(item.head_photo as string)" />
-        <view class="good-text-box">
-          <text class="good-text">{{ item.name }}</text>
-          <text style="color: #999"
-            >距离我{{
-              calculateDistance(
-                userLocalNum.t,
-                userLocalNum.l,
-                Number(item.lat),
-                Number(item.lon)
-              )
-            }}
-          </text>
-        </view>
-      </view>
-    </view>
+    <MerList />
     <!--    签到弹窗    -->
     <Popup />
   </view>
@@ -60,59 +47,50 @@
 <script lang="ts" setup>
 import { ref } from "vue";
 import Taro from "@tarojs/taro";
-import { bindParent, getBanner } from "@/api/user";
-import { getMerList } from "@/api/goods";
-import { calculateDistance } from "@/utils";
 import Popup from "@/components/Popup.vue";
+import MerList from "@/components/MerList.vue";
+import { getHomeList } from "@/api/home";
 
 const searchValue = ref("");
 
-const swiperList = ref<any>([]);
+interface SwiperList {
+  ID: number;
+  icon: string;
+  name: string;
+}
+
+const swiperList = ref<Array<Array<SwiperList>>>([]);
 
 const userMenuList = ref([
   {
     id: 1,
     label: "活动游戏",
     url: `/pages/game/gamehome/index?uid=${Taro.getStorageSync("token")}`,
-    icon: "http://jdt168.com/uploads/merchant/20220829/caad6be8983e88c41d28da7d124bc37b.png",
+    icon: "//jdt168.com/uploads/merchant/20220829/caad6be8983e88c41d28da7d124bc37b.png",
   },
   {
     id: 2,
     label: "活动商品",
-    url: "/pages/hotGoods/index/index",
-    icon: "http://jdt168.com/uploads/def/20230509/d59e7fcb65a88bc56694dae4f9d21b51.png",
+    // url: "/pages/hotGoods/index/index",
+    url: "",
+    icon: "//jdt168.com/uploads/def/20230509/d59e7fcb65a88bc56694dae4f9d21b51.png",
   },
   {
     id: 3,
     label: "商户入驻",
     url: "/pages/users/settled_mer/index",
-    icon: "http://jdt168.com/uploads/merchant/20220829/6fe67b93721a42aedc842c4f19d6f2d3.png",
+    icon: "//jdt168.com/uploads/merchant/20220829/6fe67b93721a42aedc842c4f19d6f2d3.png",
   },
   {
     id: 4,
     label: "最新资讯",
     url: "",
-    icon: "http://jdt168.com/uploads/merchant/20220829/b975136a9b64aab69bf11d75a194f1ea.png",
+    icon: "//jdt168.com/uploads/merchant/20220829/b975136a9b64aab69bf11d75a194f1ea.png",
   },
 ]);
 
 Taro.useDidShow(async () => {
   await getBannerList();
-  await get_mer_list();
-  if (Taro.getStorageSync("token") && Taro.getStorageSync("bind_id")) {
-    try {
-      const res = await bindParent({
-        uid: Taro.getStorageSync("bind_id"),
-      });
-      Taro.showToast({
-        title: res.msg,
-      });
-      Taro.removeStorageSync("bind_id");
-    } catch (error) {
-      Taro.removeStorageSync("bind_id");
-      throw error;
-    }
-  }
 });
 
 Taro.useShareAppMessage(() => ({
@@ -122,34 +100,23 @@ Taro.useShareAppMessage(() => ({
     "https://upload.jdt168.com/1694242954957988438_微信图片_20230909150016.jpg",
 }));
 
-const merdata = ref([]);
-
-const userLocalNum = ref({
-  l: 0,
-  t: 0,
-});
-
-const get_mer_list = async () => {
-  Taro.getLocation({
-    type: "wgs84",
-    success: (res) => {
-      userLocalNum.value.l = res.longitude;
-      userLocalNum.value.t = res.latitude;
-    },
-  });
-
-  const res = await getMerList({
-    PageNum: 1,
-    PageSize: 10,
-    Btype: 2,
-    classid: 0,
-  });
-  merdata.value = res.data.data;
-};
-
 const getBannerList = async () => {
-  const { data }: any = await getBanner();
-  swiperList.value = data.data;
+  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));
+    }
+    swiperList.value = arr;
+  }
 };
 
 const toPage = (url: string) => {
@@ -158,18 +125,33 @@ const toPage = (url: string) => {
   });
 };
 
-const toMerDetails = (item: any) => {
-  Taro.setStorageSync("mer_info", item);
+const toDetails = (item: SwiperList) => {
   Taro.navigateTo({
-    url: `/pages/mer/mer_detail/index`,
+    url: `/pages/search/index?id=${item.ID}&name=${item.name}`,
   });
 };
 </script>
 
 <style lang="scss">
-.nut-swiper-item img {
-  width: 100%;
-  height: 350px;
+.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%;
+      }
+    }
+  }
 }
 
 .titleImg {
@@ -195,57 +177,4 @@ const toMerDetails = (item: any) => {
     height: 80px;
   }
 }
-
-.goodBox {
-  display: flex;
-  padding: 20px;
-  flex-wrap: wrap;
-  justify-content: space-between;
-
-  .good {
-    width: 340px;
-    background-color: #fff;
-    margin-bottom: 20px;
-    border-radius: 10px;
-
-    image {
-      width: 100%;
-      height: 250px;
-      border-top-right-radius: 10px;
-      border-top-left-radius: 10px;
-    }
-
-    .good-text-box {
-      padding: 10px;
-
-      .good-text {
-        flex-shrink: 0;
-        font-size: 28px;
-        color: #333;
-        font-weight: 400;
-        display: -webkit-box;
-        -webkit-box-orient: vertical;
-        -webkit-line-clamp: 1;
-        overflow: hidden;
-        word-break: break-word;
-      }
-
-      .good-price-box {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        margin-top: 10px;
-
-        .good-text-price {
-          font-size: 28px;
-          font-weight: bold;
-          color: #ff0000;
-          -webkit-box-orient: vertical;
-          -webkit-line-clamp: 1;
-          overflow: hidden;
-        }
-      }
-    }
-  }
-}
 </style>