Files
sykl-sm/pages/friend/index.vue
2022-07-15 10:49:55 +08:00

104 lines
3.1 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<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>