feat(customer-vue): Just Pick-up 주문내역 페이지 구현
- 주문내역 페이지 카드 구현 - API 호출 부 구현
This commit is contained in:
bum12ark
@@ -1,4 +1,6 @@
|
||||
VUE_APP_BASEURL=https://just-pickup.com:8080
|
||||
VUE_APP_OWNER_SERVICE_BASEURL=https://just-pickup.com:8001
|
||||
VUE_APP_CUSTOMER_SERVICE_BASEURL=https://just-pickup.com:8000
|
||||
|
||||
VUE_APP_STORE_API_URL=https://just-pickup.com:8000/store-service/api/customer
|
||||
VUE_APP_ORDER_API_URL=https://just-pickup.com:8000/order-service/api/customer
|
||||
12
customer-vue/src/api/order.js
Normal file
12
customer-vue/src/api/order.js
Normal file
@@ -0,0 +1,12 @@
|
||||
import axios from "axios";
|
||||
|
||||
export default {
|
||||
requestOrderHistory(page) {
|
||||
const options = {
|
||||
params: {
|
||||
page: page
|
||||
}
|
||||
}
|
||||
return axios.get(process.env.VUE_APP_ORDER_API_URL + "/order/history", options);
|
||||
}
|
||||
}
|
||||
@@ -6,25 +6,9 @@
|
||||
:value="value"
|
||||
color="primary"
|
||||
>
|
||||
<v-btn>
|
||||
<span>홈</span>
|
||||
<v-icon>mdi-home-outline</v-icon>
|
||||
</v-btn>
|
||||
<v-btn>
|
||||
<span>검색</span>
|
||||
<v-icon>mdi-magnify</v-icon>
|
||||
</v-btn>
|
||||
<v-btn>
|
||||
<span>즐겨찾기</span>
|
||||
<v-icon>mdi-cards-heart-outline</v-icon>
|
||||
</v-btn>
|
||||
<v-btn>
|
||||
<span>주문내역</span>
|
||||
<v-icon>mdi-clipboard-check-outline</v-icon>
|
||||
</v-btn>
|
||||
<v-btn>
|
||||
<span>마이페이지</span>
|
||||
<v-icon>mdi-account-outline</v-icon>
|
||||
<v-btn v-for="(item, index) in links" v-bind:key="index" @click="clickGo(index, item.url)">
|
||||
<span>{{ item.name }}</span>
|
||||
<v-icon>{{ item.icon }}</v-icon>
|
||||
</v-btn>
|
||||
</v-bottom-navigation>
|
||||
</template>
|
||||
@@ -34,7 +18,20 @@ export default {
|
||||
name: "BottomNavigation",
|
||||
data: function() {
|
||||
return {
|
||||
value: 0
|
||||
value: 0,
|
||||
links: [
|
||||
{name: "홈", url: "/", icon: "mdi-home-outline"},
|
||||
{name: "검색", url: "/search", icon: "mdi-magnify"},
|
||||
{name: "즐겨찾기", url: "/", icon: "mdi-cards-heart-outline"},
|
||||
{name: "주문내역", url: "/history", icon: "mdi-clipboard-check-outline"},
|
||||
{name: "마이페이지", url: "/", icon: "mdi-account-outline"}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
clickGo: function (index, url) {
|
||||
this.value = index;
|
||||
this.$router.push(url);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
62
customer-vue/src/components/OrderHistoryCard.vue
Normal file
62
customer-vue/src/components/OrderHistoryCard.vue
Normal file
@@ -0,0 +1,62 @@
|
||||
<template>
|
||||
<v-card
|
||||
class="mx-auto mb-5"
|
||||
outlined
|
||||
|
||||
>
|
||||
<v-list-item three-line>
|
||||
<v-list-item-content>
|
||||
<v-list-item-title class="text-h5 mb-3">
|
||||
{{ card.storeName }}
|
||||
<div class="grey--text caption">
|
||||
{{ card.orderTime }}
|
||||
</div>
|
||||
</v-list-item-title>
|
||||
<v-list-item-subtitle class="mb-5">
|
||||
{{ card.orderStatus }}
|
||||
</v-list-item-subtitle>
|
||||
<div class="text-body-1 mb-5">
|
||||
{{ card.orderItemNames }}
|
||||
</div>
|
||||
<div class="text--primary">
|
||||
합계 : <b>{{ card.orderPrice }}원</b>
|
||||
</div>
|
||||
</v-list-item-content>
|
||||
|
||||
<v-list-item-avatar
|
||||
tile
|
||||
size="100"
|
||||
>
|
||||
<v-img src="https://cdn.vuetifyjs.com/images/cards/halcyon.png"></v-img>
|
||||
</v-list-item-avatar>
|
||||
|
||||
</v-list-item>
|
||||
|
||||
<v-card-actions class="pb-1">
|
||||
<v-btn block color="primary">재주문하기</v-btn>
|
||||
</v-card-actions>
|
||||
|
||||
<v-card-actions class="pt-1">
|
||||
<v-btn block outlined color="primary">자세히보기</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "OrderHistoryCard",
|
||||
props: {
|
||||
card: {
|
||||
storeName: String,
|
||||
orderTime: String,
|
||||
orderStatus: String,
|
||||
orderItemNames: String,
|
||||
orderPrice: String
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -29,20 +29,18 @@ axios.interceptors.response.use(
|
||||
const originalRequest = error.config;
|
||||
if (error.response.status === 401) {
|
||||
let code = error.response.data.code;
|
||||
if (code === "EXPIRED") {
|
||||
console.log("## expired");
|
||||
try {
|
||||
if (code === "EXPIRED") {
|
||||
const accessToken = await auth.requestReissue();
|
||||
originalRequest.headers.Authorization = "Bearer " + accessToken;
|
||||
return axios(originalRequest);
|
||||
} catch (reissueError) {
|
||||
}
|
||||
} catch (error2) {
|
||||
window.location.href = process.env.VUE_APP_BASEURL+"/login";
|
||||
alert("권한이 없습니다. 다시 로그인 해주세요");
|
||||
return Promise.reject(error2);
|
||||
}
|
||||
}
|
||||
window.location.href = process.env.VUE_APP_BASEURL+"/login";
|
||||
alert("권한이 없습니다. 다시 로그인해주세요.");
|
||||
}
|
||||
return Promise.reject(error);
|
||||
}
|
||||
);
|
||||
@@ -28,7 +28,12 @@ const routes = [
|
||||
path: "/search",
|
||||
name: 'search-store',
|
||||
component: () => import('../views/SearchStore')
|
||||
}
|
||||
},
|
||||
{
|
||||
path: "/history",
|
||||
name: 'order-history',
|
||||
component: () => import('../views/OrderHistory')
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
|
||||
103
customer-vue/src/views/OrderHistory.vue
Normal file
103
customer-vue/src/views/OrderHistory.vue
Normal file
@@ -0,0 +1,103 @@
|
||||
<template>
|
||||
<div>
|
||||
|
||||
<order-history-card
|
||||
v-for="card in cards"
|
||||
v-bind:key="card.orderId"
|
||||
:card="card"
|
||||
></order-history-card>
|
||||
|
||||
<br>
|
||||
|
||||
<v-row justify="center" v-if="hasNext">
|
||||
<v-btn @click="more"
|
||||
elevation="2"
|
||||
color="blue-grey"
|
||||
class="ma-2 white--text"
|
||||
>
|
||||
<b>더보기</b>
|
||||
<v-icon>mdi-chevron-down</v-icon>
|
||||
</v-btn>
|
||||
</v-row>
|
||||
|
||||
<v-overlay :value="isLoading">
|
||||
<v-progress-circular
|
||||
indeterminate
|
||||
size="64"
|
||||
></v-progress-circular>
|
||||
</v-overlay>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import orderApi from "../api/order.js"
|
||||
|
||||
import OrderHistoryCard from "../components/OrderHistoryCard";
|
||||
|
||||
export default {
|
||||
name: "OrderHistory",
|
||||
components: {OrderHistoryCard},
|
||||
mounted() {
|
||||
this.search();
|
||||
},
|
||||
data: function() {
|
||||
return {
|
||||
isLoading: true,
|
||||
page: 0,
|
||||
cards: [],
|
||||
hasNext: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
search: async function() {
|
||||
this.isLoading = true;
|
||||
try {
|
||||
this.page = 0;
|
||||
const response = await orderApi.requestOrderHistory(this.page);
|
||||
this.cards = [];
|
||||
this.renderCard(response.data);
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
this.isLoading = false;
|
||||
},
|
||||
more: async function() {
|
||||
this.isLoading = true;
|
||||
try {
|
||||
this.page += 1;
|
||||
const response = await orderApi.requestOrderHistory(this.page);
|
||||
this.renderCard(response.data)
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
this.isLoading = false;
|
||||
},
|
||||
renderCard: function(json) {
|
||||
const data = json.data;
|
||||
|
||||
this.hasNext = data.hasNext;
|
||||
const orders = data.orders;
|
||||
|
||||
orders.forEach( (order) => {
|
||||
let orderItemNames = [];
|
||||
order.orderItems.forEach(orderItem => {
|
||||
orderItemNames.push(orderItem.orderItemName);
|
||||
})
|
||||
|
||||
this.cards.push({
|
||||
orderId: order.orderId,
|
||||
orderTime: order.orderTime,
|
||||
storeName: order.storeName,
|
||||
orderPrice: order.orderPrice,
|
||||
orderStatus: order.orderStatus,
|
||||
orderItemNames: orderItemNames.join(", ")
|
||||
})
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user