Buy.vue

<template>
  <div>
    <md-card
      style="width: 50%; margin: 4px; marginTop:100px; display: inline-block; vertical-align: top;"
    >
      <md-card-header>
        <md-card-header-text>
          <div class="md-title">
            {{ book.title }}
            <br />
            <br />
          </div>
          <div class="md-subhead" style="text-align:left; font-weight:bold;">
            # 학년: {{ book.grade }}
            <br />
            # 전공: {{ book.major }}
            <br />
            # 세부사항: {{ book.type }}
            <br />
            # 매물: {{ book.stock }}
            <br />
          </div>
        </md-card-header-text>
        <md-card-media md-medium>
          <img v-bind:src="book.src" />
        </md-card-media>
      </md-card-header>
    </md-card>

    <md-card
      style="width: 50%; margin: 4px; marginTop:100px; display: inline-block; vertical-align: top;"
    >
      <md-card-header>
        <div class="md-title">이 책을 구매하시겠습니까?</div>
      </md-card-header>
      <md-card-actions>
        <md-button class="md-raised md-primary" v-on:click="buyBook">구매</md-button>
      </md-card-actions>
    </md-card>
  </div>
</template>

<script>
import Vue from "vue";
import VueMaterial from "vue-material";
import Multiselect from "vue-multiselect";
import "vue-material/dist/vue-material.min.css";
import "vue-material/dist/theme/default.css";
Vue.use(VueMaterial);

export default {
  data() {
    return {
      buyer: {},
      seller: {},
      book: {},
      userId: "",
      sellerId: ""
    };
  },
  created() {
    var id = this.$route.params.id;
    this.$http.get(`/api/books/${id}`).then(response => {
      this.book = response.data;
    });
  },
  methods: {
    buyBook() {
      this.$http.get("/api/login/getUserId").then(response => {
        console.log("rd" + response.data);
        this.userId = response.data;
        var id = this.$route.params.id;
        console.log("user:" + this.userId);
        this.$http
          .post(`/api/books/${id}`, {
            userId: this.userId,
            isBuyer: true
          })
          .then(
            res => {
              console.log(res.data);
              this.sellerId = res.data.result.seller_id;
              this.$http
                .post("/api/transaction", {
                  buyerId: this.userId,
                  sellerId: this.sellerId,
                  bookTitle: this.book.title
                })
                .then(response => {
                  console.log("buy.vue-transaction post");
                  alert("구매에 성공하였습니다. 판매자에게 메일을 보냅니다.");
                  this.sendEmail();
                });
            },
            error => {
              alert(error.response.data.error);
            }
          )
          .catch(error => {
            alert(error);
          });
      });
    },
    sendEmail() {
      console.log("sendEmail start");
      this.$http
        .post("/api/login/getUserInfo", {
          userId: this.userId // buyer
        })
        .then(response => {
          this.buyer = response.data;
        });

      this.$http
        .post("/api/login/getUserInfo", {
          userId: this.sellerId
        })
        .then(response => {
          this.seller = response.data;
        });

      this.$http
        .post("/api/emails", {
          sellerEmail: this.seller.email,
          bookTitle: this.book.title,
          buyerPhoneNumber: this.buyer.phonenumber
        })
        .then(response => {
          alert("이메일 전송 완료");
        }),
        error => {
          alert(error.response.data.error);
        };
    }
  }
};
</script>