xmt/pages/user/mydy.vue

<template>
	<view class="content">
		<empty v-if="list.loaded === true && list.length === 0"></empty>
		<view style="background-color: #fff;">
			<view class="dy-wrap flex" v-for="item in list" @click="navTo('/pages/user/dydetail?id=' + item.id)">
				<view class="user-logo"><image :src="item.headimg" mode=""></image></view>
				<view class="user-num">
					<view class="user-name">{{ item.name }}</view>
					<view class="sub-num">发表文章：{{ item.essay }}</view>
					<view class="read-num">阅读量：{{ item.sort }}</view>
				</view>
				<view class="dy-btn" @click.stop="dingYue(item)" :class="{ dyue: !item.isDy }">{{ item.isDy ? '已订阅' : '+订阅' }}</view>
			</view>
			
		</view>
		<uni-load-more :status="loadingType"></uni-load-more>
	</view>
</template>
<script>
import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
import empty from '@/components/empty';
import { subscribe } from '@/api/user.js';
import { dingYue } from '@/api/art.js';
export default {
	components: {
		empty,
		uniLoadMore
	},
	data() {
		return {
			isDy: true,
			page: 1,
			limit: 10,
			loadingType: 'more',
			list: []
		};
	},
	onLoad() {
		this.loadData();
	},
	onReachBottom() {
		this.loadData();
	},
	methods: {
		loadData() {
			const obj = this;
			if (obj.loadingType == 'noMore' || obj.loadingType == 'loading') {
				return;
			}
			obj.loadingType = 'loading';
			subscribe({
				page: obj.page,
				rows: obj.limit
			}).then(({ data }) => {
				if (data.data.length != '') {
					data.data.map(item => {
						item.isDy = true
						return item
					})
					obj.list = obj.list.concat(data.data);
				}
				if (data.data.length === obj.limit) {
					obj.page++;
					obj.loadingType = 'more';
				} else {
					obj.loadingType = 'noMore';
				}
				console.log(obj.loadingType);
				this.$set(obj.list, 'loaded', true);
			});
		},
		dingYue(item) {
			let obj = this;
			if (item.isDy) {
				uni.showModal({
					title: '提示',
					content: '是否取消关注？',
					complete(e) {
						if (e.confirm) {
							item.isDy = !item.isDy;
							dingYue({
								id: item.id
							}).then(res => {
								obj.$api.msg('已取消关注');
							});
						}
					}
				});
			} else {
				item.isDy = !item.isDy;
				dingYue({
					id: item.id
				}).then(res => {
					obj.$api.msg('关注成功');
				});
			}
		},
		navTo(url) {
			uni.navigateTo({
				url,
				fail() {
					uni.switchTab({
						url
					});
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped>
page {
	background-color: #f8f8f8;
}
.content {
	
}
.dy-wrap {
	width: 707rpx;
	// background: #E9E9E9;
	
	margin: auto;
	border-bottom: #e9e9e9 solid 1px;
	padding: 20rpx 0;
	.user-logo {
		flex-shrink: 0;
		height: 100rpx;
		width: 100rpx;
		border-radius: 50%;
		image {
			width: 100%;
			height: 100%;
			border-radius: 50%;
		}
	}
	.user-num {
		flex-grow: 1;
		padding-left: 10rpx;
		font-size: 24rpx;
		font-weight: 500;
		color: #999999;
		.user-name {
			font-size: 34rpx;
			font-weight: 600;
			color: #333333;
			padding-right: 20rpx;
			padding: 0 20rpx 20rpx 0;
		}
	}
	.dy-btn {
		flex-shrink: 0;
		text-align: center;
		width: 136rpx;
		line-height: 66rpx;
		background: #e9e9e9;
		border-radius: 10rpx;
		font-size: 28rpx;
		font-weight: 500;
		color: #999999;
	}

}
.dyue {
	background: #e6645f !important;
	color: #fff !important;
}
</style>