Order.vue

팡태(❁´◡`❁)·2022년 2월 14일
0

3rd_20220124

목록 보기
16/29
<template>
  <div>
    <el-card class="fade-in-left">

        <h3>Order.vue</h3>
        {{state}}

        <el-button @click="handleOrderAction">결제하기</el-button>
    </el-card>
  </div>
</template>

<script>
import { reactive } from '@vue/reactivity';
import { useRoute } from 'vue-router';
import { useRouter } from 'vue-router';
import axios from 'axios';


export default {

    setup () {
        const route  = useRoute();
        const router = useRouter();

        const state = reactive({
            code: route.query.code, // 물품 번호
            cnt : route.query.cnt,  // 주문 수량
            token: sessionStorage.getItem("TOKEN")

        });

        const handleOrderAction = async() => {
            const url      = `/shop/order`;
            const headers  = { 
                "Content-Type": "application/json",
                "token": state.token
            };
            const body     = { 
                itemcode: Number(state.code), 
                ordercnt: Number(state.cnt) 
            }
            const response = await axios.post(url, body, { headers });
            console.log(response.date);

            if(response.data.status === 200) {
                alert('주문 완료! :)')
                router.push({ name: 'Mypage', query: { menu: 4 } })
            }
        }
        return { state, handleOrderAction }
    }
}
</script>

<style lang="scss" scoped>
    @import url(../assets/mystyle.css);
</style>

0개의 댓글