11

xiaochengxu/pages/circle/circle.vue

@@ -29,7 +29,7 @@
 					{{item.name}}
 				</view>
 				<view class="content3 flex" v-if="!item.name">
-					<view class="row-tiem" @click="toDetail">
+					<view class="row-tiem" @click="toDetail(item.id)">
 						<view class="left">
 							<image src="../../static/logo.png" mode="widthFix" class="img"></image>
 						</view>
@@ -65,7 +65,7 @@
 				searchVal: '',
 				circleList: [],
 				userInfo: {},
-				firstTitle: false
+				canReset:false,
 			};
 		},
 		onShow() {
@@ -93,7 +93,7 @@
 			},
 			toDetail(val) {
 				uni.navigateTo({
-					url: "/pages/circle/detail"
+					url: "/pages/circle/detail?val="+val
 				})
 			},
 			upCallback(page) {
@@ -123,14 +123,13 @@
 					if (page.num == 1) this.circleList = []; //如果是第一页需手动置空列表
 					this.circleList = this.circleList.concat(curPageData); //追加新数据
 					for (let i = 0; i < this.circleList.length; i++) {
-						if (!this.firstTitle && this.circleList[i].addedFlag == 0) {
-							this.firstTitle = true
+						if (this.circleList[i].addedFlag == 0) {
 							if (i == 0) {
 								this.circleList.unshift({
 									name: '推荐圈子'
 								});
 							} else {
-								this.circleList.splice(i - 1, 0, {
+								this.circleList.splice(i, 0, {
 									name: '推荐圈子'
 								})
 							}

xiaochengxu/pages/circle/detail.vue

@@ -7,17 +7,19 @@
 			<view class="right">
 				<view class="top">
 					<span class="">
-						北京技术（155）
+						{{dataObj.circleName}}（{{dataObj.cardNum}}）
 					</span>
-					<span class="">
+					<span class="" @click="addCircle" v-if="dataObj.circleCardInfo">
 						加入
 					</span>
+					<span class="" @click="exitCircle" v-else>
+						退出
+					</span>
 				</view>
 				<view class="bottom">
-					<span>粮食贸易</span>
-					<span>粮食贸易</span>
-					<span>粮食贸易</span>
-					<span>粮食贸易</span>
+					<span v-for="item in dataObj.circleLabel">
+						{{item}}
+					</span>
 				</view>
 			</view>
 		</view>
@@ -25,61 +27,260 @@
 			<view class="top flex-between">
 				<view class="span">
 					<span>全部</span>
-					<span>已交换</span>
-					<span>未交换</span>
+					<span @click="changeCardStatus(1)">已交换</span>
+					<span @click="changeCardStatus(1)">未交换</span>
 				</view>
-				<view class="right">
+				<view class="right" v-if="dataObj.circleCardInfo" @click="myCardClick">
 					我的名片
 				</view>
 			</view>
 		</view>
-		<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>
+		<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="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 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>
-		</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
 			};
 		},
-		methods:{
-			changeCard(){
+		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"
+					url: "/pages/circle/changeCard"
 				})
 			},
 		}
@@ -94,27 +295,28 @@
 	.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 {
-			}
+
+			.bottom {}
 		}
-	
+
 		.right {
 			.row1 {
 				.line {