applet/pages/tabtar/city.vue

<template>
  <view class="container">
    <uv-sticky :top="0" :customNavHeight="0">
      <uv-navbar title="本地生活" leftIconSize="0" :border="false" bgColor="#fbcd17"
        titleStyle="font-weight: 700;color: #1A1A1A;" placeholder :fixed="false"></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.businessName" 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="initData(param)">
            <template #suffix>
              <view class="search-action" @click.stop="initData(param)">搜索</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"
          @click="bannerClick"></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.stop="goShop(v)">
              <view class="img">
                <image class="u-skeleton-fillet" :src="v.categoryIcon" 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.stop="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) in RowsList" :key="v.businessId" :v="v" />
        </view>
      </view>
      <view>
        <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 } from "@/api/index.js";
import { getBusinessList, getBusinessCategoryList } from "@/api/shop.js";
import ShopItem from "../nearbyShop/components/ShopItem.vue";
import $util from "@/util/index";
const RowsList = ref([]);
const regionSelectionRef = ref(null);
const cityName = ref("武汉市");
const param = reactive({
  businessName: undefined,
  // cityCode: 420100, //武汉市
});
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.categoryId || "") +
      "&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 = () => {
  getBusinessCategoryList().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",
      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);
};

// 轮播图点击事件
const bannerClick = (index) => {
  const item = bannerList.value[index] || {};
  // console.log(item);
  $util.imgLink(item);
};

const initData = (params) => {
  uni.showLoading({
    title: '加载中',
    mask: true
  })
  getBusinessList(params).then((res) => {
    uni.hideLoading();
    if (res && res.code == 200) {
      RowsList.value = res.data || [];
    } else {
      RowsList.value = [];
    }
  }).finally(() => {
    uni.stopPullDownRefresh();
  });
}

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

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

<style lang="scss" scoped>
.container {
  .search-top {
    // position: fixed;
    width: 100%;
    // height: 110rpx;
    // display: flex;
    // justify-content: space-between;
    // align-items: center;
    padding: 0 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>