PHP Classes

File: resources/assets/js/views/UserBoard.vue

Recommend this page to a friend!
  Classes of Hillary Kollan  >  Laravel eCommerce with Vue.js  >  resources/assets/js/views/UserBoard.vue  >  Download  
File: resources/assets/js/views/UserBoard.vue
Role: Auxiliary data
Content type: text/plain
Description: Auxiliary data
Class: Laravel eCommerce with Vue.js
Implementation of an interactive eCommerce site
Author: By
Last change:
Date: 7 months ago
Size: 2,558 bytes
 

Contents

Class file image Download
<template>
    <div>
        <div class="container-fluid hero-section d-flex align-content-center justify-content-center flex-wrap ml-auto">
            <h2 class="title">All your orders</h2>
        </div>
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <br>
                    <div class="row">
                        <div class="col-md-4 product-box" v-for="(order,index) in orders" @key="index">
                            <img :src="order.product.image" :alt="order.product.name">
                            <h5><span v-html="order.product.name"></span><br>
                                <span class="small-text text-muted">$ {{order.product.price}}</span>
                            </h5>
                            <hr>
                            <span class="small-text text-muted">Quantity: {{order.quantity}}
                                    <span class="float-right">{{order.is_delivered == 1? "shipped!" : "not shipped"}}</span>
                                </span>
                            <br><br>
                            <p><strong>Delivery address:</strong> <br>{{order.address}}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<style scoped>
    .small-text { font-size: 14px; }
    .product-box { border: 1px solid #cccccc; padding: 10px 15px; }
    .hero-section { background: #ababab; height: 20vh; align-items: center; margin-bottom: 20px; margin-top: -20px; }
    .title { font-size: 60px; color: #ffffff; }
</style>


<script>
    export default {
        data() {
            return {
                user : null,
                orders : []
            }
        },
        beforeMount() {
            console.log("here");
            this.user = JSON.parse(localStorage.getItem('sellify.user'));
            let headers = {
                "Content-Type": "application/json",
                "Authorization": 'Bearer ' + localStorage.getItem('sellify.jwt')
            };

//            axios.defaults.headers.common['Content-Type'] = 'application/json'
//            axios.defaults.headers.common['Authorization'] = 'Bearer ' + localStorage.getItem('sellify.jwt');

            fetch(`api/users/${this.user.id}/orders`,{headers:headers}).then(response => response.json())
                .then(
                    response =>{
                        this.orders = response
                    }
                )
        }
    }
</script>
For more information send a message to info at phpclasses dot org.