businessCard/xiaochengxu/pages/circle/detail.vue

<template>
	<view class="content">
		<view class="bgc">
			<view class="content1">
				<view class="left relative">
					<image :src="dataObj.circleHead?dataObj.circleHead:'../../static/imgs/logo.png'" mode="aspectFill" class="img"></image>
					<view class="share">
						<button class="shareBtn" type="default" data-name="shareBtn" open-type="share">
							<image style='width:30rpx;height:30rpx;position: absolute;top: 2px;right: 2px;' src="@/static/imgs/share1.png" mode="aspectFill">
							</image>
						</button>
					</view>
				</view>
				<view class="right">
					<view  class="top flex flex-between">
						<view class="text">
							{{dataObj.circleName}}（{{dataObj.cardNum}}）
						</view>
						<span class="join" @click="$u.debounce(addCircle, 500)" v-if="!dataObj.circleCardInfo">
							<uni-icons type="plusempty" size="12" color="#fff"
								style="margin:0 10rpx;font-weight: bold;"></uni-icons>加入
						</span>
						<span class="join" @click="exitCircle" v-else>
							退出
						</span>
					</view>
					<view style='flex-wrap: wrap;' class="bottom flex">
						<view v-for="item in dataObj.circleLabel" class="text">
							{{item}}
						</view>
					</view>
				</view>
			</view>
			<view class="content2">
				<view class="top flex-between">
					<view class="span">
						<span :class="selectIndex==0?'active':'text'" @click="changeCardStatus(0)">全部</span>
						<span @click="changeCardStatus(1)" :class="selectIndex==1?'active':'text'">已交换</span>
						<span @click="changeCardStatus(2)" :class="selectIndex==2?'active':'text'">未交换</span>
					</view>
					<view class="right flex">
						<view class="flex"  v-if="dataObj.circleCardInfo" @click="myCardClick">
							<image src="../../static/imgs/cirlce/account.png" mode="widthFix"
								style="width: 36rpx;margin-right: 15rpx;height: auto;"></image>我的名片
						</view>
						<view class="">
							<image src="../../static/imgs/card/buju1.png" mode="widthFix"
								style="width: 50rpx;margin-left: 30rpx;height: 50rpx;" v-if="layout==1" @click="changeLayout(2)"></image>
								<image src="../../static/imgs/card/buju2.png" mode="widthFix"
									style="width: 50rpx;margin-left: 30rpx;height: 50rpx;" v-if="layout==2" @click="changeLayout(1)"></image>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view  class="relative" style='top:150px;'>
			<mescroll-uni height='1200' :up="upOption" :down="downOption" ref="mescrollRef" @init="mescrollInit" @up="upCallback" @down="downCallback" >
			<view class="content3" v-for="(item,index) in changeCardList"
				:style="item.currentBackground?'background:url('+item.currentBackground+');background-size:100% 100%':''"
				:key="index" v-if="layout==1">
				<view class="flex item">
					<view class="top flex">
						<view class="left">
							<u--image :src="item.headSculpture?item.headSculpture:'https://cdn.uviewui.com/uview/album/1.jpg'" shape="circle" width="66px"
								height="66px"></u--image>
						</view>
						<view class="right">
							<view class="row1">
								<text class="name">{{item.name}}</text>
								<text class="post">{{item.post}}</text>
							</view>
							<view class="row2">
								{{item.companyName}}
							</view>
						</view>
					</view>
				</view>

				<view class="line">
					<image src="../../static/imgs/cirlce/line.png" mode="widthFix" style="width: 95%;height: auto;"></image>
				</view>
				<view class="bottom" v-if="item.scopeOfBusiness">
					{{item.scopeOfBusiness}}
				</view>
				<view class="bottom no-text" v-else>
					暂无业务描述
				</view>
				<view class="flex btn" v-if="item.lookPage==1||item.notDisplay!=1">
					<image @click='toHome(item)' src="../../static/imgs/cirlce/home.png" mode="widthFix" style="width: 32rpx;height: auto;"
						v-if="item.lookPage==1&&item.personalHomeId"></image>
					<image src="../../static/imgs/cirlce/change.png" mode="widthFix" style="width: 32rpx;;height: auto"
						@click="changeCard(item)" v-if="item.notDisplay!=1"></image>
				</view>
			</view>
			<view class="layout2" v-if="layout==2">
				<view class="list_box">
					<view class="list-item" v-for="(item,index) in changeCardList" :key="index" @click="itemClick(item,index)">
						<view class="left">
							<view class="icon-box">
								<image :src="item.headSculpture?item.headSculpture:'https://cdn.uviewui.com/uview/album/1.jpg'" style="width: 70rpx;height:70rpx;border-radius: 20rpx;"></image>
							</view>
							<view class="name">
								{{item.name}}
							</view>
							<view class="name">
								{{item.post}}
							</view>
						</view>
						<view class="right">
							<view class="flex btn" v-if="item.lookPage==1||item.notDisplay!=1">
								<image @click='toHome(item)' src="../../static/imgs/cirlce/home.png" mode="widthFix" style="width: 32rpx;height: auto;"
									v-if="item.lookPage==1&&item.personalHomeId"></image>
								<image src="../../static/imgs/cirlce/change.png" mode="widthFix" style="width: 32rpx;;height: auto;margin-left: 20rpx;"
									@click="changeCard(item)" v-if="item.notDisplay!=1"></image>
							</view>
						</view>
					</view>
				</view>
			</view>
		</mescroll-uni>
		</view>
		
		<u-picker :immediateChange ="true" @cancel="isShowCard=false" :show="isShowCard" :columns="cardList" keyName="cardBusiness"
			@confirm="cardConfirm"></u-picker>
		<u-toast ref="uToast"></u-toast>
		<u-modal :show="show" :content='content' @confirm="$u.debounce(joinCircle, 500)" showCancelButton
			@cancel="show=false" @close="show=false" closeOnClickOverlay></u-modal>
		<u-modal :show="show1" content='确定退出圈子' @confirm="$u.debounce(exitCircleConfirm, 500)" showCancelButton
			@cancel="show1=false" @close="show1=false" closeOnClickOverlay></u-modal>
		<u-modal :show="isShowChangeCard" content='确定交换名片？' @confirm="$u.debounce(confirmChangeSubmit, 500)"
			showCancelButton @cancel="isShowChangeCard=false" @close="isShowChangeCard=false"
			closeOnClickOverlay></u-modal>
			<!-- #ifdef MP-WEIXIN -->
			<u-modal :show="showAuthorizePhone" :showConfirmButton="false">
				<view class="slot-content">
					<view class="auth-card">
						<view class="">
							<img class="avatar-img" src="@/static/imgs/logo.png" mode="widthFix">
						</view>
						<view class="content">手机登录后才能查看名片哦~</view>
					</view>
					<view class="auth-btncard">
						<view class="btn-unok">
							<u-button :customStyle="customStyleUnOk" @click="showAuthorizePhone=false" :plain="true">
								拒绝</u-button>
						</view>
						<view class="btn-ok">
							<u-button :customStyle="customStyleOk" open-type="getPhoneNumber"
								@getphonenumber="getPhoneNumber"> 立即登录</u-button>
						</view>
					</view>
				</view>
			</u-modal>
			<u-modal :show="showAuthorizeUser" :showConfirmButton="false">
				<view class="slot-content">
					<view class="auth-card">
						<view class="">
							<img class="avatar-img" src="/static/imgs/logo.png" mode="widthFix">
						</view>
						<view class="content">邀请您补全个人信息<br></br>（昵称、头像）</view>
						<view style="margin-left: 100rpx;margin-right: 100rpx">
							<u-form :model="userInfo" ref="uForm">
								<u-form-item label="头像">
									<button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar"
										slot="right">
										<image class="avatar"
											:src="userInfo.head?userInfo.head:'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0'">
										</image>
									</button>
								</u-form-item>
								<u-form-item label="昵称">
									<u-input inputAlign='right' v-model="userInfo.nickname" class="weui-input"
										@blur="userNameInput" placeholder="请输入昵称" border="false" />
									<!-- <input type="nickname" :value="userInfo.nickname" class="weui-input" @blur="userNameInput" placeholder="请输入昵称"/> -->
								</u-form-item>
							</u-form>
						</view>
					</view>
					<view class="auth-btncard">
						<view class="btn-unok"><u-button :customStyle="customStyleUnOk" @click="authUser(0)">
								拒绝</u-button>
						</view>
						<view class="btn-ok">
							<u-button :customStyle="customStyleOk" @click="authUser(1)"> 允许</u-button>
						</view>
					</view>
				</view>
			</u-modal>
			<!-- #endif -->
	</view>
