applet/pages/tabtar/city.vue

<template>
  <view class="container">
    <uv-sticky>
      <uv-navbar
        title="本地生活"
        leftIconSize="0"
        :border="false"
        bgColor="#fbcd17"
        titleStyle="font-weight: 700;color: #1A1A1A;"
        placeholder
      ></uv-navbar>
      <view class="search-top">
        <view class="city-text" @click="regionSelectionRef.open()">
          <uv-icon name="map" color="#000000" size="28rpx"></uv-icon>
          <view>{{ cityName }}</view>
          <uv-icon name="arrow-right" color="#000000" size="30rpx"></uv-icon>
        </view>
        <view class="searchBox">
          <uv-search
            v-model="param.keyword"
            shape="round"
            :clearabled="false"
            :showAction="false"
            height="80rpx"
            bg-color="#f7f7f7"
            border-color="#D9D9D9"
            laceholder-color="#CCCCCC"
            search-icon="/static/image/order/icon_search.png"
            @search="$uv.throttle(search, 1000)"
            @custom="$uv.throttle(search, 1000)"
          >
            <template #suffix>
              <view class="search-action">搜索</view>
            </template>
          </uv-search>
        </view>
      </view>
    </uv-sticky>
    <!-- <view style="height: 86rpx"></view> -->
    <view class="u-skeleton">
      <view class="banner" v-if="bannerList.length > 0 || skeletonShow">
        <!-- <image src="/static/shop/banner.png" mode="aspectFill"></image> -->
        <uv-swiper
          class="u-skeleton-fillet"
          :list="bannerList"
          keyName="image"
          height="360rpx"
          :indicatorMode="bannerList.length > 1 ? 'round' : 'none'"
          bgColor="transparent"
        ></uv-swiper>
      </view>
      <view class="menu" v-if="iconList.length > 0 || skeletonShow">
        <swiper
          class="swiper u-skeleton-fillet"
          :indicator-dots="true"
          :autoplay="false"
          :current="current"
          :style="{ height: menuHeight }"
          @change="swiperChange"
        >
          <swiper-item class="swiper-item" v-for="(el, k) in iconList" :key="k">
            <view class="item" v-for="(v, i) in el" :key="i" @click="goShop(v)">
              <view class="img">
                <image
                  class="u-skeleton-fillet"
                  :src="v.icon"
                  mode="widthFix"
                ></image>
              </view>
              <text class="u-skeleton-fillet">{{ v.name || "加载中" }}</text>
            </view>
          </swiper-item>
        </swiper>
      </view>
      <view class="con-box">
        <view class="store-bg">
          <image class="store-bg-image" src="/static/store.png" mode="">
          </image>
          <view class="store-bg-btn" @click="goShop()">
            <text class="text">查看更多</text>
            <uv-icon name="arrow-right" color="#fbbd1c" size="24rpx"></uv-icon>
          </view>
        </view>
        <view class="items">
          <ShopItem v-for="(v, index) in RowsList" :key="v.businessId" :v="v" />
        </view>
      </view>
      <view>
        <loadMore v-if="RowsList.length > 0" :status="LoadStatus"></loadMore>
        <noData v-if="RowsList.length <= 0" :config="{ top: 2 }"></noData>
      </view>
      <uv-skeleton
        :loading="skeletonShow"
        :animation="true"
        bgColor="#FFF"
      ></uv-skeleton>
    </view>

    <!-- 地区选择 -->
    <RegionSelection
      ref="regionSelectionRef"
      :hierarchy="2"
      @confirm="addressConfirm"
    />
  </view>
</template>

<script setup>
import { computed, reactive, ref } from "vue";
import { onLoad, onPullDownRefresh } from "@dcloudio/uni-app";
import { getAdList_Api, getQuickLinkList_Api } from "@/api/index.js";
import { getBusinessPage } from "@/api/shop.js";
import { usePageData } from "@/hooks/usePageData.ts";
import ShopItem from "../nearbyShop/components/ShopItem.vue";

const { RowsList, LoadStatus, initData } = usePageData(getBusinessPage);
const regionSelectionRef = ref(null);
const cityName = ref("洪山区");
const param = reactive({
  keyword: "",
});
const iconList = ref([]);
const bannerList = ref([]);
const current = ref(0);
const skeletonShow = ref(true);

const menuHeight = computed(() => {
  const items = iconList.value[current.value] || [];
  return items.length > 5 ? "350rpx" : "150rpx";
});

const goShop = (item = {}) => {
  uni.navigateTo({
    url:
      "/pages/nearbyShop/list?id=" +
      (item.id || "") +
      "&cityName=" +
      cityName.value +
      "&cityCode=" +
      (param.cityCode || ""),
  });
};
// 获取banner广告
const getBanner = () => {
  getAdList_Api("local_life_banner").then((res) => {
    if (res && res.code == 200) {
      bannerList.value = res.data || [];
    } else {
      bannerList.value = [];
    }
  });
};

// 分组
const chunk = (arr, size) => {
  const res = [];
  for (let i = 0; i < arr.length; i += size) res.push(arr.slice(i, i + size));
  return res;
};

