You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
136 lines
3.6 KiB
136 lines
3.6 KiB
<template>
|
|
<view class="my-fans">
|
|
<view class="my-interest-topic overflow-hd" >
|
|
<block v-for="(item, idx) in fansList" :key="item.id">
|
|
<view class="topic-box flex j-between al-item-center" >
|
|
<view class="my-interest-contx flex al-item-center" @click="goto" :data-url="'/diary/info/info?id='+item.id">
|
|
<image v-if="item.headimg" class="conton-img border-rius-r" :src="item.headimg" mode=""></image>
|
|
<text v-else style="font-size: 80rpx; color: #ccc;" class="iconfont icon-wode"></text>
|
|
<view class="conton-tex overflow-hd flex flex-colum j-between flex1">
|
|
<view class="font-w text-overflow-tx conton-tex-tlt">{{item.nickname}}</view>
|
|
<text class="color-gray text-overflow-tx fs12">笔记·{{item.zan_count}} | 粉丝·{{item.fans_count}}</text>
|
|
</view>
|
|
</view>
|
|
<text v-if="item.is_member_follow == 0" class="concern-btn color-white border-rius-5" :style="{'background-color': t('color1')}" @click="attention(item.id, idx)">关注</text>
|
|
<view v-else class="concern-btn border-rius-5" :style="{'border-color':t('color1'), 'color':t('color1')}" @click="attention(item.id, idx)">
|
|
已关注
|
|
</view>
|
|
</view>
|
|
</block>
|
|
</view>
|
|
<loading v-if="loading"></loading>
|
|
<nomore v-if="!isData"></nomore>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
var app = getApp()
|
|
export default {
|
|
data() {
|
|
|
|
return {
|
|
fansList: [],
|
|
pages: 1,
|
|
loading:false,
|
|
isData: true,
|
|
}
|
|
},
|
|
onLoad() {
|
|
this.getFansList()
|
|
},
|
|
onReachBottom() {
|
|
if(this.isData) {
|
|
this.getFansList()
|
|
}
|
|
},
|
|
methods: {
|
|
getFansList() {
|
|
app.post('ApiMy/FansList',{pagenum: this.pages}, res => {
|
|
if(res.datalist.length > 0) {
|
|
this.fansList = [...this.fansList, ...res.datalist]
|
|
this.pages++
|
|
}else {
|
|
this.isData = false
|
|
}
|
|
})
|
|
},
|
|
attention(id, idxs) {
|
|
app.post('ApiMy/addFollow',{follow_id:id,type:'user'}, res => {
|
|
if(res.msg == '已关注') {
|
|
this.fansList[idxs].is_member_follow = 1
|
|
// this.$forceUpdate()
|
|
}else {
|
|
this.fansList[idxs].is_member_follow = 0
|
|
// this.$forceUpdate()
|
|
}
|
|
})
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.flex {display: flex;}
|
|
.flex1 {flex: 1;}
|
|
.j-center {justify-content: center;}
|
|
.j-between {justify-content: space-between;}
|
|
.j-around {justify-content: space-around;}
|
|
.j-evenly {justify-content: space-evenly;}
|
|
.flex-colum{flex-direction: column;}
|
|
.flex-w{flex-wrap: wrap;}
|
|
.al-item-center {align-items: center;}
|
|
.font-w {font-weight: bold;}
|
|
.fs12 {font-size: 24rpx;}
|
|
.color-gray {color: #999;}
|
|
.color-white{color: #fff;}
|
|
.bg-color-white {background-color: #fff;}
|
|
.border-rius-r {border-radius: 800rpx;}
|
|
.border-rius-5 {border-radius: 10rpx;}
|
|
.border-rius-10 {border-radius: 20rpx;}
|
|
.overflow-hd {overflow: hidden;}
|
|
.text-overflow-tx {text-overflow: ellipsis;white-space: nowrap;overflow: hidden;}
|
|
.text-overflow-line { display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;word-wrap: break-word;word-break: break-all;}
|
|
|
|
.my-fans {
|
|
// padding: 20rpx;
|
|
}
|
|
.my-interest-topic {
|
|
padding: 0 20rpx 20rpx;
|
|
.topic-box {
|
|
margin-top: 28rpx;
|
|
}
|
|
.my-interest-contx {
|
|
width: 80%;
|
|
.tip-c-l-img-t {
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
line-height: 40rpx;
|
|
text-align: center;
|
|
border-radius: 50%;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
.conton-img {
|
|
width: 100rpx;
|
|
height: 100rpx;
|
|
}
|
|
.conton-tex {
|
|
height: 80rpx;
|
|
padding-left: 30rpx;
|
|
|
|
.conton-tex-tlt {
|
|
font-size: 30rpx;
|
|
}
|
|
}
|
|
.concern-btn {
|
|
width: 124rpx;
|
|
height: 60rpx;
|
|
line-height: 60rpx;
|
|
text-align: center;
|
|
border-width: 2rpx ;
|
|
border-style: solid;
|
|
}
|
|
</style>
|
|
|