renshou/card/network/network.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>
			<!-- 搜索 -->
			<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 class="rec-association-2 ddflex" v-if="tabIndex==2">
				<view class="ddflex fflex">
					<view class="rec-association-nav-2 fflex">
						<scroll-view scroll-x="true" class="rec-association-scroll-2 ddflex">
							<view :class="'rec-association-scroll-item-2 tover '+(groupId == null?'rec-association-scroll-item-2-active':'')" @click="getCon(null,-1)">全部</view>
							<view :class="'rec-association-scroll-item-2 tover '+(groupId == item.id?'rec-association-scroll-item-2-active':'')" @click="getCon(item,index)" v-for="item,index in cardGroup" :key="index">{{item.groupName}}</view>
						</scroll-view>
						<view class="rec-association-nav-m-2"></view>
					</view>
				</view>
				<view class="dflex add" @click="jumpUrl('/card/groupManage/groupManage')">
					<image style="width: 32rpx;height: 32rpx;margin-right: 10rpx;margin-top: 16rpx;" src="../static/images/addFile.png"></image>
					<text>管理</text>
				</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 class="rec-association-2 ddflex" v-if="tabIndex==2">
				<view class="ddflex fflex">
					<view class="rec-association-nav-2 fflex">
						<scroll-view scroll-x="true" class="rec-association-scroll-2 ddflex">
							<view :class="'rec-association-scroll-item-2 tover '+(groupId == null?'rec-association-scroll-item-2-active':'')" @click="getCon(null,-1)">全部</view>
							<view :class="'rec-association-scroll-item-2 tover '+(groupId == item.id?'rec-association-scroll-item-2-active':'')" @click="getCon(item,index)" v-for="item,index in cardGroup" :key="index">{{item.groupName}}</view>
						</scroll-view>
						<view class="rec-association-nav-m-2"></view>
					</view>
				</view>
				<view class="dflex add" @click="jumpUrl('/card/groupManage/groupManage')">
					<image style="width: 32rpx;height: 32rpx;margin-right: 10rpx;margin-top: 16rpx;" src="../static/images/addFile.png"></image>
					<text>管理</text>
				</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.stop="userBehavior(item,index)">+关注</view>
					<view class="more" @click.stop="showOptionFn(index)" v-if="tabIndex==2">
						<view class="ddflex dian">
							<view v-for="it in 3"></view>
						</view>
						<view class="more-content-position" v-if="index==showOptionIndex">
							<view class="more-content">
								<view class="more-content-item ddflex" @click.stop="removeGroup(item)">
									<image style="width: 38rpx;height: 38rpx;margin-right: 10rpx;" src="../static/images/remove.png"></image>
									<text>移出名片</text>
								</view>
								<view class="more-content-item ddflex" @click.stop="jumpUrl('/card/groupManage/groupManage?cardId='+item.id)">
									<image style="width: 38rpx;height: 38rpx;margin-right: 10rpx;" src="../static/images/change.png"></image>
									<text>移动分组</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="nodata" v-else>
			<image :src="picUrlss + 'empty_dd.png'"></image>
			<text>暂无名片信息~</text>
		</view>
		
		<!-- 创建名片 -->
		<view style="height: 150rpx;"></view>
		<view class="ddflex option" style="justify-content: center;">
			<block v-if="tabIndex==1">
				<view class="option-btn ddflex" @click="jumpUrl(userCard?'/card/index/index':'/card/create/create')">
					<image style="width: 38rpx;height: 36rpx;margin-right: 10rpx;" src="../static/images/edit1.png"></image>
					<text>{{userCard?'我的名片':'创建名片'}}</text>
				</view>
				<view class="option-btn ddflex" @click="jumpUrl('/card/myNetWork/myNetWork')">
					<image style="width: 44rpx;height: 36rpx;margin-right: 10rpx;" src="../static/images/rm.png"></image>
					<text>我的人脉</text>
				</view>
			</block>
			<block v-if="tabIndex==2">
				<view class="option-btn ddflex" @click="jumpUrl(userCard?'/card/index/index':'/card/create/create')">
					<text>{{userCard?'我的名片':'创建名片'}}</text>
				</view>
			</block>
		</view>
		
		<view class="ceng" v-if="showOption" catchtouchmove="true" @click="hideOptionFn()"></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名片夹
			
			showOption:false,//名片夹是否打开了操作
			showOptionIndex:null,//打开操作的下标
			
			form: {
				page: 1,
				limit: 10
			},
			search: '',
			pageList:[],
			
			cardGroup:[],//名片夹列表
			groupId:null,//选中的分组id
			
			userCard:null,//用户名片信息
			
			userInfo:{}
		};
	},
	onLoad(options) {
		this.getPageList();
		this.userInfo = req.getStorage('userInfo')
	},
	
	onShow() {
		this.getUserCard()
		this.getCardGroup()
	},
	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()
		},
		showOptionFn(index){
			if(this.showOptionIndex == index) return false
			this.showOptionIndex = index
			this.showOption=true
		},
		hideOptionFn(){
			this.showOptionIndex = null
			this.showOption=false
		},
		// 数据
		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){
				delete form.dataType
				delete form.visitingCardGroupId
			}
			// 名片夹
			if(this.tabIndex==2){
				form.dataType=1
				if(this.groupId){
					form.visitingCardGroupId=this.groupId
				}else{
					delete form.visitingCardGroupId
				}
			}
			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;
			});
		},
		// 用户名片信息
		getUserCard(){
			req.getRequest('/api/v3/visiting/card/userInfo', {}, res => {
				this.userCard = res
			});
		},
		// 名片夹列表
		getCardGroup(){
			req.getRequest('/api/v3/visiting/card/group/list', {}, res => {
				this.cardGroup = res
			});
		},
		// 查询切换分组
		getCon(item,index){
			let id = item?item.id:null
			if(id==this.groupId) return false
			this.groupId = id
			this.form.page = 1;
			this.isLoad = true;
			this.getPageList()
		},
		// 移动分组
		changeGroup(cardId,groupId){
			let form = {
				visitingCardGroupId:groupId,
				visitingCardId:cardId,
				userId:req.getStorage('userInfo').id
			}
			req.postRequest('/api/v3/visiting/card/folder/saveOrUpdate',form,res=>{
				req.msg('已移动分组')
			})
			this.hideOptionFn()
			this.form.page = 1;
			this.isLoad = true;
			this.getPageList()
		},
		// 移出名片夹
		removeGroup(item){
			this.$showModal({
			    title: '提示',
			    content: '确定要移出名片吗？'
			})
			.then(res => {
			    req.postRequest('/api/v3/visiting/card/folder/delete',{id:item.id},res=>{
			    	req.msg('移出成功')
					this.hideOptionFn()
					this.form.page = 1;
					this.isLoad = true;
					this.getPageList()
			    })
			})
			.catch(err => {
			});
		},
		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 './network.css';
</style>