添加圈子详情 简约布局

xiaochengxu/pages/circle/detail.vue

@@ -38,9 +38,17 @@
 						<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;height: auto;"></image>我的名片
+					<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>
@@ -49,7 +57,7 @@
 			<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">
+				:key="index" v-if="layout==1">
 				<view class="flex item">
 					<view class="top flex">
 						<view class="left">
@@ -84,6 +92,31 @@
 						@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>
 		
@@ -168,6 +201,7 @@
 		mixins: [MescrollMixin], // 使用mixin
 		data() {
 			return {
+				layout:1,
 				showAuthorizeUser: false,
 				showAuthorizePhone: false,
 				customStyleUnOk: {
@@ -252,6 +286,9 @@
 			}
 		},
 		methods: {
+			changeLayout(type){
+				this.layout = type
+			},
 			//获取昵称输入内容
 			userNameInput(e) {
 				this.userInfo.nickname = e.detail.value
@@ -771,4 +808,67 @@
 	/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>