ProAdvanced/pages/friend-page/select/select.vue

<template>
	<view >
		<view class="friend-bg">
			<image style="width: 750rpx;height: 406rpx;" src="../../../static/friend/friend-bg.png"></image>
		
		</view>
		<uni-nav-bar  id="nav-bar" status-bar="true" backgroundColor="rgba(0,0,0,0)"
			@clickLeft="onBack()"   fixed="true" :border="false">
			<view slot="left" >
				<view class="flex align-center " style="margin-left: 20rpx;">
					<image style="width: 22rpx; height: 42rpx;" src="../../../static/friend/back.png"></image>
				</view>
			</view>
			
	
		</uni-nav-bar>
		<view style="height: 35px;"></view>
		<scroll-view :style="{ height: scrollviewHight + 'px' }" scroll-y="true">
			<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 friends" :key="index" @click="onSelectIndex(index,item)">
					<view class="cu-avatar round lg"
						:style="[{ backgroundImage:'url('+item.avatarUrl+')' }]">
						<view class="cu-tag badge-bottom" >
							<image v-if="item.gender == 0" style="height: 32rpx;width: 32rpx;" src="../../../static/friend/boy.png"></image>
							<image v-if="item.gender == 1" style="height: 32rpx;width: 32rpx;" src="../../../static/friend/girl.png"></image>
						</view>
					</view>
					<view class="content" style="width: 360rpx;">
						<view class="text-grey">{{item.username}}</view>
						<view class="text-gray text-sm flex">
							<view class="text-cut">
								<text class="cuIcon-infofill text-red  margin-right-xs"></text>
								{{item.signature}}
							</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>
		</scroll-view>
		

		<!-- <view class="padding flex flex-direction" style="z-index: 10; 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>

<script>
	import config from '../../../common/config.js';
	import reqUtil from '../../../util/util-js/requstUtil.js';
	
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		computed: mapState(['systemInfo']),
		
		data() {
			return {
				selectIndex:-1,
				scrollviewHight:0,
				friends:[]
			}
		},
		onReady() {
			console.log(this.systemInfo);
			// 计算组件的高度
			this.scrollviewHight = this.systemInfo.windowHeight - 100;
		},
		onShow() {
			reqUtil.requestData(config.URL.GETFRIENDLIST, {}).then(
				res => {
					// console.log(JSON.stringify(res));
					this.friends = res.data.friends;
			
				},
				e => {
					console.log(e);
				}
			);
		},
		methods: {
			...mapMutations(['setFinallSelectFriendInfo'
			]),
			onSelectIndex(index,item){
				this.selectIndex = index;
				// console.log(item);
				this.setFinallSelectFriendInfo(item);
			},
			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;
	}

	.friend-select {
		/* box-sizing: content-box; */
		border: 4rpx solid #9797FF;
	}
</style>