// 获取分类列表
const getTypeList = () => {
  getQuickLinkList_Api("local_life").then((res) => {
    if (res && res.code == 200) {
      const list = res.data || [];
      iconList.value = chunk(list, 10);
      current.value = 0;
    } else {
      iconList.value = [];
    }
  });
};

// 获取当前位置
const getLocation = () =>
  new Promise((resolve, reject) => {
    uni.getLocation({
      type: "gcj02",
      geocode: true,
      success: resolve,
      fail: reject,
    });
  });

const swiperChange = (e) => {
  if (!e) return;
  current.value = e.detail.current;
};
// 地区选择确认
const addressConfirm = (e = {}) => {
  // console.log(e);
  const picked = e.areaName || e.cityName || e.provinceName;
  cityName.value = picked || cityName.value;
  Object.assign(param, { ...e });
  initData(param);
};

onLoad(() => {
  getBanner();
  getTypeList();
  getLocation().then((res) => {
    console.log("当前位置", res);
    param.longitude = res.longitude;
    param.latitude = res.latitude;
    initData({
      latitude: res.latitude,
      longitude: res.longitude,
    });
  });
  skeletonShow.value = false;
  // initData();
});

onPullDownRefresh(() => {
  getBanner();
  getTypeList();
});
</script>

<style lang="scss" scoped>
.container {
  .search-top {
    // position: fixed;
    width: 100%;
    // height: 110rpx;
    // display: flex;
    // justify-content: space-between;
    // align-items: center;
    padding: 10rpx 30rpx 26rpx 30rpx;
    background-color: #fbcd17;
    // z-index: 3;
    box-sizing: border-box;
  }

  .city-text {
    margin-right: 12rpx;
    font-size: 28rpx;
    font-family: PingFang SC, PingFang SC-Regular;
    font-weight: 400;
    text-align: center;
    color: #000000;
    display: flex;
    align-items: center;
    margin-bottom: 20rpx;
    view {
      max-width: 100rpx;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      font-weight: 700;
    }

    image {
      width: 26rpx;
      height: 36rpx;
      margin-right: 10rpx;
      vertical-align: middle;
    }
  }

  .searchBox {
    position: relative;
    flex: 1;
    box-sizing: border-box;
    // width: 580rpx;
    // height: 80rpx;

    image {
      width: 35rpx;
      height: 35rpx;
    }

    .search-action {
      width: 124rpx;
      height: 70rpx;
      background: #fbd415;
      border-radius: 35rpx;
      font-size: 30rpx;
      font-family: PingFang SC, PingFang SC-Regular;
      font-weight: 400;
      color: #1a1a1a;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 0rpx;
    }
  }
}

.banner {
  width: 100%;
  height: 360rpx;
  // padding: 0rpx 30rpx 0;
  margin-bottom: 20rpx;
  box-sizing: border-box;

  image {
    width: 100%;
    height: 100%;
  }

  ::v-deep uni-swiper {
    height: 360rpx !important;
    box-sizing: border-box;
  }
}

.menu {
  display: flex;
  // justify-content: space-between;
  // align-items: center;
  flex-wrap: wrap;
  padding: 0 30rpx;
  margin: 22rpx 0;

  .swiper {
    width: 100%;
    height: auto;
    transition: all 0.3s;

    ::v-deep .uni-swiper-dots-horizontal {
      bottom: 0;

      .uni-swiper-dot-active {
        background-color: #fa6138;
      }
    }
  }

  .swiper-item {
    display: flex;
    flex-wrap: wrap;
  }

  .item {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 20%;
    margin-bottom: 20rpx;

    .img {
      width: 94rpx;
      height: 94rpx;
      margin-bottom: 13rpx;
      // border-radius: 50%;
      overflow: hidden;

      image {
        width: 100%;
        height: 100%;
      }
    }

    text {
      width: 100%;
      font-size: 26rpx;
      font-family: PingFang SC, PingFang SC-Regular;
      font-weight: 400;
      text-align: center;
      color: #1a1a1a;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }

  // .item:nth-child(5n) {
  //   margin-right: 0;
  // }
}

.con-box {
  // padding: 0 0;
  background: linear-gradient(180deg, #fff8e3, rgba(255, 249, 233, 0) 200rpx);

  .store-bg {
    width: 750rpx;
    height: 118rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 30rpx;
    box-sizing: border-box;
    // background: url("/static/store_bg.png") no-repeat;
    background-size: 100% 117rpx;

    .store-bg-image {
      width: 141rpx;
      height: 33rpx;
    }
    .store-bg-btn {
      width: 165rpx;
      height: 58rpx;
      background: #ffffff;
      border-radius: 29rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24rpx;
      font-weight: 400;
      color: #fbbd1c;
    }
  }

  .u-section {
    margin-bottom: 27rpx;

    ::v-deep .uicon-arrow-right:before {
      color: #666;
    }
  }

  .items {
    padding: 0 30rpx;
  }
}
</style>