renshou/card/myNetWork/myNetWork.vue

<template>
	<view>
		<!-- 切换和搜索 -->
		<view class="top-bar">
			<view class="tab-nav ddflex">
				<view :class="'tab-nav-item '+(tabIndex==1?'tab-nav-item-active':'')" @click="changTab(1)">好友</view>
				<view :class="'tab-nav-item '+(tabIndex==2?'tab-nav-item-active':'')" @click="changTab(2)">关注</view>
				<view :class="'tab-nav-item '+(tabIndex==3?'tab-nav-item-active':'')" @click="changTab(3)">粉丝</view>
			</view>
			<!-- 搜索 -->
			<view class="search">
				<view class="search-bar ddflex">
					<image src="../../static/images/ssico.png" class="ssico"></image>
					<input v-model="search" placeholder="搜索" confirm-type="search" @confirm="searchFn()" placeholder-class="placeholder" class="ipt fflex" />
					<!-- <view class="clear">取消</view> -->
				</view>
			</view>
		</view>
		<!-- 隐藏 -->
		<view class="top-bar" style="position: relative;visibility: hidden;">
			<view class="tab-nav ddflex">
				<view :class="'tab-nav-item '+(tabIndex==1?'tab-nav-item-active':'')" @click="changTab(1)">人脉圈</view>
				<view :class="'tab-nav-item '+(tabIndex==2?'tab-nav-item-active':'')" @click="changTab(2)">名片夹</view>
			</view>
			<!-- 搜索 -->
			<view class="search">
				<view class="search-bar ddflex">
					<image src="../../static/images/ssico.png" class="ssico"></image>
					<input v-model="search" placeholder="搜索" confirm-type="search" @confirm="searchFn()" placeholder-class="placeholder" class="ipt fflex" />
					<!-- <view class="clear">取消</view> -->
				</view>
			</view>
		</view>
		<!-- 数据 -->
		<view v-if="pageList.length>0">
			<view class="ddflex card-item" v-for="item,index in pageList" :key="index" @click="jumpUrl('/card/index/index?cardId='+item.id)">
				<image class="header" :src="item.avatar"></image>
				<view class="fflex">
					<view class="name">{{item.realName}}<text style="margin-left: 15rpx;" v-if="item.job">/ {{item.job}}</text></view>
					<view class="company tover">{{item.companyName}}</view>
					<view class="label tover" v-if="item.industryName">{{item.industryName}}</view>
				</view>
				<view class="ddflex" v-if="userInfo.id!=item.userId">
					<view v-if="item.beFollow>0&&item.follow<=0" class="card-btn btn1" @click.stop="userBehavior(item,index)">我的粉丝</view>
					<view v-else-if="item.beFollow<=0&&item.follow>0" class="card-btn btn2" @click.stop="userBehavior(item,index)">我已关注</view>
					<view v-else-if="item.beFollow>0&&item.follow>0" class="card-btn btn2" @click.stop="userBehavior(item,index)">互关</view>
					<view v-else class="card-btn btn3" @click="userBehavior(item,index)">+关注</view>
				</view>
			</view>
		</view>
		<view class="nodata" v-else>
			<image :src="picUrlss + 'empty_dd.png'"></image>
			<text>暂无名片信息~</text>
		</view>
	</view>
</template>

<script>
const app = getApp();
const req = require('../../utils/request.js');
const api = require('../../utils/api.js');
export default {
	data() {
		return {
			picUrlss: req.public.picUrls,
			
			isLoad: true,
			ishow: false,
			
			tabIndex:1,//1好友 2关注 3粉丝
			
			
			form: {
				page: 1,
				limit: 10
			},
			search: '',
			pageList:[],
			
			userInfo:{}
		};
	},
	onLoad(options) {
		this.userInfo = req.getStorage('userInfo')
		this.getPageList();
	},
	
	onShow() {
	},
	onReachBottom() {
		this.form.page++;
		this.getPageList();
	},
	methods: {
		jumpUrl(url){
			uni.navigateTo({
				url:url
			})
		},
		changTab(type){
			if(type==this.tabIndex) return false
			this.tabIndex = type
			this.form.page = 1;
			this.isLoad = true;
			this.getPageList()
		},
		
		// 数据
		getPageList() {
			if (!this.isLoad) return false;
			this.isLoad = false;
			let form = this.form;
			if(this.search){
				form.search = this.search;
			}else{ delete form.search}
			// 人脉圈
			if(this.tabIndex==1){
				form.dataType = 3
			}else if(this.tabIndex==2){
				form.dataType = 4
			}else if(this.tabIndex==3){
				form.dataType = 5
			}
			req.getRequest('/api/v3/visiting/card/folder/list', form, res => {
				res = res?res.list:null
				if (res && res.length == 10) this.isLoad = true;
				if (this.form.page > 1) res = this.pageList.concat(res);
				if(res && res.length == 0 && this.form.page == 1) this.ishow = true;
				this.pageList = res;
			});
		},
		
		searchFn(){
			this.form.page = 1;
			this.isLoad = true;
			this.getPageList()
		},
		// 用户行为
		userBehavior(item,index){
			var dataP = {};
			dataP.type = 23 //、产品 2、活动 3、未知 4、内容 5、课程 6、老师 7、素材 8、题目 9、资料领取 10、招聘职位 12、用户须知 13、素材 15、医院科室 16、海报 20、医生 21 新闻 23名片
			dataP.behavior = 1; //1、关注 2、收藏 3、点赞 4、浏览 5、确认 6、分享
			dataP.bindId = item.id;
			req.postRequestLoding('/api/v3/behavior/save', dataP, data => {
				console.log(this.pageList[index].follow)
				if(this.pageList[index].follow>0){
					this.pageList[index].follow = 0
					req.msg('已取消关注')
				}
				else if(this.pageList[index].follow<=0){
					this.pageList[index].follow = 1
					req.msg('已关注')
				}
				console.log(this.pageList[index].follow)
				this.pageList = JSON.parse(JSON.stringify(this.pageList))
			});
		},
	}
}
</script>

<style>
	@import './myNetWork.css';
</style>