Merge pull request #41 from Development-team-1/고객_홈_가까이있는매장

고객 홈 가까이있는매장

customer-vue/src/api/store.js

@@ -1,13 +1,14 @@
 import axios from "axios";
 
 export default {
-    requestSearchStore(latitude, longitude, storeName, page) {
+    requestNearbyStore(latitude, longitude, storeName, page, size) {
       const options = {
         params: {
           latitude: latitude,
           longitude: longitude,
           storeName: storeName,
-          page: page
+          page: page,
+          size: size
         }
       }
       return axios.get(process.env.VUE_APP_STORE_API_URL + '/store/search', options);

customer-vue/src/components/AppNavigation.vue

@@ -2,12 +2,16 @@
   <v-app-bar
       app
       dense
+      color="white"
+      elevation="1"
   >
     <v-app-bar-nav-icon>
       <v-icon>mdi-arrow-left</v-icon>
     </v-app-bar-nav-icon>
     <v-spacer></v-spacer>
-    <v-toolbar-title>Just Pickup️</v-toolbar-title>
+    <v-toolbar-title>
+      <v-img :src="require('@/assets/just-logo.png')"></v-img>
+    </v-toolbar-title>
     <v-spacer></v-spacer>
     <v-btn icon>
       <v-icon>mdi-magnify</v-icon>

customer-vue/src/components/OrderHistoryCard.vue

@@ -27,7 +27,7 @@
           tile
           size="100"
       >
-        <v-img src="https://cdn.vuetifyjs.com/images/cards/halcyon.png"></v-img>
+        <v-img :src="require('@/assets/store.jpeg')"></v-img>
       </v-list-item-avatar>
 
     </v-list-item>

customer-vue/src/components/SlideStore.vue

@@ -6,7 +6,7 @@
       <v-slide-item
           :class="storeList.isActive"
           v-for="n in 3"
-          :key="n"
+          :key="id + n"
       >
         <v-skeleton-loader
             class="my-3 mx-3"
@@ -14,7 +14,7 @@
             height="250"
             width="165"
             type="card"
-            :key="n"
+            :key="id + n"
         ></v-skeleton-loader>
         </v-slide-item>
       <v-slide-item
@@ -31,11 +31,22 @@
           <v-img
               height="165"
               width="165"
-              src="https://cdn.vuetifyjs.com/images/cards/cooking.png"
+              :src="require('@/assets/store.jpeg')"
           ></v-img>
-          <v-card-subtitle style="white-space:nowrap; overflow:hidden; text-overflow:ellipsis;">{{item.name}}</v-card-subtitle>
+          <v-card-subtitle style="white-space:nowrap; overflow:hidden; text-overflow:ellipsis;">
+            <b>{{item.name}}</b>
+          </v-card-subtitle>
           <v-card-text>
-            거리 : {{item.distance}}
+            <v-row>
+              <div class="orange--text ms-4">
+                <v-icon color="orange" small>mdi-heart</v-icon>
+                {{ item.favoriteCounts }}
+              </div>
+              <div class="grey--text ms-4">
+                <v-icon small>mdi-map-marker</v-icon>
+                {{item.distance}}
+              </div>
+            </v-row>
           </v-card-text>
           </v-skeleton-loader>
         </v-card>
@@ -47,9 +58,7 @@
 <script>
 export default {
   name: "SlideStore",
-  props:{
-    storeList:Array,
-  },
+  props:["storeList", "id"],
 
 }
 </script>

customer-vue/src/views/HomeView.vue

@@ -1,21 +1,31 @@
 <template>
-  <v-container
-      fill-height
-  >
-    <v-row>
-      <v-col>
-        <v-card>
-
-          <v-card-title>Hello</v-card-title>
-          <v-card-text>Nice to meet you</v-card-text>
-        </v-card>
-      </v-col>
-    </v-row>
+  <v-container>
     <v-row justify="center">
       <v-col>
-        <div class="text-h5" >즐겨찾는 매장입니다.</div>
+        <div class="text-h5">
+          회원님과<br>
+          <b><span class="deep-orange--text">가까이 있는 매장</span></b>이에요!
+        </div>
+        <slide-store
+            :store-list="nearbyStores"
+            :id="'nearby'"
+        ></slide-store>
+      </v-col>
+    </v-row>
+
+    <v-divider
+        class="my-5"
+    ></v-divider>
+
+    <v-row justify="center">
+      <v-col>
+        <div class="text-h5" >
+          회원님이<br>
+          <b><span class="deep-orange--text">즐겨찾는 매장</span></b>이에요!
+        </div>
         <slide-store
           :store-list="favoriteStoreList"
+          :id="'favorite'"
         ></slide-store>
       </v-col>
     </v-row>
@@ -38,23 +48,25 @@ export default {
       favoriteStoreList:{
         data:[],
         isActive:'',
-
       },
+      nearbyStores: {
+        data: [],
+        isActive: ''
+      }
     }
   },
   async mounted() {
     const location = await this.getLocation();
     this.latitude = location.latitude;
     this.longitude = location.longitude;
-    storeApi.getFavoriteStore(this.latitude,this.longitude)
-    .then(response =>{
-      this.favoriteStoreList.isActive = 'd-none'
-      this.favoriteStoreList.data = response.data.data;
-    });
+
+    await this.requestFavoriteStore()
+
+    await this.requestNearbyStore();
+
   },
   methods:{
     getLocation: async function() {
-      console.log("initGeoLocation");
       return new Promise(function (resolve, reject) {
         if ('geolocation' in navigator) {
           navigator.geolocation.getCurrentPosition((position) => {
@@ -70,6 +82,32 @@ export default {
         }
       });
     },
+    requestFavoriteStore: async function() {
+      try {
+        const response = await storeApi.getFavoriteStore(this.latitude,this.longitude)
+        this.favoriteStoreList.isActive = 'd-none'
+        this.favoriteStoreList.data = response.data.data;
+      } catch (error) {
+        console.log(error);
+      }
+    },
+    requestNearbyStore: async function() {
+      try {
+        const response = await storeApi.requestNearbyStore(this.latitude, this.longitude, "", 0, 10);
+        const stores = response.data.data.stores;
+        stores.forEach(store => {
+          this.nearbyStores.data.push({
+            id: store.id,
+            name: store.name,
+            distance: store.distance,
+            favoriteCounts: store.favoriteCounts
+          });
+          this.nearbyStores.isActive = 'd-none';
+        })
+      } catch (error) {
+        console.log(error);
+      }
+    },
   }
 }
 </script>

customer-vue/src/views/SearchStore.vue

@@ -29,7 +29,7 @@
         <v-card v-bind:data-id="card.storeId">
           <v-img
               height="180"
-              src="https://cdn.vuetifyjs.com/images/cards/cooking.png"
+              :src="require('@/assets/store.jpeg')"
           ></v-img>
           <v-card-title>{{ card.name }}</v-card-title>
           <v-card-text>
@@ -116,7 +116,7 @@ export default {
       this.isLoading = true;
       try {
         this.page = 0;
-        const response = await storeApi.requestSearchStore(this.latitude, this.longitude, this.storeName, this.page);
+        const response = await storeApi.requestNearbyStore(this.latitude, this.longitude, this.storeName, this.page);
         this.cards = [];
         this.renderCard(response.data);
       } catch (error) {
@@ -128,7 +128,7 @@ export default {
       this.isLoading = true;
       try {
         this.page += 1;
-        const response = await storeApi.requestSearchStore(this.latitude, this.longitude, this.storeName, this.page);
+        const response = await storeApi.requestNearbyStore(this.latitude, this.longitude, this.storeName, this.page);
         this.renderCard(response.data);
       } catch (error) {
         console.log(error);