首页搜索 ui 完成 热门推荐 附近商家 分页 完成

src/api/client/home.js

@@ -94,3 +94,19 @@ export function hotMerchant(id) {
     },
   });
 }
+
+
+/**
+ *@description 首页接口 - 分页获取附近商家
+ */
+
+export function indexMerchantPaging(data) {
+  return request({
+    url: `/maintain/merchant/indexMerchantPaging`,
+    data,
+    method: 'get',
+    headers: {
+      'content-type': 'application/x-www-form-urlencoded',
+    },
+  });
+}

src/components/service/serviceItem.vue

@@ -46,7 +46,7 @@
       box-sizing: border-box;
       display: flex;
       align-items: center;
-      box-sizing: 0 0rpx 5rpx 0rpx rgba(0,0,0,1);
+      box-shadow: 0rpx 4rpx 16rpx 0rpx rgba(0,0,0,0.12);
       .img {
         width: 140rpx;
         height: 140rpx;

src/pages.json

@@ -70,13 +70,15 @@
 				{
 					"path": "home/popularRecommend",
 					"style": {
-						"navigationBarTitleText": "热门推荐"
+						"navigationBarTitleText": "热门推荐",
+            "onReachBottomDistance": 0
 					}
 				},
 				{
 					"path": "home/nearbyBusiness",
 					"style": {
-						"navigationBarTitleText": "附近商家"
+						"navigationBarTitleText": "附近商家",
+            "onReachBottomDistance": 0
 					}
 				},
 				{
@@ -361,14 +363,14 @@
 				},
 				{
 					"path" : "storeModule/components/queryWriteOff",
-					"style" : 
+					"style" :
 					{
 						"navigationBarTitleText" : "查询核销"
 					}
 				},
 				{
 					"path" : "storeModule/components/verificationList",
-					"style" : 
+					"style" :
 					{
 						"navigationBarTitleText" : "核销记录"
 					}
@@ -426,4 +428,4 @@
 			"query": ""
 		}]
 	}
-}
+}

src/pages/tabbar/components/HotItem.vue

@@ -42,6 +42,7 @@
       padding-bottom:20rpx;
       border-radius:16rpx;
       margin-bottom:24rpx;
