|
|
@@ -1,15 +1,8 @@
|
|
|
<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>
|
|
|
+ <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>
|
|
|
@@ -17,21 +10,11 @@
|
|
|
<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)"
|
|
|
- >
|
|
|
+ <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">搜索</view>
|
|
|
+ <view class="search-action" @click.stop="initData(param)">搜索</view>
|
|
|
</template>
|
|
|
</uv-search>
|
|
|
</view>
|
|
|
@@ -41,32 +24,17 @@
|
|
|
<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>
|
|
|
+ <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 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="item" v-for="(v, i) in el" :key="i" @click.stop="goShop(v)">
|
|
|
<view class="img">
|
|
|
- <image
|
|
|
- class="u-skeleton-fillet"
|
|
|
- :src="v.icon"
|
|
|
- mode="widthFix"
|
|
|
- ></image>
|
|
|
+ <image class="u-skeleton-fillet" :src="v.categoryIcon" mode="widthFix"></image>
|
|
|
</view>
|
|
|
<text class="u-skeleton-fillet">{{ v.name || "加载中" }}</text>
|
|
|
</view>
|
|
|
@@ -77,48 +45,39 @@
|
|
|
<view class="store-bg">
|
|
|
<image class="store-bg-image" src="/static/store.png" mode="">
|
|
|
</image>
|
|
|
- <view class="store-bg-btn" @click="goShop()">
|
|
|
+ <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, index) in RowsList" :key="v.businessId" :v="v" />
|
|
|
+ <ShopItem v-for="(v) 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>
|
|
|
+ <uv-skeleton :loading="skeletonShow" :animation="true" bgColor="#FFF"></uv-skeleton>
|
|
|
</view>
|
|
|
|
|
|
<!-- 地区选择 -->
|
|
|
- <RegionSelection
|
|
|
- ref="regionSelectionRef"
|
|
|
- :hierarchy="2"
|
|
|
- @confirm="addressConfirm"
|
|
|
- />
|
|
|
+ <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 { getAdList_Api } from "@/api/index.js";
|
|
|
+import { getBusinessList, getBusinessCategoryList } from "@/api/shop.js";
|
|
|
import ShopItem from "../nearbyShop/components/ShopItem.vue";
|
|
|
-
|
|
|
-const { RowsList, LoadStatus, initData } = usePageData(getBusinessPage);
|
|
|
+import $util from "@/util/index";
|
|
|
+const RowsList = ref([]);
|
|
|
const regionSelectionRef = ref(null);
|
|
|
-const cityName = ref("洪山区");
|
|
|
+const cityName = ref("武汉市");
|
|
|
const param = reactive({
|
|
|
- keyword: "",
|
|
|
+ businessName: undefined,
|
|
|
+ // cityCode: 420100, //武汉市
|
|
|
});
|
|
|
const iconList = ref([]);
|
|
|
const bannerList = ref([]);
|
|
|
@@ -134,7 +93,7 @@ const goShop = (item = {}) => {
|
|
|
uni.navigateTo({
|
|
|
url:
|
|
|
"/pages/nearbyShop/list?id=" +
|
|
|
- (item.id || "") +
|
|
|
+ (item.categoryId || "") +
|
|
|
"&cityName=" +
|
|
|
cityName.value +
|
|
|
"&cityCode=" +
|
|
|
@@ -161,7 +120,7 @@ const chunk = (arr, size) => {
|
|
|
|
|
|
// 获取分类列表
|
|
|
const getTypeList = () => {
|
|
|
- getQuickLinkList_Api("local_life").then((res) => {
|
|
|
+ getBusinessCategoryList().then((res) => {
|
|
|
if (res && res.code == 200) {
|
|
|
const list = res.data || [];
|
|
|
iconList.value = chunk(list, 10);
|
|
|
@@ -177,7 +136,6 @@ const getLocation = () =>
|
|
|
new Promise((resolve, reject) => {
|
|
|
uni.getLocation({
|
|
|
type: "gcj02",
|
|
|
- geocode: true,
|
|
|
success: resolve,
|
|
|
fail: reject,
|
|
|
});
|
|
|
@@ -196,25 +154,52 @@ const addressConfirm = (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();
|
|
|
- getLocation().then((res) => {
|
|
|
- console.log("当前位置", res);
|
|
|
- param.longitude = res.longitude;
|
|
|
- param.latitude = res.latitude;
|
|
|
- // initData({
|
|
|
- // latitude: res.latitude,
|
|
|
- // longitude: res.longitude,
|
|
|
- // });
|
|
|
- });
|
|
|
+ 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();
|
|
|
+ // initData(param);
|
|
|
});
|
|
|
|
|
|
onPullDownRefresh(() => {
|
|
|
getBanner();
|
|
|
getTypeList();
|
|
|
+ initData(param);
|
|
|
});
|
|
|
</script>
|
|
|
|
|
|
@@ -243,6 +228,7 @@ onPullDownRefresh(() => {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
margin-bottom: 20rpx;
|
|
|
+
|
|
|
view {
|
|
|
max-width: 100rpx;
|
|
|
white-space: nowrap;
|
|
|
@@ -390,6 +376,7 @@ onPullDownRefresh(() => {
|
|
|
width: 141rpx;
|
|
|
height: 33rpx;
|
|
|
}
|
|
|
+
|
|
|
.store-bg-btn {
|
|
|
width: 165rpx;
|
|
|
height: 58rpx;
|