merge

src/pages/tabbar/home.vue

@@ -0,0 +1,329 @@
+<template>
+	<view class="home">
+		<view>
+			<!-- 顶部导航 -->
+			<view class="nav-bar">
+				<u-navbar :bgColor="'#ffffff'" :placeholder="true">
+					<view slot="left" @click.stop="manualGetLocation">
+						<text>{{ nowAddress }}</text>
+						<text class="iconfont icon-chevron-down" />
+					</view>
+					<view slot="center">
+						<u-search placeholder="请输入搜索内容" :showAction="false" v-model="keyword"
+							@click="$Router.push('/pagesHome/homeSearch')" :disabled="true" />
+					</view>
+				</u-navbar>
+			</view>
+
+
+
+			<!-- 轮播图 -->
+			<view class="home-swiper">
+				<u-swiper :list="swiperUrlList" @click="handlerSwiperSkip" indicator />
+			</view>
+
+			<!-- 商品分类 -->
+			<view class="home-list">
+				<u-grid :border="false" col="5">
+					<u-grid-item v-for="item in categories" :key="item.id" @tap="handleMenuClick(item)">
+						<u-icon :customStyle="{ paddingTop: 20 + 'rpx' }" :name="item.icon" :size="25"></u-icon>
+						<text class="grid-text">{{ item.name }}</text>
+					</u-grid-item>
+				</u-grid>
+				<u-toast ref="uToast" />
+			</view>
+
+			<!-- 热门推荐 -->
+			<view class="hot">
+				<u-cell :border="false" value="查看更多" isLink @click="$Router.push('/pagesHome/home/popularRecommend')">
+					<view slot="title" class="hot-title"> 热门推荐 </view>
+				</u-cell>
+				<block v-if="homeData.recommends && homeData.recommends.length > 0">
+					<view>
+						<u-grid :border="false" col="2">
+							<u-grid-item @click="$Router.push(`/pagesHome/marketer/index?id=${item.id}`)"
+								v-for="(item,index) in homeData.recommends" :key="item.id">
+								<recommend-item v-if="index < 4" :item="item"></recommend-item>
+							</u-grid-item>
+						</u-grid>
+					</view>
+				</block>
+				<block v-else>
+					<u-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png">
+					</u-empty>
+				</block>
+			</view>
+
+			<!-- 附近商家 -->
+			<view class="near">
+				<u-cell :border="false" value="查看更多" isLink @click="$Router.push('/pagesHome/home/nearbyBusiness')">
+					<view slot="title" class="near-title"> 附近商家 </view>
+				</u-cell>
+				<block v-if="homeData.nears && homeData.nears.length > 0">
+					<view>
+						<u-grid :border="false" col="2">
+							<u-grid-item @click="$Router.push(`/pagesHome/marketer/index?id=${item.id}`)"
+								v-for="(item,index) in homeData.nears" :key="item.id">
+								<hot-item v-if="index < 4" :item="item"></hot-item>
+							</u-grid-item>
+						</u-grid>
+					</view>
+				</block>
+				<block v-else>
+					<u-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png">
+					</u-empty>
+				</block>
+			</view>
+
+			<!-- 询价 -->
+			<!-- <drag-button :isDock="true" :existTabBar="true" @btnClick="btnClick" /> -->
+		</view>
+	</view>
+</template>
+
+<script>
+	import { getCurrentLocation, getHomePageApi, getSwiperListApi } from '@/api/client/home';
+	import RecommendItem from './components/RecommendItem.vue';
+	import HotItem from './components/HotItem.vue';
+	import { getMapLocation } from "@/utils/mapUtil.js"
+	import { mapGetters } from 'vuex';
+	export default {
+		components: {
+			RecommendItem,
+			HotItem,
+		},
+		data() {
+			return {
+				list: [],
+				keyword: '',
+				swiperUrlList: [], // 轮播图url列表
+				swiperList: [],
+				homeData: {
+					categories: [],
+					nears: [],
+					recommends: [],
+				},
+				queryParams: {
+					longitude: '',
+					latitude: '',
+					region: ''
+				},
+				nowAddress: '', //当前地址
+			};
+		},
+
+		computed: {
+			...mapGetters(['location']),
+			categories() {
+				let initData = this.homeData.categories.map(item => {
+					if (!item.icon) {
+						item.icon = 'level';
+					}
+					return item;
+				});
+				let result =
+					initData.length > 14 ?
+					initData.splice(0, 14).concat([{
+						id: 'all',
+						icon: 'grid-fill',
+						name: '全部',
+						type: {
+							code: 'ALL',
+							description: '全部',
+						},
+					}, ]) :
+					initData.push({
+						id: 'all',
+						icon: 'grid-fill',
+						name: '全部',
+					});
+				return result;
+			},
+		},
+		mounted() {
+			this.getSwiperList();
+			// 页面显示时  获取当前零维度
+			uni.getLocation({
+				type: 'gcj02',
+				success: res => {
+					let {
+						longitude,
+						latitude
+					} = res
+					this.queryParams.longitude = longitude;
+					this.queryParams.latitude = latitude;
+					// getCurrentLocation 获取当前编码region
+					this.handlerGetRegion(longitude, latitude)
+				},
+				fail: () => {
+					this.manualGetLocation();
+				},
+			});
+		},
+		methods: {
+			// 获取当前编码region
+			handlerGetRegion(longitude, latitude) {
+				let point = `${latitude},${longitude}`
+				getCurrentLocation({
+					point
+				}).then(res => {
+					let {
+						city,
+						district,
+						id
+					} = res.data
+					this.queryParams.region = res.data.id;
+					if (district) {
+						this.nowAddress = district.name
+					} else if (city) {
+						this.nowAddress = city.name
+					} else {
+						this.nowAddress = '地图'
+					}
+					this.getHomeData(this.queryParams)
+					this.$store.commit('SET_LOCATION', {
+						longitude: longitude,
+						latitude: latitude,
+						region: res.data.id,
+						address: res.data.name
+					});
+				})
+			},
+			/* 轮播图 */
+			getSwiperList() {
+				getSwiperListApi().then(res => {
+					this.swiperList = res.data
+					res.data.map(rs => {
+						this.swiperUrlList.push(rs.viewUrl)
+					})
+				});
+			},
+			// 获取首页数据
+			getHomeData(location) {
+				getHomePageApi(location)
+					.then(res => {
+						this.homeData = res.data;
+						// 将分类数据做缓存处理
+						this.$store.commit('SET_CATEGORIES', this.homeData.categories);
+					})
+			},
+			// 手动选择城市
+			manualGetLocation() {
+				uni.chooseLocation({
+					success: res => {
+						let {
+							longitude,
+							latitude
+						} = res
+						this.queryParams.longitude = longitude.toFixed(5);
+						this.queryParams.latitude = latitude.toFixed(5);
+						this.handlerGetRegion(longitude.toFixed(5), latitude.toFixed(5))
+					},
+					fail: err => {}
+				});
+			},
+			// 点击swiper跳转
+			handlerSwiperSkip(e) {
+				console.log("@@@swiperList", this.swiperList[e])
+			},
+			// 点击菜单
+			handleMenuClick(item) {
+				if (item.id === 'all') {
+					this.$Router.push('/pagesHome/category/categoryStoreList');
+				} else {
+					uni.navigateTo({
+						url: `/pagesHome/category/index?id=${item.id}`,
+					});
+				}
+			},
+
+			/* 询价 */
+			btnClick() {
+				uni.navigateTo({
+					url: `/pages/client/clientUser/inquiry`,
+				});
+			},
+		},
+	};
+</script>
+
+<style lang="scss" scoped>
+	.home {
+		background-color: #f0efef;
+
+		.nav-bar {
+			::v-deep .u-navbar__content {
+				background-color: #ffffff;
+			}
+		}
+	}
+
+	/* 头部搜索栏 */
+	.home-header {
+		display: flex;
+		align-items: center;
+		height: 90rpx;
+		line-height: 90rpx;
+		padding: 0 20rpx;
+		background-color: #ffffff;
+
+		.goto-address {
+			display: flex;
+			align-items: center;
+
+			.icon-sanjiaoxing1 {
+				font-size: 24rpx;
+				margin: 17rpx 10rpx 0 6rpx;
+			}
+		}
+
+		.search-item {
+			flex: 1;
+		}
+	}
+
+	/* 轮播图 */
+	.home-swiper {
+		padding: 20rpx;
+		margin-bottom: 10rpx;
+	}
+
+	/* 商品分类 */
+	.home-list {
+		background-color: #ffffff;
+		height: 360rpx;
+		margin: 0 20rpx 20rpx 20rpx;
+		padding: 20rpx 0 50rpx 0;
+		border-radius: 10rpx;
+
+		.grid-text {
+			font-size: 12px;
+			color: #909399;
+			padding: 10rpx 0 20rpx 0rpx;
+			box-sizing: border-box;
+		}
+	}
+
+	/* 热门推荐 */
+	.hot {
+		::v-deep .u-cell__body {
+			padding: 10rpx 20rpx;
+
+			.hot-title {
+				border-left: 4px solid $uni-color-primary;
+				padding-left: 20rpx;
+			}
+		}
+	}
+
+	.near {
+		::v-deep .u-cell__body {
+			padding: 10rpx 20rpx;
+
+			.near-title {
+				border-left: 4px solid $uni-color-primary;
+				padding-left: 20rpx;
+			}
+		}
+	}
+</style>