</template>

<script>
	var that;
	import {
		pathToBase64,
		base64ToPath
	} from 'image-tools'
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				layout:1,
				showAuthorizeUser: false,
				showAuthorizePhone: false,
				customStyleUnOk: {
					marginTop: '20rpx',
					color: '#18254C',
					border: '2px solid #18254C',
					"border-radius": "10px",
					fontSize: "32rpx"
				},
				customStyleOk: {
					marginTop: '20rpx',
					color: '#fff',
					border: '2px solid #18254C',
					"border-radius": "10px",
					fontSize: "32rpx",
					background: "#18254C"
				},
				userInfo: {
					head: '',
					nickname: '',
					phone: '',
				},
				downOption: {
					auto: false,
					textColor: '#bbb'
				},
				upOption: {
					page: {
						size: 10 // 每页数据的数量,默认10
					},
					auto: false,
					noMoreSize: 1,
					textNoMore: '没有更多了~',
					textColor: '#bbb'
				},
				selectIndex: 0,
				isShowChangeCard: false,
				show1:false,
				dataObj: {
					circleName: '',
					cardNum: '',
					circleLabel: []
				},
				canReset: false,
				cardList: [],
				isShowCard: false,
				show: false,
				content: '加入后其他用户查看您的名片和主页，确认加入圈子？',
				cardId: '',
				id: '',
				changeCardList: [],
				cardStatus: '',
				isMyCard: false,
				swapNameCards: false,
				selectMycard: {},
				selectRowCard: {}
			};
		},
		onShow() {
			if (uni.getStorageSync("userInfo").phone) {
				this.$nextTick(function() {
					that.mescroll.resetUpScroll() 
				});
			}else {
				this.showAuthorizePhone = true
			}
		},
		onLoad(options) {
			that = this
			console.log(options)
				this.id = options.val
			this.userInfo = uni.getStorageSync("userInfo")
			
		},
		onShareAppMessage(res) {
			if (res.from === 'button') {
				let path = `/pages/circle/detail?val=${that.dataObj.id}`
				return {
					title:`${that.userInfo.nickname}邀请您加入${that.dataObj.circleName}圈子`,
					path: path,
				};
			}
		},
		methods: {
			changeLayout(type){
				this.layout = type
			},
			//获取昵称输入内容
			userNameInput(e) {
				this.userInfo.nickname = e.detail.value
			},
			async onChooseAvatar(e) {
				this.$set(this.userInfo, "head", await this.toBase64(e.detail.avatarUrl))
			},
			toBase64(url) {
				return new Promise(resolve => {
					pathToBase64(url).then(path => {
						resolve(path);
					}).catch(error => {
						console.log(error)
					})
				})
			},
			async authUser(type) {
				//同步信息，没有头像和昵称自动生成
				this.userInfo = await this.$request.syncInfo(this.userInfo)
				if (this.userInfo.openId) {
					uni.setStorageSync("userInfo", that.userInfo)
					that.showAuthorizeUser = false
					that.mescroll.resetUpScroll() 
				}
			},
			async getPhoneNumber(e) {
				that.userInfo = await this.$request.wxlogin()
				this.$nextTick(function() {
					that.userInfo.phone = that.$request.getPhone(e, that.userInfo)
					that.showAuthorizePhone = false
					that.showAuthorizeUser = true
				});
			
			},
			toHome(item){
				uni.navigateTo({
					url:'/pages/circle/lookHome?id='+item.personalHomeId
				})
			},
			confirmChangeSubmit() {
				this.$request.baseRequest('admin.unimall.cardExchangeInfo', 'add', {
					cardExchangeInfo: JSON.stringify({
						sendId: this.userInfo.id,
						receiveId: this.selectRowCard.receiveId,
						sendCardId: this.selectMycard.id,
						receiveCardId: this.selectRowCard.id,
						circleName: this.dataObj.circleName
					}),
				}, failres => {
					console.log('res+++++', failres.errmsg)
					uni.showToast({
					  icon:"none",
					  title: failres.errmsg,
					  duration: 3000
					});
					uni.hideLoading()
				}).then(res => {
					this.isShowChangeCard = false
					uni.showToast({
					  icon:"success",
					  title: '操作成功！',
					  duration: 2000
					});
					setTimeout(() => {
						this.mescroll.resetUpScroll()
					}, 500)

				})
			},
			changeMyCard() {
				this.$request.baseRequest('admin.unimall.circleCardInfo', 'update', {
					circleCardInfo: JSON.stringify({
						circleId: this.dataObj.id,
						cardId: this.cardId,
						commonId: this.userInfo.id
					}),
				}, failres => {
					console.log('res+++++', failres.errmsg)
					uni.showToast({
					  icon:"none",
					  title: failres.errmsg,
					  duration: 3000
					});
					uni.hideLoading()
				}).then(res => {
					this.isShowCard = false
					uni.showToast({
					  icon:"success",
					  title: '更改圈子名片成功！',
					  duration: 2000
					});
					this.mescroll.resetUpScroll()
				})
			},
			myCardClick() {
				this.isShowCard = true
				this.isMyCard = true
			},
			changeCardStatus(val) {
				this.selectIndex = val
				this.cardStatus = val
				this.getCardList({
					num: 1,
					size: 10
				})
			},
			exitCircle() {
				console.log(11111)
				this.show1=true
			},
			exitCircleConfirm(){
				this.$request.baseRequest('admin.unimall.circleCardInfo', 'delete', {
					id: this.dataObj.circleCardInfo.id,
				}, failres => {
					console.log('res+++++', failres.errmsg)
					uni.showToast({
					  icon:"none",
					  title: failres.errmsg,
					  duration: 3000
					});
					uni.hideLoading()
				}).then(res => {
					this.isShowCard = false
					this.show1=false
					uni.showToast({
					  icon:"success",
					  title: '退出成功！',
					  duration: 2000
					});
					this.mescroll.resetUpScroll()
				})
			},
			cardConfirm(e) {
				console.log("e", e)
				this.cardId = e.value[0].id
				if (this.isMyCard) {
					this.changeMyCard()
				} else if (this.swapNameCards) {
					this.selectMycard = e.value[0]
					this.isShowCard = false
					this.isShowChangeCard = true

				} else {
					this.joinCircle()
				}
			},
			joinCircle() {
				this.$request.baseRequest('admin.unimall.circleCardInfo', 'add', {
					circleCardInfo: JSON.stringify({
						circleId: this.dataObj.id,
						cardId: this.cardId,
						commonId: this.userInfo.id
					}),
				}, failres => {
					console.log('res+++++', failres.errmsg)
					uni.showToast({
					  icon:"none",
					  title: failres.errmsg,
					  duration: 3000
					});
					uni.hideLoading()
				}).then(res => {
					this.isShowCard = false
					this.show = false
					uni.showToast({
					  icon:"success",
					  title: '加入成功！',
					  duration: 2000
					});
					this.mescroll.resetUpScroll()

				})
			},
			addCircle() {
				if (this.cardList[0].length == 1) {
					// console.log(this.cardList[0])
					this.cardId = this.cardList[0][0].id
					this.show = true
				} else if (this.cardList[0].length > 1) {
					this.isShowCard = true
				} else {
					uni.showToast({
						icon:"none",
						title: '您还没有自己的名片，请创建后再加入圈子!',
						duration: 2000
					});
					// this.$refs.uToast.show({
					// 	type: 'error',
					// 	message: "您还没有自己的名片，请创建后再加入圈子",
					// })
				}

			},
			getCardList(page) {
				uni.showLoading({
					title: '数据加载中'
				})
				this.$request.baseRequest('admin.unimall.circleManagementInfo', 'circleCardlist', {
					commonId: this.userInfo.id,
					id: this.dataObj.id,
					status: this.cardStatus,
					page: page.num,
					limit: page.size,
				}, failres => {
					console.log('res+++++', failres.errmsg)
					uni.hideLoading()
					uni.showToast({
					  icon:"none",
					  title: failres.errmsg,
					  duration: 3000
					});
				}).then(res => {
					uni.hideLoading()
					console.log(11)
					let curPageData = res.data.items;
					let totalPage = res.data.total;
					let curPageLen = curPageData.length;
					this.mescroll.endByPage(curPageLen, totalPage);
					console.log(res.data)
					// this.makeData(res.data)
					if (page.num == 1) this.changeCardList = []; //如果是第一页需手动置空列表
					this.changeCardList = this.changeCardList.concat(curPageData); //追加新数据
					for(let i = 0;i<this.changeCardList.length;i++){
						if(this.changeCardList[i].scopeOfBusiness&&this.changeCardList[i].scopeOfBusiness.length>90){
							 this.changeCardList[i].scopeOfBusiness = this.changeCardList[i].scopeOfBusiness.substr(0,90) + '...' ;
						}
					}
				})
			},
			async upCallback(page) {
				//获取名片
				await this.$request.baseRequest('admin.unimall.cardManagementInfo', 'list', {
					commonId: this.userInfo.id
				}, failres => {
					console.log('res+++++', failres.errmsg)
					uni.showToast({
					  icon:"none",
					  title: failres.errmsg,
					  duration: 3000
					});
				}).then(res => {
					this.cardList = [res.data.items]
				})
				await this.$request.baseRequest('admin.unimall.circleManagementInfo', 'get', {
					commonId: this.userInfo.id,
					id: this.id
				}, failres => {
					console.log('res+++++', failres.errmsg)
					uni.hideLoading()
					uni.showToast({
					  icon:"none",
					  title: failres.errmsg,
					  duration: 3000
					});
				}).then(res => {
					console.log(res.data)
					this.dataObj = res.data
					this.dataObj.circleLabel = res.data.circleLabel.split(",")

				})
				this.getCardList(page)
			},
			changeCard(val) {
				if(!this.dataObj.circleCardInfo){
					uni.showToast({
					  icon:"none",
					  title: "请先加入圈子!",
					  duration: 2000
					});
				}else{
					this.selectRowCard = val
					this.swapNameCards = true
					this.isShowCard = true
				}
				

			},
		}
	}