+      box-shadow: 0rpx 4rpx 16rpx 0rpx rgba(0,0,0,0.05);
       .img-box {
         position: relative;
         height: 240rpx;

src/pages/tabbar/components/RecommendItem.vue

@@ -38,6 +38,7 @@ export default {
     padding-bottom:20rpx;
     border-radius:16rpx;
     margin-bottom:24rpx;
+    box-shadow: 0rpx 4rpx 16rpx 0rpx rgba(0,0,0,0.05);
     .img-box {
       position: relative;
       height: 240rpx;

src/pages/tabbar/home.vue

@@ -21,7 +21,7 @@
       </view>
 
       <view class="top-swiper-box">
-        <u-swiper :list="swiperUrlList" @click="handlerSwiperSkip" indicator />
+        <u-swiper :list="swiperUrlList" @click="handlerSwiperSkip" indicator circular />
       </view>
     </view>
 
@@ -332,7 +332,7 @@ export default {
       grid-template-columns: repeat(5, 18%);
       justify-content: space-between;
       grid-gap: 24rpx 0;
-
+      box-shadow: 0rpx 4rpx 16rpx 0rpx rgba(0,0,0,0.05);
       .tabbar-item {
         text-align: center;
 

src/pagesHome/home/nearbyBusiness.vue

@@ -10,7 +10,7 @@
 <script>
   import {
     getHomePageApi,
-    getCurrentLocation
+    indexMerchantPaging
   } from '@/api/client/home';
   import serviceItem from '@/components/service/serviceItem.vue';
   import {
@@ -23,6 +23,8 @@
           region: null, //地区编码
           longitude: null, //经度
           latitude: null, //纬度
+          paging:'1,10',
+          queryType:0, //查询类型 0-附近商家 1- 推荐商家
         },
         init_list: [],
       };
@@ -33,6 +35,23 @@
     computed: {
       ...mapGetters(['location'])
     },
+    // 上滑刷新
+    onReachBottom(){
+      let { paging } = this.queryParams
+      let pageNum = paging.split(',')[0]
+      let pageSize = paging.split(',')[1]
+      if( pageNum * pageSize > this.total ){
+        uni.showToast({
+          title:'没有更多啦~',
+          icon:'none'
+        })
+        return
+      }else{
+        pageNum ++
+        this.queryParams.paging = `${pageNum},${pageSize}`
+        this.handlerInitList()
+      }
+    },
     mounted() {
       let {
         latitude,
@@ -47,9 +66,10 @@
     methods: {
       // 初始化列表信息
       handlerInitList() {
-        getHomePageApi(this.queryParams).then(res => {
-          this.init_list = res.data.nears;
-          this.total = res.data.nears.total;
+        indexMerchantPaging(this.queryParams).then(res => {
+          let { records , total } = res.data
+          this.init_list = [...this.init_list , ...records]
+          this.total = total
         });
       },
     },

src/pagesHome/home/popularRecommend.vue

@@ -1,7 +1,7 @@
 <template>
   <view class="container">
-    <serviceItem :item="init_list" :skipType="0" v-if="init_list.length > 0" />
-    <view v-else style="margin-top: 40rpx">
+    <serviceItem :item="init_list" :skipType="0"/>
+    <view v-if='init_list.length == 0' style="margin-top: 40rpx">
       <u-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png" />
     </view>
   </view>
@@ -10,7 +10,7 @@
 <script>
   import {
     getHomePageApi,
-    getCurrentLocation
+    indexMerchantPaging
   } from '@/api/client/home';
   import serviceItem from '@/components/service/serviceItem.vue';
   import {
@@ -23,6 +23,8 @@
           region: null, //地区编码
           longitude: null, //经度
           latitude: null, //纬度
+          paging:'1,10',
+          queryType:1, //查询类型 0-附近商家 1- 推荐商家
         },
         init_list: [],
       };
@@ -33,6 +35,23 @@
     computed: {
       ...mapGetters(['location'])
     },
+    // 上滑刷新
+    onReachBottom(){
+      let { paging } = this.queryParams
+      let pageNum = paging.split(',')[0]
+      let pageSize = paging.split(',')[1]
+      if( pageNum * pageSize > this.total ){
+        uni.showToast({
+          title:'没有更多啦~',
+          icon:'none'
+        })
+        return
+      }else{
+        pageNum ++
+        this.queryParams.paging = `${pageNum},${pageSize}`
+        this.handlerInitList()
+      }
+    },
     mounted() {
       let {
         latitude,
@@ -47,9 +66,10 @@
     methods: {
       // 初始化列表信息
       handlerInitList() {
-        getHomePageApi(this.queryParams).then(res => {
-          this.init_list = res.data.recommends;
-          // this.total = res.data.nears.total
+        indexMerchantPaging(this.queryParams).then(res => {
+          let { records , total } = res.data
+          this.init_list = [...this.init_list , ...records]
+          this.total = total
         });
       },
     },

src/pagesHome/homeSearch.vue

@@ -1,17 +1,17 @@
 <template>
   <view class="search">
     <view class="search-item">
-      <u-search v-model="search_text" :clearabled="true"  @custom="handlerSearchBtn" @search="handlerSearchBtn" />
+      <u-search v-model="search_text" :clearabled="true"  @custom="handlerSearchBtn" @search="handlerSearchBtn" :actionStyle="{ color:'#215EBE' }" />
       <!-- <button class="search-btn" @click="handlerSearchBtn">搜索</button> -->
     </view>
 
     <!-- 搜索历史 -->
     <view class="history" v-show="search_list.length != 0">
       <view class="history-top">
-        <hotCom>搜索历史</hotCom>
+        <view class='title'>搜索历史</view>
         <view class="history-right" @click="handlerAllSearchRecord">
           <u-icon name="trash" />
-          <text>删除记录</text>
+          <!-- <text>删除记录</text> -->
         </view>
       </view>
       <view class="label">
@@ -21,7 +21,11 @@
           :text="item.name"
           plain
           closable
+          borderColor='#F5F6F8'
           :show="close2"
+          color='#0C1223'
+          bgColor='#F5F6F8'
+          :closable='false'
           @close="handlerCloseSearchItem(item, index)"
           @click="handlerSelctHistItem(item)"
         />
@@ -30,14 +34,20 @@
     <!-- 热门搜索 -->
     <view class="history">
       <view class="history-top">
-        <text class="hotCom">热门搜索</text>
+        <view class='title'>热门搜索</view>
       </view>
       <view class="label">
         <u-tag
           v-for="(item, index) in popular_search_list"
           :text="item.name"
           :key="index"
+          borderColor='#F5F6F8'
+          :show="close2"
+          :color=" index == 0 ? '#EB1010' :  (index == 1 ? '#FF5219' : (index == 2 ? '#FDA50C' : '#0C1223') ) "
+          bgColor='#F5F6F8'
+          :closable='false'
           class="label-item"
+          v-if='index < 8'
           @click="$Router.push(`/pagesHome/marketer/index?id=${item.id}`)"
         />
       </view>
@@ -53,12 +63,13 @@
           @click="$Router.push(`/pagesHome/marketer/index?id=${item.id}`)"
         >
           <view class="item-left">
-            <image class="img" :src="item.logo"></image>
+            <image class="img" :src="item.logo" mode="aspectFill"></image>
           </view>
           <view class="item-right">
             <view class="item-title">{{ item.name }}</view>
             <view class="item-score">
-              <u-rate count="5" :value="item.score" readonly />
+              <u-rate count="5" size='20' :value="item.score" active-color='#FFA033' readonly />
+              <span class="rate-text" v-if='item.score'>( {{ item.score.toFixed(1) }} )</span>
             </view>
             <view class="item-address"> {{ item.address }} </view>
           </view>
@@ -97,6 +108,15 @@ export default {
   computed: {
     ...mapGetters(['location']),
   },
+  watch:{
+    // 搜索历史 > 8 删除最后一项
+    search_list(newValue){
+      if(newValue.length > 8){
+        this.search_list.splice(newValue.length - 1, 1);
+        uni.setStorageSync('searchItem', this.search_list);
+      }
+    }
+  },
   onShow() {
     this.search_text = ''
     if (uni.getStorageSync('searchItem')) {
@@ -177,25 +197,23 @@ export default {
 
 /* 搜索历史样式 */
 .history {
-  padding: 30rpx;
-  margin-bottom: 10rpx;
+  padding: 20rpx 30rpx;
 
   .history-top {
     display: flex;
     justify-content: space-between;
+    align-items: center;
     margin-bottom: 20rpx;
-
+    .title{
+      color:#0C1223;
+      font-size: 30rpx;
+      font-weight: bold;
+    }
     .history-right {
       margin-top: 15rpx;
       display: flex;
       font-size: 12px;
     }
-
-    hotCom {
-      font-size: 15px;
-      font-weight: bold;
-      color: #404045;
-    }
   }
 }
 
@@ -230,16 +248,25 @@ export default {
     .item-right {
       display: flex;
       flex-direction: column;
-      justify-content: space-between;
+      justify-content: space-around;
 
       .item-title {
-        color: #000;
+        color: #0C1223;
         font-weight: bold;
-        font-size: 32rpx;
+        font-size: 28rpx;
+      }
+      .item-score{
+        display: flex;
+        align-items: center;
+        .rate-text{
+          color: #9FA0A6;
+          font-size: 24rpx;
+          margin-left: 10rpx;
+        }
       }
-
       .item-address {
-        color: #a1a1a1;
+        color: #999999;
+        font-size: 24rpx;
       }
     }
   }