feat:首页

src/App.vue

@@ -11,4 +11,9 @@ export default {
 
 <style lang="scss">
 @import 'uview-ui/index.scss';
+page{
+  background-color: #efefef;
+  color: $uni-text-color;
+  font-size: $uni-font-size-base;
+}
 </style>

src/components/merchant/HotItem.vue

@@ -0,0 +1,63 @@
+<template>
+  <view class="container">
+    <view class="content">
+      <view class="img-box">
+        <image src="https://cdn.uviewui.com/uview/album/1.jpg" mode="scaleToFill"></image>
+        <view class="name u-line-1">{{ item.name }}</view>
+      </view>
+      <view class="pd-10">{{ item.address }}</view>
+      <view class="pd-10">{{ item.distance | mToKm }}</view>
+      <!-- <view class="pd-10">{{ item.description }}</view> -->
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  props: {
+    item: {
+      type: Object,
+      default: () => {},
+    },
+  },
+  filters: {
+    mToKm(v) {
+      return (Number(v) / 1000).toFixed(2) + 'km';
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.container {
+  width: 100%;
+  padding: 20rpx;
+  box-sizing: border-box;
+  .content {
+    background-color: #ffffff;
+    width: 100%;
+    height: 100%;
+    .img-box {
+      position: relative;
+      height: 240rpx;
+      image {
+        width: calc(50vw - 30rpx);
+        height: 240rpx;
+      }
+      .name {
+        width: 100%;
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        background-color: rgba(0, 0, 0, 0.2);
+        color: #ffffff;
+        padding: 10rpx;
+        box-sizing: border-box;
+      }
+    }
+    .pd-10 {
+      padding: 10rpx;
+    }
+  }
+}
+</style>

src/components/merchant/RecommendItem.vue

@@ -0,0 +1,63 @@
+<template>
+  <view class="container">
+    <view class="content">
+      <view class="img-box">
+        <image src="https://cdn.uviewui.com/uview/album/1.jpg" mode="scaleToFill"></image>
+        <view class="name u-line-1">{{ item.name }}</view>
+      </view>
+      <view class="pd-10">{{ item.address }}</view>
+      <view class="pd-10">{{ item.distance | mToKm }}</view>
+      <!-- <view class="pd-10">{{ item.description }}</view> -->
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  props: {
+    item: {
+      type: Object,
+      default: () => {},
+    },
+  },
+  filters: {
+    mToKm(v) {
+      return (Number(v) / 1000).toFixed(2) + 'km';
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.container {
+  width: 100%;
+  padding: 20rpx;
+  box-sizing: border-box;
+  .content {
+    background-color: #ffffff;
+    width: 100%;
+    height: 100%;
+    .img-box {
+      position: relative;
+      height: 240rpx;
+      image {
+        width: calc(50vw - 30rpx);
+        height: 240rpx;
+      }
+      .name {
+        width: 100%;
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        background-color: rgba(0, 0, 0, 0.2);
+        color: #ffffff;
+        padding: 10rpx;
+        box-sizing: border-box;
+      }
+    }
+    .pd-10 {
+      padding: 10rpx;
+    }
+  }
+}
+</style>

src/pages.json

@@ -6,7 +6,8 @@
     {
       "path": "pages/tabbar/home/index",
       "style": {
-        "navigationBarTitleText": "首页"
+        "navigationBarTitleText": "首页",
+        "navigationStyle":"custom"
       }
     },
     {

src/pages/tabbar/home/index.vue

@@ -1,7 +1,18 @@
 <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-sanjiaoxing1"></text>
+        </view>
+        <view slot="center">
+          <u-search placeholder="请输入搜索内容" :showAction="false" v-model="keyword" />
+        </view>
+      </u-navbar>
+    </view>
     <!-- 顶部导航 -->
-    <view class="home-header">
+    <view class="home-header" :style="{ paddingTop: totalHeight + 'px', opacity: 1 - opacity }">
       <view class="goto-address" @click="manualGetLocation">
         <text>地址</text>
         <text class="iconfont icon-sanjiaoxing1"></text>
@@ -10,12 +21,10 @@
         <u-search placeholder="请输入搜索内容" :showAction="false" v-model="keyword" />
       </view>
     </view>
-
     <!-- 轮播图 -->
     <view class="home-swiper">
-      <u-swiper :list="list" indicator @change="change" @click="click" />
+      <u-swiper :list="swiperList" indicator @change="change" @click="click" />
     </view>
-
     <!-- 分类 -->
     <view class="home-list">
       <u-grid :border="false" col="5">
@@ -26,64 +35,34 @@
       </u-grid>
       <u-toast ref="uToast" />
     </view>
-
     <!-- 热门推荐 -->
-    <view class="home-hot">
-      <view class="hot-rec">
-        <view>热门推荐</view>
-        <text class="iconfont icon-youjiantou"></text>
-      </view>
-      <view class="hotList">
-        <view class="hot-item" @click="$Router.push('/pages/business/detail/index')">
-          <view class="hot-image">图片</view>
-          <view class="hot-name">商家名称</view>
-          <view class="hot-name">具体位置</view>
-        </view>
-        <view class="hot-item">
-          <view class="hot-image">图片</view>
-          <view class="hot-name">商家名称</view>
-          <view class="hot-name">具体位置</view>
-        </view>
-        <view class="hot-item">
-          <view class="hot-image">图片</view>
-          <view class="hot-name">商家名称</view>
-          <view class="hot-name">具体位置</view>
-        </view>
-        <view class="hot-item">
-          <view class="hot-image">图片</view>
-          <view class="hot-name">商家名称</view>
-          <view class="hot-name">具体位置</view>
+    <view class="hot">
+      <u-cell :border="false" value="查看更多" isLink>
+        <view slot="title" class="hot-title">
+          热门推荐
         </view>
+      </u-cell>
+      <view>
+        <u-grid :border="false" col="2">
+          <u-grid-item v-for="item in homeData.recommendMerchants" :key="item.id">
+            <recommend-item :item="item"></recommend-item>
+          </u-grid-item>
+        </u-grid>
       </view>
     </view>
     <!-- 附近商家 -->
-
-    <view class="home-hot">
-      <view class="hot-rec">
-        <view>附近商家</view>
-        <i class="iconfont icon-youjiantou"></i>
-      </view>
-      <view class="hotList">
-        <view class="hot-item">
-          <view class="hot-image">图片</view>
-          <view class="hot-name">商家名称</view>
-          <view class="hot-name">具体位置</view>
-        </view>
-        <view class="hot-item">
-          <view class="hot-image">图片</view>
-          <view class="hot-name">商家名称</view>
-          <view class="hot-name">具体位置</view>
-        </view>
-        <view class="hot-item">
-          <view class="hot-image">图片</view>
-          <view class="hot-name">商家名称</view>
-          <view class="hot-name">具体位置</view>
-        </view>
-        <view class="hot-item">
-          <view class="hot-image">图片</view>
-          <view class="hot-name">商家名称</view>
-          <view class="hot-name">具体位置</view>
+    <view class="near">
+      <u-cell :border="false" value="查看更多" isLink>
+        <view slot="title" class="near-title">
+          附近商家
         </view>
+      </u-cell>
+      <view>
+        <u-grid :border="false" col="2">
+          <u-grid-item v-for="item in homeData.nearbyMerchants" :key="item.id">
+            <hot-item :item="item"></hot-item>
+          </u-grid-item>
+        </u-grid>
       </view>
     </view>
   </view>
@@ -91,16 +70,18 @@
 
 <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 {
-      location: {
-        longitude: 0,
-        latitude: 0,
-      },
       keyword: '',
-      list: [
+      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',
@@ -127,49 +108,88 @@ export default {
           title: '门店',
         },
       ],
+      homeData: {
+        configuration: {
+          banners: [],
+        },
+        nearbyMerchants: [],
+        recommendMerchants: [],
+      },
+      scrollTop: 0,
     };
   },
+  computed: {
+    ...mapGetters(['location']),
+    totalHeight() {
+      return uni.getSystemInfoSync().statusBarHeight + uni.getMenuButtonBoundingClientRect().height;
+    },
+    opacity() {
+      if (this.scrollTop < this.totalHeight) {
+        return this.scrollTop / this.totalHeight;
+      }
+      return 1;
+    },
+  },
+  onPageScroll(e) {
+    this.scrollTop = e.scrollTop;
+  },
+  onLoad() {
+    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}个`);
     },
-    onShow() {
-      uni.getLocation({
-        type: 'gcj02',
-        success: res => {
-          console.log('当前位置的经度：' + res.longitude);
-          console.log('当前位置的纬度：' + res.latitude);
-          this.location.longitude = res.longitude;
-          this.location.latitude = res.latitude;
-          this.$store.commit('SET_LOCATION', { longitude: res.longitude, latitude: res.latitude });
-          getHomePage(this.location)
-            .then(res => {
-              console.log(res);
-            })
-            .catch(err => {
-              console.log(err);
-            });
-        },
-      });
+    getHomeData(location) {
+      getHomePage(location)
+        .then(res => {
+          this.homeData = res.data;
+        })
+        .catch(err => {
+          console.log(err);
+        });
     },
     manualGetLocation() {
       uni.chooseLocation({
-        success:  (res)=> {
+        success: res => {
           console.log('位置名称：' + res.name);
           console.log('详细地址：' + res.address);
           console.log('纬度：' + res.latitude);
           console.log('经度：' + res.longitude);
+          this.$store.commit('SET_LOCATION', { longitude: res.longitude, latitude: res.latitude });
         },
       });
     },
   },
+  watch: {
+    location: {
+      handler: function (newVal, oldVal) {
+        console.log(newVal, oldVal);
+        this.getHomeData(newVal);
+      },
+    },
+  },
 };
 </script>
 
 <style lang="scss" scoped>
 .home {
-  background-color: #efefef;
+  .nav-bar {
+    ::v-deep .u-navbar__content {
+      background-color: #ffffff;
+    }
+  }
 }
 
 /* 头部搜索栏 */
@@ -179,7 +199,7 @@ export default {
   height: 90rpx;
   line-height: 90rpx;
   padding: 0 20rpx;
-  background-color: #347caf;
+  background-color: #ffffff;
 
   .goto-address {
     display: flex;
@@ -217,45 +237,21 @@ export default {
 }
 
 /* 热门推荐 */
-.home-hot {
-  margin: 20rpx;
-
-  .hot-rec {
-    margin: 25rpx 0;
-    display: flex;
-    justify-content: space-between;
-
-    h3 {
-      font-weight: bold;
+.hot {
+  ::v-deep .u-cell__body {
+    padding: 10rpx 20rpx;
+    .hot-title{
+      border-left: 4px solid $uni-color-primary;
+      padding-left: 20rpx;
     }
   }
-
-  .hotList {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    justify-content: space-between;
-  }
-
-  .hot-item:nth-last-child(2n + 1) {
-    margin-right: 0;
-  }
-
-  .hot-item {
-    height: 300rpx;
-    width: calc(50% - 10rpx);
-    margin: 0 20rpx 20rpx 0;
-    background-color: #fff;
-
-    .hot-image {
-      background-color: #e8e8e8;
-      height: 200rpx;
-      line-height: 200rpx;
-      text-align: center;
-    }
-
-    .hot-name {
-      font-size: 24rpx;
+}
+.near {
+  ::v-deep .u-cell__body {
+    padding: 10rpx 20rpx;
+    .near-title{
+      border-left: 4px solid $uni-color-primary;
+      padding-left: 20rpx;
     }
   }
 }

src/store/getters.js

@@ -1,6 +1,7 @@
 const getters = {
   access_token: state => state.user.access_token,
   refresh_token: state => state.user.refresh_token,
+  location: state => state.user.location
 };
 
 export default getters;

src/store/modules/user.js

@@ -5,7 +5,7 @@ export default {
   state: () => ({
     access_token: getCache('access_token') || '',
     refresh_token: getCache('refresh_token') || '',
-    location: {
+    location: getCache('location') || {
       longitude: 0,
       latitude: 0,
     },
@@ -21,6 +21,7 @@ export default {
     },
     SET_LOCATION(state, data) {
       state.location = data;
+      setCache('location', state.location);
     },
   },
   actions: {