xiangqin/pages/profile/fensi.vue

<template>
	<view>
		<view class="top1 u-flex u-row-between" v-for="(item,index) in list" :key="index" >
			<view class="topleft u-flex">
				<image :src="item.headimg" mode=""></image>
				<view class="">
					<view class="name">
						{{item.nickname}}
					</view>
					<view class="area">
						{{item.shortname}}·{{item.age}}岁
					</view>
				</view>
			</view>
			<view class="topright" @click="itemClick(item)">
				{{item.is_hui==1?'互相关注':'回关'}}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		onLoad() {
			this.getList()
		},
		data() {
			return {
				list:[]
			}
		},
		methods: {
			itemClick(item){
				uni.$u.http.post('/api/user/user_follow',{mid:item.mid}).then(res => {
					this.$u.toast(res.msg)
					this.getList()
				})
			},
			getList(){
				uni.$u.http.post('/api/user/fans').then(res => {
					this.list=res.data
				})
			},
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #F3F3F3;
	}
	.top1{
		padding: 10rpx 30rpx;
		background-color: #fff;
		// margin-bottom: 20rpx;
	}
.topleft{
				image{
					width: 76rpx;
					height: 76rpx;
					border-radius: 50%;
					margin-right: 20rpx;
				}
				.name{
					font-size: 28rpx;
					color: #222222;
					font-weight: 600;
					image{
						margin-left: 8rpx;
						width: 28rpx;
						height: 28rpx;
					}
				}
				.area{
					font-size: 20rpx;
					color: #999999;
				}
			}
			.topright{
				font-size: 24rpx;
				width: 136rpx;
				height: 56rpx;
				text-align: center;
				line-height:  56rpx;
				border-radius: 28rpx;
				border: 3rpx solid #C7A6CE;
				font-weight: 400;
				color: #999999;
				background: linear-gradient(180deg, #FFAEAE 0%, #A890FE 100%);
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
			}
</style>