|
|
@@ -1,332 +1,363 @@
|
|
|
-<template>
|
|
|
- <view class="home">
|
|
|
- <view>
|
|
|
- <!-- 顶部导航 -->
|
|
|
- <view class="nav-bar">
|
|
|
- <u-navbar :bgColor="'#ffffff'" :placeholder="true">
|
|
|
- <view slot="left" @click.stop="manualGetLocation">
|
|
|
- <view class="address-text">{{ nowAddress }}</view>
|
|
|
- <text class="iconfont icon-chevron-down" />
|
|
|
- </view>
|
|
|
- <view slot="center" style="width: 350rpx">
|
|
|
- <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 imgMode='aspectFit' />
|
|
|
- </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;
|
|
|
- }
|
|
|
- .address-text{
|
|
|
- min-width: 120rpx;
|
|
|
- overflow: hidden;
|
|
|
- text-overflow: ellipsis;
|
|
|
- white-space: nowrap;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- /* 头部搜索栏 */
|
|
|
- .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>
|
|
|
+<template>
|
|
|
+ <view class="home">
|
|
|
+ <view>
|
|
|
+ <!-- 顶部导航 -->
|
|
|
+ <view class="nav-bar">
|
|
|
+ <u-navbar :bgColor="'#ffffff'" :placeholder="true">
|
|
|
+ <view slot="left" @click.stop="manualGetLocation">
|
|
|
+ <view class="address-text">{{ nowAddress }}</view>
|
|
|
+ <text class="iconfont icon-chevron-down" />
|
|
|
+ </view>
|
|
|
+ <view slot="center" style="width: 350rpx">
|
|
|
+ <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 imgMode='aspectFit' />
|
|
|
+ </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';
|
|
|
+ import {
|
|
|
+ inviteBind
|
|
|
+ } from "@/api/client/mine.js"
|
|
|
+ export default {
|
|
|
+ components: {
|
|
|
+ RecommendItem,
|
|
|
+ HotItem,
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ list: [],
|
|
|
+ keyword: '',
|
|
|
+ swiperUrlList: [], // 轮播图url列表
|
|
|
+ swiperList: [],
|
|
|
+ homeData: {
|
|
|
+ categories: [],
|
|
|
+ nears: [],
|
|
|
+ recommends: [],
|
|
|
+ },
|
|
|
+ queryParams: {
|
|
|
+ longitude: '',
|
|
|
+ latitude: '',
|
|
|
+ region: ''
|
|
|
+ },
|
|
|
+ nowAddress: '', //当前地址
|
|
|
+ };
|
|
|
+ },
|
|
|
+
|
|
|
+ computed: {
|
|
|
+ ...mapGetters(['location', 'userId', 'invitationCode']),
|
|
|
+ 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;
|
|
|
+ },
|
|
|
+ },
|
|
|
+ onShow() {
|
|
|
+ console.log("执行了没有", this.invitationCode)
|
|
|
+ // 如果 invitationCode 存在且不等于特殊值时执行代码
|
|
|
+ if (this.invitationCode) {
|
|
|
+ console.log("sadsad")
|
|
|
+ let params = {
|
|
|
+ userId: this.userId,
|
|
|
+ targetId: this.invitationCode,
|
|
|
+ type: 1
|
|
|
+ };
|
|
|
+ inviteBind(params).then(res => {
|
|
|
+ console.log("绑定邀请码结果：", res);
|
|
|
+ });
|
|
|
+ this.$store.commit('SET_INVITATIONCODE', '')
|
|
|
+
|
|
|
+ }else{
|
|
|
+ console.log("执行了一次")
|
|
|
+ }
|
|
|
+ },
|
|
|
+ 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;
|
|
|
+ }
|
|
|
+
|
|
|
+ .address-text {
|
|
|
+ min-width: 120rpx;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 头部搜索栏 */
|
|
|
+ .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>
|
