businessCard/xiaochengxu/pages/circle/detail.vue

<template>
	<view class="content">
		<view class="bgc">
			<view class="content1">
				<view class="left">
					<image src="../../static/imgs/mySet/ewm.png" mode="widthFix" class="img"></image>
				</view>
				<view class="right">
					<view class="top flex flex-between">
						<span class="text">
							{{dataObj.circleName}}（{{dataObj.cardNum}}）
						</span>
						<span class="join" @click="addCircle" 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 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" v-if="dataObj.circleCardInfo" @click="myCardClick">
						<image src="../../static/imgs/cirlce/account.png" mode="widthFix"
							style="width: 36rpx;margin-right: 15rpx;"></image>我的名片
					</view>
				</view>
			</view>
		</view>

		<mescroll-body ref="mescrollRef" @init="mescrollInit" @up="upCallback" @down="downCallback"
			style="position: relative;top: -80rpx;">
			<view class="content3" v-for="(item,index) in changeCardList"
				:style="item.currentBackground?'background:url('+item.currentBackground+');background-size:100% 100%':''"
				:key="index">
				<view class="flex item">
					<view class="top flex">
						<view class="left">
							<u--image src="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%;"></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 src="../../static/imgs/cirlce/home.png" mode="widthFix" style="width: 32rpx;"
						v-if="item.lookPage==1"></image>
					<image src="../../static/imgs/cirlce/change.png" mode="widthFix" style="width: 32rpx;"
						@click="changeCard(item)" v-if="item.notDisplay!=1"></image>
				</view>
			</view>
		</mescroll-body>
		<u-picker @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="isShowChangeCard" content='确定交换名片？' @confirm="$u.debounce(confirmChangeSubmit, 500)"
			showCancelButton @cancel="isShowChangeCard=false" @close="isShowChangeCard=false"
			closeOnClickOverlay></u-modal>
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				selectIndex: 0,
				isShowChangeCard: false,
				dataObj: {
					circleName: '',
					cardNum: '',
					circleLabel: []
				},
				userInfo: {},
				canReset: false,
				cardList: [],
				isShowCard: false,
				show: false,
				content: '加入后其他用户查看您的名片和主页，确认加入圈子？',
				cardId: '',
				id: '',
				changeCardList: [],
				cardStatus: '',
				isMyCard: false,
				swapNameCards: false,
				selectMycard: {},
				selectRowCard: {}
			};
		},
		onShow() {
			this.$nextTick(function() {
				this.canReset && this.mescroll.resetUpScroll() // 重置列表数据为第一页  
				this.canReset && this.mescroll.scrollTo(0, 0) // 重置列表数据为第一页时,建议把滚动条也重置到顶部,避免无法再次翻页的问题  
				this.canReset = true // 过滤第一次的onShow事件,避免初始化界面时重复触发upCallback, 无需配置auto:false
			});
		},
		onLoad(options) {
			console.log(options)
			this.userInfo = uni.getStorageSync("userInfo")
			this.id = options.val
		},
		methods: {
			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)
					this.$refs.uToast.show({
						type: 'error',
						message: failres.errmsg,
					})
					uni.hideLoading()
				}).then(res => {
					this.isShowChangeCard = false
					this.$refs.uToast.show({
						type: 'success',
						message: "操作成功！"
					})
					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)
					this.$refs.uToast.show({
						type: 'error',
						message: failres.errmsg,
					})
					uni.hideLoading()
				}).then(res => {
					this.isShowCard = false
					this.$refs.uToast.show({
						type: 'success',
						message: "更改圈子名片成功！",
					})

				})
			},
			myCardClick() {
				this.isShowCard = true
				this.isMyCard = true
			},
			changeCardStatus(val) {
				this.selectIndex = val
				this.cardStatus = val
				this.getCardList({
					num: 1,
					size: 10
				})
			},
			exitCircle() {
				this.$request.baseRequest('admin.unimall.circleCardInfo', 'delete', {
					id: this.dataObj.circleCardInfo.id,
				}, failres => {
					console.log('res+++++', failres.errmsg)
					this.$refs.uToast.show({
						type: 'error',
						message: failres.errmsg,
					})
					uni.hideLoading()
				}).then(res => {
					this.isShowCard = false
					this.$refs.uToast.show({
						type: 'success',
						message: "退出成功！",
					})
					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)
					this.$refs.uToast.show({
						type: 'error',
						message: failres.errmsg,
					})
					uni.hideLoading()
				}).then(res => {
					this.isShowCard = false
					this.show = false
					this.$refs.uToast.show({
						type: 'success',
						message: "加入成功！",
					})
					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 {
					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)
					this.$refs.uToast.show({
						type: 'error',
						message: failres.errmsg,
					})
					uni.hideLoading()
				}).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); //追加新数据
				})
			},
			async upCallback(page) {
				//获取名片
				await this.$request.baseRequest('admin.unimall.cardManagementInfo', 'list', {
					commonId: this.userInfo.id
				}, failres => {
					console.log('res+++++', failres.errmsg)
					this.$refs.uToast.show({
						type: 'error',
						message: failres.errmsg,
					})
				}).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)
					this.$refs.uToast.show({
						type: 'error',
						message: failres.errmsg,
					})
					uni.hideLoading()
				}).then(res => {
					console.log(res.data)
					this.dataObj = res.data
					this.dataObj.circleLabel = res.data.circleLabel.split(",")

				})
				this.getCardList(page)
			},
			changeCard(val) {

				this.selectRowCard = val
				this.swapNameCards = true
				this.isShowCard = true

			},
		}
	}
</script>

<style lang="scss">
	.bgc {
		background-color: #112253;
		padding-bottom: 100rpx;
	}

	.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: #42568C;
					color: #fff;
					position: absolute;
					right: 0rpx;
					padding: 15rpx 20rpx;
					font-size: 26rpx;
					border-radius: 50rpx 0rpx 0rpx 50rpx;
				}
			}

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

				}
			}
		}
	}

	.no-text {
		color: #969393;
	}

	.img {
		width: 122rpx;
		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;
		margin: 0 20rpx 20rpx 20rpx;

		.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 40rpx 40rpx 40rpx;
		}

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


		}
	}

	.line {
		text-align: center;
	}
</style>