商家列表页完成 + 筛选40%

src/pages.json

@@ -1,374 +1,371 @@
-{
-  "easycom": {
-    "^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
-  },
-  "pages": [
-    {
-      "path": "pages/index",
-      "style": {
-        "navigationBarTitleText": "首页",
-        "navigationStyle": "custom"
-      }
-    },
-    {
-      "path": "pages/tabbar/home/index",
-      "style": {
-        "navigationBarTitleText": "首页",
-        "navigationStyle": "custom"
-      }
-    },
-    {
-      "path": "pages/tabbar/community/index",
-      "style": {
-        "navigationBarTitleText": "社区",
-        "navigationStyle": "custom"
-      }
-    },
-    {
-      "path": "pages/tabbar/message/index",
-      "style": {
-        "navigationBarTitleText": "消息",
-        "navigationStyle":"custom"
-      }
-    },
-    {
-      "path": "pages/tabbar/mine/index",
-      "style": {
-        "navigationBarTitleText": "我的"
-      }
-    },
-    {
-      "path": "pages/login/index",
-      "style": {
-        "navigationBarTitleText": "登录"
-      }
-    },
-    {
-      "path": "pages/login/phoneLogin",
-      "style": {
-        "navigationBarTitleText": "手机验证"
-      }
-    }
-  ],
-  "subPackages": [
-    {
-      "root": "pages/client",
-      "pages": [
-        {
-          "path": "CommunitySearch/index",
-          "style": {
-            "navigationBarTitleText": "社区搜索"
-          }
-        },
-        {
-          "path": "allComments/index",
-          "style": {
-            "navigationBarTitleText": "全部评论"
-          }
-        },
-        {
-          "path": "checkIn/index",
-          "style": {
-            "navigationBarTitleText": "每日签到"
-          }
-        },
-        {
-          "path": "search/index",
-          "style": {
-            "navigationBarTitleText": "搜索"
-          }
-        }
-      ]
-    },
-    {
-      "root": "pages/business",
-      "pages": [
-        {
-          "path": "detail/index",
-          "style": {
-            "navigationBarTitleText": "商家详情"
-          }
-        },
-        {
-          "path": "buy/index",
-          "style": {
-            "navigationBarTitleText": "提交订单"
-          }
-        },
-        {
-          "path": "hot/index",
-          "style": {
-            "navigationBarTitleText": "热门推荐"
-          }
-        },
-        {
-          "path": "nearby/index",
-          "style": {
-            "navigationBarTitleText": "附近商家"
-          }
-        },
-        {
-          "path": "service/index",
-          "style": {
-            "navigationBarTitleText": "服务详情"
-          }
-        },
-        {
-          "path": "classify/index",
-          "style": {
-            "navigationBarTitleText": "养车"
-          }
-        },
-		{
-			"path" : "classfication/classfication",
-			"style" :{
-				"navigationBarTitleText": "分类"
-			}
-	    }
-      ]
-    },
-    {
-      "root": "pages/points",
-      "pages": [
-        {
-          "path": "myPoints/index",
-          "style": {
-            "navigationBarTitleText": "我的积分"
-          }
-        },
-        {
-          "path": "checkIn/index",
-          "style": {
-            "navigationBarTitleText": "每日签到"
-          }
-        },
-        {
-          "path": "detail/index",
-          "style": {
-            "navigationBarTitleText": "积分说明"
-          }
-        },
-        {
-          "path": "instructions/index",
-          "style": {
-            "navigationBarTitleText": "积分明细"
-          }
-        },
-        {
-          "path": "withdraw/index",
-          "style": {
-            "navigationBarTitleText": "积分提现"
-          }
-        },
-        {
-          "path": "activity/index",
-          "style": {
-            "navigationBarTitleText": "积分活动"
-          }
-        }
-      ]
-    },
-    {
-      "root": "pages/message",
-      "pages": [
-        {
-          "path": "evaluate/index",
-          "style": {
-            "navigationBarTitleText": "评价通知"
-          }
-        },
-        {
-          "path": "favorable/index",
-          "style": {
-            "navigationBarTitleText": "优惠福利"
-          }
-        },
-        {
-          "path": "order/index",
-          "style": {
-            "navigationBarTitleText": "订单通知"
-          }
-        },
-        {
-          "path": "payment/index",
-          "style": {
-            "navigationBarTitleText": "付款"
-          }
-        },
-        {
-          "path": "info/index",
-          "style": {
-            "navigationBarTitleText": "私信"
-          }
-        },
-        {
-          "path": "upvote/index",
-          "style": {
-            "navigationBarTitleText": "点赞回复"
-          }
-        }
-      ]
-    },
-    {
-      "root": "pages/pointMethod",
-      "pages": [
-        {
-          "path": "foren/index",
-          "style": {
-            "navigationBarTitleText": "发帖"
-          }
-        },
-        {
-          "path": "consume/index",
-          "style": {
-            "navigationBarTitleText": "消费"
-          }
-        },
-        {
-          "path": "comment/index",
-          "style": {
-            "navigationBarTitleText": "点评"
-          }
-        },
-        {
-          "path": "share/index",
-          "style": {
-            "navigationBarTitleText": "分享"
-          }
-        },
-        {
-          "path": "recover/index",
-          "style": {
-            "navigationBarTitleText": "回帖"
-          }
-        },
-        {
-          "path": "advertise/index",
-          "style": {
-            "navigationBarTitleText": "广告"
-          }
-        }
-      ]
-    },
-    {
-      "root": "pages/community",
-      "pages": [
-        {
-          "path": "commDetail/index",
-          "style": {
-            "navigationBarTitleText": "社区详情"
-          }
-        },
-        {
-          "path": "commSearch/index",
-          "style": {
-            "navigationBarTitleText": "搜索"
-          }
-        }
-      ]
-    },
-    {
-      "root": "pages/my",
-      "pages": [
-        {
-          "path": "collect/index",
-          "style": {
-            "navigationBarTitleText": "我的收藏"
-          }
-        },
-        {
-          "path": "appoint/index",
-          "style": {
-            "navigationBarTitleText": "预约列表"
-          }
-        },
-        {
-          "path": "appointDetail/index",
-          "style": {
-            "navigationBarTitleText": "预约详情"
-          }
-        },
-        {
-          "path": "coupon/index",
-          "style": {
-            "navigationBarTitleText": "优惠券"
-          }
-        },
-        {
-          "path": "inquiry/index",
-          "style": {
-            "navigationBarTitleText": "询价"
-          }
-        },
-        {
-          "path": "score/index",
-          "style": {
-            "navigationBarTitleText": "我的积分"
-          }
-        },
-        {
-          "path": "myOrder/index",
-          "style": {
-            "navigationBarTitleText": "我的订单"
-          }
-        },
-        {
-          "path": "personalCenter/index",
-          "style": {
-            "navigationBarTitleText": "个人中心"
-          }
-        },
-        {
-          "path": "editData/index",
-          "style": {
-            "navigationBarTitleText": "编辑资料"
-          }
-        },
-        {
-          "path": "settings/index",
-          "style": {
-            "navigationBarTitleText": "设置"
-          }
-        }
-      ]
-    }
-  ],
-  "tabBar": {
-    "color": "#999999",
-    "selectedColor": "#42b2fa",
-    "borderStyle": "black",
-    "backgroundColor": "#ffffff",
-    "list": [
-      {
-        "text": "首页",
-        "pagePath": "pages/tabbar/home/index",
-        "iconPath": "static/images/home.png",
-        "selectedIconPath": "static/images/home-select.png"
-      },
-      {
-        "pagePath": "pages/tabbar/community/index",
-        "text": "社区",
-        "iconPath": "static/images/community.png",
-        "selectedIconPath": "static/images/community-select.png"
-      },
-      {
-        "pagePath": "pages/tabbar/message/index",
-        "text": "消息",
-        "iconPath": "static/images/message.png",
-        "selectedIconPath": "static/images/message-select.png"
-      },
-      {
-        "pagePath": "pages/tabbar/mine/index",
-        "text": "我的",
-        "iconPath": "static/images/mine.png",
-        "selectedIconPath": "static/images/mine-select.png"
-      }
-    ]
-  },
-  "globalStyle": {
-    "navigationBarTextStyle": "black",
-    "navigationBarTitleText": "uni-app",
-    "navigationBarBackgroundColor": "#F8F8F8",
-    "backgroundColor": "#F8F8F8"
-  }
-}
+{
+  "easycom": {
+    "^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
+  },
+  "pages": [{
+      "path": "pages/index",
+      "style": {
+        "navigationBarTitleText": "首页",
+        "navigationStyle": "custom"
+      }
+    },
+    {
+      "path": "pages/tabbar/home/index",
+      "style": {
+        "navigationBarTitleText": "首页",
+        "navigationStyle": "custom"
+      }
+    },
+    {
+      "path": "pages/tabbar/community/index",
+      "style": {
+        "navigationBarTitleText": "社区",
+        "navigationStyle": "custom"
+      }
+    },
+    {
+      "path": "pages/tabbar/message/index",
+      "style": {
+        "navigationBarTitleText": "消息",
+        "navigationStyle": "custom"
+      }
+    },
+    {
+      "path": "pages/tabbar/mine/index",
+      "style": {
+        "navigationBarTitleText": "我的"
+      }
+    },
+    {
+      "path": "pages/login/index",
+      "style": {
+        "navigationBarTitleText": "登录"
+      }
+    },
+    {
+      "path": "pages/login/phoneLogin",
+      "style": {
+        "navigationBarTitleText": "手机验证"
+      }
+    }
+  ],
+  "subPackages": [{
+      "root": "pages/client",
+      "pages": [{
+          "path": "CommunitySearch/index",
+          "style": {
+            "navigationBarTitleText": "社区搜索"
+          }
+        },
+        {
+          "path": "allComments/index",
+          "style": {
+            "navigationBarTitleText": "全部评论"
+          }
+        },
+        {
+          "path": "checkIn/index",
+          "style": {
+            "navigationBarTitleText": "每日签到"
+          }
+        },
+        {
+          "path": "search/index",
+          "style": {
+            "navigationBarTitleText": "搜索"
+          }
+        }
+      ]
+    },
+    {
+      "root": "pages/business",
+      "pages": [{
+          "path": "detail/index",
+          "style": {
+            "navigationBarTitleText": "商家详情"
+          }
+        },
+        {
+          "path": "buy/index",
+          "style": {
+            "navigationBarTitleText": "提交订单"
+          }
+        },
+        {
+          "path": "hot/index",
+          "style": {
+            "navigationBarTitleText": "热门推荐"
+          }
+        },
+        {
+          "path": "nearby/index",
+          "style": {
+            "navigationBarTitleText": "附近商家"
+          }
+        },
+        {
+          "path": "service/index",
+          "style": {
+            "navigationBarTitleText": "服务详情"
+          }
+        },
+        {
+          "path": "classify/index",
+          "style": {
+            "navigationBarTitleText": "养车"
+          }
+        },
+        {
+          "path": "classfication/classfication",
+          "style": {
+            "navigationBarTitleText": "分类"
+          }
+        }, {
+          "path": "listpage/index",
+          "style": {
+            "navigationBarTitleText": "商家列表页",
+            "enablePullDownRefresh": false
+          }
+
+        }
+      ]
+    },
+    {
+      "root": "pages/points",
+      "pages": [{
+          "path": "myPoints/index",
+          "style": {
+            "navigationBarTitleText": "我的积分"
+          }
+        },
+        {
+          "path": "checkIn/index",
+          "style": {
+            "navigationBarTitleText": "每日签到"
+          }
+        },
+        {
+          "path": "detail/index",
+          "style": {
+            "navigationBarTitleText": "积分说明"
+          }
+        },
+        {
+          "path": "instructions/index",
+          "style": {
+            "navigationBarTitleText": "积分明细"
+          }
+        },
+        {
+          "path": "withdraw/index",
+          "style": {
+            "navigationBarTitleText": "积分提现"
+          }
+        },
+        {
+          "path": "activity/index",
+          "style": {
+            "navigationBarTitleText": "积分活动"
+          }
+        }
+      ]
+    },
+    {
+      "root": "pages/message",
+      "pages": [{
+          "path": "evaluate/index",
+          "style": {
+            "navigationBarTitleText": "评价通知"
+          }
+        },
+        {
+          "path": "favorable/index",
+          "style": {
+            "navigationBarTitleText": "优惠福利"
+          }
+        },
+        {
+          "path": "order/index",
+          "style": {
+            "navigationBarTitleText": "订单通知"
+          }
+        },
+        {
+          "path": "payment/index",
+          "style": {
+            "navigationBarTitleText": "付款"
+          }
+        },
+        {
+          "path": "info/index",
+          "style": {
+            "navigationBarTitleText": "私信"
+          }
+        },
+        {
+          "path": "upvote/index",
+          "style": {
+            "navigationBarTitleText": "点赞回复"
+          }
+        }
+      ]
+    },
+    {
+      "root": "pages/pointMethod",
+      "pages": [{
+          "path": "foren/index",
+          "style": {
+            "navigationBarTitleText": "发帖"
+          }
+        },
+        {
+          "path": "consume/index",
+          "style": {
+            "navigationBarTitleText": "消费"
+          }
+        },
+        {
+          "path": "comment/index",
+          "style": {
+            "navigationBarTitleText": "点评"
+          }
+        },
+        {
+          "path": "share/index",
+          "style": {
+            "navigationBarTitleText": "分享"
+          }
+        },
+        {
+          "path": "recover/index",
+          "style": {
+            "navigationBarTitleText": "回帖"
+          }
+        },
+        {
+          "path": "advertise/index",
+          "style": {
+            "navigationBarTitleText": "广告"
+          }
+        }
+      ]
+    },
+    {
+      "root": "pages/community",
+      "pages": [{
+          "path": "commDetail/index",
+          "style": {
+            "navigationBarTitleText": "社区详情"
+          }
+        },
+        {
+          "path": "commSearch/index",
+          "style": {
+            "navigationBarTitleText": "搜索"
+          }
+        }
+      ]
+    },
+    {
+      "root": "pages/my",
+      "pages": [{
+          "path": "collect/index",
+          "style": {
+            "navigationBarTitleText": "我的收藏"
+          }
+        },
+        {
+          "path": "appoint/index",
+          "style": {
+            "navigationBarTitleText": "预约列表"
+          }
+        },
+        {
+          "path": "appointDetail/index",
+          "style": {
+            "navigationBarTitleText": "预约详情"
+          }
+        },
+        {
+          "path": "coupon/index",
+          "style": {
+            "navigationBarTitleText": "优惠券"
+          }
+        },
+        {
+          "path": "inquiry/index",
+          "style": {
+            "navigationBarTitleText": "询价"
+          }
+        },
+        {
+          "path": "score/index",
+          "style": {
+            "navigationBarTitleText": "我的积分"
+          }
+        },
+        {
+          "path": "myOrder/index",
+          "style": {
+            "navigationBarTitleText": "我的订单"
+          }
+        },
+        {
+          "path": "personalCenter/index",
+          "style": {
+            "navigationBarTitleText": "个人中心"
+          }
+        },
+        {
+          "path": "editData/index",
+          "style": {
+            "navigationBarTitleText": "编辑资料"
+          }
+        },
+        {
+          "path": "settings/index",
+          "style": {
+            "navigationBarTitleText": "设置"
+          }
+        }
+      ]
+    }
+  ],
+  "tabBar": {
+    "color": "#999999",
+    "selectedColor": "#42b2fa",
+    "borderStyle": "black",
+    "backgroundColor": "#ffffff",
+    "list": [{
+        "text": "首页",
+        "pagePath": "pages/tabbar/home/index",
+        "iconPath": "static/images/home.png",
+        "selectedIconPath": "static/images/home-select.png"
+      },
+      {
+        "pagePath": "pages/tabbar/community/index",
+        "text": "社区",
+        "iconPath": "static/images/community.png",
+        "selectedIconPath": "static/images/community-select.png"
+      },
+      {
+        "pagePath": "pages/tabbar/message/index",
+        "text": "消息",
+        "iconPath": "static/images/message.png",
+        "selectedIconPath": "static/images/message-select.png"
+      },
+      {
+        "pagePath": "pages/tabbar/mine/index",
+        "text": "我的",
+        "iconPath": "static/images/mine.png",
+        "selectedIconPath": "static/images/mine-select.png"
+      }
+    ]
+  },
+  "globalStyle": {
+    "navigationBarTextStyle": "black",
+    "navigationBarTitleText": "uni-app",
+    "navigationBarBackgroundColor": "#F8F8F8",
+    "backgroundColor": "#F8F8F8"
+  }
+}

