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

<template>
	<view>
		<uni-nav-bar id="nav-bar" status-bar="true" @clickLeft="onBack()" @clickRight="onNavSearchFriend()" title="我的好友"
			color="#000000" fixed="true" :border="false">
			<view slot="left">
				<view class=" flex align-center margin-left">
					<image class="p-left-arrow" src="../../../static/p-left-arrow.png"></image>
				</view>
			</view>
			<view slot="right">
				<view class=" flex align-center margin-left">
					<image class="p-left-arrow" src="../../../static/friend/add.png"></image>
				</view>
			</view>
		</uni-nav-bar>



		<view class="cu-list menu-avatar ">
			<view class="cu-item card-view" style="height: 180rpx;" v-for="(item, index) in friends" :key="index">
				<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; ">
					<button class="cu-btn round lines-gray text-13px"
						style=" line-height: 26rpx; white-space: nowrap; width: 146rpx; right: 30rpx;"
						@click="onDeleteInfo(item)">
						取消关注</button>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	import config from '../../../common/config.js';
	import reqUtil from '../../../util/util-js/requstUtil.js';

	export default {
		data() {
			return {
				friends: null
			}
		},
		onShow() {
			reqUtil.requestData(config.URL.GETFRIENDLIST, {}).then(
				res => {
					// console.log(JSON.stringify(res));
					this.friends = res.data.friends;

				},
				e => {
					console.log(e);
				}
			);
		},
		methods: {
			onBack() {
				uni.navigateBack({
					delta: 1
				})
			},
			onNavSearchFriend() {
				uni.navigateTo({
					url: "../search/search"
				})
			},
			onDeleteInfo(item) {
				uni.showToast({
					title: '删除中..',
					duration: 1000,
					icon: 'loading',
					mask: true
				})
				reqUtil.requestData(config.URL.DELETEFIRENDINFO, {
					id: item.friendId
				}).then(
					res => {
						console.log(JSON.stringify(res));
						var index0 = this.friends.findIndex(e => {
							if (item.friendId == e.friendId) {
								return true
							}
						})
						this.friends.splice(index0, 1);
						uni.showToast({
							title: '删除成功',
							duration: 1000,
							mask: true
						})
					},
					e => {
						console.log(e);
					}
				);
			}
		}
	}
</script>

<style>

</style>