wanzai_school_app/pages/intimacy/intimacy.vue

<template>
	<view class="intimacy">
		<!-- 顶部时间筛选区域 -->
		<view class="search">
			<uni-datetime-picker v-model="datetimerangeValue" type="datetimerange" rangeSeparator="至" :clear-icon="false" @change="getData" />
		</view>

		<!-- 亲密度信息区域 -->
		<view
			class="box"
			v-for="(item, index) in dataList"
			:key="index"
			:class="{
				box1: index === 0,
				box2: index === 1,
				box3: index === 2,
				box4: index === 3,
				box5: index === 4,
				box6: index === 5,
				box7: index === 6,
				box8: index === 7,
				box9: index === 8,
				box10: index === 9
			}"
		>
			<img v-if="index === 0" class="box_rank" src="@/static/images/4.png" />
			<img v-if="index === 1" class="box_rank" src="@/static/images/5.png" />
			<img v-if="index === 2" class="box_rank" src="@/static/images/6.png" />
			<!-- 头像区域 -->
			<img v-if="item.headImage" class="box_img" mode="aspectFill" :src="item.headImage" @click="handleClickImg(item)" />
			<img v-else class="box_img" mode="aspectFill" src="https://wanzai-1306339220.cos.ap-shanghai.myqcloud.com/excelModel/3.png" @click="handleClickImg(item)" />
			<!-- 学生信息区域 -->
			<view class="box_msg">
				<view class="msg_info">{{ item.relationName }} {{ item.className }}</view>
				<view class="msg_no">{{ item.cardNo }}</view>
			</view>
			<!-- 亲密度区域 -->
			<view class="box_intimacy">亲密度：{{ item.count }}</view>
		</view>

		<!-- 没有数据时展示的页面 -->
		<view v-if="!dataList.length" class="nodata">暂无数据</view>

		<!-- 底部本人信息区域 -->
		<view class="my">
			<img v-if="msg.headImage" class="mg_img" mode="aspectFill" :src="msg.headImage" />
			<img v-else class="mg_img" mode="aspectFill" src="https://wanzai-1306339220.cos.ap-shanghai.myqcloud.com/excelModel/3.png" />
			{{ msg.name }}的关系树
		</view>
	</view>
</template>

<script setup>
import { onLoad } from '@dcloudio/uni-app'
import { ref } from 'vue'
import dayjs from 'dayjs'
import { myRequest } from '@/utils/api.js'
import { decryptDes } from '@/utils/des.js'

// 当前学生信息
const msg = ref({})
// 时间筛选框绑定数据
const datetimerangeValue = ref()

// 亲密度数据数组
const dataList = ref([])

onLoad((options) => {
	msg.value = JSON.parse(decodeURIComponent(options.msg))

	// 获取前一天的时间
	let temData = Date.now() - 1000 * 60 * 60 * 24

	// 默认获取昨天的时间
	datetimerangeValue.value = [dayjs(temData).format('YYYY-MM-DD') + ' 00:00:00', dayjs(temData).format('YYYY-MM-DD') + ' 23:59:59']

	// 获取亲密度数据数组
	getData()
})

// 获取亲密度数据数组
const getData = async () => {
	const res = await myRequest({
		url: '/wanzai/api/smartRelation/getAppList',
		data: {
			currentPage: 1,
			pageCount: 10,
			userId: msg.value.id,
			startTime: datetimerangeValue.value[0],
			endTime: datetimerangeValue.value[1]
		}
	})
	// console.log(res)
	if (res.code == 200) {
		const result = JSON.parse(decryptDes(res.data))
		// console.log(result)
		dataList.value = result.list
	}
}

// 点击列表头像回调
const handleClickImg = (item) => {
	// console.log(item)

	msg.value.id = item.relationId
	msg.value.name = item.relationName
	msg.value.headImage = item.headImage
	getData()
}
</script>

<style lang="scss" scoped>
.intimacy {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100vh;
	background-image: url(https://wanzai-1306339220.cos.ap-shanghai.myqcloud.com/excelModel/3.png);
	background-size: 100% 100%;

	.search {
		display: flex;
		justify-content: space-evenly;
		padding: 0 30rpx;
		margin: 30rpx 0;
		height: 65rpx;
	}

	.box {
		position: absolute;
		display: flex;
		flex-direction: column;
		align-items: center;

		.box_rank {
			position: absolute;
			top: 0;
			left: 50%;
			width: 40rpx;
			height: 40rpx;
			transform: translate(-50%, -50%);
		}

		.box_img {
			width: 90rpx;
			height: 90rpx;
			border-radius: 50%;
			border: 2rpx solid #fff;
		}

		.box_msg {
			margin-top: -15rpx;
			padding: 0 20rpx;
			text-align: center;
			border-radius: 180rpx;
			background-color: #e3ffee;

			.msg_info {
				font-size: 20rpx;
			}

			.msg_no {
				margin: 5rpx 0;
				font-size: 14rpx;
				color: #000000;
			}
		}

		.box_intimacy {
			margin-top: 5rpx;
			padding: 5rpx 20rpx;
			font-size: 14rpx;
			border-radius: 130rpx;
			background-color: #bdbdbd;
		}
	}

	.box1 {
		top: 163rpx;
		left: 308rpx;
	}

	.box2 {
		top: 240rpx;
		left: 136rpx;
	}

	.box3 {
		top: 240rpx;
		left: 485rpx;
	}

	.box4 {
		top: 408rpx;
		left: 10rpx;
	}

	.box5 {
		top: 466rpx;
		left: 178rpx;
	}
	.box6 {
		top: 408rpx;
		left: 357rpx;
	}
	.box7 {
		top: 466rpx;
		left: 532rpx;
	}
	.box8 {
		top: 655rpx;
		left: 40rpx;
	}
	.box9 {
		top: 655rpx;
		left: 275rpx;
	}
	.box10 {
		top: 655rpx;
		left: 505rpx;
	}

	.nodata {
		position: absolute;
		top: 40%;
		left: 45%;
		color: #fff;
	}

	.my {
		position: absolute;
		bottom: 60rpx;
		left: 50%;
		transform: translateX(-50%);
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		align-items: center;
		height: 180rpx;
		color: #fff;
		font-size: 28rpx;

		.mg_img {
			width: 105rpx;
			height: 105rpx;
			object-fit: cover;
			border-radius: 50%;
			border: 2rpx solid #fff;
		}
	}
}
</style>