<template>
    <view class="content">
        <block v-if="relationArr.length > 0">
            <view class="While list" v-for="(item, index) in relationArr" :key="index">
                <image class="list-cover" :src="item.avatar || '/static/imgs/default_myHead.png'" mode="aspectFill"></image>
                <view class="list-text">
                    <view class="list-text-name nowrap">{{ item.nickname }}<view class="list-like-online">{{ item.username }}</view></view>
                    <view class="list-text-time nowrap">邀请时间：{{ item.created_at }}</view>
                </view>
            </view>
        </block>
        <view class="pack-center pages-hint" v-else>
            <image src="/static/imgs/coupon_null.png"></image>
            <view>暂无数据</view>
        </view>
    </view>
</template>

<script>
    import { relations } from '@/apis/interfaces/user'
    export default {
    	data() {
    		return {
                relationArr: [],    //我的伙伴列表
    		};
    	},
        onLoad() {
            // 获取商品详情数据
            this.relationsInfo();
        },
        methods: {
            // 商品详情数据
            relationsInfo() {
            	relations().then(res => {
                    this.relationArr = res.users
            	}).catch(err => {
            		uni.showToast({
            			title: err.message,
            			icon: "none"
            		})
            	})
            }
        }
    }
</script>

<style lang="scss" scoped>
    .content{
    	overflow: hidden;
    	background: #f3f4f6;
    }
    
    .While {
        border-radius: 10rpx;
        margin-bottom: 30rpx;
        background-color: #FFFFFF;
        padding:30rpx;
        box-sizing: border-box;
        box-shadow: 0 0 10rpx rgba($color: #000000, $alpha: .05);
    }
    
    .list {
        border-radius: 10rpx;
        margin: 30rpx;
        position: relative;
        .list-cover {
            width: 90rpx;
            height: 90rpx;
            border-radius: 50%;
        }
        .list-text{
            position: absolute;
            width: 100%;
            padding: 30rpx 30rpx 0 150rpx;
            box-sizing: border-box;
            left: 0;
            top: 0;
            .list-text-name {
                line-height: 40rpx;
                display: flex;
                font-size: 34rpx;
                margin-bottom: 10rpx;
                .list-like-online {
                    font-weight: normal;
                    font-size: 24rpx;
                    border: solid 2rpx #edb25f;
                    color: #edb25f;
                    border-radius: 4rpx;
                    display: inline-block;
                    height: 32rpx;
                    line-height: 32rpx;
                    padding: 0 10rpx;
                    margin: 4rpx 15rpx;
                }
            }
            .list-text-time{
                font-size: 26rpx;
                line-height: 38rpx;
                color: #919191;
            }
        }
    }
</style>
