159 lines
4.7 KiB
Vue
159 lines
4.7 KiB
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> |