src/pages/business/listpage/index.vue

@@ -0,0 +1,226 @@
+<template>
+	<view class="container">
+		<view class="top-box">
+        <view class="search-box">
+          <view class="search-left">
+            <u-search
+              placeholder="请输入搜索内容"
+              :showAction="false"
+              v-model="keyword"
+            />
+          </view>
+          <view class="search-right">取消</view>
+        </view>
+        <view class="filter-box">
+          <view class="filter-item">
+            <view class="fiter1 ">
+              <u-icon name="map"></u-icon>
+              <span class="filter-l">贵阳市青少年人才社区</span>
+              <u-icon name="arrow-down-fill"></u-icon>
+              </view>
+            <view class="fiter2" @tap="handlerSelectAllFilter">
+              <span>综合排序</span>
+              <u-icon name="arrow-down-fill"></u-icon>
+              </view>
+            <view class="fiter1">
+              <span>筛选</span>
+              <u-icon name="arrow-down-fill"></u-icon>
+            </view>
+          </view>
+          <view class="filter-drapdown" v-show="filterShow">
+              <view class="">离我最近</view>
+              <view class="">好评优先</view>
+              <view class="">离我有点远</view>
+          </view>
+        </view>
+		</view>
+
+    <view class="content-box">
+        <view class="content-item" v-for="item of 5">
+            <view class="item-left">
+              <image class="img" src="../../../static/logo.png" mode=""></image>
+            </view>
+            <view class="item-right">
+
+              <view class="">
+                <view class="item-title">
+                  <view class="tag">常去 </view>
+                  <view class="title">途虎养车洗车机（贵州省贵阳市云岩区）</view>
+                </view>
+                <view class="str-box">
+                  <view class="srt-left">
+                    <u-rate activeColor="#fc8400" :value="3.7" readonly></u-rate>
+                    <text>5.0</text>
+                  </view>
+                  <view class="border"></view>
+                  <view class="srt-right">998单</view>
+                </view>
+              </view>
+
+              <view class="bottom-textbox">
+                <view class="bottom-left">宝安中心区美容洗车</view>
+                <view class="bottom-right">2.7km</view>
+              </view>
+            </view>
+        </view>
+    </view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+        keyword:null,
+        filterShow:false
+			}
+		},
+		methods: {
+      // 点击综合排序
+      handlerSelectAllFilter(){
+        this.filterShow = !this.filterShow
+        console.log('123123');
+      }
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+  .container {
+    min-height: 100vh;
+    background-color: #efefef;
+    .top-box{
+      width: 100%;
+      background-color: #fff;
+      padding: 10rpx 20rpx;
+      box-sizing: border-box;
+      .search-box{
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+        .search-left{
+          width: 80%;
+
+        }
+        .search-right{
+          text-align: center;
+        }
+      }
+
+      .filter-box{
+        margin-top: 20rpx;
+        .filter-item{
+          display: flex;
+          justify-content: space-between;
+          .fiter1,.fiter2{
+            display: flex;
+            align-items: center;
+          }
+          .filter-l{
+            width: 200rpx;
+            overflow: hidden;
+            text-overflow:ellipsis;
+            white-space: nowrap;
+          }
+          .fiter1{
+            color: #808080;
+            font-size: 24rpx
+          }
+          .fiter2{
+
+          }
+        }
+
+        .filter-drapdown{
+          position: fixed;
+          left: 0;
+          width: 100%;
+          background-color: #fff;
+          height: 300rpx;
+          z-index: 999;
+          box-shadow: 0 10rpx 20rpx -5rpx rgba(0, 0, 0, 0.2);
+          view{
+            margin: 30rpx 50rpx;
+          }
+        }
+      }
+    }
+
+
+    .content-box{
+      width: 100%;
+      .content-item{
+        background-color: #fff;
+        padding: 10rpx 20rpx;
+        box-sizing: border-box;
+        margin: 10rpx 0;
+        display: flex;
+        .item-left{
+          margin-right: 10rpx;
+          .img{
+            width: 200rpx;
+            height: 200rpx;
+            border-radius: 10rpx;
+          }
+        }
+        .item-right{
+          height: 200rpx;
+          align-content: space-between;
+          .item-title{
+            display: flex;
+            align-items: center;
+            .tag{
+              width: 80rpx;
+              height: 46rpx;
+              // line-height: 50rpx;
+              padding: 4rpx;
+              font-size: 22rpx;
+              box-sizing: border-box;
+              background-color: #f6e7d4;
+              color: #f99a47;
+              border: 2rpx solid #f99a47;
+              text-align: center;
+              // align-items: center;
+              margin-right: 10rpx;
+            }
+            .title{
+               font-size: 30rpx;
+               color: #000;
+               font-weight: bold;
+               flex-wrap: wrap;
+            }
+          }
+
+          .str-box{
+            display: flex;
+            margin-top: 10rpx;
+            .srt-left{
+              display: flex;
+              color: #fc8400;
+            }
+            .border{
+              border-left: 2rpx solid #cfcfcf;
+              margin: 0 20rpx;
+            }
+            .srt-right{
+            }
+          }
+
+
+          .bottom-textbox{
+            display: flex;
+            justify-content: space-between;
+            font-size: 26rpx;
+            margin-top: 40rpx;
+            .bottom-left{
+              color: #c7c7c7;
+            }
+            .bottom-right{
+              color: #000;
+            }
+          }
+        }
+      }
+    }
+  }
+</style>

src/pages/tabbar/home/index.vue

@@ -1,342 +1,364 @@
-<template>
-  <view class="home">
-    <view class="nav-bar" v-if="opacity == 1">
-      <u-navbar :bgColor="'#ffffff'">
-        <view slot="left">
-          <text>地址</text>
-          <text class="iconfont icon-chevron-down"></text>
-        </view>
-        <view slot="center">
-          <u-search
-            placeholder="请输入搜索内容"
-            :showAction="false"
-            v-model="keyword"
-          />
-        </view>
-      </u-navbar>
-    </view>
-    <!-- 顶部导航 -->
-    <view
-      class="home-header"
-      :style="{ paddingTop: totalHeight + 'px', opacity: 1 - opacity }"
-    >
-      <view class="goto-address" @click="manualGetLocation">
-        <text>地址</text>
-        <text class="iconfont icon-chevron-down"></text>
-      </view>
-      <view
-        class="search-item"
-        @click="$Router.push('/pages/client/search/index')"
-      >
-        <u-search
-          placeholder="请输入搜索内容"
-          :showAction="false"
-          v-model="keyword"
-        />
-      </view>
-    </view>
-    <!-- 轮播图 -->
-    <view class="home-swiper">
-      <u-swiper :list="swiperList" indicator @change="change" @click="click" />
-    </view>
-    <!-- 商品分类 -->
-    <view class="home-list">
-      <u-grid :border="false" col="5">
-        <u-grid-item
-          v-for="(item, index) 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/business/hot/index')"
-      >
-        <view slot="title" class="hot-title"> 热门推荐 </view>
+<template>
+  <view class="home">
+    <view class="nav-bar" v-if="opacity == 1">
+      <u-navbar :bgColor="'#ffffff'">
+        <view slot="left">
+          <text>地址</text>
+          <text class="iconfont icon-chevron-down"></text>
+        </view>
+        <view slot="center">
+          <u-search
+            placeholder="请输入搜索内容"
+            :showAction="false"
+            v-model="keyword"
+          />
+        </view>
+      </u-navbar>
+    </view>
+    <!-- 顶部导航 -->
+    <view
+      class="home-header"
+      :style="{ paddingTop: totalHeight + 'px', opacity: 1 - opacity }"
+    >
+      <view class="goto-address" @click="manualGetLocation">
+        <text>地址</text>
+        <text class="iconfont icon-chevron-down"></text>
+      </view>
+      <view
+        class="search-item"
+        @click="$Router.push('/pages/client/search/index')"
+      >
+        <u-search
+          placeholder="请输入搜索内容"
+          :showAction="false"
+          v-model="keyword"
+        />
+      </view>
+    </view>
+    <!-- 轮播图 -->
+    <view class="home-swiper">
+      <u-swiper :list="swiperList" indicator @change="change" @click="click" />
+    </view>
+    <!-- 商品分类 -->
+    <view class="home-list">
+      <u-grid :border="false" col="5">
+        <u-grid-item
+          v-for="(listItem, listIndex) in list1"
+          :key="listIndex"
+          @tap="$Router.push(listItem.url)"
+        >
+          <u-icon
+            :customStyle="{ paddingTop: 20 + 'rpx' }"
+            :name="listItem.name"
+            :size="25"
+          ></u-icon>
+          <text class="grid-text">{{ listItem.title }}</text>
+        </u-grid-item>
+      </u-grid>
+      <u-toast ref="uToast" />
+    </view>
+    <!-- 热门推荐 -->
+    <view class="hot">
+      <u-cell
+        :border="false"
+        value="查看更多"
+        isLink
+        @click="$Router.push('/pages/business/hot/index')"
+      >
+        <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/business/detail/index?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/business/nearby/index')"
-      >
-        <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/business/detail/index?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>
-</template>
-
-<script>
-import { getHomePage, getCurrentLocation } from '@/api/home';
-import { mapGetters } from 'vuex';
-import RecommendItem from '@/components/merchant/RecommendItem.vue';
-import HotItem from '@/components/merchant/HotItem.vue';
-import { getHomePageApi, getCategoriesApi } from '@/api/tabbar/home';
-
-export default {
-  components: {
-    RecommendItem,
-    HotItem,
-  },
-  data() {
-    return {
-      list: [],
-      keyword: '',
-      swiperList: [
-        'https://cdn.uviewui.com/uview/swiper/swiper1.png',
-        'https://cdn.uviewui.com/uview/swiper/swiper2.png',
-        'https://cdn.uviewui.com/uview/swiper/swiper3.png',
-      ],
-      homeData: {
-        categories: [],
-        nears: [],
-        recommends: [],
-      },
-      scrollTop: 0,
-    };
-  },
-  computed: {
-    ...mapGetters(['location']),
-    totalHeight() {
-      return (
-        uni.getSystemInfoSync().statusBarHeight +
-        uni.getMenuButtonBoundingClientRect().height
-      );
-    },
-    opacity() {
-      if (this.scrollTop < this.totalHeight) {
-        return (this.scrollTop / this.totalHeight).toFixed(2);
-      }
-      return 1;
-    },
-    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;
-    },
-  },
-  onPageScroll(e) {
-    this.scrollTop = e.scrollTop;
-  },
-  onLoad() {
-    setTimeout(() => {
-      this.list = new Array(10000).fill(1);
-    }, 5000);
-    uni.getLocation({
-      type: 'gcj02',
-      success: res => {
-        this.location.longitude = res.longitude;
-        this.location.latitude = res.latitude;
-        this.$store.commit('SET_LOCATION', {
-          longitude: res.longitude,
-          latitude: res.latitude,
-        });
-      },
-      fail: () => {
-        this.manualGetLocation();
-      },
-    });
-  },
-  methods: {
-    change() {},
-    click(name) {
-      this.$refs.uToast.success(`点击了第${name}个`);
-    },
-    // 获取首页数据
-    getHomeData(location) {
-      getHomePageApi(location)
-        .then(res => {
-          this.homeData = res.data;
-          // 将分类数据做缓存处理
-          this.$store.commit('SET_CATEGORIES', this.homeData.categories);
-        })
-        .catch(err => {
-          console.log(err);
-        });
-    },
-    // 手动选择城市
-    manualGetLocation() {
-      uni.chooseLocation({
-        success: res => {
-          this.$store.commit('SET_LOCATION', {
-            longitude: res.longitude,
-            latitude: res.latitude,
-          });
-        },
-      });
-    },
-    // 点击菜单
-    handleMenuClick(item){
-		if(item.id==='all'){
-			uni.navigateTo({
-				url:'pages/business/classfication/classfication'
-			})
-		}
-      uni.showToast({
-        title:'跳转至分类页面',
-        icon:'none'
-      })
-    }
-  },
-  watch: {
-    location: {
-      handler: async function (newVal, oldVal) {
-        const result = await getCurrentLocation(newVal);
-        const param = Object.assign({}, { region: result.data.id }, newVal);
-        this.getHomeData(param);
-      },
-    },
-  },
-};
-</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;
-  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>
+      <block v-if="homeData.recommends&&homeData.recommends.length > 0">
+        <view>
+          <u-grid :border="false" col="2">
+            <u-grid-item
+              @click=" $Router.push(`/pages/business/detail/index?id=${item.id}`) "
+              v-for="item in homeData.recommends"
+              :key="item.id" >
+              <!-- homeData.recommends -->
+              <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/business/nearby/index')"
+      >
+        <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/business/detail/index?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>
+</template>
+
+<script>
+import { getHomePage } from '@/api/home';
+import { mapGetters } from 'vuex';
+import RecommendItem from '@/components/merchant/RecommendItem.vue';
+import HotItem from '@/components/merchant/HotItem.vue';
+
+export default {
+  components: {
+    RecommendItem,
+    HotItem,
+  },
+  data() {
+    return {
+      list: [],
+      keyword: '',
+      swiperList: [
+        'https://cdn.uviewui.com/uview/swiper/swiper1.png',
+        'https://cdn.uviewui.com/uview/swiper/swiper2.png',
+        'https://cdn.uviewui.com/uview/swiper/swiper3.png',
+      ],
+      list1: [
+        {
+          name: 'photo',
+          title: '养车',
+          url: '/pages/business/classify/index',
+        },
+        {
+          name: 'lock',
+          title: '福利',
+        },
+        {
+          name: 'star',
+          title: '分类',
+        },
+        {
+          name: 'hourglass',
+          title: '自驾游',
+        },
+        {
+          name: 'home',
+          title: '门店',
+        },
+        {
+          name: 'photo',
+          title: '养车',
+        },
+        {
+          name: 'lock',
+          title: '福利',
+        },
+        {
+          name: 'star',
+          title: '分类',
+        },
+        {
+          name: 'hourglass',
+          title: '自驾游',
+        },
+        {
+          name: 'home',
+          title: '门店',
+        },
+        {
+          name: 'photo',
+          title: '养车',
+        },
+        {
+          name: 'lock',
+          title: '福利',
+        },
+        {
+          name: 'star',
+          title: '分类',
+        },
+        {
+          name: 'hourglass',
+          title: '自驾游',
+        },
+        {
+          name: 'home',
+          title: '商家列表',
+          url: '/pages/business/listpage/index',
+        },
+      ],
+      homeData: {
+        categories:[],
+        nears: [],
+        recommends: [],
+      },
+      scrollTop: 0,
+    };
+  },
+  computed: {
+    ...mapGetters(['location']),
+    totalHeight() {
+      return (
+        uni.getSystemInfoSync().statusBarHeight +
+        uni.getMenuButtonBoundingClientRect().height
+      );
+    },
+    opacity() {
+      if (this.scrollTop < this.totalHeight) {
+        return (this.scrollTop / this.totalHeight).toFixed(2);
+      }
+      return 1;
+    },
+  },
+  onPageScroll(e) {
+    this.scrollTop = e.scrollTop;
+  },
+  onLoad() {
+    setTimeout(() => {
+      this.list = new Array(10000).fill(1);
+    }, 5000);
+    uni.getLocation({
+      type: 'gcj02',
+      success: res => {
+        this.location.longitude = res.longitude;
+        this.location.latitude = res.latitude;
+        this.$store.commit('SET_LOCATION', {
+          longitude: res.longitude,
+          latitude: res.latitude,
+        });
+      },
+      fail: () => {
+        this.manualGetLocation();
+      },
+    });
+  },
+  methods: {
+    change() {},
+    click(name) {
+      this.$refs.uToast.success(`点击了第${name}个`);
+    },
+    getHomeData(location) {
+      getHomePage(location)
+        .then(res => {
+          this.homeData = res.data;
+          // 将分类数据做缓存处理
+          this.$store.commit('SET_CATEGORIES',this.homeData.categories)
+        })
+        .catch(err => {
+          console.log(err);
+        });
+    },
+    manualGetLocation() {
+      uni.chooseLocation({
+        success: res => {
+          this.$store.commit('SET_LOCATION', {
+            longitude: res.longitude,
+            latitude: res.latitude,
+          });
+        },
+      });
+    },
+  },
+  watch: {
+    location: {
+      handler: function (newVal, oldVal) {
+        this.getHomeData(newVal);
+      },
+    },
+  },
+};
+</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;
+  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>