darenList.vue 1.92 KB
<template>
    <div class="daren-list" v-if="item" @click="jump(item)">
        <div class="box">
            
            <div class="left-box">
                <div class="avatar-box">
                    <img v-lazy="item.user_img || item.logo" class="avatar-img" />
                </div>
                <div class="user-info">
                    <div class="name">
                        {{item.title}}
                    </div>
                    <div class="desc">
                        {{item.fans_count}}粉丝
                    </div>
                </div>
            </div>
            <div class="right-box">
                <div v-if="item.is_fans">
                    <div class="btn" v-if="item.is_fans == '1'" @click.stop.prevent="primary(item)">
                        已关注
                    </div>
                    <div class="btn" v-else @click.stop.prevent="primary(item)">
                        关注
                    </div>
                </div>
                <div class="arrow-box" v-else>
                    <img src="static/img/icon_arrow_right.png" class="arrow-right" />
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'darenLists',
        data() {
            return {

            }
        },
        props: ["item"],
        methods: {

            /**
             * 点击事件
             * @param {object} item [数据参数]
             */
            jump(item) {
                this.$emit("jump", item);
            },

            /**
             * 关注/取消关注达人
             * @param {object} item [数据对象]
             */
            primary(item) {
                this.$emit("primary", item);
            }
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style rel="stylesheet/less" lang="less" scoped>
    @import "darenList";
</style>