Merge branch 'master' into feign_클라이언트_연동

customer-vue/src/api/user.js

@@ -5,6 +5,9 @@ export default {
     requestRegisterUser(user) {
         return axios.post(process.env.VUE_APP_CUSTOMER_SERVICE_BASEURL+"/user-service/store-owner", user);
     },
+    geUserData() {
+        return axios.get(process.env.VUE_APP_CUSTOMER_SERVICE_BASEURL+"/user-service/customer/", );
+    },
 
     async requestLoginUser(email, password) {
         const user = {

customer-vue/src/components/BottomNavigation.vue

@@ -24,7 +24,7 @@ export default {
         {name: "검색", url: "/search", icon: "mdi-magnify"},
         {name: "즐겨찾기", url: "/favorite", icon: "mdi-cards-heart-outline"},
         {name: "주문내역", url: "/history", icon: "mdi-clipboard-check-outline"},
-        {name: "마이페이지", url: "/", icon: "mdi-account-outline"}
+        {name: "마이페이지", url: "/mypage", icon: "mdi-account-outline"}
       ]
     }
   },
@@ -33,6 +33,13 @@ export default {
       this.value = index;
       this.$router.push(url);
     }
+  },mounted() {
+    const path =this.$route.path
+    this.links.forEach((link, index) => {
+      if(link.url === path){
+        this.value = index
+      }
+    })
   }
 }
 </script>

customer-vue/src/main.js

@@ -19,7 +19,10 @@ axios.interceptors.request.use(function (config) {
   config.headers.Authorization = "Bearer " + jwt.getToken();
   return config;
 });
-
+Vue.filter('currency', function (value) {
+  var num = new Number(value);
+  return num.toFixed(0).replace(/(\d)(?=(\d{3})+(?:\.\d+)?$)/g, "$1,")
+});
 
 axios.interceptors.response.use(
     (response) => {

customer-vue/src/router/router.js

@@ -23,7 +23,7 @@ const authCheck = async function (to, from, next) {
       await auth.requestCheckAccessToken();
     }
   } catch (error) {
-    await router.replace("/login");
+    await router.push("/login");
   }
   next();
 };
@@ -60,11 +60,6 @@ const routes = [
         name: 'notification',
         component: () => import('../views/NotificationView')
       },
-      {
-        path: '/login',
-        name: 'login',
-        component: () => import('../views/LoginPage')
-      },
       {
         path: "/item/:itemId",
         name: 'itemDetail',
@@ -77,6 +72,11 @@ const routes = [
       },
     ]
   },
+  {
+    path: '/login',
+    component: () => import('../views/LoginPage'),
+  },
+
   {
     path: '/store',
     redirect: 'store',

customer-vue/src/views/ItemDetail.vue

@@ -133,7 +133,7 @@ export default {
       })
       .catch(error=>{
         console.log(error)
-        this.$router.replace("/")
+        this.$router.push("/")
       })
     },
     parseGroup: function (type){
@@ -151,10 +151,10 @@ export default {
       orderApi.addItemToBasket(this.setItem)
           .then(response=>{
             console.log(response)
-            this.$router.replace("/store/"+this.storeId)
+            this.$router.push("/store/"+this.storeId)
           })
           .catch(error=>{
-            console.log(error)
+            console.log(error.response)
           })
     }
   },

customer-vue/src/views/Layout/StoreLayout.vue

@@ -8,6 +8,17 @@
         <router-view
             v-on:getStoreId="renderNavigation">
         </router-view>
+        <div align="right" >
+          <v-btn
+              color="primary"
+              dark
+              right
+              fab
+              @click="toOrder"
+          >
+            <v-icon>mdi-basket</v-icon>
+          </v-btn>
+        </div>
       </v-container>
     </v-main>
     <bottom-navigation></bottom-navigation>
@@ -45,6 +56,11 @@ export default {
 
       const response = await storeApi.requestStore(this.store.id);
       this.store = response.data.data;
+    },
+    toOrder(){
+      if(confirm("주문화면으로 이동할까요?")){
+        this.$router.push("/order")
+      }
     }
   }
 }

customer-vue/src/views/LoginPage.vue

@@ -1,79 +1,84 @@
 <template>
