xiangqin/pages/profile/ganxingqu.vue

<template>
	<view>
		<view class="" style="margin-bottom: 20rpx;
padding: 20rpx 30rpx;background-color: #fff;">
			<u-subsection bgColor="#F3F3F3" button-color="#222222" activeColor="#222222" @change="sectionChange" inactiveColor="#888888" :list="tabslist" :current="current"></u-subsection>
		</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" v-if="item.is_hui==0"   @click="itemClick(item)">
				感兴趣
			</view>
			<view class="topright" v-else   @click="itemClick(item)">
				取消感兴趣
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		onLoad() {
			this.getList()
		},
		data() {
			return {
				list:[],
				current:0,
				tabslist: ['互相感兴趣', '我感兴趣的', '对我感兴趣的'],
			}
		},
		methods: {
			itemClick(item){
				uni.$u.http.post('/api/user/user_interested',{mid:item.mid?item.mid:item.i_id}).then(res => {
					this.$u.toast(res.msg)
					this.getList()
				})
			},
			getList(){
				uni.$u.http.post('/api/user/interested',{type:this.current+1}).then(res => {
					this.list=res.data
				})
			},
			sectionChange(index) {
					
				if(this.current!=index){
					this.current = index;
					this.getList()
				}
						}
		}
	}
</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>