yixiang/pageC/guanzhu-list.vue

<template>
	<view class="content">
		<u-cell-group :border="false" v-if="list.length > 0">
			<u-cell size="large" v-for="(item,index) in list" :key="index">
				<view slot="title" class="u-slot-title hflex acenter">
					<image :src="item.avatar" mode="aspectFill" @click="touser(item)"></image>
					<view class="img-right vflex jbetween">
						<text>{{item.username}}</text>
						<text v-if="item.introduction">{{item.introduction}}</text>
					</view>
				</view>
				<view slot="value" class="u-slot-value" v-if="type == '1'">
					<view class="btn" @click="follow(item)">已关注</view>
				</view>
				<view slot="value" class="u-slot-value" v-if="type == '2'">
					<view class="btn" v-if="item.is_follow">互相关注</view>
					<view class="add hflex acenter jcenter" v-else @click="follow(item)">
						<u-icon name="plus" color="#00B0B0" size="12"></u-icon>
						<text>关注</text>
					</view>
				</view>
			</u-cell>
		</u-cell-group>
		<view class="hflex acenter jcenter " style="height: 100vh;" v-else>
			<u-empty mode="data"></u-empty>
		</view>
	</view>
</template>

<script>
	import $api from '@/static/js/api.js'
	export default {
		data() {
			return {
				type: '',
				list: [],
				userid: '',
				page: 1,
				last_page: 1
			}
		},
		onLoad(option) {
			this.userid = uni.getStorageSync('userid')
			this.type = option.type
			if (this.type == '2') {
				uni.setNavigationBarTitle({
					title: '被关注'
				})
			}
			this.getlist()
		},
		onReachBottom() {
			if (this.page < this.last_page) {
				this.page++
				this.getlist()
			} else {
				uni.$u.toast('已经到底了')
				return
			}
		},
		methods: {
			touser(item) {
				uni.navigateTo({
					url: '/pageC/otherInfo?id=' + item.id
				})
			},
			follow(item) {
				var that = this
				$api.req({
					url: 'user/' + item.id + '/follow',
					method: 'post'
				}, function(res) {
					$api.info(res.msg)
					setTimeout(() => {
						that.page = 1
						that.list = []
						that.getlist()
					}, 1000)
				})
			},
			getlist() {
				var _this = this
				if (_this.type == '1') {
					$api.req({
						url: 'user/follow',
						data: {
							is_page: 1,
							page: _this.page,
							limit: 10
						}
					}, function(res) {
						if (res.code == 10000) {
							_this.list = _this.list.concat(res.data.list)
							_this.last_page = res.data.last_page
						}
					})
				} else {
					$api.req({
						url: 'user/fans',
						data: {
							is_page: 1,
							page: _this.page,
							limit: 10
						}
					}, function(res) {
						if (res.code == 10000) {
							_this.list = _this.list.concat(res.data.list)
							_this.last_page = res.data.last_page
						}
					})
				}
			},
		}
	}
</script>

<style lang="scss">
	.content::v-deep {
		background: #FFFFFF;

		.u-slot-title {
			image {
				width: 92rpx;
				height: 92rpx;
				border-radius: 50%;
			}

			.img-right {
				padding-left: 20rpx;

				text:first-child {
					font-size: 32rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 500;
					color: #333333;
				}

				text:last-child {
					font-size: 26rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					color: #999999;
					padding-top: 12rpx;
					max-width: 450rpx;
				}
			}
		}

		.u-slot-value {
			.add {
				width: 148rpx;
				height: 56rpx;
				background: #FFFFFF;
				border-radius: 28rpx;
				border: 2rpx solid #00B0B0;
				font-size: 24rpx;

				text {
					font-weight: 400;
					color: #00B0B0;

				}
			}

			.btn {
				width: 148rpx;
				height: 56rpx;
				background: #FFFFFF;
				border-radius: 28rpx;
				border: 2rpx solid #999999;
				font-size: 24rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #555555;
				text-align: center;
				line-height: 56rpx;
			}
		}
	}
</style>