1.添加选择好友页面和相关操作

pages/friend-page/main/main.vue

@@ -40,8 +40,8 @@
 					</view>
 				</view>
 				<view class="action" style="width: 160rpx; ">
-					<button class="cu-btn round make-lines-bPurple" style="width: 146rpx; right: 30rpx;">
-						添加</button>
+					<button class="cu-btn round lines-gray text-13px" style=" line-height: 26rpx; white-space: nowrap; width: 146rpx; right: 30rpx;">
+						取消关注</button>
 				</view>
 			</view>
 

pages/friend-page/search/search.vue

@@ -6,12 +6,47 @@
 			</view>
 			<view class="search-form round">
 				<text class="cuIcon-search"></text>
-				<input @focus="InputFocus" @blur="InputBlur" :adjust-position="false" type="text" placeholder="搜索图片、文章、视频" confirm-type="search"></input>
+				<input @focus="InputFocus" @blur="InputBlur" :adjust-position="false" type="text"
+					placeholder="搜索图片、文章、视频" confirm-type="search"></input>
 			</view>
 			<view class="action">
 				<view class="text-16px make-text-bPurple" style="line-height: 32rpx;">搜索</view>
 			</view>
 		</view>
+
+		<view class="cu-list menu-avatar margin-top">
+			<view class="cu-item card-view" style="height: 180rpx;" v-for="(item, index) in 5" :key="index">
+				<view class="cu-avatar round lg"
+					style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg);">
+					<view class="cu-tag badge">99+</view>
+				</view>
+				<view class="content" style="width: 360rpx;">
+					<view class="text-grey">凯尔</view>
+					<view class="text-gray text-sm flex">
+						<view class="text-cut">
+							<text class="cuIcon-infofill text-red  margin-right-xs"></text>
+							我已天理为凭，踏入这片荒芜，不再受凡人的枷锁遏制。我已天理为凭，踏入这片荒芜，不再受凡人的枷锁遏制。
+						</view>
+
+					</view>
+					<view class="text-gray text-sm flex">
+						<view class="text-cut">
+							<text class="cuIcon-infofill text-red  margin-right-xs"></text>
+							我已天理为凭，踏入这片荒芜，不再受凡人的枷锁遏制。我已天理为凭，踏入这片荒芜，不再受凡人的枷锁遏制。
+						</view>
+
+					</view>
+				</view>
+				<view class="action" style="width: 160rpx; ">
+					<button v-if="index%2==0" class="cu-btn round make-lines-bPurple"
+						style="width: 146rpx; right: 30rpx;">
+						添加</button>
+					<button v-else class="cu-btn round bg-grey" style="width: 146rpx; right: 30rpx;">
+						已关注</button>
+				</view>
+			</view>
+
+		</view>
 	</view>
 </template>
 
