deming/pageE/mine/MineConcerns.vue

<template>
	<view class="concerns">
		<view>
			<u-tabs-swiper ref="uTabs" :list="list" :current="current" @change="tabsChange" :is-scroll="false"
			 swiperWidth="750"></u-tabs-swiper>
		</view>
		<swiper :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish"  style="width:750rpx" :style="{'height':height}">
			<swiper-item class="swiper-item" >
						
				<scroll-view scroll-y style="height: 100%;width: 100%;" class="store" @scrolltolower="shangjiaapi()">
					<view @touchmove.stop="">
						<u-swipe-action
							v-for="(item, index) in shangjia" :key="index" 
							:index='item.friend_tomid'
							:options="options"
							:show="item.show"
							@click="removeFavorite"
							@open="open"
						>
							<view class="item u-border-bottom" @click="toDetailsPage(item.friend_tomid)">
								<image :src="item.friend_tomavatar"></image>
								<!-- 此层wrap在此为必写的，否则可能会出现标题定位错误 -->
								<view class="title-wrap">
									<view class="item-name u-line-1">{{ item.friend_tomname }}</view>
									<view class="item-date">
										<image src="@/pageE/static/mine/26.png"></image>
										<view>{{ item.friend_tomavatar | date }}</view>
									</view>
								</view>
							</view>
						</u-swipe-action>
						<view style="height:20rpx"></view>
						<u-loadmore :status="sstatus" bg-color="#ECECEC" v-if="shangjia.length"  />

						</view>
					
					<u-empty mode="list" v-if="!shangjia.length" color="#000" img-width="200" font-size="30"></u-empty>
				</scroll-view>
			</swiper-item>
			<swiper-item class="swiper-item" >
				<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="darenapi()">
					<view class="concerns-container">
						<view v-for="(info, index) in daren" :key="index">
							<view class="daren-item">
								<image class="head" :src="info.friend_tomavatar" @click="viewDetails({ id: info.friend_tomid, type: info.role })"></image>
								<text class="name" @click="viewDetails({ id: info.friend_tomid, type: info.role })">{{ info.friend_tomname || '' }}</text>
								<view class="guanzhu" @click="changeType(info.friend_tomid)" v-if="info.friend_followstate == 1">取消关注</view>
							</view>
						</view>
						<u-loadmore :status="dstatus" bg-color="#ECECEC" v-if="daren.length" />
					</view>
					<u-empty mode="list" v-if="!daren.length" color="#000" img-width="200" font-size="30"></u-empty>
				</scroll-view>
			</swiper-item>
		</swiper>
		
	</view>
