API tools faq
paste
Advertisement
Beldir

api-call-vuejs

Beldir
May 24th, 2022
800
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
JavaScript 8.14 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="fr">
  3. <head>
  4.     <meta charset="utf-8"/>
  5.  
  6.     <!-- Vue material (+ Roboto Font and Icons) -->
  7.     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic|Material+Icons">
  8.     <link rel="stylesheet" href="https://unpkg.com/vue-material/dist/vue-material.min.css">
  9.     <link rel="stylesheet" href="https://unpkg.com/vue-material/dist/theme/default.css">
  10.     <link rel="stylesheet" href="css/main.css">
  11.  
  12.     <title>Assurance Sim</title>
  13. </head>
  14. <body>
  15.     <div id="app">
  16.         <form novalidate class="md-layout" @submit.prevent="validateUser" style="display: flex; justify-content: center;">
  17.             <md-card class="md-layout-item md-size-40 md-small-size-100">
  18.  
  19.                 <!-- Main covers -->
  20.                 <md-card-header class="md-title">
  21.                     Your RC PRO main covers
  22.                 </md-card-header>
  23.            
  24.                 <md-card-content class="md-layout md-gutter">
  25.  
  26.                     <!-- List of main covers -->
  27.                     <div class="md-layout-item md-small-size-100" v-for="cover in mainCovers" :key="cover.name">
  28.                         <md-card v-bind:class="{ card_selected: cover.selected }">
  29.                             <!-- Tooltip -->
  30.                             <md-tooltip style="font-size: 12px" md-direction="top" v-if="cover.details && cover.details != ''">{{ cover.details }}</md-tooltip>
  31.  
  32.                             <!-- Title and content -->
  33.                             <md-card-header class="md-title">
  34.                                 {{ cover.name }}
  35.                                 <md-icon class="icon_check" v-if="cover.selected">check</md-icon>
  36.                             </md-card-header>
  37.                             <md-card-content>{{ cover.price }} €</md-card-content>
  38.  
  39.                             <!-- Selection button -->
  40.                             <md-button class="select_button" v-bind:class="{ button_selected: cover.selected}" @click="cover.selected = !cover.selected">
  41.                                 <div v-if="cover.selected">Deselect</div>
  42.                                 <div v-else>Select</div>
  43.                             </md-button>
  44.                         </md-card>
  45.                     </div>
  46.  
  47.                 </md-card-content>
  48.  
  49.                 <!-- Additional covers -->
  50.                 <md-card-header class="md-title">
  51.                     Additional covers
  52.                 </md-card-header>
  53.  
  54.                 <md-card-content>
  55.  
  56.                     <!-- List of main covers -->
  57.                     <div class="md-layout-item md-small-size-100" v-for="cover in additionalCovers" :key="cover.name">
  58.                         <!-- Tooltip -->
  59.                         <md-tooltip style="font-size: 12px" md-direction="top" v-if="cover.details && cover.details != ''">{{ cover.details }}</md-tooltip>
  60.  
  61.                         <!-- Content of the cover -->
  62.                         <md-chip
  63.                             id="checkbox_1"
  64.                             v-bind:class="{ chip_selected: cover.selected }"
  65.                             @click="cover.selected = !cover.selected"
  66.                             class="clickable_chip"
  67.                             md-clickable
  68.                         >
  69.                             <table style="table-layout: fixed; width: 200px;">
  70.                                 <tr>
  71.                                     <td style="width: 25px; margin: 0; padding: 0"><input type="checkbox" v-model="cover.selected"></td>
  72.                                     <td style="width: 100px;">{{ cover.name }}</td>
  73.                                     <td style="width: 25px;"><md-icon>arrow_right</md-icon></td>
  74.                                     <td style="width: 25px;">{{ cover.price }} €</td>
  75.                                 </tr>
  76.                             </table>
  77.                         </md-chip>
  78.                     </div>
  79.  
  80.                 </md-card-content>
  81.  
  82.                 <!-- Deductible -->
  83.                 <md-card-content>
  84.                     <div>
  85.                         Deductible:
  86.                     </div>
  87.                 </md-card-content>
  88.  
  89.                 <!-- Coverage ceiling -->
  90.                 <md-card-content>
  91.                     <div>
  92.                         Coverage ceiling:
  93.                     </div>
  94.                 </md-card-content>
  95.  
  96.                 <!-- Total -->
  97.                 <md-card-header class="md-title price_total">
  98.                     Total: {{ totalPrice }} €
  99.                 </md-card-header>
  100.             </md-card>
  101.         </form>
  102.     </div>
  103.  
  104.     <script src="https://unpkg.com/vue@2.5.22"></script><!-- J'utilise la version 2.5 car la plupart des librairies ne sont pas prêtes pour Vue3-->
  105.    <script src="https://unpkg.com/vue-material"></script>
  106.    <script>
  107.        Vue.use(VueMaterial.default)
  108.  
  109.        const app = new Vue({
  110.            el: '#app',
  111.            data: {
  112.                // Main covers
  113.                mainCovers: [
  114.                    {
  115.                        selected: true,
  116.                        name: "Pro indemnity",
  117.                        price: 290
  118.                    },
  119.                    {
  120.                        selected: false,
  121.                        name: "Public liability",
  122.                        price: 130
  123.                    }
  124.                ],
  125.                // Additional covers
  126.                additionalCovers: [
  127.                    {
  128.                        selected: false,
  129.                        name: "Entrusted objects",
  130.                        details: "The Entrusted objects cover is here to...",
  131.                        price: 53
  132.                    },
  133.                    {
  134.                        selected: false,
  135.                        name: "Legal expenses",
  136.                        details: "The legal expenses cover is used in case of...",
  137.                        price: 13
  138.                    },
  139.                    {
  140.                        selected: true,
  141.                        name: "After delivery",
  142.                        details: "After delivery's cover cover the cost of...",
  143.                        price: 20
  144.                    }
  145.                ],
  146.                // Misc.
  147.                deductible: "small",
  148.                coverageCeiling: "large",
  149.            },
  150.  
  151.            computed: {
  152.                totalPrice() {
  153.                    let sum = 0
  154.  
  155.                    for(let i = 0; i < this.mainCovers.length; i++) {
  156.                        if(this.mainCovers[i].selected) {
  157.                            sum += this.mainCovers[i].price
  158.                        }
  159.                    }
  160.  
  161.                    for(let i = 0; i < this.additionalCovers.length; i++) {
  162.                        if(this.additionalCovers[i].selected) {
  163.                            sum += this.additionalCovers[i].price
  164.                        }
  165.                    }
  166.  
  167.                    return sum
  168.                },
  169.            },
  170.  
  171.            mounted() {
  172.                this.getQuote()
  173.            },
  174.  
  175.            methods: {
  176.                // Call the API
  177.                getQuote() {
  178.                    const requestOptions = {
  179.                        method: "POST",
  180.                        headers: { "Content-Type": "application/json" , "X-Api-Key": "ABCD1NGkfn5fpHuJHrbvG3niQX6A1C123ftF9ABC"},
  181.                        body: JSON.stringify({
  182.                            "annualRevenue": 80000,
  183.                            "enterpriseNumber": "0649885171",
  184.                            "legalName": "example SA",
  185.                            "naturalPerson": true,
  186.                            "nacebelCodes": ["62010", "62020", "62030", "62090", "63110"]
  187.                        })
  188.                    };
  189.                    fetch("https://mon.api.be/quotes/professional-liability", requestOptions)
  190.                     .then(response => response.json())
  191.                     .then(promise => {
  192.                         console.log(promise.data)
  193.                         this.coverageCeiling = promise.data.coverageCeiling
  194.                     });
  195.  
  196.                 }
  197.             }
  198.         })
  199.     </script>
  200. </body>
  201. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!