wip: 4.0

src/pages/index/index.vue

@@ -1,172 +1,149 @@
 <template>
-  <view class="app">
-    <!--  搜索  -->
-    <nut-searchbar
-      v-model="searchValue"
-      placeholder="要搜索点什么？"
-    ></nut-searchbar>
+  <view>
+    <view :style="{marginTop: BarHeight + 'px'}"></view>
+    <view class="local">
+      <view class="iconfont icon-dizhi" style="font-size: 20px"></view>
+      <text>{{ address }}</text>
+    </view>
+    <view class="search">
+      <view
+        class="iconfont icon-sousuo"
+        style="color: #8f8f8f; margin-right: 8px"></view>
+      <input placeholder="请输入商家名称搜索" v-model="searchVal" />
+      <view class="search-btn" @click="clickSearch">搜索</view>
+    </view>
     <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 class="title"></view>
+      <navigator class="jf-btn" hover-class="none"></navigator>
+      <view class="footer">
+        <navigator hover-class="none" class="btn-1"></navigator>
+        <navigator
+          hover-class="none"
+          openType="switchTab"
+          url="/pages/game/gamehome/index"
+          class="btn-2"></navigator>
+        <navigator hover-class="none" class="btn-3"></navigator>
+      </view>
     </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 class="navigation">
+      <view
+        class="item"
+        v-for="(item, index) in navigationList"
+        :key="index"
+        @click="toPage(item)">
+        <view
+          class="icon"
+          :style="{
+            backgroundImage: `url(${item.icon})`,
+          }">
+        </view>
+        <view class="text">{{ item.name }}</view>
+      </view>
     </view>
-    <MerList />
-    <!--    签到弹窗    -->
-    <Popup
-      v-for="(item, index) in popupList"
-      :ref="(el) => getRef(el, item.type)"
-      :type="item.type"
-      :src="item.src"
-      :cb="item.cb"
-      :key="index"
-    />
+    <view class="ad" @click="showTips('该功能暂未开放')"></view>
+    <MerList :get-user-location="getUserLocal" />
   </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, userSign } from "@/api/user";
-import { parseQueryString } from "@/utils";
-import { getMerList } from "@/api/goods";
-import game_1 from "../../static/index/game_1.png";
+<script setup lang="ts">
+import Taro from '@tarojs/taro';
+import {ref} from 'vue';
+import {getHomeList} from '@/api/home';
+import MerList from '@/components/MerList.vue';
+import {showTips} from '@/utils';
 
-const searchValue = ref("");
+const statusBarHeight = Taro.getSystemInfoSync().statusBarHeight;
+const BarHeight = ref((statusBarHeight as number) + 7);
 
-interface SwiperList {
+interface navigationType {
   ID?: number;
-  icon?: string;
-  name?: string;
-  url?: string;
-  type?: number;
+  type: number;
+  icon: string;
+  name: string;
+  url: string;
 }
 
-const swiperList = ref<Array<SwiperList>>([]);
-
-const bannerList = ref<any[]>([]);
-
-const popupRefs = ref<Map<number, any>>(new Map());
-
-const getRef = (el, type) => {
-  popupRefs.value.set(type, el);
-};
-
-const popupList = ref([
-  // {
-  //   type: 1,
-  //   src: require("../../static/index/poppBg.png"),
-  //   cb: async (type) => {
-  //     await userSign();
-  //     Taro.showToast({
-  //       title: "签到成功",
-  //       icon: "none",
-  //     });
-  //     popupRefs.value.get(type).show = false;
-  //   },
-  // },
-  {
-    type: 2,
-    src: "//upload.jdt168.com/1714381111493034239_game_1.png",
-    cb: (type) => {
-      Taro.setStorageSync(
-        "game_url",
-        `${process.env.TARO_APP_FISH_GAME}${Taro.getStorageSync("token")}`
-      );
-      Taro.navigateTo({
-        url: `/pages/game/view/index`,
-      });
-      popupRefs.value.get(type).show = false;
-    },
-  },
-]);
-
-Taro.useDidShow(async () => {
-  await getBannerList();
-  await get_banner_list();
-});
+const navigationList = ref<Array<navigationType>>([]);
 
 Taro.useShareAppMessage(() => ({
-  title: "捷兑通",
-  path: `/pages/index/index?scene=${Taro.getStorageSync("token")}`,
-  imageUrl: "https://upload.jdt168.com/1714375021923881119_Share.jpg",
+  title: '捷兑通',
+  path: `/pages/index/index?scene=${Taro.getStorageSync('token')}`,
+  imageUrl: 'https://upload.jdt168.com/1714375021923881119_Share.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 searchVal = ref('');
+const clickSearch = () => {
+  if (!searchVal.value)
+    return Taro.showToast({
+      title: '请输入商家名称再搜索',
+      icon: 'none',
+    });
+  searchVal.value = '';
+};
+
+Taro.useLoad(() => {
+  getNavLists();
+  getUserLocal();
+});
+
+const address = ref('获取位置中......');
+
+const getUserLocal = async () => {
+  Taro.getLocation({
+    type: 'wgs84',
+    success: res => {
+      Taro.request({
+        url: `https://apis.map.qq.com/ws/geocoder/v1/?location=${res.latitude},${res.longitude}&key=S3GBZ-WR26O-IXNW2-SXBOD-LZXV6-WAFNO&get_poi=1`,
+        method: 'GET',
+        success: res => {
+          const data = res.data.result.address_component;
+          address.value = `${data.city}${data.district}${data.street_number}`;
+        },
       });
-    }
-  }
+    },
+  });
 };
 
-const get_banner_list = async () => {
-  const { data }: any = await getBanner();
-  bannerList.value = data.data;
+const getNavLists = async () => {
+  navigationList.value = [
+    {
+      type: 1,
+      icon: '//p0.meituan.net/csc/5c770748f0028c63741c5ec14df3cc386715.png',
+      url: '',
+      name: '活动商家',
+    },
+    {
+      type: 1,
+      icon: '//p0.meituan.net/csc/4868c06b99008ff7d5f81e6514858c8a7950.png',
+      url: '',
+      name: '兑换商家',
+    },
+    {
+      type: 1,
+      icon: '//p0.meituan.net/csc/f33ad2443a67e9f3474a1d5fd9d529db7504.png',
+      url: '/pages/users/settled_mer/index',
+      name: '商户入驻',
+    },
+    {
+      type: 1,
+      icon: '//p0.meituan.net/csc/0403cf37dd14a6b44b22ffccaa2878f95703.png',
+      url: '/pages/allClassList/index',
+      name: '全部服务',
+    },
+  ];
+  const res = await getHomeList();
+  res.data.data.forEach(item => {
+    navigationList.value.unshift({
+      ID: item.ID,
+      type: 2,
+      icon: item.icon,
+      url: item.url,
+      name: item.name,
+    });
+  });
 };
 
-const toDetails = (item: SwiperList) => {
+const toPage = item => {
   item.type !== 1
     ? Taro.navigateTo({
         url: `/pages/search/index?id=${item.ID}&name=${item.name}`,
@@ -175,79 +152,8 @@ const toDetails = (item: SwiperList) => {
         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;
-  }
-}
+@import './index.scss';
 </style>