@@ -19,7 +54,7 @@
 	export default {
 		data() {
 			return {
-				
+
 			}
 		},
 		methods: {

pages/friend-page/select/select.vue

@@ -1,6 +1,49 @@
 <template>
 	<view>
-		
+		<view class="friend-bg">
+			<image style="width: 750rpx;height: 406rpx;" src="../../../static/friend/friend-bg.png"></image>
+			<image style="position: absolute; left: 34rpx;top: 120rpx; width: 22rpx; height: 42rpx;"
+				src="../../../static/friend/back.png" @click="onBack()"></image>
+		</view>
+		<view style="padding-top: 230rpx;">
+			<view class="cu-list menu-avatar margin-top">
+				<view class="cu-item card-view" :class=" index == selectIndex?' friend-select':''" style="height: 180rpx;" v-for="(item, index) in 4" :key="index" @click="onSelectIndex(index)">
+					<view class="cu-avatar round lg"
+						style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg);">
+						<view class="cu-tag badge-bottom" >
+							<image style="height: 32rpx;width: 32rpx;" src="../../../static/friend/girl.png"></image>
+						</view>
+					</view>
+					<view class="content" style="width: 360rpx;">
+						<view class="text-grey">凯尔</view>
+						<view class="text-gray text-sm flex">
+							<view class="text-cut">
+								<text class="cuIcon-infofill text-red  margin-right-xs"></text>
+								我已天理为凭，踏入这片荒芜，不再受凡人的枷锁遏制。我已天理为凭，踏入这片荒芜，不再受凡人的枷锁遏制。
+							</view>
+
+						</view>
+						<view class="text-gray text-sm flex">
+							<view class="text-cut">
+								<text class="cuIcon-infofill text-red  margin-right-xs"></text>
+								我已天理为凭，踏入这片荒芜，不再受凡人的枷锁遏制。我已天理为凭，踏入这片荒芜，不再受凡人的枷锁遏制。
+							</view>
+
+						</view>
+					</view>
+					<view class="action" style="width: 160rpx; ">
+						<image class=" make-lines-bPurple" style="width: 126rpx; height: 60rpx;"
+							src="../../../static/friend/pk-button.png"></image>
+					</view>
+				</view>
+
+			</view>
+		</view>
+
+		<view class="padding flex flex-direction" style="position: absolute;bottom: 34rpx; left: 0;right: 0;">
+			<button class="cu-btn make-bg-bPurple text-white lg" style="border-radius: 20rpx;">健身模式</button>
+		</view>
+
 	</view>
 </template>
 
@@ -8,15 +51,39 @@
 	export default {
 		data() {
 			return {
-				
+				selectIndex:0,
 			}
 		},
 		methods: {
-			
+			onSelectIndex(data){
+				this.selectIndex = data;
+				console.log(data);
+			},
+			onBack() {
+				uni.navigateBack({
+					delta: 1
+				})
+			}
 		}
 	}
 </script>
 
 <style>
+	.friend-bg {
+		position: absolute;
+		top: -60rpx;
+		left: 0;
+		right: 0;
+		/* bottom: 0; */
+		margin: auto;
+
+		width: 750rpx;
+		height: 406rpx;
+		background-color: #000000;
+	}
 
+	.friend-select {
+		/* box-sizing: content-box; */
+		border: 4rpx solid #9797FF;
+	}
 </style>

pages/personal-page/personal/personal.vue

@@ -88,15 +88,22 @@
 									<LEDFont style="" :showValue='99' :size="30" color='#FFFFFF'>
 									</LEDFont>
 								</view>
-								<view class="flex flex-direction justify-center align-center">
+								<view v-if="friendObj" class="flex flex-direction justify-center align-center">
 									<view class="cu-avatar-group" style="position: relative;">
 										<view class="cu-avatar round xl" :class="bHitShake?' screen-jitter':''"
-											:style="[{ backgroundImage:'url('+aiObj.avatar+')' }]"></view>
+											:style="[{ backgroundImage:'url('+friendObj.avatar+')' }]"></view>
 										<HitEffect ref="hitEffectRef"></HitEffect>
 									</view>
 									<view style="margin-top: 20rpx; width: 165rpx;"
 										class="text-cut text-white text-center">
-										{{aiObj.name}}
+										{{friendObj.name}}
+									</view>
+								</view>
+								<view v-else  class="flex flex-direction justify-center align-center" @click="onNavToSelectFriend()">
+									<image style="width: 100rpx ;height: 100rpx;" src="/static/friend/friend-add.png"></image>
+									<view style="margin-top: 20rpx; width: 165rpx;"
+										class="text-cut text-white text-center">
+										选择好友
 									</view>
 								</view>
 
@@ -856,6 +863,13 @@
 					name: '匿名',
 					avatar: '/static/defaultAvatar.png'
 				},
+				//pk的信息。好友pk
+				friendObj:null,
+				friendDefaultObj:{
+					name: '名字',
+					avatar: '/static/defaultAvatar.png'
+				},
+				
 				currentMode: 'pkMode', //pkMode calorieMode
 
 				bHitShake: false,
@@ -2638,7 +2652,12 @@
 			// 		duration: 1.5
 			// 	});
 			// },
-
+			
+			onNavToSelectFriend(){
+				uni.navigateTo({
+					url:'../../friend-page/select/select'
+				})
+			}
 		}
 	};
 </script>

util/util-css/main.css

@@ -853,6 +853,21 @@ button.cuIcon.lg {
 	background-color: #dd514c;
 }
 
+.cu-tag.badge-bottom {
+	border-radius: 200upx;
+	position: absolute;
+	bottom: 0upx;
+	right: -10upx;
+	font-size: 20upx;
+	padding: 0upx 10upx;
+	height: 28upx;
+	color: #ffffff;
+}
+
+.cu-tag.badge-bottom:not([class*="bg-"]) {
+	background-color: rgba(0,0,0,0);
+}
+
 .cu-tag:empty:not([class*="cuIcon-"]) {
 	padding: 0upx;
 	width: 16upx;