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

<template>
  <view>
    <view :style="{marginTop: BarHeight + 'px'}"></view>
    <view class="local">
      <view class="iconfont icon-dizhi" style="font-size: 20px"></view>
      <text class="text-[28px]">{{ 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">
      <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="navigation">
      <view
        class="item"
        v-for="(item, index) in navigationList"
        :key="index"
        @click="toPage(item)">
        <image class="icon" :src="item.icon" />
        <view class="text">{{ item.name }}</view>
      </view>
    </view>
    <view class="ad" @click="showTips('该功能暂未开放')"></view>
    <MerList :get-user-location="getUserLocal" />
  </view>
</template>

<script setup lang="ts">
import Taro from '@tarojs/taro';
import {ref} from 'vue';
import {getHomeList, getStoreList} from '@/api/home';
import MerList from '@/components/MerList.vue';
import {showTips} from '@/utils';

const statusBarHeight = Taro.getSystemInfoSync().statusBarHeight;
const BarHeight = ref((statusBarHeight as number) + 7);

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

const navigationList = ref<Array<navigationType>>([]);

Taro.useShareAppMessage(() => ({
  title: '捷兑通',
  path: `/pages/index/index?scene=${Taro.getStorageSync('token')}`,
  imageUrl: 'https://upload.jdt168.com/1714375021923881119_Share.jpg',
}));

const searchVal = ref('');

const clickSearch = () => {
  if (!searchVal.value)
    return Taro.showToast({
      title: '请输入商家名称再搜索',
      icon: 'none',
    });
  Taro.navigateTo({
    url: `/pages/search/index?name=${searchVal.value}`,
  });
  searchVal.value = '';
};

Taro.useLoad(async () => {
  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.district}${data.street_number}`;
        },
      });
    },
  });
};

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 toPage = item => {
  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">
@import './index.scss';
</style>