-  <v-container
-      fill-height
-      >
-    <v-row>
-      <v-col>
-        <div align="center" ><v-img
-            max-height="150"
-            max-width="250"
-            :src="logo"></v-img></div>
-      </v-col>
-    </v-row>
-    <v-row
-        justify="center"
-    >
-      <v-col class="align-content-center">
-
-
-            <v-form ref="form" lazy-validation>
-              <v-text-field
-                  :rules="[v => /.+@.+\..+/.test(v) || 'E-mail must be valid', v => !!v || '이메일은 필수 값입니다']"
-                  label="이메일"
-                  prepend-icon="mdi-account-circle"
-              ></v-text-field>
-              <v-text-field
-                  :rules="[v => !!v || '비밀번호는 필수 값입니다']"
-                  label="비밀번호"
-                  type="Password"
-                  prepend-icon="mdi-lock"
-                  append-icon="mdi-eye-off"
-              ></v-text-field>
-              <v-btn
-                  block
-              >
-                Login
-              </v-btn>
-              <div class="d-block my-7" align="center">
-              <v-subheader class="d-inline" >소셜 아이디로 로그인해보세요!</v-subheader>
-              </div>
-              <div class="d-block " align="center">
+  <v-app>
+    <v-main>
+      <v-container class="px-8 py-8">
+        <v-container
+            fill-height
+        >
+          <v-row>
+            <v-col>
+              <div align="center" ><v-img
+                  max-height="150"
+                  max-width="250"
+                  :src="logo"></v-img></div>
+            </v-col>
+          </v-row>
+          <v-row
+              justify="center"
+          >
+            <v-col class="align-content-center">
+              <v-form ref="form" lazy-validation>
+                <v-text-field
+                    :rules="[v => /.+@.+\..+/.test(v) || 'E-mail must be valid', v => !!v || '이메일은 필수 값입니다']"
+                    label="이메일"
+                    prepend-icon="mdi-account-circle"
+                ></v-text-field>
+                <v-text-field
+                    :rules="[v => !!v || '비밀번호는 필수 값입니다']"
+                    label="비밀번호"
+                    type="Password"
+                    prepend-icon="mdi-lock"
+                    append-icon="mdi-eye-off"
+                ></v-text-field>
                 <v-btn
-                    class="mx-2"
-                    fab
-                    small
+                    block
                 >
-                  <v-img
-                      class="d-inline-block align-lg-center mx-5"
-                      style=""
-                      max-width="38"
-                      max-height="38"
-                      :src="logo_naver"
-                      @click="login_auth('naver')"
-                  />
-                </v-btn>
-                <v-btn
-                    class="mx-2"
-                    fab
-                    small
-                >
-                  <v-img
-                      class="d-inline-block mx-5"
-                      max-width="38"
-                      max-height="38"
-                      min-width="38"
-                      min-height="38"
-                      :src="logo_google"
-                      @click="login_auth('google')"
-                  />
+                  Login
                 </v-btn>
+                <div class="d-block my-7" align="center">
+                  <v-subheader class="d-inline" >소셜 아이디로 로그인해보세요!</v-subheader>
+                </div>
+                <div class="d-block " align="center">
+                  <v-btn
+                      class="mx-2"
+                      fab
+                      small
+                  >
+                    <v-img
+                        class="d-inline-block align-lg-center mx-5"
+                        style=""
+                        max-width="38"
+                        max-height="38"
+                        :src="logo_naver"
+                        @click="login_auth('naver')"
+                    />
+                  </v-btn>
+                  <v-btn
+                      class="mx-2"
+                      fab
+                      small
+                  >
+                    <v-img
+                        class="d-inline-block mx-5"
+                        max-width="38"
+                        max-height="38"
+                        min-width="38"
+                        min-height="38"
+                        :src="logo_google"
+                        @click="login_auth('google')"
+                    />
+                  </v-btn>
 
-              </div>
+                </div>
+
+              </v-form>
+            </v-col>
+          </v-row>
+        </v-container>
+      </v-container>
+    </v-main>
+  </v-app>
 
-            </v-form>
-      </v-col>
-    </v-row>
-  </v-container>
 
 </template>
 
@@ -81,29 +86,31 @@
 import logo from '@/assets/justLogo.png'
 import logo_naver from '@/assets/logo_naver.svg'
 import logo_google from '@/assets/logo_google.png'