</script>

<style lang="scss" scoped>
	.bgc {
		background-color: #112253;
		padding-bottom: 100rpx;
		position:fixed;
		top:0;
		width:100%;
	}

	.content1 {
		display: flex;
		padding: 40rpx;
		box-sizing: border-box;

		.right {
			width: 100%;
			display: flex;
			flex-direction: column;
			justify-content: space-evenly;

			.top {
				width: 100%;

				.text {
					color: #fff;
					font-weight: bold;
				}

				.join {
					background: #0A173D;
					color: #fff;
					position: absolute;
					right: 0rpx;
					padding: 15rpx 20rpx;
					font-size: 26rpx;
					border-radius: 50rpx 0rpx 0rpx 50rpx;
				}
			}

			.bottom {
				.text {
					color: #ffffff50;
					background: #f1f5ff20;
					padding: 10rpx 20rpx;
					margin:0 10rpx 10rpx 0;
					border-radius: 10rpx;
					font-size: 26rpx;

				}
			}
		}
	}

	.no-text {
		color: #969393;
	}

	.img {
		width: 122rpx;
		height: 122rpx;
		border-radius: 10px;
		margin-right: 30rpx;
	}

	.content2 {
		padding: 0 40rpx 40rpx 40rpx;
		box-sizing: border-box;

		.text {
			font-size: 26rpx;
			font-weight: 500;
			color: #FFFFFF;
			opacity: 0.5;
			margin-right: 56rpx;
		}

		.active {
			font-size: 32rpx;
			font-weight: bold;
			color: #FFFFFF;
			position: relative;
			margin-right: 56rpx;
		}

		.active:after {
			position: absolute;
			bottom: -20rpx;
			content: '';
			width: 50%;
			height: 6rpx;
			border-radius: 40rpx;
			background: #FFFFFF;
			right: 0;
			left: 0;
			margin: auto;
		}

		.right {
			color: #D7C08B;
			font-size: 26rpx;

		}
	}

	.content3 {
		position: relative;
		border-radius: 30rpx;
		background: red;
		box-sizing: border-box;
		height:400rpx;
		.item {
			align-items: flex-start;
			padding: 34rpx 40rpx 0 40rpx;
		}

		.top {
			.left {
				margin-right: 36rpx;
			}

			.right {
				.row1 {
					margin-bottom: 10rpx;

					.name {
						font-size: 38rpx;
						font-weight: bold;
						color: #000000;
						margin-right: 26rpx;
					}

					.post {
						font-size: 26rpx;
						font-weight: 500;
						color: #666666;
					}
				}

				.row2 {
					font-size: 26rpx;
					font-weight: bold;
					color: #333333;
				}
			}
		}

		.bottom {
			padding: 20rpx 60rpx 0rpx 60rpx;
			font-size: 26rpx;
		}

		.btn {
			background: #11225350;
			width: 145rpx;
			display: flex;
			justify-content: space-evenly;
			padding: 15rpx 0;
			border-radius: 32rpx;
			position: absolute;
			top: 35rpx;
			right: 40rpx;


		}
	}

	.line {
		text-align: center;
	}
	.shareBtn{
		background-color: #9E9E9E !important;
		position: absolute;
		top: 0;
		right: 30rpx;
		height: 40rpx;
		padding: 0;
		margin: 0;
		width: 40rpx;
		border-radius: 0 10px 0 27rpx;
	}
	.slot-content {
		width: 100%;
	}

	.auth-btncard {
		display: flex !important;
		justify-content: space-between !important;

		.btn-unok {
			width: 40%;
		}

		.btn-ok {
			width: 40%;
		}
	}

	.auth-card {
		text-align: center;

		.avatar-img {
			width: 250rpx;
		}

		.title {
			font-size: 20rpx;
		}

		.content {
			font-size: 32rpx;
			font-weight: bold;
			color: #1A1A1A;
			margin-bottom: 30rpx;
		}
	}

	.avatar-wrapper {
		color: #333 !important;
		border: none !important;
		border-radius: 0 !important;
		background-color: transparent !important;
		padding: 0;
	}

	.avatar-wrapper::after {
		border: none !important;
	}

	.avatar {
		width: 100rpx;
		height: 100rpx;
		overflow: hidden;
		border-radius: 100%;
	}

	/deep/.u-popup__content {
		border-radius: 20rpx !important;
	}
	/* 主体样式 */
	.list_box {
		width: 100%;
	
		.list-item {
			padding: 10px 10px;
			border-bottom: 1px solid #eee;
			display: flex;
			justify-content: space-between;
			align-items: center;
			transition: all .5s;
			&:active{
				background-color: #EEEEEE;
			}
			.left {
				display: flex;
				align-items: center;
	
				.icon-box {
					width: 70rpx;
					height: 70rpx;
					border-radius: 10px;
					box-shadow: 3px 3px 7px #bebebe,
						-3px -3px 7px #ffffff;
					display: flex;
					justify-content: center;
					align-items: center;
	
					image {
						width: 70%;
						height: 70%;
					}
	
					text::before {
						font-size: 20px;
					}
				}
	
				.name {
					margin-left: 10px;
					font-size: 30rpx;
					color: #FFFFFF;
					text-shadow: 1px 1px 3px #000;
				}
			}
	
			.right {
				display: flex;
				align-items: center;
	
				.rightText {
					margin-right: 5px;
					color: #999;
					font-size: 12px;
				}
			}
		}
	}
	.layout2{
		background: #9e9e9e94;
		margin: 0 20rpx;
		border-radius: 20rpx		
	}
</style>