</template>
<script>
export default {
	data() {
		return {
			list: [{name:"商家"},{name:"达人"}],
			current: 0, // tabs组件的current值，表示当前活动的tab选项
			swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
			daren:[],
			shangjia:[],
			height:0,
			show: false,
			options: [
				{
					text: '删除',
					style: {
						backgroundColor: '#FF3131'
					}
				}
			],
			dpage:1,
			spage:1,
			dstatus: 'loadmore',
			sstatus: 'loadmore',
		}
	},
	onShow() {
		this.dstatus = "loadmore"
		this.sstatus = "loadmore"
		this.dpage = 1 
		this.spage = 1
		this.shangjiaapi();
		this.darenapi();
	},
	onLoad(){
		let that = this

		uni.getSystemInfo({
			success(res){
				that.height = res.windowHeight - (res.windowWidth / 750 * 80) + 'px'
			}
		})
	},
	// 下拉刷新
	
	methods: {
		// tabs通知swiper切换
		tabsChange(index) {
			this.swiperCurrent = index;
		},
		// swiper-item左右移动，通知tabs的滑块跟随移动
		transition(e) {
			let dx = e.detail.dx;
			this.$refs.uTabs.setDx(dx);
		},
		// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
		// swiper滑动结束，分别设置tabs和swiper的状态
		animationfinish(e) {
			let current = e.detail.current;
			this.$refs.uTabs.setFinishCurrent(current);
			this.swiperCurrent = current;
			this.current = current;
		},
		// scroll-view到底部加载更多
		onreachBottom() {
			
		},
		shangjiaapi() {
			if(this.sstatus ==  "loading" || this.sstatus == 'nomore') return
			this.sstatus = "loading"
			this.$forceUpdate();
			this.$u.api.attentionMemberList({role:2,page:this.spage}).then(res => {
				console.log(res)
				if(res.errCode == 0) {
					this.spage > 1 ? this.shangjia.push(...res.data.data) : (this.shangjia = res.data.data);
					this.sstatus = "loadmore"

					if(res.data.data.length == 0){
						this.sstatus = 'nomore'
					}
					this.spage++
					this.$forceUpdate();
				}
			})
		},
		darenapi() {
			this.$u.api.attentionMemberList({role:3,page:this.dpage}).then(res => {
				if(this.dstatus ==  "loading" || this.dstatus == 'nomore') return
				this.dstatus = "loading"
			this.$forceUpdate();

				console.log(this.dstatus)
				console.log(res)
				if(res.errCode == 0) {
					this.dpage > 1 ? this.daren.push(...res.data.data) : (this.daren = res.data.data);
					this.dstatus = "loadmore"

					if(res.data.data.length == 0){
						this.dstatus = 'nomore'
					}
					this.dpage++
			this.$forceUpdate();

				}

			})
		},
		viewDetails({ id, type }) {
			let src = type == 3 ? 'pageB/details/index' : 'pageC/merchant/index';
			this.$u.route(src, {
				id: id
			});
		},
		changeType(id) {
			console.log(id);
			this.$u.api.attentionMember({
				member_id: id
			}).then(res => {
				this.$u.toast(res.message);
				this.attentionMemberList();
			})
		},
		removeFavorite(id) {
			console.log(id)
			this.$u.api.removeFavorite({
				id: id,
				type: 'store'
			}).then(res => {
				this.$u.toast(res.message);
				if(res.errCode == 0) {
					this.sstatus = "loadmore"
					this.spage = 1
					this.shangjiaapi();
				}
			})
		},
		toDetailsPage(id) {
			this.$u.route('pageC/merchant/index', {
				id: id
			});
		},
		open(index) {
			// 先将正在被操作的swipeAction标记为打开状态，否则由于props的特性限制，
			// 原本为'false'，再次设置为'false'会无效
			this.shangjia[index].show = true;
			this.shangjia.map((val, idx) => {
				if(index != idx) this.list[idx].show = false;
			})
		}
	},
};
</script>
<style lang="scss" scoped>
.store {
	background-color: #ECECEC;
	.item {
		padding: 30rpx;
		display: flex;
		align-items: center;
		> image {
			width: 80rpx;
			height: 80rpx;
			border-radius: 50%;
			flex-shrink: 0;
			margin-right: 21rpx;
		}
		.title-wrap {
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.item-name {
				width: 260rpx;
				font-size: 30rpx;
				color: rgba(51,51,51,1);
			}
			.item-date {
				display: flex;
				align-items: center;
				> image {
					margin-right: 25rpx;
					width: 24rpx;
					height: 24rpx;
				}
			}
		}
	}
}
.concerns {
	background-color: #ECECEC;
	.concerns-container {
		padding: 30rpx;
		display: flex;
		flex-wrap: wrap;

		// &:not(:nth-child(3n)) {
		// 	margin-right: 20rpx;
		// }
		margin-left: -20rpx;
		.daren-item{
			width: 215rpx;
			height: 282rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			background-color: #fff;
			border-radius: 10rpx;
			overflow: hidden;
			margin-left: 20rpx;
			margin-bottom: 20rpx;
			.head{
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
				margin-top: 24rpx;
				background-color: #0f0;
			}
			.name{
				font-size: 26rpx;
				color: #333;
				font-weight: 400;
				margin-top: 23rpx;
			}
			.zhuangtai{
				font-size:22rpx;
				color: #999;
				margin-top: 19rpx;
			}
			.guanzhu{
				width: 130rpx;
				height: 50rpx;
				background-color: #EDEDED;
				font-size: 26rpx;
				line-height: 50rpx;
				color: #fff;
				text-align: center;
				margin-top: 19rpx;
				border-radius: 25rpx;
			}
			.action{
				background: #f3f3f3;
			}
		}
	}
}
</style>