resources.vue 2.01 KB
<template>
    <div class="resources">
        <template v-for="floor in resources">
            <focus v-if="floor.focus" v-bind:floor="floor.data" v-bind:style="{height: '182px'}"></focus>
            <title-image v-if="floor.titleImage" v-bind:floor="floor.data"></title-image>
            <goods v-if="floor.goods" v-bind:floor="floor.data"></goods>
        </template>
    </div>
</template>

<script>
    const $ = require('yoho-jquery');
    const tip = require('common/tip');
    const bus = require('common/vue-bus');
    const focus = require('component/resources/focus.vue');
    const titleImage = require('component/resources/title-image.vue');
    const goods = require('component/resources/goods.vue');

    module.exports = {
        props: ['channel', 'contentCode'],
        data() {
            return {
                resources: []
            };
        },
        components: {
            focus: focus,
            titleImage: titleImage,
            goods: goods
        },
        watch: {
            channel() {
                this.getResourcesData();
            },
            contentCode() {
                this.getResourcesData();
            }
        },
        methods: {
            getResourcesData() {
                let data = {};

                if (this.contentCode) {
                    data.contentCode = this.contentCode;
                } else {
                    data.channel = this.channel;
                }

                $.ajax({
                    url: '/resources',
                    data: data
                }).then(result => {
                    this.resources = result;
                }).fail(() => {
                    tip('网络错误');
                });
            }
        },
        created() {
            this.getResourcesData();
            bus.$on('changeChannel', channel => {
                this.channel = channel;
                this.getResourcesData();
            });
        }
    };
</script>

<style>
    .resources {
        background: #f6f6f6;
    }
</style>