Home.vue

사진올리고 나머지공간 준비중 만드는거 있음

<template>
    <div style="height:2000px;" >
        <h3>src/components/Home.vue</h3>
        <vueper-slides ref="myVueperSlides" :parallax="parallax" fixed-height="700px">
            <vueper-slide
                v-for="tmp1 in par.pics" :key="tmp1" :title="tmp1.title"
                :image="tmp1.image" />
        </vueper-slides>
        <div v-if="state.items">
            <el-row :gutter="20" v-for="(i, idx1) in state.items.length/4" :key="i"
                >
                <el-col :span="6" :gutter="10" v-for="(j, idx2) in 4" :key="j">
                    <div @click="handleDetailPage(state.items[(idx1 * 4) + idx2]._id)"
                        style="border:1px solid #cccccc;padding:20px;cursor:pointer;">
                        {{ idx1 }} 
                        {{ idx2 }} 
                        {{ (idx1 * 4) + idx2 }}<br />
                        <img :src="state.items[(idx1 * 4) + idx2].imageUrl" style="width:100%;height:200px;" />
                        {{ state.items[(idx1 * 4) + idx2].name }}<br />
                        {{ state.items[(idx1 * 4) + idx2].price }}<br />
                        {{ state.items[(idx1 * 4) + idx2].content }}<br />
                    </div>
                </el-col>
            </el-row> 
        </div>
    </div>
</template>

<script>
import { onMounted, reactive } from '@vue/runtime-core';
import axios from 'axios';
import { VueperSlides, VueperSlide } from 'vueperslides';
import 'vueperslides/dist/vueperslides.css';
import { useRouter } from 'vue-router';


export default {
    components: {
        VueperSlides, VueperSlide
    },

    data: () => ({
        parallax: 1,
        parallaxFixedContent: false
    }),

    setup () {
        const router = useRouter(); // 이동하기

        const state = reactive ({
            slides: [
                { title: 'a', image: 'http://picsum.photos/500/300?image=112' },
                { title: 'b', image: 'http://picsum.photos/500/300?image=215' },
                { title: 'c', image: 'http://picsum.photos/500/300?image=7' }
            ],
            page: 1,
        })

        const par = {
            pics: [
                { title: 'a', image: require('../assets/4kv.jpg') },
                { title: 'b', image: require('../assets/img2.jpg') },
                { title: 'c', image: require('../assets/4kv2.jpg') }
            ]
        }
        
        const handleLoadData = async() => {
            const url = `/shop/select?page=${state.page}`;
            const headers = {"Content-Type":"application/json"};
            const response = await axios.get(url, { headers });
            console.log(response.data);
            if(response.data.status=== 200){
                state.items = response.data.result;

                const mod = Math.floor(state.items.length % 4);
                if(mod !== 0) {
                    for(let i=0; i<mod; i++) {
                        state.items.push({
                            content: "준비중",
                            imageUrl: require('../assets/default image.png'),
                            name: "준비중",
                            price: '',
                            quantity: '',
                            seller: '',
                            _id: '',
                        })
                    }
                }
            }
        }

        const handleDetailPage = (code) => {
            router.push({ name: 'ItemContent', query: { code: code } });
        }

        onMounted(async() => {
            await handleLoadData();
        })

        return { state, par, handleDetailPage }
    }
}
</script>

<style lang="scss" scoped>
    @import url(../assets/mystyle.css);
</style>