From c0c3f51695149c5ec8d88f3923d8ffebe7c8ac8c Mon Sep 17 00:00:00 2001
From: luyuan <1162963624@qq.com>
Date: Fri, 14 Aug 2020 16:51:55 +0800
Subject: [PATCH] =?UTF-8?q?=E5=85=B3=E6=B3=A8=E5=88=97=E8=A1=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 common/api/user.js          |   4 +-
 pageE/mine/MineConcerns.vue | 254 +++++++++++++++++++++++++++++++-----
 2 files changed, 225 insertions(+), 33 deletions(-)

diff --git a/common/api/user.js b/common/api/user.js
index f0a24c9..c194c0b 100644
--- a/common/api/user.js
+++ b/common/api/user.js
@@ -414,8 +414,8 @@ export default {
 				return vm.$u.post('article/articleCollectList');
 			},
 			// 关注用户列表
-			attentionMemberList({ page = 1 } = {}) {
-				return vm.$u.post('member/attentionMemberList', { page: page });
+			attentionMemberList({ page = 1,role } = {}) {
+				return vm.$u.post('member/attentionMemberList', { page,role });
 			},
 			// 可用优惠券商品
 			couponGoodsList({ voucher_id, page, order }) {
diff --git a/pageE/mine/MineConcerns.vue b/pageE/mine/MineConcerns.vue
index c3886e5..5cbf53a 100644
--- a/pageE/mine/MineConcerns.vue
+++ b/pageE/mine/MineConcerns.vue
@@ -1,42 +1,167 @@
 <template>
 	<view class="concerns">
-		<view class="concerns-container">
-			<view v-for="(info, index) in list" :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>
+		<view>
+			<u-tabs-swiper ref="uTabs" :list="list" :current="current" @change="tabsChange" :is-scroll="false"
+			 swiperWidth="750"></u-tabs-swiper>
 		</view>
-		<u-empty mode="list" v-if="!list.length" color="#000" img-width="200" font-size="30" margin-top="120"></u-empty>
+		<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: []
+			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.attentionMemberList();
+		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'
+			}
+		})
 	},
 	// 下拉刷新
-	onPullDownRefresh() {
-        this.attentionMemberList();
-    },
+	
 	methods: {
-		attentionMemberList() {
-			this.$u.api.attentionMemberList().then(res => {
-				uni.stopPullDownRefresh();
+		// 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.list = res.data.data;
-				} else {
-					this.list = [];
+					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, {
@@ -44,26 +169,91 @@ export default {
 			});
 		},
 		changeType(id) {
-				console.log(id);
-				this.$u.api.attentionMember({
-					member_id: id
-				}).then(res => {
-					this.$u.toast(res.message);
-					this.attentionMemberList();
-				})
-			},
+			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;
-		}
+
+		// &:not(:nth-child(3n)) {
+		// 	margin-right: 20rpx;
+		// }
+		margin-left: -20rpx;
 		.daren-item{
 			width: 215rpx;
 			height: 282rpx;
@@ -73,6 +263,8 @@ export default {
 			background-color: #fff;
 			border-radius: 10rpx;
 			overflow: hidden;
+			margin-left: 20rpx;
+			margin-bottom: 20rpx;
 			.head{
 				width: 80rpx;
 				height: 80rpx;