+import jwt from "@/common/jwt";
+import router from "@/router/router";
 
 export default {
   name: "LoginPage",
-  data (){
+  data() {
     return {
-      logo : logo,
+      logo: logo,
       logo_naver: logo_naver,
-      logo_google : logo_google,
+      logo_google: logo_google,
       auth_popup: null,
     }
   },
   watch: {
-    auth_popup : function () {
-      this.auth_popup.addEventListener('beforeunload', function() {
-        window.location.href=process.env.VUE_APP_BASEURL;
+    auth_popup: function () {
+      this.auth_popup.addEventListener('beforeunload', function () {
+        window.location.href = process.env.VUE_APP_BASEURL;
       });
 
 
     }
   },
   methods: {
-    login_auth: async function(target) {
-      const _url = process.env.VUE_APP_CUSTOMER_SERVICE_BASEURL+'/user-service/oauth2/authorization/'+target
+    login_auth: async function (target) {
+      const _url = process.env.VUE_APP_CUSTOMER_SERVICE_BASEURL + '/user-service/oauth2/authorization/' + target
       this.auth_popup = window.open(
           _url,
           "",
@@ -112,9 +119,22 @@ export default {
 
     },
   },
+  async mounted() {
+
+    if (!jwt.isExpired())
+      await router.push("/");
+
+  }
 }
 </script>
 
 <style scoped>
-
+.container {
+  max-width: 768px;
+  background-color: white;
+  height: 100%;
+}
+main {
+  background-color: #f2f2f2!important;
+}
 </style>

customer-vue/src/views/MyPage.vue

@@ -0,0 +1,88 @@
+<template>
+  <v-container
+      fill-height
+      >
+    <v-row >
+      <v-col >
+        <v-card
+            class="mx-auto mb-5 v-alert--border"
+            outlined
+
+            elevation="9"
+
+        >
+          <v-card-title>내 정보 관리</v-card-title>
+          <v-card-text>
+            <v-form
+                ref="form"
+                v-model="userData.valid"
+                lazy-validation
+                readonly
+            >
+              <v-text-field
+                  v-model="userData.userId"
+                  label="id"
+                  required
+              />
+              <v-text-field
+                  v-model="userData.email"
+                  label="E-mail"
+                  required
+              />
+
+              <v-text-field
+                  v-model="userData.userName"
+                  label="Name"
+                  required
+              />
+
+              <v-text-field
+                  v-model="userData.phoneNumber"
+                  label="phoneNumber"
+                  required
+              />
+              <v-btn
+                  color="orange"
+                  block>수정하기</v-btn>
+            </v-form>
+          </v-card-text>
+        </v-card>
+      </v-col>
+    </v-row>
+  </v-container>
+</template>
+
+<script>
+
+import userApi from "@/api/user";
+
+export default {
+  name: "MyPage",
+  data (){
+    return {
+      userData:{
+        userId:'',
+        email:'',
+        userName:'',
+        phoneNumber:'',
+      },
+    }
+  },
+  methods:{
+    getUserData(){
+      userApi.geUserData().then(response =>{
+        this.userData = response.data.data
+      }).catch(error =>{
+        console.log(error.response)
+      })
+    },
+  },
+  mounted() {
+    this.getUserData()
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

customer-vue/src/views/OrderPage.vue

@@ -2,12 +2,12 @@
   <div>
     <v-row>
       <v-col>
-        <div class="text-h4" style="white-space:nowrap; overflow:hidden; text-overflow:ellipsis;">{{ orderData.storeId }}</div>
+        <div class="text-h4" style="white-space:nowrap; overflow:hidden; text-overflow:ellipsis;">{{ orderData.storeName }}</div>
       </v-col>
     </v-row>
     <v-row>
       <v-col
-        v-for=" orderItem in orderData._orderItemDtos"
+        v-for=" orderItem in orderData.orderItemDtoList"
         :key = "orderItem.itemId"
       >
         <v-card
@@ -17,16 +17,18 @@
           <v-list-item three-line>
             <v-list-item-content>
               <v-list-item-title class="text-h5 mb-3">
-                {{ orderItem.itemId }}
+                {{ orderItem.itemName }}
               </v-list-item-title>
               <v-list-item-subtitle class="mb-5">
-               수량 : {{ orderItem.count }}
+               수량 : {{ orderItem.count| currency }}
               </v-list-item-subtitle>
-              <div class="text-body-1 mb-5">
-                {{ orderItem.itemOptionIds.join(', ')}}
+              <div class="text-body-1 mb-5" style="white-space:nowrap; overflow:hidden; text-overflow:ellipsis;">
+                {{ orderItem.orderItemOptionDtoList   ?
+                          orderItem.orderItemOptionDtoList.map(x=>x.name).join(', ')
+                          : null}}
               </div>
               <div class="text--primary">
-                합계 : <b> {{ orderItem.count * orderItem.price }} 원</b>
+                합계 : <b> {{ orderItem.count * orderItem.price | currency}} 원</b>
               </div>
             </v-list-item-content>
             <v-list-item-avatar
@@ -46,7 +48,7 @@
     </v-row>
     <v-row>
       <v-col>
-        <div> 합계 : {{orderData.totalPrice}} 원</div>
+        <div> 합계 : {{orderData.orderPrice | currency}} 원</div>
       </v-col>
     </v-row>
         <v-btn
@@ -72,31 +74,24 @@ export default {
   data: function(){
     return {
       orderData:{
-        storeId:Number,
-        _orderItemDtos:[{
-          itemId:Number,
-          itemOptionIds:Array,
-          price:Number,
-          count:Number,
-        }],
-        totalPrice:Number,
-
+        // storeName:Number,
+        // orderItemDtoList:[{
+        //   name:Number,
+        //   itemOptionIds:Array,
+        //   price:Number,
+        //   count:Number,
+        // }],
+        // orderPrice:Number,
       },
     }
   },
-  computed:{
-    test:function (a){
-
-      return a;
-    }
-  },
   methods:{
     saveOrder: function(){
 
       orderApi.saveOrder()
           .then(()=>{
             alert('주문되었습니다.')
-            this.$router.replace("/")
+            this.$router.push("/history")
           })
           .catch(error=>{
             console.log(error)
@@ -106,11 +101,12 @@ export default {
     getOrder: function(){
       orderApi.getOrder()
           .then(response=>{
+            console.log(response)
             this.orderData=response.data.data
           })
           .catch(error=>{
-            console.log(error)
-            this.$router.replace("/")
+            console.log(error.response)
+            history.back();
           })
     },
   }