businessCard/xiaochengxu/pages/circle/detail.vue

<template>
	<view class="content">
		<view class="content1">
			<view class="left">
				<image src="../../static/logo.png" mode="widthFix" class="img"></image>
			</view>
			<view class="right">
				<view class="top">
					<span class="">
						{{dataObj.circleName}}（{{dataObj.cardNum}}）
					</span>
					<span class="" @click="addCircle" v-if="dataObj.circleCardInfo">
						加入
					</span>
					<span class="" @click="exitCircle" v-else>
						退出
					</span>
				</view>
				<view class="bottom">
					<span v-for="item in dataObj.circleLabel">
						{{item}}
					</span>
				</view>
			</view>
		</view>
		<view class="content2">
			<view class="top flex-between">
				<view class="span">
					<span>全部</span>
					<span @click="changeCardStatus(1)">已交换</span>
					<span @click="changeCardStatus(1)">未交换</span>
				</view>
				<view class="right" v-if="dataObj.circleCardInfo" @click="myCardClick">
					我的名片
				</view>
			</view>
		</view>
		<mescroll-body ref="mescrollRef" @init="mescrollInit" @up="upCallback" @down="downCallback">
			<view class="content3 flex">
				<view class="left">
					<view class="top flex-row-center">
						<image src="../../static/uni.png" mode="widthFix" class="img"></image>
					</view>
					<view class="bottom flex flex-evenly">
						<uni-icons type="home" size="20"></uni-icons>
						<uni-icons type="redo" size="20" @click="changeCard"></uni-icons>
					</view>
				</view>
				<view class="right">
					<view class="row1 flex">
						<text>张三</text>
						<text class="line"></text>
						<text>总经理</text>
					</view>
					<view class="row2">
						北京xxx有限公司
					</view>
					<view class="row3" @click="toMap">
						<uni-icons type="redo" size="20"></uni-icons>
						<text>北京市朝阳区幸福大街8号</text>
					</view>
					<view class="row3">
						<uni-icons type="redo" size="20"></uni-icons>
						<text>13333333333</text>
					</view>
					<view class="row3">
						<uni-icons type="redo" size="20"></uni-icons>
						<text>我是备注</text>
					</view>
				</view>
			</view>
		</mescroll-body>
		<u-picker :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>
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				dataObj: {
					circleName: '',
					cardNum: '',
					circleLabel: []
				},
				userInfo: {},
				canReset: false,
				cardList: [],
				isShowCard: false,
				show: false,
				content: '加入后其他用户查看您的名片和主页，确认加入圈子？',
				cardId: '',
				id: '',
				changeCardList: [],
				cardStatus:'',
				isMyCard:false
			};
		},
		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
			this.init()
		},
		methods: {
			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.cardStatus = val
				this.getCardList()
			},
			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: "退出成功！",
					})

				})
			},
			cardConfirm(e) {
				console.log("e", e)
				this.cardId = e.value[0].id
				if(this.isMyCard){
					this.changeMyCard()
				}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.$refs.uToast.show({
						type: 'success',
						message: "加入成功！",
					})

				})
			},
			addCircle() {
				if (this.cardList[0].length == 1) {
					this.show = true
				} else if (this.cardList[0].length > 1) {
					this.isShowCard = true
				} else {
					this.$refs.uToast.show({
						type: 'error',
						message: "您还没有自己的名片，请创建后再加入圈子",
					})
				}

			},
			init() {

			},
			getCardList(){
				
				uni.showLoading({
					title: '数据加载中'
				})
				this.$request.baseRequest('admin.unimall.circleManagementInfo', 'circleCardlist', {
					commonId: this.userInfo.id,
					id: this.dataObj.id,
					status: this.cardStatus,
					pageNum: page.num,
					pageSize: 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.getCardList()
			},
			changeCard() {

				uni.navigateTo({
					url: "/pages/circle/changeCard"
				})
			},
		}
	}
</script>

<style lang="scss">
	.content1 {
		display: flex;
	}

	.img {
		width: 100rpx;
	}

	.content3 {
		border: 1px solid #ccc;
		border-radius: 30rpx;
		padding: 40rpx;
		box-sizing: border-box;

		.left {
			width: 30%;

			.top {

				margin-bottom: 20rpx;
			}

			.img {
				width: 80%;
			}

			.bottom {}
		}

		.right {
			.row1 {
				.line {
					width: 1px;
					height: 20px;
					margin: 0 20rpx;
					background: black;
				}
			}
		}
	}
</style>