|
|
@@ -1,273 +1,285 @@
|
|
|
<template>
|
|
|
- <view class="home">
|
|
|
- <view>
|
|
|
- <!-- 顶部导航 -->
|
|
|
- <view class="nav-bar">
|
|
|
- <u-navbar :bgColor="'#ffffff'" :placeholder="true">
|
|
|
- <view slot="left" @click="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('/pages/client/clientPackage/search')" :disabled="true" />
|
|
|
- </view>
|
|
|
- </u-navbar>
|
|
|
- </view>
|
|
|
+ <view class="home">
|
|
|
+ <view>
|
|
|
+ <!-- 顶部导航 -->
|
|
|
+ <view class="nav-bar">
|
|
|
+ <u-navbar :bgColor="'#ffffff'" :placeholder="true">
|
|
|
+ <view slot="left" @click="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('/pages/client/clientPackage/search')" :disabled="true" />
|
|
|
+ </view>
|
|
|
+ </u-navbar>
|
|
|
+ </view>
|
|
|
|
|
|
- <!-- 轮播图 -->
|
|
|
- <view class="home-swiper">
|
|
|
- <u-swiper :list="swiperUrlList" @click="handlerSwiperSkip" indicator />
|
|
|
- </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="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('/pages/client/clientPackage/storeHot')">
|
|
|
- <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(`/pages/client/clientPackage/storeDetail?id=${item.id}`)"
|
|
|
- v-for="item in homeData.recommends" :key="item.id">
|
|
|
- <recommend-item :item="item"></recommend-item>
|
|
|
- </u-grid-item>
|
|
|
- </u-grid>
|
|
|
- </view>
|
|
|
- </block>
|
|
|
- <block v-else>
|
|
|
- <u-empty icon="/static/default-graph/no-business.png" text="暂无推荐商家"></u-empty>
|
|
|
- </block>
|
|
|
- </view>
|
|
|
+ <!-- 热门推荐 -->
|
|
|
+ <view class="hot">
|
|
|
+ <u-cell :border="false" value="查看更多" isLink @click="$Router.push('/pages/client/clientPackage/storeHot')">
|
|
|
+ <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(`/pages/client/clientPackage/storeDetail?id=${item.id}`)"
|
|
|
+ v-for="item in homeData.recommends" :key="item.id">
|
|
|
+ <recommend-item :item="item"></recommend-item>
|
|
|
+ </u-grid-item>
|
|
|
+ </u-grid>
|
|
|
+ </view>
|
|
|
+ </block>
|
|
|
+ <block v-else>
|
|
|
+ <u-empty icon="/static/default-graph/no-business.png" text="暂无推荐商家"></u-empty>
|
|
|
+ </block>
|
|
|
+ </view>
|
|
|
|
|
|
- <!-- 附近商家 -->
|
|
|
- <view class="near">
|
|
|
- <u-cell :border="false" value="查看更多" isLink
|
|
|
- @click="$Router.push('/pages/client/clientPackage/storeNearby')">
|
|
|
- <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(`/pages/client/clientPackage/storeDetail?id=${item.id}`)"
|
|
|
- v-for="item in homeData.nears" :key="item.id">
|
|
|
- <hot-item :item="item"></hot-item>
|
|
|
- </u-grid-item>
|
|
|
- </u-grid>
|
|
|
- </view>
|
|
|
- </block>
|
|
|
- <block v-else>
|
|
|
- <u-empty icon="/static/default-graph/no-business.png" text="暂无附近商家"></u-empty>
|
|
|
- </block>
|
|
|
- </view>
|
|
|
+ <!-- 附近商家 -->
|
|
|
+ <view class="near">
|
|
|
+ <u-cell :border="false" value="查看更多" isLink @click="$Router.push('/pages/client/clientPackage/storeNearby')">
|
|
|
+ <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(`/pages/client/clientPackage/storeDetail?id=${item.id}`)"
|
|
|
+ v-for="item in homeData.nears" :key="item.id">
|
|
|
+ <hot-item :item="item"></hot-item>
|
|
|
+ </u-grid-item>
|
|
|
+ </u-grid>
|
|
|
+ </view>
|
|
|
+ </block>
|
|
|
+ <block v-else>
|
|
|
+ <u-empty icon="/static/default-graph/no-business.png" text="暂无附近商家"></u-empty>
|
|
|
+ </block>
|
|
|
+ </view>
|
|
|
|
|
|
- <!-- 询价 -->
|
|
|
- <!-- <drag-button :isDock="true" :existTabBar="true" @btnClick="btnClick" /> -->
|
|
|
- </view>
|
|
|
+ <!-- 询价 -->
|
|
|
+ <!-- <drag-button :isDock="true" :existTabBar="true" @btnClick="btnClick" /> -->
|
|
|
+ </view>
|
|
|
|
|
|
- <tabbar currentTab="clientHome" />
|
|
|
- </view>
|
|
|
+ <tabbar currentTab="clientHome" />
|
|
|
+ </view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
- import {
|
|
|
- getCurrentLocation,
|
|
|
- getHomePageApi,
|
|
|
- getSwiperListApi
|
|
|
- } from '@/api/client/home';
|
|
|
- import {
|
|
|
- mapGetters
|
|
|
- } from 'vuex';
|
|
|
- import RecommendItem from '@/components/merchant/RecommendItem.vue';
|
|
|
- import HotItem from '@/components/merchant/HotItem.vue';
|
|
|
- import dragButton from '@/components/drag/drag-button.vue';
|
|
|
- import { getMapLocation } from "@/utils/mapUtil.js"
|
|
|
- export default {
|
|
|
- components: {
|
|
|
- RecommendItem,
|
|
|
- HotItem,
|
|
|
- dragButton,
|
|
|
- },
|
|
|
- data() {
|
|
|
- return {
|
|
|
- list: [],
|
|
|
- keyword: '',
|
|
|
- swiperUrlList: [], // 轮播图url列表
|
|
|
- swiperList: [],
|
|
|
- homeData: {
|
|
|
- categories: [],
|
|
|
- nears: [],
|
|
|
- recommends: [],
|
|
|
- },
|
|
|
- queryParams: {
|
|
|
- longitude: '',
|
|
|
- latitude: '',
|
|
|
- region: ''
|
|
|
- },
|
|
|
- nowAddress: '', //当前地址
|
|
|
- };
|
|
|
- },
|
|
|
+ import {
|
|
|
+ getCurrentLocation,
|
|
|
+ getHomePageApi,
|
|
|
+ getSwiperListApi
|
|
|
+ } from '@/api/client/home';
|
|
|
+ import {
|
|
|
+ mapGetters
|
|
|
+ } from 'vuex';
|
|
|
+ import RecommendItem from '@/components/merchant/RecommendItem.vue';
|
|
|
+ import HotItem from '@/components/merchant/HotItem.vue';
|
|
|
+ import dragButton from '@/components/drag/drag-button.vue';
|
|
|
+ import {
|
|
|
+ getMapLocation
|
|
|
+ } from "@/utils/mapUtil.js"
|
|
|
+ export default {
|
|
|
+ components: {
|
|
|
+ RecommendItem,
|
|
|
+ HotItem,
|
|
|
+ dragButton,
|
|
|
+ },
|
|
|
+ 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) {
|
|
|
+ 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
|
|
|
+ getCurrentLocation({
|
|
|
+ point
|
|
|
+ }).then(res => {
|
|
|
+ console.log('getCurrentLocation', res)
|
|
|
+ let {
|
|
|
+ city,
|
|
|
+ district,
|
|
|
+ id
|
|
|
+ } = res.data
|
|
|
this.queryParams.region = res.data.id;
|
|
|
- if(district){
|
|
|
- this.nowAddress = district.name
|
|
|
- }else if(city){
|
|
|
+ if (district) {
|
|
|
this.nowAddress = district.name
|
|
|
- }else{
|
|
|
+ } 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,
|
|
|
- });
|
|
|
- })
|
|
|
- },
|
|
|
- /* 轮播图 */
|
|
|
- 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() {
|
|
|
- // getMapLocation()
|
|
|
- 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 => {
|
|
|
- console.log("@@err")
|
|
|
- }
|
|
|
- });
|
|
|
- },
|
|
|
- // 点击swiper跳转
|
|
|
- handlerSwiperSkip(e) {
|
|
|
- console.log("@@@swiperList", this.swiperList[e])
|
|
|
- },
|
|
|
- // 点击菜单
|
|
|
- handleMenuClick(item) {
|
|
|
- if (item.id === 'all') {
|
|
|
- this.$Router.push('/pages/client/clientPackage/category');
|
|
|
- } else {
|
|
|
- uni.navigateTo({
|
|
|
- url: `/pages/client/clientPackage/storeList?id=${item.id}`,
|
|
|
- });
|
|
|
- }
|
|
|
- },
|
|
|
+ this.getHomeData(this.queryParams)
|
|
|
+ this.$store.commit('SET_LOCATION', {
|
|
|
+ longitude: longitude,
|
|
|
+ latitude: latitude,
|
|
|
+ region: res.data.id,
|
|
|
+ });
|
|
|
+ })
|
|
|
+ },
|
|
|
+ /* 轮播图 */
|
|
|
+ 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: function(err) {
|
|
|
+ console.log('取消按钮', err)
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 点击swiper跳转
|
|
|
+ handlerSwiperSkip(e) {
|
|
|
+ console.log("@@@swiperList", this.swiperList[e])
|
|
|
+ },
|
|
|
+ // 点击菜单
|
|
|
+ handleMenuClick(item) {
|
|
|
+ if (item.id === 'all') {
|
|
|
+ this.$Router.push('/pages/client/clientPackage/category');
|
|
|
+ } else {
|
|
|
+ uni.navigateTo({
|
|
|
+ url: `/pages/client/clientPackage/storeList?id=${item.id}`,
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
|
|
|
- /* 询价 */
|
|
|
- btnClick() {
|
|
|
- // uni.chooseImage({
|
|
|
- // count: 9,
|
|
|
- // sizeType: ['original', 'compressed'],
|
|
|
- // sourceType: ['camera', 'album'],
|
|
|
- // success: res => {
|
|
|
- // const tempFilePaths = res.tempFilePaths;
|
|
|
- // this.uploadFileAlbum();
|
|
|
- // },
|
|
|
- // });
|
|
|
+ /* 询价 */
|
|
|
+ btnClick() {
|
|
|
+ // uni.chooseImage({
|
|
|
+ // count: 9,
|
|
|
+ // sizeType: ['original', 'compressed'],
|
|
|
+ // sourceType: ['camera', 'album'],
|
|
|
+ // success: res => {
|
|
|
+ // const tempFilePaths = res.tempFilePaths;
|
|
|
+ // this.uploadFileAlbum();
|
|
|
+ // },
|
|
|
+ // });
|
|
|
|
|
|
- uni.navigateTo({
|
|
|
- url: `/pages/client/clientUser/inquiry`,
|
|
|
- });
|
|
|
- },
|
|
|
+ uni.navigateTo({
|
|
|
+ url: `/pages/client/clientUser/inquiry`,
|
|
|
+ });
|
|
|
+ },
|
|
|
|
|
|
- // uploadFileAlbum() {
|
|
|
- // uni.uploadFile({
|
|
|
- // url: '', //服务器地址
|
|
|
- // fileType: 'image', //ZFB必填,不然报错
|
|
|
- // filePath: tempFilePaths[0], //这个就是我们上面拍照返回或者先中照片返回的数组
|
|
|
- // name: 'imgFile',
|
|
|
- // success: uploadFileRes => {
|
|
|
- // let imgData = JSON.parse(uploadFileRes.data);
|
|
|
- // this.imgDataUrl = imgData.data.imgUrl;
|
|
|
- // },
|
|
|
- // });
|
|
|
- // },
|
|
|
- },
|
|
|
- };
|
|
|
+ // uploadFileAlbum() {
|
|
|
+ // uni.uploadFile({
|
|
|
+ // url: '', //服务器地址
|
|
|
+ // fileType: 'image', //ZFB必填,不然报错
|
|
|
+ // filePath: tempFilePaths[0], //这个就是我们上面拍照返回或者先中照片返回的数组
|
|
|
+ // name: 'imgFile',
|
|
|
+ // success: uploadFileRes => {
|
|
|
+ // let imgData = JSON.parse(uploadFileRes.data);
|
|
|
+ // this.imgDataUrl = imgData.data.imgUrl;
|
|
|
+ // },
|
|
|
+ // });
|
|
|
+ // },
|
|
|
+ },
|
|
|
+ };
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
- @import './index.scss';
|
|
|
+ @import './index.scss';
|
|
|
</style>
|
