ui

xiaochengxu/pages/circle/detail.vue

@@ -1,65 +1,77 @@
 <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 class="bgc">
+			<view class="content1">
+				<view class="left">
+					<image src="../../static/imgs/mySet/ewm.png" mode="widthFix" class="img"></image>
 				</view>
-				<view class="bottom">
-					<span v-for="item in dataObj.circleLabel">
-						{{item}}
-					</span>
+				<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>
-		<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 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">
-			<view class="content3 flex" v-for="(item,index) in changeCardList" :key="index">
-				<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" v-if="item.lookPage==1"></uni-icons>
-						<uni-icons type="redo" size="20" @click="changeCard(item)"
-							v-if="item.notDisplay!=1"></uni-icons>
+
+		<mescroll-body ref="mescrollRef" @init="mescrollInit" @up="upCallback" @down="downCallback"
+			style="position: relative;top: -80rpx;">
+			<view class="content3" v-for="(item,index) in changeCardList" :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="right">
-					<view class="row1 flex">
-						<text>{{item.name}}</text>
-						<text class="line"></text>
-						<text>{{item.post}}</text>
-					</view>
-					<view class="row2">
-						{{item.companyName}}
-					</view>
-					<view class="row3">
-						<uni-icons type="redo" size="20"></uni-icons>
-						<text>{{item.scopeOfBusiness}}</text>
-					</view>
+
+				<view class="line">
+					<image src="../../static/imgs/cirlce/line.png" mode="widthFix" style="width: 100%;"></image>
+				</view>
+				<view class="bottom">
+					{{item.scopeOfBusiness}}
+				</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>
@@ -79,6 +91,7 @@
 		mixins: [MescrollMixin], // 使用mixin
 		data() {
 			return {
+				selectIndex: 0,
 				isShowChangeCard: false,
 				dataObj: {
 					circleName: '',
@@ -102,11 +115,11 @@
 			};
 		},
 		onShow() {
-			// this.$nextTick(function() {
-			// 	this.canReset && this.mescroll.resetUpScroll() // 重置列表数据为第一页  
-			// 	this.canReset && this.mescroll.scrollTo(0, 0) // 重置列表数据为第一页时,建议把滚动条也重置到顶部,避免无法再次翻页的问题  
-			// 	this.canReset = true // 过滤第一次的onShow事件,避免初始化界面时重复触发upCallback, 无需配置auto:false
-			// });
+			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)
@@ -136,10 +149,9 @@
 						type: 'success',
 						message: "操作成功！"
 					})
-					setTimeout(()=>{
+					setTimeout(() => {
 						this.mescroll.resetUpScroll()
-					},500)
-					this.mescroll.resetUpScroll()
+					}, 500)
 
 				})
 			},
@@ -171,8 +183,12 @@
 				this.isMyCard = true
 			},
 			changeCardStatus(val) {
+				this.selectIndex = val
 				this.cardStatus = val
-				this.getCardList()
+				this.getCardList({
+					num: 1,
+					size: 10
+				})
 			},
 			exitCircle() {
 				this.$request.baseRequest('admin.unimall.circleCardInfo', 'delete', {
@@ -190,6 +206,7 @@
 						type: 'success',
 						message: "退出成功！",
 					})
+					this.mescroll.resetUpScroll()
 
 				})
 			},
@@ -228,13 +245,14 @@
 						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.cardId = this.cardList[0][0].id
 					this.show = true
 				} else if (this.cardList[0].length > 1) {
 					this.isShowCard = true
@@ -303,6 +321,7 @@
 				}).then(res => {
 					console.log(res.data)
 					this.dataObj = res.data
+					this.dataObj.circleLabel = res.data.circleLabel.split(",")
 
 				})
 				this.getCardList(page)
@@ -318,44 +337,159 @@
 </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;
+
+				}
+			}
+		}
 	}
 
 	.img {
-		width: 100rpx;
+		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 {
-		border: 1px solid #ccc;
+		position: relative;
 		border-radius: 30rpx;
-		padding: 40rpx;
+		background: red;
 		box-sizing: border-box;
+		margin: 0 20rpx 20rpx 20rpx;
 
-		.left {
-			width: 30%;
-
-			.top {
+		.item {
+			align-items: flex-start;
+			padding: 34rpx 40rpx 0 40rpx;
+		}
 
-				margin-bottom: 20rpx;
+		.top {
+			.left {
+				margin-right: 36rpx;
 			}
 
-			.img {
-				width: 80%;
-			}
+			.right {
+				.row1 {
+					margin-bottom: 10rpx;
 
-			.bottom {}
-		}
+					.name {
+						font-size: 38rpx;
+						font-weight: bold;
+						color: #000000;
+						margin-right: 26rpx;
+					}
 
-		.right {
-			.row1 {
-				.line {
-					width: 1px;
-					height: 20px;
-					margin: 0 20rpx;
-					background: black;
+					.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;
+
+
+		}
 	}
 </style>