отправить письмо с Laravel + Vuejs ajax

Question

У меня есть несколько форм на странице: 1) задать вопрос о продукте 2) запросить отзыв et c.

На данный момент мне удалось настроить одну форму для отправки электронной почты, но она не работает так, как мне нужно. Я хочу получать разные электронные письма, в зависимости от того, какую форму мне отправил пользователь.

Проблемы, которые мне нужно решить:

1) в MainController У меня есть жестко запрограммированная ссылка на new AskQuestion () . Поэтому я могу отправлять электронные письма только с одним шаблоном, расположенным в mail.askquestion . Но я хочу, чтобы отправка электронной почты зависела от того, какую форму пользователь отправил мне.

2) После отправки почты браузер перенаправляет на пустую страницу - поэтому я просто вижу белый экран. Даже Redirect :: back () не работает. В идеале я хочу остаться на странице, где форма была отправлена ​​без перенаправления. Просто с fla sh сообщение успешно или не удалось. Я не могу найти хорошие инструкции, как это сделать, используя ajax.

маршруты \ веб. php

Route::post('/askproduct','MainController@askproduct');

App \ Http \ Controllers \ MainController. php

    public function askproduct(Request $request) {

        request()->validate(['customer_email' => 'required|email']);
        Mail::to( env('MAIL_TO_ADDRESS') )->send(new Email());
        return Redirect::back()->withMessage('Ваш вопрос отправлен! В ближайшее время мы свяжемся с вами.')->withClass('success');

    }

App \ Mail \ Email. php

    public function build(Request $request)
    {
        $this->view('mail.askproduct')
                    ->subject('Новый вопрос по товару')
                    ->withRequest($request);
    }

resources \ js \ компоненты \ AskQuestionModal. vue

<template>

    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title" id="myModalLabel">Ask Question</h4>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close" @click="$emit('close')">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
        <form method="POST">
          <input type="hidden" name="_token" :value="csrf">
          <div class="modal-body">
              <p>{{ product }}</p>
              <input type="hidden" class="form-control" name="product" :value="product">
              <input type="hidden" class="form-control" name="currentUrl" :value="currentUrl">
              <input type="text" class="form-control" name="customer_name" placeholder="Ваше имя" :class="{ 'form-control--error': $v.customer_name.$error }" v-model.trim="$v.customer_name.$model">
              <div class="error" v-if="!$v.customer_name.required">Введите имя</div>
              <div class="error" v-if="!$v.customer_name.minLength">Имя должно содержать минимум {{$v.customer_name.$params.minLength.min}} буквы.</div>
              <div class="error" v-if="!$v.customer_name.cyrillic">Имя должно состоять только из русских букв</div>

              <input type="text" class="form-control" name="customer_email" placeholder="Ваш e-mail" :class="{ 'form-control--error': $v.customer_email.$error }" v-model.trim="$v.customer_email.$model">
              <div class="error" v-if="!$v.customer_email.required">Введите email</div>
              <div class="error" v-if="!$v.customer_email.email">Введите существующий email</div>

              <input type="tel" class="form-control" name="customer_phone" placeholder="Ваш телефон +7 (123) 456-78-99" :class="{ 'form-control--error': $v.customer_phone.$error }" v-model.trim="$v.customer_phone.$model" v-mask="'+# (###) ###-##-##'">
              <div class="error" v-if="!$v.customer_phone.required">Введите номер телефона</div>

              <textarea type="text" rows="3" class="form-control" name="customer_question" placeholder="Ваш вопрос"></textarea>
          </div>
          <div class="modal-footer">
            <button class="button button_fill" type="submit"><span>Отправить вопрос</span></button>
          </div>
        </form>
    </div>


</template>

<script>
    import { alpha, email, helpers, maxLength, minLength, numeric, required } from 'vuelidate/lib/validators';
    import {mask} from 'vue-the-mask';

    export const cyrillic = helpers.regex('cyrillic', /^[А-Яа-яёЁ\s]+$/);


    export default {
        name: "AskQuestionModal",

        data: function () {
          return {
            currentUrl: window.location.pathname,
            csrf: document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
            customer_name: '',
            customer_email: '',
            customer_phone: ''
          }
        },
        directives: {mask},
        props: ['product'],

        mounted() {
           console.log('AskQuestionModal component mounted.')
        },

        validations: {
          customer_name: {
            required,
            cyrillic,
            minLength: minLength(3)
          },
          customer_email: {
            required,
            email
          },
          customer_phone: {
            required
          }

        }

    }
</script>

** resources \ views \ mail \ askquestion.blade. php

<p>Клиент отправил вопрос по товару {{ $request['product'] }}</p>
<p>Заявка отправлена со страницы: {{ env('APP_URL').$request['currentUrl'] }}</p>
<p>Имя: {{ $request['customer_name'] }}</p>
<p>Почта: {{ $request['customer_email'] }}</p>
<p>Тел: {{ $request['customer_phone'] }}</p>
<p>Вопрос: {{ $request['customer_question'] }}</p>