deming/pageB/components/details/userinfo.vue

<template>
    <view class="userinfo">
        <view class="user">
            <view class="info">
                <view class="avatar">
                    <image :src="item.member_avatar" mode="aspectFill"></image>
                    <view class="posi-type">
                        <view>
                            <u-icon name="play-right-fill" color="#fff" size="20rpx"></u-icon>
                        </view>
                        <text>正在直播</text>
                    </view>
                </view>
                <view class="box">
                    <view class="name">{{ item.member_nickname }}</view>
                    <view class="num">
                        <text>粉丝数：{{ item.fans_num }}</text>
                        <text>评论数：{{ item.comment_num }}</text>
                    </view>
                </view>
            </view>
            <view class="btn" :class="[ is_follow ? 'btn-follow' : 'btn-unfollow' ]" @click="following">{{ is_follow ? "已关注" : "关注" }}</view>
        </view>
        <view class="profile" :class="{'u-line-2': is_open }" @click="openPro">
            个性签名：{{ item.recommend ? item.recommend : "对方很懒没有留下任何东西~~" }}
            </view>
    </view>
</template>
<style lang="scss" scoped>
.userinfo{
    width: 100%;
    // height: 261rpx;
    padding: 30rpx;
    .user{
        display: flex;
        margin-top: 10rpx;
        align-items: center;
        justify-content: space-between;
        .info{
            display: flex;
            align-items: center;
            .avatar {
                position: relative;
                &>image{
                    z-index: 99;
                    width: 140rpx;
                    height: 140rpx;
                    border-radius: 50%;
                }
                .posi-type {
                    z-index: 100;
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    display: flex;
                    align-items: center;
                    border-radius: 30rpx;
                    background-color: rgba(0,0,0,0.3);
                    & > view {
                        width: 40rpx;
                        height: 40rpx;
                        flex-shrink: 0;
                        text-align: center;
                        line-height: 30rpx;
                        border-radius: 50%;
                        background-color: rgba(0,0,0,0.5);
                    }
                    & > text {
                        padding: 0 12rpx 0 6rpx;
                        color: #FF3131;
                        height: 40rpx;
                        line-height: 40rpx;
                        font-size: 20rpx;
                    }
                }
            }
            .box {
                display: flex;
                justify-content: space-between;
                flex-direction: column;
                height: 79rpx;
                margin-left: 40rpx;
                color: #333;
                .name {
                    font-size: 28rpx;
                }
                .num {
                    font-size: 24rpx;
                    & > :first-child {
                        margin-right: 20rpx;
                    }
                }
            }
        }
        .btn{
            width: 140rpx;
            height: 60rpx;
            font-size: 26rpx;
            line-height: 60rpx;
            text-align: center;
            color:#fff;
            border-radius: 30rpx;
        }
        .btn-follow {
            background-color: #999999;
        }
        .btn-unfollow {
            background-color: #FF780F;
        }
    }
    .profile{
        margin-top: 20rpx;
        font-size: 24rpx;
        color: #333;
        line-height: 1.2;
    }
}
</style>
<script>
export default {
    name:"userinfo",
    props: ["list"],
    data(){
        return {
            item: {},
            is_open: true,
            is_follow: false,
        }
    },
    watch: {
        list(newVal, old) {
            // console.log(newVal);
            this.item = newVal;
            this.is_follow = newVal.is_attention;
        },
        deep: true
    },
    methods: {
        // 打开个性
        openPro() {
            this.is_open = !this.is_open;
        },
        // 关注
        following() {
            this.$u.api.attentionMember({
                member_id: this.item.member_id
            }).then(res => {
                console.log(res);
                if (res.errCode == 0) {
                    this.is_follow = !this.is_follow;
                    this.$u.toast(res.message);
                } else {
                    this.$u.toast(res.message);
                }
            })
        }
    }
}
</script>