Advertisement
Beldir

api-call-vuejs

May 24th, 2022
717
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  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
RAW Paste Data Copied
Advertisement